67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import {motion} from 'framer-motion';
|
||
|
||
export default function DualCTA() {
|
||
return (
|
||
<section className="bg-gray-50 py-24 px-6 md:px-16 lg:px-36">
|
||
<motion.div
|
||
initial={{opacity: 0, y: 30}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
transition={{duration: 0.8, ease: 'easeOut'}}
|
||
viewport={{once: true, amount: 0.3}}
|
||
className="grid md:grid-cols-2 gap-8"
|
||
>
|
||
<CTABox
|
||
title="Fündig geworden?"
|
||
text="Zögern Sie nicht, uns zu kontaktieren – wir helfen Ihnen gerne weiter."
|
||
href="/kontakt"
|
||
linkText="Zum Kontakt"
|
||
/>
|
||
<CTABox
|
||
title="Mehr über uns erfahren?"
|
||
text="Wir stehen für nahe und zuverlässige Betreuung. Erfahren Sie mehr über unsere Werte."
|
||
href="/ueber-uns"
|
||
linkText="Über uns"
|
||
/>
|
||
</motion.div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CTABox({
|
||
title,
|
||
text,
|
||
href,
|
||
linkText,
|
||
}: Readonly<{
|
||
title: string;
|
||
text: string;
|
||
href: string;
|
||
linkText: string;
|
||
}>) {
|
||
return (
|
||
<motion.div
|
||
whileHover={{scale: 1.01}}
|
||
className="flex flex-col justify-between h-full border border-gray-200 px-8 py-10 rounded-2xl bg-white text-gray-800 shadow-sm transition-shadow hover:shadow-md"
|
||
>
|
||
<div className="space-y-3 mb-6">
|
||
<h3 className="text-xl md:text-2xl font-bold tracking-tight">{title}</h3>
|
||
<p className="text-base md:text-lg leading-relaxed text-gray-700">{text}</p>
|
||
</div>
|
||
<div className="w-full flex justify-end">
|
||
<Link
|
||
href={href}
|
||
className="group inline-flex items-center font-semibold text-base md:text-lg text-blue-700 hover:text-blue-900 transition-colors"
|
||
>
|
||
<span className="group-hover:underline">{linkText}</span>
|
||
<span className="ml-2 transform transition-transform duration-200 group-hover:translate-x-1">
|
||
→
|
||
</span>
|
||
</Link>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|