101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { ArrowRight, Mail, Phone } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export function CTA() {
|
|
const { t } = useTranslation();
|
|
const email = t('cta.email');
|
|
const whatsapp = t('cta.whatsapp');
|
|
|
|
return (
|
|
<section id="contact" className="section">
|
|
<div className="container-rl">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-80px' }}
|
|
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
|
|
className="relative overflow-hidden rounded-2xl bg-secondary text-secondary-fg shadow-lg"
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute -top-32 -right-32 h-[420px] w-[420px] rounded-full bg-primary/30 blur-3xl"
|
|
/>
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute -bottom-40 -left-32 h-[380px] w-[380px] rounded-full bg-primary/20 blur-3xl"
|
|
/>
|
|
|
|
<div className="relative grid gap-10 p-10 lg:grid-cols-[1.1fr_0.9fr] lg:p-16">
|
|
<div>
|
|
<span className="inline-flex items-center gap-1.5 rounded-full bg-primary/20 px-3 py-1 text-xs font-semibold text-primary">
|
|
{t('cta.eyebrow')}
|
|
</span>
|
|
<h2 className="heading text-balance mt-5 text-3xl text-secondary-fg md:text-4xl">
|
|
{t('cta.title')}
|
|
</h2>
|
|
<p className="mt-4 text-secondary-fg/80 md:text-lg">
|
|
{t('cta.subtitle')}
|
|
</p>
|
|
|
|
<a
|
|
href={`mailto:${email}`}
|
|
className="btn-primary mt-8"
|
|
>
|
|
{t('cta.ctaPrimary')}
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
|
|
<div className="grid gap-4 self-center">
|
|
<ContactCard
|
|
Icon={Mail}
|
|
label={t('cta.emailLabel')}
|
|
value={email}
|
|
href={`mailto:${email}`}
|
|
/>
|
|
<ContactCard
|
|
Icon={Phone}
|
|
label={t('cta.whatsappLabel')}
|
|
value={whatsapp}
|
|
href={`https://wa.me/${whatsapp.replace(/\D/g, '')}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ContactCard({
|
|
Icon,
|
|
label,
|
|
value,
|
|
href,
|
|
}: {
|
|
Icon: typeof Mail;
|
|
label: string;
|
|
value: string;
|
|
href: string;
|
|
}) {
|
|
return (
|
|
<a
|
|
href={href}
|
|
className="group flex items-center gap-4 rounded-xl border border-white/10 bg-white/5 p-5 transition-colors hover:bg-white/10"
|
|
>
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary text-primary-fg">
|
|
<Icon className="h-5 w-5" aria-hidden="true" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="text-xs uppercase tracking-wider text-secondary-fg/60">
|
|
{label}
|
|
</div>
|
|
<div className="truncate font-semibold text-secondary-fg group-hover:underline">
|
|
{value}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|