EcoRoutine — Plastic-Free Personal Care
A full-featured e-commerce landing page for a sustainability-focused personal care brand. Features animated product cards with flavor swatches, subscribe-and-save toggle, auto-advancing review slider, benefits grid, split-category banners, and social grid.
- Next.js
- TypeScript
- Tailwind CSS
- React
Concept
EcoRoutine is a fictional eco-conscious personal care brand built to showcase a complete e-commerce experience. The landing page covers the full conversion funnel: hero with real product photography, press logos, product slider, how-to-use guide with video mock, auto-advancing review slider, benefits grid, split-category banners, and social grid.
Key Features
Product cards feature hover-activated flavor swatch overlay, subscribe-and-save toggle with one-time purchase option, and subtle image zoom. The reviews section auto-advances on a 5-second interval with a smooth translate animation. The product slider has manual left/right chevron controls.
Design System
Brand palette of mint green (#72f2c7) and deep charcoal (#131313) over clean white and warm off-white backgrounds. Uppercase tracking-widest typography, sharp rectangular buttons, and no border-radius cards give the site a premium editorial feel.
