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/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>
     );
 };