since3-website/modules/landingPage/ui/components/contact-section.tsx
2026-09-25 00:45:33 +02:00

53 lines
2 KiB
TypeScript

import { ContactForm } from "@/modules/landingPage/forms/contact-form"
import { site } from "@/modules/shared/config/site"
export function ContactSection() {
return (
<section
id="kontakt"
aria-labelledby="kontakt-title"
data-theme="dark"
className="relative overflow-clip pt-section"
>
<div
aria-hidden="true"
className="pointer-events-none absolute bottom-0 left-[-15%] size-[70vw] rounded-full bg-[radial-gradient(circle,rgb(255_255_255/0.1),transparent_65%)] blur-3xl"
/>
<div className="container-site relative">
<p className="font-mono text-label text-fg-muted">(Kontakt)</p>
<h2 id="kontakt-title" className="mt-6 text-mega type-poster">
Lass uns
<br />
<span className="text-outline">reden.</span>
</h2>
<div className="mt-16 grid gap-12 lg:grid-cols-12">
<div className="flex flex-col gap-10 lg:col-span-4">
<p className="type-body text-lead text-fg-muted">
Das Erstgespräch ist kostenlos. Erzähl uns, was du vorhast, wir
melden uns innerhalb von zwei Werktagen.
</p>
<div className="flex flex-col gap-3">
<a
href={`mailto:${site.email}`}
className="group w-fit text-title font-medium"
>
<span className="bg-[linear-gradient(currentColor,currentColor)] bg-size-[0%_2px] bg-bottom-left bg-no-repeat pb-1 transition-[background-size] duration-500 ease-out-expo group-hover:bg-size-[100%_2px]">
{site.email}
</span>
</a>
<a href={site.phoneHref} className="w-fit font-mono text-label text-fg-muted hover:text-fg">
{site.phone}
</a>
</div>
</div>
<div className="glass p-6 sm:p-10 lg:col-span-8">
<ContactForm />
</div>
</div>
</div>
</section>
)
}