Introduce DualCTA component with animations and responsive design

lawfirm-demos/demo-1/components/DualCTA.tsx

@@ -0,0 +1,66 @@
+'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>
+    );
+}