feat: UI external pages design overhaul

app/auth/page.tsx

@@ -1,5 +1,5 @@
-import AuthPageClient from "../../src/components/auth/AuthPageClient";
+import AuthView from "../../src/views/Auth/AuthView";
 
 export default function AuthPage() {
-	return <AuthPageClient />;
-}
+  return <AuthView />;
+}

app/globals.css

@@ -1,6 +1,44 @@
 @import "tailwindcss";
 
+@theme {
+  --color-bg: #0A0A0F;
+  --color-surface: #141418;
+  --color-surface-raised: #1E1E26;
+  --color-border: #2A2A35;
+  --color-text-primary: #F5F0E8;
+  --color-text-secondary: #9999A8;
+  --color-accent: #E8C547;
+  --color-accent-dim: #3D3410;
+  --color-error: #EF4444;
+
+  --font-display: "DM Serif Display", Georgia, serif;
+  --font-ui: "Inter", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
+}
+
+/* Light theme overrides */
+.light {
+  --color-bg: #F7F5F0;
+  --color-surface: #FFFFFF;
+  --color-surface-raised: #F0EDE6;
+  --color-border: #E2DDD4;
+  --color-text-primary: #0A0A0F;
+  --color-text-secondary: #6B6870;
+  --color-accent: #B8960A;
+  --color-accent-dim: #FBF3D0;
+  --color-error: #DC2626;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  * {
+    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease;
+  }
+}
+
 body {
   margin: 0;
   padding: 0;
-}
+  background-color: var(--color-bg);
+  color: var(--color-text-primary);
+  font-family: var(--font-ui);
+}

app/layout.tsx

@@ -1,38 +1,80 @@
 import type { Metadata } from "next";
+import { DM_Serif_Display, Inter, JetBrains_Mono } from "next/font/google";
+import { ThemeProvider } from "../src/lib/theme";
 import { AuthProvider } from "../src/context/AuthContext";
 import { Toaster } from "react-hot-toast";
 import ErrorBoundary from "../src/components/ErrorBoundary";
 import "./globals.css";
 
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-ui",
+  display: "swap",
+});
+
+const dmSerifDisplay = DM_Serif_Display({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-display",
+  display: "swap",
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
-	title: {
-		default: "PREP — Quiz Builder & Study Tool",
-		template: "%s — PREP",
-	},
-	description:
-		"Create and share multiple-choice quizzes. Build manually or upload a CSV. Get AI-powered performance reviews.",
-	openGraph: {
-		type: "website",
-		siteName: "PREP",
-		title: "PREP — Quiz Builder & Study Tool",
-		description:
-			"Create and share multiple-choice quizzes. Build manually or upload a CSV.",
-	},
+  title: {
+    default: "PREP — CBT & MCQ Exam Practice",
+    template: "%s — PREP",
+  },
+  description:
+    "Build and share CBT practice tests. Upload your questions, set a timer, and get AI feedback on your weak areas.",
+  openGraph: {
+    type: "website",
+    siteName: "PREP",
+    title: "PREP — CBT & MCQ Exam Practice",
+    description:
+      "Build and share CBT practice tests. Upload your questions, set a timer, and get AI feedback on your weak areas.",
+  },
 };
 
 export default function RootLayout({
-	children,
+  children,
 }: {
-	children: React.ReactNode;
+  children: React.ReactNode;
 }) {
-	return (
-		<html lang="en">
-			<body className="min-h-screen bg-gray-50">
-				<AuthProvider>
-					<Toaster position="top-right" reverseOrder={false} />
-					<ErrorBoundary>{children}</ErrorBoundary>
-				</AuthProvider>
-			</body>
-		</html>
-	);
-}
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${inter.variable} ${dmSerifDisplay.variable} ${jetbrainsMono.variable}`}
+    >
+      <body>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function () {
+                try {
+                  var theme = localStorage.getItem("theme");
+                  if (theme !== "light" && theme !== "dark") theme = "dark";
+                  document.documentElement.classList.add(theme);
+                } catch (e) {
+                  document.documentElement.classList.add("dark");
+                }
+              })();
+            `,
+          }}
+        />
+        <ThemeProvider>
+          <AuthProvider>
+            <ErrorBoundary>{children}</ErrorBoundary>
+            <Toaster position="top-right" reverseOrder={false} />
+          </AuthProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -1,70 +1,28 @@
-import Link from "next/link";
-import { HugeiconsIcon } from "@hugeicons/react";
-import {
-	IceCubesIcon,
-	TaskEdit01Icon,
-	LibraryIcon,
-} from "@hugeicons/core-free-icons";
+import ExternalNav from "../src/components/ExternalNav";
+import Hero from "../src/components/home/Hero";
+import HowItWorks from "../src/components/home/HowItWorks";
+import TakeAQuizStrip from "../src/components/home/TakeAQuizStrip";
+import Features from "../src/components/home/Features";
+import QuizBankPreview from "../src/components/home/QuizBankPreview";
+import WhoItsFor from "../src/components/home/WhoItsFor";
+import CTASection from "../src/components/home/CTASection";
+import Footer from "../src/components/home/Footer";
 
 export default function Home() {
-	return (
-		<div className="min-h-screen bg-black flex items-center justify-center px-4 relative overflow-hidden">
-			{/* Main content */}
-			<div className="relative z-10 max-w-2xl w-full">
-				{/* Glass card */}
-				<div className="backdrop-blur-xl bg-white/5 border border-white/10 rounded-3xl p-12 shadow-2xl">
-					<div className="text-center space-y-8">
-						<h1 className="text-5xl md:text-6xl font-bold text-white tracking-tight">
-							Simple Quiz Builder
-						</h1>
-
-						<p className="text-gray-400 text-lg md:text-xl max-w-lg mx-auto">
-							Create, upload, and share quizzes effortlessly.
-						</p>
-
-						<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
-							{/* Get Started button */}
-							<Link
-								href="/auth"
-								className="group w-full sm:w-auto px-8 py-4 rounded-xl bg-white text-black font-semibold hover:bg-gray-100 transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2"
-							>
-								<HugeiconsIcon icon={IceCubesIcon} />
-								Get Started
-							</Link>
-
-							<Link
-								href="/take"
-								className="group w-full sm:w-auto px-8 py-4 rounded-xl border border-white/20 text-white font-semibold backdrop-blur-sm hover:bg-white/5 transition-all flex items-center justify-center gap-2"
-							>
-								<HugeiconsIcon icon={TaskEdit01Icon} />
-								Take a Quiz
-							</Link>
-							<Link
-								href="/quiz-bank"
-								className="group w-full sm:w-auto px-8 py-4 rounded-xl border border-white/20 text-white font-semibold backdrop-blur-sm hover:bg-white/5 transition-all flex items-center justify-center gap-2"
-							>
-								<HugeiconsIcon icon={LibraryIcon} />
-								Quiz Bank
-							</Link>
-						</div>
-					</div>
-				</div>
-
-				<div className="grid grid-cols-3 gap-4 mt-8 text-center">
-					<div className="backdrop-blur-sm bg-white/5 border border-white/10 rounded-xl p-4">
-						<p className="text-2xl font-bold text-white">Fast</p>
-						<p className="text-sm text-gray-400 mt-1">Quick setup</p>
-					</div>
-					<div className="backdrop-blur-sm bg-white/5 border border-white/10 rounded-xl p-4">
-						<p className="text-2xl font-bold text-white">Simple</p>
-						<p className="text-sm text-gray-400 mt-1">Easy to use</p>
-					</div>
-					<div className="backdrop-blur-sm bg-white/5 border border-white/10 rounded-xl p-4">
-						<p className="text-2xl font-bold text-white">Free</p>
-						<p className="text-sm text-gray-400 mt-1">No cost</p>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
+  return (
+    <div
+      className="min-h-screen"
+      style={{ backgroundColor: "var(--color-bg)" }}
+    >
+      <ExternalNav />
+      <Hero />
+      <HowItWorks />
+      <TakeAQuizStrip />
+      <Features />
+      <QuizBankPreview />
+      <WhoItsFor />
+      <CTASection />
+      <Footer />
+    </div>
+  );
+}

app/quiz-bank/page.tsx

@@ -2,11 +2,10 @@ import type { Metadata } from "next";
 import QuizBankView from "../../src/views/QuizBankView";
 
 export const metadata: Metadata = {
-	title: "Quiz Bank — PREP",
-	description:
-		"Browse and take public quizzes created by the PREP community.",
+  title: "Quiz Bank",
+  description: "Browse and take public quizzes created by the community.",
 };
 
 export default function QuizBankPage() {
-	return <QuizBankView />;
-}
+  return <QuizBankView />;
+}