From 68c1288ac1c6c56f201247407649a07a0ca797f8 Mon Sep 17 00:00:00 2001
From: Arwa Sharif <starskycloud0@gmail.com>
Date: Fri, 19 Dec 2025 17:56:56 -0500
Subject: [PATCH 1/6] refactor(client): Rename Chat component to ResumeBuilder

---
 client/components/ResumeBuilder.tsx | 123 ++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 client/components/ResumeBuilder.tsx

diff --git a/client/components/ResumeBuilder.tsx b/client/components/ResumeBuilder.tsx
new file mode 100644
index 0000000..328ba5f
--- /dev/null
+++ b/client/components/ResumeBuilder.tsx
@@ -0,0 +1,123 @@
+"use client";
+import { useState } from "react";
+import type { MouseEvent } from "react";
+import ResumeDisplay from "./ResumeDisplay"
+
+// The URL for the deployed backend.
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export default function ResumeBuilder() {
+  // State for the user's input
+  const [resume, setResume] = useState("");
+  const [jobDescription, setJobDescription] = useState("");
+
+  // State for the API response
+  const [tailoredResume, setTailoredResume] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+
+
+  const handleSubmit = async (e : MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setTailoredResume(""); // Clear previous results
+
+    // Use FormData because FastAPI endpoint expects Form()
+    const formData = new FormData();
+    formData.append("base_resume", resume);
+    formData.append("job_description", jobDescription);
+
+    try{
+      // Make the API call to /resumes endpoint
+      const response = await fetch(`${API_URL}/resumes`, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.ok) {
+        // Handle HTTP errors (e.g., 500 from the server)
+        throw new Error(`API Error: ${response.status} ${response.statusText}`);
+      }
+
+      const data = await response.json();
+
+      // Update state with the AI's response
+      setTailoredResume(data.tailored_resume);
+    } catch (err){
+      console.error("Fetch error:", err);
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred.");
+      }
+    } finally {
+      // Whether it worked or failed, we're done loading
+      setIsLoading(false);
+    };
+
+  };
+
+  return (
+    <form className="flex w-full max-w-2xl flex-col gap-4 p-4">
+      {/* Resume Text Area */}
+      <div className="flex flex-col gap-2">
+        <label
+          htmlFor="resume"
+          className="text-lg font-semibold text-gray-200"
+        >
+          Your Base Resume
+        </label>
+        <textarea
+          id="resume"
+          rows={10}
+          className="rounded-md border border-gray-600 bg-gray-800 p-3 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          placeholder="Paste your full resume here..."
+          value={resume}
+          onChange={(e) => setResume(e.target.value)}
+        />
+      </div>
+
+      {/* Job Description Text Area */}
+      <div className="flex flex-col gap-2">
+        <label
+          htmlFor="job-description"
+          className="text-lg font-semibold text-gray-200"
+        >
+          The Job Description
+        </label>
+        <textarea
+          id="job-description"
+          rows={10}
+          className="rounded-md border border-gray-600 bg-gray-800 p-3 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          placeholder="Paste the job description here..."
+          value={jobDescription}
+          onChange={(e) => setJobDescription(e.target.value)}
+        />
+      </div>
+
+      {/* Submit Button */}
+      <button
+        type="submit"
+        className="rounded-md bg-blue-600 px-4 py-3 text-lg font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50"
+        onClick={handleSubmit}
+        disabled={isLoading} // Disable button while loading
+      >
+        {isLoading ? "Tailoring..." : "Tailor My Resume"}
+      </button>
+
+      {/* --- UI FOR THE RESPONSE --- */}
+
+      {/* Error Message */}
+      {error && (
+        <div className="rounded-md border border-red-500 bg-red-900/20 p-4 text-red-300">
+          <strong>Error:</strong> {error}
+        </div>
+      )}
+
+      {/* Tailored Resume Output */}
+      <ResumeDisplay tailoredResume={tailoredResume}  />
+    </form>
+  );
+}

From 12b44e2117bc0de3c5e1359cd4918fd45b87d71e Mon Sep 17 00:00:00 2001
From: Arwa Sharif <starskycloud0@gmail.com>
Date: Fri, 19 Dec 2025 18:46:34 -0500
Subject: [PATCH 2/6] feat(client): Create styled Chat component with v4 brand
 palette

---
 client/app/globals.css     |  30 +++++-
 client/components/Chat.tsx | 186 +++++++++++++++++--------------------
 2 files changed, 113 insertions(+), 103 deletions(-)

diff --git a/client/app/globals.css b/client/app/globals.css
index ab19ef9..6fa2e6e 100644
--- a/client/app/globals.css
+++ b/client/app/globals.css
@@ -1,2 +1,30 @@
 @import "tailwindcss";
-@plugin "@tailwindcss/typography";
\ No newline at end of file
+@plugin "@tailwindcss/typography";
+
+@theme {
+  /* Define our custom colors here */
+  /* These automatically become classes like bg-primary, text-secondary */
+  --color-primary: #E55934;      /* Deep Orange-Red */
+  --color-secondary: #FF6F00;    /* Bright Amber */
+  --color-brand-gray: #8C8787;   /* Neutral Gray */
+  --color-background: #000000;   /* Pure Black */
+  --color-surface: #121212;      /* Off-black for cards */
+  --color-white: #FFFFFF;
+}
+
+/* Apply the background color globally */
+body {
+  background-color: var(--color-background);
+  color: var(--color-white);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Optional: Custom utility to replicate the fade-in animation we used */
+@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); }
+}
\ No newline at end of file
diff --git a/client/components/Chat.tsx b/client/components/Chat.tsx
index de367f2..66a90d8 100644
--- a/client/components/Chat.tsx
+++ b/client/components/Chat.tsx
@@ -1,123 +1,105 @@
 "use client";
 import { useState } from "react";
-import type { MouseEvent } from "react";
-import ResumeDisplay from "./ResumeDisplay"
+import ReactMarkdown from "react-markdown";
 
-// The URL for the deployed backend.
-const API_URL = process.env.NEXT_PUBLIC_API_URL;
-
-export default function Chat() {
-  // State for the user's input
-  const [resume, setResume] = useState("");
-  const [jobDescription, setJobDescription] = useState("");
+interface Message {
+  role: "user" | "ai";
+  content: string;
+}
 
-  // State for the API response
-  const [tailoredResume, setTailoredResume] = useState("");
+export default function Chat(){
+  const [input, setInput] = useState("");
+  const [messages, setMessages] = useState<Message[]>([])
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
+  const handleSend = async () => {
+    if (!input.trim()) return;
 
-
-  const handleSubmit = async (e : MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
+    const userMessage: Message = { role: "user", content: input };
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
     setIsLoading(true);
-    setError(null);
-    setTailoredResume(""); // Clear previous results
-
-    // Use FormData because FastAPI endpoint expects Form()
-    const formData = new FormData();
-    formData.append("base_resume", resume);
-    formData.append("job_description", jobDescription);
 
-    try{
-      // Make the API call to /resumes endpoint
-      const response = await fetch(`${API_URL}/resumes`, {
+    try {
+      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/chat`, {
         method: "POST",
-        body: formData,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: userMessage.content }),
       });
 
-      if (!response.ok) {
-        // Handle HTTP errors (e.g., 500 from the server)
-        throw new Error(`API Error: ${response.status} ${response.statusText}`);
-      }
-
-      const data = await response.json();
-
-      // Update state with the AI's response
-      setTailoredResume(data.tailored_resume);
-    } catch (err){
-      console.error("Fetch error:", err);
-      if (err instanceof Error) {
-        setError(err.message);
-      } else {
-        setError("An unknown error occurred.");
-      }
+      if (!res.ok) throw new Error("Failed to fetch response");
+
+      const data = await res.json();
+      const aiMessage: Message = { role: "ai", content: data.reply || data.response };
+      setMessages((prev) => [...prev, aiMessage]);
+    } catch (error) {
+      console.error(error);
+      setMessages((prev) => [
+        ...prev,
+        { role: "ai", content: "Sorry, I encountered an error. Please try again." },
+      ]);
     } finally {
-      // Whether it worked or failed, we're done loading
       setIsLoading(false);
-    };
-
+    }
   };
 
-  return (
-    <form className="flex w-full max-w-2xl flex-col gap-4 p-4">
-      {/* Resume Text Area */}
-      <div className="flex flex-col gap-2">
-        <label
-          htmlFor="resume"
-          className="text-lg font-semibold text-gray-200"
-        >
-          Your Base Resume
-        </label>
-        <textarea
-          id="resume"
-          rows={10}
-          className="rounded-md border border-gray-600 bg-gray-800 p-3 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-          placeholder="Paste your full resume here..."
-          value={resume}
-          onChange={(e) => setResume(e.target.value)}
-        />
+  
+  return(
+ <div className="flex flex-col h-[600px] w-full max-w-2xl border border-brand-gray/30 bg-surface rounded-xl overflow-hidden shadow-2xl shadow-primary/10">
+      
+      {/* Messages Area */}
+      <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-4">
+        {messages.length === 0 && (
+          <div className="text-center text-brand-gray mt-20">
+            <p className="text-xl font-semibold text-white">Hi! I'm ApplyAI.</p>
+            <p className="text-sm">Ask me how to improve your resume or prepare for an interview.</p>
+          </div>
+        )}
+        
+        {messages.map((msg, idx) => (
+          <div
+            key={idx}
+            className={`p-3 rounded-lg max-w-[80%] ${
+              msg.role === "user"
+                ? "bg-primary text-white self-end ml-auto shadow-md" 
+                : "bg-surface border border-brand-gray/30 text-brand-gray self-start"
+            }`}
+          >
+            {msg.role === "ai" ? (
+              <div className="prose prose-invert prose-p:text-brand-gray prose-headings:text-white text-sm">
+                <ReactMarkdown>{msg.content}</ReactMarkdown>
+              </div>
+            ) : (
+              <p className="whitespace-pre-wrap">{msg.content}</p>
+            )}
+          </div>
+        ))}
+        
+        {isLoading && (
+          <div className="self-start bg-surface border border-brand-gray/20 p-3 rounded-lg text-brand-gray text-sm animate-pulse">
+            Thinking...
+          </div>
+        )}
       </div>
 
-      {/* Job Description Text Area */}
-      <div className="flex flex-col gap-2">
-        <label
-          htmlFor="job-description"
-          className="text-lg font-semibold text-gray-200"
-        >
-          The Job Description
-        </label>
-        <textarea
-          id="job-description"
-          rows={10}
-          className="rounded-md border border-gray-600 bg-gray-800 p-3 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-          placeholder="Paste the job description here..."
-          value={jobDescription}
-          onChange={(e) => setJobDescription(e.target.value)}
+      {/* Input Area */}
+      <div className="p-4 bg-background border-t border-brand-gray/20 flex gap-2">
+        <input
+          className="flex-1 bg-surface border border-brand-gray/30 rounded-md p-3 text-white placeholder-brand-gray focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSend()}
+          placeholder="Type your message..."
+          disabled={isLoading}
         />
+        <button
+          onClick={handleSend}
+          disabled={isLoading}
+          className="bg-primary px-6 py-2 rounded-md text-white font-bold hover:bg-secondary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Send
+        </button>
       </div>
-
-      {/* Submit Button */}
-      <button
-        type="submit"
-        className="rounded-md bg-blue-600 px-4 py-3 text-lg font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50"
-        onClick={handleSubmit}
-        disabled={isLoading} // Disable button while loading
-      >
-        {isLoading ? "Tailoring..." : "Tailor My Resume"}
-      </button>
-
-      {/* --- UI FOR THE RESPONSE --- */}
-
-      {/* Error Message */}
-      {error && (
-        <div className="rounded-md border border-red-500 bg-red-900/20 p-4 text-red-300">
-          <strong>Error:</strong> {error}
-        </div>
-      )}
-
-      {/* Tailored Resume Output */}
-      <ResumeDisplay tailoredResume={tailoredResume}  />
-    </form>
+    </div>
   );
-}
+}
\ No newline at end of file

From 6bad1e35f8cf6198e82fe5dc55ae7d6f78289427 Mon Sep 17 00:00:00 2001
From: Arwa Sharif <starskycloud0@gmail.com>
Date: Fri, 19 Dec 2025 19:13:24 -0500
Subject: [PATCH 3/6] refactor(client): Implement semantic routing and update
 brand palette

---
 client/app/chat/page.tsx   | 21 ++++++++++++++++
 client/app/globals.css     | 21 ++++++++--------
 client/app/page.tsx        | 50 ++++++++++++++++++++++++++++++++++----
 client/app/resume/page.tsx | 21 ++++++++++++++++
 4 files changed, 98 insertions(+), 15 deletions(-)
 create mode 100644 client/app/chat/page.tsx
 create mode 100644 client/app/resume/page.tsx

diff --git a/client/app/chat/page.tsx b/client/app/chat/page.tsx
new file mode 100644
index 0000000..57ac8f2
--- /dev/null
+++ 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>
+  );
+}
\ No newline at end of file
diff --git a/client/app/globals.css b/client/app/globals.css
index 6fa2e6e..4701b22 100644
--- a/client/app/globals.css
+++ b/client/app/globals.css
@@ -2,24 +2,25 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
-  /* Define our custom colors here */
-  /* These automatically become classes like bg-primary, text-secondary */
-  --color-primary: #E55934;      /* Deep Orange-Red */
-  --color-secondary: #FF6F00;    /* Bright Amber */
-  --color-brand-gray: #8C8787;   /* Neutral Gray */
-  --color-background: #000000;   /* Pure Black */
-  --color-surface: #121212;      /* Off-black for cards */
-  --color-white: #FFFFFF;
+/* 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-white);
+  color: var(--color-text-main);
   font-family: Arial, Helvetica, sans-serif;
 }
 
-/* Optional: Custom utility to replicate the fade-in animation we used */
+/* Custom Utilities */
 @utility animate-in {
   animation: fade-in 0.5s ease-out forwards;
 }
diff --git a/client/app/page.tsx b/client/app/page.tsx
index 4e64464..1d3d99d 100644
--- 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>
   );
-}
+}
\ No newline at end of file
diff --git a/client/app/resume/page.tsx b/client/app/resume/page.tsx
new file mode 100644
index 0000000..04a15bb
--- /dev/null
+++ 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>
+  );
+}
\ No newline at end of file

From c22b4045da790a39c6c27902c16cc8710647b067 Mon Sep 17 00:00:00 2001
From: Arwa Sharif <starskycloud0@gmail.com>
Date: Fri, 19 Dec 2025 19:36:58 -0500
Subject: [PATCH 4/6] style(client): Fix layout issues and  polish UI

---
 .gitignore                          |  5 +++--
 cli.txt                             |  6 ++++++
 client/app/layout.tsx               | 24 +++++++-----------------
 client/components/Navbar.tsx        | 16 +++++++++++-----
 client/components/ResumeDisplay.tsx | 18 +++++++++++-------
 5 files changed, 38 insertions(+), 31 deletions(-)
 create mode 100644 cli.txt

diff --git a/.gitignore b/.gitignore
index e62a663..91cde97 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,5 +18,6 @@ venv/
 .env
 applyai-475622-6ebc0281eea9.json
 
-# Learning files
-learning/
\ No newline at end of file
+# Mics
+learning/
+cli.text
\ No newline at end of file
diff --git a/cli.txt b/cli.txt
new file mode 100644
index 0000000..b6241b0
--- /dev/null
+++ b/cli.txt
@@ -0,0 +1,6 @@
+# Make sure your virtual environment is active first!
+# source server/.venv/bin/activate
+
+PYTHONPATH=$PYTHONPATH:$(pwd)/server uvicorn server.main:app --reload --port 8000
+
+npm run dev
\ No newline at end of file
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
index 9c85130..8353817 100644
--- 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/components/Navbar.tsx b/client/components/Navbar.tsx
index 8974511..5da7750 100644
--- a/client/components/Navbar.tsx
+++ b/client/components/Navbar.tsx
@@ -1,23 +1,29 @@
 "use client";
 import { useAuth } from "@/context/AuthContext";
+import Link from "next/link";
 
 export default function Navbar() {
   // We grab the tools directly from our custom hook
   const { user, signIn, logOut } = useAuth();
 
   return (
-    <nav className="flex w-full items-center justify-between bg-gray-800 p-4 shadow-md">
-      <h1 className="text-xl font-bold text-white">ApplyAI</h1>
+    <nav className="flex w-full items-center justify-between bg-surface border-b border-secondary/20 p-4 sticky top-0 z-50">
+
+      <Link 
+        href="/" 
+        className="text-xl font-bold tracking-tight text-white hover:opacity-80 transition-opacity">
+        Apply<span className="text-primary">AI</span>
+      </Link>
 
       <div>
         {user ? (
           <div className="flex items-center gap-4">
-            <span className="text-sm text-gray-300">
+            <span className="text-sm text-secondary hidden sm:inline">
               {user.displayName || user.email}
             </span>
             <button
               onClick={logOut}
-              className="rounded bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700"
+              className="rounded bg-background border border-secondary/30 px-4 py-2 text-sm font-semibold text-white hover:bg-red-900/30 hover:border-red-500 hover:text-red-200 transition-all"
             >
               Sign Out
             </button>
@@ -25,7 +31,7 @@ export default function Navbar() {
         ) : (
           <button
             onClick={signIn}
-            className="rounded bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
+            className="rounded bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-orange-600 transition-colors shadow-[0_0_15px_-3px_rgba(229,89,52,0.4)]"
           >
             Sign In with Google
           </button>
diff --git a/client/components/ResumeDisplay.tsx b/client/components/ResumeDisplay.tsx
index 6a7e273..fc2c2e6 100644
--- a/client/components/ResumeDisplay.tsx
+++ b/client/components/ResumeDisplay.tsx
@@ -19,17 +19,21 @@ export default function ResumeDisplay({ tailoredResume }: ResumeDisplayProps) {
   }
 
   return (
-    <div className="flex flex-col gap-2">
-      <h2 className="text-lg font-semibold text-gray-200">
-        Your Tailored Resume:
+    <div className="flex flex-col gap-2 mt-8 animate-in">
+      <h2 className="text-xl font-bold text-primary flex items-center gap-2">
+        <span className="text-2xl">✨</span> Your Tailored Resume
       </h2>
       
       {/* 4. The Styled Container */}
-      <div className="rounded-md border border-gray-600 bg-gray-800 p-4 text-gray-100">
+      <div className="rounded-xl border border-secondary/20 bg-surface p-6 shadow-2xl">
         
-        {/* 5. React Markdown renders the text as real HTML */}
-        {/* 'prose' and 'prose-invert' are Tailwind plugins for nice text formatting */}
-        <div className="prose prose-invert max-w-none">
+        {/* Prose Invert: Makes markdown look good on dark mode */}
+        {/* We override specific colors to match our theme */}
+        <div className="prose prose-invert max-w-none 
+          prose-headings:text-white 
+          prose-p:text-gray-300 
+          prose-strong:text-primary 
+          prose-li:text-gray-300">
           <ReactMarkdown>{tailoredResume}</ReactMarkdown>
         </div>
       </div>

From a1470b846251eb4804be51bd311eea782e9418f0 Mon Sep 17 00:00:00 2001
From: Arwa Sharif <starskycloud0@gmail.com>
Date: Mon, 29 Dec 2025 15:52:15 -0500
Subject: [PATCH 5/6] style(client): Apply brand theme to ResumeBuilder inputs
 and buttons

---
 client/components/ResumeBuilder.tsx | 83 +++++++++++++++--------------
 1 file changed, 42 insertions(+), 41 deletions(-)

diff --git a/client/components/ResumeBuilder.tsx b/client/components/ResumeBuilder.tsx
index 328ba5f..d3503de 100644
--- a/client/components/ResumeBuilder.tsx
+++ b/client/components/ResumeBuilder.tsx
@@ -60,64 +60,65 @@ export default function ResumeBuilder() {
   };
 
   return (
-    <form className="flex w-full max-w-2xl flex-col gap-4 p-4">
-      {/* Resume Text Area */}
-      <div className="flex flex-col gap-2">
-        <label
-          htmlFor="resume"
-          className="text-lg font-semibold text-gray-200"
-        >
-          Your Base Resume
-        </label>
-        <textarea
-          id="resume"
-          rows={10}
-          className="rounded-md border border-gray-600 bg-gray-800 p-3 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-          placeholder="Paste your full resume here..."
-          value={resume}
-          onChange={(e) => setResume(e.target.value)}
-        />
-      </div>
+    <form className="flex w-full max-w-4xl flex-col gap-8 animate-in">
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Resume Text Area */}
+        <div className="flex flex-col gap-2">
+          <label htmlFor="resume" className="text-lg font-semibold text-primary">
+            1. Your Base Resume
+          </label>
+          <textarea
+            id="resume"
+            rows={10}
+            className="rounded-xl border border-secondary/20 bg-surface p-4 text-white shadow-inner focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none transition-all placeholder:text-secondary/50"
+            placeholder="Paste your full resume here..."
+            value={resume}
+            onChange={(e) => setResume(e.target.value)}
+          />
+        </div>
 
-      {/* Job Description Text Area */}
-      <div className="flex flex-col gap-2">
-        <label
-          htmlFor="job-description"
-          className="text-lg font-semibold text-gray-200"
-        >
-          The Job Description
-        </label>
-        <textarea
-          id="job-description"
-          rows={10}
-          className="rounded-md border border-gray-600 bg-gray-800 p-3 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-          placeholder="Paste the job description here..."
-          value={jobDescription}
-          onChange={(e) => setJobDescription(e.target.value)}
-        />
+        {/* Job Description Text Area */}
+        <div className="flex flex-col gap-2">
+          <label htmlFor="job-description" className="text-lg font-semibold text-primary">
+            2. The Job Description
+          </label>
+          <textarea
+            id="job-description"
+            rows={10}
+            className="rounded-xl border border-secondary/20 bg-surface p-4 text-white shadow-inner focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none transition-all placeholder:text-secondary/50"
+            placeholder="Paste the job description here..."
+            value={jobDescription}
+            onChange={(e) => setJobDescription(e.target.value)}
+          />
+        </div>
       </div>
 
       {/* Submit Button */}
       <button
         type="submit"
-        className="rounded-md bg-blue-600 px-4 py-3 text-lg font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50"
+        className="self-center w-full md:w-1/2 rounded-full bg-primary px-6 py-4 text-lg font-bold text-white shadow-lg shadow-primary/20 hover:bg-orange-600 hover:scale-[1.02] transition-all focus:outline-none focus:ring-4 focus:ring-primary/30 disabled:opacity-50 disabled:cursor-not-allowed"
         onClick={handleSubmit}
-        disabled={isLoading} // Disable button while loading
+        disabled={isLoading}
       >
-        {isLoading ? "Tailoring..." : "Tailor My Resume"}
+        {isLoading ? (
+          <span className="flex items-center justify-center gap-2">
+            <span className="animate-spin">⏳</span> Tailoring...
+          </span>
+        ) : (
+          "✨ Generate Tailored Resume"
+        )}
       </button>
 
-      {/* --- UI FOR THE RESPONSE --- */}
-
       {/* Error Message */}
       {error && (
-        <div className="rounded-md border border-red-500 bg-red-900/20 p-4 text-red-300">
+        <div className="rounded-md border border-red-500 bg-red-900/20 p-4 text-red-200 text-center">
           <strong>Error:</strong> {error}
         </div>
       )}
 
       {/* Tailored Resume Output */}
-      <ResumeDisplay tailoredResume={tailoredResume}  />
+      <ResumeDisplay tailoredResume={tailoredResume} />
     </form>
   );
 }

From 385de832f37cfdb330cdba4b384f9c90eee84092 Mon Sep 17 00:00:00 2001
From: Arwa Sharif <starskycloud0@gmail.com>
Date: Mon, 29 Dec 2025 16:22:08 -0500
Subject: [PATCH 6/6] chore: Remove cli.txt from tracking and update gitignore

---
 .gitignore | 2 +-
 cli.txt    | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 cli.txt

diff --git a/.gitignore b/.gitignore
index 91cde97..1d8ad5f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,4 +20,4 @@ applyai-475622-6ebc0281eea9.json
 
 # Mics
 learning/
-cli.text
\ No newline at end of file
+cli.txt
\ No newline at end of file
diff --git a/cli.txt b/cli.txt
deleted file mode 100644
index b6241b0..0000000
--- a/cli.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-# Make sure your virtual environment is active first!
-# source server/.venv/bin/activate
-
-PYTHONPATH=$PYTHONPATH:$(pwd)/server uvicorn server.main:app --reload --port 8000
-
-npm run dev
\ No newline at end of file