Naturkosmetik Impulse
Eine Website, die Fachhandel, Unternehmen und Privatkundinnen gleichzeitig bedient, ohne dass eine der drei Zielgruppen in den Hintergrund fällt.
Was das Projekt ist
- Die Website stellt eine Personenmarke aus der Bio- und Naturkosmetik-Branche dar: Weiterbildung und Beratung in drei Leistungsbereichen — Seminare und Schulungen, Messearbeit auf Fachmessen sowie Beauty-Workshops.
- Die inhaltliche Aufgabe lag in der Struktur: Diese drei Bereiche sprechen drei verschiedene Zielgruppen an — Fachhandel, Unternehmen und Privatkundinnen. Sie stehen deshalb gleichrangig nebeneinander, jede mit eigener Ansprache. Der Abschluss läuft über Anfragen, nicht über Buchung; entsprechend führt jeder Bereich zum Kontaktformular.
- Die Inhalte liegen im Code, es gibt kein Redaktionssystem. Für einen späteren Bereich mit eigenen Beiträgen ist ein Datenmodell angelegt, die Anbindung ist noch nicht Teil des Livestands.
Funktionsumfang
- Kontaktformular mit Bot-Schutz, serverseitiger Token-Prüfung und Versand über SMTP.
- Zustimmungsbanner mit drei Wegen — alles annehmen, nur Notwendiges, Einstellungen — plus eigener Schalter für die Reichweitenmessung. Die Messung wird erst nach Zustimmung geladen.
- Technisches SEO: Metadaten über die Metadata-API, Sitemap, Robots, Canonicals, Vorschaubilder für soziale Netzwerke und strukturierte Daten als JSON-LD für Unternehmen und Website.
- Dark Mode nach Systemvorgabe, umschaltbar.
- Installierbare Web-App mit Manifest und Service Worker.
- Bewegung im Scrollverlauf: Parallax, eingeblendete Textpassagen, gezählte Werte, abschnittsweise Übergänge — durchgehend mit Rücksicht auf die Systemeinstellung für reduzierte Bewegung.
- Zeitleiste der Stationen auf der Über-mich-Seite, eingebundenes Bewertungs-Abzeichen als externer Beleg.
- Bildausgabe in AVIF und WebP, Jahres-Cache für unveränderliche Dateien, Konsolenausgaben in der Produktionsfassung entfernt.
Technische Umsetzung
- Framework und Sprache
- Next.js 16 mit App RouterReact 19TypeScriptTailwind CSS 4Framer Motion
- Datenhaltung
- Neon Serverless Postgres mit Drizzle ORMfür einen späteren Beitragsbereich vorbereitet
- E-Mail und Dokumente
- Nodemailer über SMTP
- Betrieb und Deployment
- VercelSentryService Worker für die installierbare Web-AppCloudflare TurnstileReichweitenmessung hinter Zustimmungnext-themes für den Dark Mode
Kennzahlen aus dem System
3
Leistungsbereiche
Seminare und Schulungen, Messearbeit, Beauty-Workshops — jeder mit eigener Zielgruppe.
7
Inhaltsseiten und Rechtstexte
Startseite, Über mich, Leistungen, Kontakt und drei Rechtstexte, jede mit Canonical und Vorschaubild. Zwei weitere angelegte Seiten sind noch ohne Inhalt und nicht mitgezählt.
4
Icon-Einträge im App-Manifest
Inklusive maskierbarer Variante für die Installation auf dem Startbildschirm.
Die Angaben auf dieser Seite beschreiben den Umfang des Systems. Zu meinem Anteil daran gebe ich dir im Gespräch gerne Auskunft.