mirror of
https://github.com/Since-3/since3-website.git
synced 2026-10-12 19:51:16 +00:00
53 lines
2 KiB
TypeScript
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>
|
|
)
|
|
}
|