feat(i18n): localize homepage, navbar and footer (EN/DE)

Musiker15 · claude · Musiker15 · commit dedfb0446d1e · 2026-06-18T09:54:57.000+02:00
Make the landing surface bilingual via the existing global language
switcher. Two new translation tables in lib/i18n.ts: homeTranslations
(Hero, TrustBar, WhyMSK incl. feature copy, Featured/Custom headings,
CTA) and layoutTranslations (navbar links + UI, footer).

The homepage components are server components: app/page.tsx resolves the
language from the cookie and passes `lang` down; the navbar switch's
router.refresh() re-renders them in the new language. Header and Footer
are client components and translate instantly via useLang(). Brand and
product names (Ticket Bot, Giveaway Bot, Dashboard, ecosystem links) stay
untranslated by design.

content/home-features.ts is reduced to HOME_FEATURE_ICONS; the feature
text now lives in homeTranslations and is zipped by index.

Mobile: the language dropdown shows only the flag until lg, so the action
bar does not crowd in the sm–md range.

Out of scope (deliberately): the large ticketbot/giveaway landing pages
and Tebex/custom package data.

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,21 +1,24 @@
+import { cookies, headers } from 'next/headers'
+import { LANG_COOKIE_NAME, resolveLang } from '@/lib/lang'
 import { Hero } from '@/components/home/Hero'
 import { TrustBar } from '@/components/home/TrustBar'
 import { FeaturedPackages } from '@/components/home/FeaturedPackages'
 import { WhyMSK } from '@/components/home/WhyMSK'
 import { CustomPackages } from '@/components/home/CustomPackages'
 import { CTASection } from '@/components/home/CTASection'
 
-export const revalidate = 60
-
 export default async function HomePage() {
+  const [cookieStore, headerStore] = await Promise.all([cookies(), headers()])
+  const lang = resolveLang(cookieStore.get(LANG_COOKIE_NAME)?.value, headerStore.get('accept-language'))
+
   return (
     <>
-      <Hero />
-      <TrustBar />
-      <FeaturedPackages />
-      <WhyMSK />
-      <CustomPackages />
-      <CTASection />
+      <Hero lang={lang} />
+      <TrustBar lang={lang} />
+      <FeaturedPackages lang={lang} />
+      <WhyMSK lang={lang} />
+      <CustomPackages lang={lang} />
+      <CTASection lang={lang} />
     </>
   )
 }
diff --git a/components/home/CTASection.tsx b/components/home/CTASection.tsx
@@ -1,5 +1,6 @@
 import { Sparkles, Github } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
+import { homeTranslations, type Lang } from '@/lib/i18n'
 
 const DISCORD_URL = 'https://discord.gg/5hHSBRHvJE'
 const GITHUB_URL = 'https://github.com/MSK-Scripts'
@@ -12,7 +13,8 @@ function DiscordLogo() {
   )
 }
 
-export function CTASection() {
+export function CTASection({ lang }: { lang: Lang }) {
+  const t = homeTranslations[lang]
   return (
     <section className="border-t border-[var(--color-border)] bg-[color-mix(in_oklab,var(--color-muted)_60%,var(--color-background))]">
       <div className="container-page py-16 md:py-24">
@@ -21,22 +23,22 @@ export function CTASection() {
             <Sparkles className="h-7 w-7 text-[var(--color-primary)]" aria-hidden="true" />
           </div>
           <h2 className="text-balance text-3xl font-bold tracking-tight md:text-4xl">
-            Join 500+ server owners already running MSK.
+            {t.cta_heading}
           </h2>
           <p className="mt-4 text-base text-[var(--color-muted-foreground)] md:text-lg">
-            Discord support, sneak peeks, and announcements — straight from the developer.
+            {t.cta_subtitle}
           </p>
           <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
             <Button asChild size="lg" variant="discord">
               <a href={DISCORD_URL} target="_blank" rel="noopener noreferrer">
                 <DiscordLogo />
-                Join Discord
+                {t.cta_btn_discord}
               </a>
             </Button>
             <Button asChild size="lg" variant="outline">
               <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
                 <Github className="h-4 w-4" />
-                Browse GitHub
+                {t.cta_btn_github}
               </a>
             </Button>
           </div>
diff --git a/components/home/CustomPackages.tsx b/components/home/CustomPackages.tsx
@@ -3,7 +3,8 @@ import { ExternalLink } from 'lucide-react'
 import { Card, CardContent, CardTitle, CardDescription } from '@/components/ui/Card'
 import { Badge, type BadgeVariant } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
-import { CUSTOM_PACKAGES, CUSTOM_PACKAGES_TITLE } from '@/content/custom-packages'
+import { CUSTOM_PACKAGES } from '@/content/custom-packages'
+import { homeTranslations, type Lang } from '@/lib/i18n'
 
 /**
  * Normalisiert Bildpfade aus custom-packages.ts. next/image akzeptiert nur
@@ -17,20 +18,21 @@ function resolveImageSrc(src: string): string {
   return `/${src}`
 }
 
-export function CustomPackages() {
+export function CustomPackages({ lang }: { lang: Lang }) {
+  const t = homeTranslations[lang]
   if (CUSTOM_PACKAGES.length === 0) {
     return null
   }
 
   return (
     <section className="container-page py-16 md:py-20">
       <div className="mb-10">
-        <span className="eyebrow">GitHub &amp; More</span>
+        <span className="eyebrow">{t.custom_eyebrow}</span>
         <h2 className="mt-3 text-3xl font-bold tracking-tight md:text-4xl">
-          {CUSTOM_PACKAGES_TITLE}
+          {t.custom_title}
         </h2>
         <p className="mt-3 max-w-xl text-base text-[var(--color-muted-foreground)]">
-          Free tools, Discord bots, and open-source libraries from the MSK ecosystem.
+          {t.custom_subtitle}
         </p>
       </div>
 
diff --git a/components/home/FeaturedPackages.tsx b/components/home/FeaturedPackages.tsx
@@ -3,8 +3,10 @@ import { ArrowRight } from 'lucide-react'
 import { getPackages } from '@/lib/tebex'
 import { PackageCard } from '@/components/packages/PackageCard'
 import { FEATURED_PACKAGE_IDS, PACKAGE_BADGES, PACKAGE_TAGS, PACKAGE_DESCRIPTIONS } from '@/lib/config'
+import { homeTranslations, type Lang } from '@/lib/i18n'
 
-export async function FeaturedPackages() {
+export async function FeaturedPackages({ lang }: { lang: Lang }) {
+  const t = homeTranslations[lang]
   // Fail-soft: ist die Tebex-API zur Build-Zeit nicht erreichbar/autorisiert
   // (z. B. CI-Builds ohne Secrets wie bei Dependabot-PRs), wird die Sektion
   // ausgeblendet statt den ganzen Build/Prerender zu sprengen.
@@ -20,7 +22,7 @@ export async function FeaturedPackages() {
     return null
   }
 
-  const heading = FEATURED_PACKAGE_IDS.length > 0 ? 'Featured Packages' : 'All Packages'
+  const heading = FEATURED_PACKAGE_IDS.length > 0 ? t.featured_heading_featured : t.featured_heading_all
 
   return (
     <section className="container-page py-16 md:py-20">
@@ -36,7 +38,7 @@ export async function FeaturedPackages() {
           prefetch={true}
           className="hidden items-center gap-1 text-sm font-medium text-[var(--color-primary)] transition-colors hover:underline sm:inline-flex"
         >
-          All packages
+          {t.featured_all_link}
           <ArrowRight className="h-3.5 w-3.5" />
         </Link>
       </div>
diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
@@ -2,8 +2,10 @@ import Link from 'next/link'
 import { ArrowRight, Github } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
 import { Badge } from '@/components/ui/Badge'
+import { homeTranslations, type Lang } from '@/lib/i18n'
 
-export function Hero() {
+export function Hero({ lang }: { lang: Lang }) {
+  const t = homeTranslations[lang]
   return (
     <section className="relative overflow-hidden border-b border-[var(--color-border)]">
       <div aria-hidden className="hero-decor-gradient pointer-events-none absolute inset-0" />
@@ -14,31 +16,30 @@ export function Hero() {
         <div>
           <Badge variant="outline" className="mb-6">
             <span className="pulse-dot inline-block h-1.5 w-1.5 rounded-full bg-[var(--color-primary)]" />
-            Live · Trusted by 500+ Servers
+            {t.hero_badge}
           </Badge>
 
           <h1 className="text-balance text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
-            Premium FiveM<br />
-            Scripts.<br />
-            <span className="text-[var(--color-primary)]">Built by a player.</span>
+            {t.hero_h1_line1}<br />
+            {t.hero_h1_line2}<br />
+            <span className="text-[var(--color-primary)]">{t.hero_h1_accent}</span>
           </h1>
 
           <p className="mt-6 max-w-xl text-pretty text-lg text-[var(--color-muted-foreground)] md:text-xl">
-            Clean code, regular updates, and real support — from the developer
-            who codes every line himself.
+            {t.hero_subtitle}
           </p>
 
           <div className="mt-8 flex flex-wrap gap-3">
             <Button asChild size="lg">
               <Link href="/packages">
-                Browse Packages
+                {t.hero_btn_browse}
                 <ArrowRight className="h-4 w-4" />
               </Link>
             </Button>
             <Button asChild size="lg" variant="outline">
               <a href="https://github.com/MSK-Scripts" target="_blank" rel="noopener noreferrer">
                 <Github className="h-4 w-4" />
-                View on GitHub
+                {t.hero_btn_github}
               </a>
             </Button>
           </div>
diff --git a/components/home/TrustBar.tsx b/components/home/TrustBar.tsx
@@ -1,17 +1,19 @@
+import { homeTranslations, type Lang } from '@/lib/i18n'
+
 interface Kpi {
   number: string
   label: string
   emphasis?: string
 }
 
-const KPIS: Kpi[] = [
-  { number: '500', emphasis: '+', label: 'Customers' },
-  { number: '20',  emphasis: '+', label: 'Resources' },
-  { number: '24/7',             label: 'Discord Support' },
-  { number: 'ESX · QB',    label: 'Frameworks' },
-]
-
-export function TrustBar() {
+export function TrustBar({ lang }: { lang: Lang }) {
+  const t = homeTranslations[lang]
+  const KPIS: Kpi[] = [
+    { number: '500', emphasis: '+', label: t.trust_customers },
+    { number: '20',  emphasis: '+', label: t.trust_resources },
+    { number: '24/7',               label: t.trust_support },
+    { number: 'ESX · QB',           label: t.trust_frameworks },
+  ]
   return (
     <section className="border-b border-[var(--color-border)] bg-[color-mix(in_oklab,var(--color-muted)_60%,var(--color-background))]">
       <div className="container-page grid grid-cols-2 gap-6 py-10 md:grid-cols-4 md:py-12">
diff --git a/components/home/WhyMSK.tsx b/components/home/WhyMSK.tsx
@@ -1,33 +1,37 @@
 import { Card } from '@/components/ui/Card'
-import { HOME_FEATURES } from '@/content/home-features'
+import { HOME_FEATURE_ICONS } from '@/content/home-features'
+import { homeTranslations, type Lang } from '@/lib/i18n'
 
-export function WhyMSK() {
+export function WhyMSK({ lang }: { lang: Lang }) {
+  const t = homeTranslations[lang]
   return (
     <section className="border-b border-t border-[var(--color-border)] bg-[color-mix(in_oklab,var(--color-muted)_40%,var(--color-background))]">
       <div className="container-page py-16 md:py-20">
         <div className="mx-auto mb-12 max-w-2xl text-center">
-          <span className="eyebrow mx-auto inline-flex">Benefits</span>
+          <span className="eyebrow mx-auto inline-flex">{t.why_eyebrow}</span>
           <h2 className="mt-3 text-3xl font-bold tracking-tight md:text-4xl">
-            Why MSK Scripts?
+            {t.why_heading}
           </h2>
           <p className="mt-4 text-base text-[var(--color-muted-foreground)]">
-            No template farms. No corporate roadmap. Just well-crafted FiveM
-            scripts you can trust.
+            {t.why_subtitle}
           </p>
         </div>
 
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          {HOME_FEATURES.map(({ icon: Icon, title, description }) => (
-            <Card key={title} hoverLift className="group p-6">
-              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)] text-[var(--color-primary)] transition-transform duration-200 group-hover:scale-105">
-                <Icon className="h-5 w-5" />
-              </div>
-              <h3 className="mb-2 text-base font-bold">{title}</h3>
-              <p className="text-sm leading-relaxed text-[var(--color-muted-foreground)]">
-                {description}
-              </p>
-            </Card>
-          ))}
+          {HOME_FEATURE_ICONS.map((Icon, i) => {
+            const f = t.why_features[i]
+            return (
+              <Card key={i} hoverLift className="group p-6">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)] text-[var(--color-primary)] transition-transform duration-200 group-hover:scale-105">
+                  <Icon className="h-5 w-5" />
+                </div>
+                <h3 className="mb-2 text-base font-bold">{f.title}</h3>
+                <p className="text-sm leading-relaxed text-[var(--color-muted-foreground)]">
+                  {f.description}
+                </p>
+              </Card>
+            )
+          })}
         </div>
       </div>
     </section>
diff --git a/components/i18n/LanguageDropdown.tsx b/components/i18n/LanguageDropdown.tsx
@@ -28,7 +28,9 @@ export function LanguageDropdown() {
         aria-label="Change language"
       >
         <span aria-hidden>{current.flag}</span>
-        <span className="hidden font-medium sm:inline">{current.label}</span>
+        {/* Label erst ab lg — auf Mobile/Tablet kompakt (nur Flagge), damit die
+            Action-Leiste im sm–md-Bereich nicht überläuft. */}
+        <span className="hidden font-medium lg:inline">{current.label}</span>
         <ChevronDown className={cn('h-3 w-3 transition-transform', open && 'rotate-180')} />
       </Button>
 
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
@@ -5,26 +5,14 @@ import Image from 'next/image'
 import { Github } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
 import { useLang } from '@/components/i18n/LangProvider'
-
-const SHOP_LINKS = [
-  { label: 'All Packages', href: '/packages' },
-  { label: 'Github', href: 'https://github.com/MSK-Scripts', external: true },
-  { label: 'Documentation', href: 'https://docu.msk-scripts.de/', external: true },
-] as const
+import { layoutTranslations } from '@/lib/i18n'
 
 const ECOSYSTEM_LINKS = [
   { label: 'MSKanban',       href: 'https://mskanban.msk-scripts.de/',  external: true },
   { label: 'MSK Paste',      href: 'https://paste.msk-scripts.de/',     external: true },
   { label: 'MSK Shortener',  href: 'https://s.msk-scripts.de/',         external: true },
 ] as const
 
-// Legal-Labels sind sprachabhängig (z. B. Imprint ⇄ Impressum).
-const LEGAL_LINKS = [
-  { en: 'Imprint',            de: 'Impressum',    href: '/terms/imprint' },
-  { en: 'Privacy Policy',     de: 'Datenschutz',  href: '/terms/privacy' },
-  { en: 'Terms & Conditions', de: 'AGB',          href: '/terms' },
-] as const
-
 const DISCORD_URL = 'https://discord.gg/5hHSBRHvJE'
 const GITHUB_URL = 'https://github.com/MSK-Scripts'
 
@@ -49,6 +37,20 @@ function ColumnTitle({ children }: { children: React.ReactNode }) {
 
 export function Footer() {
   const { lang } = useLang()
+  const t = layoutTranslations[lang]
+
+  const shopLinks = [
+    { label: t.footer_all_packages, href: '/packages' },
+    { label: 'Github', href: GITHUB_URL, external: true },
+    { label: t.footer_documentation, href: 'https://docu.msk-scripts.de/', external: true },
+  ]
+  // Legal-Labels sind sprachabhängig (z. B. Imprint ⇄ Impressum).
+  const legalLinks = [
+    { label: t.legal_imprint, href: '/terms/imprint' },
+    { label: t.legal_privacy, href: '/terms/privacy' },
+    { label: t.legal_terms,   href: '/terms' },
+  ]
+
   return (
     <footer className="mt-16 border-t border-[var(--color-border)] bg-[color-mix(in_oklab,var(--color-muted)_40%,var(--color-background))]">
       <div className="container-page py-12">
@@ -61,7 +63,7 @@ export function Footer() {
               <span>MSK Scripts</span>
             </Link>
             <p className="mt-3 max-w-xs text-sm text-[var(--color-muted-foreground)]">
-              FiveM Scripts with Heart 💚
+              {t.footer_tagline}
             </p>
             <div className="mt-4 flex gap-2">
               <Button asChild variant="outline" size="sm" aria-label="Discord">
@@ -84,25 +86,25 @@ export function Footer() {
 
           {/* Shop */}
           <div>
-            <ColumnTitle>Shop</ColumnTitle>
-            {SHOP_LINKS.map(l => (
-              <FooterLink key={l.href} href={l.href}>{l.label}</FooterLink>
+            <ColumnTitle>{t.footer_col_shop}</ColumnTitle>
+            {shopLinks.map(l => (
+              <FooterLink key={l.href} href={l.href} external={l.external}>{l.label}</FooterLink>
             ))}
           </div>
 
           {/* Ecosystem */}
           <div>
-            <ColumnTitle>Ecosystem</ColumnTitle>
+            <ColumnTitle>{t.footer_col_eco}</ColumnTitle>
             {ECOSYSTEM_LINKS.map(l => (
               <FooterLink key={l.href} href={l.href} external>{l.label}</FooterLink>
             ))}
           </div>
 
           {/* Legal */}
           <div>
-            <ColumnTitle>{lang === 'de' ? 'Rechtliches' : 'Legal'}</ColumnTitle>
-            {LEGAL_LINKS.map(l => (
-              <FooterLink key={l.href} href={l.href}>{lang === 'de' ? l.de : l.en}</FooterLink>
+            <ColumnTitle>{t.footer_col_legal}</ColumnTitle>
+            {legalLinks.map(l => (
+              <FooterLink key={l.href} href={l.href}>{l.label}</FooterLink>
             ))}
           </div>
 
@@ -111,15 +113,15 @@ export function Footer() {
 
         <div className="mt-10 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--color-border)] pt-6">
           <p className="text-xs text-[var(--color-muted-foreground)]">
-            © {new Date().getFullYear()} MSK Scripts. All rights reserved.
+            © {new Date().getFullYear()} MSK Scripts. {t.footer_rights}
           </p>
           <p className="text-xs text-[var(--color-muted-foreground)]">
-            Powered by{' '}
+            {t.footer_powered_by}{' '}
             <a href="https://tebex.io" target="_blank" rel="noopener noreferrer" className="hover:text-[var(--color-foreground)] transition-colors">
               Tebex
             </a>
             {' · '}
-            Built by{' '}
+            {t.footer_built_by}{' '}
             <a href="https://www.musiker15.de" target="_blank" rel="noopener noreferrer" className="hover:text-[var(--color-foreground)] transition-colors">
               Musiker15
             </a>
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
diff --git a/content/home-features.ts b/content/home-features.ts
diff --git a/lib/i18n.ts b/lib/i18n.ts
