App.js changes and landing page changes
This commit is contained in:
parent
edeef42f5a
commit
17a20686d7
@ -1,4 +0,0 @@
|
||||
.mode csv
|
||||
.headers on
|
||||
.once salary_data.csv
|
||||
SELECT * FROM salary_data;
|
||||
115
src/App.js
115
src/App.js
@ -26,7 +26,7 @@ import InterestInventory from './components/InterestInventory.js';
|
||||
import Dashboard from './components/Dashboard.js';
|
||||
import UserProfile from './components/UserProfile.js';
|
||||
import FinancialProfileForm from './components/FinancialProfileForm.js';
|
||||
import MilestoneTracker from './components/MilestoneTracker.js';
|
||||
import CareerRoadmap from './components/CareerRoadmap.js';
|
||||
import Paywall from './components/Paywall.js';
|
||||
import OnboardingContainer from './components/PremiumOnboarding/OnboardingContainer.js';
|
||||
import MultiScenarioView from './components/MultiScenarioView.js';
|
||||
@ -43,16 +43,16 @@ function App() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Define premium paths (including /enhancing and /retirement)
|
||||
const premiumPaths = [
|
||||
'/milestone-tracker',
|
||||
'/paywall',
|
||||
'/financial-profile',
|
||||
'/multi-scenario',
|
||||
'/premium-onboarding',
|
||||
'/enhancing', // corrected spelling
|
||||
'/retirement',
|
||||
'/resume-optimizer',
|
||||
];
|
||||
const premiumPaths = [
|
||||
'/career-roadmap',
|
||||
'/paywall',
|
||||
'/financial-profile',
|
||||
'/multi-scenario',
|
||||
'/premium-onboarding',
|
||||
'/enhancing',
|
||||
'/retirement',
|
||||
'/resume-optimizer',
|
||||
];
|
||||
const showPremiumCTA = !premiumPaths.includes(location.pathname);
|
||||
|
||||
// We'll define "canAccessPremium" for user
|
||||
@ -166,7 +166,7 @@ function App() {
|
||||
`}
|
||||
onClick={() => navigate('/preparing')}
|
||||
>
|
||||
Prepare for Your Career
|
||||
Preparing for Your Career
|
||||
</Button>
|
||||
<div className="absolute top-full left-0 hidden group-hover:block bg-white border shadow-md w-56 z-50">
|
||||
{/* Only Educational Programs as submenu */}
|
||||
@ -180,35 +180,68 @@ function App() {
|
||||
</div>
|
||||
|
||||
{/* 3) Enhancing Your Career (Premium) */}
|
||||
<div className="relative group">
|
||||
<Button
|
||||
style={{ color: '#1f2937' }}
|
||||
className={`
|
||||
bg-white
|
||||
border border-gray-300
|
||||
hover:bg-gray-100
|
||||
hover:text-blue-700
|
||||
whitespace-nowrap
|
||||
text-xs sm:text-sm md:text-base
|
||||
font-semibold
|
||||
`}
|
||||
onClick={() => navigate('/enhancing')}
|
||||
>
|
||||
Enhancing Your Career
|
||||
{!canAccessPremium && (
|
||||
<span className="text-xs ml-1 text-gray-600">(Premium)</span>
|
||||
)}
|
||||
</Button>
|
||||
<div className="absolute top-full left-0 hidden group-hover:block bg-white border shadow-md w-56 z-50">
|
||||
<Link
|
||||
to="/resume-optimizer"
|
||||
className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
|
||||
<div className="relative group">
|
||||
<Button
|
||||
style={{ color: '#1f2937' }}
|
||||
className={`
|
||||
bg-white
|
||||
border border-gray-300
|
||||
hover:bg-gray-100
|
||||
hover:text-blue-700
|
||||
whitespace-nowrap
|
||||
text-xs sm:text-sm md:text-base
|
||||
font-semibold
|
||||
`}
|
||||
onClick={() => navigate('/enhancing')}
|
||||
>
|
||||
Resume Optimizer
|
||||
</Link>
|
||||
{/* Add more enhancing submenu items here if needed */}
|
||||
Enhancing Your Career
|
||||
{!canAccessPremium && (
|
||||
<span className="text-xs ml-1 text-gray-600">(Premium)</span>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* SUBMENU */}
|
||||
<div className="absolute top-full left-0 hidden group-hover:block bg-white border shadow-md w-56 z-50">
|
||||
<Link
|
||||
to="/career-roadmap"
|
||||
className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
|
||||
>
|
||||
Career Roadmap
|
||||
</Link>
|
||||
|
||||
{/* Optimize Resume */}
|
||||
<Link
|
||||
to="/resume-optimizer"
|
||||
className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
|
||||
>
|
||||
Optimize Resume
|
||||
</Link>
|
||||
|
||||
{/* Networking (placeholder) */}
|
||||
<Link
|
||||
to="/networking"
|
||||
className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
|
||||
>
|
||||
Networking
|
||||
</Link>
|
||||
|
||||
{/* Interview Help (placeholder) */}
|
||||
<Link
|
||||
to="/interview-help"
|
||||
className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
|
||||
>
|
||||
Interview Help
|
||||
</Link>
|
||||
|
||||
{/* Job Search (placeholder) */}
|
||||
<Link
|
||||
to="/job-search"
|
||||
className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
|
||||
>
|
||||
Job Search
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4) Retirement Planning (Premium) */}
|
||||
<div className="relative group">
|
||||
@ -369,10 +402,10 @@ function App() {
|
||||
|
||||
{/* Other Premium-only routes */}
|
||||
<Route
|
||||
path="/milestone-tracker"
|
||||
path="/career-roadmap"
|
||||
element={
|
||||
<PremiumRoute user={user}>
|
||||
<MilestoneTracker />
|
||||
<CareerRoadmap />
|
||||
</PremiumRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* src/components/MilestoneTracker.css */
|
||||
/* src/components/CareerRoadmap.css */
|
||||
|
||||
.milestone-tracker {
|
||||
width: 100%;
|
||||
@ -24,7 +24,7 @@ import CareerSelectDropdown from './CareerSelectDropdown.js';
|
||||
import MilestoneTimeline from './MilestoneTimeline.js';
|
||||
import ScenarioEditModal from './ScenarioEditModal.js';
|
||||
|
||||
import './MilestoneTracker.css';
|
||||
import './CareerRoadmap.css';
|
||||
import './MilestoneTimeline.css';
|
||||
|
||||
// --------------
|
||||
@ -264,7 +264,7 @@ function parseAiJson(rawText) {
|
||||
}
|
||||
}
|
||||
|
||||
export default function MilestoneTracker({ selectedCareer: initialCareer }) {
|
||||
export default function CareerRoadmap({ selectedCareer: initialCareer }) {
|
||||
const location = useLocation();
|
||||
const apiURL = process.env.REACT_APP_API_URL;
|
||||
|
||||
@ -64,7 +64,8 @@ const CareerSearch = ({ onCareerSelected }) => {
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<h3>Search for Career (select from suggestions)</h3>
|
||||
<h2>Search for Career (select from suggestions)</h2>
|
||||
<h3>We have an extensive database with thousands of recognized job titles. If you don’t see your exact title, please choose the closest match—this helps us provide the most accurate guidance.</h3>
|
||||
<input
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
|
||||
@ -14,30 +14,46 @@ function EnhancingLanding({ userProfile }) {
|
||||
<div className="min-h-screen bg-gray-50 py-8 px-4">
|
||||
<div className="max-w-4xl mx-auto space-y-10">
|
||||
|
||||
{/* Section 1: Current Career Status */}
|
||||
{/* Combined Section: Current Status & Next Steps */}
|
||||
<section className="bg-white shadow rounded-lg p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">📌 Where Am I Now?</h2>
|
||||
<EconomicProjections socCode={socCode} stateName={stateName} />
|
||||
</section>
|
||||
|
||||
{/* Section 2: Actionable Next Steps */}
|
||||
<section className="bg-white shadow rounded-lg p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">🚩 What's Next For Me?</h2>
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
📌 Your Current Status & Next Steps
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Identify your next career milestones with AI-driven recommendations and start advancing your career today.
|
||||
Evaluate where you are in your career and discover your upcoming
|
||||
milestones with our AI-driven recommendations.
|
||||
</p>
|
||||
<Button onClick={() => navigate('/milestone-tracker')}>Go to Milestone Tracker</Button>
|
||||
|
||||
{/* Show user’s current career data (if any) */}
|
||||
<EconomicProjections socCode={socCode} stateName={stateName} />
|
||||
|
||||
{/* Single button to go to "Career Roadmap" (formerly Milestone Tracker) */}
|
||||
<div className="mt-4">
|
||||
<Button onClick={() => navigate('/career-roadmap')}>
|
||||
Go to Career Roadmap
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Interactive Planning & Resume Optimization */}
|
||||
{/* Section: How Do I Get There? */}
|
||||
<section className="bg-white shadow rounded-lg p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">🚀 How Do I Get There?</h2>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Use our comprehensive planning tools to visualize career paths, optimize your resume, and explore financial scenarios.
|
||||
Accelerate your career growth with the right tools:
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button onClick={() => navigate('/resume-optimizer')}>Optimize Resume</Button>
|
||||
<Button onClick={() => navigate('/milestone-tracker')}>Plan Career & Finances</Button>
|
||||
<Button onClick={() => navigate('/resume-optimizer')}>
|
||||
Optimize Resume
|
||||
</Button>
|
||||
<Button onClick={() => navigate('/networking')}>
|
||||
Networking
|
||||
</Button>
|
||||
<Button onClick={() => navigate('/interview-help')}>
|
||||
Interview Help
|
||||
</Button>
|
||||
<Button onClick={() => navigate('/job-search')}>
|
||||
Job Search
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,17 +7,61 @@ function PreparingLanding() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
|
||||
<div className="max-w-2xl w-full bg-white shadow-lg rounded-lg p-8">
|
||||
<h1 className="text-3xl font-bold mb-4 text-center">
|
||||
<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 mb-6 text-center">
|
||||
Identify skills, education, or certifications you need, discover educational opportunities, and set clear milestones to start or transition into your next career.
|
||||
<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>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<Button onClick={() => navigate('/interest-inventory')}>Retake Interest Inventory</Button>
|
||||
<Button onClick={() => navigate('/educational-programs')}>Explore Education Options</Button>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
|
||||
@ -16,7 +16,7 @@ function RetirementLanding() {
|
||||
</p>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<Button onClick={() => navigate('/financial-profile')}>Update Financial Profile</Button>
|
||||
<Button onClick={() => navigate('/milestone-tracker')}>Set Retirement Milestones</Button>
|
||||
<Button onClick={() => navigate('/multi-scenario')}>Set Retirement Milestones and get AI help with planning</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
BIN
user_profile.db
BIN
user_profile.db
Binary file not shown.
Loading…
Reference in New Issue
Block a user