refactor(marketing): use one shared header & footer across all content pages

src/app/(marketing)/contact/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { getTranslations } from "next-intl/server";
-import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { SiteHeader } from "@/components/SiteHeader";
+import { SiteFooter } from "@/components/SiteFooter";
 import { ContactForm } from "@/components/contact/ContactForm";
 
 export const metadata: Metadata = {
@@ -12,27 +12,11 @@ export const metadata: Metadata = {
 };
 
 export default async function ContactPage() {
-  const t = await getTranslations();
   const c = await getTranslations("contact");
 
   return (
     <>
-      <nav className="sticky top-0 z-50 border-b border-gray-100 bg-white/90 backdrop-blur-md">
-        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
-          <Link href="/" className="text-xl font-bold text-gray-900">
-            {t("nav.brand")}
-          </Link>
-          <div className="flex items-center gap-4">
-            <LanguageSwitcher variant="nav" />
-            <Link
-              href="/map"
-              className="rounded-lg bg-cta-gradient px-4 py-2 text-sm font-medium text-white transition-transform hover:scale-105"
-            >
-              {t("nav.openMap")} &rarr;
-            </Link>
-          </div>
-        </div>
-      </nav>
+      <SiteHeader />
 
       <section className="bg-sand-50 py-16">
         <div className="mx-auto max-w-2xl px-6">
@@ -47,27 +31,7 @@ export default async function ContactPage() {
         </div>
       </section>
 
-      <footer className="border-t border-sand-200 bg-sand-50 py-8">
-        <div className="mx-auto flex max-w-2xl flex-col items-center justify-between gap-4 px-6 text-sm text-gray-500 sm:flex-row">
-          <p>{t("footer.copyright", { year: new Date().getFullYear() })}</p>
-          <div className="flex gap-6">
-            <Link href="/privacy" className="transition-colors hover:text-brand-600">
-              {t("footer.privacy")}
-            </Link>
-            <Link href="/contact" className="transition-colors hover:text-brand-600">
-              {t("footer.contact")}
-            </Link>
-            <a
-              href="https://github.com/Manuel10i/packedplaces"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-colors hover:text-brand-600"
-            >
-              {t("footer.github")}
-            </a>
-          </div>
-        </div>
-      </footer>
+      <SiteFooter />
     </>
   );
 }

src/app/(marketing)/destination/[slug]/page.tsx

@@ -2,8 +2,9 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLocale, getTranslations } from "next-intl/server";
-import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { JsonLd } from "@/components/seo/JsonLd";
+import { SiteHeader } from "@/components/SiteHeader";
+import { SiteFooter } from "@/components/SiteFooter";
 import { getCountryName } from "@/lib/data";
 import {
   allDestinationSlugs,
@@ -118,7 +119,6 @@ export default async function DestinationPage({
   // German slugs force German rendering (see generateMetadata).
   const locale = entry.locale === "de" ? "de" : await getLocale();
   const t = await getTranslations({ locale, namespace: "destination" });
-  const nav = await getTranslations({ locale, namespace: "nav" });
   const tip = await getTranslations({ locale, namespace: "tooltip" });
   const alts = localizedSlugsForSlug(slug);
   const hrefByLocale = alts ? switcherHrefs(alts) : undefined;
@@ -147,26 +147,12 @@ export default async function DestinationPage({
   return (
     <>
       <JsonLd data={jsonLd} />
-      <nav className="sticky top-0 z-50 border-b border-gray-100 bg-white/90 backdrop-blur-md">
-        <div className="mx-auto flex max-w-4xl items-center justify-between px-6 py-4">
-          <Link href="/" className="text-xl font-bold text-gray-900">
-            {nav("brand")}
-          </Link>
-          <div className="flex items-center gap-4">
-            <LanguageSwitcher
-              variant="nav"
-              currentLocale={locale}
-              hrefByLocale={hrefByLocale}
-            />
-            <Link
-              href={mapUrl}
-              className="rounded-lg bg-cta-gradient px-4 py-2 text-sm font-medium text-white transition-transform hover:scale-105"
-            >
-              {nav("openMap")} &rarr;
-            </Link>
-          </div>
-        </div>
-      </nav>
+      <SiteHeader
+        locale={locale}
+        currentLocale={locale}
+        hrefByLocale={hrefByLocale}
+        mapHref={mapUrl}
+      />
 
       <section className="bg-white pb-8 pt-10">
         <div className="mx-auto max-w-4xl px-6">
@@ -251,6 +237,8 @@ export default async function DestinationPage({
           </div>
         </div>
       </section>
+
+      <SiteFooter locale={locale} />
     </>
   );
 }

src/app/(marketing)/page.tsx

@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
-import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { JsonLd } from "@/components/seo/JsonLd";
 import { HeroDestinationSearch } from "@/components/HeroDestinationSearch";
+import { SiteHeader } from "@/components/SiteHeader";
+import { SiteFooter } from "@/components/SiteFooter";
 
 const webAppJsonLd = {
   "@context": "https://schema.org",
@@ -115,41 +116,7 @@ export default async function MarketingPage() {
   return (
     <>
       <JsonLd data={webAppJsonLd} />
-      {/* Navigation */}
-      <nav className="sticky top-0 z-50 border-b border-gray-100 bg-white/90 backdrop-blur-md">
-        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
-          <span className="text-xl font-bold text-gray-900">
-            {t("nav.brand")}
-          </span>
-          <div className="flex items-center gap-8">
-            <a
-              href="#how-it-works"
-              className="hidden text-sm text-gray-600 transition-colors hover:text-brand-600 sm:inline"
-            >
-              {t("nav.howItWorks")}
-            </a>
-            <a
-              href="#data"
-              className="hidden text-sm text-gray-600 transition-colors hover:text-brand-600 sm:inline"
-            >
-              {t("nav.data")}
-            </a>
-            <a
-              href="#open-source"
-              className="hidden text-sm text-gray-600 transition-colors hover:text-brand-600 sm:inline"
-            >
-              {t("nav.openSource")}
-            </a>
-            <LanguageSwitcher variant="nav" />
-            <Link
-              href="/map"
-              className="rounded-lg bg-cta-gradient px-4 py-2 text-sm font-medium text-white transition-transform hover:scale-105"
-            >
-              {t("nav.openMap")} &rarr;
-            </Link>
-          </div>
-        </div>
-      </nav>
+      <SiteHeader />
 
       {/* Hero */}
       <section className="relative overflow-hidden bg-hero-gradient py-20">
@@ -368,36 +335,7 @@ export default async function MarketingPage() {
         </div>
       </section>
 
-      {/* Footer */}
-      <footer className="border-t border-sand-200 bg-sand-50 py-8">
-        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 text-sm text-gray-500 sm:flex-row">
-          <p>{t("footer.copyright", { year: new Date().getFullYear() })}</p>
-          <div className="flex gap-6">
-            <Link href="/privacy" className="transition-colors hover:text-brand-600">
-              {t("footer.privacy")}
-            </Link>
-            <Link href="/contact" className="transition-colors hover:text-brand-600">
-              {t("footer.contact")}
-            </Link>
-            <a
-              href="https://github.com/Manuel10i/packedplaces"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-colors hover:text-brand-600"
-            >
-              {t("footer.github")}
-            </a>
-            <a
-              href="https://github.com/Manuel10i/packedplaces/tree/main/docs"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-colors hover:text-brand-600"
-            >
-              {t("footer.docs")}
-            </a>
-          </div>
-        </div>
-      </footer>
+      <SiteFooter />
     </>
   );
 }

src/app/(marketing)/privacy/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { getTranslations } from "next-intl/server";
-import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { SiteHeader } from "@/components/SiteHeader";
+import { SiteFooter } from "@/components/SiteFooter";
 
 export const metadata: Metadata = {
   title: "Privacy Policy — PackedPlaces.com",
@@ -11,27 +11,11 @@ export const metadata: Metadata = {
 };
 
 export default async function PrivacyPage() {
-  const t = await getTranslations();
   const p = await getTranslations("privacy");
 
   return (
     <>
-      <nav className="sticky top-0 z-50 border-b border-gray-100 bg-white/90 backdrop-blur-md">
-        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
-          <Link href="/" className="text-xl font-bold text-gray-900">
-            {t("nav.brand")}
-          </Link>
-          <div className="flex items-center gap-4">
-            <LanguageSwitcher variant="nav" />
-            <Link
-              href="/map"
-              className="rounded-lg bg-cta-gradient px-4 py-2 text-sm font-medium text-white transition-transform hover:scale-105"
-            >
-              {t("nav.openMap")} &rarr;
-            </Link>
-          </div>
-        </div>
-      </nav>
+      <SiteHeader />
 
       <section className="bg-sand-50 py-16">
         <div className="mx-auto max-w-3xl px-6">
@@ -129,27 +113,7 @@ export default async function PrivacyPage() {
         </div>
       </section>
 
-      <footer className="border-t border-sand-200 bg-sand-50 py-8">
-        <div className="mx-auto flex max-w-3xl flex-col items-center justify-between gap-4 px-6 text-sm text-gray-500 sm:flex-row">
-          <p>{t("footer.copyright", { year: new Date().getFullYear() })}</p>
-          <div className="flex gap-6">
-            <Link href="/privacy" className="transition-colors hover:text-brand-600">
-              {t("footer.privacy")}
-            </Link>
-            <Link href="/contact" className="transition-colors hover:text-brand-600">
-              {t("footer.contact")}
-            </Link>
-            <a
-              href="https://github.com/Manuel10i/packedplaces"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-colors hover:text-brand-600"
-            >
-              {t("footer.github")}
-            </a>
-          </div>
-        </div>
-      </footer>
+      <SiteFooter />
     </>
   );
 }

src/components/SiteFooter.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+
+interface Props {
+  /** Render the footer in a specific locale (e.g. a forced-German destination slug). */
+  locale?: string;
+}
+
+/** Shared site footer used across the landing page and content pages. */
+export async function SiteFooter({ locale }: Props) {
+  const t = locale
+    ? await getTranslations({ locale, namespace: "footer" })
+    : await getTranslations("footer");
+
+  return (
+    <footer className="border-t border-sand-200 bg-sand-50 py-8">
+      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 text-sm text-gray-500 sm:flex-row">
+        <p>{t("copyright", { year: new Date().getFullYear() })}</p>
+        <div className="flex gap-6">
+          <Link href="/privacy" className="transition-colors hover:text-brand-600">
+            {t("privacy")}
+          </Link>
+          <Link href="/contact" className="transition-colors hover:text-brand-600">
+            {t("contact")}
+          </Link>
+          <a
+            href="https://github.com/Manuel10i/packedplaces"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="transition-colors hover:text-brand-600"
+          >
+            {t("github")}
+          </a>
+          <a
+            href="https://github.com/Manuel10i/packedplaces/tree/main/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="transition-colors hover:text-brand-600"
+          >
+            {t("docs")}
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}