Merge branch 'homepage-refactoring-pt4' into 'dev'

Homepage refactoring pt4

See merge request rheinsw/website!31

components/Home/Sections/ContactCTA.tsx

@@ -5,7 +5,17 @@ import {motion} from 'framer-motion';
 import {FiArrowRight} from 'react-icons/fi';
 import {useThemeColors} from '@/utils/useThemeColors';
 
-const ContactCTA = () => {
+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 (
@@ -14,26 +24,21 @@ const ContactCTA = () => {
             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 className="text-3xl md:text-4xl font-bold">
+                    {title}
                 </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"
+                    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}}
                 >
-                    Lass uns über dein Projekt sprechen. Wir freuen uns darauf, deine Ideen in die Realität umzusetzen.
+                    {description}
                 </motion.p>
 
-                {/* CTA Button */}
                 <motion.div
                     className="mt-8 flex justify-center"
                     initial={{opacity: 0, y: 20}}
@@ -45,7 +50,7 @@ const ContactCTA = () => {
                         <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}/>
+                            {buttonLabel} <FiArrowRight size={18}/>
                         </button>
                     </Link>
                 </motion.div>