From 4f7a39628fed90a307dbcaaf091ed1f0f568002c Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Wed, 22 Jul 2026 08:20:55 +0200
Subject: [PATCH] feat: add imprint and privacy policy pages

---
 src/app/imprint/page.tsx  | 114 ++++++++++++++++++++++++++++++++++++++
 src/app/privacy/page.tsx  |  95 +++++++++++++++++++++++++++++++
 src/components/Footer.tsx |   4 +-
 3 files changed, 211 insertions(+), 2 deletions(-)
 create mode 100644 src/app/imprint/page.tsx
 create mode 100644 src/app/privacy/page.tsx

diff --git a/src/app/imprint/page.tsx b/src/app/imprint/page.tsx
new file mode 100644
index 0000000..b9a852a
--- /dev/null
+++ b/src/app/imprint/page.tsx
@@ -0,0 +1,114 @@
+import Link from "next/link";
+
+export default function ImprintPage() {
+  return (
+    <section className="min-h-screen py-24 px-6 md:px-12 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">
+        Legal Notice<span className="text-blue-500">.</span>
+      </h1>
+      <Link
+        href="/"
+        className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2"
+      >
+        ← Back to Homepage
+      </Link>
+
+      <div className="space-y-8 text-slate-300 leading-relaxed text-sm">
+        {/* Angaben gemäß § 5 DDG & § 18 MStV */}
+        <div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-2">
+          <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+            <span className="text-blue-500 font-mono text-sm">//</span>{" "}
+            Information pursuant to § 5 DDG
+          </h2>
+          <p className="font-semibold text-slate-100">André Kempf</p>
+          <p>Full-Stack Web Developer</p>
+          <p>Großschneidersweg 2a</p>
+          <p>76149 Karlsruhe</p>
+          <p>Germany</p>
+          <p className="text-slate-400 text-xs pt-2 border-t border-slate-800/60 mt-3">
+            Also responsible for content pursuant to § 18 Abs. 2 MStV.
+          </p>
+        </div>
+
+        {/* Contact */}
+        <div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40">
+          <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+            <span className="text-blue-500 font-mono text-sm">//</span> Contact
+          </h2>
+          <p>
+            <strong className="text-slate-200">Email:</strong>{" "}
+            <span className="text-blue-400 hover:underline">
+              dev@andre-kempf.com
+            </span>
+          </p>
+        </div>
+
+        {/* Disclaimer */}
+        <div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-4">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <span className="text-blue-500 font-mono text-sm">//</span>{" "}
+            Disclaimer & Legal Notes
+          </h2>
+
+          <div>
+            <h3 className="font-semibold text-slate-200 mb-1">
+              Liability for Content
+            </h3>
+            <p className="text-slate-400 text-xs leading-relaxed">
+              As a service provider, I am responsible for my own content on
+              these pages according to general laws pursuant to § 7 Abs. 1 DDG.
+              However, according to §§ 8 to 10 DDG, I am not obligated to
+              monitor transmitted or stored third-party information or to
+              investigate circumstances that indicate illegal activity.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="font-semibold text-slate-200 mb-1">
+              Liability for Links
+            </h3>
+            <p className="text-slate-400 text-xs leading-relaxed">
+              My website contains links to external third-party websites over
+              whose content I have no control. Therefore, I cannot accept any
+              liability for these external contents. The respective provider or
+              operator of the pages is always responsible for the content of the
+              linked pages.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="font-semibold text-slate-200 mb-1">Copyright</h3>
+            <p className="text-slate-400 text-xs leading-relaxed">
+              The content and works created on these pages are subject to German
+              copyright law. Duplication, processing, distribution, or any form
+              of commercialization beyond the scope of copyright law require the
+              prior written consent of the author or creator.
+            </p>
+          </div>
+        </div>
+
+        {/* Dispute Resolution */}
+        <div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40">
+          <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+            <span className="text-blue-500 font-mono text-sm">//</span> Dispute
+            Resolution
+          </h2>
+          <p className="text-xs text-slate-400 leading-relaxed">
+            The European Commission provides a platform for online dispute
+            resolution (OS):{" "}
+            <a
+              href="https://ec.europa.eu/consumers/odr/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:underline"
+            >
+              https://ec.europa.eu/consumers/odr/
+            </a>
+            .<br />I am neither willing nor obligated to participate in dispute
+            resolution proceedings before a consumer arbitration board.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
new file mode 100644
index 0000000..ac4b248
--- /dev/null
+++ b/src/app/privacy/page.tsx
@@ -0,0 +1,95 @@
+import Link from "next/link";
+
+export default function PrivacyPage() {
+  return (
+    <section className="min-h-screen py-24 px-6 md:px-12 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">
+        Privacy Policy<span className="text-blue-500">.</span>
+      </h1>
+      <Link
+        href="/"
+        className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2"
+      >
+        ← Back to Homepage
+      </Link>
+
+      <div className="space-y-8 text-slate-300 leading-relaxed text-sm">
+        {/* 1. Overview */}
+        <div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-3">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <span className="text-blue-500 font-mono text-sm">//</span> 1. Data
+            Protection at a Glance
+          </h2>
+          <h3 className="font-semibold text-slate-200">General Information</h3>
+          <p>
+            The following notes provide a simple overview of what happens to
+            your personal data when you visit this website. Personal data is any
+            data that can be used to personally identify you.
+          </p>
+          <h3 className="font-semibold text-slate-200 pt-2">
+            Data Collection on This Website
+          </h3>
+          <p>
+            Data processing on this website is carried out by the website
+            operator. Your data is collected when you provide it to us, or
+            automatically by our IT systems when you visit the site.
+          </p>
+        </div>
+
+        {/* 2. Responsible Party */}
+        <div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-2">
+          <h2 className="text-lg font-semibold text-white mb-2 flex items-center gap-2">
+            <span className="text-blue-500 font-mono text-sm">//</span> 2.
+            Responsible Party (Controller)
+          </h2>
+          <p>
+            The controller responsible for data processing on this website is:
+          </p>
+          <div className="pt-2 text-slate-200">
+            <p className="font-semibold">André Kempf</p>
+            <p>Großschneidersweg 2a</p>
+            <p>76149 Karlsruhe, Germany</p>
+            <p className="mt-2">
+              Email:{" "}
+              <span className="text-blue-400 hover:underline">
+                dev@andre-kempf.com
+              </span>
+            </p>
+          </div>
+        </div>
+
+        {/* 3. Hosting & Log Files */}
+        <div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-3">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <span className="text-blue-500 font-mono text-sm">//</span> 3.
+            Hosting & Server Log Files
+          </h2>
+          <p>
+            This website is hosted externally. The personal data collected on
+            this website is stored on the host&apos;s servers.
+          </p>
+          <p>
+            The provider automatically collects and stores information in
+            so-called server log files, which your browser automatically
+            transmits to us (e.g., browser type, operating system, IP address,
+            time of request).
+          </p>
+        </div>
+
+        {/* 4. Your Rights */}
+        <div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-3">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <span className="text-blue-500 font-mono text-sm">//</span> 4. Your
+            Rights
+          </h2>
+          <p>
+            You have the right at any time to receive information free of charge
+            about the origin, recipient, and purpose of your stored personal
+            data. You also have a right to request the correction or deletion of
+            this data.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 9266814..147fcb4 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -10,14 +10,14 @@ export default function Footer() {
             href="/imprint"
             className="hover:text-slate-300 transition-colors"
           >
-            Impressum
+            Legal Notice
           </Link>
           <span>|</span>
           <Link
             href="/privacy"
             className="hover:text-slate-300 transition-colors"
           >
-            Datenschutz
+            Privacy Policy
           </Link>
         </div>
       </div>