design

app/contact/page.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { Reveal } from '../../src/components/Reveal';
+
+export default function ContactPage() {
+  return (
+    <div className="flex flex-col gap-24 py-24 md:py-48 overflow-hidden">
+      <section className="narrow-container relative">
+        <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">@</div>
+        <Link href="/" className="inline-flex items-center gap-2 text-slate-300 hover:text-slate-900 mb-16 transition-colors font-mono text-xs uppercase tracking-[0.3em]">
+          <ArrowLeft className="w-3 h-3" /> Zurück
+        </Link>
+        
+        <div className="space-y-16">
+          <Reveal>
+            <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
+              Kontakt <br />
+              <span className="text-slate-200">& Anfrage.</span>
+            </h1>
+          </Reveal>
+
+          <Reveal delay={0.2}>
+            <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
+              Haben Sie ein Projekt im Kopf? Schreiben Sie mir einfach. Ich antworte meistens innerhalb von 24 Stunden.
+            </p>
+          </Reveal>
+        </div>
+      </section>
+
+      <section className="narrow-container">
+        <div className="grid grid-cols-1 gap-24">
+          <Reveal delay={0.4}>
+            <div className="space-y-8">
+              <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400">Direkt</h2>
+              <a 
+                href="mailto:marc@mintel.me" 
+                className="group block space-y-2"
+              >
+                <span className="text-xs font-bold uppercase tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors">Email</span>
+                <p className="text-3xl md:text-5xl font-bold text-slate-900 border-b-4 border-slate-100 group-hover:border-slate-900 transition-all pb-4">
+                  marc@mintel.me
+                </p>
+              </a>
+            </div>
+          </Reveal>
+
+          <Reveal delay={0.6}>
+            <div className="p-12 border-2 border-slate-900 bg-slate-50 relative overflow-hidden">
+              <div className="absolute top-0 right-0 text-[15rem] font-bold text-slate-200/20 select-none translate-x-1/4 -translate-y-1/4">!</div>
+              <div className="relative z-10 space-y-8">
+                <h2 className="text-2xl font-bold text-slate-900">Was ich von Ihnen brauche:</h2>
+                <ul className="space-y-6 text-xl md:text-2xl text-slate-600 font-serif italic">
+                  <li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">01</span> Was ist das Ziel des Projekts?</li>
+                  <li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">02</span> Gibt es eine Deadline?</li>
+                  <li className="flex gap-6"><span className="text-slate-900 font-bold font-sans not-italic">03</span> Welches Budget ist eingeplant?</li>
+                </ul>
+              </div>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+    </div>
+  );
+}