63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
'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;
|