Erstellen Sie eine Full-Stack-E-Commerce-Website von Grund auf

Als Senior Full-Stack-Webentwickler und UI/UX-Designer werde ich eine moderne, professionelle und vollständig responsive E-Commerce-Website von Grund auf erstellen. ### Ziel Eine saubere und attraktive Online-Shopping-Website, die für ein echtes Unternehmen geeignet ist. Die Website soll auf Mobilgeräten, Tablets und Desktops reibungslos funktionieren. ### Technologie Verwendet werden: * HTML5 * CSS3 * JavaScript * Eine einzelne HTML-Datei mit integriertem CSS und JavaScript. * Kein Backend, es sei denn, es ist unbedingt erforderlich. * Sauberer, gut organisierter und anfängerfreundlicher Code. ### Website-Funktionen 1. **Kopfzeile/Navigationsleiste** * Professionelles Logo/Geschäftsname * Startseite * Shop * Kategorien * Über uns * Kontakt * Suchsymbol/-leiste * Warenkorbsymbol mit Artikelanzahl * Anmelden/Registrieren-Button 2. **Hero-Bereich** * Großes Werbebanner * Attraktive Überschrift * Kurze Beschreibung * "Jetzt einkaufen"-Button * Modernes E-Commerce-Design 3. **Kategorien** Attraktive Kategoriekarten erstellen, wie zum Beispiel: * Elektronik * Mode * Schuhe * Accessoires * Schönheit * Wohnen & Leben 4. **Produktbereich** Mehrere Produktkarten anzeigen, die Folgendes enthalten: * Produktbild * Produktname * Bewertung * Originalpreis * Rabattierter Preis * Rabattprozentsatz * "In den Warenkorb"-Button * "Jetzt kaufen"-Button * Wunschliste/Herz-Button 5. **Produktsuche & Filter** Funktionierende JavaScript-Funktionalität hinzufügen für: * Produktsuche * Kategoriefilterung * Preissortierung * Bewertungssortierung 6. **Warenkorb** Einen funktionalen Warenkorb erstellen, in dem Benutzer: * Produkte hinzufügen * Produkte entfernen * Menge erhöhen/verringern * Zwischensumme sehen * Gesamtpreis sehen * Warenkorb leeren 7. **Checkout** Eine professionelle Checkout-Seite/einen Bereich erstellen mit: * Kundenname * E-Mail * Telefon * Adresse * Stadt * Bundesland * PLZ * Zahlungsmethode * Bestellübersicht * "Bestellung aufgeben"-Button 8. **Spezielle Bereiche** Hinzufügen: * Blitzangebot * Bestseller * Neue Artikel * Kundenbewertungen * Newsletter-Abonnement 9. **Fußzeile** Einfügen: * Über den Shop * Schnelllinks * Kundensupport * Datenschutzerklärung * Allgemeine Geschäftsbedingungen * Social-Media-Icons * Urheberrecht ### Design-Anforderungen * Premium- und modernes UI * Saubere Typografie * Attraktive Produktkarten * Sanfte Hover-Animationen * Responsives Layout * Mobilfreundliches Hamburger-Menü * Gute Abstände und Ausrichtung * Professionelles Farbschema * Sanftes Scrollen * Barrierefreie Buttons und Formulare * Dezente Animationen hinzufügen, ohne die Website zu verlangsamen ### JavaScript-Anforderungen Die folgenden Funktionen müssen tatsächlich funktionieren: * Suche * Kategoriefilterung * Sortierung * Zum Warenkorb hinzufügen * Aus dem Warenkorb entfernen * Mengensteuerung * Berechnung des Warenkorb-Gesamtbetrags * Wunschlisten-Button * Mobile Navigation * Checkout-Formularvalidierung * Bestellbestätigungsmeldung Verwende Beispielprodukte und realistische Produktbilder von öffentlich zugänglichen Bild-URLs. ### Wichtig Gib mir nicht nur eine Erklärung. **Erstelle den vollständigen, funktionierenden Website-Code.** Gib den vollständigen Code in einer HTML-Datei zurück, die ich als `index.html` speichern und direkt im Browser öffnen kann. Das Endergebnis soll wie eine professionelle, reale E-Commerce-Website aussehen und nicht wie eine einfache Demo.