42 lines
2.0 KiB
JavaScript
42 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
function Stage({ label, value, sub, accent, to }) {
|
|
const body = (
|
|
<div className="text-center sm:text-left">
|
|
<div className="text-[11px] font-medium uppercase tracking-wider text-[#94A3B8]">{label}</div>
|
|
<div className={`text-[20px] sm:text-[26px] font-semibold mt-1 tracking-tight ${accent ? 'text-[#0A39DF]' : 'text-[#0F172A]'}`}>
|
|
{value}
|
|
</div>
|
|
{sub && <div className="text-[13px] text-[#64748B] mt-0.5">{sub}</div>}
|
|
</div>
|
|
);
|
|
return to ? (
|
|
<Link to={to} className="hover:opacity-80 transition-opacity">{body}</Link>
|
|
) : body;
|
|
}
|
|
|
|
export default function CareerTrajectory({ profile, nextPath, nextReady, futureRole, futureIncome }) {
|
|
const current = profile?.current_position || profile?.desired_position || 'Starting Out';
|
|
const next = nextPath?.target_role || nextPath?.name || 'Next Role';
|
|
return (
|
|
<section className="text-center pt-4 pb-12 sm:pt-8 sm:pb-20">
|
|
<span className="text-[12px] font-medium tracking-wide text-[#0A39DF] uppercase">Your Career</span>
|
|
<h1 className="text-[32px] sm:text-[44px] font-bold tracking-tight text-[#0F172A] mt-4 leading-[1.05]">
|
|
Everything revolves around your future.
|
|
</h1>
|
|
<p className="text-[15px] text-[#64748B] mt-4 max-w-sm mx-auto">
|
|
Not a university. A Career Acceleration Engine.
|
|
</p>
|
|
|
|
<div className="mt-12 sm:mt-16 flex flex-col sm:flex-row items-center justify-center gap-5 sm:gap-10">
|
|
<Stage label="Current" value={current} />
|
|
<ArrowRight className="w-4 h-4 text-[#CBD5E1] rotate-90 sm:rotate-0" />
|
|
<Stage label="Next Role" value={next} sub={`${nextReady}% ready`} accent to={nextPath ? '/university' : null} />
|
|
<ArrowRight className="w-4 h-4 text-[#CBD5E1] rotate-90 sm:rotate-0" />
|
|
<Stage label="Future" value={futureRole} sub={futureIncome || ' '} />
|
|
</div>
|
|
</section>
|
|
);
|
|
} |