From 68c074e9da669d4522647e163eac90ca2d0bfd25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=B6rdle=20Bot?= <bot@hoerdle.local>
Date: Mon, 1 Dec 2025 14:53:38 +0100
Subject: [PATCH] feat(about): improve about page with real data and support
 section

- Replace example imprint data with real contact information
- Add support/donation section with SEPA, PayPal, and Steady options
- Add GEMA tariff tracking requirement note to privacy section
- Remove iframe embedding of Google Sheets, keep link only
- Remove empty lines from imprint section
- Add 'curated' to project description (DE/EN)
- Fix XML tag syntax for Google Sheets link
---
 app/[locale]/about/page.tsx | 127 +++++++++++++++++++++++++++++++-----
 messages/de.json            |  18 +++--
 messages/en.json            |  18 +++--
 3 files changed, 138 insertions(+), 25 deletions(-)

diff --git a/app/[locale]/about/page.tsx b/app/[locale]/about/page.tsx
index bc64bb6..a03681e 100644
--- a/app/[locale]/about/page.tsx
+++ b/app/[locale]/about/page.tsx
@@ -36,16 +36,20 @@ export default async function AboutPage({ params }: AboutPageProps) {
         <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
           {t("imprintTitle")}
         </h2>
-        <p style={{ marginBottom: "0.25rem" }}>
+        <p style={{ marginBottom: "0.5rem" }}>
           <strong>{t("imprintOperator")}</strong>
         </p>
-        <p style={{ marginBottom: "0.25rem" }}>Max Mustermann</p>
-        <p style={{ marginBottom: "0.25rem" }}>Musterstraße 1</p>
-        <p style={{ marginBottom: "0.25rem" }}>12345 Musterstadt</p>
-        <p style={{ marginBottom: "0.5rem" }}>{t("imprintCountry")}</p>
-        <p style={{ marginBottom: "0.25rem" }}>
+        <p style={{ marginBottom: 0, lineHeight: "1.5" }}>
+          Markus Busche
+          <br />
+          Knorrstr. 16
+          <br />
+          24106 Kiel
+          <br />
+          {t("imprintCountry")}
+          <br />
           {t("imprintEmailLabel")}{" "}
-          <a href="mailto:kontakt@example.com">kontakt@example.com</a>
+          <a href="mailto:markus@hoerdle.de">markus@hoerdle.de</a>
         </p>
         <p
           style={{ marginTop: "0.5rem", fontSize: "0.9rem", color: "#6b7280" }}
@@ -94,20 +98,106 @@ export default async function AboutPage({ params }: AboutPageProps) {
         >
           {t("costsSheetPrivacyNote")}
         </p>
+      </section>
+
+      <section style={{ marginBottom: "2rem" }}>
+        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
+          {t("supportTitle")}
+        </h2>
+        <p style={{ marginBottom: "1rem" }}>{t("supportIntro")}</p>
         <div
           style={{
-            border: "1px solid #e5e7eb",
-            borderRadius: "0.5rem",
-            overflow: "hidden",
-            minHeight: "300px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            marginBottom: "1rem",
           }}
         >
-          <iframe
-            src={sheetUrl}
-            title="Hördle Kostenübersicht"
-            style={{ width: "100%", height: "400px", border: "0" }}
-            loading="lazy"
-          />
+          <div
+            style={{
+              padding: "1rem",
+              border: "1px solid #e5e7eb",
+              borderRadius: "0.5rem",
+              backgroundColor: "#f9fafb",
+            }}
+          >
+            <h3
+              style={{
+                fontSize: "1.125rem",
+                fontWeight: "600",
+                marginBottom: "0.5rem",
+              }}
+            >
+              {t("supportSepaTitle")}
+            </h3>
+            <p style={{ marginBottom: "0.25rem" }}>
+              <strong>{t("supportSepaName")}</strong>
+            </p>
+            <p style={{ marginBottom: 0, fontFamily: "monospace" }}>
+              {t("supportSepaIban")}
+            </p>
+          </div>
+
+          <div
+            style={{
+              padding: "1rem",
+              border: "1px solid #e5e7eb",
+              borderRadius: "0.5rem",
+              backgroundColor: "#f9fafb",
+            }}
+          >
+            <h3
+              style={{
+                fontSize: "1.125rem",
+                fontWeight: "600",
+                marginBottom: "0.5rem",
+              }}
+            >
+              {t("supportPaypalTitle")}
+            </h3>
+            <p style={{ marginBottom: 0 }}>
+              <a
+                href="https://paypal.me/MBusche"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ textDecoration: "underline" }}
+              >
+                {t("supportPaypalLink")}
+              </a>
+            </p>
+          </div>
+
+          <div
+            style={{
+              padding: "1rem",
+              border: "1px solid #e5e7eb",
+              borderRadius: "0.5rem",
+              backgroundColor: "#f9fafb",
+            }}
+          >
+            <h3
+              style={{
+                fontSize: "1.125rem",
+                fontWeight: "600",
+                marginBottom: "0.5rem",
+              }}
+            >
+              {t("supportSteadyTitle")}
+            </h3>
+            <p style={{ marginBottom: "0.5rem" }}>
+              {t("supportSteadyDescription")}
+            </p>
+            <p style={{ marginBottom: 0 }}>
+              <a
+                href="https://steady.page/de/hoerdle"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ textDecoration: "underline" }}
+              >
+                https://steady.page/de/hoerdle
+              </a>
+            </p>
+          </div>
         </div>
       </section>
 
@@ -128,6 +218,9 @@ export default async function AboutPage({ params }: AboutPageProps) {
         <p style={{ marginBottom: "0.5rem" }}>
           {t("privacyPlausibleSelfHosted")}
         </p>
+        <p style={{ marginBottom: "0.5rem" }}>
+          {t("privacyPlausibleGemaTariff")}
+        </p>
         <ul
           style={{
             marginLeft: "1.25rem",
diff --git a/messages/de.json b/messages/de.json
index c90f909..458c51b 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -156,25 +156,35 @@
     "title": "Über Hördle & Impressum",
     "intro": "Hördle ist ein nicht-kommerzielles, privat betriebenes Hobbyprojekt. Es gibt keine Werbeanzeigen, keine gesponserten Inhalte und keine versteckten Abo-Modelle.",
     "projectTitle": "Über dieses Projekt",
-    "projectPrivateNote": "Hördle wird privat in der Freizeit entwickelt, betrieben und finanziert. Es besteht kein Anspruch auf permanente Verfügbarkeit oder Vollständigkeit.",
+    "projectPrivateNote": "Hördle wird privat in der Freizeit entwickelt, betrieben, kuratiert und finanziert. Es besteht kein Anspruch auf permanente Verfügbarkeit oder Vollständigkeit.",
     "projectIdea": "Die Idee hinter Hördle ist, Musik spielerisch neu zu entdecken und Lieblingssongs wiederzuentdecken – inspiriert von Wordle, aber für Musikfans.",
-    "imprintTitle": "Impressum (Beispieldaten)",
+    "imprintTitle": "Impressum",
     "imprintOperator": "Verantwortlich für den Inhalt dieser Seite (Anbieter nach § 5 TMG):",
     "imprintCountry": "Deutschland",
     "imprintEmailLabel": "E-Mail:",
-    "imprintDisclaimer": "Hinweis: Diese Angaben sind Beispieldaten und stellen keine rechtsverbindliche oder vollständige Rechtsberatung dar. Für eine rechtskonforme Fassung solltest du rechtlichen Rat einholen.",
+    "imprintDisclaimer": "Hinweis: Diese Angaben entsprechen dem aktuellen Stand. Für rechtliche Fragen solltest du eine Fachperson konsultieren.",
     "costsTitle": "Laufende Kosten des Projekts",
     "costsIntro": "Auch wenn Hördle ein privates Projekt ist, entstehen für den Betrieb laufende Kosten, zum Beispiel:",
     "costsDomain": "Domains (z. B. hördle.de / hoerdle.de)",
     "costsServer": "Server / vServer für App und Tracking",
     "costsEmail": "E-Mail-Hosting",
     "costsLicenses": "ggf. Gebühren für Urheberrechte oder andere Lizenzen",
-    "costsSheetLinkText": "Eine detaillierte, laufend gepflegte Übersicht über die aktuellen Kosten findest du in dieser {link}Google-Tabelle{linkEnd}.",
+    "costsSheetLinkText": "Eine detaillierte, laufend gepflegte Übersicht über die aktuellen Kosten findest du in dieser <link>Google-Tabelle</link>.",
     "costsSheetPrivacyNote": "Beim Aufruf oder Einbetten der Google-Tabelle können Daten (z. B. deine IP-Adresse) an Google übermittelt werden. Wenn du das nicht möchtest, öffne die Tabelle nicht.",
+    "supportTitle": "Hördle unterstützen",
+    "supportIntro": "Hördle ist ein nicht-kommerzielles Projekt, das von laufenden Kosten finanziert werden muss. Wenn du das Projekt finanziell unterstützen möchtest, gibt es folgende Möglichkeiten:",
+    "supportSepaTitle": "SEPA Banküberweisung (bevorzugt)",
+    "supportSepaName": "Markus Busche",
+    "supportSepaIban": "IBAN: DE28500310001071584000",
+    "supportPaypalTitle": "PayPal Spende",
+    "supportPaypalLink": "paypal.me/MBusche",
+    "supportSteadyTitle": "Steady",
+    "supportSteadyDescription": "Regelmäßige Unterstützung über Steady",
     "privacyTitle": "Datenschutz",
     "privacyIntro": "Der Schutz deiner Privatsphäre ist wichtig. Dieses Projekt versucht, so datensparsam wie möglich zu arbeiten.",
     "privacyPlausibleTitle": "Selbst gehostetes Plausible Analytics",
     "privacyPlausibleSelfHosted": "Für anonyme Nutzungsstatistiken wird Plausible Analytics auf einem selbst gehosteten Server verwendet. Es werden keine personalisierten Profile erstellt.",
+    "privacyPlausibleGemaTariff": "Das Tracking ist erforderlich, um den passenden GEMA Tarif zu bestimmen.",
     "privacyPlausibleNoCookies": "Es werden keine Cookies für das Tracking gesetzt.",
     "privacyPlausibleNoTrackingAcrossSites": "Es findet kein Tracking über mehrere Webseiten oder Geräte hinweg statt.",
     "privacyPlausibleAggregated": "Auswertungen erfolgen ausschließlich in aggregierter Form (z. B. Seitenaufrufe, genutzte Browser).",
diff --git a/messages/en.json b/messages/en.json
index 464b19e..66477db 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -156,25 +156,35 @@
     "title": "About Hördle & Imprint",
     "intro": "Hördle is a non-commercial, privately run hobby project. There are no ads, no sponsored content and no hidden subscription models.",
     "projectTitle": "About this project",
-    "projectPrivateNote": "Hördle is developed, operated and financed privately in the creator's spare time. There is no guarantee for permanent availability or completeness.",
+    "projectPrivateNote": "Hördle is developed, operated, curated and financed privately in the creator's spare time. There is no guarantee for permanent availability or completeness.",
     "projectIdea": "The idea behind Hördle is to (re)discover music in a playful way – inspired by Wordle, but for music lovers.",
-    "imprintTitle": "Imprint (example data)",
+    "imprintTitle": "Imprint",
     "imprintOperator": "Responsible for the content of this site (provider under German law):",
     "imprintCountry": "Germany",
     "imprintEmailLabel": "Email:",
-    "imprintDisclaimer": "Note: This information is example data only and does not constitute legal advice. For a legally compliant imprint you should consult a legal professional.",
+    "imprintDisclaimer": "Note: This information is current as of the date indicated. For legal questions you should consult a legal professional.",
     "costsTitle": "Ongoing costs of the project",
     "costsIntro": "Even though Hördle is a private project, there are ongoing costs for running it, for example:",
     "costsDomain": "Domains (e.g. hördle.de / hoerdle.de)",
     "costsServer": "Servers / vServers for the app and tracking",
     "costsEmail": "Email hosting",
     "costsLicenses": "Possible fees for copyrights or other licenses",
-    "costsSheetLinkText": "You can find a detailed, continuously updated overview of the current costs in this {link}Google Sheet{linkEnd}.",
+    "costsSheetLinkText": "You can find a detailed, continuously updated overview of the current costs in this <link>Google Sheet</link>.",
     "costsSheetPrivacyNote": "When accessing or embedding the Google Sheet, data (e.g. your IP address) may be transmitted to Google. If you don't want that, please do not open the sheet.",
+    "supportTitle": "Support Hördle",
+    "supportIntro": "Hördle is a non-commercial project that needs to be financed by ongoing costs. If you would like to support the project financially, here are the options:",
+    "supportSepaTitle": "SEPA Bank Transfer (preferred)",
+    "supportSepaName": "Markus Busche",
+    "supportSepaIban": "IBAN: DE28500310001071584000",
+    "supportPaypalTitle": "PayPal Donation",
+    "supportPaypalLink": "paypal.me/MBusche",
+    "supportSteadyTitle": "Steady",
+    "supportSteadyDescription": "Regular support via Steady",
     "privacyTitle": "Privacy",
     "privacyIntro": "Protecting your privacy matters. This project aims to collect as little data as possible.",
     "privacyPlausibleTitle": "Self-hosted Plausible Analytics",
     "privacyPlausibleSelfHosted": "For anonymous usage statistics, Plausible Analytics is used on a self-hosted server. No personal profiles are created.",
+    "privacyPlausibleGemaTariff": "Tracking is required to determine the appropriate GEMA tariff.",
     "privacyPlausibleNoCookies": "No cookies are set for analytics purposes.",
     "privacyPlausibleNoTrackingAcrossSites": "There is no tracking across multiple websites or devices.",
     "privacyPlausibleAggregated": "Analytics are only performed in aggregated form (e.g. page views, browsers used).",