139 lines
6.7 KiB
TypeScript
139 lines
6.7 KiB
TypeScript
import { Link } from '@inertiajs/react';
|
|
import Container from '@/components/site/container';
|
|
import Icon from '@/components/site/icon';
|
|
import { common } from '@/content/common';
|
|
import { company, consultationUrl, officeAddress, offices } from '@/data/site';
|
|
import { useContent } from '@/hooks/use-locale';
|
|
import { about, clients, contact, services } from '@/routes';
|
|
|
|
function FooterHeading({ children }: { children: string }) {
|
|
return (
|
|
<span className="text-on-surface font-mono text-xs font-bold tracking-wider uppercase">
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export default function SiteFooter() {
|
|
const t = useContent(common);
|
|
|
|
const companyLinks = [
|
|
{ label: t.footer.links.about, href: about.url() },
|
|
{
|
|
label: t.footer.links.visionMission,
|
|
href: `${about.url()}#visi-misi`,
|
|
},
|
|
{ label: t.footer.links.odoo, href: `${services.url()}#odoo-erp` },
|
|
{ label: t.footer.links.clients, href: clients.url() },
|
|
{ label: t.footer.links.audit, href: consultationUrl },
|
|
{ label: t.footer.links.offices, href: `${contact.url()}#lokasi` },
|
|
];
|
|
|
|
return (
|
|
<footer className="border-outline-variant/40 bg-surface-container-lowest w-full border-t py-16">
|
|
<Container>
|
|
<div className="border-outline-variant/30 grid grid-cols-1 gap-10 border-b pb-12 md:grid-cols-2 lg:grid-cols-12">
|
|
<div className="flex flex-col gap-4 lg:col-span-5">
|
|
<div className="flex items-center gap-3">
|
|
<div className="border-outline-variant/50 dark:bg-surface-container-low rounded-lg border bg-white p-1">
|
|
<img
|
|
src={company.logo}
|
|
alt={company.name}
|
|
className="h-7 w-auto object-contain"
|
|
/>
|
|
</div>
|
|
<span className="font-display text-on-surface text-base font-bold tracking-wide uppercase">
|
|
{company.name}
|
|
</span>
|
|
</div>
|
|
<p className="text-on-surface-variant max-w-md text-xs leading-relaxed">
|
|
{t.footer.tagline}
|
|
</p>
|
|
<div className="text-on-surface-variant mt-2 flex flex-col gap-4 text-xs">
|
|
{offices.map((office) => (
|
|
<div
|
|
key={office.name}
|
|
className="flex items-start gap-2"
|
|
>
|
|
<Icon
|
|
name={office.icon}
|
|
className="text-primary mt-0.5 text-base"
|
|
/>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-on-surface font-semibold">
|
|
{office.name}
|
|
</span>
|
|
<span>{officeAddress(office)}</span>
|
|
<a
|
|
href={office.phone.href}
|
|
className="hover:text-primary font-mono transition-colors"
|
|
>
|
|
{t.footer.tel} {office.phone.label}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<a
|
|
href={`mailto:${company.email.busdev}`}
|
|
className="hover:text-primary flex items-center gap-2 font-mono transition-colors"
|
|
>
|
|
<Icon
|
|
name="mail"
|
|
className="text-primary text-base"
|
|
/>
|
|
{company.email.busdev}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 lg:col-span-4">
|
|
<FooterHeading>
|
|
{t.footer.servicesHeading}
|
|
</FooterHeading>
|
|
<ul className="text-on-surface-variant grid grid-cols-1 gap-2 text-xs sm:grid-cols-2">
|
|
{t.services.map((service, index) => (
|
|
<li key={service.title}>
|
|
<Link
|
|
href={`${services.url()}#jasa-resmi`}
|
|
className="hover:text-primary transition-colors"
|
|
>
|
|
{index + 1}. {service.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 lg:col-span-3">
|
|
<FooterHeading>{t.footer.linksHeading}</FooterHeading>
|
|
<ul className="text-on-surface-variant flex flex-col gap-2 text-xs">
|
|
{companyLinks.map((link) => (
|
|
<li key={link.label}>
|
|
<Link
|
|
href={link.href}
|
|
className="hover:text-primary transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-on-surface-variant flex flex-col items-center justify-between gap-4 pt-8 text-xs md:flex-row">
|
|
<p>
|
|
© {new Date().getFullYear()} {company.name}.{' '}
|
|
{t.footer.rights}
|
|
</p>
|
|
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-1 font-mono text-[11px]">
|
|
<span>Est. {company.established}</span>
|
|
<span className="text-primary">•</span>
|
|
<span>{t.footer.location}</span>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</footer>
|
|
);
|
|
}
|