Paywall navigation and button added

src/App.js

@@ -1,5 +1,6 @@
-import React, { useState} from 'react';
+// App.js
-import { Routes, Route, Navigate } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import SessionExpiredHandler from './components/SessionExpiredHandler.js';
 import GettingStarted from './components/GettingStarted.js';
 import SignIn from './components/SignIn.js';
@@ -9,27 +10,39 @@ 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 Paywall from "./components/Paywall.js";
 import './App.css';
 
 function App() {
-  console.log("App rendered");
+  const navigate = useNavigate();
+  const location = useLocation();
 
-  const [isAuthenticated, setIsAuthenticated] = useState(() => {
+  const [isAuthenticated, setIsAuthenticated] = useState(() => !!localStorage.getItem('token'));
-    return !!localStorage.getItem('token'); // Check localStorage
+
-  });
+  const premiumPaths = ['/milestone-tracker', '/paywall', '/financial-profile'];
+
+  const showPremiumCTA = !premiumPaths.includes(location.pathname);
 
   return (
     <div className="App">
-      <h1>AptivaAI - Career Guidance Platform (beta)</h1>
+      <header className="app-header">
-      <Routes>
+        <h1>AptivaAI - Career Guidance Platform (beta)</h1>
-        {/* Redirect root to /signin */}
+        {showPremiumCTA && (
-        <Route path="/" element={<Navigate to="/signin" />} />
+          <button
+            className="premium-cta"
+            onClick={() => navigate('/paywall')}
+          >
+            Upgrade to Premium
+          </button>
+        )}
+      </header>
 
-        {/* Public routes */}
+      <Routes>
+        <Route path="/" element={<Navigate to="/signin" />} />
         <Route path="/signin" element={<SignIn setIsAuthenticated={setIsAuthenticated} />} />
         <Route path="/signup" element={<SignUp />} />
+        <Route path="/paywall" element={<Paywall />} />
 
-        {/* Protected routes */}
         {isAuthenticated && (
           <>
             <Route path="/getting-started" element={<GettingStarted />} />
@@ -41,7 +54,6 @@ function App() {
           </>
         )}
 
-        {/* Catch-all for unknown routes */}
         <Route path="*" element={<Navigate to="/signin" />} />
       </Routes>
       <SessionExpiredHandler />

src/components/Dashboard.js

@@ -384,6 +384,7 @@ function Dashboard() {
     )}
     
       <div className="dashboard-content">
+
         <div className="career-suggestions-container">
           <div
             className="career-suggestions-header"
@@ -460,7 +461,9 @@ function Dashboard() {
           <p>Loading Chatbot...</p>
         )}
       </div>
-
+     
+      
+      
       <div
         className="data-source-acknowledgment"
         style={{