feat(i18n): localize public landing
This commit is contained in:
cesnimda
@@ -32,6 +32,8 @@ Updated: 2026-08-29
|
||||
- Localized Connected Accounts and the shared email-provider connection controls, validation, OAuth/IMAP feedback, connection states, and accessible form labels without translating provider names or user email addresses.
|
||||
- Localized the consolidated Job Email hub across provider status, search/filter controls, saved drafts, compose/reply flows, destructive confirmations, send safety states, message metadata, pagination, and failure handling. Persisted subjects, bodies, company names, roles, addresses, and provider names remain unchanged.
|
||||
- Corrected the Job Email Direction and Link State controls so their visible labels are programmatically associated with the selects, and removed the remaining mojibake separators/loading text from the workflow.
|
||||
- Localized the complete public landing experience—hero, previews, feature cards, workflow, plan capabilities, CTAs, accessibility text, and footer—while retaining the server-aligned Free/Pro plan structure and commercial-terms safeguards.
|
||||
- Reused the shared EN/NO language control on the unauthenticated landing page, so language can be changed before sign-in and persists through the existing locale mechanism.
|
||||
|
||||
### In progress
|
||||
|
||||
@@ -82,6 +84,7 @@ Updated: 2026-08-29
|
||||
- Job Email focused verification: 16/16 passed, including a Bokmål regression that preserves correspondence content; TypeScript passed.
|
||||
- Full frontend after the Job Email localization batch: 62 suites, 263/263 tests passed.
|
||||
- Next optimized production build and integrated TypeScript check passed after the Job Email localization batch.
|
||||
- Public landing focused verification: 2 suites, 3/3 passed, including live switching to Bokmål and preservation of protected-route sign-in intent; TypeScript passed.
|
||||
- Backend matcher/intelligence focused verification: 35/35 passed, including detection of a manually created Norwegian advert with no saved translation.
|
||||
- Full backend: 712/712 tests passed on .NET 9.
|
||||
- Next optimized production build and TypeScript: passed after the Job Workspace/checklist batch.
|
||||
|
||||
@@ -5,6 +5,7 @@ import userEvent from "@testing-library/user-event";
|
||||
import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
|
||||
import { api } from "./api";
|
||||
import LandingPage from "./views/LandingPage";
|
||||
import { I18nProvider } from "./i18n/I18nProvider";
|
||||
|
||||
jest.mock("./api", () => ({
|
||||
api: {
|
||||
@@ -33,7 +34,7 @@ describe("LandingPage forwards deep-link intent to /login", () => {
|
||||
render(
|
||||
<MemoryRouter initialEntries={[{ pathname: "/", state: { from: "/jobs/42" } }]}>
|
||||
<Routes>
|
||||
<Route path="/" element={<LandingPage />} />
|
||||
<Route path="/" element={<I18nProvider><LandingPage /></I18nProvider>} />
|
||||
<Route path="/login" element={<LoginStub />} />
|
||||
</Routes>
|
||||
</MemoryRouter>,
|
||||
|
||||
@@ -182,6 +182,74 @@ export const translations = {
|
||||
languageNorwegianBokmal: "Norsk bokmål",
|
||||
discoverJobs: "Discover jobs",
|
||||
discoverJobsSubtitle: "Search official job-board feeds and save opportunities to your tracker.",
|
||||
landingSignIn: "Sign in",
|
||||
landingSignInArrow: "Sign in →",
|
||||
landingEyebrow: "AI-ASSISTED JOB SEARCH WORKSPACE",
|
||||
landingHeroBefore: "Run your job search without losing",
|
||||
landingHeroAccent: "the thread",
|
||||
landingHeroBody: "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.",
|
||||
landingGetStarted: "Get started",
|
||||
landingSeeFeatures: "See features",
|
||||
landingPreviewEyebrow: "SEE IT IN ACTION",
|
||||
landingPreviewTitle: "Your whole search, at a glance",
|
||||
landingDashboardAlt: "Jobbjakt dashboard — KPIs, funnel, response trend and follow-ups",
|
||||
landingPipelineAlt: "Drag-and-drop pipeline board",
|
||||
landingWorkspaceAlt: "Per-job workspace with match score, correspondence and attachments",
|
||||
landingPreviewCaption: "Interface preview.",
|
||||
landingFeaturesEyebrow: "WHAT IT DOES",
|
||||
landingFeaturesTitle: "One workspace for the whole search",
|
||||
landingFeaturesBody: "Everything from a single import to the final offer — no more spreadsheets and scattered inboxes.",
|
||||
landingFeaturePipeline: "Centralized pipeline",
|
||||
landingFeaturePipelineBody: "Track every application across Applied, Waiting, Interview, Offer, Rejected and Ghosted — drag to update.",
|
||||
landingFeatureFollowups: "Smart follow-ups",
|
||||
landingFeatureFollowupsBody: "Reminders surface what needs attention next; Pro can help draft a response for you to review.",
|
||||
landingFeatureMatch: "Honest CV match",
|
||||
landingFeatureMatchBody: "A deterministic keyword-coverage score with matched vs missing skills — not an opaque black box.",
|
||||
landingFeatureEmail: "Email correspondence",
|
||||
landingFeatureEmailBody: "Keep linked Gmail and Microsoft messages in the context of the right application.",
|
||||
landingFeatureDocuments: "Attachments & docs",
|
||||
landingFeatureDocumentsBody: "Keep resumes, cover letters and portfolios versioned per application, right where you need them.",
|
||||
landingFeatureInsights: "Dashboard & insights",
|
||||
landingFeatureInsightsBody: "Response rates, funnel, time-in-stage and skill demand across your whole search.",
|
||||
landingHowEyebrow: "HOW IT WORKS",
|
||||
landingHowTitle: "From a link to an offer",
|
||||
landingStepImport: "Import",
|
||||
landingStepImportBody: "Paste a job URL or use the bookmarklet — we parse the role into structured fields.",
|
||||
landingStepMatch: "Match",
|
||||
landingStepMatchBody: "See how your CV covers the role: matched keywords and the gaps to close.",
|
||||
landingStepTailor: "Tailor",
|
||||
landingStepTailorBody: "With Pro, AI can draft a tailored CV and cover letter — you review every word before it goes out.",
|
||||
landingStepTrack: "Track",
|
||||
landingStepTrackBody: "Move it through the pipeline; documents, notes and history stay attached.",
|
||||
landingStepFollowUp: "Follow up",
|
||||
landingStepFollowUpBody: "Linked email threads and reminders keep momentum with grounded replies.",
|
||||
landingStepAnalyze: "Analyze",
|
||||
landingStepAnalyzeBody: "See what's working — response rate, funnel and time-in-stage — and focus your effort.",
|
||||
landingPlansEyebrow: "PLANS",
|
||||
landingPlansTitle: "Two clear plans",
|
||||
landingPlansBody: "Free covers the core job search. Pro adds AI assistance and Pro CV themes.",
|
||||
landingAiAssistance: "AI ASSISTANCE",
|
||||
landingPlanFree: "Free",
|
||||
landingPlanFreeSummary: "Core job-search organisation without AI generation.",
|
||||
landingPlanFreeFeature1: "Track applications in table and Kanban views",
|
||||
landingPlanFreeFeature2: "Keep notes, correspondence and documents with each job",
|
||||
landingPlanFreeFeature3: "Edit your Career Profile and CVs manually",
|
||||
landingPlanFreeFeature4: "Use the deterministic CV-to-job match score",
|
||||
landingPlanFreeFeature5: "Export and retain your own data",
|
||||
landingPlanFreeCta: "Create a Free account",
|
||||
landingPlanPro: "Pro",
|
||||
landingPlanProSummary: "AI assistance and Pro CV themes, with you in control.",
|
||||
landingPlanProFeature1: "Everything in Free",
|
||||
landingPlanProFeature2: "AI-assisted CV and cover-letter drafting",
|
||||
landingPlanProFeature3: "AI job analysis and application strategy",
|
||||
landingPlanProFeature4: "AI interview and follow-up preparation",
|
||||
landingPlanProFeature5: "AI-assisted Career Profile import and rewriting",
|
||||
landingPlanProFeature6: "Pro CV themes",
|
||||
landingPlanProCta: "Sign in to view Pro",
|
||||
landingCommercialTerms: "Commercial terms appear only in configured checkout. Your applications, documents and exports remain accessible if your plan changes.",
|
||||
landingReadyTitle: "Ready to organize your search?",
|
||||
landingReadyBody: "Sign in to start tracking applications, tailoring CVs, and following up with intent.",
|
||||
landingFooter: "© {year} Jobbjakt — a focused workspace for the modern job search.",
|
||||
jobDiscoveryRoleCompany: "Role or company",
|
||||
jobDiscoveryMunicipality: "Municipality",
|
||||
jobDiscoverySearchNav: "Search NAV",
|
||||
@@ -2199,6 +2267,74 @@ export const translations = {
|
||||
languageNorwegianBokmal: "Norsk bokmål",
|
||||
discoverJobs: "Finn jobber",
|
||||
discoverJobsSubtitle: "Søk i offisielle jobbportaler og lagre muligheter i oversikten din.",
|
||||
landingSignIn: "Logg inn",
|
||||
landingSignInArrow: "Logg inn →",
|
||||
landingEyebrow: "AI-STØTTET ARBEIDSOMRÅDE FOR JOBBSØK",
|
||||
landingHeroBefore: "Hold oversikten gjennom hele",
|
||||
landingHeroAccent: "jobbsøket",
|
||||
landingHeroBody: "Importer en stilling, tilpass CV-en, følg hver søknad og hold korrespondanse med rekrutterere knyttet til riktig jobb — alt i ett fokusert arbeidsområde. Assisterende, aldri autonomt: du godkjenner hvert utkast.",
|
||||
landingGetStarted: "Kom i gang",
|
||||
landingSeeFeatures: "Se funksjoner",
|
||||
landingPreviewEyebrow: "SE DET I BRUK",
|
||||
landingPreviewTitle: "Hele jobbsøket med ett blikk",
|
||||
landingDashboardAlt: "Jobbjakt-oversikt med nøkkeltall, trakt, svartrend og oppfølginger",
|
||||
landingPipelineAlt: "Dra-og-slipp-tavle for søknadsprosessen",
|
||||
landingWorkspaceAlt: "Arbeidsområde per jobb med samsvar, korrespondanse og vedlegg",
|
||||
landingPreviewCaption: "Forhåndsvisning av grensesnittet.",
|
||||
landingFeaturesEyebrow: "DETTE FÅR DU",
|
||||
landingFeaturesTitle: "Ett arbeidsområde for hele jobbsøket",
|
||||
landingFeaturesBody: "Alt fra første import til endelig tilbud — uten regneark og spredte innbokser.",
|
||||
landingFeaturePipeline: "Samlet søknadsprosess",
|
||||
landingFeaturePipelineBody: "Følg alle søknader gjennom Søkt, Venter, Intervju, Tilbud, Avslått og Ingen svar — dra for å oppdatere.",
|
||||
landingFeatureFollowups: "Smarte oppfølginger",
|
||||
landingFeatureFollowupsBody: "Påminnelser viser hva som trenger oppmerksomhet; Pro kan hjelpe med et svarutkast du gjennomgår.",
|
||||
landingFeatureMatch: "Ærlig CV-samsvar",
|
||||
landingFeatureMatchBody: "En deterministisk dekning av nøkkelord med samsvarende og manglende ferdigheter — ikke en ugjennomsiktig svart boks.",
|
||||
landingFeatureEmail: "E-postkorrespondanse",
|
||||
landingFeatureEmailBody: "Behold tilknyttede Gmail- og Microsoft-meldinger i sammenheng med riktig søknad.",
|
||||
landingFeatureDocuments: "Vedlegg og dokumenter",
|
||||
landingFeatureDocumentsBody: "Behold CV-er, søknadsbrev og porteføljer versjonert per søknad, der du trenger dem.",
|
||||
landingFeatureInsights: "Oversikt og innsikt",
|
||||
landingFeatureInsightsBody: "Svarprosent, trakt, tid i status og etterspurte ferdigheter gjennom hele jobbsøket.",
|
||||
landingHowEyebrow: "SLIK FUNGERER DET",
|
||||
landingHowTitle: "Fra lenke til tilbud",
|
||||
landingStepImport: "Importer",
|
||||
landingStepImportBody: "Lim inn en stillingslenke eller bruk bokmerket — vi leser rollen inn i strukturerte felt.",
|
||||
landingStepMatch: "Sammenlign",
|
||||
landingStepMatchBody: "Se hvordan CV-en dekker rollen: samsvarende nøkkelord og hullene du bør lukke.",
|
||||
landingStepTailor: "Tilpass",
|
||||
landingStepTailorBody: "Med Pro kan AI lage utkast til tilpasset CV og søknadsbrev — du gjennomgår hvert ord før det sendes.",
|
||||
landingStepTrack: "Følg opp",
|
||||
landingStepTrackBody: "Flytt søknaden gjennom prosessen; dokumenter, notater og historikk forblir tilknyttet.",
|
||||
landingStepFollowUp: "Hold kontakten",
|
||||
landingStepFollowUpBody: "Tilknyttede e-posttråder og påminnelser holder fremdriften med faktabaserte svar.",
|
||||
landingStepAnalyze: "Analyser",
|
||||
landingStepAnalyzeBody: "Se hva som virker — svarprosent, trakt og tid i status — og fokuser innsatsen.",
|
||||
landingPlansEyebrow: "ABONNEMENTER",
|
||||
landingPlansTitle: "To tydelige alternativer",
|
||||
landingPlansBody: "Free dekker det grunnleggende jobbsøket. Pro legger til AI-støtte og Pro-temaer for CV.",
|
||||
landingAiAssistance: "AI-STØTTE",
|
||||
landingPlanFree: "Free",
|
||||
landingPlanFreeSummary: "Organiser jobbsøket uten AI-generering.",
|
||||
landingPlanFreeFeature1: "Følg søknader i tabell- og Kanban-visning",
|
||||
landingPlanFreeFeature2: "Behold notater, korrespondanse og dokumenter med hver jobb",
|
||||
landingPlanFreeFeature3: "Rediger karriereprofilen og CV-er manuelt",
|
||||
landingPlanFreeFeature4: "Bruk det deterministiske samsvaret mellom CV og jobb",
|
||||
landingPlanFreeFeature5: "Eksporter og behold dine egne data",
|
||||
landingPlanFreeCta: "Opprett en Free-konto",
|
||||
landingPlanPro: "Pro",
|
||||
landingPlanProSummary: "AI-støtte og Pro-temaer for CV, med deg i kontroll.",
|
||||
landingPlanProFeature1: "Alt i Free",
|
||||
landingPlanProFeature2: "AI-støttede utkast til CV og søknadsbrev",
|
||||
landingPlanProFeature3: "AI-analyse av jobber og søknadsstrategi",
|
||||
landingPlanProFeature4: "AI-støtte til intervju og oppfølging",
|
||||
landingPlanProFeature5: "AI-støttet import og omskriving av karriereprofil",
|
||||
landingPlanProFeature6: "Pro-temaer for CV",
|
||||
landingPlanProCta: "Logg inn for å se Pro",
|
||||
landingCommercialTerms: "Kommersielle vilkår vises bare i konfigurert betaling. Søknader, dokumenter og eksporter forblir tilgjengelige hvis abonnementet endres.",
|
||||
landingReadyTitle: "Klar til å organisere jobbsøket?",
|
||||
landingReadyBody: "Logg inn for å følge søknader, tilpasse CV-er og jobbe målrettet med oppfølging.",
|
||||
landingFooter: "© {year} Jobbjakt — et fokusert arbeidsområde for moderne jobbsøk.",
|
||||
jobDiscoveryRoleCompany: "Rolle eller bedrift",
|
||||
jobDiscoveryMunicipality: "Kommune",
|
||||
jobDiscoverySearchNav: "Søk i NAV",
|
||||
|
||||
@@ -4,6 +4,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
|
||||
import { api } from "./api";
|
||||
import { I18nProvider } from "./i18n/I18nProvider";
|
||||
import LandingPage from "./views/LandingPage";
|
||||
|
||||
const mockNavigate = jest.fn();
|
||||
@@ -12,17 +13,18 @@ jest.mock("react-router-dom", () => ({
|
||||
useNavigate: () => mockNavigate,
|
||||
}));
|
||||
|
||||
jest.mock("./api", () => ({ api: { get: jest.fn() } }));
|
||||
jest.mock("./api", () => ({ api: { get: jest.fn(), put: jest.fn().mockResolvedValue({ data: {} }) } }));
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
window.localStorage.clear();
|
||||
(api.get as jest.Mock).mockRejectedValue({ response: { status: 401 } });
|
||||
});
|
||||
|
||||
test("shows exactly Free and Pro without invented commercial terms", async () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<LandingPage />
|
||||
<I18nProvider><LandingPage /></I18nProvider>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
@@ -37,3 +39,11 @@ test("shows exactly Free and Pro without invented commercial terms", async () =>
|
||||
fireEvent.click(screen.getByRole("button", { name: "Sign in to view Pro" }));
|
||||
expect(mockNavigate).toHaveBeenCalledWith("/login", { state: { from: "/settings" } });
|
||||
});
|
||||
|
||||
test("switches the public landing page to Norwegian Bokmål", async () => {
|
||||
render(<MemoryRouter><I18nProvider><LandingPage /></I18nProvider></MemoryRouter>);
|
||||
|
||||
fireEvent.click(await screen.findByRole("button", { name: "Norsk" }));
|
||||
expect(await screen.findByRole("heading", { name: "To tydelige alternativer" })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Opprett en Free-konto" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -556,7 +556,7 @@ export default function AppShell({
|
||||
);
|
||||
}
|
||||
|
||||
function StackLanguageToggle({ language, setLanguage }: { language: "en" | "nb"; setLanguage: (language: "en" | "nb") => void }) {
|
||||
export function StackLanguageToggle({ language, setLanguage }: { language: "en" | "nb"; setLanguage: (language: "en" | "nb") => void }) {
|
||||
return (
|
||||
<ButtonGroup size="small" variant="outlined" aria-label="Application language" sx={{ flex: "0 0 auto", "& .MuiButton-root": { minWidth: 36, px: 0.6, fontWeight: 800 } }}>
|
||||
<Button aria-label="English" aria-pressed={language === "en"} variant={language === "en" ? "contained" : "outlined"} onClick={() => setLanguage("en")}>EN</Button>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user