Refactor website to use shadcn components

frontend/components/CTA/DualCTA.tsx

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