4reeb-5yed · Jun 26, 2026 · Jun 26, 2026 · Jun 26, 2026
diff --git a/README.md b/README.md
@@ -88,11 +88,15 @@ Full detail: [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) · actual file tree: [
 
 ## Screenshots
 
-> _Placeholder — add images/GIFs here._
+> These are **placeholder graphics**. Replace the files in [`docs/screenshots/`](docs/screenshots/) with real captures of the [live app](https://interview-iq-areeb-syed.vercel.app) (see that folder's README for how).
 
-| Landing | Upload | Report |
-|---|---|---|
-| _TODO_ | _TODO_ | _TODO_ |
+| Landing (`/`) | Upload (`/analyze`) |
+|:---:|:---:|
+| ![Landing page](docs/screenshots/landing.svg) | ![Upload screen](docs/screenshots/upload.svg) |
+
+| Report — light | Report — dark |
+|:---:|:---:|
+| ![Report light mode](docs/screenshots/report.svg) | ![Report dark mode](docs/screenshots/report-dark.svg) |
 
 ---
 

diff --git a/client/src/components/ui/icons.tsx b/client/src/components/ui/icons.tsx
@@ -94,3 +94,33 @@ export const FileText = (p: IconProps) => (
     <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
   </svg>
 );
+
+
+export const Mail = (p: IconProps) => (
+  <svg {...base} {...p}>
+    <rect x="2" y="4" width="20" height="16" rx="2" />
+    <path d="m22 7-10 6L2 7" />
+  </svg>
+);
+export const Circle = (p: IconProps) => (
+  <svg {...base} {...p}>
+    <circle cx="12" cy="12" r="9" />
+  </svg>
+);
+export const ExternalLink = (p: IconProps) => (
+  <svg {...base} {...p}>
+    <path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+  </svg>
+);
+
+// Brand marks use fill (not stroke).
+export const Github = (p: IconProps) => (
+  <svg width={20} height={20} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...p}>
+    <path d="M12 .5C5.73.5.5 5.73.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.28-.01-1.02-.02-2-3.2.7-3.88-1.54-3.88-1.54-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.23-1.28-5.23-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.43-2.69 5.41-5.25 5.69.41.36.78 1.07.78 2.16 0 1.56-.01 2.82-.01 3.2 0 .31.21.68.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5z" />
+  </svg>
+);
+export const Linkedin = (p: IconProps) => (
+  <svg width={20} height={20} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...p}>
+    <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.73V1.73C24 .77 23.21 0 22.23 0z" />
+  </svg>
+);
diff --git a/client/src/features/home/LandingPage.tsx b/client/src/features/home/LandingPage.tsx
@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 
 import { ArrowRight, FileText, Flag, Upload } from "../../components/ui/icons";
+import { AboutSection } from "./components/AboutSection";
 
 const STEPS = [
   { Icon: Upload, title: "Upload your resume", body: "Drop in a PDF. No job description required." },
@@ -50,6 +51,20 @@ export function LandingPage() {
           ))}
         </div>
       </section>
+
+      <AboutSection />
+
+      <footer className="mt-4 border-t border-slate-200 py-6 text-center text-sm font-normal text-slate-400 dark:border-slate-800">
+        © 2026 InterviewIQ · MIT License ·{" "}
+        <a
+          href="https://github.com/4reeb-5yed/InterviewIQ"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded text-slate-500 hover:text-indigo-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:text-indigo-400"
+        >
+          GitHub
+        </a>
+      </footer>
     </div>
   );
 }
diff --git a/client/src/features/home/components/AboutSection.tsx b/client/src/features/home/components/AboutSection.tsx
@@ -0,0 +1,207 @@
+import { Card, CardBody } from "../../../components/ui/card";
+import { Circle, ExternalLink, Github, Linkedin, Mail } from "../../../components/ui/icons";
+
+const VERSION_INFO = [
+  { label: "Version", value: "v1.0.0" },
+  { label: "Status", value: "Active Development" },
+  { label: "Deployment", value: "Production" },
+  { label: "License", value: "MIT" },
+];
+
+const FEATURES = [
+  "Resume Upload",
+  "Career Intelligence",
+  "ATS Analysis",
+  "Recruiter Evaluation",
+  "Job Matching",
+  "Skill Gap Analysis",
+  "Interview Questions",
+  "AI-Powered Reports",
+];
+
+const ROADMAP = [
+  "Advanced prompt engineering",
+  "Better reasoning quality",
+  "Personalized interview preparation",
+  "Resume version comparison",
+  "Company-specific insights",
+  "Mock interview workflow",
+  "Improved report visualizations",
+  "Continuous UI/UX improvements",
+];
+
+const CONNECT = [
+  { Icon: Github, label: "GitHub", value: "@4reeb-5yed", href: "https://github.com/4reeb-5yed", external: true },
+  {
+    Icon: Linkedin,
+    label: "LinkedIn",
+    value: "areeb-syed",
+    href: "https://www.linkedin.com/in/areeb-syed-b19491245/",
+    external: true,
+  },
+  { Icon: Mail, label: "Primary email", value: "areeb.syed1@outlook.com", href: "mailto:areeb.syed1@outlook.com", external: false },
+  { Icon: Mail, label: "Secondary email", value: "4reeb.5yed@gmail.com", href: "mailto:4reeb.5yed@gmail.com", external: false },
+];
+
+const SectionTitle = ({ children }: { children: string }) => (
+  <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">{children}</p>
+);
+
+function Chip({ children }: { children: string }) {
+  return (
+    <span className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
+      {children}
+    </span>
+  );
+}
+
+export function AboutSection() {
+  return (
+    <section className="animate-fade-in py-12" aria-labelledby="about-heading">
+      <h2 id="about-heading" className="sr-only">
+        About InterviewIQ
+      </h2>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Card 1 — About InterviewIQ */}
+        <Card>
+          <CardBody className="space-y-6">
+            <div>
+              <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
+                About InterviewIQ
+              </h3>
+              <div className="mt-3 space-y-3 text-sm font-normal leading-relaxed text-slate-600 dark:text-slate-300">
+                <p>
+                  InterviewIQ is an AI-powered career intelligence platform designed to help
+                  candidates better understand their résumés through structured, evidence-based
+                  analysis.
+                </p>
+                <p>
+                  The current version combines résumé parsing, recruiter-style evaluation, ATS
+                  insights, optional job matching, skill gap analysis, and interview question
+                  generation into a unified workflow.
+                </p>
+                <p>
+                  The primary goal of this project is to explore how modern AI can assist candidates
+                  by providing transparent reasoning and actionable insights rather than simple
+                  keyword matching.
+                </p>
+                <p>
+                  InterviewIQ is actively being improved, with ongoing work focused on better AI
+                  reasoning, richer analyses, and a more polished user experience.
+                </p>
+              </div>
+            </div>
+
+            <div>
+              <SectionTitle>Current version</SectionTitle>
+              <dl className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-4">
+                {VERSION_INFO.map((item) => (
+                  <div
+                    key={item.label}
+                    className="rounded-lg border border-slate-200 p-3 dark:border-slate-800"
+                  >
+                    <dt className="text-xs text-slate-400">{item.label}</dt>
+                    <dd className="mt-0.5 text-sm font-semibold text-slate-900 dark:text-slate-100">
+                      {item.value}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+
+            <div>
+              <SectionTitle>Current features</SectionTitle>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {FEATURES.map((f) => (
+                  <Chip key={f}>{f}</Chip>
+                ))}
+              </div>
+            </div>
+
+            <div>
+              <SectionTitle>Future roadmap</SectionTitle>
+              <ul className="mt-2 grid gap-2 sm:grid-cols-2">
+                {ROADMAP.map((item) => (
+                  <li
+                    key={item}
+                    className="flex items-start gap-2 text-sm font-normal text-slate-600 dark:text-slate-300"
+                  >
+                    <Circle className="mt-0.5 h-4 w-4 shrink-0 text-slate-300 dark:text-slate-600" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div>
+              <SectionTitle>Open source</SectionTitle>
+              <a
+                href="https://github.com/4reeb-5yed/InterviewIQ"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-2 inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm font-semibold text-slate-700 transition-colors hover:border-indigo-400 hover:text-indigo-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-slate-700 dark:text-slate-200 dark:hover:border-indigo-500 dark:hover:text-indigo-400"
+              >
+                <Github className="h-4 w-4" />
+                Repository
+                <ExternalLink className="h-3.5 w-3.5 opacity-60" />
+              </a>
+            </div>
+          </CardBody>
+        </Card>
+
+        {/* Card 2 — Developer */}
+        <Card>
+          <CardBody className="space-y-6">
+            <div>
+              <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">Developer</h3>
+              <p className="mt-3 text-2xl font-semibold text-slate-900 dark:text-slate-100">
+                Areeb Syed
+              </p>
+              <p className="mt-1 text-sm font-semibold text-indigo-600 dark:text-indigo-400">
+                Applied AI • Cybersecurity • Full-Stack Development
+              </p>
+              <p className="mt-3 text-sm font-normal leading-relaxed text-slate-600 dark:text-slate-300">
+                I&apos;m passionate about building practical AI applications that combine modern
+                language models, backend engineering, and intuitive user experiences. InterviewIQ is
+                one of my ongoing projects where I explore how AI can assist candidates with résumé
+                analysis, career guidance, and interview preparation.
+              </p>
+            </div>
+
+            <div>
+              <SectionTitle>Connect</SectionTitle>
+              <ul className="mt-2 space-y-2">
+                {CONNECT.map(({ Icon, label, value, href, external }) => (
+                  <li key={label}>
+                    <a
+                      href={href}
+                      {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                      aria-label={`${label}: ${value}`}
+                      className="group flex items-center gap-3 rounded-lg border border-slate-200 p-3 transition-all hover:-translate-y-0.5 hover:border-indigo-400 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-slate-800 dark:hover:border-indigo-500"
+                    >
+                      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-slate-600 transition-colors group-hover:bg-indigo-50 group-hover:text-indigo-600 dark:bg-slate-800 dark:text-slate-300 dark:group-hover:bg-indigo-950 dark:group-hover:text-indigo-400">
+                        <Icon className="h-5 w-5" />
+                      </span>
+                      <span className="min-w-0">
+                        <span className="block text-sm font-semibold text-slate-900 dark:text-slate-100">
+                          {label}
+                        </span>
+                        <span className="block truncate text-xs text-slate-500 dark:text-slate-400">
+                          {value}
+                        </span>
+                      </span>
+                      {external && (
+                        <ExternalLink className="ml-auto h-4 w-4 shrink-0 text-slate-300 transition-colors group-hover:text-indigo-500 dark:text-slate-600" />
+                      )}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    </section>
+  );
+}
diff --git a/docs/screenshots/README.md b/docs/screenshots/README.md
@@ -0,0 +1,17 @@
+# Screenshots
+
+These are **placeholder SVGs** rendered in the root README. Replace them with real captures of the
+deployed app (https://interview-iq-areeb-syed.vercel.app).
+
+## How to add real screenshots
+
+1. Capture these views (1280×800 recommended; PNG or WebP):
+   - `landing` — the landing page (`/`)
+   - `upload` — the upload screen (`/analyze`)
+   - `report` — a completed report (`/analysis/:taskId`), light mode
+   - `report-dark` — the same report in dark mode (toggle in the top bar)
+2. Save them in this folder, e.g. `landing.png`, `upload.png`, `report.png`, `report-dark.png`.
+3. In the root [`README.md`](../../README.md) Screenshots section, point the image links at the
+   `.png` files (replace the `.svg` placeholders), then commit.
+
+Tip: macOS `⌘⇧4`, Windows `Win+Shift+S`, or your browser devtools "capture full-size screenshot".
diff --git a/docs/screenshots/landing.svg b/docs/screenshots/landing.svg
diff --git a/docs/screenshots/report-dark.svg b/docs/screenshots/report-dark.svg
diff --git a/docs/screenshots/report.svg b/docs/screenshots/report.svg