Merge branch 'homepage-refactoring' into 'dev'

Refactor the whole page.

See merge request rheinsw/website!26

components/Home/Contact/ContactCTA.tsx

@@ -1,46 +1,56 @@
-import Link from "next/link";
-import {useContext} from "react";
-import {ThemeContext} from "@/components/provider/ThemeProvider";
-import {themeColors} from "@/components/Helper/ThemeColors";
+'use client';
+
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { FiArrowRight } from 'react-icons/fi';
 
 const ContactCTA = () => {
-    const {theme} = useContext(ThemeContext);
-    const colors = themeColors[theme];
-
     return (
-        <div className="text-center py-16 transition-theme"
-             style={{backgroundColor: "var(--secondary-bg)"}}
+        <section
+            className="relative w-full py-24 transition-theme overflow-hidden"
+            style={{
+                background: 'linear-gradient(135deg, var(--secondary-bg), var(--primary-bg))',
+            }}
         >
-            <h2 className="text-2xl md:text-3xl font-bold transition-theme"
-                data-aos="fade-up"
-                style={{color: "var(--primary-text)"}}
-            >
-                Interesse geweckt?
-            </h2>
-            <p className="mt-4 text-sm md:text-base transition-theme"
-               data-aos="fade-up"
-               data-aos-delay="200"
-               style={{color: "var(--secondary-text)"}}
-            >
-                Lass uns über dein Projekt sprechen. Wir freuen uns darauf,
-                deine Ideen in die Realität umzusetzen.
-            </p>
-            <Link href="/contact"
-                  data-aos="fade-up"
-                  data-aos-delay="200"
-            >
-                <button className="mt-6 px-6 py-3 text-lg font-semibold rounded-lg shadow-md transition-theme"
-                        data-aos="fade-up"
-                        data-aos-delay="400"
-                        style={{
-                            backgroundColor: colors.primaryBg,
-                            color: colors.secondaryText,
-                        }}
+            <div className="w-full max-w-4xl px-6 md:px-10 mx-auto text-center">
+                {/* Headline */}
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold text-[var(--primary-text)]"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.5 }}
                 >
-                    📩 Jetzt Kontakt aufnehmen
-                </button>
-            </Link>
-        </div>
+                    Interesse geweckt?
+                </motion.h2>
+
+                {/* Description */}
+                <motion.p
+                    className="mt-4 text-sm md:text-base text-[var(--secondary-text)] max-w-xl mx-auto"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.5, delay: 0.2 }}
+                >
+                    Lass uns über dein Projekt sprechen. Wir freuen uns darauf, deine Ideen in die Realität umzusetzen.
+                </motion.p>
+
+                {/* CTA Button */}
+                <motion.div
+                    className="mt-8 flex justify-center"
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.5, delay: 0.3 }}
+                >
+                    <Link href="/contact">
+                        <button className="inline-flex items-center gap-2 px-6 py-3 text-sm md:text-base font-semibold rounded-full bg-blue-700 hover:bg-blue-900 text-white shadow-md transition-all duration-300">
+                            Jetzt Kontakt aufnehmen <FiArrowRight size={18} />
+                        </button>
+                    </Link>
+                </motion.div>
+            </div>
+        </section>
     );
 };