97 lines
4.4 KiB
TypeScript
97 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
// Company information, quick links, social links, and contact details.
|
|
|
|
import {commerceCopy} from '@/data/commerce';
|
|
import Link from 'next/link';
|
|
import {PhoneOutlined, EnvironmentOutlined} from '@ant-design/icons';
|
|
import {useLanguage} from '@/app/context/LanguageContext';
|
|
|
|
export default function Footer() {
|
|
const {t, locale} = useLanguage();
|
|
const c = t.contactInfo;
|
|
|
|
return (
|
|
<footer id="contact" className="relative border-t border-subtle bg-elevated">
|
|
<div className="max-w-6xl mx-auto px-6 md:px-16 py-14 grid md:grid-cols-3 gap-10 text-center md:text-start">
|
|
<div>
|
|
<h3 className="text-primary font-bold text-lg mb-3">{t.footer.aboutLabel}</h3>
|
|
<p className="text-secondary text-sm leading-7">{t.footer.aboutText}</p>
|
|
<div className="flex flex-col gap-2 mt-4">
|
|
{c.socialLinks.map(link => (
|
|
<a
|
|
key={link.id}
|
|
href={link.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-brand-400 hover:text-brand-300 text-sm transition-colors"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-primary font-bold text-lg mb-3">{t.footer.quickLinks}</h3>
|
|
<ul className="flex flex-col gap-2 text-sm text-secondary">
|
|
<li>
|
|
<Link href="/#hero" className="hover:text-brand-400">
|
|
{t.nav.home}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/products" className="hover:text-brand-400">
|
|
{commerceCopy[locale].allProducts}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/#about" className="hover:text-brand-400">
|
|
{t.nav.about}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/#locations" className="hover:text-brand-400">
|
|
{t.nav.locations}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-primary font-bold text-lg mb-3">{t.footer.contactTitle}</h3>
|
|
<div className="flex flex-col gap-4 text-sm text-secondary">
|
|
<a
|
|
href={`tel:${c.orderPhoneHref}`}
|
|
className="flex items-center justify-center md:justify-start gap-2 hover:text-brand-400 transition-colors"
|
|
dir="ltr"
|
|
>
|
|
<PhoneOutlined />
|
|
<span>{c.orderPhone}</span>
|
|
</a>
|
|
|
|
<div className="flex items-start justify-center md:justify-start gap-2">
|
|
<EnvironmentOutlined className="mt-0.5 shrink-0" />
|
|
<div className="text-start">
|
|
<p className="text-primary-90 font-semibold mb-1">{t.footer.salesLabel}</p>
|
|
<p className="leading-7">{c.salesOfficeAddress}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start justify-center md:justify-start gap-2">
|
|
<EnvironmentOutlined className="mt-0.5 shrink-0" />
|
|
<div className="text-start">
|
|
<p className="text-primary-90 font-semibold mb-1">{t.footer.factoryLabel}</p>
|
|
<p className="leading-7">{c.factoryAddress}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-subtle py-5 text-center text-xs text-secondary">
|
|
© {new Date().getFullYear()} {t.footer.aboutLabel}. {t.footer.rights}
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|