34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import { contactInfo } from '../data/content';
|
|
|
|
export function ContactSection() {
|
|
const mailtoHref = `mailto:${contactInfo.email}?subject=${encodeURIComponent(contactInfo.mailSubject)}`;
|
|
|
|
return (
|
|
<section id="contact" className="pb-[110px]">
|
|
<div className="mx-auto max-w-[1080px] px-6">
|
|
<div className="rounded-[20px] border border-accent-line bg-gradient-to-br from-surface-2 to-surface px-10 py-14 text-center">
|
|
<span className="font-mono block text-sm uppercase tracking-wider text-accent">
|
|
// contact
|
|
</span>
|
|
<h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
|
|
{contactInfo.heading}
|
|
</h2>
|
|
<p className="mx-auto mb-8 mt-3.5 max-w-[46ch] text-muted">{contactInfo.description}</p>
|
|
<a
|
|
href={mailtoHref}
|
|
className="rounded-lg bg-accent px-6 py-3.5 text-[0.98rem] font-semibold text-[var(--color-accent-contrast)] transition-colors hover:bg-[var(--color-accent-hover)]"
|
|
>
|
|
Stuur een bericht
|
|
</a>
|
|
<span className="font-mono mt-5 block text-[0.9rem] text-muted">
|
|
of mail direct naar{' '}
|
|
<a href={`mailto:${contactInfo.email}`} className="text-accent underline-offset-2 hover:underline">
|
|
{contactInfo.email}
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|