diff --git a/postcss.config.js b/postcss.config.js index ea59b8f..0551d97 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,8 +1,8 @@ -module.exports = { +export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, -}; +} diff --git a/src/App.js b/src/App.js index 852e2fb..405b32c 100644 --- a/src/App.js +++ b/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,124 +109,190 @@ function App() { return (
{/* Header */} -
-
-

- AptivaAI - Career Guidance Platform (beta) -

- - {isAuthenticated && ( -
+
+ + {/* 2) Prepare for Your Career */} +
+ +
+ + Preparing Landing - - - {/* Premium sections */} -
  • - {user?.is_premium ? ( - - Career Planner - - ) : ( - - Career/Financial Planner{' '} - (Premium) - + + Educational Programs + +
    • +
    + + {/* 3) Enhancing Your Career (Premium) */} +
    + +
    + {/* Add your premium sub-links here */} +
    +
    + + {/* 4) Retirement Planning (Premium) */} +
    + +
    + {/* Add your premium sub-links here */} +
    +
    + + {/* 5) Profile */} +
    + +
    + {/* Account Profile, Financial Profile links */} +
    +
    - )} - - - {/* Grouped Logout and Upgrade buttons */} - {isAuthenticated && ( -
    - - - {showPremiumCTA && !canAccessPremium && ( - - )} -
    + + {/* LOGOUT + UPGRADE BUTTONS */} +
    + {showPremiumCTA && !canAccessPremium && ( + + )} + +
    + )} - + + {/* Main Content */}
    {/* Default to /signin */} } /> - + {/* Public routes */} } /> - + {/* Paywall (public) */} } /> - + {/* Authenticated routes */} {isAuthenticated && ( <> @@ -245,12 +314,31 @@ function App() { } /> } /> } /> - }/> + } /> } /> - } /> - } /> - - {/* Premium-only routes */} + + {/* + 1) EnhancingLanding is premium-only + 2) RetirementLanding is premium-only + */} + + + + } + /> + + + + } + /> + + {/* Other Premium-only routes */} } /> - + {/* Resume Optimizer route */} )} - + {/* 404 / Fallback */} } />
    - + {/* Session Handler */} ); - } export default App; diff --git a/src/components/CareerExplorer.js b/src/components/CareerExplorer.js index f00fbd1..7883f05 100644 --- a/src/components/CareerExplorer.js +++ b/src/components/CareerExplorer.js @@ -723,7 +723,7 @@ function CareerExplorer() {

    - Explore Careers - use the tools below to find your perfect career + Explore Careers - use these tools to find your best fit

    { diff --git a/src/components/EducationalProgramsPage.js b/src/components/EducationalProgramsPage.js index bf27e43..1c3fe7c 100644 --- a/src/components/EducationalProgramsPage.js +++ b/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 } }); }; }; diff --git a/src/components/PopoutPanel.css b/src/components/PopoutPanel.css deleted file mode 100644 index 46e2549..0000000 --- a/src/components/PopoutPanel.css +++ /dev/null @@ -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 */ -} \ No newline at end of file diff --git a/src/components/PopoutPanel.js b/src/components/PopoutPanel.js index a888bf7..6a56135 100644 --- a/src/components/PopoutPanel.js +++ b/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, diff --git a/src/components/SignUp.js b/src/components/SignUp.js index 81091db..6a45141 100644 --- a/src/components/SignUp.js +++ b/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 /> ))}
    diff --git a/src/components/UserProfile.css b/src/components/UserProfile.css deleted file mode 100644 index feaee59..0000000 --- a/src/components/UserProfile.css +++ /dev/null @@ -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; - } - \ No newline at end of file diff --git a/src/components/ui/SituationCard.js b/src/components/ui/SituationCard.js index 018208e..7e32f87 100644 --- a/src/components/ui/SituationCard.js +++ b/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 }) => ( ( onClick={onClick} > -

    {title}

    -

    {description}

    +
    +
    +

    {title}

    +

    {description}

    + + {/* Show premium note if provided */} + {isPremiumFocus && premiumNote && ( +

    + {premiumNote} +

    + )} +
    + + {isPremiumFocus && ( + + Premium + + )} +
    );