manoon-headless/REDESIGN_SPECIFICATION.md

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