58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { motion } from 'framer-motion';
|
|
import { FiArrowRight } from 'react-icons/fi';
|
|
|
|
const ContactCTA = () => {
|
|
return (
|
|
<section
|
|
className="relative w-full py-24 transition-theme overflow-hidden"
|
|
style={{
|
|
background: 'linear-gradient(135deg, var(--secondary-bg), var(--primary-bg))',
|
|
}}
|
|
>
|
|
<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 }}
|
|
>
|
|
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>
|
|
);
|
|
};
|
|
|
|
export default ContactCTA;
|