H

2026-01-30 00:25:07 +01:00
1 parent 03cd75576c
commit 593df01f0b
@@ -0,0 +1,105 @@
+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;