```jsx import React, { useState, useEffect } from 'react'; const App = () => { const [activeSection, setActiveSection] = useState('home'); const [isMenuOpen, setIsMenuOpen] = useState(false); // Mock data for the website content const content = { hero: { title: "Ich erstelle moderne Webseiten", subtitle: "Willkommen, schön, Dich gefunden zu haben", cta: "Erfahre mehr" }, about: { title: "Über mich", description: "Ich bin ein KI-gestützter Webdesigner, der dir dabei hilft, atemberaubende Webseiten zu erstellen. Mit einem Fokus auf Ästhetik, Benutzererfahrung und modernen Technologien bringe ich deine Ideen zum Leben." }, services: { title: "Meine Dienstleistungen", items: [ { title: "React Entwicklung", description: "Erstellung dynamischer Single-Page Applications mit React und modernen Best Practices.", icon: }, { title: "UI/UX Design", description: "Schöpferische Gestaltung von benutzerfreundlichen Oberflächen mit klarem Fokus auf Nutzererlebnis.", icon: }, { title: "Responsive Design", description: "Webseiten, die auf allen Geräten perfekt aussehen - Desktop, Tablet und Smartphone.", icon: } ] }, contact: { title: "Kontaktiere mich", description: "Hast du ein Projekt oder brauchst du Unterstützung? Zögere nicht, dich mit mir in Verbindung zu setzen!", form: { name: "Name", email: "E-Mail", message: "Nachricht", submit: "Senden" } } }; // Handle scroll to section const scrollToSection = (section) => { setActiveSection(section); const element = document.getElementById(section); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } }; // Add scroll event listener to detect active section useEffect(() => { const handleScroll = () => { const sections = ['home', 'about', 'services', 'contact']; const scrollPosition = window.scrollY + 100; for (const section of sections) { const element = document.getElementById(section); if (element && element.offsetTop <= scrollPosition && element.offsetTop + element.offsetHeight > scrollPosition) { setActiveSection(section); break; } } }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); return (
{/* Navigation */} {/* Hero Section */}

{content.hero.title}

{content.hero.subtitle}

Web design concept
{/* About Section */}

{content.about.title}

{content.about.description}

{content.services.items.map((service, index) => (
{service.icon}

{service.title}

{service.description}

))}
{/* Services Section */}

{content.services.title}

{content.services.items.map((service, index) => (
{service.icon}

{service.title}

{service.description}

))}
{/* Contact Section */}

{content.contact.title}

{content.contact.description}

{/* Footer */}
); }; export default App; ```