blog design

This commit is contained in:
2026-01-29 21:13:54 +01:00
parent ec0a055c13
commit eafb740b1d
14 changed files with 291 additions and 385 deletions

View File

@@ -1,38 +1,22 @@
import * as React from 'react';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { Reveal } from '../../src/components/Reveal';
import { PageHeader } from '../../src/components/PageHeader';
import { Section } from '../../src/components/Section';
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>
<div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
<PageHeader
title={<>Kontakt <br /><span className="text-slate-200">& Anfrage.</span></>}
description="Haben Sie ein Projekt im Kopf? Schreiben Sie mir einfach. Ich antworte meistens innerhalb von 24 Stunden."
backLink={{ href: '/', label: 'Zurück' }}
backgroundSymbol="@"
/>
<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">
<Section number="01" title="Direkt">
<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"
@@ -59,7 +43,7 @@ export default function ContactPage() {
</div>
</Reveal>
</div>
</section>
</Section>
</div>
);
}