unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
625bd727d3ac971433dad25fa0921d8bd1bbe1db
manoon-headless/REDESIGN_SPECIFICATION.md
Unchained 7c05bd2346 Redesign phase 1: Homepage polish and design system foundation 
- Fix newsletter subscribe box centering on homepage
- Fix header overlap on product pages (pt-[72px] instead of pt-[100px])
- Add scroll-mt-[72px] for smooth scroll anchor offset
- Add HeroVideo component with video hero placeholder
- Add REDESIGN_SPECIFICATION.md with 9-phase design plan
- Clean up globals.css theme declarations and comments
- Update Header with improved sticky behavior and cart
- Update ProductDetail with better layout and spacing
- Update CartDrawer with improved slide-out cart UI
- Add English translations for updated pages
- Various CSS refinements across pages
2026-03-21 16:22:17 +02:00

445 lines
16 KiB
Markdown
Raw Blame History

# 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
Reference in New Issue View Git Blame Copy Permalink