Spaces:

aki-008
/

prepAI

Sleeping

App Files Files Community

aki-008 commited on Nov 17, 2025

Commit

bc852fb

2 Parent(s): 88e511a 7e99777

Merge remote-tracking branch 'origin/frontend'

Browse files

Files changed (33) hide show

Frontend/.gitignore +24 -0
Frontend/README.md +73 -0
Frontend/eslint.config.js +23 -0
Frontend/index.html +20 -0
Frontend/package-lock.json +0 -0
Frontend/package.json +41 -0
Frontend/public/vite.svg +1 -0
Frontend/src/App.tsx +69 -0
Frontend/src/components/auth/AuthModal.tsx +43 -0
Frontend/src/components/auth/SignIn.tsx +121 -0
Frontend/src/components/auth/SignUp.tsx +141 -0
Frontend/src/components/dashboard/FeedBackScore.tsx +46 -0
Frontend/src/components/dashboard/InterviewPlayback.tsx +27 -0
Frontend/src/components/dashboard/Sidebar.tsx +68 -0
Frontend/src/components/dashboard/SkillRadarChart.tsx +28 -0
Frontend/src/components/dashboard/WeakAreaBanner.tsx +14 -0
Frontend/src/components/dashboard/YearlyStreak.tsx +80 -0
Frontend/src/components/ui/splite.tsx +26 -0
Frontend/src/components/ui/spotlight.tsx +64 -0
Frontend/src/index.css +1 -0
Frontend/src/lib/utils.ts +6 -0
Frontend/src/main.tsx +10 -0
Frontend/src/pages/AiInterview.tsx +155 -0
Frontend/src/pages/dashboard.tsx +112 -0
Frontend/src/pages/home.tsx +409 -0
Frontend/src/pages/note.tsx +168 -0
Frontend/src/pages/quize.tsx +125 -0
Frontend/src/utils/generateYearlyStreakData.ts +20 -0
Frontend/tailwind.config.cjs +26 -0
Frontend/tsconfig.app.json +28 -0
Frontend/tsconfig.json +13 -0
Frontend/tsconfig.node.json +26 -0
Frontend/vite.config.ts +25 -0

Frontend/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Frontend/README.md ADDED Viewed

	@@ -0,0 +1,73 @@

+# React + TypeScript + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## React Compiler
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

Frontend/eslint.config.js ADDED Viewed

	@@ -0,0 +1,23 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

Frontend/index.html ADDED Viewed

	@@ -0,0 +1,20 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Prep-AI</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

Frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

Frontend/package.json ADDED Viewed

	@@ -0,0 +1,41 @@

+{
+  "name": "package",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@splinetool/react-spline": "^4.1.0",
+    "@splinetool/runtime": "^1.11.2",
+    "@tailwindcss/vite": "^4.1.17",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
+    "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",
+    "recharts": "^3.4.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.2.2"
+  }
+}

Frontend/public/vite.svg ADDED Viewed

Frontend/src/App.tsx ADDED Viewed

	@@ -0,0 +1,69 @@

+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";
+const App: React.FC = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const handleLogin = () => {
+    setIsAuthenticated(true);
+  };
+  const handleLogout = () => {
+    setIsAuthenticated(false);
+  };
+  return (
+    <Router>
+      <Routes>
+        {/* Public Route */}
+        <Route
+          path="/"
+          element={
+            isAuthenticated ? (
+              <Navigate to="/dashboard" replace />
+            ) : (
+              <Home onLogin={handleLogin} />
+            )
+          }
+        />
+        {/* Protected Routes */}
+        <Route
+          path="/*"
+          element={
+            isAuthenticated ? (
+              <div className="flex h-screen bg-gray-100">
+                {/* Sidebar (only once) */}
+                <Sidebar onLogout={handleLogout} />
+                {/* Main Content */}
+                <main className="flex-1 overflow-y-auto">
+                  <Routes>
+                    <Route path="/dashboard" element={<Dashboard />} />
+                    <Route path="/notes" element={<Notes />} />
+                    <Route path="/AIInterview" element={<AIInterview />} />
+                    <Route path="/quize" element={<Quize />} />
+                  </Routes>
+                </main>
+              </div>
+            ) : (
+              <Navigate to="/" replace />
+            )
+          }
+        />
+      </Routes>
+    </Router>
+  );
+};
+export default App;

Frontend/src/components/auth/AuthModal.tsx ADDED Viewed

	@@ -0,0 +1,43 @@

+// src/components/AuthModal.tsx
+import React from 'react';
+import { X } from 'lucide-react';
+interface AuthModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+const AuthModal: React.FC<AuthModalProps> = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+  return (
+    // Backdrop/Overlay: Fixed position, full screen, dark, and translucent
+    <div
+      className="fixed inset-0 z-[100] bg-black bg-opacity-80 backdrop-blur-sm flex items-center justify-center p-4 transition-opacity duration-300"
+      onClick={onClose} // Close the modal when clicking outside
+    >
+      {/* Modal Content Container: Prevent closing when clicking on the form itself */}
+      <div
+        className="relative w-full max-w-md bg-slate-900 border border-blue-500/30 rounded-xl shadow-2xl animate-fade-in-up"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close Button */}
+        <button
+          className="absolute top-4 right-4 p-2 text-gray-400 hover:text-blue-400 transition-colors z-10"
+          onClick={onClose}
+        >
+          <X className="w-6 h-6" />
+        </button>
+        {/* Children (SignIn or SignUp content) */}
+        <div className="p-8 pt-10">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AuthModal;

Frontend/src/components/auth/SignIn.tsx ADDED Viewed

	@@ -0,0 +1,121 @@

+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
+interface SignInProps {
+  onClose: () => void;
+  onSwitchToSignUp: () => void;
+  onAuthSuccess: () => void; // New prop to handle successful auth
+}
+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 (
+    <>
+      {/* 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">
+        Welcome Back
+      </h2>
+      {/* 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>
+        {/* 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>
+        {/* Sign In Button */}
+        <button
+          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"
+        >
+          <LogIn className="w-5 h-5" />
+          Sign In
+        </button>
+      </form>
+      <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>
+    </>
+  );
+};
+export default SignIn;

Frontend/src/components/auth/SignUp.tsx ADDED Viewed

	@@ -0,0 +1,141 @@

+import React from '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;
+     onAuthSuccess: () => 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 (
+        <>
+            {/* 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" onSubmit={handleSubmit}>
+                {/* Name Input */}
+                <div>
+                    <label htmlFor="name" className="block text-sm font-medium mb-1 text-gray-300">Full Name</label>
+                    <div className="relative">
+                        <User className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
+                        <input
+                            id="name"
+                            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>
+                {/* 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>
+                {/* 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>
+                {/* Confirm Password Input */}
+                <div>
+                    <label htmlFor="confirm-password" className="block text-sm font-medium mb-1 text-gray-300">Confirm 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="confirm-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>
+                {/* Sign Up Button */}
+                <button
+                    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"
+                >
+                    <UserPlus className="w-5 h-5" />
+                    Sign Up
+                </button>
+            </form>
+            <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 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" />
+                Sign Up with Google
+            </button>
+            <p className="mt-8 text-center text-sm text-gray-400">
+                Already have an account?
+                <button type="button" onClick={onSwitchToSignIn} className="ml-2 font-medium text-blue-400 hover:text-blue-300 transition-colors">
+                    Sign In
+                </button>
+            </p>
+        </>
+    );
+};
+export default SignUp;

Frontend/src/components/dashboard/FeedBackScore.tsx ADDED Viewed

	@@ -0,0 +1,46 @@

+import React from "react";
+interface Props {
+  confidence: number;
+  clarity: number;
+  accuracy: number;
+  speed: number;
+  improvements: string[];
+}
+const ScoreCard = ({ label, value }: any) => (
+  <div className="p-4 text-center bg-gray-100 rounded-xl">
+    <p className="text-3xl font-bold text-black">{value}%</p>
+    <p className="text-gray-600">{label}</p>
+  </div>
+);
+const FeedbackScore: React.FC<Props> = ({
+  confidence,
+  clarity,
+  accuracy,
+  speed,
+  improvements,
+}) => {
+  return (
+    <div className="bg-white p-5 shadow rounded-xl">
+      <h3 className="text-xl font-bold mb-3 text-black">AI Feedback Summary</h3>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <ScoreCard label="Confidence" value={confidence} />
+        <ScoreCard label="Clarity" value={clarity} />
+        <ScoreCard label="Technical Accuracy" value={accuracy} />
+        <ScoreCard label="Speed" value={speed} />
+      </div>
+      <h4 className="text-lg font-semibold mt-5 text-black">Suggested Improvements</h4>
+      <ul className="list-disc pl-5 text-blue-600">
+        {improvements.map((item, i) => (
+          <li key={i}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+export default FeedbackScore;

Frontend/src/components/dashboard/InterviewPlayback.tsx ADDED Viewed

	@@ -0,0 +1,27 @@

+const InterviewPlayback = ({
+  audioUrl,
+  transcript,
+  highlights,
+}: any) => (
+  <div className="bg-white p-5 shadow rounded-xl">
+    <h3 className="text-xl font-bold mb-4 text-black"> Interview Playback</h3>
+    {audioUrl && (
+      <audio controls className="w-full mb-4">
+        <source src={audioUrl} type="audio/mp3" />
+      </audio>
+    )}
+    <h4 className="font-semibold mb-2 text-black"> Transcript</h4>
+    <p className="text-gray-700 whitespace-pre-wrap">{transcript}</p>
+    <h4 className="font-semibold mt-4 text-black"> AI Highlights</h4>
+    <ul className="list-disc pl-5 text-blue-600">
+      {highlights.map((h: string, i: number) => (
+        <li key={i}>{h}</li>
+      ))}
+    </ul>
+  </div>
+);
+export default InterviewPlayback;

Frontend/src/components/dashboard/Sidebar.tsx ADDED Viewed

	@@ -0,0 +1,68 @@

+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import {
+  Home, FileText, Brain, BookOpen,
+  Bell, Settings, User, LogOut
+} from "lucide-react";
+interface SidebarProps {
+  onLogout?: () => void;
+}
+const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
+  const location = useLocation();
+  const navItems = [
+    { path: "/", label: "Dashboard", icon: <Home size={18} /> },
+    { path: "/notes", label: "Notes", icon: <BookOpen size={18} /> },
+    { path: "/AIInterview", label: "AI Interview", icon: <Brain size={18} /> },
+    { path: "/quize", label: "Resume Quiz", icon: <FileText size={18} /> },
+  ];
+  return (
+    <aside className="w-64 bg-linear-to-r from-blue-700 to-gray-900/50 text-white flex flex-col justify-between">
+      {/* Top Section */}
+      <div>
+        <div className="text-2xl font-bold text-center py-6 border-b border-gray-700">
+          InterviewAI
+        </div>
+        <nav className="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>
+      </div>
+      {/* Bottom Section (From Header) */}
+      <div className="p-4 border-t border-gray-700 space-y-4">
+        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
+          <Settings size={18} />
+          <span>Settings</span>
+        </button>
+        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
+          <User size={18} />
+          <span>John Doe</span>
+        </button>
+        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-red-600 text-black transition w-full text-left">
+          <LogOut size={18} />
+          <span>Logout</span>
+        </button>
+      </div>
+    </aside>
+  );
+};
+export default Sidebar;

Frontend/src/components/dashboard/SkillRadarChart.tsx ADDED Viewed

	@@ -0,0 +1,28 @@

+import {
+  Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer
+} from "recharts";
+const SkillRadarChart = ({ data }: { data: any[] }) => (
+  <div className="bg-white p-5 shadow rounded-xl">
+    <h3 className="text-xl font-bold mb-3 text-black">Skill Strength Chart</h3>
+    <div className="w-full h-80">
+      <ResponsiveContainer>
+        <RadarChart cx="50%" cy="50%" outerRadius="70%" data={data}>
+          <PolarGrid />
+          <PolarAngleAxis dataKey="skill" />
+          <PolarRadiusAxis angle={30} domain={[0, 100]} />
+          <Radar
+            name="Skill Level"
+            dataKey="value"
+            stroke="#1170d6"
+            fill="#1170d6"
+            fillOpacity={0.4}
+          />
+        </RadarChart>
+      </ResponsiveContainer>
+    </div>
+  </div>
+);
+export default SkillRadarChart;

Frontend/src/components/dashboard/WeakAreaBanner.tsx ADDED Viewed

	@@ -0,0 +1,14 @@

+const WeakAreaBanner = ({ topic }: { topic: string | null }) => {
+  if (!topic) return null;
+  return (
+    <div className="bg-red-100 p-4 rounded-xl border border-red-300 mt-4">
+      <p className="text-red-700 font-semibold">
+        ⚠️ You are weak in <strong>{topic}</strong>.
+      </p>
+      <p className="text-red-600">Start targeted practice today.</p>
+    </div>
+  );
+};
+export default WeakAreaBanner;

Frontend/src/components/dashboard/YearlyStreak.tsx ADDED Viewed

	@@ -0,0 +1,80 @@

+interface StreakData {
+  date: string;
+  count: number;
+  weekday: number;
+  week: number;
+  month: string;
+}
+const getColor = (count: number) => {
+  if (count === 0) return "#2e2e2e";
+  if (count === 1) return "#9be9f8";
+  if (count === 2) return "#40c4f3";
+  if (count === 3) return "#30a1c4";
+  return "#216e9c";
+};
+const YearlyStreak = ({ data }: { data: StreakData[] }) => {
+  const totalSubmissions = data.reduce((a, b) => a + b.count, 0);
+  const activeDays = data.filter((d) => d.count > 0).length;
+  let streak = 0;
+  let maxStreak = 0;
+  data.forEach((d) => {
+    if (d.count > 0) {
+      streak++;
+      maxStreak = Math.max(maxStreak, streak);
+    } else {
+      streak = 0;
+    }
+  });
+  const weeks = data.reduce((acc: any, day) => {
+    acc[day.week] = acc[day.week] || [];
+    acc[day.week].push(day);
+    return acc;
+  }, {});
+  return (
+    <div className="bg-gray-900 p-6 rounded-xl text-white shadow-xl">
+      <div className="flex justify-between mb-4">
+        <h3 className="text-xl font-semibold">
+          {totalSubmissions} Hour Platform Activities This Year
+        </h3>
+        <div className="flex gap-6 text-gray-300">
+          <p>Total active days: <span className="text-white">{activeDays}</span></p>
+          <p>Max streak: <span className="text-white">{maxStreak}</span></p>
+        </div>
+      </div>
+      <div className="flex">
+        {Object.keys(weeks).map((weekIndex) => (
+          <div key={weekIndex} className="flex flex-col mr-1">
+            {weeks[weekIndex].map((day: StreakData) => (
+              <div
+                key={day.date}
+                title={`${day.date} — ${day.count} tasks`}
+                className="w-4 h-4 rounded-sm mb-1"
+                style={{ backgroundColor: getColor(day.count) }}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+      <div className="flex mt-3 text-gray-400 text-xs">
+        {Object.keys(weeks).map((weekIndex) => {
+          const firstDay = weeks[weekIndex][0];
+          const showLabel = firstDay.date.endsWith("01");
+          return (
+            <div key={weekIndex} className="w-4 mx-[2px]">
+              {showLabel && <span>{firstDay.month}</span>}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+export default YearlyStreak;

Frontend/src/components/ui/splite.tsx ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -0,0 +1,64 @@

+import { useEffect, useState } from "react";
+import type { RefObject } from "react";
+import { cn } from "../../lib/utils";
+type SpotlightProps = {
+  parentRef: RefObject<HTMLDivElement|null>;
+  className?: string;
+};
+export const Spotlight = ({ parentRef, className }: SpotlightProps) => {
+  const [pos, setPos] = useState({ x: -9999, y: -9999 });
+  useEffect(() => {
+    const parent = parentRef.current;
+    if (!parent) return;
+    const handleMove = (e: MouseEvent) => {
+      const rect = parent.getBoundingClientRect();
+      setPos({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      });
+    };
+    const handleLeave = () => {
+      setPos({ x: -9999, y: -9999 });
+    };
+    parent.addEventListener("mousemove", handleMove);
+    parent.addEventListener("mouseleave", handleLeave);
+    return () => {
+      parent.removeEventListener("mousemove", handleMove);
+      parent.removeEventListener("mouseleave", handleLeave);
+    };
+  }, [parentRef]);
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-0 z-0 transition-transform duration-75 ease-out",
+        className
+      )}
+      style={{
+        transform: `translate(${pos.x - 600}px, ${pos.y - 600}px)`,
+      }}
+    >
+      <svg
+        className="w-[1200px] h-[1200px] opacity-40 blur-3xl"
+        viewBox="0 0 1200 1200"
+        fill="none"
+      >
+        <defs>
+          <radialGradient id="spot" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="white" stopOpacity="0.35" />
+            <stop offset="100%" stopColor="white" stopOpacity="0" />
+          </radialGradient>
+        </defs>
+        <circle cx="600" cy="600" r="600" fill="url(#spot)" />
+      </svg>
+    </div>
+  );
+};

Frontend/src/index.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ @import "tailwindcss";

Frontend/src/lib/utils.ts ADDED Viewed

	@@ -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/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

Frontend/src/pages/AiInterview.tsx ADDED Viewed

	@@ -0,0 +1,155 @@

+import React, { useState } from "react";
+import { Send, Settings, CheckCircle } from "lucide-react";
+// Define the structure for the interview state
+type InterviewState = 'config' | 'chat' | 'results';
+const AIInterview: React.FC = () => {
+  const [interviewState, setInterviewState] = useState<InterviewState>('config');
+  const [jobRole, setJobRole] = useState('');
+  const [experience, setExperience] = useState('');
+  const [level, setLevel] = useState('Medium');
+  // Placeholder for the AI Chat bubble/ball
+  const InterviewBall: React.FC = () => (
+    <div className="flex items-center justify-center w-24 h-24 bg-purple-600 rounded-full shadow-2xl animate-pulse cursor-pointer">
+      <span className="text-white font-bold text-xl">AI</span>
+    </div>
+  );
+  // --- RENDER FUNCTIONS ---
+  // 1. Configuration Phase
+  const renderConfig = () => (
+    <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
+      <h3 className="text-2xl font-semibold mb-6 flex items-center gap-2 text-blue-700">
+        <Settings size={24} /> Configure Your Interview
+      </h3>
+      <div className="space-y-6">
+        {/* Job Role Input */}
+        <label className="block">
+          <span className="text-gray-700 font-medium">1. Job Role/Position (e.g., Senior Frontend Developer)</span>
+          <input
+            type="text"
+            value={jobRole}
+            onChange={(e) => setJobRole(e.target.value)}
+            placeholder="Enter the job role for tailored questions"
+            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
+          />
+        </label>
+        {/* Experience Input */}
+        <label className="block">
+          <span className="text-gray-700 font-medium">2. Years of Professional Experience</span>
+          <input
+            type="number"
+            min="0"
+            value={experience}
+            onChange={(e) => setExperience(e.target.value)}
+            placeholder="e.g., 5"
+            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
+          />
+        </label>
+        {/* Level Select */}
+        <label className="block">
+          <span className="text-gray-700 font-medium">3. Difficulty Level</span>
+          <select
+            value={level}
+            onChange={(e) => setLevel(e.target.value)}
+            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white"
+          >
+            <option value="Basic">Basic (Beginner)</option>
+            <option value="Medium">Medium (Intermediate)</option>
+            <option value="Hard">Hard (Senior/Expert)</option>
+          </select>
+        </label>
+      </div>
+      <button
+        onClick={() => {
+          if (jobRole && experience) {
+            setInterviewState('chat');
+          } else {
+            alert('Please fill in the Job Role and Experience.');
+          }
+        }}
+        className="mt-8 px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-150 flex items-center gap-2"
+        disabled={!jobRole || !experience}
+      >
+        <Send size={20} /> Start Interview
+      </button>
+    </div>
+  );
+  // 2. Chat/Interview Phase
+  const renderChat = () => (
+    <div className="flex flex-col items-center bg-white p-6 rounded-xl shadow-lg h-[600px] overflow-hidden relative">
+      <h3 className="text-xl font-bold mb-4">Interview in Progress</h3>
+      <p className="text-gray-600 mb-6">
+        Role: {jobRole} | Experience: {experience} yrs | Level: {level}
+      </p>
+      {/* The AI Ball UI Element */}
+      <InterviewBall />
+      {/* Placeholder for Chat Messages */}
+      <div className="flex-1 w-full mt-4 p-4 border border-dashed border-gray-300 rounded-lg overflow-y-auto bg-gray-50">
+        <div className="bg-purple-100 p-3 rounded-lg text-purple-800 mb-2">
+          **AI:** Welcome! Based on your configuration, let's start with your first question...
+        </div>
+        {/* User messages and AI responses would go here */}
+      </div>
+      {/* Input area */}
+      <div className="w-full flex gap-2 mt-4">
+        <input
+          type="text"
+          placeholder="Type your answer here..."
+          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500"
+        />
+        <button className="px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
+          <Send size={20} />
+        </button>
+      </div>
+      <button
+        onClick={() => setInterviewState('results')}
+        className="mt-4 text-sm text-red-500 hover:text-red-700 underline"
+      >
+        End Interview
+      </button>
+    </div>
+  );
+  // 3. Results Phase (Simple Placeholder)
+  const renderResults = () => (
+    <div className="bg-green-50 p-8 rounded-xl shadow-xl text-center">
+      <CheckCircle size={48} className="text-green-600 mx-auto mb-4" />
+      <h3 className="text-3xl font-bold text-green-700 mb-2">Interview Ended</h3>
+      <p className="text-gray-700 mb-6">Thank you for practicing! Your detailed feedback and results are being compiled now.</p>
+      <button
+        onClick={() => setInterviewState('config')}
+        className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-150"
+      >
+        Start New Interview
+      </button>
+    </div>
+  );
+  // --- MAIN RENDER ---
+  return (
+    <div className="p-8 max-w-4xl mx-auto">
+      <h1 className="text-4xl font-extrabold text-gray-800 mb-6">AI Interview Practice 🤖</h1>
+      {/* State rendering */}
+      {interviewState === 'config' && renderConfig()}
+      {interviewState === 'chat' && renderChat()}
+      {interviewState === 'results' && renderResults()}
+    </div>
+  );
+};
+export default AIInterview;

Frontend/src/pages/dashboard.tsx ADDED Viewed

	@@ -0,0 +1,112 @@

+import YearlyStreak from "../components/dashboard/YearlyStreak";
+import FeedbackScore from "../components/dashboard/FeedBackScore";
+import SkillRadarChart from "../components/dashboard/SkillRadarChart";
+import WeakAreaBanner from "../components/dashboard/WeakAreaBanner";
+import InterviewPlayback from "../components/dashboard/InterviewPlayback";
+import { generateYearlyStreakData } from "../utils/generateYearlyStreakData";
+const Dashboard = () => {
+  const streakData = generateYearlyStreakData();
+  const radarData = [
+    { skill: "DSA", value: 70 },
+    { skill: "System Design", value: 60 },
+    { skill: "Communication", value: 85 },
+    { skill: "Problem Solving", value: 75 },
+    { skill: "Accuracy", value: 68 },
+    { skill: "Time Mgmt", value: 80 },
+  ];
+  const weakTopic = "Dynamic Programming";
+  return (
+    // PRIMARY CHANGE: Background Gradient inspired by landing page
+    // Using a custom CSS class for a more complex gradient if needed, or approximating with Tailwind.
+    // For now, let's use a subtle linear gradient that implies the dark blue-black.
+    <div className="px-6 py-8 space-y-10 min-h-screen text-gray-100 bg-black font-OpenSans">
+      {/* Font sans is a good default for modern look */}
+      {/* ----------- HEADER SECTION (Updated for new theme) ----------- */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between mb-4">
+        <h1 className="text-3xl lg:text-4xl font-extrabold text-gray-50 tracking-tight">
+          👋 Welcome back, <span className="text-blue-400">Prakhar</span>
+        </h1>
+        <div className="flex items-center space-x-3 mt-4 md:mt-0">
+          {/* PRIMARY BUTTON: Vibrant Purple Theme Color, matching "Start Free Trial" */}
+          <button className="px-6 py-2 bg-gradient-to-r from-blue-600 to-blue-800 text-white rounded-lg shadow-lg shadow-purple-500/30 hover:from-blue-500 hover:to-blue-700 transition-all duration-300 ease-in-out font-semibold">
+            Start Interview
+          </button>
+        </div>
+      </div>
+      {/* ----------- GRID MAIN LAYOUT (2 COLUMNS for top content) ----------- */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* LEFT PANEL (Feedback Score) */}
+        <div className="space-y-6 col-span-1">
+          {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+          <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-6 border border-gray-700/50 h-full">
+            <h2 className="text-xl font-bold mb-4 text-gray-50">AI Feedback Score</h2>
+            <FeedbackScore
+              confidence={78}
+              clarity={82}
+              accuracy={70}
+              speed={65}
+              improvements={[
+                "Improve explanation clarity",
+                "Practice more DP problems",
+                "Reduce filler words in answers",
+              ]}
+            />
+          </div>
+        </div>
+        {/* RIGHT PANEL (Skill Chart) */}
+        <div className="space-y-6 col-span-1">
+          {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+          <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-6 border border-gray-700/50 h-full">
+            <h2 className="text-xl font-bold mb-4 text-gray-50">Skill Strength Chart</h2>
+            <SkillRadarChart data={radarData} />
+          </div>
+        </div>
+      </div>
+      {/* ----------- MIDDLE ROW: INTERVIEW PLAYBACK (LEFT) AND WEAK AREA (RIGHT) ----------- */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* INTERVIEW PLAYBACK (2/3 width on large screens, LEFT) */}
+        {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+        <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-6 border border-gray-700/50 lg:col-span-2">
+          <h2 className="text-xl font-bold mb-4 text-gray-50">Interview Playback AI Feedback</h2>
+          <InterviewPlayback
+            audioUrl="https://example.com/audio.mp3"
+            transcript={`Interviewer: Explain polymorphism.\nYou: Polymorphism means...`}
+            highlights={[
+              "Answer lacked real-world example",
+              "Need more clarity in describing LLD concepts",
+              "Example Interview Playback",
+            ]}
+          />
+        </div>
+        {/* WEAK AREA (1/3 width on large screens, RIGHT) */}
+        {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+        <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-5 border border-gray-700/50 col-span-1 flex-col items-center justify-center">
+           {/* WeakAreaBanner will need internal styling adjustments for its alert nature */}
+          <h2 className="text-xl font-bold mb-4 text-gray-50">WeakAreaBanner</h2>
+          <WeakAreaBanner topic={weakTopic} />
+        </div>
+      </div>
+      {/* ----------- BOTTOM ROW: YEARLY STREAK (FULL WIDTH) ----------- */}
+      {/* CARD BACKGROUND CHANGE: Dark Card Color, subtle border/shadow */}
+      <div className="bg-gradient-to-br from-[#1a202c] to-[#2d3748] rounded-xl shadow-lg p-6 border border-gray-700/50">
+        <h2 className="text-xl font-bold mb-3 text-gray-50">Yearly Streak</h2>
+        <YearlyStreak data={streakData} />
+      </div>
+    </div>
+  );
+};
+export default Dashboard;

Frontend/src/pages/home.tsx ADDED Viewed

	@@ -0,0 +1,409 @@

+import React, { useState, useEffect, useRef } from 'react';
+import { Sparkles, Zap, Target, Clock, Award, ChevronRight, Menu, X } from 'lucide-react';
+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';
+interface Feature {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+}
+interface Step {
+    step: string;
+    title: string;
+    desc: string;
+}
+// Add onLogin prop
+interface AIInterviewPlatformProps {
+    onLogin: () => void;
+}
+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
+    const openSignInModal = () => {
+        setModalType('signIn');
+        setIsMenuOpen(false);
+    };
+    const openSignUpModal = () => {
+        setModalType('signUp');
+        setIsMenuOpen(false);
+    };
+    const closeModal = () => setModalType('none');
+    // Handle successful authentication
+    const handleAuthSuccess = () => {
+        closeModal();
+        onLogin(); // Call the parent function to update auth state
+    };
+    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" }
+    ];
+    const heroRef = useRef<HTMLDivElement>(null);
+    return (
+        <div className="w-full min-h-screen bg-linear-to-br from-blue-900 to-gray-400 text-white overflow-x-hidden font-opensans">
+            {/* 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-linear-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-linear-to-br 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-linear-to-br 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-linear-to-br 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 ref={heroRef} id="home" className="min-h-[calc(100vh-68px)] flex items-center pt-20 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-black">
+                {/* Spotlight applied directly to the container as per the demo structure */}
+                <Spotlight parentRef={heroRef} color="#4b9fff" className="mix-blend-screen" />
+                <div className="max-w-7xl mx-auto w-full relative z-10">
+                    <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-linear-to-br 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-linear-to-br 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-linear-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-linear-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-linear-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-linear-to-br from-blue-900/50 to-gray-900/50 rounded-2xl border border-gray-200/30">
+                <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-white 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-white" />
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+            {/* CTA Section */}
+            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-black">
+                <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-linear-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="w-full py-6 px-6 bg-slate-900/95 backdrop-blur-md text-gray-200 flex flex-col sm:flex-row items-center justify-between shadow-inner">
+                {/* Left Side */}
+                <div className="flex items-center space-x-3">
+                    {/* Logo */}
+                    <div className="bg-linear-to-br from-blue-500 to-gray-400 p-2 rounded-lg">
+                        <Sparkles className="w-6 h-6 text-white" />
+                    </div>
+                    <p className="text-sm">
+                        Copyright © {new Date().getFullYear()} — All rights reserved
+                    </p>
+                </div>
+                {/* Right Side */}
+                <div className="flex items-center gap-5 mt-4 sm:mt-0">
+                    {/* Twitter */}
+                    <a href="#" className="hover:text-blue-400 transition">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
+                            <path d="M24 4.557a9.93 9.93 0 01-2.828.775A4.93 4.93 0 0023.337 3a9.864 9.864 0 01-3.127 1.195A4.92 4.92 0 0016.616 3c-2.72 0-4.924 2.21-4.924 4.932 0 .39.042.765.124 1.126C7.728 8.89 4.1 6.91 1.67 3.917a4.936 4.936 0 00-.665 2.48c0 1.71.86 3.213 2.17 4.096A4.9 4.9 0 01.96 9.96v.06c0 2.387 1.68 4.374 3.91 4.828a4.93 4.93 0 01-2.224.086c.626 1.956 2.444 3.384 4.6 3.425A9.874 9.874 0 010 21.54 13.945 13.945 0 007.548 24c9.056 0 14.01-7.512 14.01-14.015 0-.213-.005-.426-.015-.637A9.94 9.94 0 0024 4.557z" />
+                        </svg>
+                    </a>
+                    {/* YouTube */}
+                    <a href="#" className="hover:text-red-500 transition">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
+                            <path d="M19.615 3.184C21.403 3.67 22 5.84 22 12s-.597 8.33-2.385 8.816C17.42 21.27 12 21.27 12 21.27s-5.42 0-7.615-.454C2.597 20.33 2 18.16 2 12s.597-8.33 2.385-8.816C6.58 2.73 12 2.73 12 2.73s5.42 0 7.615.454zM10 8.5l6 3.5-6 3.5v-7z" />
+                        </svg>
+                    </a>
+                    {/* Facebook */}
+                    <a href="#" className="hover:text-blue-500 transition">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
+                            <path d="M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.378 14.2 5 15.112 5H18V0h-3.667C10.55 0 9 1.517 9 4.308V8z" />
+                        </svg>
+                    </a>
+                </div>
+            </footer>
+        </div>
+    );
+};
+export default AIInterviewPlatform;

Frontend/src/pages/note.tsx ADDED Viewed

	@@ -0,0 +1,168 @@

+import React from "react";
+import { FileText, History, RefreshCw, Plus, Download, Upload, Save, Star, Menu, X } from "lucide-react";
+// Placeholder data for the Summary/Important Parts section
+const sampleSummary = [
+  "DP weakness identified. Must solve 10 hard DP problems this week.",
+  "Crucial to articulate Time/Space Complexity for every solution.",
+  "Practice conversational pacing to reduce filler words.",
+];
+const Notes: React.FC = () => {
+  // State for the notes content
+  const [notesContent, setNotesContent] = React.useState(
+    `Goal: Focus on Dynamic Programming and explanation clarity.\n\nKey DP Concepts to review:\n1. Overlapping Subproblems\n2. Optimal Substructure\n3. Memoization vs. Tabulation\n\nInterview Explanation Focus:\n1. State the approach (e.g., "I will use DP with memoization").\n2. Clearly define the state/subproblem (e.g., "dp[i] represents...").\n3. State the base case(s).\n4. Define the recurrence relation.\n5. Analyze Time/Space Complexity (O(n)).\n\n*Self-Reminder: Use fewer 'um's and 'like's.*`
+  );
+  // NEW STATE: State to manage the sidebar's open/close status
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  // Toggle function
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+  // A function to simulate saving the notes (placeholder)
+  const handleSave = () => {
+    alert("Notes Saved!");
+    // In a real app, you would call an API here
+  };
+  return (
+    // Ensure the overall container is flex and full viewport height
+    <div className="flex bg-black h-screen overflow-hidden">
+      {/* 1. Left Sidebar: Navigation & Utility (New, History, Upload) */}
+      <div
+        className={`
+          // Full height and transition for sliding
+          h-screen flex-shrink-0 transition-all duration-300 ease-in-out
+          bg-gray-800 flex flex-col gap-4 shadow-xl
+          ${isSidebarOpen ? 'w-56 p-4' : 'w-0 p-0 overflow-hidden'} // Transition controls width and padding
+        `}
+      >
+        {isSidebarOpen && ( // Only show content when open
+          <>
+            <h3 className="text-xl font-bold text-white mb-2 border-b border-gray-700 pb-2">My Notes</h3>
+            <button
+              className="flex items-center gap-3 w-full bg-blue-600 text-white px-4 py-3 rounded-xl hover:bg-blue-700 transition duration-150 font-semibold whitespace-nowrap"
+              aria-label="Create New Note"
+            >
+              <Plus size={20} />
+              New Note
+            </button>
+            <button
+              className="flex items-center gap-3 w-full text-gray-300 px-4 py-3 rounded-xl hover:bg-gray-700 hover:text-white transition duration-150 whitespace-nowrap"
+              aria-label="Upload Notes"
+            >
+              <Upload size={20} />
+              Upload
+            </button>
+            <button
+              className="flex items-center gap-3 w-full text-gray-300 px-4 py-3 rounded-xl hover:bg-gray-700 hover:text-white transition duration-150 whitespace-nowrap"
+              aria-label="View History"
+            >
+              <History size={20} />
+              History
+            </button>
+          </>
+        )}
+      </div>
+      {/* 2. Main Content Area */}
+      <div className="flex-1 p-8 overflow-y-auto"> {/* Allow main content to scroll */}
+        <header className="flex justify-between items-center mb-6">
+          {/* Toggle Button for Sidebar - Moved to the header of the main content */}
+          <div className="flex items-center gap-4">
+            <button
+              onClick={toggleSidebar}
+              className="p-2 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-800 transition-colors duration-200"
+              aria-label={isSidebarOpen ? "Close Sidebar" : "Open Sidebar"}
+            >
+              {isSidebarOpen ? <X size={24} /> : <Menu size={24} />}
+            </button>
+            <h2 className="text-4xl font-extrabold text-white"> My Prep Notes</h2>
+          </div>
+          {/* Top Right Actions (Save, Rephrase, Download) */}
+          <div className="flex gap-3">
+            <button
+              onClick={handleSave}
+              className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition duration-150 font-medium shadow-md"
+              aria-label="Save Current Note"
+            >
+              <Save size={18} />
+              Save
+            </button>
+            <button
+              className="flex items-center gap-2 bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition duration-150"
+              aria-label="Rephrase Selected Text"
+            >
+              <RefreshCw size={18} />
+              Rephrase
+            </button>
+            <button
+              className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-150"
+              aria-label="Download Notes"
+            >
+              <Download size={18} />
+              Download
+            </button>
+          </div>
+        </header>
+        {/* Note Editor and Summary Section */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Middle Section: Notes Text Area (Takes 2/3 width on large screens) */}
+          <div className="md:col-span-2">
+            <p className="text-white mb-2 font-medium">Current Note: Dynamic Programming & Clarity</p>
+            <textarea
+              className="w-full h-[600px] p-6 text-lg border-2 bg-white border-gray-300 rounded-xl shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/50 resize-none font-mono leading-relaxed"
+              placeholder="Write your notes here..."
+              value={notesContent}
+              onChange={(e) => setNotesContent(e.target.value)}
+            ></textarea>
+          </div>
+          {/* Right Section: Summary/Important Parts (Takes 1/3 width) */}
+          <div className="md:col-span-1">
+            <div className="bg-white p-6 rounded-xl shadow-lg h-full border border-gray-200">
+              <h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2 border-b pb-2">
+                <Star className="text-yellow-500" size={20} />
+                AI Summary & Key Takeaways
+              </h3>
+              <p className="text-sm text-gray-600 mb-4">
+                This section extracts or highlights the most important parts of your current note or feedback.
+              </p>
+              <ul className="space-y-3">
+                {sampleSummary.map((item, index) => (
+                  <li key={index} className="flex items-start gap-2 text-gray-700">
+                    <span className="text-yellow-500 font-extrabold text-lg">•</span>
+                    <span className="text-sm">{item}</span>
+                  </li>
+                ))}
+              </ul>
+              <button
+                className="mt-6 flex items-center gap-2 bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition duration-150 text-sm w-full justify-center"
+                aria-label="Generate Summary"
+              >
+                <FileText size={16} />
+                Generate Summary
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Notes;

Frontend/src/pages/quize.tsx ADDED Viewed

	@@ -0,0 +1,125 @@

+import React from "react";
+import { FileText, FileSpreadsheet, Code2, ListChecks, UploadCloud, Type } from "lucide-react";
+// The structure of this component is heavily modified to meet the new layout requirements.
+const ResumeGeneratedQuize: React.FC = () => {
+    // Consistent purple button style
+    const buttonClass = "w-full py-3 rounded-lg bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-400 hover:to-blue-600 font-medium transition shadow-lg shadow-blue-500/30 text-white mt-4";
+    const OutputTypeOption = ({ icon, title, desc }: { icon: React.ReactNode; title: string; desc: string }) => (
+        // These cards inherently take full width of their parent container (which is now the right column)
+        <div className="p-4 bg-slate-900/50 rounded-xl border border-slate-700 hover:bg-slate-800/60 transition cursor-pointer">
+            <div className="flex items-center gap-3 mb-2">
+                {icon}
+                <h4 className="text-xl font-semibold text-gray-50">{title}</h4>
+            </div>
+            <p className="text-gray-400 text-sm">{desc}</p>
+        </div>
+    );
+    const SourceCard = ({ icon, title, desc, actionText }: { icon: React.ReactNode; title: string; desc: string; actionText: string }) => (
+        <div className="p-6 bg-slate-900/60 rounded-2xl shadow-xl border border-slate-700 hover:bg-slate-800/70 transition flex flex-col h-full">
+            <div className="flex items-start gap-4 mb-4">
+                {icon}
+                <div>
+                    <h2 className="text-2xl font-bold">{title}</h2>
+                    <p className="text-gray-400 mt-1 text-sm">{desc}</p>
+                </div>
+            </div>
+            {/* The SourceCard button width is intentionally set to w-fit px-6 to be narrower */}
+            <button className={buttonClass.replace('w-full', 'w-fit px-6')} >
+                {actionText}
+            </button>
+        </div>
+    );
+    return (
+        <div className="min-h-screen bg-black text-white py-20 px-6 lg:px-12">
+            {/* Page Title */}
+            <h1 className="text-4xl font-bold mb-16 text-center">
+                Smart AI-Powered Quiz Generator
+            </h1>
+            {/* ===== MAIN TWO-COLUMN LAYOUT (Source Selection vs. Configuration) ===== */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                {/* --- LEFT SIDE: INPUT SOURCE SELECTION --- */}
+                <div>
+                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-blue-700 pb-2">
+                        1. Select Quiz Source
+                    </h3>
+                    <div className="space-y-8">
+                        {/* Consolidated Resume/Note PDF Upload Card */}
+                        <SourceCard
+                            icon={<FileSpreadsheet className="w-8 h-8 text-cyan-400" />}
+                            title="Resume/Note PDF Upload"
+                            desc="Generate quizzes based on skills and experience listed in your resume file."
+                            actionText="Upload"
+                        />
+                    </div>
+                </div>
+                {/* --- RIGHT SIDE: PROMPT & OUTPUT CONFIGURATION (The full width section) --- */}
+                <div className="lg:sticky lg:top-8 self-start">
+                    <h3 className="text-3xl font-bold mb-6 text-gray-100 border-b border-blue-700 pb-2">
+                        2. Configure & Generate
+                    </h3>
+                    {/* Prompt/Text Area Section */}
+                    <div className="bg-slate-900/60 rounded-2xl shadow-2xl p-6 border border-slate-800 mb-8">
+                        <label htmlFor="prompt-area" className="text-lg font-semibold block mb-3 text-gray-200">
+                            Custom Prompt/Instructions (Optional)
+                        </label>
+                        <textarea
+                            id="prompt-area"
+                            rows={4}
+                            placeholder="e.g., 'Focus only on Python and OOP concepts' or 'Generate a quiz on the content uploaded in step 1'"
+                            className="w-full p-3 rounded-lg bg-black/40 border border-slate-700 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-600 transition"
+                        ></textarea>
+                        <p className="text-gray-500 text-sm mt-2">
+                            This prompt refines the quiz generation based on the selected source.
+                        </p>
+                    </div>
+                    {/* Output Type Section - NOW CORRECTLY PLACED INSIDE THE RIGHT COLUMN */}
+                </div>
+            </div>
+            <div className="lg:sticky lg:top-8 self-start">
+                <h4 className="text-2xl font-semibold mb-4 text-gray-200">
+                    Choose Output Type:
+                </h4>
+                {/* NEW: Use grid-cols-2 and gap-4 to place the options side-by-side */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    {/* MCQ Quiz Option - takes full width of its column */}
+                    <OutputTypeOption
+                        icon={<ListChecks className="w-6 h-6 text-blue-400" />}
+                        title="Multiple Choice Quiz (MCQ)"
+                        desc="Ideal for quick assessment of knowledge and comprehension."
+                    />
+                    {/* Coding Quiz Option - takes full width of its column */}
+                    <OutputTypeOption
+                        icon={<Code2 className="w-6 h-6 text-blue-400" />}
+                        title="Coding Challenge Quiz"
+                        desc="Generates problems requiring code snippets or full functions for evaluation."
+                    />
+                </div>
+                {/* Main Generation Button - Full width (w-full is in buttonClass) */}
+                <button className={buttonClass + ' text-xl mt-8'}>
+                    Generate Quiz Now
+                </button>
+            </div>
+        </div>
+    );
+};
+export default ResumeGeneratedQuize;

Frontend/src/utils/generateYearlyStreakData.ts ADDED Viewed

	@@ -0,0 +1,20 @@

+import dayjs from "dayjs";
+export const generateYearlyStreakData = () => {
+  const today = dayjs();
+  const days = [];
+  for (let i = 0; i < 365; i++) {
+    const date = today.subtract(i, "day");
+    days.push({
+      date: date.format("YYYY-MM-DD"),
+      count: Math.floor(Math.random() * 4), // 0–3 activity
+      weekday: date.day(),
+      week: Math.floor(i / 7),
+      month: date.format("MMM"),
+    });
+  }
+  return days.reverse();
+};

Frontend/tailwind.config.cjs ADDED Viewed

	@@ -0,0 +1,26 @@

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    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.app.json ADDED Viewed

	@@ -0,0 +1,28 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

Frontend/tsconfig.json ADDED Viewed

	@@ -0,0 +1,13 @@

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

Frontend/tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

Frontend/vite.config.ts ADDED Viewed

	@@ -0,0 +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
+// 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'),
+    },
+  },
+})