name: nuude-ecommerce
description: Build and review the NUUDE premium lipstick e-commerce experience, including homepage sections, product pages, shade selection, conversion flows, responsive behavior, and brand-specific visual rules. Use for NUUDE storefront work in Stitch or frontend code.
NUUDE E-Commerce Build Skill
Purpose
Build the NUUDE premium lipstick e-commerce website using Stitch. Every component must feel premium, modern, and conversion-optimised.
Homepage Sections (Build in This Order)
1. AnnouncementBar
- Sticky on mobile. Black background (#0D0D0D), cream text (#FAF7F2)
- Content: "Free shipping on ₹999+ | Cruelty-Free & Vegan | Launch: 25% Off"
- Single line. No close button.
2. Navigation
- Items: SHOP | SHADES | OUR STORY | SHADE FINDER | Cart icon
- Logo: "NUUDE" in Playfair Display, center-aligned
- Transparent over hero on desktop, solid on scroll
- No dropdowns on mobile — hamburger to full-screen menu
3. HeroSection
- Full-bleed background (solid deep wine #6B1D2A or image placeholder)
- "NUUDE" in large Playfair Display, white
- Tagline: "Colour, considered." below
- CTA button: "SHOP NOW" — black fill, cream text, sharp rectangle
- Mobile: 80vh height. CTA in thumb-reach zone (bottom 40% of screen)
4. BestsellerStrip
- Horizontal scroll on mobile
- 4 shade swatches as coloured circles (use actual hex colours from shade data)
- Below each: shade name + "₹699" price
- Tap = links to product page
5. BrandPromiseBar
- Three columns, single row
- Icon + label each: "10-Hr Stay" | "Hydrating Formula" | "Cruelty-Free"
- Minimal. No paragraphs.
6. ShadeFinderCTA
- Full-width section, cream background
- Heading: "Find Your Perfect Shade in 60 Seconds"
- Button: "TAKE THE QUIZ" — wine (#6B1D2A) fill, cream text
7. SocialProofGrid
- Grid of 4–6 placeholder squares (representing UGC)
- Label: "Real shades. Real skin."
8. BrandStoryTeaser
- 2 lines max: "Born from a belief that lip colour should feel as extraordinary as the woman wearing it."
- Link: "Read Our Story →"
9. EmailCapture
- Heading: "Join the inner circle"
- Subtext: "Get 15% off your first order"
- Single input field + submit button
- Links: Shop | FAQ | Shipping & Returns | Contact
- Social: Instagram icon
- Payment badges placeholder
- "Made in India with love"
Product Page Structure
Image Area
- Left side on desktop, full-width on mobile
- Swipeable gallery with dot indicators
- First image: shade colour block (not product photo)
Product Info
- Product title: "NUUDE Velvet Matte — [Shade Name]"
- Price: ₹899 strikethrough, ₹699 active
- Shade selector: row of colour dots, tap to select
- Shade description: one evocative line
- Skin tone hint: "Best for: [match]"
- Add to Cart: full-width black button, sticky on mobile
- Below button: "Ships in 2–3 days | Free returns"
- Trust badges: 4 icons in a row
Below the Fold
- Ingredients accordion
- How to Wear (3 looks)
- Complete the Look (cross-sell)
- Reviews section
- Recently Viewed strip