Willicher Apotheken: Pharmacy Brand Site & App
The shared digital front door for two pharmacies in Willich, built as a German-language single-page experience and live on Firebase Hosting.
Independent project by Mode co-founder Thiago Salvador, shown as a capability example, not as a Mode client engagement.
- React
- Vite
- TypeScript
- Tailwind CSS
- GSAP
- Framer Motion
- Firebase
- Playwright
What it is
Willicher Apotheken is the shared digital front door for two pharmacies in Willich: Hirsch Apotheke and Engel Apotheke. The site is a German-language single-page experience: hero brand lockup, a kinetic #Gesundheit. Will.Ich. manifesto, an app section covering eRezept, ordering and same-day electric delivery, and a Standorte block with both pharmacy cards plus an in-app map mockup.
Built with React 19, Vite, Tailwind CSS 4, GSAP and Framer Motion, and deployed to Firebase Hosting.
Features
- Single-page marketing site with Hero, TextBreak, App, Locations and Footer sections
- Brand system in deep red (#b71918) with Montserrat and Hirsch and Engel iconography
- GSAP hero entrance and idle animations; Framer Motion for section reveals and mobile nav
- App showcase: eRezept, ordering, same-day electric delivery and pickup at both locations
- Standorte cards for Hirsch Apotheke and Engel Apotheke with hours, phone and website links
- JSON-LD Pharmacy entities, sitemap and Open Graph for local SEO
- Cookie consent with localStorage preferences and a footer reopen event
Technical highlights
Brand-faithful motion
Hero icons and type start hidden and reveal via GSAP autoAlpha; infinite idle spins use contextSafe cleanup so reduced-motion and unmount stay safe.
Shared pharmacy data
Names, addresses, phones, hours and logos live in a typed constants module consumed by Locations, Header and structured data: one source of truth for both pharmacies.
Vite plus Tailwind 4 tokens
CSS @theme tokens (red-primary, gray-primary, off-white, blue-accent) drive the entire UI; grain and subtle-dot utilities add texture without asset requests.
Firebase production deploy
Built with tsc and Vite, hosted on Firebase with immutable static-asset caching and preview channels for review.
Project facts
- Project type
- Marketing / brand website + app showcase
- Client
- Hirsch Apotheke & Engel Apotheke (Willich, DE)
- Stack
- React 19, Vite 7, TypeScript, Tailwind CSS 4, GSAP, Framer Motion
- Deploy
- Firebase Hosting (willicher-apotheken.de)
- Language
- German
- Status
- Live
Results
- Shipped a live brand site that unifies two pharmacies under one digital identity
- Connected the marketing narrative to the real Willicher Apotheken app (eRezept, ordering, delivery)
- Delivered GSAP and Framer Motion storytelling while keeping prefers-reduced-motion support
- Structured local SEO with dual Pharmacy JSON-LD entities plus geo and opening-hours data
Gallery
