Hero section is changed and dashboard basic structure is created

Frontend/package-lock.json

@@ -8,11 +8,16 @@
       "name": "package",
       "version": "0.0.0",
       "dependencies": {
+        "@splinetool/react-spline": "^4.1.0",
+        "@splinetool/runtime": "^1.11.2",
         "@tailwindcss/vite": "^4.1.17",
+        "clsx": "^2.1.1",
+        "framer-motion": "^12.23.24",
         "lucide-react": "^0.553.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.9.5",
+        "tailwind-merge": "^3.4.0",
         "tailwindcss": "^4.1.17"
       },
       "devDependencies": {
@@ -1313,6 +1318,37 @@
         "win32"
       ]
     },
+    "node_modules/@splinetool/react-spline": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@splinetool/react-spline/-/react-spline-4.1.0.tgz",
+      "integrity": "sha512-Y379gm17gw+1nxT/YXTCJnVIWuu7tsUH1tp/YxsYb0pZnc9Gljk7Om4Kpq7WPq0bZ4zidVCxf6xn6jgDcbHifQ==",
+      "dependencies": {
+        "blurhash": "2.0.5",
+        "lodash.debounce": "4.0.8",
+        "react-merge-refs": "2.1.1",
+        "thumbhash": "0.1.1"
+      },
+      "peerDependencies": {
+        "@splinetool/runtime": "*",
+        "next": ">=14.2.0",
+        "react": "*",
+        "react-dom": "*"
+      },
+      "peerDependenciesMeta": {
+        "next": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@splinetool/runtime": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/@splinetool/runtime/-/runtime-1.11.2.tgz",
+      "integrity": "sha512-rFz3KOQQRHQGzWBvPKRZcI7fZe5qxNYX1FmmCqzsbJkAU/hJdifaxpyN4xESpbkdta6s7riSmoz5lmPGIpZRRQ==",
+      "dependencies": {
+        "on-change": "^4.0.0",
+        "semver-compare": "^1.0.0"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.1.17",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
@@ -2030,6 +2066,12 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/blurhash": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz",
+      "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2136,6 +2178,15 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2621,6 +2672,33 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3136,6 +3214,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3208,6 +3292,21 @@
         "node": "*"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3247,6 +3346,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/on-change": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz",
+      "integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/on-change?sponsor=1"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3439,6 +3550,16 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-merge-refs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz",
+      "integrity": "sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@@ -3589,6 +3710,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+      "license": "MIT"
+    },
     "node_modules/set-cookie-parser": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
@@ -3653,6 +3780,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
@@ -3672,6 +3809,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/thumbhash": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",
+      "integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3743,6 +3886,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

Frontend/package.json

@@ -10,11 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@splinetool/react-spline": "^4.1.0",
+    "@splinetool/runtime": "^1.11.2",
     "@tailwindcss/vite": "^4.1.17",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.24",
     "lucide-react": "^0.553.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.5",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17"
   },
   "devDependencies": {

Frontend/src/App.tsx

@@ -1,14 +1,72 @@
-import { BrowserRouter } from 'react-router-dom'
-import Home from './pages/home'
+import React, { useState } from "react";
+import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import Dashboard from "./pages/dashboard";
+import Notes from "./pages/note";
+import AIInterview from "./pages/AiInterview";
+import Quize from "./pages/quize";
+import Home from "./pages/home";
+import Sidebar from "./components/dashboard/Sidebar";
+import Header from "./components/dashboard/Header";
+
+const App: React.FC = () => {
+  // Track authentication state
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+
+  // Function to handle successful login
+  const handleLogin = () => {
+    setIsAuthenticated(true);
+  };
+
+  // Function to handle logout
+  const handleLogout = () => {
+    setIsAuthenticated(false);
+  };
 
-function App() {
   return (
-    <BrowserRouter>
-      <div className="w-full min-h-screen">
-        <Home />
-      </div>
-    </BrowserRouter>
-  )
-}
-
-export default App
+    <Router>
+      <Routes>
+        {/* Public Route - Home Page */}
+        <Route 
+          path="/" 
+          element={
+            isAuthenticated ? (
+              <Navigate to="/dashboard" replace />
+            ) : (
+              <Home onLogin={handleLogin} />
+            )
+          } 
+        />
+
+        {/* Protected Routes - Dashboard Layout */}
+        <Route
+          path="/*"
+          element={
+            isAuthenticated ? (
+              <div className="flex h-screen bg-gray-100">
+                {/* Sidebar */}
+                <Sidebar />
+
+                {/* Main Content */}
+                <div className="flex-1 flex flex-col">
+                  <Header onLogout={handleLogout} />
+                  <main className="flex-1 overflow-y-auto p-6">
+                    <Routes>
+                      <Route path="/dashboard" element={<Dashboard />} />
+                      <Route path="/notes" element={<Notes />} />
+                      <Route path="/AIInterview" element={<AIInterview />} />
+                      <Route path="/quize" element={<Quize />} />
+                    </Routes>
+                  </main>
+                </div>
+              </div>
+            ) : (
+              <Navigate to="/" replace />
+            )
+          }
+        />
+      </Routes>
+    </Router>
+  );
+};
+
+export default App;

Frontend/src/components/auth/SignIn.tsx

@@ -1,83 +1,119 @@
-// src/components/SignIn.tsx (Modified for Modal)
+import React, { type FormEvent } from 'react'; // FIXED: Use 'type' import for FormEvent
+import { Mail, Lock, LogIn, Chrome, X } from 'lucide-react'; // Added 'X' icon for close button
 
-import React from 'react';
-import { Mail, Lock, LogIn, Chrome, X } from 'lucide-react';
-
-// Added onClose prop to handle form-internal links/closing
 interface SignInProps {
   onClose: () => void;
   onSwitchToSignUp: () => void;
+  onAuthSuccess: () => void; // New prop to handle successful auth
 }
 
-const SignIn: React.FC<SignInProps> = ({ onClose, onSwitchToSignUp }) => {
+const SignIn: React.FC<SignInProps> = ({ onClose, onSwitchToSignUp, onAuthSuccess }) => {
+  
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    // TODO: Add your actual authentication logic here
+    
+    // Simulate successful login
+    onAuthSuccess();
+  };
+
+  const handleGoogleSignIn = () => {
+    // TODO: Add Google OAuth logic here
+    // For now, simulate successful login
+    onAuthSuccess();
+  };
+
   return (
-    // Note: The outer 'div' styling has been removed, as the modal wrapper provides the background and padding.
-    // The inner container's styling is now applied by the AuthModal.tsx parent.
     <> 
-        <h2 className="text-3xl font-bold mb-8 text-center text-white">
-            Welcome Back
-        </h2>
+      {/* Close Button - Uses the 'onClose' prop */}
+      <button 
+        onClick={onClose}
+        className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors p-2 rounded-full hover:bg-slate-800"
+        aria-label="Close"
+      >
+        <X className="w-5 h-5" />
+      </button>
 
-        {/* --- Sign In Form --- */}
-        <form className="space-y-5">
-            {/* Email Input */}
-            <div>
-                <label htmlFor="email" className="block text-sm font-medium mb-1 text-gray-300">Email Address</label>
-                <div className="relative">
-                    <Mail className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
-                    <input
-                        id="email"
-                        type="email"
-                        placeholder="you@example.com"
-                        className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
-                    />
-                </div>
-            </div>
+      <h2 className="text-3xl font-bold mb-8 text-center text-white">
+        Welcome Back
+      </h2>
 
-            {/* Password Input */}
-            <div>
-                <label htmlFor="password" className="block text-sm font-medium mb-1 text-gray-300">Password</label>
-                <div className="relative">
-                    <Lock className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
-                    <input
-                        id="password"
-                        type="password"
-                        placeholder="••••••••"
-                        className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
-                    />
-                </div>
-            </div>
-
-            {/* Sign In Button */}
-            <button
-                type="submit"
-                className="w-full px-5 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-gray-500 hover:from-blue-600 hover:to-blue-500 transition shadow-lg shadow-blue-500/50 text-lg font-semibold flex items-center justify-center gap-2 mt-6 text-white"
-            >
-                <LogIn className="w-5 h-5" />
-                Sign In
-            </button>
-        </form>
+      {/* Sign In Form */}
+      <form className="space-y-5" onSubmit={handleSubmit}>
+        {/* Email Input */}
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium mb-1 text-gray-300">
+            Email Address
+          </label>
+          <div className="relative">
+            <Mail className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
+            <input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
+              required
+            />
+          </div>
+        </div>
 
-        <div className="flex items-center my-6">
-            <div className="flex-grow border-t border-slate-700"></div>
-            <span className="flex-shrink mx-4 text-sm text-gray-400">OR</span>
-            <div className="flex-grow border-t border-slate-700"></div>
+        {/* Password Input */}
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium mb-1 text-gray-300">
+            Password
+          </label>
+          <div className="relative">
+            <Lock className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
+            <input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
+              required
+            />
+          </div>
         </div>
 
-        {/* --- Social Sign In --- */}
+        {/* Sign In Button */}
         <button
-            className="w-full px-5 py-3 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-semibold flex items-center justify-center gap-3 bg-slate-900"
+          type="submit"
+          // FIXED: Changed bg-gradient-to-r to bg-linear-to-r (canonical class)
+          className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 hover:from-blue-600 hover:to-blue-500 transition shadow-lg shadow-blue-500/50 text-lg font-semibold flex items-center justify-center gap-2 mt-6 text-white"
         >
-            <Chrome className="w-5 h-5" />
-            Sign In with Google
+          <LogIn className="w-5 h-5" />
+          Sign In
         </button>
+      </form>
 
-        <p className="mt-8 text-center text-sm text-gray-400">
-            Don't have an account?
-            <button type="button" onClick={onSwitchToSignUp} className="ml-2 font-medium text-blue-400 hover:text-blue-300 transition-colors">
-                Sign Up
-            </button>
-        </p>
+      <div className="flex items-center my-6">
+        {/* FIXED: Changed flex-grow to grow (canonical class) */}
+        <div className="grow border-t border-slate-700"></div>
+        {/* FIXED: Changed flex-shrink to shrink (canonical class) */}
+        <span className="shrink mx-4 text-sm text-gray-400">OR</span>
+        {/* FIXED: Changed flex-grow to grow (canonical class) */}
+        <div className="grow border-t border-slate-700"></div>
+      </div>
+
+      {/* Social Sign In */}
+      <button
+        type="button"
+        onClick={handleGoogleSignIn}
+        className="w-full px-5 py-3 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-semibold flex items-center justify-center gap-3 bg-slate-900"
+      >
+        <Chrome className="w-5 h-5" />
+        Sign In with Google
+      </button>
+
+      <p className="mt-8 text-center text-sm text-gray-400">
+        Don't have an account?
+        <button 
+          type="button" 
+          onClick={onSwitchToSignUp} 
+          className="ml-2 font-medium text-blue-400 hover:text-blue-300 transition-colors"
+        >
+          Sign Up
+        </button>
+      </p>
     </>
   );
 };

Frontend/src/components/auth/SignUp.tsx

@@ -1,23 +1,43 @@
-// src/components/SignUp.tsx (Modified for Modal)
-
 import React from 'react';
-import { User, Mail, Lock, UserPlus, Chrome, X } from 'lucide-react';
+import { User, Mail, Lock, UserPlus, Chrome, X } from 'lucide-react'; // Added 'X' icon for close button
 
 // Added onClose prop to handle form-internal links/closing
 interface SignUpProps {
     onClose: () => void;
     onSwitchToSignIn: () => void;
+    // You might want to add onAuthSuccess here later, similar to SignIn
 }
 
 const SignUp: React.FC<SignUpProps> = ({ onClose, onSwitchToSignIn }) => {
+    
+    // TODO: Implement actual form submission logic here
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        console.log("Sign Up form submitted");
+        // Example: If successful, call a prop like onAuthSuccess()
+    };
+
+    // TODO: Implement actual Google OAuth logic here
+    const handleGoogleSignUp = () => {
+        console.log("Google Sign Up clicked");
+    };
+
     return (
-        // Note: The outer 'div' styling has been removed, as the modal wrapper provides the background and padding.
         <>
+            {/* Close Button - Uses the 'onClose' prop */}
+            <button 
+                onClick={onClose}
+                className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors p-2 rounded-full hover:bg-slate-800"
+                aria-label="Close"
+            >
+                <X className="w-5 h-5" />
+            </button>
+            
             <h2 className="text-3xl font-bold mb-8 text-center text-white">
                 Create Your Account
             </h2>
             {/* --- Sign Up Form --- */}
-            <form className="space-y-5">
+            <form className="space-y-5" onSubmit={handleSubmit}>
                 {/* Name Input */}
                 <div>
                     <label htmlFor="name" className="block text-sm font-medium mb-1 text-gray-300">Full Name</label>
@@ -28,6 +48,7 @@ const SignUp: React.FC<SignUpProps> = ({ onClose, onSwitchToSignIn }) => {
                             type="text"
                             placeholder="John Doe"
                             className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
+                            required
                         />
                     </div>
                 </div>
@@ -42,6 +63,7 @@ const SignUp: React.FC<SignUpProps> = ({ onClose, onSwitchToSignIn }) => {
                             type="email"
                             placeholder="you@example.com"
                             className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
+                            required
                         />
                     </div>
                 </div>
@@ -56,6 +78,7 @@ const SignUp: React.FC<SignUpProps> = ({ onClose, onSwitchToSignIn }) => {
                             type="password"
                             placeholder="••••••••"
                             className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
+                            required
                         />
                     </div>
                 </div>
@@ -70,6 +93,7 @@ const SignUp: React.FC<SignUpProps> = ({ onClose, onSwitchToSignIn }) => {
                             type="password"
                             placeholder="••••••••"
                             className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
+                            required
                         />
                     </div>
                 </div>
@@ -77,7 +101,8 @@ const SignUp: React.FC<SignUpProps> = ({ onClose, onSwitchToSignIn }) => {
                 {/* Sign Up Button */}
                 <button
                     type="submit"
-                    className="w-full px-5 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-gray-500 hover:from-blue-600 hover:to-blue-500 transition shadow-lg shadow-blue-500/50 text-lg font-semibold flex items-center justify-center gap-2 mt-6 text-white"
+                    // FIXED: Changed bg-gradient-to-r to bg-linear-to-r (canonical class)
+                    className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 hover:from-blue-600 hover:to-blue-500 transition shadow-lg shadow-blue-500/50 text-lg font-semibold flex items-center justify-center gap-2 mt-6 text-white"
                 >
                     <UserPlus className="w-5 h-5" />
                     Sign Up
@@ -85,13 +110,18 @@ const SignUp: React.FC<SignUpProps> = ({ onClose, onSwitchToSignIn }) => {
             </form>
 
             <div className="flex items-center my-6">
-                <div className="flex-grow border-t border-slate-700"></div>
-                <span className="flex-shrink mx-4 text-sm text-gray-400">OR</span>
-                <div className="flex-grow border-t border-slate-700"></div>
+                {/* FIXED: Changed flex-grow to grow (canonical class) */}
+                <div className="grow border-t border-slate-700"></div>
+                {/* FIXED: Changed flex-shrink to shrink (canonical class) */}
+                <span className="shrink mx-4 text-sm text-gray-400">OR</span>
+                {/* FIXED: Changed flex-grow to grow (canonical class) */}
+                <div className="grow border-t border-slate-700"></div>
             </div>
 
             {/* --- Social Sign Up --- */}
             <button
+                type="button"
+                onClick={handleGoogleSignUp}
                 className="w-full px-5 py-3 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-semibold flex items-center justify-center gap-3 bg-slate-900"
             >
                 <Chrome className="w-5 h-5" />

Frontend/src/components/dashboard/Header.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { LogOut, Bell, Settings, User } from 'lucide-react';
+
+interface HeaderProps {
+  onLogout: () => void;
+}
+
+const Header: React.FC<HeaderProps> = ({ onLogout }) => {
+  return (
+    <header className="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
+      <div className="flex items-center justify-between">
+        {/* Left side - Title or Search */}
+        <div>
+          <h1 className="text-2xl font-bold text-gray-800">Dashboard</h1>
+        </div>
+
+        {/* Right side - Actions */}
+        <div className="flex items-center space-x-4">
+          {/* Notifications */}
+          <button className="p-2 rounded-lg hover:bg-gray-100 transition-colors relative">
+            <Bell className="w-5 h-5 text-gray-600" />
+            <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+          </button>
+
+          {/* Settings */}
+          <button className="p-2 rounded-lg hover:bg-gray-100 transition-colors">
+            <Settings className="w-5 h-5 text-gray-600" />
+          </button>
+
+          {/* User Profile */}
+          <div className="flex items-center space-x-3 pl-4 border-l border-gray-200">
+            <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
+              <User className="w-5 h-5 text-white" />
+            </div>
+            <div className="hidden md:block">
+              <p className="text-sm font-medium text-gray-700">John Doe</p>
+              <p className="text-xs text-gray-500">john@example.com</p>
+            </div>
+          </div>
+
+          {/* Logout Button */}
+          <button
+            onClick={onLogout}
+            className="flex items-center space-x-2 px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white transition-colors"
+          >
+            <LogOut className="w-4 h-4" />
+            <span className="hidden md:inline">Logout</span>
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

Frontend/src/components/dashboard/Sidebar.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Home, FileText, Brain, BookOpen } from "lucide-react";
+
+const Sidebar: React.FC = () => {
+  const location = useLocation();
+
+  const navItems = [
+    { path: "/", label: "Dashboard", icon: <Home size={18} /> },
+    { path: "/notes", label: "Notes", icon: <BookOpen size={18} /> },
+    { path: "/ai-interview", label: "AI Interview", icon: <Brain size={18} /> },
+    { path: "/quize/resume", label: "Resume Quiz", icon: <FileText size={18} /> },
+  ];
+
+  return (
+    <aside className="w-64 bg-gray-900 text-white flex flex-col">
+      <div className="text-2xl font-bold text-center py-6 border-b border-gray-700">
+        InterviewAI
+      </div>
+      <nav className="flex-1 p-4 space-y-3">
+        {navItems.map((item) => (
+          <Link
+            key={item.path}
+            to={item.path}
+            className={`flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition ${
+              location.pathname === item.path ? "bg-gray-800" : ""
+            }`}
+          >
+            {item.icon}
+            <span>{item.label}</span>
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+};
+
+export default Sidebar;

Frontend/src/components/ui/card.tsx

@@ -0,0 +1,81 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+// 1. Corrected forwardRef syntax: <RefType, PropsType>(...)
+// 2. Used modern typing: React.ElementRef<"tag"> and React.ComponentPropsWithoutRef<"tag">
+
+const Card = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  React.ElementRef<"h3">, // Corrected to h3 to match the element type
+  React.ComponentPropsWithoutRef<"h3">
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  React.ElementRef<"p">,
+  React.ComponentPropsWithoutRef<"p">
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

Frontend/src/components/ui/splite.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { Suspense, lazy } from 'react'
+const Spline = lazy(() => import('@splinetool/react-spline'))
+
+interface SplineSceneProps {
+  scene: string
+  className?: string
+}
+
+export function SplineScene({ scene, className }: SplineSceneProps) {
+  return (
+    <Suspense 
+      fallback={
+        <div className="w-full h-full flex items-center justify-center">
+          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+        </div>
+      }
+    >
+      <Spline
+        scene={scene}
+        className={className}
+      />
+    </Suspense>
+  )
+}

Frontend/src/components/ui/spotlight.tsx

@@ -0,0 +1,55 @@
+import { cn } from "../../lib/utils";
+
+type SpotlightProps = {
+  className?: string;
+  fill?: string;
+};
+
+export const Spotlight = ({ className, fill }: SpotlightProps) => {
+  return (
+    <svg
+      className={cn(
+        "animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-0",
+        className
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 3787 2842"
+      fill="none"
+    >
+      <g filter="url(#filter)">
+        <ellipse
+          cx="1924.71"
+          cy="273.501"
+          rx="1924.71"
+          ry="273.501"
+          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
+          fill={fill || "white"}
+          fillOpacity="0.21"
+        ></ellipse>
+      </g>
+      <defs>
+        <filter
+          id="filter"
+          x="0.860352"
+          y="0.838989"
+          width="3785.16"
+          height="2840.26"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          ></feBlend>
+          <feGaussianBlur
+            stdDeviation="151"
+            result="effect1_foregroundBlur_1065_8"
+          ></feGaussianBlur>
+        </filter>
+      </defs>
+    </svg>
+  );
+};

Frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

Frontend/src/pages/AiInterview.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const AIInterview: React.FC = () => {
+  return (
+    <div>
+      <h2 className="text-3xl font-bold mb-4">AI Interview Practice</h2>
+      <p className="text-gray-600 mb-4">
+        Practice live AI interviews with real-time feedback and adaptive questions.
+      </p>
+      <button className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+        Start AI Interview
+      </button>
+    </div>
+  );
+};
+
+export default AIInterview;

Frontend/src/pages/dashboard.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const Dashboard: React.FC = () => {
+  return (
+    <div className="text-gray-800">
+      <h2 className="text-3xl font-bold mb-4">Welcome to InterviewAI Dashboard</h2>
+      <p className="text-gray-600">
+        Manage your AI interview sessions, quizzes, and notes all in one place.
+      </p>
+    </div>
+  );
+};
+
+export default Dashboard;

Frontend/src/pages/home.tsx

@@ -1,351 +1,376 @@
 import React, { useState, useEffect } from 'react';
 import { Sparkles, Zap, Target, Clock, Award, ChevronRight, Menu, X } from 'lucide-react';
-import AuthModal from '../components/AuthModal';
-import SignIn from '../components/auth/SignIn'; 
+import AuthModal from '../components/auth/AuthModal';
+import SignIn from '../components/auth/SignIn';
 import SignUp from '../components/auth/SignUp';
+import { SplineScene } from '../components/ui/splite';
+import { Spotlight } from '../components/ui/spotlight';
+import { Card } from '../components/ui/card';
 
 interface Feature {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
+    icon: React.ReactNode;
+    title: string;
+    description: string;
 }
 
 interface Step {
-  step: string;
-  title: string;
-  desc: string;
+    step: string;
+    title: string;
+    desc: string;
 }
 
-const AIInterviewPlatform: React.FC = () => {
-  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
-  const [scrolled, setScrolled] = useState<boolean>(false);
+// Add onLogin prop
+interface AIInterviewPlatformProps {
+    onLogin: () => void;
+}
 
-  const [modalType, setModalType] = useState<'none' | 'signIn' | 'signUp'>('none');
+const AIInterviewPlatform: React.FC<AIInterviewPlatformProps> = ({ onLogin }) => {
+    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+    const [scrolled, setScrolled] = useState<boolean>(false);
+    const [modalType, setModalType] = useState<'none' | 'signIn' | 'signUp'>('none');
 
-    // Handlers for opening/closing modals, now with mobile menu closing logic
-    const openSignInModal = () => {
+    // Handlers for opening/closing modals
+    const openSignInModal = () => {
         setModalType('signIn');
-        setIsMenuOpen(false); // Close mobile menu when opening modal
+        setIsMenuOpen(false);
     };
-    const openSignUpModal = () => {
+
+    const openSignUpModal = () => {
         setModalType('signUp');
-        setIsMenuOpen(false); // Close mobile menu when opening modal
+        setIsMenuOpen(false);
+    };
+
+    const closeModal = () => setModalType('none');
+
+    // Handle successful authentication
+    const handleAuthSuccess = () => {
+        closeModal();
+        onLogin(); // Call the parent function to update auth state
     };
-    const closeModal = () => setModalType('none');
 
-  useEffect(() => {
-    const handleScroll = (): void => {
-      setScrolled(window.scrollY > 50);
-    };
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
+    useEffect(() => {
+        const handleScroll = (): void => {
+            setScrolled(window.scrollY > 50);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const features: Feature[] = [
+        {
+            icon: <Sparkles className="w-8 h-8" />,
+            title: "AI-Powered Questions",
+            description: "Dynamic questions adapted to your skill level and role"
+        },
+        {
+            icon: <Zap className="w-8 h-8" />,
+            title: "Instant Feedback",
+            description: "Get real-time analysis and improvement suggestions"
+        },
+        {
+            icon: <Target className="w-8 h-8" />,
+            title: "Role-Specific Prep",
+            description: "Tailored scenarios for your target position"
+        },
+        {
+            icon: <Clock className="w-8 h-8" />,
+            title: "Practice Anytime",
+            description: "24/7 access to unlimited mock interviews"
+        },
+        {
+            icon: <Award className="w-8 h-8" />,
+            title: "Performance Analytics",
+            description: "Track your progress with detailed insights"
+        }
+    ];
+
+    const steps: Step[] = [
+        { step: "01", title: "Choose Your Role", desc: "Select the job position you're preparing for" },
+        { step: "02", title: "Practice Interview", desc: "Answer AI-generated questions in real-time" },
+        { step: "03", title: "Get Feedback", desc: "Receive detailed analysis and improvement tips" }
+    ];
+
+    return (
+        <div className="w-full min-h-screen bg-gradient-to-br from-blue-900 to-gray-400 text-white overflow-x-hidden">
+            {/* Navigation Bar */}
+            <nav className={`fixed top-0 left-0 right-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-slate-900/95 backdrop-blur-md shadow-xl' : 'bg-slate-900/80 backdrop-blur-sm'}`}>
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div className="flex justify-between items-center h-20">
+                        {/* Logo */}
+                        <div className="flex items-center space-x-3">
+                            <div className="bg-gradient-to-br from-blue-500 to-gray-400 p-2 rounded-lg">
+                                <Sparkles className="w-6 h-6 text-white" />
+                            </div>
+                            <span className="text-2xl font-bold bg-gradient-to-r from-blue-500 to-gray-400 bg-clip-text text-transparent">
+                                InterviewAI
+                            </span>
+                        </div>
+
+                        {/* Desktop Navigation */}
+                        <div className="hidden lg:flex items-center space-x-8">
+                            <a href="#home" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
+                                Home
+                            </a>
+                            <a href="#about" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
+                                About
+                            </a>
+                            <a href="#features" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
+                                Features
+                            </a>
+                            <a href="#how-it-works" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
+                                How It Works
+                            </a>
+                            <button onClick={openSignInModal} className="px-6 py-2.5 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-medium">
+                                Sign In
+                            </button>
+                            <button onClick={openSignUpModal} className="px-6 py-2.5 rounded-lg bg-gradient-to-r from-blue-500 to-blue-500 hover:from-blue-600 hover:to-blue-900 transition-all shadow-lg shadow-blue-500/30 font-medium">
+                                Sign Up
+                            </button>
+                        </div>
+
+                        {/* Mobile Menu Button */}
+                        <button
+                            className="lg:hidden p-2 rounded-lg hover:bg-white/10 transition-colors"
+                            onClick={() => setIsMenuOpen(!isMenuOpen)}
+                        >
+                            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+                        </button>
+                    </div>
+                </div>
+
+                {/* Mobile Menu */}
+                {isMenuOpen && (
+                    <div className="lg:hidden border-t border-white/10 bg-slate-900/98 backdrop-blur-md">
+                        <div className="px-4 py-4 space-y-3 max-w-7xl mx-auto">
+                            <a
+                                href="#home"
+                                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
+                                onClick={() => setIsMenuOpen(false)}
+                            >
+                                Home
+                            </a>
+                            <a
+                                href="#about"
+                                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
+                                onClick={() => setIsMenuOpen(false)}
+                            >
+                                About
+                            </a>
+                            <a
+                                href="#features"
+                                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
+                                onClick={() => setIsMenuOpen(false)}
+                            >
+                                Features
+                            </a>
+                            <a
+                                href="#how-it-works"
+                                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
+                                onClick={() => setIsMenuOpen(false)}
+                            >
+                                How It Works
+                            </a>
+                            <button onClick={openSignInModal} className="w-full py-3 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-medium">
+                                Sign In
+                            </button>
+                            <button onClick={openSignUpModal} className="w-full py-3 rounded-lg bg-gradient-to-r from-blue-500 to-blue-500 hover:from-blue-600 hover:to-blue-900 transition-all font-medium">
+                                Sign Up
+                            </button>
+                        </div>
+                    </div>
+                )}
+            </nav>
+
+            {/* Auth Modals */}
+            <AuthModal isOpen={modalType === 'signIn'} onClose={closeModal}>
+                <SignIn
+                    onClose={closeModal}
+                    onSwitchToSignUp={openSignUpModal}
+                    onAuthSuccess={handleAuthSuccess}
+                />
+            </AuthModal>
+
+            <AuthModal isOpen={modalType === 'signUp'} onClose={closeModal}>
+                <SignUp
+                    onClose={closeModal}
+                    onSwitchToSignIn={openSignInModal}
+                    onAuthSuccess={handleAuthSuccess}
+                />
+            </AuthModal>
+
+            {/* Hero Section */}
+            <section id="home" className="min-h-[calc(100vh-68px)] flex items-center pt-10 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-black">
+                <div className="max-w-7xl mx-auto w-full relative z-10">
+                    {/* Spotlight applied directly to the container as per the demo structure */}
+                    <Spotlight
+                        className="-top-40 left-0 md:left-60 md:-top-20"
+                        fill="white"
+                    />
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                        {/* Left side - Text content */}
+                        <div>
+                            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+                                Master Your Next
+                                <span className="block bg-gradient-to-r from-blue-500 via-gray-400 to-blue-500 bg-clip-text text-transparent">
+                                    Interview with AI
+                                </span>
+                            </h1>
+                            <p className="text-xl text-gray-300 mb-10 max-w-lg">
+                                Practice with our intelligent AI interviewer, get instant feedback, and land your dream job with confidence.
+                            </p>
+                            <button
+                                onClick={openSignUpModal}
+                                className="px-8 py-4 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition duration-300 shadow-xl shadow-blue-600/30 flex items-center gap-2 text-lg font-semibold transform hover:scale-[1.03]"
+                            >
+                                Start Free Trial
+                                <ChevronRight className="w-5 h-5" />
+                            </button>
+                        </div>
+
+                        {/* Right side - 3D Scene */}
+                        <div className="h-[500px] lg:h-[600px] relative">
+                            <SplineScene
+                                scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode"
+                                className="w-full h-full"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* About Section */}
+            <section id="about" className="py-20 px-4 sm:px-6 lg:px-8 bg-black/40">
+                <div className="max-w-6xl mx-auto">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                        <div>
+                            <h2 className="text-4xl sm:text-5xl font-bold mb-6">
+                                About InterviewAI
+                            </h2>
+                            <p className="text-lg text-gray-300 mb-6">
+                                We're revolutionizing interview preparation with cutting-edge AI technology. Our platform helps candidates practice, learn, and succeed in their job interviews.
+                            </p>
+                            <p className="text-lg text-gray-300 mb-6">
+                                Founded by industry experts and powered by advanced machine learning, InterviewAI provides personalized interview experiences that adapt to your unique needs and goals.
+                            </p>
+                            <div className="space-y-4">
+                                <div className="flex items-center gap-3">
+                                    <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
+                                    <span className="text-gray-300">Advanced AI interview simulations</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
+                                    <span className="text-gray-300">Personalized feedback and coaching</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
+                                    <span className="text-gray-300">Industry-leading success rates</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="bg-gradient-to-br from-blue-900/50 to-gray-900/50 rounded-2xl p-8 border border-gray-200/30">
+                            <div className="space-y-6">
+                                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
+                                    <div className="text-3xl font-bold text-blue-400 mb-2">2020</div>
+                                    <div className="text-gray-400">Founded</div>
+                                </div>
+                                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
+                                    <div className="text-3xl font-bold text-blue-500 mb-2">50K+</div>
+                                    <div className="text-gray-400">Happy Users</div>
+                                </div>
+                                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
+                                    <div className="text-3xl font-bold text-blue-400 mb-2">500+</div>
+                                    <div className="text-gray-400">Companies Trust Us</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
 
-  const features: Feature[] = [
-    {
-      icon: <Sparkles className="w-8 h-8" />,
-      title: "AI-Powered Questions",
-      description: "Dynamic questions adapted to your skill level and role"
-    },
-    {
-      icon: <Zap className="w-8 h-8" />,
-      title: "Instant Feedback",
-      description: "Get real-time analysis and improvement suggestions"
-    },
-    {
-      icon: <Target className="w-8 h-8" />,
-      title: "Role-Specific Prep",
-      description: "Tailored scenarios for your target position"
-    },
-    {
-      icon: <Clock className="w-8 h-8" />,
-      title: "Practice Anytime",
-      description: "24/7 access to unlimited mock interviews"
-    },
-    {
-      icon: <Award className="w-8 h-8" />,
-      title: "Performance Analytics",
-      description: "Track your progress with detailed insights"
-    }
-  ];
+            {/* Features Section */}
+            <section id="features" className="py-20 px-4 sm:px-6 lg:px-8 bg-black">
+                <div className="max-w-7xl mx-auto">
+                    <div className="text-center mb-16">
+                        <h2 className="text-4xl sm:text-5xl font-bold mb-4">
+                            Why Choose InterviewAI?
+                        </h2>
+                        <p className="text-xl text-gray-400">
+                            Everything you need to ace your next interview
+                        </p>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                        {features.map((feature: Feature, index: number) => (
+                            <div
+                                key={index}
+                                className="bg-gradient-to-br from-blue-900/50 to-gray-900/50 backdrop-blur-sm rounded-xl p-8 border border-blue-500/20 hover:border-gray-500/50 transition-all duration-300 hover:transform hover:scale-105"
+                            >
+                                <div className="bg-gradient-to-br from-blue-500 to-gray-400 w-16 h-16 rounded-lg flex items-center justify-center mb-4 shadow-lg shadow-blue-500/50">
+                                    {feature.icon}
+                                </div>
+                                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
+                                <p className="text-gray-400">{feature.description}</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
 
-  const steps: Step[] = [
-    { step: "01", title: "Choose Your Role", desc: "Select the job position you're preparing for" },
-    { step: "02", title: "Practice Interview", desc: "Answer AI-generated questions in real-time" },
-    { step: "03", title: "Get Feedback", desc: "Receive detailed analysis and improvement tips" }
-  ];
+            {/* How It Works */}
+            <section id="how-it-works" className="py-20 px-4 sm:px-6 lg:px-8 bg-black/40">
+                <div className="max-w-7xl mx-auto">
+                    <div className="text-center mb-16">
+                        <h2 className="text-4xl sm:text-5xl font-bold mb-4">
+                            How It Works
+                        </h2>
+                        <p className="text-xl text-gray-400">
+                            Get started in three simple steps
+                        </p>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        {steps.map((item: Step, index: number) => (
+                            <div key={index} className="relative text-center">
+                                <div className="text-7xl font-bold text-blue-500/20 mb-4">{item.step}</div>
+                                <h3 className="text-2xl font-bold mb-3">{item.title}</h3>
+                                <p className="text-gray-400">{item.desc}</p>
+                                {index < 2 && (
+                                    <ChevronRight className="hidden md:block absolute top-12 -right-12 w-8 h-8 text-blue-500/50" />
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
 
-  return (
-    <div className="w-full min-h-screen bg-gradient-to-br from-blue-900 to-gray-400 from-blue-900  text-white **overflow-x-hidden**">
-      {/* Navigation Bar */}
-      <nav className={`fixed top-0 left-0 right-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-slate-900/95 backdrop-blur-md shadow-xl' : 'bg-slate-900/80 backdrop-blur-sm'}`}>
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-20">
-            {/* Logo */}
-            <div className="flex items-center space-x-3">
-              <div className="bg-gradient-to-br from-blue-500 to-gray-400 p-2 rounded-lg">
-                <Sparkles className="w-6 h-6 text-white" />
-              </div>
-              <span className="text-2xl font-bold bg-gradient-to-r  from-blue-500 to-gray-400 bg-clip-text text-transparent">
-                InterviewAI
-              </span>
-            </div>
-                        
-            {/* Desktop Navigation */}
-            <div className="hidden lg:flex items-center space-x-8">
-              <a href="#home" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
-                Home
-              </a>
-              <a href="#about" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
-                About
-              </a>
-              <a href="#features" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
-                Features
-              </a>
-              <a href="#how-it-works" className="text-gray-200 hover:text-blue-400 transition-colors font-medium">
-                How It Works
-              </a>
-              <button onClick={openSignInModal} className="px-6 py-2.5 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-medium">
-                Sign In
-              </button>
-              <button onClick={openSignUpModal} className="px-6 py-2.5 rounded-lg bg-gradient-to-r from-blue-500 to-blue-500 hover:from-blue-600 hover:to-blue-900 transition-all shadow-lg shadow-blue-500/30 font-medium">
-                Sign Up
-              </button>
-            </div>
-            {/* Mobile Menu Button */}
-            <button 
-              className="lg:hidden p-2 rounded-lg hover:bg-white/10 transition-colors"
-              onClick={() => setIsMenuOpen(!isMenuOpen)}
-            >
-              {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-            </button>
-          </div>
-        </div>
-        {/* Mobile Menu */}
-        {isMenuOpen && (
-          <div className="lg:hidden border-t border-white/10 bg-slate-900/98 backdrop-blur-md">
-            <div className="px-4 py-4 space-y-3 max-w-7xl mx-auto">
-              <a 
-                href="#home" 
-                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
-                onClick={() => setIsMenuOpen(false)}
-              >
-                Home
-              </a>
-              <a 
-                href="#about" 
-                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
-                onClick={() => setIsMenuOpen(false)}
-              >
-                About
-              </a>
-              <a 
-                href="#features" 
-                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
-                onClick={() => setIsMenuOpen(false)}
-              >
-                Features
-              </a>
-              <a 
-                href="#how-it-works" 
-                className="block py-3 px-4 rounded-lg text-gray-200 hover:bg-blue-500/10 hover:text-blue-400 transition-all font-medium"
-                onClick={() => setIsMenuOpen(false)}
-              >
-                How It Works
-              </a>
-              <button onClick={openSignInModal} className="w-full py-3 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-medium">
-                Sign In
-              </button>
-              <button onClick={openSignUpModal} className="w-full py-3 rounded-lg bg-gradient-to-r from-blue-500 to-blue-500 hover:from-blue-600 hover:to-blue-900 transition-all font-medium">
-                Sign Up
-              </button>
-            </div>
-          </div>
-        )}
-      </nav>
-      <AuthModal isOpen={modalType === 'signIn'} onClose={closeModal}>
-                <SignIn 
-                    onClose={closeModal} 
-                    onSwitchToSignUp={openSignUpModal} 
-                />
-            </AuthModal>
+            {/* CTA Section */}
+            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-gray-900/50 to-blue-700/50">
+                <div className="max-w-4xl mx-auto text-center">
+                    <h2 className="text-4xl sm:text-5xl font-bold mb-6">
+                        Ready to Ace Your Interview?
+                    </h2>
+                    <p className="text-xl text-gray-300 mb-10">
+                        Join thousands of successful candidates who prepared with InterviewAI
+                    </p>
+                    <button
+                        onClick={openSignUpModal}
+                        className="px-10 py-5 rounded-lg bg-gradient-to-r from-blue-400 to-blue-700 hover:from-blue-600 hover:to-blue-900 transition shadow-lg shadow-blue-500/50 text-lg font-semibold"
+                    >
+                        Start Your Free Trial Today
+                    </button>
+                </div>
+            </section>
 
-            <AuthModal isOpen={modalType === 'signUp'} onClose={closeModal}>
-                <SignUp 
-                    onClose={closeModal} 
-                    onSwitchToSignIn={openSignInModal} 
-                />
-      </AuthModal>
-      {/* Hero Section */}
-      <section id="home" className="min-h-screen flex items-center pt-20 pb-20 px-4 sm:px-6 lg:px-8 bg-black">
-        <div className="max-w-7xl mx-auto text-center">
-          <div className="inline-block mb-4 px-4 py-2 bg-blue-500/20 rounded-full border border-blue-500/50">
-            <span className="text-sm font-semibold text-blue-300">✨ AI-Powered Interview Practice</span>
-          </div>
-                    
-          <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
-            Master Your Next
-            <span className="block bg-gradient-to-r from-blue-500 via-gray-400 to-blue-500 bg-clip-text text-transparent">
-              Interview with AI
-            </span>
-          </h1>
-                    
-          <p className="text-xl text-gray-300 mb-10 max-w-3xl mx-auto">
-            Practice with our intelligent AI interviewer, get instant feedback, and land your dream job with confidence.
-          </p>
-                    
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <button className="px-8 py-4 rounded-lg bg-gradient-to-r from-blue-500 to-gray-500 hover:from-blue-600 hover:to-blue-500 transition shadow-lg shadow-blue-500/50 flex items-center gap-2 text-lg font-semibold">
-              Start Free Trial
-              <ChevronRight className="w-5 h-5" />
-            </button>
-            <button className="px-8 py-4 rounded-lg border-2 border-blue-400 hover:bg-blue-400/10 transition text-lg font-semibold">
-              Watch Demo
-            </button>
-          </div>
-          {/* Stats */}
-          <div className="mt-20 grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-4xl mx-auto">
-            <div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
-              <div className="text-4xl font-bold text-blue-600 mb-2">50K+</div>
-              <div className="text-gray-400">Successful Interviews</div>
-            </div>
-            <div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
-              <div className="text-4xl font-bold text-blue-600 mb-2">95%</div>
-              <div className="text-gray-400">Success Rate</div>
-            </div>
-            <div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
-              <div className="text-4xl font-bold text-blue-600 mb-2">24/7</div>
-              <div className="text-gray-400">AI Availability</div>
-            </div>
-          </div>
-        </div>
-      </section>
-      {/* About Section */}
-      <section id="about" className="py-20 px-4 sm:px-6 lg:px-8 bg-black/40">
-        <div className="max-w-6xl mx-auto">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            <div>
-              <h2 className="text-4xl sm:text-5xl font-bold mb-6">
-                About InterviewAI
-              </h2>
-              <p className="text-lg text-gray-300 mb-6">
-                We're revolutionizing interview preparation with cutting-edge AI technology. Our platform helps candidates practice, learn, and succeed in their job interviews.
-              </p>
-              <p className="text-lg text-gray-300 mb-6">
-                Founded by industry experts and powered by advanced machine learning, InterviewAI provides personalized interview experiences that adapt to your unique needs and goals.
-              </p>
-              <div className="space-y-4">
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
-                  <span className="text-gray-300">Advanced AI interview simulations</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
-                  <span className="text-gray-300">Personalized feedback and coaching</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
-                  <span className="text-gray-300">Industry-leading success rates</span>
-                </div>
-              </div>
-            </div>
-            <div className="bg-gradient-to-br from-blue-900/50 to-gray-900/50 rounded-2xl p-8 border border-gray-200/30">
-              <div className="space-y-6">
-                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
-                  <div className="text-3xl font-bold text-blue-400 mb-2">2020</div>
-                  <div className="text-gray-400">Founded</div>
-                </div>
-                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
-                  <div className="text-3xl font-bold text-blue-500 mb-2">50K+</div>
-                  <div className="text-gray-400">Happy Users</div>
-                </div>
-                <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6">
-                  <div className="text-3xl font-bold text-blue-400 mb-2">500+</div>
-                  <div className="text-gray-400">Companies Trust Us</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      {/* Features Section */}
-      <section id="features" className="py-20 px-4 sm:px-6 lg:px-8 bg-black">
-        <div className="max-w-7xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
-              Why Choose InterviewAI?
-            </h2>
-            <p className="text-xl text-gray-400">
-              Everything you need to ace your next interview
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {features.map((feature: Feature, index: number) => (
-              <div 
-                key={index}
-                className="bg-gradient-to-br from-blue-900/50 to-gray-900/50 backdrop-blur-sm rounded-xl p-8 border border-blue-500/20 hover:border-gray-500/50 transition-all duration-300 hover:transform hover:scale-105"
-              >
-                <div className="bg-gradient-to-br from-blue-500 to-gray-400 w-16 h-16 rounded-lg flex items-center justify-center mb-4 shadow-lg shadow-blue-500/50">
-                  {feature.icon}
-                </div>
-                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
-                <p className="text-gray-400">{feature.description}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-      {/* How It Works */}
-      <section id="how-it-works" className="py-20 px-4 sm:px-6 lg:px-8 bg-black/40">
-        <div className="max-w-7xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
-              How It Works
-            </h2>
-            <p className="text-xl text-gray-400">
-              Get started in three simple steps
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {steps.map((item: Step, index: number) => (
-              <div key={index} className="relative text-center">
-                <div className="text-7xl font-bold text-blue-500/20 mb-4">{item.step}</div>
-                <h3 className="text-2xl font-bold mb-3">{item.title}</h3>
-                <p className="text-gray-400">{item.desc}</p>
-                {index < 2 && (
-                  <ChevronRight className="hidden md:block absolute top-12 -right-12 w-8 h-8 text-blue-500/50" />
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-      {/* CTA Section */}
-      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-gray-900/50 to-blue-700/50">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-4xl sm:text-5xl font-bold mb-6">
-            Ready to Ace Your Interview?
-          </h2>
-          <p className="text-xl text-gray-300 mb-10">
-            Join thousands of successful candidates who prepared with InterviewAI
-          </p>
-          <button className="px-10 py-5 rounded-lg bg-gradient-to-r from-blue-400 to-blue-700 hover:from-blue-600 hover:to-blue-900 transition shadow-lg shadow-blue-500/50 text-lg font-semibold">
-            Start Your Free Trial Today
-          </button>
-        </div>
-      </section>
-      {/* Footer */}
-      <footer className="py-12 px-4 sm:px-6 lg:px-8 bg-black">
-        <div className="max-w-7xl mx-auto text-center text-gray-400">
-          <div className="flex items-center justify-center space-x-2 mb-4">
-            <Sparkles className="w-6 h-6 text-blue-400" />
-            <span className="text-xl font-bold text-white">InterviewAI</span>
-          </div>
-          <p>&copy; 2025 InterviewAI. All rights reserved.</p>
-        </div>
-      </footer>
-    </div>
-  );
+            {/* Footer */}
+            <footer className="py-12 px-4 sm:px-6 lg:px-8 bg-black">
+                <div className="max-w-7xl mx-auto text-center text-gray-400">
+                    <div className="flex items-center justify-center space-x-2 mb-4">
+                        <Sparkles className="w-6 h-6 text-blue-400" />
+                        <span className="text-xl font-bold text-white">InterviewAI</span>
+                    </div>
+                    <p>&copy; 2025 InterviewAI. All rights reserved.</p>
+                </div>
+            </footer>
+        </div>
+    );
 };
 
 export default AIInterviewPlatform;

Frontend/src/pages/note.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Notes: React.FC = () => {
+  return (
+    <div>
+      <h2 className="text-3xl font-bold mb-4">My Notes</h2>
+      <p className="text-gray-600">Save and organize your interview preparation notes.</p>
+    </div>
+  );
+};
+
+export default Notes;

Frontend/src/pages/quize.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const ResumeGeneratedQuize: React.FC = () => {
+    return (
+        <div>
+            <h2 className="text-3xl font-bold mb-4">AI Generated Quiz</h2>
+            <p className="text-gray-600">
+                Create intelligent quizzes using AI-generated questions based on your learning progress.
+            </p>
+            <h2 className="text-3xl font-bold mb-4">Resume-Based Quiz</h2>
+            <p className="text-gray-600">Generate quizzes automatically based on your uploaded resume.</p>
+            <h2 className="text-3xl font-bold mb-4">PDF-Based Quiz</h2>
+            <p className="text-gray-600">
+                Generate quizzes from your uploaded PDF documents to test topic understanding.
+            </p>
+        </div>
+    );
+};
+
+export default ResumeGeneratedQuize;

Frontend/tailwind.config.cjs

@@ -4,7 +4,23 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        spotlight: "spotlight 2s ease .75s 1 forwards",
+      },
+      keyframes: {
+        spotlight: {
+          "0%": {
+            opacity: 0,
+            transform: "translate(-72%, -62%) scale(0.5)",
+          },
+          "100%": {
+            opacity: 1,
+            transform: "translate(-50%,-40%) scale(1)",
+          },
+        },
+      },
+    },
   },
   plugins: [],
 }

Frontend/tsconfig.json

@@ -3,5 +3,11 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
-}
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

Frontend/vite.config.ts

@@ -1,11 +1,25 @@
 import { defineConfig } from 'vite'
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
+import { fileURLToPath } from 'url'; // Required for path resolution
+import path from 'path'; // Required for path resolution
 
-// https://vite.dev/config/
+// Define the root directory helper function
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(), 
     tailwindcss()
   ],
-})
+  // Explicitly configure path aliases for Vite's module resolution
+  // This resolves the "Cannot find module '@/lib/utils'" error during runtime
+  resolve: {
+    alias: {
+      // Maps the '@/...' import path to the absolute path of the './src' directory
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})