App.js changes and landing page changes

export_salary.sql

@@ -1,4 +0,0 @@
-.mode csv
-.headers on
-.once salary_data.csv
-SELECT * FROM salary_data;

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';
@@ -44,15 +44,15 @@ function App() {
 
   // Define premium paths (including /enhancing and /retirement)
  const premiumPaths = [
-    '/milestone-tracker',
+  '/career-roadmap',
   '/paywall',
   '/financial-profile',
   '/multi-scenario',
   '/premium-onboarding',
-    '/enhancing',       // corrected spelling
+  '/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 */}
@@ -199,14 +199,47 @@ function App() {
                       <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"
                     >
-                    Resume Optimizer
+                      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>
-                  {/* Add more enhancing submenu items here if needed */}
                   </div>
                 </div>
 
@@ -369,10 +402,10 @@ function App() {
 
               {/* Other Premium-only routes */}
               <Route
-                path="/milestone-tracker"
+                path="/career-roadmap"
                 element={
                   <PremiumRoute user={user}>
-                    <MilestoneTracker />
+                    <CareerRoadmap />
                   </PremiumRoute>
                 }
               />

src/components/CareerRoadmap.css

@@ -1,4 +1,4 @@
-/* src/components/MilestoneTracker.css */
+/* src/components/CareerRoadmap.css */
 
 .milestone-tracker {
     width: 100%;

src/components/CareerRoadmap.js

@@ -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;
 

src/components/CareerSearch.js

@@ -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)}

src/components/EnhancingLanding.js

@@ -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>
 

src/components/PreparingLanding.js

@@ -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>
+
+        {/* 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>
   );

src/components/RetirementLanding.js

@@ -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>