feat: rebuild mintel.me as a single-page freelance site

The site now presents one freelance developer on one page: hero, introduction,
four typical cases (developer for a product, make an app reliable, automate a
process, a website) with what you get, how it runs and what it costs, a
process automation section, technology and project fit, how I work, two live
references, questions and contact.

- Hero and closing headline are drawn from running binary digits.
- Each case explains its four steps with an animated drawing; the automation
  section shows example workflows with work travelling between systems; a
  pipeline run shows what a test catches before a release.
- Contact is one email address, kept in parts and assembled in the browser so
  it never appears in the page source (src/domain/email.ts, spec first).
- Imprint and privacy pages added.
- The old site (blog, case studies, contact form, fixed-price pages, video
  rendering and related scripts) is removed. Its URLs redirect to the homepage.
- The deploy smoke test checks the legal pages and the redirects instead of
  the removed case study.
- Dev scripts use docker compose v2.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/components/Footer.tsx

@@ -1,71 +1,67 @@
+import Image from "next/image";
 import Link from "next/link";
 import * as React from "react";
 
-import { AVAILABILITY_CONFIG } from "../content/site";
-import {
-  formatAvailability,
-  resolveAvailability,
-} from "../domain/availability";
-
-const NAV_LINKS = [
-  { href: "/notes", label: "Notes" },
-  { href: "/process", label: "Process" },
-  { href: "/about", label: "About" },
-  { href: "/book", label: "Book a call" },
-] as const;
-
-const LEGAL_LINKS = [
-  { href: "/legal/impressum", label: "Imprint" },
-  { href: "/legal/datenschutz", label: "Privacy" },
-  { href: "/legal/agb", label: "Terms" },
-] as const;
-
-const LINK_CLASS = "text-muted transition-colors hover:text-fg";
+import LogoBlack from "../assets/logo/Logo-Black-Transparent.svg";
 
 export const Footer: React.FC = () => {
-  const now = new Date();
-  const today = now.toISOString().slice(0, 10);
-  const availability = formatAvailability(
-    resolveAvailability(AVAILABILITY_CONFIG, today),
-  );
+  const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="relative z-10 mt-16 border-t border-border bg-bg py-10 md:mt-24 md:py-14">
-      <div className="mx-auto w-full max-w-6xl px-5 md:px-8">
-        <p className="!mb-8 flex items-center gap-2 font-mono text-sm text-fg">
-          <span aria-hidden="true" className="h-2 w-2 rounded-full bg-accent" />
-          {availability}
-        </p>
-        <div className="flex flex-col gap-8 md:flex-row md:items-end md:justify-between">
-          <div className="space-y-4">
-            <p className="!mb-0 font-mono text-lg font-semibold text-fg">
-              mintel<span className="text-accent">.</span>me
-            </p>
-            <nav
-              aria-label="Footer"
-              className="flex flex-wrap gap-x-6 gap-y-2 text-sm"
-            >
-              {NAV_LINKS.map((link) => (
-                <Link key={link.href} href={link.href} className={LINK_CLASS}>
-                  {link.label}
-                </Link>
-              ))}
-            </nav>
+    <footer className="relative py-10 md:py-16 mt-8 md:mt-24 border-t border-slate-100 bg-white z-10">
+      {/* Tech border at top */}
+      <div className="absolute top-0 left-0 right-0 h-px overflow-hidden">
+        <div
+          className="h-full w-full"
+          style={{
+            background:
+              "linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.15) 25%, rgba(191, 206, 228, 0.1) 50%, rgba(148, 163, 184, 0.15) 75%, transparent 100%)",
+          }}
+        />
+      </div>
+
+      <div className="mx-auto w-full max-w-[1400px] px-5 md:px-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-end">
+          <div className="space-y-6">
+            <div className="flex items-center gap-3">
+              <Image
+                src={LogoBlack}
+                alt="Marc Mintel"
+                height={64}
+                className="h-12 md:h-16 w-auto"
+              />
+            </div>
           </div>
-          <div className="space-y-4 text-sm md:text-right">
-            <nav
-              aria-label="Legal"
-              className="flex flex-wrap gap-x-6 gap-y-2 md:justify-end"
+
+          <div className="flex flex-col md:items-end gap-3 md:gap-4 text-xs md:text-sm font-mono text-slate-300 uppercase tracking-widest">
+            <span>© {currentYear}</span>
+            <div className="flex flex-wrap gap-x-8 gap-y-3 md:justify-end">
+              <Link
+                href="/#contact"
+                className="hover:text-slate-900 transition-colors duration-300 no-underline"
+              >
+                Get in touch
+              </Link>
+              <Link
+                href="/imprint"
+                className="hover:text-slate-900 transition-colors duration-300 no-underline"
+              >
+                Imprint
+              </Link>
+              <Link
+                href="/privacy"
+                className="hover:text-slate-900 transition-colors duration-300 no-underline"
+              >
+                Privacy
+              </Link>
+            </div>
+            {/* Subtle binary decoration */}
+            <span
+              className="text-[8px] text-slate-200 tracking-[0.5em] select-none font-mono"
+              aria-hidden="true"
             >
-              {LEGAL_LINKS.map((link) => (
-                <Link key={link.href} href={link.href} className={LINK_CLASS}>
-                  {link.label}
-                </Link>
-              ))}
-            </nav>
-            <p className="!mb-0 font-mono text-xs text-faint">
-              © {now.getFullYear()} Marc Mintel
-            </p>
+              01001101 01001001 01001110
+            </span>
           </div>
         </div>
       </div>