Header UI

postcss.config.js

@@ -1,8 +1,8 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}
 
 

src/App.js

@@ -8,6 +8,7 @@ import {
   Link,
 } from 'react-router-dom';
 import { Button } from './components/ui/button.js';
+import { cn } from './utils/cn.js';
 
 // Import all components
 import PremiumRoute from './components/PremiumRoute.js';
@@ -41,18 +42,20 @@ function App() {
   const [user, setUser] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
 
-  // If you want Resume Optimizer to be considered a "premium path" too:
+  // Define premium paths (including /enhancing and /retirement)
   const premiumPaths = [
     '/milestone-tracker',
     '/paywall',
     '/financial-profile',
     '/multi-scenario',
     '/premium-onboarding',
-    '/resume-optimizer', // add it here if you want
+    '/enhancing',       // corrected spelling
+    '/retirement',
+    '/resume-optimizer',
   ];
   const showPremiumCTA = !premiumPaths.includes(location.pathname);
 
-  // 2) We'll define "canAccessPremium" to handle *both* is_premium or is_pro_premium
+  // We'll define "canAccessPremium" for user
   const canAccessPremium = user?.is_premium || user?.is_pro_premium;
 
   // Rehydrate user if there's a token
@@ -63,7 +66,7 @@ function App() {
       return;
     }
 
-    // Validate token/fetch user
+    // Validate token/fetch user profile
     fetch('https://dev1.aptivaai.com/api/user-profile', {
       headers: { Authorization: `Bearer ${token}` },
     })
@@ -106,118 +109,184 @@ function App() {
   return (
     <div className="flex min-h-screen flex-col bg-gray-50 text-gray-800">
       {/* Header */}
-      <header className="flex items-center justify-between border-b bg-white px-6 py-4 shadow-sm">
+      <header className="flex items-center justify-between border-b bg-white px-6 py-4 shadow-sm relative">
-        <div className="flex items-center space-x-8">
         <h1 className="text-lg font-semibold">
           AptivaAI - Career Guidance Platform (beta)
         </h1>
 
         {isAuthenticated && (
-            <nav>
+          <>
-              <ul className="flex space-x-4">
+            {/* NAV MENU */}
-                {/* Free sections */}
+            <nav className="flex space-x-6">
-                <li>
+              {/* 1) Find Your Career */}
-                  <Link className="text-blue-600 hover:text-blue-800" to="/getting-started">
+              <div className="relative group">
-                    Getting Started
+                <Button
-                  </Link>
+                  style={{ color: '#1f2937' }}
-                </li>
+                  className={`
-                <li>
+                    bg-white 
-                  <Link className="text-blue-600 hover:text-blue-800" to="/career-explorer">
+                    border border-gray-300
+                    hover:bg-gray-100
+                    hover:text-blue-700
+                    whitespace-nowrap
+                    text-xs sm:text-sm md:text-base
+                    font-semibold
+                  `}
+                >
+                  Find Your Career
+                </Button>
+                <div className="absolute top-full left-0 hidden group-hover:block bg-white border shadow-md w-48 z-50">
+                  <Link
+                    to="/career-explorer"
+                    className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
+                  >
                     Career Explorer
                   </Link>
-                </li>
+                  <Link
-                <li>
+                    to="/interest-inventory"
-                  <Link className="text-blue-600 hover:text-blue-800" to="/educational-programs">
+                    className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
-                    Skills/Educational Planner
+                  >
-                  </Link>
-                </li>
-                <li>
-                  <Link className="text-blue-600 hover:text-blue-800" to="/interest-inventory">
                     Interest Inventory
                   </Link>
-                </li>
+                </div>
-                <li>
-                  <Link className="text-blue-600 hover:text-blue-800" to="/profile">
-                    Profile
-                  </Link>
-                </li>
-  
-                {/* Premium sections */}
-                <li>
-                  {user?.is_premium ? (
-                    <Link className="text-blue-600 hover:text-blue-800" to="/milestone-tracker">
-                      Career Planner
-                    </Link>
-                  ) : (
-                    <span className="text-gray-400 cursor-not-allowed">
-                      Career/Financial Planner{' '}
-                      <span className="text-green-600">(Premium)</span>
-                    </span>
-                  )}
-                </li>
-                <li>
-                  {user?.is_premium ? (
-                    <Link className="text-blue-600 hover:text-blue-800" to="/financial-profile">
-                      Financial Profile
-                    </Link>
-                  ) : (
-                    <span className="text-gray-400 cursor-not-allowed">
-                      Financial Profile{' '}
-                      <span className="text-green-600">(Premium)</span>
-                    </span>
-                  )}
-                </li>
-                <li>
-                  {user?.is_premium ? (
-                    <Link className="text-blue-600 hover:text-blue-800" to="/multi-scenario">
-                      Multi Scenario
-                    </Link>
-                  ) : (
-                    <span className="text-gray-400 cursor-not-allowed">
-                      Compare Career/Financial Scenarios{' '}
-                      <span className="text-green-600">(Premium)</span>
-                    </span>
-                  )}
-                </li>
-                <li>
-                  {canAccessPremium ? (
-                    <Link className="text-blue-600 hover:text-blue-800" to="/resume-optimizer">
-                      Resume Optimizer
-                    </Link>
-                  ) : (
-                    <span className="text-gray-400 cursor-not-allowed">
-                      Resume Optimizer{' '}
-                      <span className="text-green-600">(Premium)</span>
-                    </span>
-                  )}
-                </li>
-              </ul>
-            </nav>
-          )}
               </div>
 
-        {/* Grouped Logout and Upgrade buttons */}
+              {/* 2) Prepare for Your Career */}
-        {isAuthenticated && (
+              <div className="relative group">
-          <div className="flex items-center space-x-4">
+                <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
+                  `}
+                >
+                  Prepare for Your Career
+                </Button>
+                <div className="absolute top-full left-0 hidden group-hover:block bg-white border shadow-md w-56 z-50">
+                  <Link
+                    to="/preparing"
+                    className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
+                  >
+                    Preparing Landing
+                  </Link>
+                  <Link
+                    to="/educational-programs"
+                    className="block px-4 py-2 hover:bg-gray-100 text-sm text-gray-700"
+                  >
+                    Educational Programs
+                  </Link>
+                </div>
+              </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
+                  `}
+                >
+                  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">
+                  {/* Add your premium sub-links here */}
+                </div>
+              </div>
+
+              {/* 4) Retirement Planning (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
+                  `}
+                >
+                  Retirement Planning
+                  {!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">
+                  {/* Add your premium sub-links here */}
+                </div>
+              </div>
+
+              {/* 5) Profile */}
+              <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
+                    min-w-0
+                    max-w-[90px]
+                    truncate
+                  `}
+                >
+                  Profile
+                </Button>
+                <div className="absolute top-full left-0 hidden group-hover:block bg-white border shadow-md w-48 z-50">
+                  {/* Account Profile, Financial Profile links */}
+                </div>
+              </div>
+            </nav>
+
+            {/* LOGOUT + UPGRADE BUTTONS */}
+            <div className="flex items-center space-x-4 ml-4 relative z-10">
+              {showPremiumCTA && !canAccessPremium && (
+                <Button
+                  className="
+                    bg-green-500 hover:bg-green-600
+                    max-w-fit text-center text-white
+                    px-3 py-2
+                    rounded
+                    whitespace-nowrap
+                    text-sm
+                    font-semibold
+                    shadow
+                  "
+                  style={{ minWidth: 0, width: 'auto' }}
+                  onClick={() => navigate('/paywall')}
+                >
+                  Upgrade to Premium
+                </Button>
+              )}
               <button
                 className="text-red-600 hover:text-red-800 bg-transparent border-none"
                 onClick={handleLogout}
               >
                 Logout
               </button>
-        
-          {showPremiumCTA && !canAccessPremium && (
-            <Button
-            className="bg-green-600 hover:bg-green-700 max-w-fit text-center"
-            onClick={() => navigate('/paywall')}
-          >
-            Upgrade to Premium
-          </Button>
-          )}
             </div>
+          </>
         )}
       </header>
 
+
       {/* Main Content */}
       <main className="flex-1 p-6">
         <Routes>
@@ -245,12 +314,31 @@ function App() {
               <Route path="/profile" element={<UserProfile />} />
               <Route path="/planning" element={<PlanningLanding />} />
               <Route path="/career-explorer" element={<CareerExplorer />} />
-              <Route path="/educational-programs" element={<EducationalProgramsPage/>}/>
+              <Route path="/educational-programs" element={<EducationalProgramsPage />} />
               <Route path="/preparing" element={<PreparingLanding />} />
-              <Route path="/enhancing" element={<EnhancingLanding />} />
-              <Route path="/retirement" element={<RetirementLanding />} />
 
-              {/* Premium-only routes */}
+              {/* 
+                1) EnhancingLanding is premium-only
+                2) RetirementLanding is premium-only
+              */}
+              <Route
+                path="/enhancing"
+                element={
+                  <PremiumRoute user={user}>
+                    <EnhancingLanding />
+                  </PremiumRoute>
+                }
+              />
+              <Route
+                path="/retirement"
+                element={
+                  <PremiumRoute user={user}>
+                    <RetirementLanding />
+                  </PremiumRoute>
+                }
+              />
+
+              {/* Other Premium-only routes */}
               <Route
                 path="/milestone-tracker"
                 element={
@@ -305,7 +393,6 @@ function App() {
       <SessionExpiredHandler />
     </div>
   );
-  
 }
 
 export default App;

src/components/CareerExplorer.js

@@ -723,7 +723,7 @@ function CareerExplorer() {
 
       <div className="flex justify-between items-center mb-4">
         <h2 className="text-xl font-semibold">
-          Explore Careers - use the tools below to find your perfect career
+          Explore Careers - use these tools to find your best fit
         </h2>
         <CareerSearch
           onCareerSelected={(careerObj) => {

src/components/EducationalProgramsPage.js

@@ -102,7 +102,7 @@ function EducationalProgramsPage() {
       'You’re about to move to the financial planning portion of the app, which is reserved for premium subscribers. Do you want to continue?'
     );
     if (proceed) {
-      navigate('/financial-planner', { state: { selectedSchool: school } });
+      navigate('/milestone-tracker', { state: { selectedSchool: school } });
     };
   };
 

src/components/PopoutPanel.css

@@ -1,378 +0,0 @@
-.popout-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 60%; /* Increase width for larger screens */
-  height: 100%;
-  background-color: #fff;
-  box-shadow: -3px 0 5px rgba(0, 0, 0, 0.3);
-  padding: 20px;
-  overflow-y: auto;
-  transform: translateX(0); /* Ensure visibility by default */
-  transition: transform 0.3s ease-in-out;
-  z-index: 1000; /* Ensures it is above other elements */
-  box-sizing: border-box; /* Ensures padding is included in width calculation */
-}
-
-.popout-panel.hidden {
-  display: none;
-}
-
-.popout-panel.visible {
-  display: block;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-/* Mobile responsiveness */
-@media (max-width: 768px) {
-  .popout-panel {
-    width: 100%; /* Use full width for smaller screens */
-    height: 100%; /* Cover full height */
-    left: 0; /* Ensure it appears on the left for mobile */
-    right: unset; /* Override right alignment */
-  }
-
-  .schools-offering {
-    grid-template-columns: 1fr; /* Single column layout for smaller screens */
-  }
-}
-
-/* Close button adjustments for mobile */
-.close-btn {
-  background-color: #dc3545;
-  color: #fff;
-  border: none;
-  padding: 8px 12px;
-  font-size: 1rem;
-  cursor: pointer;
-  z-index: 1001; /* Keep button above the panel */
-}
-
-.plan-path-btn {
-  background-color: #4A90E2;
-  color: white;
-  border: none;
-  padding: 10px 15px;
-  cursor: pointer;
-  font-size: 16px;
-  border-radius: 5px;
-  text-align: center;
-}
-
-/* Job Description and Expected Tasks section */
-.section {
-  margin-bottom: 20px;
-}
-
-.job-description,
-.expected-tasks {
-  padding: 10px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background-color: #f9f9f9;
-}
-
-/* Expected Tasks Styling */
-.expected-tasks {
-  padding: 15px;
-  background-color: #fafafa;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  margin-top: 20px;
-}
-
-.expected-tasks ul {
-  list-style-position: inside; /* Move the bullets inside, aligning them with text */
-  padding-left: 20px; /* Add space between the bullet and the text */
-  margin: 0;
-  text-align: left; /* Align the text to the left */
-}
-
-.expected-tasks li {
-  margin-bottom: 15px; /* Space between each task */
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ddd;
-  font-size: 1rem;
-}
-
-/* Title and task text styling */
-.expected-tasks h3 {
-  margin-bottom: 15px;
-  font-size: 1.2rem;
-  font-weight: bold;
-  border-bottom: 2px solid #ccc;
-  padding-bottom: 5px;
-}
-
-.expected-tasks p {
-  font-size: 1rem;
-  color: #666;
-}
-
-/* Specific styles for Popout Panel */
-.popout-panel .filter-container {
-  display: block;
-  gap: 15px;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-.popout-panel .filter-group {
-  display: block;
-  gap: 5px;
-  padding-right: 20px; 
-  padding-left: 20px;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  box-sizing: border-box;
-}
-
-.popout-panel .filter-group label {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 2px;
-  white-space: nowrap;
-}
-
-.popout-panel .filter-group input[type="range"] {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.popout-panel .range-labels {
-  display: flex;
-  font-size: 0.9rem;
-}
-
-/* Schools section: Grid layout with clear separation */
-.schools-offering {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Adjust the minimum size of each column */
-  gap: 20px; /* Space between columns */
-  margin-top: 20px;
-  width: 100%; /* Ensure it uses full width of its container */
-  text-align: center;
-  justify-content: center; /* Centers grid elements horizontally */
-}
-
-.no-schools-message {
-  text-align: center;
-  width: 100%;
-  grid-column: 1 / -1; /* Forces the message to span all columns */
-  justify-self: center; /* Centers text horizontally */
-  align-self: center; /* Centers text vertically */
-  font-style: italic; /* Optional: Stylize the message */
-  padding: 20px 0; /* Adds spacing */
-}
-
-.schools-offering .school-card {
-  border: 1px solid #ddd;
-  padding: 15px;
-  background-color: #f9f9f9;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-}
-
-.schools-offering .school-card div {
-  margin-bottom: 8px;
-}
-
-.school-info {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* Salary Data Section */
-.salary-data {
-  margin-top: 20px;
-  padding: 15px;
-  background-color: #fafafa;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-}
-
-.salary-data table {
-  width: 60%;
-  border-collapse: collapse;
-  margin: 0 auto 20px; /* This centers the table */
-}
-
-.salary-data th, .salary-data td {
-  padding: 10px;
-  text-align: center;
-  border-bottom: 1px solid #ddd;
-}
-
-.salary-data th {
-  background-color: #f0f0f0;
-  font-weight: bold;
-}
-
-.salary-data td {
-  font-size: 1rem;
-  text-align: center; 
-}
-
-.salary-data td:last-child {
-  text-align: center;
-}
-
-/* Economic Projections Section */
-.economic-projections {
-  margin-top: 20px;
-  padding: 15px;
-  background-color: #fafafa;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-}
-
-.economic-projections ul {
-  padding-left: 20px;
-  list-style-position: inside;
-  font-size: 1rem;
-  margin: 0;
-}
-
-.economic-projections li {
-  margin-bottom: 10px;
-}
-
-/* Loan Repayment Section Styling */
-.loan-repayment-container {
-  padding: 20px;
-  background-color: #fafafa;
-  border-radius: 8px;
-}
-
-.loan-repayment-fields label {
-  display: block;
-  margin-bottom: 10px;
-  font-weight: bold;
-  font-size: 1rem;
-}
-
-.loan-repayment-fields input,
-.loan-repayment-fields select {
-  height: 40px;
-  padding: 0 10px;
-  font-size: 1rem;
-  width: 100%;
-  box-sizing: border-box;
-  margin-bottom: 15px;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-}
-
-.loan-repayment-fields button {
-  width: 100%;
-  padding: 12px;
-  height: 45px;
-  margin-top: 10px;
-  background-color: #4CAF50;
-  color: white;
-  border: none;
-  text-align: center;
-  font-size: 1.1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: background-color 0.3s;
-}
-
-.loan-repayment-fields button:hover {
-  background-color: #45a049;
-}
-
-.loan-repayment-fields button:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-
-.loan-repayment-fields {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 20px;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.loan-repayment-fields input,
-.loan-repayment-fields select,
-.loan-repayment-fields button {
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
-.loan-repayment-fields h3 {
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-button {
-  background-color: #4CAF50;
-  color: white;
-  border: none;
-  cursor: pointer;
-  text-align: right; /* Centers the button text */
-}
-
-/* Comparison Section Styling */
-.school-comparison-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Dynamic columns */
-  gap: 20px; /* Space between cards */
-  margin-top: 20px;
-  width: 100%; /* Ensure it uses full width of its container */
-}
-
-.school-comparison {
-  display: grid;
-  margin-bottom: 25px;
-  padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.school-comparison h4 {
-  font-size: 1.3rem;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-/* Section Title Styling */
-h3 {
-  font-size: 1.2rem;
-  font-weight: bold;
-  border-bottom: 2px solid #ccc;
-  padding-bottom: 5px;
-  margin-bottom: 10px;
-}
-
-
-a {
-  color: #1a73e8;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-/* Fix for overflow issue */
-html, body {
-  overflow-x: hidden; /* Prevent horizontal scrolling */
-}

src/components/PopoutPanel.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { ClipLoader } from "react-spinners";
 import LoanRepayment from "./LoanRepayment.js";
-import "./PopoutPanel.css"; // You can keep or remove depending on your needs
 
 function PopoutPanel({
   isVisible,

src/components/SignUp.js

@@ -9,28 +9,35 @@ const careerSituations = [
     id: "planning",
     title: "Planning Your Career",
     description: "I'm exploring options and figuring out what careers fit my interests and skills.",
-    route: "/planning"
+    route: "/planning",
+    isPremiumFocus: false
   },
   {
     id: "preparing",
     title: "Preparing for Your (Next) Career",
     description: "I'm gaining education, skills, or certifications required to start or transition into a new career.",
-    route: "/preparing"
+    route: "/preparing",
+    isPremiumFocus: false
   },
   {
     id: "enhancing",
     title: "Enhancing Your Career",
     description: "I'm established professionally and want to advance, seek promotions, or shift roles.",
-    route: "/enhancing"
+    premiumNote: "(Some advanced features require a Premium subscription)",
+    route: "/enhancing",
+    isPremiumFocus: true  // <-- add this
   },
   {
     id: "retirement",
     title: "Retirement Planning",
     description: "I'm preparing financially and strategically for retirement.",
-    route: "/retirement"
+    premiumNote: "(Some advanced features require a Premium subscription)",
+    route: "/retirement",
+    isPremiumFocus: true  // <-- add this
   }
 ];
 
+
 function SignUp() {
   const navigate = useNavigate();
 
@@ -337,6 +344,8 @@ return (
                 setSelectedSituation(situation);
                 setShowPrompt(true);
               }}
+              isPremiumFocus={situation.isPremiumFocus}
+              premiumNote={situation.premiumNote}  // <--- pass along
             />
           ))}
         </div>

src/components/UserProfile.css

@@ -1,68 +0,0 @@
-.user-profile-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-    max-width: 600px;
-    margin: 0 auto;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    background-color: #f9f9f9;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  }
-  
-  .user-profile-container h2 {
-    font-size: 24px;
-    color: #333;
-    margin-bottom: 20px;
-  }
-  
-  .user-profile-form {
-    width: 100%;
-  }
-  
-  .user-profile-form label {
-    display: block;
-    font-size: 16px;
-    font-weight: bold;
-    color: #555;
-    margin-bottom: 5px;
-  }
-  
-  .user-profile-form input,
-  .user-profile-form select {
-    width: 100%;
-    padding: 10px;
-    font-size: 14px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    margin-bottom: 15px;
-    box-sizing: border-box;
-  }
-  
-  .user-profile-form button {
-    padding: 10px 20px;
-    font-size: 16px;
-    color: #fff;
-    background-color: #007bff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  
-  .user-profile-form button:hover {
-    background-color: #0056b3;
-  }
-  
-  .error-message {
-    color: #d9534f;
-    font-size: 14px;
-    margin-bottom: 15px;
-  }
-  
-  .success-message {
-    color: #5cb85c;
-    font-size: 14px;
-    margin-bottom: 15px;
-  }
-  

src/components/ui/SituationCard.js

@@ -1,8 +1,9 @@
+// SituationCard.jsx
 import React from 'react';
 import { Card, CardContent } from './card.js';
 import { cn } from '../../utils/cn.js';
 
-const SituationCard = ({ title, description, selected, onClick }) => (
+const SituationCard = ({ title, description, selected, onClick, isPremiumFocus, premiumNote }) => (
   <Card
     className={cn(
       'cursor-pointer transition-shadow duration-200 hover:shadow-lg',
@@ -11,8 +12,25 @@ const SituationCard = ({ title, description, selected, onClick }) => (
     onClick={onClick}
   >
     <CardContent>
+      <div className="flex items-start justify-between">
+        <div>
           <h3 className="text-lg font-semibold">{title}</h3>
           <p className="text-sm text-gray-600 mt-1">{description}</p>
+
+          {/* Show premium note if provided */}
+          {isPremiumFocus && premiumNote && (
+            <p className="text-xs text-yellow-600 mt-2 italic">
+              {premiumNote}
+            </p>
+          )}
+        </div>
+
+        {isPremiumFocus && (
+          <span className="ml-2 inline-flex items-center px-2 py-1 rounded-full bg-yellow-400 text-xs font-bold">
+            Premium
+          </span>
+        )}
+      </div>
     </CardContent>
   </Card>
 );