70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { useTranslations, useLocale } from 'next-intl';
|
|
import { brandInfo } from '@repo/brand';
|
|
|
|
export function Footer() {
|
|
const t = useTranslations();
|
|
const locale = useLocale() as 'id' | 'en';
|
|
|
|
const footerLinks = [
|
|
{ labelKey: 'Nav.home', href: '#' },
|
|
{ labelKey: 'Nav.solutions', href: '#ecosystem' },
|
|
{ labelKey: 'Nav.industries', href: '#destinations' },
|
|
{ labelKey: 'Nav.pricing', href: '#pricing' },
|
|
{ labelKey: 'Nav.contact', href: '#contact' },
|
|
];
|
|
|
|
const socialLinks = [
|
|
{ icon: 'uil-envelope-alt', href: brandInfo.socialLinks.email },
|
|
{ icon: 'uil-phone', href: brandInfo.socialLinks.phone },
|
|
{ icon: 'uil-youtube', href: brandInfo.socialLinks.youtube },
|
|
];
|
|
|
|
return (
|
|
<footer className="footer">
|
|
<div className="container">
|
|
<div className="footer-top">
|
|
<div className="footer-brand">
|
|
<div className="brand">
|
|
<a href="#">
|
|
<div className="brand-mark">
|
|
<img src="/brand/logo-primary.svg" alt="" />
|
|
</div>
|
|
</a>
|
|
<span className="brand-name" style={{ color: '#fff' }}></span>
|
|
</div>
|
|
<p>{t('Footer.desc')}</p>
|
|
<p className="address">{brandInfo.address[locale] || brandInfo.address.id}</p>
|
|
</div>
|
|
<div className="footer-cols">
|
|
<div className="footer-col">
|
|
<h5>{t('Footer.links')}</h5>
|
|
{footerLinks.map((link, i) => (
|
|
<a href={link.href} key={i}>
|
|
{(t as any)(link.labelKey)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="footer-col">
|
|
<h5>{t('Nav.contact')}</h5>
|
|
<a href={`mailto:${brandInfo.email}`}>{brandInfo.email}</a>
|
|
<a href={`tel:${brandInfo.phone.replace(/[\s-]/g, '')}`}>{brandInfo.phone}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="footer-bottom">
|
|
<p>
|
|
© <span>{new Date().getFullYear()}</span> {t('Footer.copyright')}
|
|
</p>
|
|
<div className="footer-social">
|
|
{socialLinks.map((social, i) => (
|
|
<a href={social.href} key={i}>
|
|
<i className={`uil ${social.icon}`}></i>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|