50 lines
2.4 KiB
TypeScript
50 lines
2.4 KiB
TypeScript
import * as React from 'react';
|
|
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-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="@"
|
|
/>
|
|
|
|
<Section number="01" title="Direkt">
|
|
<div className="grid grid-cols-1 gap-24">
|
|
<Reveal delay={0.4}>
|
|
<div className="space-y-8">
|
|
<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>
|
|
);
|
|
}
|