Initial Commit

frontend/components/Home/Sections/ContactCTA.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import Link from 'next/link';
+import {motion} from 'framer-motion';
+import {FiArrowRight} from 'react-icons/fi';
+import {useThemeColors} from '@/utils/useThemeColors';
+
+type ContactCTAProps = {
+    title?: string;
+    description?: string;
+    buttonLabel?: string;
+};
+
+const ContactCTA = ({
+                        title = "Interesse geweckt?",
+                        description = "Lass uns über dein Projekt sprechen. Wir freuen uns darauf, deine Ideen in die Realität umzusetzen.",
+                        buttonLabel = "Jetzt Kontakt aufnehmen",
+                    }: ContactCTAProps) => {
+    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">
+                <motion.h2 className="text-3xl md:text-4xl font-bold">
+                    {title}
+                </motion.h2>
+
+                <motion.p
+                    className="mt-4 text-sm md:text-base max-w-xl mx-auto"
+                    style={{color: colors.secondaryText}}
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: 0.2}}
+                >
+                    {description}
+                </motion.p>
+
+                <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"
+                        >
+                            {buttonLabel} <FiArrowRight size={18}/>
+                        </button>
+                    </Link>
+                </motion.div>
+            </div>
+        </section>
+    );
+};
+
+export default ContactCTA;