feat(i18n): localize public landing

2026-08-29 22:30:08 +02:00
parent e9f8653d19
commit 464ba7f4d9
6 changed files with 217 additions and 54 deletions
@@ -14,30 +14,34 @@ import InsightsIcon from "@mui/icons-material/InsightsOutlined";
 import { api } from "../api";
 import GradientButton from "../components/GradientButton";
 import { PUBLIC_PLANS, PublicPlanId } from "../planCatalog";
+import { useI18n } from "../i18n/I18nProvider";
+import type { TranslationKey } from "../i18n/translations";
+import { StackLanguageToggle } from "../layout/AppShell";

 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; Pro can help draft a response for you to review." },
-  { 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: "Keep linked Gmail and Microsoft messages in the context of the right application." },
-  { 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 FEATURES: { icon: React.ReactNode; title: TranslationKey; body: TranslationKey }[] = [
+  { icon: <DashboardIcon />, title: "landingFeaturePipeline", body: "landingFeaturePipelineBody" },
+  { icon: <AlarmIcon />, title: "landingFeatureFollowups", body: "landingFeatureFollowupsBody" },
+  { icon: <MatchIcon />, title: "landingFeatureMatch", body: "landingFeatureMatchBody" },
+  { icon: <MailIcon />, title: "landingFeatureEmail", body: "landingFeatureEmailBody" },
+  { icon: <AttachIcon />, title: "landingFeatureDocuments", body: "landingFeatureDocumentsBody" },
+  { icon: <InsightsIcon />, title: "landingFeatureInsights", body: "landingFeatureInsightsBody" },
 ];

-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: "With Pro, AI can draft 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." },
+const STEPS: { n: number; title: TranslationKey; body: TranslationKey }[] = [
+  { n: 1, title: "landingStepImport", body: "landingStepImportBody" },
+  { n: 2, title: "landingStepMatch", body: "landingStepMatchBody" },
+  { n: 3, title: "landingStepTailor", body: "landingStepTailorBody" },
+  { n: 4, title: "landingStepTrack", body: "landingStepTrackBody" },
+  { n: 5, title: "landingStepFollowUp", body: "landingStepFollowUpBody" },
+  { n: 6, title: "landingStepAnalyze", body: "landingStepAnalyzeBody" },
 ];

 export default function LandingPage() {
  const navigate = useNavigate();
+  const { language, setLanguage, t } = useI18n();
  const location = useLocation() as { state?: { from?: string } };
  const [checking, setChecking] = useState(true);

@@ -66,7 +70,7 @@ export default function LandingPage() {
  if (checking) {
    return (
      <Box sx={{ minHeight: "100vh", display: "grid", placeItems: "center", bgcolor: BRAND_DARK }}>
-        <Typography sx={{ color: "#94a3b8" }}>Loading…</Typography>
+        <Typography sx={{ color: "#94a3b8" }}>{t("loading")}</Typography>
      </Box>
    );
  }
@@ -76,6 +80,13 @@ export default function LandingPage() {
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
  } as const;
+  const plans = PUBLIC_PLANS.map((plan) => ({
+    ...plan,
+    name: t(plan.id === "free" ? "landingPlanFree" : "landingPlanPro"),
+    summary: t(plan.id === "free" ? "landingPlanFreeSummary" : "landingPlanProSummary"),
+    features: plan.features.map((_, index) => t(`landingPlan${plan.id === "free" ? "Free" : "Pro"}Feature${index + 1}` as TranslationKey)),
+    cta: t(plan.id === "free" ? "landingPlanFreeCta" : "landingPlanProCta"),
+  }));

  return (
    <Box sx={{ bgcolor: "background.default" }}>
@@ -87,9 +98,12 @@ 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 }}>Jobbjakt</Typography>
            </Stack>
-            <GradientButton onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 700 }}>
-              Sign in
-            </GradientButton>
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <StackLanguageToggle language={language} setLanguage={setLanguage} />
+              <GradientButton onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 700 }}>
+                {t("landingSignIn")}
+              </GradientButton>
+            </Stack>
          </Stack>
        </Container>
      </Box>
@@ -99,21 +113,20 @@ export default function LandingPage() {
        <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
+              {t("landingEyebrow")}
            </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>.
+              {t("landingHeroBefore")} <Box component="span" sx={gradientText}>{t("landingHeroAccent")}</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.
+              {t("landingHeroBody")}
            </Typography>
            <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
              <GradientButton size="large" onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 800, px: 4, py: 1.25 }}>
-                Get started
+                {t("landingGetStarted")}
              </GradientButton>
              <Button size="large" variant="outlined" href="#features" sx={{ color: "#e2e8f0", borderColor: alpha("#ffffff", 0.25), px: 3, py: 1.25 }}>
-                See features
+                {t("landingSeeFeatures")}
              </Button>
            </Stack>
            <Typography sx={{ color: "#64748b", fontSize: 14, mt: 3 }}>
@@ -126,38 +139,38 @@ export default function LandingPage() {
      {/* Product preview */}
      <Container maxWidth="lg" sx={{ py: { xs: 6, md: 9 } }}>
        <Box sx={{ textAlign: "center", mb: 5 }}>
-          <Typography sx={{ color: "primary.main", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>SEE IT IN ACTION</Typography>
-          <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 26, md: 34 }, mt: 1 }}>Your whole search, at a glance</Typography>
+          <Typography sx={{ color: "primary.main", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>{t("landingPreviewEyebrow")}</Typography>
+          <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 26, md: 34 }, mt: 1 }}>{t("landingPreviewTitle")}</Typography>
        </Box>
        <Box sx={{ borderRadius: 3, overflow: "hidden", border: "1px solid", borderColor: "divider", boxShadow: 10, mb: 3, bgcolor: "background.paper" }}>
-          <Box component="img" src="/mockups/dashboard.svg" alt="Jobbjakt dashboard — KPIs, funnel, response trend and follow-ups" sx={{ width: "100%", display: "block" }} />
+          <Box component="img" src="/mockups/dashboard.svg" alt={t("landingDashboardAlt")} sx={{ width: "100%", display: "block" }} />
        </Box>
        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 3 }}>
          <Box sx={{ borderRadius: 3, overflow: "hidden", border: "1px solid", borderColor: "divider", boxShadow: 6, bgcolor: "background.paper" }}>
-            <Box component="img" src="/mockups/pipeline.svg" alt="Drag-and-drop pipeline board" sx={{ width: "100%", display: "block" }} />
+            <Box component="img" src="/mockups/pipeline.svg" alt={t("landingPipelineAlt")} sx={{ width: "100%", display: "block" }} />
          </Box>
          <Box sx={{ borderRadius: 3, overflow: "hidden", border: "1px solid", borderColor: "divider", boxShadow: 6, bgcolor: "background.paper" }}>
-            <Box component="img" src="/mockups/workspace.svg" alt="Per-job workspace with match score, correspondence and attachments" sx={{ width: "100%", display: "block" }} />
+            <Box component="img" src="/mockups/workspace.svg" alt={t("landingWorkspaceAlt")} sx={{ width: "100%", display: "block" }} />
          </Box>
        </Box>
-        <Typography sx={{ textAlign: "center", color: "text.secondary", fontSize: 13, mt: 2 }}>Interface preview.</Typography>
+        <Typography sx={{ textAlign: "center", color: "text.secondary", fontSize: 13, mt: 2 }}>{t("landingPreviewCaption")}</Typography>
      </Container>

      {/* 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: "primary.main", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>{t("landingFeaturesEyebrow")}</Typography>
+          <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>{t("landingFeaturesTitle")}</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.
+            {t("landingFeaturesBody")}
          </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>
+              <Typography sx={{ fontWeight: 700, fontSize: 19, mb: 0.75 }}>{t(f.title)}</Typography>
+              <Typography sx={{ color: "text.secondary", fontSize: 15 }}>{t(f.body)}</Typography>
            </Box>
          ))}
        </Box>
@@ -167,15 +180,15 @@ export default function LandingPage() {
      <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>
+            <Typography sx={{ color: "#a5b4fc", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>{t("landingHowEyebrow")}</Typography>
+            <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>{t("landingHowTitle")}</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>
+                <Typography sx={{ fontWeight: 700, fontSize: 18, mb: 0.5 }}>{t(s.title)}</Typography>
+                <Typography sx={{ color: "#94a3b8", fontSize: 15 }}>{t(s.body)}</Typography>
              </Box>
            ))}
          </Box>
@@ -185,14 +198,14 @@ export default function LandingPage() {
      {/* Plans */}
      <Container id="plans" 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 }}>PLANS</Typography>
-          <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>Two clear plans</Typography>
+          <Typography sx={{ color: "primary.main", fontWeight: 700, letterSpacing: 1, fontSize: 13 }}>{t("landingPlansEyebrow")}</Typography>
+          <Typography component="h2" sx={{ fontWeight: 800, fontSize: { xs: 28, md: 38 }, mt: 1 }}>{t("landingPlansTitle")}</Typography>
          <Typography sx={{ color: "text.secondary", fontSize: 18, mt: 1.5 }}>
-            Free covers the core job search. Pro adds AI assistance and Pro CV themes.
+            {t("landingPlansBody")}
          </Typography>
        </Box>
        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(2, minmax(0, 1fr))" }, gap: 3, alignItems: "stretch", maxWidth: 900, mx: "auto" }}>
-          {PUBLIC_PLANS.map((plan) => (
+          {plans.map((plan) => (
            <Box
              component="section"
              aria-labelledby={`plan-${plan.id}`}
@@ -211,7 +224,7 @@ export default function LandingPage() {
            >
              {plan.id === "pro" && (
                <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 }}>
-                  AI ASSISTANCE
+                  {t("landingAiAssistance")}
                </Box>
              )}
              <Typography id={`plan-${plan.id}`} component="h3" sx={{ fontWeight: 800, fontSize: 24 }}>{plan.name}</Typography>
@@ -237,7 +250,7 @@ export default function LandingPage() {
          ))}
        </Box>
        <Typography sx={{ textAlign: "center", color: "text.secondary", fontSize: 13, mt: 3 }}>
-          Commercial terms appear only in configured checkout. Your applications, documents and exports remain accessible if your plan changes.
+          {t("landingCommercialTerms")}
        </Typography>
      </Container>

@@ -245,11 +258,11 @@ export default function LandingPage() {
      <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>
+            <Typography sx={{ fontWeight: 800, fontSize: { xs: 24, md: 30 }, mb: 1 }}>{t("landingReadyTitle")}</Typography>
+            <Typography sx={{ color: "#94a3b8", fontSize: 17 }}>{t("landingReadyBody")}</Typography>
          </Box>
          <GradientButton size="large" onClick={goToLogin} sx={{ color: "#0b1020", fontWeight: 800, px: 4, py: 1.25, whiteSpace: "nowrap" }}>
-            Sign in →
+            {t("landingSignInArrow")}
          </GradientButton>
        </Box>
      </Container>
@@ -258,8 +271,8 @@ export default function LandingPage() {
      <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()} Jobbjakt — a focused workspace for the modern job search.</Typography>
-            <Button variant="text" onClick={goToLogin} sx={{ fontWeight: 700 }}>Sign in</Button>
+            <Typography sx={{ color: "text.secondary", fontSize: 14 }}>{t("landingFooter", { year: new Date().getFullYear() })}</Typography>
+            <Button variant="text" onClick={goToLogin} sx={{ fontWeight: 700 }}>{t("landingSignIn")}</Button>
          </Stack>
        </Container>
      </Box>