kobilwebsite/src/components/Footer.tsx
Temmuz Aslan b284562862 chore: backup state before god-tier overhaul
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-15 11:53:34 +03:00

119 lines
4.1 KiB
TypeScript

import Link from "next/link";
import Image from "next/image";
import { Linkedin, Twitter } from "lucide-react";
const footerLinks = [
{
title: "Platform",
links: [
{ href: "/platform", label: "Overview" },
{ href: "/platform#identity", label: "Identity" },
{ href: "/platform#communication", label: "Communication" },
{ href: "/platform#signatures", label: "Signatures" },
{ href: "/platform#payments", label: "Payments" },
],
},
{
title: "Solutions",
links: [
{ href: "/ai-agents", label: "AI Agents" },
{ href: "/industries", label: "Industries" },
{ href: "/security", label: "Security" },
],
},
{
title: "Company",
links: [
{ href: "/contact", label: "Contact" },
{ href: "/contact", label: "Book a Demo" },
],
},
];
export function Footer() {
return (
<footer className="relative border-t border-white/[0.04] bg-[#060920]">
<div className="mx-auto max-w-7xl px-6 py-16">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
{/* Logo & tagline */}
<div className="lg:col-span-2">
<Link href="/">
<Image
src="/kobil.svg"
alt="KOBIL"
width={100}
height={26}
className="logo-white opacity-80"
/>
</Link>
<p className="mt-4 text-slate-400 text-sm leading-relaxed max-w-xs">
The Digital Trust Platform. One platform for identity,
communication, signatures, and payments.
</p>
<p className="mt-6 text-slate-500 text-xs tracking-wide uppercase">
Headquartered in Germany. Trusted Worldwide.
</p>
<div className="flex gap-3 mt-4">
<a
href="https://linkedin.com/company/kobil"
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg border border-white/[0.06] text-slate-500 hover:text-accent hover:border-accent/20 transition-all duration-300"
aria-label="LinkedIn"
>
<Linkedin size={16} />
</a>
<a
href="https://x.com/kobil"
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg border border-white/[0.06] text-slate-500 hover:text-accent hover:border-accent/20 transition-all duration-300"
aria-label="X (Twitter)"
>
<Twitter size={16} />
</a>
</div>
</div>
{/* Link columns */}
{footerLinks.map((column) => (
<div key={column.title}>
<h3 className="text-xs font-semibold text-slate-300 uppercase tracking-widest mb-5">
{column.title}
</h3>
<ul className="space-y-3">
{column.links.map((link) => (
<li key={link.label}>
<Link
href={link.href}
className="text-sm text-slate-500 hover:text-slate-200 transition-colors duration-300"
>
{link.label}
</Link>
</li>
))}
</ul>
</div>
))}
</div>
<div className="mt-12 pt-8 border-t border-white/[0.04] flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-xs text-slate-600">
&copy; {new Date().getFullYear()} KOBIL GmbH. All rights reserved.
</p>
<div className="flex gap-6 text-xs text-slate-600">
<span className="hover:text-slate-400 cursor-pointer transition-colors">
Privacy Policy
</span>
<span className="hover:text-slate-400 cursor-pointer transition-colors">
Terms of Service
</span>
<span className="hover:text-slate-400 cursor-pointer transition-colors">
Imprint
</span>
</div>
</div>
</div>
</footer>
);
}