53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { Mail } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Button } from '@components/ui/button'
|
|
import { CONTACT_EMAIL, SOCIAL_LINKS } from '@lib/constants'
|
|
import type { FC } from 'react'
|
|
|
|
export const ContactSection: FC = () => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<section id="contact" className="scroll-mt-20 bg-muted/30 px-6 py-24">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<header>
|
|
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
|
|
{t('contact.title')}
|
|
</h2>
|
|
<p className="mt-2 text-muted-foreground">{t('contact.subtitle')}</p>
|
|
</header>
|
|
|
|
<div className="mt-10">
|
|
<Button size="lg" asChild>
|
|
<a href={`mailto:${CONTACT_EMAIL}`} className="gap-2">
|
|
<Mail className="h-4 w-4" />
|
|
{t('contact.send')}
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<p className="text-sm text-muted-foreground">{t('contact.or')}</p>
|
|
<nav
|
|
className="mt-4 flex items-center justify-center gap-4"
|
|
aria-label="Social links"
|
|
>
|
|
{SOCIAL_LINKS.map((link) => (
|
|
<a
|
|
key={link.label}
|
|
href={link.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-full border border-border/50 p-3 text-muted-foreground transition-all hover:border-primary/30 hover:bg-accent hover:text-foreground"
|
|
aria-label={link.label}
|
|
>
|
|
<link.icon className="h-5 w-5" />
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|