66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Facebook, Instagram, MessageCircle } from 'lucide-react';
|
|
import {
|
|
FACEBOOK_URL,
|
|
INSTAGRAM_URL,
|
|
WHATSAPP_URL,
|
|
} from '@/lib/constants';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
|
|
const socialLinks = [
|
|
{
|
|
key: 'facebook',
|
|
href: FACEBOOK_URL,
|
|
icon: Facebook,
|
|
className:
|
|
'border-blue-600/20 bg-blue-600/10 text-blue-700 hover:border-blue-600/40 hover:bg-blue-600/15',
|
|
},
|
|
{
|
|
key: 'instagram',
|
|
href: INSTAGRAM_URL,
|
|
icon: Instagram,
|
|
className:
|
|
'border-pink-600/20 bg-pink-600/10 text-pink-700 hover:border-pink-600/40 hover:bg-pink-600/15',
|
|
},
|
|
{
|
|
key: 'whatsapp',
|
|
href: WHATSAPP_URL,
|
|
icon: MessageCircle,
|
|
className:
|
|
'border-green-600/20 bg-green-600/10 text-green-700 hover:border-green-600/40 hover:bg-green-600/15',
|
|
},
|
|
] as const;
|
|
|
|
export default function SocialFollow() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<section className="py-20">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="rounded-3xl border border-cream-300/80 bg-white px-8 py-12 text-center shadow-premium sm:px-16">
|
|
<span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
|
|
{t('social.label')}
|
|
</span>
|
|
<h2 className="section-heading mb-3">{t('social.title')}</h2>
|
|
<p className="mx-auto mb-8 max-w-xl text-gray-500">{t('social.subtitle')}</p>
|
|
|
|
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
|
{socialLinks.map(({ key, href, icon: Icon, className }) => (
|
|
<a
|
|
key={key}
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`inline-flex items-center gap-2 rounded-xl border-2 px-6 py-3 text-sm font-semibold transition-all ${className}`}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
{t(`social.${key}`)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |