71 lines
2.9 KiB
JavaScript
71 lines
2.9 KiB
JavaScript
import React from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Button } from './ui/button.js';
|
||
|
||
function PreparingLanding() {
|
||
const navigate = useNavigate();
|
||
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
|
||
<div className="max-w-3xl w-full bg-white shadow-lg rounded-lg p-8 space-y-6">
|
||
<h1 className="text-3xl font-bold text-center">
|
||
Preparing for Your (Next) Career
|
||
</h1>
|
||
<p className="text-gray-600 text-center">
|
||
Build the right skills and plan your education so you can confidently
|
||
enter (or transition into) your new career.
|
||
</p>
|
||
|
||
{/* Section: Choose Skills-Based vs. Formal Education */}
|
||
<section className="space-y-4">
|
||
<h2 className="text-xl font-semibold">Which Path Fits You?</h2>
|
||
<p className="text-gray-700">
|
||
We can help you identify whether a <strong>skills-based program</strong>
|
||
(certifications, bootcamps, on-the-job training) or a more
|
||
<strong> formal education route</strong> (two-year or four-year college)
|
||
is the best fit. Whichever path you choose, our AI tools will guide
|
||
you from application to graduation.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4">
|
||
{/* Explore Education Options (handles skill-based & formal) */}
|
||
<Button onClick={() => navigate('/educational-programs')}>
|
||
Plan My Education Path
|
||
</Button>
|
||
|
||
{/* How to Pay button (placeholder route) */}
|
||
<Button onClick={() => navigate('/how-to-pay')}>
|
||
How to Pay for Education
|
||
</Button>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Section: Tie-In to LoanRepayment or Additional Financial Planning */}
|
||
<section className="space-y-4">
|
||
<h2 className="text-xl font-semibold">Financing Your Future</h2>
|
||
<p className="text-gray-700">
|
||
Already have an idea of where you want to enroll?
|
||
We can help you compare costs, estimate student loan repayments,
|
||
and map out work-study or part-time opportunities.
|
||
Our integrated <strong>LoanRepayment</strong> tools will show you
|
||
realistic monthly payments so you can make confident choices.
|
||
</p>
|
||
</section>
|
||
|
||
{/* Optional: Retake Interest Inventory */}
|
||
<section className="space-y-3">
|
||
<h2 className="text-xl font-semibold">Still Exploring?</h2>
|
||
<p className="text-gray-700">
|
||
If you’d like to revisit career possibilities, feel free to retake
|
||
our Interest Inventory to see other matching paths.
|
||
</p>
|
||
<Button onClick={() => navigate('/interest-inventory')}>
|
||
Retake Interest Inventory
|
||
</Button>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default PreparingLanding;
|