Archived
106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
const Footer = () => {
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
const links = {
|
|
services: [
|
|
{ label: "Strategieberatung", href: "#services" },
|
|
{ label: "UX/UI Design", href: "#services" },
|
|
{ label: "Entwicklung", href: "#services" },
|
|
{ label: "SEO & Support", href: "#services" },
|
|
],
|
|
company: [
|
|
{ label: "Über uns", href: "#about" },
|
|
{ label: "Projekte", href: "#projects" },
|
|
{ label: "Ablauf", href: "#process" },
|
|
{ label: "Kontakt", href: "#contact" },
|
|
],
|
|
legal: [
|
|
{ label: "Impressum", href: "/impressum" },
|
|
{ label: "Datenschutz", href: "/datenschutz" },
|
|
{ label: "AGB", href: "/agb" },
|
|
],
|
|
};
|
|
|
|
return (
|
|
<footer className="bg-secondary/20 border-t border-border relative">
|
|
<div className="container mx-auto px-6 py-16">
|
|
<div className="grid md:grid-cols-4 gap-12 mb-16">
|
|
{/* Logo & Description */}
|
|
<div className="md:col-span-1">
|
|
<span className="text-xl font-display font-medium text-foreground tracking-tight mb-6 block">
|
|
webklar
|
|
</span>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Maßgeschneiderte Weblösungen für Ihr Unternehmen. Sicher, zuverlässig und modern.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Services */}
|
|
<div>
|
|
<h4 className="label-tag mb-6">Leistungen</h4>
|
|
<ul className="space-y-3">
|
|
{links.services.map((link) => (
|
|
<li key={link.label}>
|
|
<a
|
|
href={link.href}
|
|
className="text-muted-foreground hover:text-foreground transition-colors text-sm"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Company */}
|
|
<div>
|
|
<h4 className="label-tag mb-6">Unternehmen</h4>
|
|
<ul className="space-y-3">
|
|
{links.company.map((link) => (
|
|
<li key={link.label}>
|
|
<a
|
|
href={link.href}
|
|
className="text-muted-foreground hover:text-foreground transition-colors text-sm"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Legal */}
|
|
<div>
|
|
<h4 className="label-tag mb-6">Rechtliches</h4>
|
|
<ul className="space-y-3">
|
|
{links.legal.map((link) => (
|
|
<li key={link.label}>
|
|
<a
|
|
href={link.href}
|
|
className="text-muted-foreground hover:text-foreground transition-colors text-sm"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Bar */}
|
|
<div className="divider mb-8" />
|
|
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<p className="text-muted-foreground text-sm">
|
|
© {currentYear} webklar. Alle Rechte vorbehalten.
|
|
</p>
|
|
<div className="text-muted-foreground text-sm">
|
|
Made in Germany
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|