style(ui): use shared GradientButton on landing page
CI and Deploy / test (push) Successful in 2m18s
CI and Deploy / deploy (push) Successful in 40s

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.
This commit is contained in:
cesnimda
2026-07-13 09:31:20 +02:00
parent fc56f94d56
commit a82aef3dfc
+16 -14
View File
@@ -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>