Added homepage
This commit is contained in:
parent
6e45a4deca
commit
e6f98f9653
@ -1 +1 @@
|
||||
506c4d11372627a92e39ee44d85a809d000a0840-006fe5ea7fd8cb46290bcd0cf210f88f2ec04061-e9eccd451b778829eb2f2c9752c670b707e1268b
|
||||
ec484f55e8a48bee6d0e6223d06b815335ea5e74-006fe5ea7fd8cb46290bcd0cf210f88f2ec04061-e9eccd451b778829eb2f2c9752c670b707e1268b
|
||||
|
||||
@ -89,9 +89,9 @@ http {
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Redirect only the bare root to /signin (avoid booting shell at '/')
|
||||
# Redirect bare root to public home page
|
||||
location = / {
|
||||
return 302 /signin$is_args$args;
|
||||
return 302 /home$is_args$args;
|
||||
}
|
||||
location / {
|
||||
# First try the exact file, then directory with index.html, then directory/, then fallback
|
||||
|
||||
14
src/App.js
14
src/App.js
@ -50,6 +50,7 @@ import Verify from './components/Verify.js';
|
||||
import { initNetObserver } from './utils/net.js';
|
||||
import PrivacyPolicy from './components/PrivacyPolicy.js';
|
||||
import TermsOfService from './components/TermsOfService.js';
|
||||
import HomePage from './components/HomePage.js';
|
||||
|
||||
|
||||
|
||||
@ -229,7 +230,8 @@ if (loggingOut) return;
|
||||
location.pathname === '/signup' ||
|
||||
location.pathname === '/forgot-password' ||
|
||||
location.pathname === '/privacy' ||
|
||||
location.pathname === '/terms'
|
||||
location.pathname === '/terms' ||
|
||||
location.pathname === '/home'
|
||||
) {
|
||||
try { localStorage.removeItem('id'); } catch {}
|
||||
setIsAuthenticated(false);
|
||||
@ -257,7 +259,7 @@ if (loggingOut) return;
|
||||
clearToken();
|
||||
setIsAuthenticated(false);
|
||||
setUser(null);
|
||||
// Only kick to /signin if you’re not already on a public page
|
||||
// Only kick to /signin if you're not already on a public page
|
||||
const p = location.pathname;
|
||||
const onPublic =
|
||||
p === '/signin' ||
|
||||
@ -266,7 +268,8 @@ if (loggingOut) return;
|
||||
p.startsWith('/reset-password') ||
|
||||
p === '/paywall' ||
|
||||
p === '/privacy' ||
|
||||
p === '/terms';
|
||||
p === '/terms' ||
|
||||
p === '/home';
|
||||
if (!onPublic) navigate('/signin?session=expired', { replace: true });
|
||||
} finally {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
@ -804,10 +807,13 @@ const cancelLogout = () => {
|
||||
{/* MAIN CONTENT */}
|
||||
<main className="flex-1 p-4 md:p-6">
|
||||
<Routes>
|
||||
{/* Public Home Page */}
|
||||
<Route path="/home" element={<HomePage />} />
|
||||
|
||||
{/* Default */}
|
||||
<Route
|
||||
path="/"
|
||||
element={<Navigate to={isAuthenticated ? AUTH_HOME : '/signin'} replace />}
|
||||
element={<Navigate to={isAuthenticated ? AUTH_HOME : '/home'} replace />}
|
||||
/>
|
||||
|
||||
<Route path="/reset-password/:token" element={<ResetPasswordGate />} />
|
||||
|
||||
647
src/components/HomePage.js
Normal file
647
src/components/HomePage.js
Normal file
@ -0,0 +1,647 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Button } from './ui/button.js';
|
||||
import { cn } from '../utils/cn.js';
|
||||
|
||||
export default function HomePage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-b from-aptiva-gray to-white py-16 md:py-24 px-4">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
|
||||
Plan Your Career with{' '}
|
||||
<span className="text-aptiva">Confidence</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-8 leading-relaxed">
|
||||
Evidence-based career guidance powered by official U.S. government data.
|
||||
Discover careers, plan your education, chart your roadmap, and prepare for
|
||||
retirement—all in one platform.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-aptiva hover:bg-aptiva-dark text-white px-8 py-6 text-lg font-semibold rounded-lg shadow-lg"
|
||||
onClick={() => navigate('/signup')}
|
||||
>
|
||||
Create Free Account
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-2 border-aptiva text-aptiva hover:bg-aptiva-gray px-8 py-6 text-lg font-semibold rounded-lg"
|
||||
onClick={() => navigate('/signin')}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-4">
|
||||
Free forever · No credit card required · Full access to career planning tools
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Trust Indicators - Comprehensive Data Sources */}
|
||||
<section className="py-12 px-4 bg-white border-y">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<p className="text-center text-sm font-semibold text-gray-500 uppercase tracking-wide mb-6">
|
||||
Built on Official U.S. Government Data—Not Guesswork
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="p-4 border rounded-lg bg-gray-50">
|
||||
<div className="text-xl font-bold text-aptiva mb-2">Bureau of Labor Statistics (BLS)</div>
|
||||
<p className="text-sm text-gray-600">Complete SOC career database—the federal standard for career classification. Regional & national salary data across all percentiles (10/25/50/75/90).</p>
|
||||
</div>
|
||||
<div className="p-4 border rounded-lg bg-gray-50">
|
||||
<div className="text-xl font-bold text-aptiva mb-2">O*NET Database</div>
|
||||
<p className="text-sm text-gray-600">Occupational Information Network from U.S. Department of Labor. Validated RIASEC interest assessments, detailed job descriptions, tasks, and skills requirements.</p>
|
||||
</div>
|
||||
<div className="p-4 border rounded-lg bg-gray-50">
|
||||
<div className="text-xl font-bold text-aptiva mb-2">IPEDS Education Data</div>
|
||||
<p className="text-sm text-gray-600">Integrated Postsecondary Education Data System. Complete CIP code listings, tuition costs (in-state/out-of-state), and program credentials nationwide.</p>
|
||||
</div>
|
||||
<div className="p-4 border rounded-lg bg-gray-50">
|
||||
<div className="text-xl font-bold text-aptiva mb-2">State Labor Market Agencies</div>
|
||||
<p className="text-sm text-gray-600">Economic projections by state and nationally. Employment growth forecasts, base year vs. projected job counts, and annual openings estimates.</p>
|
||||
</div>
|
||||
<div className="p-4 border rounded-lg bg-gray-50">
|
||||
<div className="text-xl font-bold text-aptiva mb-2">Classification Systems</div>
|
||||
<p className="text-sm text-gray-600">Standard Occupational Classification (SOC) codes and Classification of Instructional Programs (CIP) codes—linking careers to educational pathways.</p>
|
||||
</div>
|
||||
<div className="p-4 border rounded-lg bg-gray-50">
|
||||
<div className="text-xl font-bold text-aptiva mb-2">Google Maps Geolocation</div>
|
||||
<p className="text-sm text-gray-600">Distance calculations to schools, driving times, and regional cost-of-living context for career and education planning.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-xs text-gray-500 mt-6 max-w-3xl mx-auto">
|
||||
AptivaAI uses the same authoritative data sources that career counselors, government agencies, and educational institutions rely on—delivered in an integrated, easy-to-use platform.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Four Pillars Section */}
|
||||
<section className="py-16 md:py-24 px-4 bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Your Complete Career Journey
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
From discovery to retirement, AptivaAI guides you through every stage
|
||||
of your professional life.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* Planning */}
|
||||
<div className="bg-white rounded-xl shadow-md p-8 hover:shadow-xl transition-shadow">
|
||||
<div className="flex items-start mb-4">
|
||||
<div className="bg-aptiva/10 rounded-lg p-3 mr-4">
|
||||
<svg className="w-8 h-8 text-aptiva" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">
|
||||
1. Planning Your Career
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Discover careers that match your interests with our science-backed
|
||||
60-question Interest Inventory based on the RIASEC model.
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Complete career database - every professional career tracked by the U.S. government</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Regional and national salary data from Bureau of Labor Statistics</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Compare careers across 6 dimensions: interests, meaning, stability, growth, balance, recognition</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preparing */}
|
||||
<div className="bg-white rounded-xl shadow-md p-8 hover:shadow-xl transition-shadow">
|
||||
<div className="flex items-start mb-4">
|
||||
<div className="bg-aptiva/10 rounded-lg p-3 mr-4">
|
||||
<svg className="w-8 h-8 text-aptiva" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">
|
||||
2. Preparing & Upskilling
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Find the right educational path with comprehensive school and program data
|
||||
from the Integrated Postsecondary Education Data System.
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Search educational programs by career or CIP code</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Real tuition costs and distance calculations to schools</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Education loan repayment calculator</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhancing */}
|
||||
<div className="bg-white rounded-xl shadow-md p-8 hover:shadow-xl transition-shadow border-2 border-green-500">
|
||||
<div className="flex items-start mb-4">
|
||||
<div className="bg-green-500/10 rounded-lg p-3 mr-4">
|
||||
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-xl font-bold text-gray-900">
|
||||
3. Enhancing Your Career
|
||||
</h3>
|
||||
<span className="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">
|
||||
PREMIUM
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Chart your career trajectory with AI-powered guidance and financial
|
||||
projections that show the impact of every decision.
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>AI Career Coach powered by GPT-4o for personalized milestone recommendations</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>20+ year financial projections modeling salary, expenses, savings, and debt</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Resume optimizer tailored to specific job descriptions (2-5/week)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Retirement */}
|
||||
<div className="bg-white rounded-xl shadow-md p-8 hover:shadow-xl transition-shadow border-2 border-green-500">
|
||||
<div className="flex items-start mb-4">
|
||||
<div className="bg-green-500/10 rounded-lg p-3 mr-4">
|
||||
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-xl font-bold text-gray-900">
|
||||
4. Retirement Planning
|
||||
</h3>
|
||||
<span className="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">
|
||||
PREMIUM
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Model different retirement scenarios and see which strategies get you
|
||||
to your goals. Currently in beta.
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Compare up to 2 retirement scenarios side-by-side</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Model contribution strategies, loan payoffs, and savings growth</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>AI Retirement Advisor for strategy suggestions</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why AptivaAI - Competitive Advantages */}
|
||||
<section className="py-16 md:py-24 px-4 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Why Choose AptivaAI?
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
We combine the best of government data, financial modeling, and AI
|
||||
to give you career guidance you can trust.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="bg-aptiva/10 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-aptiva" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Evidence-Based</h3>
|
||||
<p className="text-gray-600">
|
||||
Built on validated RIASEC career assessment and official federal data—not
|
||||
guesswork or algorithms trained on biased samples.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="bg-aptiva/10 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-aptiva" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Integrated</h3>
|
||||
<p className="text-gray-600">
|
||||
Career discovery, education planning, financial projections, and AI coaching
|
||||
in one seamless platform—no more juggling multiple tools.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="bg-aptiva/10 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-aptiva" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Affordable</h3>
|
||||
<p className="text-gray-600">
|
||||
Premium features start at just $4.99/month—less than a coffee per week.
|
||||
Free tier includes comprehensive career exploration tools.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Preview */}
|
||||
<section className="py-16 md:py-24 px-4 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Simple, Transparent Pricing
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Start free, upgrade when you need advanced planning tools
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
{/* Free */}
|
||||
<div className="bg-white rounded-xl shadow-md p-8 border-2 border-gray-200">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">Free</h3>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-gray-900">$0</span>
|
||||
<span className="text-gray-600">/forever</span>
|
||||
</div>
|
||||
<ul className="space-y-3 mb-8 text-sm">
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Interest Inventory assessment</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>800+ career profiles with salary data</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Career comparison tool</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Educational programs search</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Loan repayment calculator</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Basic support chatbot</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Button
|
||||
className="w-full bg-gray-200 hover:bg-gray-300 text-gray-900"
|
||||
onClick={() => navigate('/signup')}
|
||||
>
|
||||
Get Started Free
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Premium */}
|
||||
<div className="bg-white rounded-xl shadow-xl p-8 border-4 border-aptiva relative">
|
||||
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<span className="bg-aptiva text-white text-xs font-bold px-4 py-1 rounded-full">
|
||||
RECOMMENDED
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">Premium</h3>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-aptiva">$24</span>
|
||||
<span className="text-gray-600">/month</span>
|
||||
<p className="text-sm text-gray-500">or $240/year (save 17%)</p>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-aptiva mb-4">Everything in Free, plus:</p>
|
||||
<ul className="space-y-3 mb-8 text-sm">
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>AI Career Coach powered by GPT-4o</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Career Roadmap with milestone tracking</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>20+ year financial projections</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Multiple career scenarios & comparisons</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Retirement planner (beta)</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>AI Resume optimizer (2 per week)</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<svg className="w-5 h-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Career & college profile management</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Button
|
||||
className="w-full bg-aptiva hover:bg-aptiva-dark text-white"
|
||||
onClick={() => navigate('/signup')}
|
||||
>
|
||||
Start Premium
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works */}
|
||||
<section className="py-16 md:py-24 px-4 bg-white">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
How AptivaAI Works
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Get started in minutes with our simple, guided process
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-aptiva text-white rounded-full flex items-center justify-center font-bold text-xl mr-6">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Take the Interest Inventory</h3>
|
||||
<p className="text-gray-600">
|
||||
Complete our 60-question assessment based on the proven RIASEC career model.
|
||||
Takes about 10-15 minutes and provides scientifically-backed career matches.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-aptiva text-white rounded-full flex items-center justify-center font-bold text-xl mr-6">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Explore Career Options</h3>
|
||||
<p className="text-gray-600">
|
||||
Review personalized career suggestions with real salary data, job outlook,
|
||||
and educational requirements. Compare careers side-by-side to find your best fit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-aptiva text-white rounded-full flex items-center justify-center font-bold text-xl mr-6">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">Plan Your Education</h3>
|
||||
<p className="text-gray-600">
|
||||
Find schools and programs that match your target career. See real tuition costs,
|
||||
distances, and calculate student loan repayment scenarios.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-green-600 text-white rounded-full flex items-center justify-center font-bold text-xl mr-6">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">
|
||||
Chart Your Roadmap <span className="text-sm text-green-600">(Premium)</span>
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Create a detailed career roadmap with milestones, financial projections, and
|
||||
AI-powered guidance. See exactly how each decision impacts your financial future.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-16 md:py-24 px-4 bg-white">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="border-b pb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
How is AptivaAI different from free career sites like O*NET?
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
While O*NET provides excellent career data, AptivaAI integrates that data with
|
||||
financial planning, education search, AI coaching, and personalized roadmaps.
|
||||
We turn raw career information into actionable plans with real financial projections.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-b pb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
Is the financial advice accurate?
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Our projections model YOUR specific situation based on assumptions you control.
|
||||
Salary data comes directly from the Bureau of Labor Statistics. However, projections
|
||||
are educational tools, not guarantees. We're not registered investment advisors—
|
||||
consult a financial professional for personalized advice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-b pb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
What's included in the free tier?
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
You get full access to the Interest Inventory, Career Explorer with 800+ careers,
|
||||
salary data, career comparison tools, educational program search, and loan
|
||||
repayment calculator. That's enough to make informed career and education decisions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-b pb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
Can I cancel my Premium subscription anytime?
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Yes! Cancel anytime through your account settings with no penalties. Your
|
||||
subscription remains active until the end of your billing period.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-b pb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
Does AptivaAI help me find jobs or apply?
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
No, we focus on career planning and financial modeling, not job search or
|
||||
applications. Think of us as your career strategy tool—complementary to
|
||||
job boards like LinkedIn or Indeed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
How does the AI Career Coach work?
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Our AI Coach uses GPT-4o and has context about your career profile, financial
|
||||
situation, and goals. It provides personalized milestone recommendations, answers
|
||||
career planning questions, and helps you think through major decisions. Premium feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="py-16 md:py-24 px-4 bg-gradient-to-r from-aptiva to-aptiva-dark text-white">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-6">
|
||||
Ready to Take Control of Your Career?
|
||||
</h2>
|
||||
<p className="text-xl mb-8 opacity-90">
|
||||
Create your free account in minutes. Start with career discovery tools,
|
||||
then upgrade to Premium ($24/month) when you're ready for AI coaching
|
||||
and financial planning.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-aptiva hover:bg-gray-100 px-8 py-6 text-lg font-semibold rounded-lg shadow-xl"
|
||||
onClick={() => navigate('/signup')}
|
||||
>
|
||||
Create Free Account
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-2 border-white text-white hover:bg-white/10 px-8 py-6 text-lg font-semibold rounded-lg"
|
||||
onClick={() => navigate('/signin')}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm mt-6 opacity-75">
|
||||
No credit card required · Upgrade anytime
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user