From 2a77caf28a8428dca87ec5225ea79bc62b4f6232 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 30 Jun 2026 21:19:22 +0000
Subject: [PATCH] feat(Footer): add footer with 3px divider, logo, social
 handle, and legal links

Dark bg (#111). Top divider is a 3px div in #30302c (not a CSS border).
Three justify-between columns: Lora SemiBold logo with gold period (#fdb705),
Lora Regular @handle centered (added weight 400 to Lora config), Inter 14px
legal links with gap-6. Footer sits outside <main> so mt-auto pushes it down.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/Footer.tsx | 59 +++++++++++++++++++++++++++++++++++++++
 app/layout.tsx            |  2 +-
 app/page.tsx              | 20 +++++++------
 3 files changed, 72 insertions(+), 9 deletions(-)
 create mode 100644 app/components/Footer.tsx

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
new file mode 100644
index 0000000..e9bf72f
--- /dev/null
+++ b/app/components/Footer.tsx
@@ -0,0 +1,59 @@
+import Link from "next/link";
+
+const links = [
+  { label: "Impressum", href: "/impressum" },
+  { label: "Datenschutz", href: "/datenschutz" },
+  { label: "AGB", href: "/agb" },
+  { label: "Widerruf", href: "/widerruf" },
+];
+
+export function Footer() {
+  return (
+    <footer className="bg-[#111] flex flex-col items-center justify-end w-full mt-auto">
+
+      {/* 3px top divider — #30302c, not a border */}
+      <div className="bg-[#30302c] h-[3px] w-full shrink-0" />
+
+      {/* Footer inner — max-width 1280px, centered */}
+      <div className="flex flex-col items-start w-full max-w-[1280px] py-4">
+
+        {/* Three columns: logo | @handle | links */}
+        <div className="flex items-center justify-between px-16 w-full">
+
+          {/* Logo: "einfach produktiv" white + "." gold */}
+          <div className="flex items-center p-2 shrink-0">
+            <span
+              className="font-semibold text-white text-[1.25rem] leading-normal whitespace-nowrap"
+              style={{ fontFamily: "var(--font-lora)" }}
+            >
+              einfach produktiv
+              <span style={{ color: "#fdb705" }}>.</span>
+            </span>
+          </div>
+
+          {/* Social handle — Lora Regular (weight 400), 24px */}
+          <p
+            className="font-normal text-white text-[1.5rem] text-center leading-[1.2] whitespace-nowrap shrink-0"
+            style={{ fontFamily: "var(--font-lora)", fontWeight: 400 }}
+          >
+            @einfach.produktiv
+          </p>
+
+          {/* Legal links — Inter Regular 14px, gap 24px */}
+          <div className="flex items-start gap-6 shrink-0">
+            {links.map((link) => (
+              <Link
+                key={link.label}
+                href={link.href}
+                className="font-normal text-white text-[0.875rem] leading-[1.5] whitespace-nowrap hover:text-[#f6a701] transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 69193bb..909846a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -28,7 +28,7 @@ const caveat = Caveat({
 const lora = Lora({
   variable: "--font-lora",
   subsets: ["latin"],
-  weight: ["600"],
+  weight: ["400", "600"],
 });
 
 export const metadata: Metadata = {
diff --git a/app/page.tsx b/app/page.tsx
index ec2b0d6..a1d079b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,16 +4,20 @@ import { Tools } from "./components/Tools";
 import { Blog } from "./components/Blog";
 import { About } from "./components/About";
 import { Newsletter } from "./components/Newsletter";
+import { Footer } from "./components/Footer";
 
 export default function Home() {
   return (
-    <main className="flex flex-col flex-1">
-      <Hero />
-      <Divider />
-      <Tools />
-      <Blog />
-      <About />
-      <Newsletter />
-    </main>
+    <>
+      <main className="flex flex-col flex-1">
+        <Hero />
+        <Divider />
+        <Tools />
+        <Blog />
+        <About />
+        <Newsletter />
+      </main>
+      <Footer />
+    </>
   );
 }