From 3d5ab8f32c9ec4b68ab53160ff7086774724976d Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Sun, 5 Jul 2026 20:45:20 +0200
Subject: [PATCH] feat(ui): add pricing section to landing page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three honest tiers (Free / Pro £9-mo / Bring-your-own-key £3-mo) billed monthly
or yearly — never by the week (the anti-Teal positioning from
docs/remaster/RESEARCH_COMPETITORS.md), with a "Most popular" highlight and the
assistive-not-autonomous trust note. Prices are indicative placeholders for the
SaaS direction.

Verified live: pricing section + all three tiers render at "/".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 job-tracker-ui/src/pages/LandingPage.tsx | 63 ++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/job-tracker-ui/src/pages/LandingPage.tsx b/job-tracker-ui/src/pages/LandingPage.tsx
index 64050f9..ce326c4 100644
--- a/job-tracker-ui/src/pages/LandingPage.tsx
+++ b/job-tracker-ui/src/pages/LandingPage.tsx
@@ -34,6 +34,12 @@ const STEPS: { n: number; title: string; body: string }[] = [
   { n: 6, title: "Analyze", body: "See what's working — response rate, funnel and time-in-stage — and focus your effort." },
 ];
 
+const PRICING: { name: string; price: string; cadence: string; highlight: boolean; features: string[]; cta: string }[] = [
+  { name: "Free", price: "£0", cadence: "forever", highlight: false, cta: "Get started", features: ["Unlimited job tracking & pipeline", "One-click capture (bookmarklet + PWA)", "Deterministic CV↔job match score", "3 AI CV tailors / month"] },
+  { name: "Pro", price: "£9", cadence: "/ month · billed monthly or yearly", highlight: true, cta: "Start Pro", features: ["Everything in Free", "Unlimited AI CV & cover-letter tailoring", "CV versions + factuality guardrail", "Gmail correspondence CRM", "Analytics drill-downs"] },
+  { name: "Bring your own key", price: "£3", cadence: "/ month + your AI key", highlight: false, cta: "Get started", features: ["Everything in Pro", "Use your own Gemini / Groq key", "Unlimited AI at provider cost", "Privacy-first & self-host friendly"] },
+];
+
 export default function LandingPage() {
   const navigate = useNavigate();
   const [checking, setChecking] = useState(true);
@@ -147,6 +153,63 @@ export default function LandingPage() {
         </Container>
       </Box>
 
+      {/* Pricing */}
+      <Container id="pricing" 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 }}>PRICING</Typography>
+          <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>Honest, simple pricing</Typography>
+          <Typography sx={{ color: "text.secondary", fontSize: 18, mt: 1.5 }}>
+            Billed monthly or yearly — never by the week. Cancel anytime.
+          </Typography>
+        </Box>
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" }, gap: 3, alignItems: "start" }}>
+          {PRICING.map((tier) => (
+            <Box
+              key={tier.name}
+              sx={{
+                p: 3.5,
+                borderRadius: 3,
+                position: "relative",
+                bgcolor: "background.paper",
+                border: "2px solid",
+                borderColor: tier.highlight ? "primary.main" : "divider",
+                boxShadow: tier.highlight ? 8 : 0,
+              }}
+            >
+              {tier.highlight && (
+                <Box sx={{ position: "absolute", top: -13, left: 24, px: 1.5, py: 0.5, borderRadius: 999, background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontSize: 12, fontWeight: 800 }}>
+                  Most popular
+                </Box>
+              )}
+              <Typography sx={{ fontWeight: 700, fontSize: 18 }}>{tier.name}</Typography>
+              <Stack direction="row" alignItems="baseline" spacing={0.75} sx={{ my: 1.5 }}>
+                <Typography sx={{ fontWeight: 900, fontSize: 40, lineHeight: 1 }}>{tier.price}</Typography>
+                <Typography sx={{ color: "text.secondary", fontSize: 14 }}>{tier.cadence}</Typography>
+              </Stack>
+              <Stack spacing={1.25} sx={{ my: 2.5 }}>
+                {tier.features.map((f) => (
+                  <Stack key={f} direction="row" spacing={1.25} alignItems="flex-start">
+                    <Box sx={{ color: "success.main", fontWeight: 900, lineHeight: 1.4 }}>✓</Box>
+                    <Typography sx={{ fontSize: 15, color: "text.secondary" }}>{f}</Typography>
+                  </Stack>
+                ))}
+              </Stack>
+              <Button
+                fullWidth
+                variant={tier.highlight ? "contained" : "outlined"}
+                onClick={() => navigate("/login")}
+                sx={tier.highlight ? { background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 800 } : { fontWeight: 700 }}
+              >
+                {tier.cta}
+              </Button>
+            </Box>
+          ))}
+        </Box>
+        <Typography sx={{ textAlign: "center", color: "text.secondary", fontSize: 13, mt: 3 }}>
+          Prices indicative — assistive, never autonomous: you always review and send. No auto-apply spam.
+        </Typography>
+      </Container>
+
       {/* 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 }}>