99 lines
3.8 KiB
TypeScript
99 lines
3.8 KiB
TypeScript
import Link from "next/link"
|
|
import { LayoutGrid, Phone, Mail, MapPin, ArrowRight } from "lucide-react"
|
|
import siteData from "@/data/site.json"
|
|
|
|
export function Footer() {
|
|
const { company, footer } = siteData
|
|
|
|
return (
|
|
<footer className="snap-start bg-surface-dark text-white">
|
|
{/* Main grid */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div className="grid grid-cols-1 lg:grid-cols-5 gap-12">
|
|
|
|
{/* Brand column */}
|
|
<div className="lg:col-span-2 flex flex-col gap-5">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
|
|
<LayoutGrid className="w-4 h-4 text-white" strokeWidth={2.5} />
|
|
</div>
|
|
<div className="flex flex-col leading-none">
|
|
<span className="font-bold text-base text-white">{company.name}</span>
|
|
<span className="text-[9px] tracking-widest text-white/40">{company.nameEn.toUpperCase()}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-sm leading-relaxed text-white/55 max-w-xs text-pretty">
|
|
{company.description}
|
|
</p>
|
|
|
|
<div className="flex flex-col gap-2.5">
|
|
<a
|
|
href={`tel:${company.phone}`}
|
|
className="flex items-center gap-2 text-sm text-white/55 hover:text-white transition-colors"
|
|
>
|
|
<Phone className="w-3.5 h-3.5 text-primary shrink-0" />
|
|
{company.phone}
|
|
</a>
|
|
<a
|
|
href={`mailto:${company.email}`}
|
|
className="flex items-center gap-2 text-sm text-white/55 hover:text-white transition-colors"
|
|
>
|
|
<Mail className="w-3.5 h-3.5 text-primary shrink-0" />
|
|
{company.email}
|
|
</a>
|
|
<span className="flex items-start gap-2 text-sm text-white/55">
|
|
<MapPin className="w-3.5 h-3.5 text-primary shrink-0 mt-0.5" />
|
|
{company.address}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Link columns */}
|
|
{footer.columns.map((col) => (
|
|
<div key={col.title} className="flex flex-col gap-4">
|
|
<h3 className="text-xs font-semibold uppercase tracking-widest text-white/40">
|
|
{col.title}
|
|
</h3>
|
|
<ul className="flex flex-col gap-2.5">
|
|
{col.links.map((link) => (
|
|
<li key={link.label}>
|
|
<Link
|
|
href={link.href}
|
|
className="group flex items-center gap-1 text-sm text-white/55 hover:text-white transition-colors"
|
|
>
|
|
<ArrowRight className="w-3 h-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom bar */}
|
|
<div className="border-t border-white/10">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 flex flex-col sm:flex-row items-center justify-between gap-3">
|
|
<p className="text-xs text-white/35">{footer.copyright}</p>
|
|
<div className="flex items-center gap-5">
|
|
{footer.legal.map((item) => (
|
|
<Link
|
|
key={item.label}
|
|
href={item.href}
|
|
className="text-xs text-white/35 hover:text-white/65 transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
{company.icp && (
|
|
<span className="text-xs text-white/35">{company.icp}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|