From a82aef3dfc0f5ae5ce394351bf4730335dc24880 Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Mon, 13 Jul 2026 09:31:20 +0200
Subject: [PATCH] style(ui): use shared GradientButton on landing page

LandingPage.tsx already closely matched the mockup set (dark navy hero,
gradient CTAs, numbered step badges, feature/pricing cards) from an
earlier pass -- nothing structural needed here. Replaced the 4 places
that hand-rolled the same linear-gradient(90deg,#6366f1,#22d3ee) inline
with the shared GradientButton component introduced this session, so
the gradient can't drift out of sync between screens.
---
 job-tracker-ui/src/views/LandingPage.tsx | 30 +++++++++++++-----------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/job-tracker-ui/src/views/LandingPage.tsx b/job-tracker-ui/src/views/LandingPage.tsx
index 34a4ccb..0299c75 100644
--- a/job-tracker-ui/src/views/LandingPage.tsx
+++ b/job-tracker-ui/src/views/LandingPage.tsx
@@ -12,6 +12,7 @@ import AttachIcon from "@mui/icons-material/DescriptionOutlined";
 import InsightsIcon from "@mui/icons-material/InsightsOutlined";
 
 import { api } from "../api";
+import GradientButton from "../components/GradientButton";
 
 const BRAND_DARK = "#0b1020";
 const BRAND_PANEL = "#111a33";
@@ -84,9 +85,9 @@ export default function LandingPage() {
               <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={goToLogin} sx={{ background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 700 }}>
+            <GradientButton onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 700 }}>
               Sign in
-            </Button>
+            </GradientButton>
           </Stack>
         </Container>
       </Box>
@@ -106,9 +107,9 @@ export default function LandingPage() {
               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={goToLogin} sx={{ background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 800, px: 4, py: 1.25 }}>
+              <GradientButton size="large" onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 800, px: 4, py: 1.25 }}>
                 Get started
-              </Button>
+              </GradientButton>
               <Button size="large" variant="outlined" href="#features" sx={{ color: "#e2e8f0", borderColor: alpha("#ffffff", 0.25), px: 3, py: 1.25 }}>
                 See features
               </Button>
@@ -220,14 +221,15 @@ export default function LandingPage() {
                   </Stack>
                 ))}
               </Stack>
-              <Button
-                fullWidth
-                variant={tier.highlight ? "contained" : "outlined"}
-                onClick={goToLogin}
-                sx={tier.highlight ? { background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 800 } : { fontWeight: 700 }}
-              >
-                {tier.cta}
-              </Button>
+              {tier.highlight ? (
+                <GradientButton fullWidth onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 800 }}>
+                  {tier.cta}
+                </GradientButton>
+              ) : (
+                <Button fullWidth variant="outlined" onClick={goToLogin} sx={{ fontWeight: 700 }}>
+                  {tier.cta}
+                </Button>
+              )}
             </Box>
           ))}
         </Box>
@@ -243,9 +245,9 @@ export default function LandingPage() {
             <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={goToLogin} sx={{ background: "linear-gradient(90deg,#6366f1,#22d3ee)", color: "#0b1020", fontWeight: 800, px: 4, py: 1.25, whiteSpace: "nowrap" }}>
+          <GradientButton size="large" onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 800, px: 4, py: 1.25, whiteSpace: "nowrap" }}>
             Sign in →
-          </Button>
+          </GradientButton>
         </Box>
       </Container>