job-tracker-ui/src/App.tsx

@@ -28,6 +28,7 @@ import JobTable from "./components/JobTable";
 import type { JobTableColumns } from "./components/JobTable";
 import { I18nProvider, useI18n } from "./i18n/I18nProvider";
 import LoginPage from "./pages/LoginPage";
+import LandingPage from "./pages/LandingPage";
 import ForgotPasswordPage from "./pages/ForgotPasswordPage";
 import ResetPasswordPage from "./pages/ResetPasswordPage";
 import RouteErrorPage from "./pages/RouteErrorPage";
@@ -344,6 +345,7 @@ export default function App() {
   });
 
   const router = useMemo(() => createBrowserRouter([
+    { path: "/", element: <LandingPage />, errorElement: <RouteErrorPage /> },
     { path: "/login", element: <LoginPage />, errorElement: <RouteErrorPage /> },
     { path: "/forgot-password", element: <ForgotPasswordPage />, errorElement: <RouteErrorPage /> },
     { path: "/reset-password", element: <ResetPasswordPage />, errorElement: <RouteErrorPage /> },

job-tracker-ui/src/pages/LandingPage.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from "react";
+
+import { Box, Button, Container, Stack, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
+
+import DashboardIcon from "@mui/icons-material/SpaceDashboardOutlined";
+import AlarmIcon from "@mui/icons-material/NotificationsActiveOutlined";
+import MatchIcon from "@mui/icons-material/FactCheckOutlined";
+import MailIcon from "@mui/icons-material/MarkEmailReadOutlined";
+import AttachIcon from "@mui/icons-material/DescriptionOutlined";
+import InsightsIcon from "@mui/icons-material/InsightsOutlined";
+
+import { api } from "../api";
+
+const BRAND_DARK = "#0b1020";
+const BRAND_PANEL = "#111a33";
+
+const FEATURES: { icon: React.ReactNode; title: string; body: string }[] = [
+  { icon: <DashboardIcon />, title: "Centralized pipeline", body: "Track every application across Applied, Waiting, Interview, Offer, Rejected and Ghosted — drag to update." },
+  { icon: <AlarmIcon />, title: "Smart follow-ups", body: "Reminders surface what needs attention next, with a grounded draft ready to review and send." },
+  { icon: <MatchIcon />, title: "Honest CV match", body: "A deterministic keyword-coverage score with matched vs missing skills — not an opaque black box." },
+  { icon: <MailIcon />, title: "Email correspondence", body: "Link Gmail threads to a job; new replies appear automatically without re-importing." },
+  { icon: <AttachIcon />, title: "Attachments & docs", body: "Keep resumes, cover letters and portfolios versioned per application, right where you need them." },
+  { icon: <InsightsIcon />, title: "Dashboard & insights", body: "Response rates, funnel, time-in-stage and skill demand across your whole search." },
+];
+
+const STEPS: { n: number; title: string; body: string }[] = [
+  { n: 1, title: "Import", body: "Paste a job URL or use the bookmarklet — we parse the role into structured fields." },
+  { n: 2, title: "Match", body: "See how your CV covers the role: matched keywords and the gaps to close." },
+  { n: 3, title: "Tailor", body: "AI drafts a tailored CV and cover letter — you review every word before it goes out." },
+  { n: 4, title: "Track", body: "Move it through the pipeline; documents, notes and history stay attached." },
+  { n: 5, title: "Follow up", body: "Linked email threads and reminders keep momentum with grounded replies." },
+  { n: 6, title: "Analyze", body: "See what's working — response rate, funnel and time-in-stage — and focus your effort." },
+];
+
+export default function LandingPage() {
+  const navigate = useNavigate();
+  const [checking, setChecking] = useState(true);
+
+  // If the visitor already has a session, send them straight into the app.
+  useEffect(() => {
+    let active = true;
+    api
+      .get("/auth/me")
+      .then(() => { if (active) navigate("/jobs", { replace: true }); })
+      .catch(() => { if (active) setChecking(false); });
+    return () => { active = false; };
+  }, [navigate]);
+
+  if (checking) {
+    return (
+      <Box sx={{ minHeight: "100vh", display: "grid", placeItems: "center", bgcolor: BRAND_DARK }}>
+        <Typography sx={{ color: "#94a3b8" }}>Loading…</Typography>
+      </Box>
+    );
+  }
+
+  const gradientText = {
+    background: "linear-gradient(90deg,#6366f1,#22d3ee)",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+  } as const;
+
+  return (
+    <Box sx={{ bgcolor: "background.default" }}>
+      {/* Top bar */}
+      <Box sx={{ position: "sticky", top: 0, zIndex: 10, bgcolor: alpha(BRAND_DARK, 0.85), backdropFilter: "blur(8px)", borderBottom: `1px solid ${alpha("#ffffff", 0.08)}` }}>
+        <Container maxWidth="lg">
+          <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ height: 64 }}>
+            <Stack direction="row" alignItems="center" spacing={1.25}>
+              <Box sx={{ width: 30, height: 30, borderRadius: "8px", background: "linear-gradient(135deg,#6366f1,#22d3ee)", display: "grid", placeItems: "center", color: BRAND_DARK, fontWeight: 900 }}>✓</Box>
+              <Typography sx={{ color: "#fff", fontWeight: 800, fontSize: 20 }}>JobTrack</Typography>
+            </Stack>
+            <Button variant="contained" onClick={() => navigate("/login")} sx={{ background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 700 }}>
+              Sign in
+            </Button>
+          </Stack>
+        </Container>
+      </Box>
+
+      {/* Hero */}
+      <Box sx={{ background: `radial-gradient(1200px 500px at 80% -10%, ${alpha("#6366f1", 0.35)}, transparent), linear-gradient(180deg, ${BRAND_DARK}, ${BRAND_PANEL})`, color: "#fff", py: { xs: 8, md: 12 } }}>
+        <Container maxWidth="lg">
+          <Box sx={{ maxWidth: 760 }}>
+            <Box sx={{ display: "inline-block", px: 1.5, py: 0.5, borderRadius: 999, bgcolor: alpha("#ffffff", 0.08), color: "#a5b4fc", fontSize: 13, fontWeight: 600, letterSpacing: 0.5, mb: 3 }}>
+              AI-ASSISTED JOB SEARCH WORKSPACE
+            </Box>
+            <Typography component="h1" sx={{ fontWeight: 800, fontSize: { xs: 40, md: 60 }, lineHeight: 1.05, mb: 2 }}>
+              Run your job search without losing <Box component="span" sx={gradientText}>the thread</Box>.
+            </Typography>
+            <Typography sx={{ color: "#94a3b8", fontSize: { xs: 17, md: 20 }, mb: 4 }}>
+              Import a role, tailor your CV, track every application, and keep recruiter correspondence tied to the
+              right job — all in one focused workspace. Assistive, never autonomous: you approve every draft.
+            </Typography>
+            <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+              <Button size="large" variant="contained" onClick={() => navigate("/login")} sx={{ background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 800, px: 4, py: 1.25 }}>
+                Get started
+              </Button>
+              <Button size="large" variant="outlined" href="#features" sx={{ color: "#e2e8f0", borderColor: alpha("#ffffff", 0.25), px: 3, py: 1.25 }}>
+                See features
+              </Button>
+            </Stack>
+            <Typography sx={{ color: "#64748b", fontSize: 14, mt: 3 }}>
+              React · TypeScript · ASP.NET Core · EF Core · FastAPI AI · Gmail
+            </Typography>
+          </Box>
+        </Container>
+      </Box>
+
+      {/* Features */}
+      <Container id="features" maxWidth="lg" sx={{ py: { xs: 7, md: 10 } }}>
+        <Box sx={{ textAlign: "center", mb: 6 }}>
+          <Typography sx={{ color: "primary.main", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>WHAT IT DOES</Typography>
+          <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>One workspace for the whole search</Typography>
+          <Typography sx={{ color: "text.secondary", fontSize: 18, mt: 1.5 }}>
+            Everything from a single import to the final offer — no more spreadsheets and scattered inboxes.
+          </Typography>
+        </Box>
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr", md: "1fr 1fr 1fr" }, gap: 3 }}>
+          {FEATURES.map((f) => (
+            <Box key={f.title} sx={{ p: 3, borderRadius: 3, border: "1px solid", borderColor: "divider", bgcolor: "background.paper", transition: "box-shadow .2s, transform .2s", "&:hover": { boxShadow: 6, transform: "translateY(-2px)" } }}>
+              <Box sx={{ width: 48, height: 48, borderRadius: 2.5, display: "grid", placeItems: "center", bgcolor: alpha("#6366f1", 0.12), color: "primary.main", mb: 2 }}>{f.icon}</Box>
+              <Typography sx={{ fontWeight: 700, fontSize: 19, mb: 0.75 }}>{f.title}</Typography>
+              <Typography sx={{ color: "text.secondary", fontSize: 15 }}>{f.body}</Typography>
+            </Box>
+          ))}
+        </Box>
+      </Container>
+
+      {/* How it works */}
+      <Box sx={{ background: `linear-gradient(180deg, ${BRAND_DARK}, ${BRAND_PANEL})`, color: "#fff", py: { xs: 7, md: 10 } }}>
+        <Container maxWidth="lg">
+          <Box sx={{ textAlign: "center", mb: 6 }}>
+            <Typography sx={{ color: "#a5b4fc", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>HOW IT WORKS</Typography>
+            <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>From a link to an offer</Typography>
+          </Box>
+          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr", md: "1fr 1fr 1fr" }, gap: 3 }}>
+            {STEPS.map((s) => (
+              <Box key={s.n} sx={{ p: 3, borderRadius: 3, border: `1px solid ${alpha("#ffffff", 0.1)}`, bgcolor: alpha("#ffffff", 0.03) }}>
+                <Box sx={{ width: 40, height: 40, borderRadius: 999, display: "grid", placeItems: "center", background: "linear-gradient(135deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 900, mb: 1.5 }}>{s.n}</Box>
+                <Typography sx={{ fontWeight: 700, fontSize: 18, mb: 0.5 }}>{s.title}</Typography>
+                <Typography sx={{ color: "#94a3b8", fontSize: 15 }}>{s.body}</Typography>
+              </Box>
+            ))}
+          </Box>
+        </Container>
+      </Box>
+
+      {/* CTA */}
+      <Container maxWidth="lg" sx={{ py: { xs: 7, md: 10 } }}>
+        <Box sx={{ borderRadius: 4, p: { xs: 4, md: 6 }, background: "linear-gradient(120deg,#0f172a,#1e293b)", color: "#fff", display: "flex", flexDirection: { xs: "column", md: "row" }, alignItems: { md: "center" }, justifyContent: "space-between", gap: 3 }}>
+          <Box>
+            <Typography sx={{ fontWeight: 800, fontSize: { xs: 24, md: 30 }, mb: 1 }}>Ready to organize your search?</Typography>
+            <Typography sx={{ color: "#94a3b8", fontSize: 17 }}>Sign in to start tracking applications, tailoring CVs, and following up with intent.</Typography>
+          </Box>
+          <Button size="large" variant="contained" onClick={() => navigate("/login")} sx={{ background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 800, px: 4, py: 1.25, whiteSpace: "nowrap" }}>
+            Sign in →
+          </Button>
+        </Box>
+      </Container>
+
+      {/* Footer */}
+      <Box sx={{ borderTop: "1px solid", borderColor: "divider", py: 4 }}>
+        <Container maxWidth="lg">
+          <Stack direction={{ xs: "column", sm: "row" }} justifyContent="space-between" alignItems="center" spacing={1}>
+            <Typography sx={{ color: "text.secondary", fontSize: 14 }}>© {new Date().getFullYear()} JobTrack — a focused workspace for the modern job search.</Typography>
+            <Button variant="text" onClick={() => navigate("/login")} sx={{ fontWeight: 700 }}>Sign in</Button>
+          </Stack>
+        </Container>
+      </Box>
+    </Box>
+  );
+}