feat(web): add private company and portfolio presence

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

Dockerfile

@@ -0,0 +1,48 @@
+FROM node:22-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js telemetry is disabled
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy the standalone output folder and the public folder
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

PRESENCE-STRATEGY.md

@@ -0,0 +1,151 @@
+# Präsenzstrategie für Jan Wagner / w-make
+
+Stand: 2026-08-15
+
+## 1. Ziel
+
+Die Präsenz soll drei Zielgruppen in weniger als einer Minute verstehen lassen:
+
+1. **Industrie- und Mittelstandskunden:** Jan löst reale Prozessprobleme mit belastbarer Software.
+2. **Technische Entscheider und Partner:** Jan kann Domäne, Architektur und Betrieb zusammen denken.
+3. **Zukünftige Arbeitgeber:** Jan ist ein Senior Engineer mit Ownership, nicht nur ein Implementierer.
+
+Primäre Conversion: qualifizierter Erstkontakt. Nicht: möglichst viele Projekte oder Technologien zeigen.
+
+## 2. Empfohlene Positionierung
+
+> Ich entwickle robuste digitale Systeme für industrielle und anspruchsvolle Geschäftsprozesse — mit Domänenverständnis, klarer Architektur und Verantwortung für den Betrieb.
+
+Die Positionierung ist stärker als „innovative Lösungen“ oder „Full-Stack-Entwicklung“, weil sie ein Problem, eine Zielgruppe und einen Qualitätsanspruch benennt.
+
+## 3. Was bewusst nicht auf die öffentliche Startseite gehört
+
+- Casino-Automation und Echtgeld-Workflows
+- Trading-/Prediction-Market-Projekte
+- Interne Hermes-Infrastruktur, Bot-Namen und Serverdetails
+- Unbelegte Zahlen wie Testanzahl, Verfügbarkeit oder Effizienzgewinne
+- „Enterprise-Niveau“, „24/7 verfügbar“ oder ähnliche Behauptungen ohne veröffentlichbare Nachweise
+
+Diese Themen können privat als technische Lernprojekte oder auf Anfrage erscheinen. Öffentlich verwässern sie die B2B-Positionierung und können bei Kunden bzw. Arbeitgebern unnötige Risiko- und Vertrauensfragen auslösen.
+
+## 4. Inhaltliche Säulen
+
+### A. Industrie-Software und Domäne
+
+Der stärkste Beleg ist W-Make Batch. Daraus entstehen:
+
+- Case Study: „Wie aus einem Produktionsprozess ein belastbares Softwaresystem wird“
+- Architekturartikel: „Warum fachliche Buchungen nicht einfach gelöscht werden dürfen“
+- Prozessartikel: „Vom Satzzettel zum Tagesprotokoll: ein durchgängiges Produktionsmodell“
+- Produktseite: Problem → Lösung → Arbeitsweise → Demo/Kontakt
+
+### B. Engineering-Entscheidungen
+
+- Datenintegrität statt schneller CRUD-Logik
+- Fachliche Regeln als explizite Invarianten
+- Kleine, testbare Module statt verteilte Business-Logik
+- Migrationen, Backups, Auditierbarkeit und sichere Fehlerpfade
+
+### C. Persönliche Perspektive
+
+- Übergang von Glass Technology zu Software Engineering
+- Was Domänenwissen in der Produktentwicklung verändert
+- Entscheidungen, die im Betrieb wichtiger sind als im Demo-Video
+- Ehrliche technische Rückblicke mit Problem, Entscheidung, Ergebnis und offenem Rest
+
+## 5. Seitenstruktur für den öffentlichen Auftritt
+
+1. **Startseite:** Positionierung, 1–2 Belege, Arbeitsweise, Kontakt
+2. **Über mich:** Glas-/Industrie-Hintergrund, Senior-Engineering-Profil, Arbeitsprinzipien
+3. **W-Make Batch:** eigenständige Case Study mit Screenshots/Diagramm und klarer Abgrenzung zu vertraulichen Kundendaten
+4. **Engineering Notes:** 4–6 substanzielle Artikel statt Newsfeed
+5. **Kontakt:** E-Mail, LinkedIn/Git-Profil, Einsatzformen, Standort/remote
+6. **Impressum/Datenschutz:** vor öffentlichem Launch rechtlich vervollständigen
+
+## 6. Case-Study-Template
+
+Jede Referenz folgt demselben Muster:
+
+- **Ausgangslage:** Welcher Prozess war schwierig oder fehleranfällig?
+- **Verantwortung:** Welche Rolle und welchen Anteil hatte Jan?
+- **Entscheidungen:** Welche Architektur-/Domänenentscheidungen waren entscheidend?
+- **Ergebnis:** Nur belegbare Resultate; vertrauliche Werte anonymisieren.
+- **Beweis:** Screenshot, vereinfachtes Modell, Teststrategie oder öffentliche Demo.
+- **Lernpunkt:** Was kann ein anderer technischer Entscheider daraus übernehmen?
+- **CTA:** Gespräch über einen ähnlichen Prozess.
+
+## 7. Priorisierte 30-Tage-Roadmap
+
+### Woche 1 — Vertrauen und Basis
+
+- Eigene Domain-/Unternehmensbezeichnung festlegen.
+- Professionelle Kontaktadresse und LinkedIn-Profil verknüpfen.
+- W-Make Batch als Referenz auf Freigabe und Vertraulichkeit prüfen.
+- Impressum-/Datenschutz-Anforderungen vor Launch mit fachkundiger Stelle klären.
+
+### Woche 2 — Belege
+
+- Case Study zu W-Make Batch schreiben.
+- 3–5 aussagekräftige Screenshots oder ein anonymisiertes Prozessdiagramm erstellen.
+- Rolle, Zeitraum, Verantwortung und veröffentlichbare Ergebnisse sauber dokumentieren.
+
+### Woche 3 — Auffindbarkeit
+
+- LinkedIn-Headline an die Positionierung anpassen.
+- Eine Engineering Note veröffentlichen.
+- Profile konsistent verlinken: Website, LinkedIn, GitHub/Gitea nur wenn öffentlich geeignet.
+- Title, Description, Open Graph, Sitemap und Search Console ergänzen.
+
+### Woche 4 — Conversion
+
+- Kontaktformular oder klare E-Mail ergänzen.
+- Angebot in 2–3 konkrete Einstiege übersetzen: Prozessanalyse, technische Due Diligence, Produkt-/Backend-Entwicklung.
+- Jede Seite mit genau einem nächsten Schritt versehen.
+- Mobile, Tastaturbedienung, Ladezeit und externe Links prüfen.
+
+## 8. Konkrete Angebotsformulierungen
+
+### Prozessanalyse
+
+> Ich analysiere einen bestehenden digitalen Prozess, identifiziere fachliche Bruchstellen und übersetze die Ergebnisse in eine priorisierte technische Roadmap.
+
+### Produkt- und Backend-Entwicklung
+
+> Ich entwickle oder stabilisiere Anwendungen, bei denen Datenmodell, Geschäftslogik und Betrieb wichtiger sind als ein schneller Prototyp.
+
+### Technische Zusammenarbeit
+
+> Ich unterstütze Teams bei Architekturentscheidungen, schwierigen Integrationen und der Überführung von gewachsenem Code in ein wartbares System.
+
+## 9. Noch offen vor dem Launch
+
+- Öffentlich verwendbare Kontaktadresse
+- Vollständiger Name/Firmierung nach UG-Gründung
+- Impressums- und Datenschutzhinweise
+- Freigabe zur Darstellung von W-Make Batch und verwendbaren Screenshots
+- Tatsächliche öffentliche Profile/Links
+- Messbare Ergebnisse, sofern sie veröffentlicht werden dürfen
+
+## 10. Erfolgskriterien
+
+Nach dem ersten Ausbau muss ein fremder Besucher beantworten können:
+
+- Was macht Jan konkret?
+- Für wen ist das relevant?
+- Woran ist die Qualität erkennbar?
+- Wie kann ich Kontakt aufnehmen?
+
+Wenn eine Information nicht auf eine dieser vier Fragen einzahlt, gehört sie nicht auf die Startseite.
+
+## Quellen aus dem Workspace
+
+- `/home/eldov-ryzen5/workspace/Coding/Batchmaker/README.md`
+- `/home/eldov-ryzen5/workspace/Coding/Batchmaker/AGENTS.md`
+- `/home/eldov-ryzen5/workspace/Server/README.md`
+- `/home/eldov-ryzen5/workspace/Coding/hermes-tools/README.md`
+- `/home/eldov-ryzen5/workspace/w-make-com/src/app/page.tsx`
+- `/home/eldov-ryzen5/workspace/w-make-com/src/app/layout.tsx`
+
+Die Quellen belegen technische Substanz. Kundennamen, Resultate und Rollen dürfen nur nach Freigabe öffentlich behauptet werden.
+
+<!-- ponytail: Keine Personen-, Kunden- oder Leistungsbehauptungen ergänzen, solange kein veröffentlichbarer Beleg vorliegt. -->

docker-compose.yml

@@ -0,0 +1,27 @@
+version: "3.8"
+
+services:
+  # Das Portfolio (Next.js)
+  w-make-portfolio:
+    build: .
+    image: w-make-portfolio:latest
+    container_name: w-make-portfolio
+    restart: always
+    expose:
+      - "3000"
+    labels:
+      - "traefik.enable=true"
+      - "traefik.docker.network=proxy"
+      - "traefik.http.routers.w-make.rule=Host(`w-make.com`) || Host(`www.w-make.com`)"
+      - "traefik.http.routers.w-make.priority=100"
+      - "traefik.http.routers.w-make.entrypoints=websecure"
+      - "traefik.http.routers.w-make.tls=true"
+      - "traefik.http.routers.w-make.tls.certresolver=http_resolver"
+      - "traefik.http.routers.w-make.middlewares=default@file,crowdsec-bouncer-plugin@file"
+      - "traefik.http.services.w-make.loadbalancer.server.port=3000"
+    networks:
+      - proxy
+
+networks:
+  proxy:
+    external: true

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "standalone",
 };
 
 export default nextConfig;

src/app/globals.css

@@ -1,26 +1,45 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
+  /* Tech Style Dark Theme by Default */
-  --foreground: #171717;
+  --background: #020617; /* Slate 950 */
+  --foreground: #f8fafc; /* Slate 50 */
+
+  /* Primary Action Colors (Electric Blue / Cyan) */
+  --primary: #0ea5e9;
+  --primary-foreground: #ffffff;
+
+  /* Metallic / Professional Accents */
+  --accent: #334155; /* Slate 700 */
+  --accent-foreground: #f8fafc;
+
+  --border: #1e293b; /* Slate 800 */
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --color-primary: var(--primary);
-  --font-mono: var(--font-geist-mono);
+  --color-primary-foreground: var(--primary-foreground);
-}
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
 
-@media (prefers-color-scheme: dark) {
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
-  :root {
+  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
 }
 
 body {
-  background: var(--background);
+  background-color: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Subtle Grid Background for that "Tech" feel */
+.bg-grid-pattern {
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+                    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  background-size: 40px 40px;
 }

src/app/layout.tsx

@@ -13,17 +13,16 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Jan Wagner — Software für Prozesse, auf die man sich verlassen muss",
-  description: "Generated by create next app",
+  description: "Jan Wagner entwickelt robuste digitale Systeme für industrielle und anspruchsvolle Geschäftsprozesse.",
 };
 
 export default function RootLayout({ children }: LayoutProps<"/">) {
   return (
-    <html
+    <html lang="de" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
   );
 }
+
+// ponytail: Open Graph, structured data and canonical URL follow after the public domain is final.

src/app/page.tsx

@@ -1,69 +1,125 @@
-import Image from "next/image";
+const projects = [
+  {
+    label: "Industrie-Software",
+    title: "W-Make Batch",
+    text: "Eine durchgängige Batchmanagement-Lösung für die Behälterglas-Produktion — von Satzzettel und Gemengebuch bis Silo-Management, Schichtprotokoll und Berechnung.",
+    facts: "Node.js · SQLite · Web Components · E2E-Tests",
+    href: "https://batch.w-make.com",
+    cta: "Produkt-Showroom öffnen",
+  },
+  {
+    label: "Produktentwicklung",
+    title: "Digitale Prozesse, die den Betrieb verstehen",
+    text: "Ich verbinde Domänenwissen aus der Glasindustrie mit sauberer Softwarearchitektur. Das Ergebnis sind Systeme, die fachlich belastbar und im Alltag nutzbar sind.",
+    facts: "Fachlichkeit · Datenintegrität · Wartbarkeit",
+    href: "#arbeitsweise",
+    cta: "Arbeitsweise ansehen",
+  },
+  {
+    label: "Technische Systeme",
+    title: "Automatisierung mit klaren Grenzen",
+    text: "Von APIs und Datenmodellen bis zu Infrastruktur und Observability: Automatisierung wird dort eingesetzt, wo sie Risiken reduziert — nicht um Komplexität zu verstecken.",
+    facts: "Backend · Tooling · Betrieb",
+    href: "#kontakt",
+    cta: "Projekt besprechen",
+  },
+];
+
+const principles = [
+  ["Fachlichkeit zuerst", "Ich beginne beim realen Prozess, nicht beim Framework. Fachliche Regeln werden sichtbar, prüfbar und nachvollziehbar umgesetzt."],
+  ["Verlässliche Systeme", "Datenintegrität, sichere Zustände und verständliche Fehlerbehandlung sind keine Extras — sie sind die Grundlage."],
+  ["Kleine, tragfähige Lösungen", "Keine Architektur um ihrer selbst willen. Erst die kleinste Lösung, die den Prozess dauerhaft besser macht."],
+];
 
 export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <main className="min-h-screen bg-grid-pattern">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/90 to-background pointer-events-none" />
-        <Image
+      <div className="relative z-10 mx-auto w-full max-w-6xl px-6 py-8 md:px-10 md:py-12">
-          className="dark:invert h-5 w-[100px]"
+        <nav className="flex items-center justify-between border-b border-slate-800/80 pb-6" aria-label="Hauptnavigation">
-          src="/next.svg"
+          <a href="#top" className="font-mono text-sm tracking-[0.22em] text-primary">W-MAKE</a>
-          alt="Next.js logo"
+          <div className="flex gap-6 text-sm text-slate-400">
-          width={100}
+            <a href="#projekte" className="hover:text-white">Projekte</a>
-          height={20}
+            <a href="#arbeitsweise" className="hover:text-white">Arbeitsweise</a>
-          priority
+            <a href="#kontakt" className="hover:text-white">Kontakt</a>
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the{" "}
-            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
-              page.tsx
-            </code>{" "}
-            file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
           </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+        </nav>
-          <a
+
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+        <section id="top" className="grid gap-12 py-24 md:grid-cols-[1.25fr_0.75fr] md:items-end md:py-32">
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          <div>
-            target="_blank"
+            <p className="mb-6 font-mono text-sm uppercase tracking-[0.22em] text-primary">Jan Wagner · Software Engineering</p>
-            rel="noopener noreferrer"
+            <h1 className="max-w-4xl text-5xl font-semibold tracking-tight text-white md:text-7xl">
-          >
+              Software für Prozesse, auf die man sich verlassen muss.
-            <Image
+            </h1>
-              className="dark:invert h-[14px] w-4"
+            <p className="mt-8 max-w-2xl text-lg leading-8 text-slate-300 md:text-xl">
-              src="/vercel.svg"
+              Ich entwickle robuste digitale Systeme für industrielle und anspruchsvolle Geschäftsprozesse — mit Domänenverständnis, klarer Architektur und Verantwortung für den Betrieb.
-              alt="Vercel logomark"
+            </p>
-              width={16}
+            <div className="mt-10 flex flex-wrap gap-4">
-              height={14}
+              <a href="#projekte" className="rounded-full bg-primary px-6 py-3 font-medium text-slate-950 transition hover:bg-cyan-300">Arbeiten ansehen</a>
-            />
+              <a href="#kontakt" className="rounded-full border border-slate-700 px-6 py-3 font-medium text-white transition hover:border-primary hover:text-primary">Projekt besprechen</a>
-            Deploy Now
+            </div>
-          </a>
+          </div>
-          <a
+          <aside className="border-l border-primary/50 pl-6 text-sm leading-7 text-slate-400">
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            <p className="font-mono text-primary">POSITIONIERUNG</p>
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            <p className="mt-4 text-base text-slate-200">Senior Full-Stack Engineering für Software, die reale Abläufe abbildet — vom Fachprozess bis zum produktiven System.</p>
-            target="_blank"
+            <p className="mt-6">Schwerpunkt: industrielle Software, Datenintegrität, Automatisierung und wartbare Plattformen.</p>
-            rel="noopener noreferrer"
+          </aside>
-          >
+        </section>
-            Documentation
+
-          </a>
+        <section id="projekte" className="scroll-mt-8 border-t border-slate-800 py-20">
+          <div className="mb-10 flex flex-wrap items-end justify-between gap-4">
+            <div>
+              <p className="font-mono text-sm uppercase tracking-[0.22em] text-primary">Ausgewählte Arbeit</p>
+              <h2 className="mt-3 text-3xl font-semibold text-white md:text-4xl">Nicht nur Features. Systeme.</h2>
+            </div>
+            <p className="max-w-md text-sm leading-6 text-slate-400">Die stärkste Referenz ist ein nachvollziehbares System mit echtem fachlichem Kontext — nicht eine lange Liste von Buzzwords.</p>
+          </div>
+          <div className="grid gap-5 md:grid-cols-3">
+            {projects.map((project) => (
+              <article key={project.title} className="flex flex-col rounded-2xl border border-slate-800 bg-slate-950/60 p-7 transition hover:-translate-y-1 hover:border-primary/60">
+                <p className="font-mono text-xs uppercase tracking-[0.16em] text-primary">{project.label}</p>
+                <h3 className="mt-5 text-2xl font-semibold text-white">{project.title}</h3>
+                <p className="mt-4 flex-1 text-sm leading-7 text-slate-400">{project.text}</p>
+                <p className="mt-6 border-t border-slate-800 pt-4 font-mono text-xs leading-5 text-slate-500">{project.facts}</p>
+                <a href={project.href} className="mt-6 text-sm font-medium text-primary hover:text-cyan-300">{project.cta} <span aria-hidden="true">→</span></a>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section id="arbeitsweise" className="scroll-mt-8 border-t border-slate-800 py-20">
+          <div className="grid gap-12 md:grid-cols-[0.8fr_1.2fr]">
+            <div>
+              <p className="font-mono text-sm uppercase tracking-[0.22em] text-primary">Arbeitsweise</p>
+              <h2 className="mt-3 text-3xl font-semibold text-white md:text-4xl">Senior heißt: Entscheidungen verantworten.</h2>
+            </div>
+            <div className="grid gap-8">
+              {principles.map(([title, text], index) => (
+                <div key={title} className="grid gap-3 border-b border-slate-800 pb-7 md:grid-cols-[3rem_1fr]">
+                  <span className="font-mono text-sm text-primary">0{index + 1}</span>
+                  <div><h3 className="text-xl font-medium text-white">{title}</h3><p className="mt-2 max-w-xl leading-7 text-slate-400">{text}</p></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section id="kontakt" className="scroll-mt-8 border-t border-slate-800 py-20">
+          <div className="rounded-3xl border border-primary/30 bg-primary/5 p-8 md:p-12">
+            <p className="font-mono text-sm uppercase tracking-[0.22em] text-primary">Kontakt</p>
+            <h2 className="mt-4 max-w-2xl text-3xl font-semibold text-white md:text-5xl">Sie haben einen Prozess, der bessere Software verdient?</h2>
+            <p className="mt-6 max-w-2xl leading-7 text-slate-300">Lassen Sie uns klären, wo der größte Hebel liegt — in einem neuen Produkt, einer bestehenden Anwendung oder einer technischen Entscheidung.</p>
+            <p className="mt-8 text-sm text-slate-400">Kontaktkanal und Impressum werden vor dem öffentlichen Launch ergänzt.</p>
+          </div>
+        </section>
+
+        <footer className="flex flex-wrap justify-between gap-4 border-t border-slate-800 py-8 text-xs text-slate-500">
+          <span>© {new Date().getFullYear()} Jan Wagner · w-make.org</span>
+          <span>Software Engineering · Glass Technology · Systems Thinking</span>
+        </footer>
       </div>
     </main>
-    </div>
   );
 }
+
+// ponytail: Kontaktadresse und rechtliche Angaben erst ergänzen, wenn die UG-/Domain-Daten feststehen.