# ManoonOils Redesign Specification ## Inspired by moumoujus.com Premium Skincare Aesthetic --- ## Design Analysis Summary ### Key Visual Elements from moumoujus.com: 1. **Hero Section**: Full-screen video background with autoplay, muted, loop 2. **Navigation**: Minimalist sticky header with logo left, nav center, icons right 3. **Typography**: Clean sans-serif, generous letter-spacing, all-caps for headings 4. **Color Palette**: - White/Off-white backgrounds - Soft blue-gray accents (#e8f0f5 range) - Black for CTAs and text - Gold/bronze highlights for luxury feel 5. **Product Pages**: Two-column layout, vertical thumbnails, expandable sections 6. **Cart**: Slide-out drawer from right --- ## Phase 1: Global Design System & Theme ### Color Palette Refinement ``` Primary: - Background: #ffffff (pure white) - Background-alt: #f8f9fa (soft gray-white) - Text: #1a1a1a (near black) - Text-muted: #666666 (gray) Accent: - Accent-blue: #e8f0f5 (soft blue-gray) - Accent-blue-dark: #a8c5d8 - CTA-black: #000000 - Gold: #c9a962 (for awards/accents) UI: - Border: #e5e5e5 - Border-dark: #d1d1d1 ``` ### Typography System ``` Display Font: Inter or DM Sans (clean, modern) - H1: 48px/56px, font-weight: 500, letter-spacing: -0.02em - H2: 36px/44px, font-weight: 500 - H3: 24px/32px, font-weight: 500 - Body: 16px/24px - Small: 14px/20px - Caption: 12px/16px, uppercase, letter-spacing: 0.1em ``` ### Spacing System ``` - xs: 4px - sm: 8px - md: 16px - lg: 24px - xl: 32px - 2xl: 48px - 3xl: 64px - 4xl: 96px - 5xl: 128px ``` ### TODOs: - [ ] Update CSS variables in globals.css - [ ] Define new color tokens - [ ] Update font system (keep DM Sans, add Inter for UI) - [ ] Create design token file - [ ] Update Tailwind theme config --- ## Phase 2: Navigation & Header Redesign ### Header Layout (inspired by moumoujus.com) ``` [Logo] [Shop] [About] [Library] [Contact] [Account] [Cart (0)] ``` ### Specifications: - **Height**: 72px desktop, 64px mobile - **Background**: White with subtle bottom border (#e5e5e5) - **Position**: Sticky top-0 (not 10px offset like current) - **Logo**: Centered on mobile, left on desktop - **Nav Links**: Centered, uppercase, letter-spacing: 0.05em, font-size: 13px - **Icons**: User outline, Shopping bag outline - **Cart Badge**: Small dot or number in circle ### Mobile Menu: - Full-screen overlay - Large typography for nav links - Close button top right - Social links at bottom ### TODOs: - [ ] Redesign Header.tsx with new layout - [ ] Update MobileMenu.tsx with full-screen overlay - [ ] Implement sticky header behavior - [ ] Add scroll-based background change (transparent → white) - [ ] Update cart icon with new design - [ ] Add hover states for nav links (underline animation) --- ## Phase 3: Homepage Hero with Video Background ### Hero Section Specifications: ``` ┌─────────────────────────────────────────────────────┐ │ [Video Background - Full Screen] │ │ │ │ │ │ [Product Shot or Lifestyle Video] │ │ │ │ │ │ [Brand Tagline] │ │ PREMIUM ORGANIC OILS │ │ │ │ [Shop Now Button - Black] │ └─────────────────────────────────────────────────────┘ ``` ### Technical Requirements: - Video: MP4/WebM format, 1920x1080, <5MB - Autoplay, muted, loop, playsinline - Poster image for loading state - Gradient overlay for text readability - Text centered, white color - Scroll indicator at bottom ### TODOs: - [ ] Create new HeroVideo component - [ ] Add video asset (placeholder for now) - [ ] Implement video background with overlay - [ ] Add centered text content with animation - [ ] Create scroll-down indicator - [ ] Add poster image fallback - [ ] Ensure mobile fallback (image instead of video) --- ## Phase 4: Product Detail Page Redesign ### Layout Structure (Two-Column): ``` ┌─────────────────────────────────────────────────────┐ │ [Header - Sticky] │ ├─────────────────────────────────────────────────────┤ │ Home / [Product Name] │ ├──────────────────────┬──────────────────────────────┤ │ │ │ │ [Thumbnail 1] │ [Award Badge - optional] │ │ [Thumbnail 2] │ │ │ [Thumbnail 3] │ PRODUCT NAME │ │ │ Short description │ │ [Main Image] │ │ │ [Large, centered] │ £XX.00 ★★★★★ (12) │ │ │ │ │ │ ────────────────────── │ │ │ SIZE │ │ │ [50ml] [100ml] [250ml] │ │ │ ────────────────────── │ │ │ │ │ │ [ADD TO CART - FREE │ │ │ SHIPPING - Black Button] │ │ │ │ │ │ ────────────────────── │ │ │ BENEFITS │ │ │ [Tag 1] [Tag 2] [Tag 3] │ │ │ ────────────────────── │ │ │ DESCRIPTION [+] │ │ │ ────────────────────── │ │ │ HOW TO USE [+] │ │ │ ────────────────────── │ │ │ INGREDIENTS [+] │ │ │ │ └──────────────────────┴──────────────────────────────┘ ``` ### Component Specifications: #### Image Gallery: - Vertical thumbnail list on left (desktop) - Horizontal thumbnails below (mobile) - Click to change main image - Zoom on hover (optional) - Smooth transitions #### Product Info: - Breadcrumb: Home / [Product Name] - Product name: 24-32px, font-weight: 500 - Short description below name - Price + reviews on same line - Size selector: Pill buttons - CTA: Full-width black button #### Expandable Sections: - Accordion style - Plus/minus icons - Smooth expand/collapse animation - Content: Description, How to Use, Ingredients ### TODOs: - [ ] Redesign ProductDetail.tsx with new two-column layout - [ ] Create ProductImageGallery component with vertical thumbnails - [ ] Add breadcrumb navigation - [ ] Create size selector component (pill buttons) - [ ] Implement expandable accordion sections - [ ] Add benefits/tags display - [ ] Style "Add to Cart" button (black, full-width) - [ ] Add star rating component - [ ] Make layout responsive --- ## Phase 5: Product Listing/Shop Page ### Layout: ``` ┌─────────────────────────────────────────────────────┐ │ [Header] │ ├─────────────────────────────────────────────────────┤ │ All Products [Sort] ├─────────────────────────────────────────────────────┤ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ │ │ │ │ │ │ │ │ Product │ │ Product │ │ Product │ │ │ │ £XX.00 │ │ £XX.00 │ │ £XX.00 │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ [Load More / Pagination] │ └─────────────────────────────────────────────────────┘ ``` ### Product Card Specifications: - Image: Square aspect ratio, object-cover - Product name: 14-16px, single line, truncate - Price: 14px, below name - Hover: Slight image zoom, shadow - Clean white background ### TODOs: - [ ] Redesign ProductCard.tsx - [ ] Create grid layout (3 columns desktop, 2 tablet, 1 mobile) - [ ] Add sorting dropdown - [ ] Implement hover effects - [ ] Add pagination or infinite scroll --- ## Phase 6: Cart Drawer & Checkout Flow ### Cart Drawer Design: ``` ┌──────────────────────────────────┐ │ YOUR CART [X] │ ├──────────────────────────────────┤ │ │ │ ┌────┐ Product Name 🗑️ │ │ │IMG │ Variant info │ │ └────┤ [-] 1 [+] £XX.00 │ │ │ │ ─────────────────────────────── │ │ │ │ ┌────┐ Another Product │ │ │IMG │ [-] 2 [+] £XX.00 │ │ └────┘ │ │ │ ├──────────────────────────────────┤ │ Subtotal £XX.00 │ │ Shipping FREE │ ├──────────────────────────────────┤ │ TOTAL £XX.00 │ │ │ │ [CHECKOUT - Black Button] │ │ [Continue Shopping] │ └──────────────────────────────────┘ ``` ### Specifications: - Slide in from right - Width: 400px desktop, 100% mobile - Backdrop blur/overlay - Quantity controls (+/-) - Remove item button - Clear subtotal/total breakdown - Prominent checkout CTA ### Checkout Page: - Multi-step or single-page - Shipping info - Payment method (COD for Serbia) - Order summary sidebar ### TODOs: - [ ] Redesign CartDrawer.tsx with slide-out design - [ ] Update cart item layout - [ ] Add quantity stepper controls - [ ] Style cart totals section - [ ] Improve checkout button - [ ] Add backdrop overlay - [ ] Add empty cart state - [ ] Test checkout flow end-to-end --- ## Phase 7: Footer & Trust Signals ### Footer Layout: ``` ┌─────────────────────────────────────────────────────┐ │ │ │ [NEWSLETTER SECTION] │ │ Stay updated with our latest offers │ │ [Email Input] [Subscribe] │ │ │ ├─────────────────────────────────────────────────────┤ │ │ │ SHOP ABOUT HELP SOCIAL │ │ - Products - Our Story - FAQ - IG │ │ - Bundles - Process - Shipping - FB │ │ - Gifts - Sourcing - Returns - X │ │ │ ├─────────────────────────────────────────────────────┤ │ │ │ [Payment Icons] [Security Badges] │ │ │ │ © 2024 ManoonOils. All rights reserved. │ │ │ └─────────────────────────────────────────────────────┘ ``` ### Trust Signals to Add: - Payment icons (Visa, Mastercard, PayPal) - Security badges (SSL, Secure checkout) - Shipping info - Money-back guarantee ### TODOs: - [ ] Redesign Footer.tsx - [ ] Add newsletter signup section - [ ] Create link columns - [ ] Add payment/security badges - [ ] Add social media links - [ ] Style copyright section --- ## Phase 8: Mobile Responsive Optimization ### Breakpoints: - Mobile: < 640px - Tablet: 640px - 1024px - Desktop: > 1024px ### Mobile-Specific Changes: - Hamburger menu with full-screen overlay - Single column product pages - Bottom sticky add-to-cart bar - Simplified navigation - Touch-friendly tap targets (min 44px) ### TODOs: - [ ] Test all pages on mobile viewport - [ ] Add bottom sticky CTA on product pages - [ ] Optimize images for mobile - [ ] Ensure touch targets are 44px+ - [ ] Test mobile navigation flow --- ## Phase 9: Performance & SEO Polish ### Performance: - Lazy load images - Video optimization (WebM + MP4) - Font preloading - CSS optimization ### SEO: - Meta titles/descriptions - Structured data (Product schema) - Open Graph tags - Alt text for images ### TODOs: - [ ] Add Next.js Image optimization - [ ] Implement lazy loading - [ ] Add meta tags for all pages - [ ] Add JSON-LD structured data - [ ] Optimize Core Web Vitals - [ ] Add sitemap.xml --- ## Asset Requirements ### Images Needed: 1. Hero video (MP4/WebM, 1920x1080) 2. Hero poster image (fallback) 3. Product photography (high-res, consistent style) 4. Lifestyle images for homepage sections ### Icons (Lucide): - All current icons are good - May need: Award, Leaf, Droplet (for benefits) --- ## Implementation Order ### Week 1: Foundation 1. Phase 1: Design System 2. Phase 2: Navigation ### Week 2: Core Pages 3. Phase 3: Hero Video 4. Phase 4: Product Detail Page ### Week 3: E-commerce 5. Phase 5: Shop Page 6. Phase 6: Cart & Checkout ### Week 4: Polish 7. Phase 7: Footer 8. Phase 8: Mobile 9. Phase 9: Performance --- ## Success Metrics - [ ] Homepage video loads < 3s - [ ] Product page LCP < 2.5s - [ ] Mobile score 90+ on Lighthouse - [ ] All pages responsive - [ ] Cart drawer works smoothly - [ ] No console errors - [ ] WCAG AA accessibility compliance