Merge branch 'dev' into 'production'

Merge branch 'Homepage Refactoring - Pt .3' into 'production'

See merge request rheinsw/website!30

components/Home/Sections/ContactCTA.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import Link from 'next/link';
+import {motion} from 'framer-motion';
+import {FiArrowRight} from 'react-icons/fi';
+import {useThemeColors} from '@/utils/useThemeColors';
+
+const ContactCTA = () => {
+    const colors = useThemeColors();
+
+    return (
+        <section
+            className="relative w-full py-24 overflow-hidden transition-colors duration-700 ease-in-out"
+            style={{backgroundColor: colors.primaryBg, color: colors.primaryText}}
+        >
+            <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 transition-colors duration-700 ease-in-out"
+                >
+                    Interesse geweckt?
+                </motion.h2>
+
+                {/* Description */}
+                <motion.p
+                    className="mt-4 text-sm md:text-base max-w-xl mx-auto transition-colors duration-700 ease-in-out"
+                    style={{color: colors.secondaryText}}
+                    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>
+    );
+};
+
+export default ContactCTA;