PRODUCT BRIEF: - Goal: Redesign Cruz Verde pharmacy mobile home screen — modern, business-driven, every element = sales opportunity - Users: Pharmacy customers (health-conscious, convenience-seeking, deal-hunters) - Brand: Green (#00A651 primary) + White, pharmacy/health vertical - Inspiration: Rappi, delivery/ecommerce apps — utility-first, conversion-focused - Success: Every visible element drives a sale, subscription, or engagement action ANALYSIS OF CURRENT DESIGN (from screenshot): - Header: Location selector, search bar, cart icon, hamburger menu - Promo banner carousel (Dermosale 30% off) - "Ofertas hoy" horizontal scroll cards with discount badges - Login/Register CTA - "Te ofrecemos" service icons (Farmacias 24h, Compras Anteriores, Compra Asistida, Stock Farmacia) - "Productos más" loyalty program cards - Multiple "Categoría" sections with product cards (lab, price, discount, "Agregar" CTA) - Bottom nav: Inicio, Cuenta, Wishlist, Droguerías, Más REDESIGN STRATEGY: 1. **Header**: Cleaner, sticky. Location + search prominent. Cart with badge. User avatar. 2. **Hero Banner**: Full-width promo carousel with better visual hierarchy 3. **Quick Actions Bar**: Icon grid — Medicamentos, Ofertas, Receta Médica, Domicilio Express, Club Cruz Verde, Compra Anterior (each = sales funnel) 4. **Flash Deals**: Horizontal scroll with countdown timer, urgency-driven 5. **Categories Grid**: Visual category tiles (Medicamentos, Cuidado Personal, Bebé, Vitaminas, Dermocosméticos, etc.) 6. **Featured Products**: Horizontal product cards with add-to-cart, price, discount badge 7. **Club Cruz Verde**: Loyalty program banner with clear value prop 8. **Reorder Section**: "Compra de nuevo" — past purchases for quick reorder 9. **Bottom Navigation**: 5 tabs — Inicio, Categorías, Ofertas, Carrito, Mi Cuenta COLOR PALETTE: - Primary Green: #00A651 (Cruz Verde brand) - Dark Green: #006B33 - Light Green: #E8F5E9 - White: #FFFFFF - Light Gray: #F5F5F5 - Text Dark: #1A1A1A - Text Secondary: #666666 - Accent Orange: #FF6B00 (for deals/urgency) - Accent Red: #E53935 (for discounts) COMPONENT ARCHITECTURE: - App.tsx: Minimal wrapper - pages/HomePage.tsx: Main page orchestrator - components/Header.tsx: Sticky header with search, location, cart - components/PromoBanner.tsx: Hero carousel - components/QuickActions.tsx: Service/action icon grid - components/FlashDeals.tsx: Time-limited offers section - components/CategoryGrid.tsx: Visual category tiles - components/ProductCard.tsx: Reusable product card - components/ProductSection.tsx: Horizontal product scroll section - components/LoyaltyBanner.tsx: Club Cruz Verde CTA - components/ReorderSection.tsx: Past purchases quick reorder - components/BottomNav.tsx: Fixed bottom navigation TECHNICAL: - MUI components as required - Tailwind for layout/spacing - Lucide-react icons - Mobile-first (max-w-[430px] centered) - Smooth scrolling, proper touch targets (44px min) SCOPE BOUNDARIES: - No actual routing/navigation - No real API calls - No authentication flow - Mock data only - Single page (home screen)