Marc Mintel
6244425551
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Failing after 1m4s
Build & Deploy / 🏗️ Build (push) Failing after 3m47s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
- fix: prevent code components from growing width during animation - feat: enforce 100% width on browser frames (CodeWindow) - feat: remove "Zurück" links project-wide from PageHeader - feat: enable imgproxy face detection support for about page avatar
97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
import { PageHeader } from "../../src/components/PageHeader";
|
|
import { Reveal } from "../../src/components/Reveal";
|
|
import { Section } from "../../src/components/Section";
|
|
import { H3, LeadText, Label } from "../../src/components/Typography";
|
|
import { Card } from "../../src/components/Layout";
|
|
import { ContactForm } from "../../src/components/ContactForm";
|
|
import { GradientMesh, AbstractCircuit } from "../../src/components/Effects";
|
|
|
|
export default function ContactPage() {
|
|
return (
|
|
<div className="flex flex-col bg-white min-h-screen overflow-hidden relative">
|
|
<AbstractCircuit />
|
|
|
|
<PageHeader
|
|
title={
|
|
<>
|
|
Kontakt<span className="text-slate-200">.</span>
|
|
</>
|
|
}
|
|
description="Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich zeitnah bei Ihnen."
|
|
backgroundSymbol="@"
|
|
/>
|
|
|
|
<Section
|
|
borderTop
|
|
effects={
|
|
<>
|
|
<GradientMesh variant="metallic" className="opacity-70" />
|
|
</>
|
|
}
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
|
|
{/* Form */}
|
|
<div className="md:col-span-7">
|
|
<Reveal>
|
|
<Card
|
|
variant="glass"
|
|
padding="large"
|
|
className="relative overflow-hidden"
|
|
>
|
|
<ContactForm />
|
|
</Card>
|
|
</Reveal>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="md:col-span-5 space-y-8">
|
|
<Reveal delay={0.2}>
|
|
<Card
|
|
variant="glass"
|
|
padding="normal"
|
|
techBorder
|
|
className="group"
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
<Label className="text-slate-900">Verfügbarkeit</Label>
|
|
</div>
|
|
<LeadText className="text-lg text-slate-400">
|
|
Aktuell nehme ich Projekte für{" "}
|
|
<span className="text-slate-900 font-bold">Q2 2026</span>{" "}
|
|
an.
|
|
</LeadText>
|
|
</div>
|
|
</Card>
|
|
</Reveal>
|
|
|
|
<Reveal delay={0.3}>
|
|
<Card variant="glass" padding="normal" className="group">
|
|
<div className="space-y-4">
|
|
<Label className="text-slate-900">Direkt per E-Mail</Label>
|
|
<a
|
|
href="mailto:marc@mintel.me"
|
|
className="block text-xl md:text-2xl font-bold text-slate-900 hover:text-slate-400 transition-colors duration-500 border-b border-slate-100 hover:border-slate-400 pb-1"
|
|
>
|
|
marc@mintel.me
|
|
</a>
|
|
</div>
|
|
</Card>
|
|
</Reveal>
|
|
|
|
<Reveal delay={0.4}>
|
|
<div className="p-6 space-y-3 rounded-2xl border border-slate-50 bg-slate-50/30">
|
|
<Label className="text-slate-400">Antwortzeit</Label>
|
|
<H3 className="text-2xl text-slate-300">
|
|
<span className="text-slate-900">< 24h</span> an Werktagen.
|
|
</H3>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|