Frontend migration

frontend/components/Legal/TermsOfUseComp.tsx

@@ -0,0 +1,99 @@
+"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 TermsOfUseComp = () => {
+    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="AGB"
+                    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 TermsOfUseComp;