From ecef42837bbf206a2a6481a73ae42dd68d0d87cd Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Sun, 20 Apr 2025 23:04:33 +0000
Subject: [PATCH] Merge branch 'legal-sites' into 'dev'

Legal sites

See merge request rheinsw/website!32
---
 app/legal/imprint/page.tsx               |   2 +-
 app/legal/privacy/page.tsx               |   2 +-
 components/Footer/Footer.tsx             |  42 +++----
 components/Legal/Imprint/ImprintComp.tsx | 131 ++++++++++++++++++++
 components/Legal/ImprintComp.tsx         |  99 ----------------
 components/Legal/Privacy/PrivacyComp.tsx | 145 +++++++++++++++++++++++
 components/Legal/PrivacyComp.tsx         |  99 ----------------
 7 files changed, 299 insertions(+), 221 deletions(-)
 create mode 100644 components/Legal/Imprint/ImprintComp.tsx
 delete mode 100644 components/Legal/ImprintComp.tsx
 create mode 100644 components/Legal/Privacy/PrivacyComp.tsx
 delete mode 100644 components/Legal/PrivacyComp.tsx

diff --git a/app/legal/imprint/page.tsx b/app/legal/imprint/page.tsx
index 792e437..47a23f8 100644
--- a/app/legal/imprint/page.tsx
+++ b/app/legal/imprint/page.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ImprintComp from "@/components/Legal/ImprintComp";
+import ImprintComp from "@/components/Legal/Imprint/ImprintComp";
 
 const ImprintPage = () => {
     return (
diff --git a/app/legal/privacy/page.tsx b/app/legal/privacy/page.tsx
index 79a30b3..28d36a7 100644
--- a/app/legal/privacy/page.tsx
+++ b/app/legal/privacy/page.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import PrivacyComp from "@/components/Legal/PrivacyComp";
+import PrivacyComp from "@/components/Legal/Privacy/PrivacyComp";
 
 const PrivacyPage = () => {
     return (
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index 3bcb1df..dc83040 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -36,13 +36,13 @@ const Footer = () => {
                                     </p>
                                 </Link>
                             </li>
-                            <li>
-                                <Link href="/contact">
-                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
-                                        Zahlung und Versand
-                                    </p>
-                                </Link>
-                            </li>
+                            {/*<li>*/}
+                            {/*    <Link href="/contact">*/}
+                            {/*        <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">*/}
+                            {/*            Zahlung und Versand*/}
+                            {/*        </p>*/}
+                            {/*    </Link>*/}
+                            {/*</li>*/}
                         </ul>
                     </div>
 
@@ -50,20 +50,20 @@ const Footer = () => {
                     <div>
                         <h3 className="text-lg font-semibold text-white">Rechtliches</h3>
                         <ul className="mt-4 space-y-4 text-sm font-semibold text-gray-400">
-                            <li>
-                                <Link href="/legal/terms-of-use">
-                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
-                                        AGB
-                                    </p>
-                                </Link>
-                            </li>
-                            <li>
-                                <Link href="/legal/revocation">
-                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
-                                        Widerruf
-                                    </p>
-                                </Link>
-                            </li>
+                            {/*<li>*/}
+                            {/*    <Link href="/legal/terms-of-use">*/}
+                            {/*        <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">*/}
+                            {/*            AGB*/}
+                            {/*        </p>*/}
+                            {/*    </Link>*/}
+                            {/*</li>*/}
+                            {/*<li>*/}
+                            {/*    <Link href="/legal/revocation">*/}
+                            {/*        <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">*/}
+                            {/*            Widerruf*/}
+                            {/*        </p>*/}
+                            {/*    </Link>*/}
+                            {/*</li>*/}
                             <li>
                                 <Link href="/legal/privacy">
                                     <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
diff --git a/components/Legal/Imprint/ImprintComp.tsx b/components/Legal/Imprint/ImprintComp.tsx
new file mode 100644
index 0000000..b973cc3
--- /dev/null
+++ b/components/Legal/Imprint/ImprintComp.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import React, {useContext} from "react";
+import {ThemeContext} from "@/components/provider/ThemeProvider";
+import {themeColors} from "@/components/Helper/ThemeColors";
+import {motion} from "framer-motion";
+
+const fadeInUp = {
+    hidden: {opacity: 0, y: 30},
+    visible: (i: number) => ({
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.6,
+            delay: i * 0.2,
+            ease: "easeOut",
+        },
+    }),
+};
+
+const ImprintComp = () => {
+    const {theme} = useContext(ThemeContext);
+    const colors = themeColors[theme];
+
+    return (
+        <div
+            className="overflow-hidden transition-colors duration-500"
+            style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
+        >
+            {/* Imprint Content */}
+            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12 space-y-10 text-base leading-relaxed">
+                {[
+                    {
+                        title: "Impressum",
+                        content: (
+                            <>
+                                Thatsaphorn Atchariyaphap<br/>
+                                Rhein-Software (Einzelunternehmer)<br/>
+                                Mühlenstrasse 13<br/>
+                                79664 Wehr
+                            </>
+                        ),
+                    },
+                    {
+                        title: "Kontakt",
+                        content: (
+                            <>
+                                Telefon: +49 (0) 151 24003632<br/>
+                                E-Mail:{" "}
+                                <a
+                                    href="mailto:contact@rhein-software.dev"
+                                    className="underline text-blue-500"
+                                >
+                                    contact@rhein-software.dev
+                                </a>
+                            </>
+                        ),
+                    },
+                    {
+                        title: "EU-Streitschlichtung",
+                        content: (
+                            <>
+                                Die Europäische Kommission stellt eine Plattform zur
+                                Online-Streitbeilegung (OS) bereit:{" "}
+                                <a
+                                    href="https://ec.europa.eu/consumers/odr/"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="underline text-blue-500"
+                                >
+                                    https://ec.europa.eu/consumers/odr/
+                                </a>
+                                .<br/>
+                                Unsere E-Mail-Adresse finden Sie oben im Impressum.
+                            </>
+                        ),
+                    },
+                    {
+                        title:
+                            "Verbraucherstreitbeilegung / Universalschlichtungsstelle",
+                        content: (
+                            <>
+                                Wir sind nicht bereit oder verpflichtet, an
+                                Streitbeilegungsverfahren vor einer
+                                Verbraucherschlichtungsstelle teilzunehmen.
+                            </>
+                        ),
+                    },
+                ].map((section, i) => (
+                    <motion.div
+                        key={section.title}
+                        custom={i}
+                        initial="hidden"
+                        animate="visible"
+                        variants={fadeInUp}
+                    >
+                        <h2 className="text-2xl font-bold">{section.title}</h2>
+                        <motion.div
+                            className="w-6 h-[2px] mt-2 mb-6 bg-amber-500"
+                            initial={{opacity: 0, x: -20}}
+                            whileInView={{opacity: 1, x: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.4, delay: 0.1}}
+                        />
+                        <p>{section.content}</p>
+                    </motion.div>
+                ))}
+
+                <motion.p
+                    className="text-sm text-gray-500"
+                    custom={4}
+                    initial="hidden"
+                    animate="visible"
+                    variants={fadeInUp}
+                >
+                    Quelle:{" "}
+                    <a
+                        href="https://www.e-recht24.de"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline"
+                    >
+                        www.e-recht24.de
+                    </a>
+                </motion.p>
+            </div>
+        </div>
+    );
+};
+
+export default ImprintComp;
diff --git a/components/Legal/ImprintComp.tsx b/components/Legal/ImprintComp.tsx
deleted file mode 100644
index c23af79..0000000
--- a/components/Legal/ImprintComp.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import SmallHero from "@/components/Helper/SmallHero";
-import React, {useContext, useEffect} from "react";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
-import AOS from "aos";
-
-const ImprintComp = () => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
-
-    useEffect(() => {
-        AOS.init({
-            duration: 1000,
-            easing: "ease",
-            once: true,
-            anchorPlacement: "top-bottom",
-        });
-    }, []);
-
-    return (
-        <div className="overflow-hidden transition-colors duration-500"
-             style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}>
-
-            {/* Hero Section */}
-            <div className="mt-[10vh]">
-                <SmallHero
-                    title="Impressum"
-                    subtitle=""
-                    backgroundImage="/images/contact.png"
-                />
-            </div>
-
-
-            {/* Contact Form */}
-            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12">
-                <h2 className="text-2xl md:text-3xl font-bold text-center"
-                    data-aos="fade-up"
-                    data-aos-delay="400"
-                >
-                    Schreib uns eine Nachricht
-                </h2>
-                <p data-aos="fade-up" data-aos-delay="600"
-                   className="text-center mt-3 text-[var(--secondary-text)]">
-                    Wir melden uns schnellstmöglich bei dir!
-                </p>
-
-                <form className="mt-8 max-w-2xl mx-auto space-y-6">
-                    {/* Name & Email */}
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        {["Dein Name", "Deine E-Mail"].map((label, index) => (
-                            <div key={index} data-aos="fade-up" data-aos-delay={index * 100}>
-                                <label className="block font-semibold">{label}</label>
-                                <input
-                                    type={index === 0 ? "text" : "email"}
-                                    placeholder={index === 0 ? "Max Mustermann" : "max@example.com"}
-                                    className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-                                    style={{
-                                        backgroundColor: colors.inputFieldBg,
-                                        border: `1px solid ${colors.inputBorder}`,
-                                        color: colors.primaryText
-                                    }}
-                                />
-                            </div>
-                        ))}
-                    </div>
-
-                    {/* Message */}
-                    <div data-aos="fade-up" data-aos-delay="300">
-                        <label className="block font-semibold">Deine Nachricht</label>
-                        <textarea
-                            rows={4}
-                            placeholder="Schreibe deine Nachricht..."
-                            className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-                            style={{
-                                backgroundColor: colors.inputFieldBg,
-                                border: `1px solid ${colors.inputBorder}`,
-                                color: colors.primaryText
-                            }}
-                        />
-                    </div>
-
-                    {/* Submit Button */}
-                    <div className="text-center" data-aos="fade-up" data-aos-delay="400">
-                        <button
-                            type="submit"
-                            className="px-6 py-3 bg-blue-600 text-white text-lg font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
-                        >
-                            📩 Nachricht senden
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-};
-
-export default ImprintComp;
\ No newline at end of file
diff --git a/components/Legal/Privacy/PrivacyComp.tsx b/components/Legal/Privacy/PrivacyComp.tsx
new file mode 100644
index 0000000..3b48f2b
--- /dev/null
+++ b/components/Legal/Privacy/PrivacyComp.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import React, {useContext} from "react";
+import {ThemeContext} from "@/components/provider/ThemeProvider";
+import {themeColors} from "@/components/Helper/ThemeColors";
+import {motion} from "framer-motion";
+
+const fadeInUp = {
+    hidden: {opacity: 0, y: 30},
+    visible: (i: number) => ({
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.6,
+            delay: i * 0.2,
+            ease: "easeOut",
+        },
+    }),
+};
+
+const PrivacyComp = () => {
+    const {theme} = useContext(ThemeContext);
+    const colors = themeColors[theme];
+
+    const sections = [
+        {
+            title: "1. Datenschutz auf einen Blick",
+            content: (
+                <>
+                    <p>
+                        Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen
+                        Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit
+                        denen Sie persönlich identifiziert werden können.
+                    </p>
+                    <p>
+                        Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten
+                        finden Sie im Abschnitt „Hinweis zur Verantwortlichen Stelle“.
+                    </p>
+                </>
+            ),
+        },
+        {
+            title: "2. Allgemeine Hinweise und Pflichtinformationen",
+            content: (
+                <>
+                    <p>
+                        Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen
+                        Datenschutzvorschriften sowie dieser Datenschutzerklärung. Wir weisen darauf hin, dass die
+                        Datenübertragung im Internet Sicherheitslücken aufweisen kann.
+                    </p>
+                    <p>
+                        Verantwortlich für die Datenverarbeitung:
+                        <br/>
+                        Rhein-Software Development
+                        <br/>
+                        Mühlenstrasse 13
+                        <br/>
+                        79664 Wehr
+                        <br/><br/>
+                        Telefon: +49 (0) 151 24003632
+                        <br/>
+                        E-Mail:{" "}
+                        <a
+                            href="mailto:contact@rhein-software.dev"
+                            className="underline text-blue-500"
+                        >
+                            contact@rhein-software.dev
+                        </a>
+                    </p>
+                </>
+            ),
+        },
+        {
+            title: "3. Ihre Rechte",
+            content: (
+                <p>
+                    Sie haben das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung,
+                    Datenübertragbarkeit sowie auf Widerspruch gegen die Verarbeitung Ihrer Daten. Zudem haben Sie
+                    ein Beschwerderecht bei der zuständigen Aufsichtsbehörde.
+                </p>
+            ),
+        },
+        {
+            title: "4. Analyse-Tools und Cookies",
+            content: (
+                <p>
+                    Beim Besuch dieser Website kann Ihr Surfverhalten statistisch ausgewertet werden. Das geschieht
+                    vor allem mit sogenannten Analyseprogrammen und Cookies. Detaillierte Informationen hierzu
+                    entnehmen Sie bitte unserer vollständigen Datenschutzerklärung.
+                </p>
+            ),
+        },
+        {
+            title: "5. Sicherheit",
+            content: (
+                <p>
+                    Diese Seite nutzt eine SSL- bzw. TLS-Verschlüsselung. Eine verschlüsselte Verbindung erkennen
+                    Sie an der Adresszeile des Browsers („https://“) und dem Schloss-Symbol.
+                </p>
+            ),
+        },
+        {
+            title: "Quelle",
+            content: (
+                <p className="text-sm text-gray-500">
+                    Quelle:{" "}
+                    <a
+                        href="https://www.e-recht24.de"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline"
+                    >
+                        www.e-recht24.de
+                    </a>
+                </p>
+            ),
+        },
+    ];
+
+    return (
+        <div
+            className="overflow-hidden transition-colors duration-500"
+            style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
+        >
+            {/* Privacy Content */}
+            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12 space-y-10 text-base leading-relaxed">
+                {sections.map((section, i) => (
+                    <motion.div
+                        key={section.title}
+                        custom={i}
+                        initial="hidden"
+                        whileInView="visible"
+                        viewport={{once: true, amount: 0.2}}
+                        variants={fadeInUp}
+                    >
+                        <h2 className="text-2xl font-bold mb-4">{section.title}</h2>
+                        <div className="space-y-4">{section.content}</div>
+                    </motion.div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default PrivacyComp;
diff --git a/components/Legal/PrivacyComp.tsx b/components/Legal/PrivacyComp.tsx
deleted file mode 100644
index 313dd14..0000000
--- a/components/Legal/PrivacyComp.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import SmallHero from "@/components/Helper/SmallHero";
-import React, {useContext, useEffect} from "react";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
-import AOS from "aos";
-
-const PrivacyComp = () => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
-
-    useEffect(() => {
-        AOS.init({
-            duration: 1000,
-            easing: "ease",
-            once: true,
-            anchorPlacement: "top-bottom",
-        });
-    }, []);
-
-    return (
-        <div className="overflow-hidden transition-colors duration-500"
-             style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}>
-
-            {/* Hero Section */}
-            <div className="mt-[10vh]">
-                <SmallHero
-                    title="Datenschutz"
-                    subtitle=""
-                    backgroundImage="/images/contact.png"
-                />
-            </div>
-
-
-            {/* Contact Form */}
-            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12">
-                <h2 className="text-2xl md:text-3xl font-bold text-center"
-                    data-aos="fade-up"
-                    data-aos-delay="400"
-                >
-                    Schreib uns eine Nachricht
-                </h2>
-                <p data-aos="fade-up" data-aos-delay="600"
-                   className="text-center mt-3 text-[var(--secondary-text)]">
-                    Wir melden uns schnellstmöglich bei dir!
-                </p>
-
-                <form className="mt-8 max-w-2xl mx-auto space-y-6">
-                    {/* Name & Email */}
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        {["Dein Name", "Deine E-Mail"].map((label, index) => (
-                            <div key={index} data-aos="fade-up" data-aos-delay={index * 100}>
-                                <label className="block font-semibold">{label}</label>
-                                <input
-                                    type={index === 0 ? "text" : "email"}
-                                    placeholder={index === 0 ? "Max Mustermann" : "max@example.com"}
-                                    className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-                                    style={{
-                                        backgroundColor: colors.inputFieldBg,
-                                        border: `1px solid ${colors.inputBorder}`,
-                                        color: colors.primaryText
-                                    }}
-                                />
-                            </div>
-                        ))}
-                    </div>
-
-                    {/* Message */}
-                    <div data-aos="fade-up" data-aos-delay="300">
-                        <label className="block font-semibold">Deine Nachricht</label>
-                        <textarea
-                            rows={4}
-                            placeholder="Schreibe deine Nachricht..."
-                            className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-                            style={{
-                                backgroundColor: colors.inputFieldBg,
-                                border: `1px solid ${colors.inputBorder}`,
-                                color: colors.primaryText
-                            }}
-                        />
-                    </div>
-
-                    {/* Submit Button */}
-                    <div className="text-center" data-aos="fade-up" data-aos-delay="400">
-                        <button
-                            type="submit"
-                            className="px-6 py-3 bg-blue-600 text-white text-lg font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
-                        >
-                            📩 Nachricht senden
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-};
-
-export default PrivacyComp;
\ No newline at end of file