110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { siteConfig } from "@/data/site-config";
|
|
import { SocialIcons } from "@/components/shared/SocialIcons";
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
|
|
/**
|
|
* Footer — shared site-wide footer.
|
|
*
|
|
* Renders on every page via layout.tsx.
|
|
* Data sourced from `data/site-config.ts` — no hardcoded links.
|
|
*
|
|
* Structure (from reference):
|
|
* Left: Logo · social icons · outline "since 2024" text
|
|
* Right: Company links column · Services links column
|
|
* Bottom: Copyright · Terms/Privacy
|
|
*/
|
|
export function Footer() {
|
|
return (
|
|
<footer className="bg-aiero-dark px-5 pb-10 pt-16 md:pt-20">
|
|
<PageContainer>
|
|
{/* ── Top row: Logo + link columns ── */}
|
|
<div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr]">
|
|
{/* Brand column */}
|
|
<div className="flex flex-col items-start gap-8">
|
|
<Link href="/" aria-label="Home">
|
|
<Image
|
|
src="/images/aiero/logo-dark.png"
|
|
alt={siteConfig.name}
|
|
width={146}
|
|
height={26}
|
|
className="h-auto w-auto brightness-0 invert"
|
|
/>
|
|
</Link>
|
|
|
|
<SocialIcons links={siteConfig.socials} />
|
|
|
|
{/* Outline "since 2024" decorative text */}
|
|
<span
|
|
className="mt-4 select-none font-sora text-[clamp(48px,6vw,80px)] font-bold leading-none tracking-tight"
|
|
style={{
|
|
WebkitTextStroke: "1px rgba(255,255,255,0.12)",
|
|
WebkitTextFillColor: "transparent",
|
|
}}
|
|
>
|
|
since 2024
|
|
</span>
|
|
</div>
|
|
|
|
{/* Company links */}
|
|
<div>
|
|
<h4 className="mb-6 font-sora text-sm font-semibold uppercase tracking-widest text-white">
|
|
Company
|
|
</h4>
|
|
<ul className="flex flex-col gap-3">
|
|
{siteConfig.footerLinks.company.map((link) => (
|
|
<li key={link.label}>
|
|
<a
|
|
href={link.href}
|
|
className="text-[15px] text-aiero-text-muted transition-colors duration-300 hover:text-aiero-teal"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Services links */}
|
|
<div>
|
|
<h4 className="mb-6 font-sora text-sm font-semibold uppercase tracking-widest text-white">
|
|
Services
|
|
</h4>
|
|
<ul className="flex flex-col gap-3">
|
|
{siteConfig.footerLinks.services.map((link) => (
|
|
<li key={link.label}>
|
|
<a
|
|
href={link.href}
|
|
className="text-[15px] text-aiero-text-muted transition-colors duration-300 hover:text-aiero-teal"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Bottom bar ── */}
|
|
<div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-aiero-card-border pt-8 md:flex-row">
|
|
<p className="text-sm text-aiero-text-muted">
|
|
{siteConfig.copyright}
|
|
</p>
|
|
<div className="flex gap-6">
|
|
{siteConfig.legalLinks.map((link) => (
|
|
<a
|
|
key={link.label}
|
|
href={link.href}
|
|
className="text-sm text-aiero-text-muted transition-colors duration-300 hover:text-aiero-teal"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</PageContainer>
|
|
</footer>
|
|
);
|
|
}
|