Produktseite ausgebaut: Unterseiten und Bildschirmfotos aus der App

Neue öffentliche Routen unter src/app/(marketing): Übersicht /funktionen, sechs Detailseiten (planung, baustelle, zeiterfassung, berichte, abrechnung, lotse), /sicherheit und /preise, gemeinsames Gerüst mit Kopf- und Fußzeile. scripts/marketing-shots.ts nimmt die Bilder direkt aus der laufenden App auf (Playwright über den installierten Chrome, Session wie im Smoke-Test, ohne Passworteingabe); 14 Aufnahmen in public/marketing ersetzen die gezeichneten Vorschauen. Plantafel: „Vorschläge" hängt jetzt als Fußzeile in der Auftragskarte statt frei zwischen zwei Karten zu stehen (neue Prop footer an OrderCard, Schlüssel unplanned.suggestionsFor). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-17 13:35:04 +02:00
parent 31343d329a
commit 4815a957b0
32 changed files with 951 additions and 188 deletions
@@ -0,0 +1,70 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { CtaBand, PageHero, PointList, ShotFrame } from "@/components/marketing/blocks";
+import { FEATURE_PAGES, FEATURE_SLUGS, isFeatureSlug } from "@/lib/marketing/pages";
+
+/** Detailseite eines Moduls — Inhalt aus `marketing.pages.<slug>`, Bilder aus public/marketing. */
+
+type Props = { params: Promise<{ slug: string }> };
+
+export function generateStaticParams() {
+  return FEATURE_SLUGS.map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
+  if (!isFeatureSlug(slug)) return {};
+  const t = await getTranslations("marketing");
+  return { title: t(`pages.${slug}.title`), description: t(`pages.${slug}.lead`) };
+}
+
+export default async function FeatureDetailPage({ params }: Props) {
+  const { slug } = await params;
+  if (!isFeatureSlug(slug)) notFound();
+  const page = FEATURE_PAGES[slug];
+  const t = await getTranslations("marketing");
+  const points = Array.from({ length: page.points }, (_, i) => t(`pages.${slug}.p${i + 1}`));
+  const cards = Array.from({ length: page.cards }, (_, i) => ({
+    title: t(`pages.${slug}.c${i + 1}title`),
+    text: t(`pages.${slug}.c${i + 1}text`),
+  }));
+  const [first, second] = page.shots;
+
+  return (
+    <>
+      <PageHero eyebrow={t("nav.features")} title={t(`pages.${slug}.title`)} lead={t(`pages.${slug}.lead`)} />
+
+      <section aria-label={t(`pages.${slug}.title`)} className="mx-auto max-w-6xl px-4 pb-12 sm:px-6">
+        <div className={`grid gap-8 ${first.kind === "mobile" ? "lg:grid-cols-[1fr_0.6fr]" : "lg:grid-cols-[0.9fr_1.1fr]"} lg:items-center`}>
+          <PointList points={points} />
+          <ShotFrame shot={first} caption={t(`pages.${slug}.shot1`)} priority />
+        </div>
+      </section>
+
+      <section aria-labelledby="detail-cards" className="border-y bg-card">
+        <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+          <h2 id="detail-cards" className="sr-only">
+            {t(`pages.${slug}.title`)}
+          </h2>
+          <ul className="grid gap-4 md:grid-cols-3">
+            {cards.map((c) => (
+              <li key={c.title} className="rounded-xl border bg-background p-5">
+                <h3 className="font-heading text-[16px] font-semibold">{c.title}</h3>
+                <p className="mt-1.5 text-[14px] leading-relaxed text-muted-foreground">{c.text}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      {second && (
+        <section aria-label={t(`pages.${slug}.shot2`)} className="mx-auto max-w-5xl px-4 py-12 sm:px-6">
+          <ShotFrame shot={second} caption={t(`pages.${slug}.shot2`)} />
+        </section>
+      )}
+
+      <CtaBand />
+    </>
+  );
+}
@@ -0,0 +1,90 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { ArrowRight, Bot, CalendarRange, ClipboardList, FileInput, FileSignature, FolderOpen, MapPin, Package, Receipt, Siren, Timer, WifiOff, type LucideIcon } from "lucide-react";
+import { CtaBand, PageHero } from "@/components/marketing/blocks";
+import { FEATURE_SLUGS, type FeatureSlug } from "@/lib/marketing/pages";
+
+/** Übersicht aller Funktionen mit Einstieg in die Detailseiten. */
+
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("marketing.overview");
+  return { title: t("title"), description: t("lead") };
+}
+
+/** Detailseite je Modul — die übrigen Module stehen als Kacheln ohne eigene Seite. */
+const DETAIL_ICON: Record<FeatureSlug, LucideIcon> = {
+  planung: CalendarRange,
+  baustelle: WifiOff,
+  zeiterfassung: Timer,
+  berichte: FileSignature,
+  abrechnung: Receipt,
+  lotse: Bot,
+};
+const DETAIL_FEATURE: Record<FeatureSlug, string> = {
+  planung: "board",
+  baustelle: "offline",
+  zeiterfassung: "time",
+  berichte: "reports",
+  abrechnung: "billing",
+  lotse: "lotse",
+};
+const MORE: { key: string; icon: LucideIcon }[] = [
+  { key: "orders", icon: ClipboardList },
+  { key: "live", icon: MapPin },
+  { key: "material", icon: Package },
+  { key: "emergency", icon: Siren },
+  { key: "documents", icon: FolderOpen },
+  { key: "imports", icon: FileInput },
+];
+
+export default async function FeaturesOverviewPage() {
+  const t = await getTranslations("marketing");
+
+  return (
+    <>
+      <PageHero title={t("overview.title")} lead={t("overview.lead")} />
+
+      <section aria-label={t("overview.title")} className="mx-auto max-w-6xl px-4 pb-4 sm:px-6">
+        <ul className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {FEATURE_SLUGS.map((slug) => {
+            const Icon = DETAIL_ICON[slug];
+            return (
+              <li key={slug} className="shadow-card rounded-xl border bg-card p-5">
+                <span className="flex size-10 items-center justify-center rounded-lg bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]">
+                  <Icon className="size-5" aria-hidden />
+                </span>
+                <h2 className="mt-3 font-heading text-[17px] font-semibold">{t(`pages.${slug}.title`)}</h2>
+                <p className="mt-1.5 text-[14px] leading-relaxed text-muted-foreground">{t(`pages.${slug}.lead`)}</p>
+                <Link href={`/funktionen/${slug}`} className="mt-3 inline-flex min-h-11 items-center gap-1.5 text-[14px] font-semibold text-[var(--ui-primary)]">
+                  {t("overview.more")}
+                  <ArrowRight className="size-4" aria-hidden />
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+
+      <section aria-labelledby="more-title" className="mx-auto max-w-6xl px-4 py-10 sm:px-6">
+        <h2 id="more-title" className="font-heading text-[22px] font-semibold">{t("features.title")}</h2>
+        <ul className="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {MORE.map(({ key, icon: Icon }) => (
+            <li key={key} className="rounded-xl border bg-card p-5">
+              <span className="flex size-10 items-center justify-center rounded-lg bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]">
+                <Icon className="size-5" aria-hidden />
+              </span>
+              <h3 className="mt-3 font-heading text-[16px] font-semibold">{t(`features.${key}.title`)}</h3>
+              <p className="mt-1.5 text-[14px] leading-relaxed text-muted-foreground">{t(`features.${key}.text`)}</p>
+            </li>
+          ))}
+        </ul>
+        <p className="mt-4 text-[13px] text-muted-foreground">
+          {FEATURE_SLUGS.map((slug) => t(`features.${DETAIL_FEATURE[slug]}.title`)).join(" · ")}
+        </p>
+      </section>
+
+      <CtaBand />
+    </>
+  );
+}
@@ -0,0 +1,6 @@
+import { MarketingShell } from "@/components/marketing/shell";
+
+/** Öffentlicher Bereich (Produktseiten) — ohne Session, siehe PUBLIC_PATHS in src/proxy.ts. */
+export default function MarketingLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return <MarketingShell>{children}</MarketingShell>;
+}
@@ -11,8 +11,8 @@ export async function generateMetadata(): Promise<Metadata> {
 }

 /**
- * Öffentliche Produktseite. Angemeldete Nutzer sehen sie nicht: Feldrollen → /m,
- * Backoffice → /dashboard (ARCHITEKTUR §5). `/` ist deshalb in PUBLIC_PATHS (src/proxy.ts).
+ * Öffentliche Startseite. Angemeldete Nutzer sehen sie nicht: Feldrollen → /m,
+ * Backoffice → /dashboard (ARCHITEKTUR §5). Kopf- und Fußzeile liefert `(marketing)/layout.tsx`.
 */
 export default async function Home() {
  const session = await auth();
@@ -0,0 +1,83 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { ArrowRight, CheckCircle2, Info } from "lucide-react";
+import { PageHero } from "@/components/marketing/blocks";
+
+/** Testphase und Preise — bewusst ohne erfundene Zahlen, solange das Preismodell offen ist. */
+
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("marketing.pricingPage");
+  return { title: t("title"), description: t("lead") };
+}
+
+export default async function PricingPage() {
+  const t = await getTranslations("marketing");
+  const trialPoints = (["t1", "t2", "t3"] as const).map((k) => t(`pricingPage.${k}`));
+  const fullPoints = (["f1", "f2", "f3"] as const).map((k) => t(`pricingPage.${k}`));
+
+  return (
+    <>
+      <PageHero eyebrow={t("trial.eyebrow")} title={t("pricingPage.title")} lead={t("pricingPage.lead")} />
+
+      <section aria-label={t("pricingPage.title")} className="mx-auto max-w-5xl px-4 pb-10 sm:px-6">
+        <div className="grid gap-5 md:grid-cols-2">
+          <article className="shadow-card rounded-2xl border border-l-4 border-l-[var(--ui-accent)] bg-card p-6">
+            <h2 className="font-heading text-[20px] font-semibold">{t("pricingPage.trialTitle")}</h2>
+            <p className="mt-2 text-[14.5px] leading-relaxed text-muted-foreground">{t("pricingPage.trialText")}</p>
+            <ul className="mt-4 grid gap-2.5">
+              {trialPoints.map((p) => (
+                <li key={p} className="flex items-start gap-2 text-[14.5px]">
+                  <CheckCircle2 className="mt-0.5 size-[18px] shrink-0 text-[var(--ok)]" aria-hidden />
+                  {p}
+                </li>
+              ))}
+            </ul>
+            <Link
+              href="/testen"
+              className="mt-5 inline-flex min-h-12 items-center justify-center gap-2 rounded-lg bg-cta px-5 text-[15px] font-semibold text-cta-foreground hover:brightness-95"
+            >
+              {t("trial.cta")}
+              <ArrowRight className="size-4" aria-hidden />
+            </Link>
+          </article>
+
+          <article className="shadow-card rounded-2xl border bg-card p-6">
+            <h2 className="font-heading text-[20px] font-semibold">{t("pricingPage.fullTitle")}</h2>
+            <p className="mt-2 text-[14.5px] leading-relaxed text-muted-foreground">{t("pricingPage.fullText")}</p>
+            <ul className="mt-4 grid gap-2.5">
+              {fullPoints.map((p) => (
+                <li key={p} className="flex items-start gap-2 text-[14.5px]">
+                  <CheckCircle2 className="mt-0.5 size-[18px] shrink-0 text-[var(--ui-primary)]" aria-hidden />
+                  {p}
+                </li>
+              ))}
+            </ul>
+          </article>
+        </div>
+
+        <p className="mt-5 flex items-start gap-2 rounded-lg border border-[var(--info)] bg-card px-4 py-3 text-[14px]">
+          <Info className="mt-0.5 size-[18px] shrink-0 text-[var(--info)]" aria-hidden />
+          {t("pricingPage.note")}
+        </p>
+      </section>
+
+      <section aria-labelledby="pricing-faq" className="border-t bg-card">
+        <div className="mx-auto max-w-4xl px-4 py-12 sm:px-6">
+          <h2 id="pricing-faq" className="font-heading text-[24px] font-semibold">{t("faq.title")}</h2>
+          <div className="mt-5 divide-y rounded-xl border bg-background">
+            {(["q1", "q4", "q5", "q7", "q8"] as const).map((key) => (
+              <details key={key} className="group px-4">
+                <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-3 text-[15px] font-semibold">
+                  {t(`faq.${key}.q`)}
+                  <span aria-hidden className="text-[var(--ui-primary)] transition-transform group-open:rotate-45">＋</span>
+                </summary>
+                <p className="pb-4 text-[14.5px] leading-relaxed text-muted-foreground">{t(`faq.${key}.a`)}</p>
+              </details>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
@@ -0,0 +1,67 @@
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { Download, EyeOff, KeyRound, Layers, ScrollText, UsersRound, type LucideIcon } from "lucide-react";
+import { CtaBand, PageHero, ShotFrame } from "@/components/marketing/blocks";
+
+/** Sicherheit und Datenschutz — Mandantentrennung, Rollen, Protokoll, Export. */
+
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("marketing.securityPage");
+  return { title: t("title"), description: t("lead") };
+}
+
+const ITEMS: { key: string; icon: LucideIcon }[] = [
+  { key: "item1", icon: Layers },
+  { key: "item2", icon: UsersRound },
+  { key: "item3", icon: KeyRound },
+  { key: "item4", icon: ScrollText },
+  { key: "item5", icon: Download },
+  { key: "item6", icon: EyeOff },
+];
+
+export default async function SecurityPage() {
+  const t = await getTranslations("marketing");
+
+  return (
+    <>
+      <PageHero eyebrow={t("security.eyebrow")} title={t("securityPage.title")} lead={t("securityPage.lead")} />
+
+      <section aria-label={t("securityPage.title")} className="mx-auto max-w-6xl px-4 pb-12 sm:px-6">
+        <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {ITEMS.map(({ key, icon: Icon }) => (
+            <li key={key} className="shadow-card rounded-xl border bg-card p-5">
+              <span className="flex size-10 items-center justify-center rounded-lg bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]">
+                <Icon className="size-5" aria-hidden />
+              </span>
+              <h2 className="mt-3 font-heading text-[16px] font-semibold">{t(`security.${key}.title`)}</h2>
+              <p className="mt-1.5 text-[14px] leading-relaxed text-muted-foreground">{t(`security.${key}.text`)}</p>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section aria-labelledby="security-detail" className="border-y bg-card">
+        <div className="mx-auto grid max-w-6xl gap-8 px-4 py-12 sm:px-6 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
+          <div>
+            <h2 id="security-detail" className="font-heading text-[24px] font-semibold">{t("securityPage.detailTitle")}</h2>
+            <dl className="mt-5 grid gap-4">
+              {(["d1", "d2", "d3"] as const).map((k) => (
+                <div key={k}>
+                  <dt className="font-heading text-[16px] font-semibold">{t(`securityPage.${k}title`)}</dt>
+                  <dd className="mt-1 text-[14px] leading-relaxed text-muted-foreground">{t(`securityPage.${k}text`)}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+          <ShotFrame shot={{ src: "audit", kind: "desktop" }} caption={t("securityPage.shot1")} />
+        </div>
+      </section>
+
+      <section aria-label={t("securityPage.shot2")} className="mx-auto max-w-5xl px-4 py-12 sm:px-6">
+        <ShotFrame shot={{ src: "teams", kind: "desktop" }} caption={t("securityPage.shot2")} />
+      </section>
+
+      <CtaBand />
+    </>
+  );
+}
@@ -0,0 +1,71 @@
+import Image from "next/image";
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { ArrowRight, Check } from "lucide-react";
+import type { Shot } from "@/lib/marketing/pages";
+
+/** Bausteine der öffentlichen Produktseiten. Bildschirmfotos stammen aus dem Demo-Mandanten. */
+
+const SIZE = {
+  desktop: { width: 2880, height: 1800, sizes: "(min-width: 1024px) 900px, 100vw" },
+  mobile: { width: 1170, height: 2532, sizes: "(min-width: 1024px) 320px, 60vw" },
+} as const;
+
+export function ShotFrame({ shot, caption, priority }: { shot: Shot; caption: string; priority?: boolean }) {
+  const s = SIZE[shot.kind];
+  return (
+    <figure className={shot.kind === "mobile" ? "mx-auto w-full max-w-[280px]" : "w-full"}>
+      <div className="shadow-card overflow-hidden rounded-xl border bg-card">
+        <Image src={`/marketing/${shot.src}.png`} alt={caption} width={s.width} height={s.height} sizes={s.sizes} priority={priority} className="h-auto w-full" />
+      </div>
+      <figcaption className="mt-2 text-[12.5px] text-muted-foreground">{caption}</figcaption>
+    </figure>
+  );
+}
+
+export function PointList({ points }: { points: string[] }) {
+  return (
+    <ul className="grid gap-2.5">
+      {points.map((p) => (
+        <li key={p} className="flex items-start gap-2 text-[14.5px]">
+          <Check className="mt-0.5 size-[18px] shrink-0 text-[var(--ui-primary)]" aria-hidden />
+          {p}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function PageHero({ eyebrow, title, lead }: { eyebrow?: string; title: string; lead: string }) {
+  return (
+    <div className="mx-auto max-w-3xl px-4 pt-12 pb-8 text-center sm:px-6">
+      {eyebrow && <p className="text-[13px] font-semibold tracking-wide text-[var(--ui-accent)] uppercase">{eyebrow}</p>}
+      <h1 className="mt-2 font-heading text-[30px] leading-tight font-bold text-[var(--ui-primary)] sm:text-[40px]">{title}</h1>
+      <p className="mt-4 text-[16px] leading-relaxed text-muted-foreground">{lead}</p>
+    </div>
+  );
+}
+
+export async function CtaBand() {
+  const t = await getTranslations("marketing.cta");
+  return (
+    <section aria-labelledby="cta-title" className="border-t bg-card">
+      <div className="mx-auto max-w-4xl px-4 py-14 text-center sm:px-6">
+        <h2 id="cta-title" className="font-heading text-[26px] font-semibold text-[var(--ui-primary)]">{t("title")}</h2>
+        <p className="mx-auto mt-3 max-w-xl text-[15.5px] text-muted-foreground">{t("text")}</p>
+        <div className="mt-6 flex flex-wrap justify-center gap-3">
+          <Link
+            href="/testen"
+            className="inline-flex min-h-12 items-center justify-center gap-2 rounded-lg bg-cta px-5 text-[15px] font-semibold text-cta-foreground hover:brightness-95"
+          >
+            {t("primary")}
+            <ArrowRight className="size-4" aria-hidden />
+          </Link>
+          <Link href="/funktionen" className="inline-flex min-h-12 items-center justify-center gap-2 rounded-lg border px-5 text-[15px] font-semibold hover:bg-muted">
+            {t("secondary")}
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -24,9 +24,8 @@ import {
  WifiOff,
  type LucideIcon,
 } from "lucide-react";
-import { CraftviaLogo } from "@/components/brand/craftvia-logo";
-import { BRAND } from "@/lib/brand";
-import { BoardMockup, FieldMockup, LotseMockup } from "./mockups";
+import { ShotFrame } from "./blocks";
+import { FieldMockup } from "./mockups";

 /**
 * Öffentliche Startseite (Produktseite). Wird von `/` gerendert, solange keine Session besteht;
@@ -58,7 +57,6 @@ const SECURITY: { key: string; icon: LucideIcon }[] = [
  { key: "item6", icon: EyeOff },
 ];

-const NAV = ["features", "planning", "mobile", "security", "pricing", "faq"] as const;
 const FAQ = ["q1", "q2", "q3", "q4", "q5", "q6", "q7", "q8"] as const;
 const INDUSTRIES = ["shk", "electric", "cooling", "lifts", "windows", "service"] as const;

@@ -71,35 +69,7 @@ export async function MarketingHome({ contactEmail }: { contactEmail?: string })
  const t = await getTranslations("marketing");

  return (
-    <div className="flex flex-1 flex-col">
-      <header className="sticky top-0 z-20 border-b bg-background/95 backdrop-blur">
-        <div className="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3 sm:px-6">
-          <Link href="/" className="flex min-h-11 items-center" aria-label={BRAND.name}>
-            <CraftviaLogo variant="horizontal" height={30} />
-          </Link>
-          <nav aria-label={t("nav.label")} className="ml-auto hidden lg:block">
-            <ul className="flex items-center gap-1">
-              {NAV.map((key) => (
-                <li key={key}>
-                  <a href={`#${key}`} className="inline-flex min-h-11 items-center rounded-md px-3 text-[14px] font-medium text-muted-foreground hover:text-foreground">
-                    {t(`nav.${key}`)}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-          <div className="ml-auto flex items-center gap-2 lg:ml-0">
-            <Link href="/login" className="inline-flex min-h-11 items-center px-2 text-[14px] font-semibold text-[var(--ui-primary)]">
-              {t("nav.login")}
-            </Link>
-            <Link href="/testen" className="inline-flex min-h-11 items-center rounded-lg bg-cta px-4 text-[14px] font-semibold text-cta-foreground hover:brightness-95">
-              {t("nav.cta")}
-            </Link>
-          </div>
-        </div>
-      </header>
-
-      <main className="flex-1">
+    <>
        {/* Hero */}
        <section className="border-b bg-card">
          <div className="mx-auto grid max-w-6xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:py-20">
@@ -125,7 +95,7 @@ export async function MarketingHome({ contactEmail }: { contactEmail?: string })
                ))}
              </ul>
            </div>
-            <BoardMockup />
+            <ShotFrame shot={{ src: "plantafel", kind: "desktop" }} caption={t("pages.planung.shot1")} priority />
          </div>
        </section>

@@ -177,7 +147,7 @@ export async function MarketingHome({ contactEmail }: { contactEmail?: string })
                ))}
              </ul>
            </div>
-            <BoardMockup />
+            <ShotFrame shot={{ src: "live-lage", kind: "desktop" }} caption={t("pages.planung.shot2")} />
          </div>
        </section>

@@ -206,7 +176,7 @@ export async function MarketingHome({ contactEmail }: { contactEmail?: string })
              <p className="mt-3 text-[15px] leading-relaxed text-muted-foreground">{t("lotse.text")}</p>
              <p className="mt-4 text-[13.5px] text-muted-foreground">{t("lotse.note")}</p>
            </div>
-            <LotseMockup />
+            <ShotFrame shot={{ src: "mobil-lotse", kind: "mobile" }} caption={t("pages.lotse.shot1")} />
          </div>
        </section>

@@ -324,34 +294,6 @@ export async function MarketingHome({ contactEmail }: { contactEmail?: string })
            </Link>
          </div>
        </section>
-      </main>
-
-      <footer className="border-t bg-card">
-        <div className="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:px-6 md:grid-cols-[1.4fr_1fr_1fr]">
-          <div>
-            <CraftviaLogo variant="horizontal" height={28} />
-            <p className="mt-3 max-w-xs text-[13.5px] text-muted-foreground">{t("footer.tagline")}</p>
-          </div>
-          <nav aria-labelledby="footer-product">
-            <h2 id="footer-product" className="text-[13px] font-semibold tracking-wide uppercase">{t("footer.product")}</h2>
-            <ul className="mt-2 grid">
-              <li><a href="#features" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.features")}</a></li>
-              <li><Link href="/testen" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.trial")}</Link></li>
-              <li><Link href="/login" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.login")}</Link></li>
-            </ul>
-          </nav>
-          <nav aria-labelledby="footer-legal">
-            <h2 id="footer-legal" className="text-[13px] font-semibold tracking-wide uppercase">{t("footer.company")}</h2>
-            <ul className="mt-2 grid">
-              <li><Link href="/testen/nutzungsbedingungen" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.terms")}</Link></li>
-              <li><Link href="/testen/datenschutz" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.privacy")}</Link></li>
-            </ul>
-          </nav>
-        </div>
-        <p className="border-t px-4 py-4 text-center text-[12.5px] text-muted-foreground sm:px-6">
-          © {new Date().getFullYear()} {BRAND.name} · {BRAND.tagline} · {t("footer.rights")}
-        </p>
-      </footer>
-    </div>
+    </>
  );
 }
@@ -1,55 +1,11 @@
-import { Check, MapPin, PenLine, Truck, Wrench } from "lucide-react";
+import { Check, PenLine, Truck, Wrench } from "lucide-react";
 import { getTranslations } from "next-intl/server";

 /**
- * Abstrakte Produktvorschauen für die Startseite — bewusst als Markup statt Screenshot:
+ * Ablaufdarstellung für die Startseite — bewusst als Markup statt Screenshot:
 * bleibt scharf, mehrsprachig, ohne Bildassets und ohne Daten aus einem echten Mandanten.
 */

-const BAR = "h-2 rounded-full";
-
-export async function BoardMockup() {
-  const t = await getTranslations("marketing.hero.mockup");
-  const rows = [
-    { crew: t("crewNorth"), load: t("load"), percent: 94, jobs: [t("job1"), t("job2")], tone: "var(--ok)" },
-    { crew: t("crewSouth"), load: t("conflict"), percent: 113, jobs: [t("job3")], tone: "var(--warn)" },
-  ];
-  return (
-    <figure aria-label={t("label")} className="shadow-card rounded-2xl border bg-card p-4">
-      <figcaption className="mb-3 flex items-center justify-between">
-        <span className="font-heading text-[15px] font-semibold">{t("board")}</span>
-        <span className="rounded-full border px-2 py-0.5 text-[11px] font-semibold text-muted-foreground">{t("today")}</span>
-      </figcaption>
-      <div className="space-y-3">
-        {rows.map((row) => (
-          <div key={row.crew} className="rounded-xl border p-3">
-            <div className="flex flex-wrap items-center justify-between gap-2">
-              <span className="text-[13px] font-semibold">{row.crew}</span>
-              <span className="text-[11px] font-semibold" style={{ color: row.tone }}>
-                {row.load}
-              </span>
-            </div>
-            <div className="mt-2 h-2 w-full rounded-full bg-muted" role="presentation">
-              <div className={BAR} style={{ width: `${Math.min(row.percent, 100)}%`, background: row.tone }} />
-            </div>
-            <ul className="mt-2 flex flex-wrap gap-1.5">
-              {row.jobs.map((job) => (
-                <li key={job} className="rounded-md border bg-background px-2 py-1 text-[11.5px]">
-                  {job}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-      <p className="mt-3 flex items-center gap-1.5 text-[11.5px] text-muted-foreground">
-        <MapPin className="size-3.5" aria-hidden />
-        {t("live")}
-      </p>
-    </figure>
-  );
-}
-
 export async function FieldMockup() {
  const t = await getTranslations("marketing.mobile");
  const steps = [
@@ -78,28 +34,3 @@ export async function FieldMockup() {
    </ol>
  );
 }
-
-export async function LotseMockup() {
-  const t = await getTranslations("marketing.lotse");
-  return (
-    <div className="shadow-card space-y-3 rounded-2xl border bg-card p-4">
-      <p className="ml-auto max-w-[85%] rounded-2xl rounded-br-sm bg-[var(--ui-primary)] px-3 py-2 text-[13.5px] text-white">{t("chatUser")}</p>
-      <p className="max-w-[90%] rounded-2xl rounded-bl-sm border bg-background px-3 py-2 text-[13.5px]">{t("chatAssistant")}</p>
-      <div className="rounded-xl border border-l-4 border-l-[var(--ui-accent)] bg-background p-3">
-        <p className="text-[12px] font-semibold text-muted-foreground uppercase">{t("cardTitle")}</p>
-        <ul className="mt-1.5 space-y-1 text-[13.5px]">
-          {[t("cardLine1"), t("cardLine2"), t("cardLine3")].map((line) => (
-            <li key={line} className="flex items-start gap-2">
-              <Check className="mt-0.5 size-4 shrink-0 text-[var(--ok)]" aria-hidden />
-              {line}
-            </li>
-          ))}
-        </ul>
-        <div className="mt-3 flex flex-wrap gap-2">
-          <span className="rounded-lg bg-cta px-3 py-1.5 text-[13px] font-semibold text-cta-foreground">{t("cardConfirm")}</span>
-          <span className="rounded-lg border px-3 py-1.5 text-[13px] font-semibold">{t("cardDiscard")}</span>
-        </div>
-      </div>
-    </div>
-  );
-}
@@ -0,0 +1,85 @@
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { CraftviaLogo } from "@/components/brand/craftvia-logo";
+import { BRAND } from "@/lib/brand";
+
+/** Gemeinsames Gerüst der öffentlichen Produktseiten: Kopfzeile, Inhalt, Fußzeile. */
+
+const NAV = [
+  { key: "features", href: "/funktionen" },
+  { key: "planning", href: "/funktionen/planung" },
+  { key: "mobile", href: "/funktionen/baustelle" },
+  { key: "security", href: "/sicherheit" },
+  { key: "pricing", href: "/preise" },
+] as const;
+
+export async function MarketingShell({ children }: { children: React.ReactNode }) {
+  const t = await getTranslations("marketing");
+  return (
+    <div className="flex flex-1 flex-col">
+      <header className="sticky top-0 z-20 border-b bg-background/95 backdrop-blur">
+        <div className="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3 sm:px-6">
+          <Link href="/" className="flex min-h-11 items-center" aria-label={BRAND.name}>
+            <CraftviaLogo variant="horizontal" height={30} />
+          </Link>
+          <nav aria-label={t("nav.label")} className="ml-auto hidden lg:block">
+            <ul className="flex items-center gap-1">
+              {NAV.map((item) => (
+                <li key={item.key}>
+                  <Link href={item.href} className="inline-flex min-h-11 items-center rounded-md px-3 text-[14px] font-medium text-muted-foreground hover:text-foreground">
+                    {t(`nav.${item.key}`)}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+          <div className="ml-auto flex items-center gap-2 lg:ml-0">
+            <Link href="/login" className="inline-flex min-h-11 items-center px-2 text-[14px] font-semibold text-[var(--ui-primary)]">
+              {t("nav.login")}
+            </Link>
+            <Link href="/testen" className="inline-flex min-h-11 items-center rounded-lg bg-cta px-4 text-[14px] font-semibold text-cta-foreground hover:brightness-95">
+              {t("nav.cta")}
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      <main className="flex-1">{children}</main>
+
+      <footer className="border-t bg-card">
+        <div className="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:px-6 md:grid-cols-[1.4fr_1fr_1fr]">
+          <div>
+            <CraftviaLogo variant="horizontal" height={28} />
+            <p className="mt-3 max-w-xs text-[13.5px] text-muted-foreground">{t("footer.tagline")}</p>
+          </div>
+          <nav aria-labelledby="footer-product">
+            <h2 id="footer-product" className="text-[13px] font-semibold tracking-wide uppercase">{t("footer.product")}</h2>
+            <ul className="mt-2 grid">
+              {NAV.map((item) => (
+                <li key={item.key}>
+                  <Link href={item.href} className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">
+                    {t(`nav.${item.key}`)}
+                  </Link>
+                </li>
+              ))}
+              <li>
+                <Link href="/testen" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.trial")}</Link>
+              </li>
+            </ul>
+          </nav>
+          <nav aria-labelledby="footer-legal">
+            <h2 id="footer-legal" className="text-[13px] font-semibold tracking-wide uppercase">{t("footer.company")}</h2>
+            <ul className="mt-2 grid">
+              <li><Link href="/login" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.login")}</Link></li>
+              <li><Link href="/testen/nutzungsbedingungen" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.terms")}</Link></li>
+              <li><Link href="/testen/datenschutz" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.privacy")}</Link></li>
+            </ul>
+          </nav>
+        </div>
+        <p className="border-t px-4 py-4 text-center text-[12.5px] text-muted-foreground sm:px-6">
+          © {new Date().getFullYear()} {BRAND.name} · {BRAND.tagline} · {t("footer.rights")}
+        </p>
+      </footer>
+    </div>
+  );
+}
@@ -432,25 +432,42 @@ export function PlanningBoardView({
            {board.unplanned.length === 0 && <p className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">{t("unplanned.empty")}</p>}
            <ul className="space-y-3">
              {board.unplanned.map((o) => (
-                <li key={o.id} className="space-y-1.5">
-                  <OrderCard order={o} {...cardProps} unplanned />
-                  {canSchedule && (
-                    <button type="button" aria-expanded={panelFor === o.id} onClick={() => setPanelFor(panelFor === o.id ? null : o.id)} className={`${buttonCls("ghost")} w-full`}>
-                      <Lightbulb className="size-4" aria-hidden />
-                      {t("unplanned.suggestions")}
-                    </button>
-                  )}
-                  {panelFor === o.id && (
-                    <RecommendationsPanel
-                      workOrderId={o.id}
-                      locale={locale}
-                      onClose={() => setPanelFor(null)}
-                      onTake={(r: Recommendation) => open(o, r.teamId, r.day, wallClock(new Date(r.suggestedStart), tz))}
-                      onPlanTogether={(nearby, r, required) =>
-                        open(nearby, r?.teamId ?? null, r?.day ?? null, r ? wallClock(new Date(new Date(r.suggestedStart).getTime() + required * 60_000), tz) : null)
-                      }
-                    />
-                  )}
+                <li key={o.id}>
+                  <OrderCard
+                    order={o}
+                    {...cardProps}
+                    unplanned
+                    footer={
+                      canSchedule && (
+                        <>
+                          <button
+                            type="button"
+                            aria-expanded={panelFor === o.id}
+                            aria-label={t("unplanned.suggestionsFor", { number: o.number })}
+                            onClick={() => setPanelFor(panelFor === o.id ? null : o.id)}
+                            className={`${buttonCls("ghost")} w-full justify-between`}
+                          >
+                            <span className="inline-flex items-center gap-1.5">
+                              <Lightbulb className="size-4" aria-hidden />
+                              {t("unplanned.suggestions")}
+                            </span>
+                            <ChevronDown className={cn("size-4 transition-transform", panelFor === o.id && "rotate-180")} aria-hidden />
+                          </button>
+                          {panelFor === o.id && (
+                            <RecommendationsPanel
+                              workOrderId={o.id}
+                              locale={locale}
+                              onClose={() => setPanelFor(null)}
+                              onTake={(r: Recommendation) => open(o, r.teamId, r.day, wallClock(new Date(r.suggestedStart), tz))}
+                              onPlanTogether={(nearby, r, required) =>
+                                open(nearby, r?.teamId ?? null, r?.day ?? null, r ? wallClock(new Date(new Date(r.suggestedStart).getTime() + required * 60_000), tz) : null)
+                              }
+                            />
+                          )}
+                        </>
+                      )
+                    }
+                  />
                </li>
              ))}
            </ul>
@@ -559,6 +576,7 @@ function OrderCard({
  tw,
  unplanned,
  compact,
+  footer,
 }: {
  order: BoardOrder;
  canSchedule: boolean;
@@ -569,6 +587,8 @@ function OrderCard({
  tw: ReturnType<typeof useTranslations<"workOrders">>;
  unplanned?: boolean;
  compact?: boolean;
+  /** an die Karte angehängter Bereich (z. B. „Vorschläge" in der Spalte „Ungeplante Aufträge") */
+  footer?: React.ReactNode;
 }) {
  const movable = canSchedule && SCHEDULABLE_STATUSES.includes(order.status);
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: `order:${order.id}`, disabled: !movable });
@@ -678,6 +698,7 @@ function OrderCard({
          )}
        </div>
      </div>
+      {footer && <div className="mt-1.5 border-t pt-1">{footer}</div>}
      {movable && (
        <button type="button" onClick={() => onOpen(order, null, null, null)} className="mt-1 inline-flex min-h-11 w-full items-center justify-center gap-1 rounded-md border text-[11px] font-semibold hover:bg-muted">
          <CalendarPlus className="size-3.5" aria-hidden />
@@ -0,0 +1,31 @@
+/**
+ * Aufbau der öffentlichen Funktionsseiten (`/funktionen/<slug>`). Texte liegen in
+ * `messages/<locale>/marketing.json` unter `pages.<slug>`, Bildschirmfotos in `public/marketing/`
+ * (erzeugt von `scripts/marketing-shots.ts`).
+ */
+
+export const FEATURE_SLUGS = ["planung", "baustelle", "zeiterfassung", "berichte", "abrechnung", "lotse"] as const;
+export type FeatureSlug = (typeof FEATURE_SLUGS)[number];
+
+export type Shot = { src: string; kind: "desktop" | "mobile" };
+
+export type FeaturePage = {
+  /** Reihenfolge der Bildschirmfotos; Beschriftungen kommen aus `pages.<slug>.shot<n>` */
+  shots: Shot[];
+  points: number;
+  cards: number;
+};
+
+const desktop = (src: string): Shot => ({ src, kind: "desktop" });
+const mobile = (src: string): Shot => ({ src, kind: "mobile" });
+
+export const FEATURE_PAGES: Record<FeatureSlug, FeaturePage> = {
+  planung: { shots: [desktop("plantafel"), desktop("live-lage")], points: 5, cards: 3 },
+  baustelle: { shots: [mobile("mobil-heute"), mobile("mobil-auftrag")], points: 5, cards: 3 },
+  zeiterfassung: { shots: [mobile("mobil-zeiten"), desktop("zeitfreigabe")], points: 5, cards: 3 },
+  berichte: { shots: [desktop("berichte"), desktop("auftrag")], points: 5, cards: 3 },
+  abrechnung: { shots: [desktop("abrechnung")], points: 5, cards: 3 },
+  lotse: { shots: [mobile("mobil-lotse")], points: 5, cards: 3 },
+};
+
+export const isFeatureSlug = (v: string): v is FeatureSlug => (FEATURE_SLUGS as readonly string[]).includes(v);
@@ -12,7 +12,7 @@ import { NextResponse, type NextRequest } from "next/server";
 // L15 Testphase: `/testen` (Wizard, Bestätigung, Nutzungsbedingungen, Datenschutz) ist öffentlich —
 // abgesichert über Rate-Limit je IP/E-Mail, Honeypot, Double-Opt-in und Enumeration-Neutralität.
 // Startseite ist die öffentliche Produktseite; angemeldete Nutzer leitet page.tsx weiter.
-const PUBLIC_PATHS = ["/", "/login", "/api/auth", "/forgot-password", "/reset", "/invite", "/verify-email", "/platform/login", "/api/platform-auth", "/testen"];
+const PUBLIC_PATHS = ["/", "/funktionen", "/sicherheit", "/preise", "/login", "/api/auth", "/forgot-password", "/reset", "/invite", "/verify-email", "/platform/login", "/api/platform-auth", "/testen"];

 // Plattform-Bereich (getrennte Session/Login): diese Routen werden über das
 // Plattform-Cookie gegatet und leiten anonyme Besucher auf /platform/login —