Willicher Apotheken: Marken-Website & App-Showcase
Die gemeinsame digitale Eingangstür für zwei Apotheken in Willich, gebaut als deutschsprachige Single-Page-Experience und live auf Firebase Hosting.
Unabhängiges Projekt von Mode-Mitgründer Thiago Salvador, gezeigt als Kompetenzbeispiel, nicht als Mode-Kundenauftrag.
- React
- Vite
- TypeScript
- Tailwind CSS
- GSAP
- Framer Motion
- Firebase
- Playwright
Was es ist
Willicher Apotheken ist die gemeinsame digitale Eingangstür für zwei Apotheken in Willich: Hirsch Apotheke und Engel Apotheke. Die Website ist eine deutschsprachige Single-Page-Experience: Hero mit Marken-Lockup, ein kinetisches #Gesundheit. Will.Ich. Manifest, eine App-Sektion zu eRezept, Bestellung und elektrischer Same-Day-Lieferung sowie ein Standorte-Block mit beiden Apotheken-Karten und einem In-App-Karten-Mockup.
Gebaut mit React 19, Vite, Tailwind CSS 4, GSAP und Framer Motion, deployed auf Firebase Hosting.
Funktionen
- Single-Page-Marketing-Website mit Hero-, TextBreak-, App-, Standorte- und Footer-Sektionen
- Markensystem in Tiefrot (#b71918) mit Montserrat sowie Hirsch- und Engel-Ikonografie
- GSAP-Hero-Entrance und Idle-Animationen; Framer Motion für Sektions-Reveals und mobile Navigation
- App-Showcase: eRezept, Bestellung, elektrische Same-Day-Lieferung und Abholung an beiden Standorten
- Standorte-Karten für Hirsch Apotheke und Engel Apotheke mit Öffnungszeiten, Telefon und Website-Links
- JSON-LD-Pharmacy-Entitäten, Sitemap und Open Graph für lokale SEO
- Cookie-Consent mit localStorage-Präferenzen und Footer-Reopen-Event
Technische Highlights
Markentreue Motion
Hero-Icons und Typografie starten verborgen und erscheinen über GSAP autoAlpha; unendliche Idle-Rotationen nutzen contextSafe-Cleanup, damit Reduced-Motion und Unmount sicher bleiben.
Geteilte Apothekendaten
Namen, Adressen, Telefonnummern, Öffnungszeiten und Logos liegen in einem typisierten Konstanten-Modul, das Standorte, Header und strukturierte Daten speist: eine Quelle der Wahrheit für beide Apotheken.
Vite plus Tailwind-4-Tokens
CSS-@theme-Tokens (red-primary, gray-primary, off-white, blue-accent) treiben die gesamte UI; Grain- und Subtle-Dot-Utilities fügen Textur ohne Asset-Requests hinzu.
Firebase-Produktions-Deploy
Gebaut mit tsc und Vite, gehostet auf Firebase mit unveränderlichem Static-Asset-Caching und Preview-Channels für Reviews.
Projektdaten
- Projekttyp
- Marketing / Marken-Website + App-Showcase
- Kunde
- Hirsch Apotheke & Engel Apotheke (Willich, DE)
- Stack
- React 19, Vite 7, TypeScript, Tailwind CSS 4, GSAP, Framer Motion
- Deploy
- Firebase Hosting (willicher-apotheken.de)
- Sprache
- Deutsch
- Status
- Live
Ergebnisse
- Live-Marken-Website veröffentlicht, die zwei Apotheken unter einer digitalen Identität vereint
- Marketing-Narrativ mit der realen Willicher-Apotheken-App verbunden (eRezept, Bestellung, Lieferung)
- GSAP- und Framer-Motion-Storytelling geliefert und dabei prefers-reduced-motion unterstützt
- Lokale SEO strukturiert mit zwei Pharmacy-JSON-LD-Entitäten plus Geo- und Öffnungszeiten-Daten
Galerie
