Improve project structure.

New Project Structure:
  - Created reusable UI components (ServiceCard, AnimatedSection, SectionTitle)
  - Split large components into smaller, focused ones
  - Extracted shared hooks for common functionality
  - Organized constants into separate files

Key Improvements:
  - Hooks: useScrollNavigation, useScrollToSection, useCookieSettings
  - UI Components: Modular components for consistent styling and behavior
  - Constants: Centralized data management (ServicesData, NavigationData)
  - Component Split: Navbar, Hero, and Footer broken into logical sub-components

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

@@ -1,101 +1,35 @@
 'use client';
 
-import {motion} from 'framer-motion';
-import {ChevronRight} from 'lucide-react';
+import { motion } from 'framer-motion';
 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',
-        ],
-    },
-];
+import { SectionTitle } from '@/components/ui/SectionTitle';
+import { ServiceCard } from '@/components/ui/ServiceCard';
+import { servicesData } from '@/constant/ServicesData';
 
 const HomeServices = () => {
     return (
-        <section id="services"
-                 className="w-full py-24 bg-background text-foreground">
+        <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}}
-                />
+                <SectionTitle title="Leistungen" />
 
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                    {services.map((service, index) => (
-                        <motion.div
+                    {servicesData.map((service, index) => (
+                        <ServiceCard
                             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>
+                            title={service.title}
+                            description={service.description}
+                            bullets={service.bullets}
+                            index={index}
+                        />
                     ))}
                 </div>
 
                 <motion.div
                     className="mt-12 text-center"
-                    initial={{opacity: 0}}
-                    whileInView={{opacity: 1}}
-                    viewport={{once: true}}
-                    transition={{duration: 0.4, delay: 0.3}}
+                    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?