67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import {motion} from 'framer-motion';
|
||
import {ArrowRight} from 'lucide-react';
|
||
|
||
export default function DualCTA() {
|
||
return (
|
||
<section
|
||
className="relative py-24 px-6 md:px-16 lg:px-36 bg-gradient-to-br from-background via-muted to-background">
|
||
<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 max-w-7xl mx-auto"
|
||
>
|
||
<CTABox
|
||
title="Fündig geworden?"
|
||
text="Zögern Sie nicht, uns zu kontaktieren – wir helfen Ihnen gerne weiter."
|
||
href="/contact"
|
||
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="/about"
|
||
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.015}}
|
||
className="flex flex-col justify-between h-full border border-border/50 backdrop-blur-sm bg-background/70 text-foreground px-8 py-10 rounded-2xl shadow-lg transition-all duration-300"
|
||
>
|
||
<div className="space-y-4 mb-6">
|
||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight">{title}</h3>
|
||
<p className="text-base md:text-lg leading-relaxed text-muted-foreground">{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 hover:text-primary/80 transition-colors text-blue-600"
|
||
>
|
||
<span className="group-hover:underline">{linkText}</span>
|
||
<ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"/>
|
||
</Link>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|