arwas11 · arwas11 · Dec 30, 2025 · Dec 19, 2025 · Dec 19, 2025 · Dec 20, 2025
diff --git a/.gitignore b/.gitignore
@@ -18,5 +18,6 @@ venv/
 .env
 applyai-475622-6ebc0281eea9.json
 
-# Learning files
-learning/
+# Mics
+learning/
+cli.txt
diff --git a/client/app/chat/page.tsx b/client/app/chat/page.tsx
@@ -0,0 +1,21 @@
+import Chat from "@/components/Chat";
+import Link from "next/link";
+
+export default function ChatPage() {
+  return (
+    <div className="flex flex-col items-center min-h-screen p-8 animate-in">
+      {/* Navigation Header */}
+      <div className="w-full max-w-4xl flex justify-between items-center mb-8">
+        <Link 
+          href="/" 
+          className="text-secondary hover:text-primary transition-colors flex items-center gap-2"
+        >
+          ← Back
+        </Link>
+        <h1 className="text-xl font-bold text-primary">AI Career Chat</h1>
+      </div>
+
+      <Chat />
+    </div>
+  );
+}
diff --git a/client/app/globals.css b/client/app/globals.css
@@ -1,2 +1,31 @@
 @import "tailwindcss";
-@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/typography";
+
+@theme {
+/* MAIN BRAND COLORS */
+  --color-primary: #E55934;      /* High-Vis Orange (The Hero Color) */
+  --color-secondary: #8C8787;    /* Brand Gray (Supporting Elements) */
+
+  /* UI COLORS */
+  --color-background: #0a0a0a;   /* Very Dark Gray (Not pure black, softer) */
+  --color-surface: #1a1a1a;      /* Lighter Dark Gray (Cards/Inputs) */
+  --color-text-main: #FFFFFF;    /* Main Text */
+  --color-text-muted: #a3a3a3;   /* Secondary Text */
+}
+
+/* Apply the background color globally */
+body {
+  background-color: var(--color-background);
+  color: var(--color-text-main);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Custom Utilities */
+@utility animate-in {
+  animation: fade-in 0.5s ease-out forwards;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
@@ -1,22 +1,15 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+// import { Geist, Geist_Mono } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/context/AuthContext";
 import Navbar from "@/components/Navbar";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "ApplyAI - Job Assistant",
+  description: "AI-powered resume tailoring and career coaching",
 };
 
 export default function RootLayout({
@@ -26,13 +19,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased 
-        bg-gray-900 text-gray-100 flex justify-center`}
-      >
+      <body className={`${inter.className} min-h-screen flex flex-col bg-background text-white`}>
         <AuthProvider>
           <Navbar />
-          <main className="flex w-full flex-col items-center">
+          <main className="flex-1 w-full max-w-7xl mx-auto p-4">
             {children}
           </main>
         </AuthProvider>

diff --git a/client/app/page.tsx b/client/app/page.tsx
@@ -1,10 +1,50 @@
-import Chat from "@/components/Chat";
+import Link from "next/link";
 
 export default function Home() {
   return (
-    <div>
-      <h1>ApplyAI</h1>
-      <Chat />
+    <div className="flex flex-col items-center justify-center min-h-[80vh] gap-12 animate-in">
+
+      <div className="text-center space-y-4">
+        {/* The Title - Now using Text-Main or Primary explicitly */}
+        <h1 className="text-6xl font-extrabold tracking-tight text-white">
+          Apply<span className="text-primary">AI</span>
+        </h1>
+        <p className="text-secondary text-xl max-w-lg mx-auto">
+          Your intelligent career companion. Tailor resumes and practice interviews in seconds.
+        </p>
+      </div>
+
+      {/* NAVIGATION CARDS */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-3xl px-4">
+
+        {/* Link 1: Chat */}
+        <Link 
+          href="/chat"
+          className="group p-8 bg-surface border border-secondary/20 rounded-2xl hover:border-primary hover:shadow-[0_0_20px_rgba(229,89,52,0.15)] transition-all"
+        >
+          <div className="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">💬</div>
+          <h2 className="text-2xl font-bold text-white mb-2 group-hover:text-primary transition-colors">
+            AI Career Chat
+          </h2>
+          <p className="text-secondary text-sm">
+            Chat with an expert agent about your career goals and interview prep.
+          </p>
+        </Link>
+
+        {/* Link 2: Resume */}
+        <Link 
+          href="/resume"
+          className="group p-8 bg-surface border border-secondary/20 rounded-2xl hover:border-primary hover:shadow-[0_0_20px_rgba(229,89,52,0.15)] transition-all"
+        >
+          <div className="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">📄</div>
+          <h2 className="text-2xl font-bold text-white mb-2 group-hover:text-primary transition-colors">
+            Tailor Resume
+          </h2>
+          <p className="text-secondary text-sm">
+            Instant resume rewriting based on job descriptions.
+          </p>
+        </Link>
+      </div>
     </div>
   );
-}
+}
diff --git a/client/app/resume/page.tsx b/client/app/resume/page.tsx
@@ -0,0 +1,21 @@
+import ResumeBuilder from "@/components/ResumeBuilder";
+import Link from "next/link";
+
+export default function ResumePage() {
+  return (
+    <div className="flex flex-col items-center min-h-screen p-8 animate-in">
+      {/* Navigation Header */}
+      <div className="w-full max-w-4xl flex justify-between items-center mb-8">
+        <Link 
+          href="/" 
+          className="text-secondary hover:text-primary transition-colors flex items-center gap-2"
+        >
+          ← Back
+        </Link>
+        <h1 className="text-xl font-bold text-primary">Resume Tailor</h1>
+      </div>
+
+      <ResumeBuilder />
+    </div>
+  );
+}