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

.claude/settings.local.json

@@ -4,7 +4,8 @@
       "Bash(find:*)",
       "Bash(mvn clean:*)",
       "Bash(mvn test:*)",
-      "Bash(npm run build:*)"
+      "Bash(npm run build:*)",
+      "Bash(npm run lint)"
     ],
     "deny": []
   }

frontend/app/(root)/Home.tsx

@@ -1,28 +1,18 @@
 'use client';
 
-import React, {useEffect} from "react";
-import HomeServices from "@/app/(root)/sections/HomeServices";
-import {motion} from "framer-motion";
+import React from "react";
+import { motion } from "framer-motion";
+import { useScrollToSection } from "@/hooks/useScrollToSection";
 import Hero from "@/app/(root)/sections/Hero";
+import HomeServices from "@/app/(root)/sections/HomeServices";
 import About from "@/app/(root)/sections/About";
 import ProcessSection from "@/app/(root)/sections/ProcessSection";
 import WhyUs from "@/app/(root)/sections/WhyUs";
-import Faq from "@/app/(root)/sections/Faq";
 import ReferralSection from "@/app/(root)/sections/ReferralSection";
+import Faq from "@/app/(root)/sections/Faq";
 
 const Home = () => {
-    useEffect(() => {
-        const scrollToId = localStorage.getItem('scrollToId')
-        if (scrollToId) {
-            localStorage.removeItem('scrollToId')
-            const el = document.getElementById(scrollToId)
-            if (el) {
-                setTimeout(() => {
-                    el.scrollIntoView({behavior: 'smooth', block: 'start'})
-                }, 200)
-            }
-        }
-    }, [])
+    useScrollToSection();
 
     return (
         <motion.div

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

@@ -1,6 +1,7 @@
 'use client';
 
-import {motion} from 'framer-motion';
+import { motion } from 'framer-motion';
+import { SectionTitle } from '@/components/ui/SectionTitle';
 
 const About = () => {
     return (
@@ -9,23 +10,9 @@ const About = () => {
             className="relative w-full py-24 bg-background text-foreground transition-colors duration-700 ease-in-out">
             <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
                 <div className="flex flex-col">
-                    {/* Title */}
-                    <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}}
-                    >
-                        Über uns
-                    </motion.h2>
-
-                    <motion.div
-                        className="w-12 h-[2px] mt-2 mb-6 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="Über uns" 
+                        className="mb-6"
                     />
 
                     {/* Text */}

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

@@ -1,74 +1,16 @@
 'use client';
 
-import {motion} from 'framer-motion';
-import Image from 'next/image';
-import {Typewriter} from 'react-simple-typewriter';
-import PulsatingButton from "@/components/PulsatingButton";
+import { HeroBackground } from '@/components/Hero/HeroBackground';
+import { HeroContent } from '@/components/Hero/HeroContent';
 
 const Hero = () => {
     return (
         <section id="start" className="relative w-full h-screen overflow-hidden">
-            {/* Background */}
-            <div className="absolute inset-0 z-0">
-                <Image
-                    src="/images/home_hero.jpg"
-                    alt="Rhein river aerial view"
-                    fill
-                    className="object-cover scale-105 blur-sm"
-                    priority
-                />
-                <div className="absolute inset-0 bg-black/60"/>
-            </div>
-
-            {/* Content */}
-            <div
-                className="relative z-10 flex flex-col justify-center items-start h-full w-[90%] sm:w-[80%] max-w-6xl mx-auto text-white">
-                <motion.h1
-                    className="text-3xl sm:text-5xl font-bold mb-6 leading-tight"
-                    initial={{opacity: 0, y: 40}}
-                    animate={{opacity: 1, y: 0}}
-                    transition={{duration: 0.6}}
-                >
-                    Digitale Lösungen, <br/> die wirklich passen.
-                </motion.h1>
-
-                <motion.p
-                    className="text-lg sm:text-xl text-gray-300 mb-6 max-w-2xl"
-                    initial={{opacity: 0, y: 20}}
-                    animate={{opacity: 1, y: 0}}
-                    transition={{duration: 0.6, delay: 0.2}}
-                >
-                    Wir entwickeln individuelle Softwarelösungen für Unternehmen und Startups.
-                </motion.p>
-
-                <motion.div
-                    className="text-xl font-semibold text-white"
-                    initial={{opacity: 0}}
-                    animate={{opacity: 1}}
-                    transition={{delay: 0.6}}
-                >
-                    <Typewriter
-                        words={['Webdesign', 'App-Entwicklung', 'Interne Tools']}
-                        loop={true}
-                        cursor
-                        cursorStyle="_"
-                        typeSpeed={60}
-                        deleteSpeed={40}
-                        delaySpeed={2000}
-                    />
-                </motion.div>
-
-                <div className="mt-10 relative flex items-center justify-center">
-                    <PulsatingButton
-                        label="Jetzt Kontakt aufnehmen"
-                        href="/contact"
-                        color="#2563eb" // Tailwind blue-600
-                        width={256}
-                        pulse
-                    />
-                </div>
-
-            </div>
+            <HeroBackground 
+                imageSrc="/images/home_hero.jpg"
+                imageAlt="Rhein river aerial view"
+            />
+            <HeroContent />
         </section>
     );
 };

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?

frontend/components/Footer/Footer.tsx

@@ -2,13 +2,13 @@
 
 import React from 'react';
 import Link from 'next/link';
-import {motion} from 'framer-motion';
-import {Mail, Gavel, ShieldCheck, Cookie} from 'lucide-react';
+import { motion } from 'framer-motion';
+import { Mail, Gavel, ShieldCheck, Cookie } from 'lucide-react';
+import { FooterSection } from './FooterSection';
+import { useCookieSettings } from '@/hooks/useCookieSettings';
 
 const Footer = () => {
-    const openCookieSettings = () => {
-        window.dispatchEvent(new Event('show-cookie-banner'));
-    };
+    const { openCookieSettings } = useCookieSettings();
 
     return (
         <motion.footer
@@ -42,56 +42,38 @@ const Footer = () => {
                         </p>
                     </motion.div>
 
-                    {/* Informationen */}
-                    <motion.div
-                        initial={{opacity: 0, y: 10}}
-                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{once: true}}
-                        transition={{duration: 0.5, delay: 0.4}}
-                    >
-                        <h3 className="text-lg font-semibold mb-4">Informationen</h3>
-                        <ul className="space-y-3 text-sm text-gray-300">
-                            <li className="flex items-center gap-2">
-                                <Mail className="w-4 h-4"/>
-                                <Link href="/contact" className="hover:underline">
-                                    Kontakt
-                                </Link>
-                            </li>
-                        </ul>
-                    </motion.div>
+                    <FooterSection title="Informationen" delay={0.4}>
+                        <li className="flex items-center gap-2">
+                            <Mail className="w-4 h-4" />
+                            <Link href="/contact" className="hover:underline">
+                                Kontakt
+                            </Link>
+                        </li>
+                    </FooterSection>
 
-                    {/* Rechtliches */}
-                    <motion.div
-                        initial={{opacity: 0, y: 10}}
-                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{once: true}}
-                        transition={{duration: 0.5, delay: 0.5}}
-                    >
-                        <h3 className="text-lg font-semibold mb-4">Rechtliches</h3>
-                        <ul className="space-y-3 text-sm text-gray-300">
-                            <li className="flex items-center gap-2">
-                                <ShieldCheck className="w-4 h-4"/>
-                                <Link href="/legal/privacy" className="hover:underline">
-                                    Datenschutz
-                                </Link>
-                            </li>
-                            <li className="flex items-center gap-2">
-                                <Gavel className="w-4 h-4"/>
-                                <Link href="/legal/imprint" className="hover:underline">
-                                    Impressum
-                                </Link>
-                            </li>
-                            <li className="flex items-center gap-2">
-                                <Cookie className="w-4 h-4"/>
-                                <button
-                                    onClick={openCookieSettings}
-                                    className="hover:underline text-left"
-                                >
-                                    Cookie-Einstellungen
-                                </button>
-                            </li>
-                        </ul>
-                    </motion.div>
+                    <FooterSection title="Rechtliches" delay={0.5}>
+                        <li className="flex items-center gap-2">
+                            <ShieldCheck className="w-4 h-4" />
+                            <Link href="/legal/privacy" className="hover:underline">
+                                Datenschutz
+                            </Link>
+                        </li>
+                        <li className="flex items-center gap-2">
+                            <Gavel className="w-4 h-4" />
+                            <Link href="/legal/imprint" className="hover:underline">
+                                Impressum
+                            </Link>
+                        </li>
+                        <li className="flex items-center gap-2">
+                            <Cookie className="w-4 h-4" />
+                            <button
+                                onClick={openCookieSettings}
+                                className="hover:underline text-left"
+                            >
+                                Cookie-Einstellungen
+                            </button>
+                        </li>
+                    </FooterSection>
                 </div>
 
                 <motion.div

frontend/components/Footer/FooterSection.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ReactNode } from 'react';
+
+interface FooterSectionProps {
+    title: string;
+    children: ReactNode;
+    delay: number;
+}
+
+export const FooterSection = ({ title, children, delay }: FooterSectionProps) => {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay }}
+        >
+            <h3 className="text-lg font-semibold mb-4">{title}</h3>
+            <ul className="space-y-3 text-sm text-gray-300">
+                {children}
+            </ul>
+        </motion.div>
+    );
+};

frontend/components/Hero/HeroBackground.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import Image from 'next/image';
+
+interface HeroBackgroundProps {
+    imageSrc: string;
+    imageAlt: string;
+}
+
+export const HeroBackground = ({ imageSrc, imageAlt }: HeroBackgroundProps) => {
+    return (
+        <div className="absolute inset-0 z-0">
+            <Image
+                src={imageSrc}
+                alt={imageAlt}
+                fill
+                className="object-cover scale-105 blur-sm"
+                priority
+            />
+            <div className="absolute inset-0 bg-black/60" />
+        </div>
+    );
+};

frontend/components/Hero/HeroContent.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Typewriter } from 'react-simple-typewriter';
+import PulsatingButton from '@/components/PulsatingButton';
+
+const typewriterWords = ['Webdesign', 'App-Entwicklung', 'Interne Tools'];
+
+export const HeroContent = () => {
+    return (
+        <div className="relative z-10 flex flex-col justify-center items-start h-full w-[90%] sm:w-[80%] max-w-6xl mx-auto text-white">
+            <motion.h1
+                className="text-3xl sm:text-5xl font-bold mb-6 leading-tight"
+                initial={{ opacity: 0, y: 40 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6 }}
+            >
+                Digitale Lösungen, <br /> die wirklich passen.
+            </motion.h1>
+
+            <motion.p
+                className="text-lg sm:text-xl text-gray-300 mb-6 max-w-2xl"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.2 }}
+            >
+                Wir entwickeln individuelle Softwarelösungen für Unternehmen und Startups.
+            </motion.p>
+
+            <motion.div
+                className="text-xl font-semibold text-white"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.6 }}
+            >
+                <Typewriter
+                    words={typewriterWords}
+                    loop={true}
+                    cursor
+                    cursorStyle="_"
+                    typeSpeed={60}
+                    deleteSpeed={40}
+                    delaySpeed={2000}
+                />
+            </motion.div>
+
+            <div className="mt-10 relative flex items-center justify-center">
+                <PulsatingButton
+                    label="Jetzt Kontakt aufnehmen"
+                    href="/contact"
+                    color="#2563eb"
+                    width={256}
+                    pulse
+                />
+            </div>
+        </div>
+    );
+};

frontend/components/Navbar/DesktopNav.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { navLinks } from '@/constant/NavigationData';
+
+interface DesktopNavProps {
+    onNavClick: (id: string) => void;
+}
+
+export const DesktopNav = ({ onNavClick }: DesktopNavProps) => {
+    return (
+        <nav className="hidden lg:flex items-center gap-6">
+            {navLinks.map((link) => (
+                <button
+                    key={link.id}
+                    onClick={() => onNavClick(link.id)}
+                    className="cursor-pointer text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
+                >
+                    {link.label}
+                </button>
+            ))}
+
+            <Button asChild>
+                <Link href="/contact">Kontakt</Link>
+            </Button>
+
+            <ThemeToggle />
+        </nav>
+    );
+};

frontend/components/Navbar/MobileNav.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Menu } from 'lucide-react';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { navLinks } from '@/constant/NavigationData';
+
+interface MobileNavProps {
+    onNavClick: (id: string) => void;
+}
+
+export const MobileNav = ({ onNavClick }: MobileNavProps) => {
+    return (
+        <div className="lg:hidden flex items-center gap-3">
+            <ThemeToggle />
+            <Sheet>
+                <SheetTrigger asChild>
+                    <Button variant="outline" size="icon">
+                        <Menu className="h-5 w-5" />
+                    </Button>
+                </SheetTrigger>
+                <SheetContent side="top" className="pt-10">
+                    <div className="flex flex-col space-y-4 text-center">
+                        {navLinks.map((link) => (
+                            <button
+                                key={link.id}
+                                onClick={() => onNavClick(link.id)}
+                                className="cursor-pointer text-base font-semibold text-muted-foreground hover:text-primary transition-colors"
+                            >
+                                {link.label}
+                            </button>
+                        ))}
+                        <Button asChild className="mt-4 w-full">
+                            <Link href="/contact">Kontakt</Link>
+                        </Button>
+                    </div>
+                </SheetContent>
+            </Sheet>
+        </div>
+    );
+};

frontend/components/Navbar/NavLogo.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+interface NavLogoProps {
+    onLogoClick: () => void;
+}
+
+export const NavLogo = ({ onLogoClick }: NavLogoProps) => {
+    return (
+        <button
+            onClick={onLogoClick}
+            className="text-xl font-bold cursor-pointer"
+        >
+            <span className="text-pink-600">R</span>hein Software
+        </button>
+    );
+};

frontend/components/Navbar/Navbar.tsx

@@ -1,98 +1,21 @@
 'use client';
 
 import React from 'react';
-import Link from 'next/link';
-import {usePathname, useRouter} from 'next/navigation';
-import {Button} from '@/components/ui/button';
-import {Sheet, SheetContent, SheetTrigger} from '@/components/ui/sheet';
-import {Menu} from 'lucide-react';
-import {ThemeToggle} from '@/components/theme-toggle';
-
-const navLinks = [
-    {id: 'services', label: 'Leistungen'},
-    {id: 'about', label: 'Über uns'},
-    {id: 'process', label: 'Ablauf'},
-    {id: 'whyus', label: 'Warum wir'},
-    {id: 'referral', label: 'Empfehlung'},
-    {id: 'faq', label: 'FAQ'},
-];
+import { useScrollNavigation } from '@/hooks/useScrollNavigation';
+import { NavLogo } from './NavLogo';
+import { DesktopNav } from './DesktopNav';
+import { MobileNav } from './MobileNav';
 
 const Navbar = () => {
-    const pathname = usePathname();
-    const router = useRouter();
-
-    const handleNavClick = (id: string) => {
-        if (typeof window === 'undefined') return
-
-        if (pathname === '/') {
-            const el = document.getElementById(id)
-            if (el) {
-                el.scrollIntoView({behavior: 'smooth', block: 'start'})
-            }
-        } else {
-            localStorage.setItem('scrollToId', id)
-            router.push('/')
-        }
-    }
+    const { handleNavClick } = useScrollNavigation();
 
     return (
         <div className="w-full px-4 sm:px-6 lg:px-8 flex justify-center mt-4 z-50 fixed">
-            <header
-                className="bg-background/50 backdrop-blur-md border shadow-lg rounded-xl w-full max-w-screen-xl py-3 px-4 sm:px-6 lg:px-8">
+            <header className="bg-background/50 backdrop-blur-md border shadow-lg rounded-xl w-full max-w-screen-xl py-3 px-4 sm:px-6 lg:px-8">
                 <div className="flex items-center justify-between">
-                    <button
-                        onClick={() => handleNavClick('start')}
-                        className="text-xl font-bold cursor-pointer"
-                    >
-                        <span className="text-pink-600">R</span>hein Software
-                    </button>
-
-                    {/* Desktop nav */}
-                    <nav className="hidden lg:flex items-center gap-6">
-                        {navLinks.map((link) => (
-                            <button
-                                key={link.id}
-                                onClick={() => handleNavClick(link.id)}
-                                className="cursor-pointer text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
-                            >
-                                {link.label}
-                            </button>
-                        ))}
-
-                        <Button asChild>
-                            <Link href="/contact">Kontakt</Link>
-                        </Button>
-
-                        <ThemeToggle/>
-                    </nav>
-
-                    {/* Mobile nav */}
-                    <div className="lg:hidden flex items-center gap-3">
-                        <ThemeToggle/>
-                        <Sheet>
-                            <SheetTrigger asChild>
-                                <Button variant="outline" size="icon">
-                                    <Menu className="h-5 w-5"/>
-                                </Button>
-                            </SheetTrigger>
-                            <SheetContent side="top" className="pt-10">
-                                <div className="flex flex-col space-y-4 text-center">
-                                    {navLinks.map((link) => (
-                                        <button
-                                            key={link.id}
-                                            onClick={() => handleNavClick(link.id)}
-                                            className="cursor-pointer text-base font-semibold text-muted-foreground hover:text-primary transition-colors"
-                                        >
-                                            {link.label}
-                                        </button>
-                                    ))}
-                                    <Button asChild className="mt-4 w-full">
-                                        <Link href="/contact">Kontakt</Link>
-                                    </Button>
-                                </div>
-                            </SheetContent>
-                        </Sheet>
-                    </div>
+                    <NavLogo onLogoClick={() => handleNavClick('start')} />
+                    <DesktopNav onNavClick={handleNavClick} />
+                    <MobileNav onNavClick={handleNavClick} />
                 </div>
             </header>
         </div>

frontend/components/ui/SectionTitle.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+interface SectionTitleProps {
+    title: string;
+    subtitle?: string;
+    className?: string;
+    showUnderline?: boolean;
+    underlineColor?: string;
+}
+
+export const SectionTitle = ({ 
+    title, 
+    subtitle, 
+    className = "", 
+    showUnderline = true,
+    underlineColor = "bg-amber-500"
+}: SectionTitleProps) => {
+    return (
+        <div className={className}>
+            <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 }}
+            >
+                {title}
+            </motion.h2>
+
+            {showUnderline && (
+                <motion.div
+                    className={`w-12 h-[2px] mt-2 mb-10 ${underlineColor}`}
+                    initial={{ opacity: 0, x: -20 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.4, delay: 0.1 }}
+                />
+            )}
+
+            {subtitle && (
+                <motion.p
+                    className="text-lg text-muted-foreground mt-4"
+                    initial={{ opacity: 0, y: 10 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.4, delay: 0.2 }}
+                >
+                    {subtitle}
+                </motion.p>
+            )}
+        </div>
+    );
+};

frontend/components/ui/ServiceCard.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import { ReactNode } from 'react';
+
+interface ServiceCardProps {
+    title: string;
+    description: string;
+    bullets: string[];
+    index: number;
+    children?: ReactNode;
+}
+
+export const ServiceCard = ({ title, description, bullets, index, children }: ServiceCardProps) => {
+    return (
+        <motion.div
+            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">{title}</h3>
+                <p className="text-muted-foreground mb-4">{description}</p>
+                <ul className="space-y-3">
+                    {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>
+                {children && <div className="mt-4">{children}</div>}
+            </div>
+        </motion.div>
+    );
+};

frontend/constant/NavigationData.ts

@@ -0,0 +1,13 @@
+export interface NavLink {
+    id: string;
+    label: string;
+}
+
+export const navLinks: NavLink[] = [
+    { id: 'services', label: 'Leistungen' },
+    { id: 'about', label: 'Über uns' },
+    { id: 'process', label: 'Ablauf' },
+    { id: 'whyus', label: 'Warum wir' },
+    { id: 'referral', label: 'Empfehlung' },
+    { id: 'faq', label: 'FAQ' },
+];

frontend/constant/ServicesData.ts

@@ -0,0 +1,38 @@
+export interface ServiceData {
+    title: string;
+    description: string;
+    bullets: string[];
+}
+
+export const servicesData: ServiceData[] = [
+    {
+        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',
+        ],
+    },
+];

frontend/hooks/useCookieSettings.ts

@@ -0,0 +1,11 @@
+'use client';
+
+import { useCallback } from 'react';
+
+export const useCookieSettings = () => {
+    const openCookieSettings = useCallback(() => {
+        window.dispatchEvent(new Event('show-cookie-banner'));
+    }, []);
+
+    return { openCookieSettings };
+};

frontend/hooks/useScrollNavigation.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+import { useCallback } from 'react';
+
+export const useScrollNavigation = () => {
+    const pathname = usePathname();
+    const router = useRouter();
+
+    const handleNavClick = useCallback((id: string) => {
+        if (typeof window === 'undefined') return;
+
+        if (pathname === '/') {
+            const el = document.getElementById(id);
+            if (el) {
+                el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        } else {
+            localStorage.setItem('scrollToId', id);
+            router.push('/');
+        }
+    }, [pathname, router]);
+
+    const scrollToSection = useCallback((id: string) => {
+        const el = document.getElementById(id);
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    }, []);
+
+    return { handleNavClick, scrollToSection };
+};

frontend/hooks/useScrollToSection.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export const useScrollToSection = () => {
+    useEffect(() => {
+        const scrollToId = localStorage.getItem('scrollToId');
+        if (scrollToId) {
+            localStorage.removeItem('scrollToId');
+            const el = document.getElementById(scrollToId);
+            if (el) {
+                setTimeout(() => {
+                    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }, 200);
+            }
+        }
+    }, []);
+};