85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import { Zap } from "lucide-react";
|
|
|
|
const footerLinks = [
|
|
{
|
|
title: "Company",
|
|
links: [
|
|
{ label: "How It Works", href: "#how-it-works" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Packages", href: "#packages" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
links: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Our Impact", href: "#impact" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Press Kit", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
links: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="border-t border-brown-light/20 bg-bg-primary py-16 px-4">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
|
|
{/* Logo & tagline */}
|
|
<div className="md:col-span-1">
|
|
<a href="#" className="flex items-center gap-2 mb-4">
|
|
<Zap className="h-6 w-6 text-neon" />
|
|
<span className="text-lg font-bold text-cream">
|
|
Porta<span className="text-neon">Power</span>
|
|
</span>
|
|
</a>
|
|
<p className="text-sm text-cream-dim leading-relaxed">
|
|
Turning what you leave behind into what powers the party ahead.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Link columns */}
|
|
{footerLinks.map((group) => (
|
|
<div key={group.title}>
|
|
<h4 className="font-bold text-cream text-sm mb-4 uppercase tracking-wider">
|
|
{group.title}
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{group.links.map((link) => (
|
|
<li key={link.label}>
|
|
<a
|
|
href={link.href}
|
|
className="text-sm text-cream-dim hover:text-neon transition-colors"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom bar */}
|
|
<div className="border-t border-brown-light/20 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<p className="text-xs text-cream-dim">
|
|
© {new Date().getFullYear()} PortaPower Inc. All rights reserved.
|
|
</p>
|
|
<p className="text-xs text-cream-dim">
|
|
Made with 💩 and ⚡ in Austin, TX
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|