Refactor website to use shadcn components

frontend/app/(root)/sections/WhyUs.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import {CheckCircle} from 'lucide-react';
+import {motion} from 'framer-motion';
+import Link from 'next/link';
+import Image from 'next/image';
+
+const points = [
+    'Fertigstellung in 4–8 Wochen',
+    'Fester Ansprechpartner von Anfang bis Ende',
+    'Struktur & Klarheit',
+    'Starkes Alleinstellungsmerkmal',
+    'Zuverlässiges Team mit Weitblick',
+];
+
+export default function WhyUs() {
+    return (
+        <section id="whyus" className="py-24 px-4 bg-background text-foreground">
+            <div className="max-w-xl mx-auto">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-1 text-center"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Warum wir?
+                </motion.h2>
+
+                <motion.div
+                    className="w-12 h-[2px] mt-2 mb-10 bg-amber-500 mx-auto"
+                    initial={{opacity: 0, x: -20}}
+                    whileInView={{opacity: 1, x: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.1}}
+                />
+
+                <motion.div
+                    className="rounded-2xl p-8 md:p-10 bg-gradient-to-br from-[#1e3a8a] to-[#2563eb] text-white shadow-xl relative overflow-hidden"
+                    initial={{opacity: 0, y: 40}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5}}
+                >
+                    {/* Logo */}
+                    <div className="mb-6">
+                        <Image src="/logo.svg" alt="Rhein Software Logo" width={120} height={32}/>
+                    </div>
+
+                    <ul className="space-y-4 mb-8">
+                        {points.map((point, index) => (
+                            <li key={index} className="flex items-start gap-2">
+                                <CheckCircle className="text-white w-5 h-5 flex-shrink-0 mt-0.5"/>
+                                <span>{point}</span>
+                            </li>
+                        ))}
+                    </ul>
+
+                    <Link
+                        href="/contact"
+                        className="inline-block bg-white text-blue-700 font-semibold px-6 py-3 rounded-full text-center shadow-md hover:bg-slate-100 transition"
+                    >
+                        Kostenlose Beratung anfragen
+                    </Link>
+                </motion.div>
+            </div>
+        </section>
+    );
+}