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