63 lines
2.4 KiB
JavaScript
63 lines
2.4 KiB
JavaScript
// src/components/PlanningLanding.jsx
|
|
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Button } from './ui/button.js';
|
|
|
|
function PlanningLanding() {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-aptiva-gray to-white p-6">
|
|
<div className="max-w-2xl w-full bg-white shadow-xl rounded-xl p-8 md:p-10">
|
|
{/* Header */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl md:text-4xl font-bold text-aptiva mb-2">
|
|
Planning Your Career
|
|
</h1>
|
|
<p className="text-gray-600 max-w-xl mx-auto text-sm md:text-base leading-relaxed">
|
|
Discover career options that match your interests, skills, and
|
|
potential. AptivaAI helps you explore ideal paths, understand
|
|
educational requirements, compare salaries, and analyze job market
|
|
trends—all in one place.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Options grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* Interest Inventory */}
|
|
<div className="flex flex-col border rounded-lg p-5 hover:shadow-md transition-colors">
|
|
<h2 className="text-lg font-semibold mb-2">Interest Inventory</h2>
|
|
<p className="text-sm text-gray-600 mb-4 flex-1">
|
|
Identify your interests and discover careers aligned with your
|
|
strengths.
|
|
</p>
|
|
<Button
|
|
className="w-full mt-auto bg-aptiva hover:bg-aptiva-dark text-white"
|
|
onClick={() => navigate('/interest-inventory')}
|
|
>
|
|
Take Inventory
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Career Explorer */}
|
|
<div className="flex flex-col border rounded-lg p-5 hover:shadow-md transition-colors">
|
|
<h2 className="text-lg font-semibold mb-2">Career Explorer</h2>
|
|
<p className="text-sm text-gray-600 mb-4 flex-1">
|
|
Research career profiles, job descriptions, salaries, and
|
|
employment outlooks.
|
|
</p>
|
|
<Button
|
|
className="w-full mt-auto bg-aptiva hover:bg-aptiva-dark text-white"
|
|
onClick={() => navigate('/career-explorer')}
|
|
>
|
|
Explore Careers
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PlanningLanding;
|