Refactor website to use shadcn components

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

@@ -0,0 +1,60 @@
+'use client'
+
+import {motion} from 'framer-motion'
+import Link from 'next/link'
+
+export default function ReferralSection() {
+    return (
+        <section id="referral" className="py-24 px-4 bg-background/80 text-foreground">
+            <div className="max-w-3xl mx-auto text-center">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-2"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Weiterempfehlen lohnt sich
+                </motion.h2>
+
+                <motion.div
+                    className="w-12 h-[2px] mt-2 mb-6 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="text-sm md:text-base mb-8 text-muted-foreground space-y-4"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.2}}
+                >
+                    <p>
+                        Du empfiehlst uns weiter und dein Kontakt wird Kunde?
+                        Als Dank erhältst du <strong>10 % Rabatt</strong> auf dein nächstes Projekt bei uns.
+                    </p>
+                    <p>
+                        Einfach, fair und lohnend – ideal für alle, die mit unserer Arbeit zufrieden sind.
+                    </p>
+                </motion.div>
+
+                <motion.div
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.5, delay: 0.3}}
+                >
+                    <Link
+                        href="/contact"
+                        className="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-semibold transition"
+                    >
+                        Jetzt empfehlen
+                    </Link>
+                </motion.div>
+            </div>
+        </section>
+    )
+}