Changed EnhancingLanding

src/components/EnhancingLanding.js

@@ -1,65 +1,66 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Button } from './ui/button.js';
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "./ui/button.js";
+import EconomicProjections from "./EconomicProjections.js";
 
-import EconomicProjections from './EconomicProjections.js';
+/* simple pill-style label */
+const Chip = ({ label }) => (
+  <span
+    className="
+      inline-flex items-center text-sm px-3 py-1
+      rounded-full bg-gray-100 text-gray-700
+      border border-gray-300
+    "
+  >
+    {label}
+    <span className="ml-1 text-xs text-green-600">✓ in Career Coach</span>
+  </span>
+);
 
-function EnhancingLanding({ userProfile }) {
+export default function EnhancingLanding({ userProfile }) {
   const navigate = useNavigate();
-
-  const socCode = userProfile?.socCode;
+  const socCode   = userProfile?.socCode;
   const stateName = userProfile?.state;
 
   return (
     <div className="min-h-screen bg-gray-50 py-8 px-4">
       <div className="max-w-4xl mx-auto space-y-10">
 
-        {/* Combined Section: Current Status & Next Steps */}
+        {/* 📌 Current status */}
         <section className="bg-white shadow rounded-lg p-6">
           <h2 className="text-2xl font-semibold mb-4">
-            📌 Your Current Status & Next Steps
+            📌 Your Current Status &amp; Next Steps
           </h2>
           <p className="text-gray-600 mb-4">
-            Evaluate where you are in your career and discover your upcoming
-            milestones with our AI-driven recommendations.
+            Evaluate where you are in your career and discover upcoming milestones with our AI&nbsp;recommendations.
           </p>
 
-          {/* 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 onClick={() => navigate("/career-roadmap")}>
+              Open Career Coach
             </Button>
           </div>
         </section>
 
-        {/* Section: How Do I Get There? */}
+        {/* 🚀 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">
-            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('/networking')}>
-              Networking
-            </Button>
-            <Button onClick={() => navigate('/interview-help')}>
-              Interview Help
-            </Button>
-            <Button onClick={() => navigate('/job-search')}>
-              Job Search
-            </Button>
+
+          <div className="flex flex-wrap gap-3">
+            <Chip label="Resume Optimizer" />
+            <Chip label="Networking" />
+            <Chip label="Interview Help" />
+            <Chip label="Job Search" />
           </div>
+
+          <p className="text-sm text-gray-500 mt-3">
+            All of these tools live inside the <strong>Career Coach</strong>. Open it any time using the button above.
+          </p>
         </section>
 
       </div>
     </div>
   );
 }
-
-export default EnhancingLanding;