Refactor website to use shadcn components

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

@@ -0,0 +1,115 @@
+'use client';
+
+import {motion} from 'framer-motion';
+import {ChevronRight} from 'lucide-react';
+import Link from 'next/link';
+
+const services = [
+    {
+        title: 'Webdesign',
+        description: 'Moderne Websites, die Vertrauen schaffen und verkaufen.',
+        bullets: [
+            'Maßgeschneidertes Design',
+            'Klare Struktur & überzeugende Inhalte',
+            'Nutzerführung mit System & Strategie',
+            'Für alle Geräte optimiert',
+        ],
+    },
+    {
+        title: 'App-Entwicklung',
+        description: 'Skalierbare Apps für Web und Mobile – von der Idee bis zum Launch.',
+        bullets: [
+            'Plattformübergreifend mit modernen Technologien',
+            'Backend & API-Entwicklung inklusive',
+            'Individuelle Funktionen & Logik',
+            'Stabil, performant & wartbar',
+        ],
+    },
+    {
+        title: 'Interne Tools',
+        description: 'Digitale Werkzeuge, die Prozesse vereinfachen und Zeit sparen.',
+        bullets: [
+            'Prozessdigitalisierung & Automatisierung',
+            'Zugeschnitten auf eure Workflows',
+            'Skalierbar & zukunftssicher',
+            'Intuitiv & effizient bedienbar',
+        ],
+    },
+];
+
+const HomeServices = () => {
+    return (
+        <section id="services"
+                 className="w-full py-24 bg-background text-foreground">
+            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
+                <motion.h2
+                    className="text-3xl md:text-4xl font-bold mb-1 text-left"
+                    initial={{opacity: 0, y: 10}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4}}
+                >
+                    Leistungen
+                </motion.h2>
+
+                <motion.div
+                    className="w-12 h-[2px] mt-2 mb-10 bg-amber-500"
+                    initial={{opacity: 0, x: -20}}
+                    whileInView={{opacity: 1, x: 0}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.1}}
+                />
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    {services.map((service, index) => (
+                        <motion.div
+                            key={service.title}
+                            className="flex flex-col justify-between h-full p-6 rounded-3xl border bg-muted text-foreground"
+                            initial={{opacity: 0, y: 20}}
+                            whileInView={{opacity: 1, y: 0}}
+                            viewport={{once: true}}
+                            transition={{duration: 0.4, delay: index * 0.1}}
+                            whileHover={{
+                                scale: 1.03,
+                                boxShadow: '0px 12px 30px rgba(0, 0, 0, 0.08)',
+                            }}
+                        >
+                            <div>
+                                <h3 className="text-xl font-semibold mb-2">{service.title}</h3>
+                                <p className="text-muted-foreground mb-4">{service.description}</p>
+                                <ul className="space-y-3">
+                                    {service.bullets.map((point, i) => (
+                                        <li key={i} className="flex items-start gap-2">
+                                            <ChevronRight className="w-4 h-4 text-primary mt-1"/>
+                                            <span className="text-sm text-foreground">{point}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+
+                <motion.div
+                    className="mt-12 text-center"
+                    initial={{opacity: 0}}
+                    whileInView={{opacity: 1}}
+                    viewport={{once: true}}
+                    transition={{duration: 0.4, delay: 0.3}}
+                >
+                    <p className="text-muted-foreground mb-4 text-base md:text-lg">
+                        Du möchtest mehr über unsere Leistungen erfahren oder hast ein konkretes Projekt im Kopf?
+                    </p>
+                    <Link
+                        href="/contact"
+                        className="text-sm font-semibold text-primary hover:underline"
+                    >
+                        Jetzt Kontakt aufnehmen →
+                    </Link>
+                </motion.div>
+            </div>
+        </section>
+    );
+};
+
+export default HomeServices;