# MOUMOUJUS.COM - Complete Technical Specification

## 1. TECH STACK

| Component | Technology |
|-----------|------------|
| **Framework** | Next.js 15 (App Router) |
| **Language** | TypeScript |
| **Styling** | Tailwind CSS |
| **Build Tool** | Turbopack |
| **Hosting** | Vercel |
| **Fonts** | DM Sans (body), Cedrat Display (headings) |
| **Animations** | CSS Animations + Framer Motion (scroll animations) |
| **Push Notifications** | OneSignal |
| **Images** | WebP format, Next.js Image optimization |

## 2. COLOR PALETTE

| Token | Value | Usage |
|-------|-------|-------|
| `bg-ice-blue` | `#E8F4F8` | Primary background, hero sections |
| `bg-ice-blue-light` | `#F0F7FA` | Secondary background, testimonials |
| `text-heading` | `#1A1A1A` | Headlines, primary text |
| `text-foreground` | `#4A4A4A` | Body text |
| `text-muted` | `#6B7280` | Labels, captions |
| `border-border-light` | `rgba(26,26,26,0.06)` | Subtle borders |
| `text-success` | `#10B981` | Success states, checkmarks |
| `white` | `#FFFFFF` | Cards, overlays |

## 3. TYPOGRAPHY

### Primary Font (Body): DM Sans
- Weights: 300, 400, 500, 600, 700
- Fallback: Arial, sans-serif

### Secondary Font (Headings): Cedrat Display
- Weights: 100, 300, 400, 700 + Italic variants
- Used for: `.font-serif` class (all headlines)

### Typography Scale
| Element | Size | Weight | Line Height | Tracking |
|---------|------|--------|-------------|----------|
| H1 (Hero) | `text-3xl` → `text-5xl` | 400 | `leading-[1.15]` | `tracking-tight` |
| H2 (Section) | `text-4xl` → `text-6xl` | 400 italic | `leading-[1.1]` | `tracking-tight` |
| H3 (Cards) | `text-lg` → `text-xl` | 500 | Normal | `tracking-wide` |
| Body | `text-base` | 400 | `leading-relaxed` | Normal |
| Label | `text-xs` | 500 | Normal | `tracking-[0.3em]` uppercase |
| Caption | `text-[11px]` | 500 | Normal | `tracking-wider` uppercase |

## 4. HEADER / ANNOUNCEMENT BAR

**Position:** Fixed top, full width, z-index 50
**Background:** `bg-ice-blue` (light blue)
**Height:** ~40px

### Marquee Animation
- **Content:** Repeating text: "CERAMIDE MOISTURISER FOR BARRIER REPAIR" with arrows (→)
- **Animation:** `animate-marquee` - infinite horizontal scroll left
- **Speed:** ~30 seconds per cycle
- **Icon:** Lucide ArrowRight
- **Gap between items:** `mx-10 lg:mx-16`
- **Typography:** `text-xs tracking-[0.12em] uppercase text-heading/70`

### Navigation Bar (Sticky)
**Height:** 64px
**Max Width:** 1400px
**Padding:** `px-6`

#### Left Side:
- Logo: SVG format
- Height: `h-5 lg:h-6`

#### Right Side Icons:
1. Account/User
2. Shopping Bag
3. Mobile Menu (Hamburger)

## 5. HERO SECTION

**Height:** `100vh` (full viewport)
**Position:** `relative`, `overflow-hidden`

### Background
**Image:** Full cover hero image
**Overlay:** None visible

### Mobile Hero Text (Bottom Center)
**Position:** Absolute, flex justify-end
**Headline:**
- Font: Cedrat Display, italic
- Size: `text-3xl`
- Color: White
- Text: "Barrier Repair, Real Results"

### Desktop Floating Product Card
**Position:** `absolute left-10 lg:left-20 top-24 lg:top-28`
**Width:** `300px` → `320px`
**Background:** `bg-white/95 backdrop-blur-md`
**Border Radius:** `rounded-[4px]`
**Shadow:** `shadow-lg`

#### Card Content:
1. Product Image
2. Title: "The Mantle" + 5-star rating
3. Subtitle: Product description
4. Tech Badge: "STRATA-3™ Technology"
5. Price + "Add to Cart" button

## 6. BRAND MARQUEE

**Background:** White
**Border:** `border-y border-border-light`
**Animation:** `animate-marquee-slow`
**Logos:** ~12+ SVG logos in grayscale

## 7. PHILOSOPHY / MANIFESTO SECTION

### Sticky Phone Mockup (Left Side)
**Phone Frame:**
- Width: `360px`, Height: `700px`
- Rounded: `rounded-[4px]`
- Background: Gradient

**Rotating Border:**
- Dashed circle
- Animation: `spin 60s linear infinite`

### Scrolling Content (Right Side)

**Section 1: Featured Product**
- Label: "Featured"
- Headline: "The Mantle" (italic serif)
- Body text + CTA button

**Section 2: The Science**
- Headline: "You have needs, we have answers"
- 4 accordion items with icons:
  1. Skin Barrier Repair & Hydration
  2. Environmental Protection with Ectoin
  3. Anti-Ageing with Peptides & Exosomes
  4. Best Moisturiser for Sensitive Skin

## 8. TRANSFORMATION / STATS SECTION

**Background:** `bg-ice-blue`
**Stats Grid (4 columns):**
| Stat | Value |
|------|-------|
| 92% | improved hydration |
| 87% | reduction in fine lines |
| 95% | smoother skin texture |
| 89% | calmer skin |

## 9. STRATA-3™ TECHNOLOGY SECTION

**Three Levels (1-2-3):**
1. **Cellular** - Ectoin and exosomes
2. **Tissue** - Peptides and stem cells
3. **Surface** - Triple ceramide complex

## 10. HAPPY FACE GUARANTEE

**Headline:** "Happy Face Guarantee"
**Content:** Full refund policy description
**Icon:** Shield with checkmark

## 11. BEFORE/AFTER TESTIMONIALS

**Background:** `bg-ice-blue-light`
**Card Style:**
- White background, rounded corners
- 5-star rating
- Quote (italic serif)
- Author name + skin type
- "Verified purchase" badge

## 12. FAQ SECTION

Accordion style with dashed borders
Sample questions about product usage, shipping, etc.

## 13. EMAIL SIGNUP / DISCOUNT

**Headline:** "Get 11% off your first order"
**Form:** Email input + Subscribe button

## 14. FOOTER

**5 Columns:**
1. Who is Moumoujus?
2. About
3. Shop
4. Help
5. Connect

**Bottom Bar:** Copyright, legal links, payment icons

## 15. ANIMATIONS

### Scroll Animations
- Fade In Up: opacity 0→1, translateY 20px→0
- Duration: 600-800ms
- Stagger: 100-150ms

### Hover Effects
- Button: Text slide effect
- Links: Color transition + underline
- Cards: Subtle lift

### Marquees
```css
animation: marquee 30s linear infinite;
```

## 16. IMAGES NEEDED

- Logo (SVG)
- Hero background (WebP)
- Product images
- Before/After photos
- Testimonial videos

## 17. RESPONSIVE BREAKPOINTS

- Mobile: < 640px
- Tablet: 640px+
- Desktop: 1024px+
- Wide: 1280px+

## 18. COMPONENTS TO BUILD

1. Marquee
2. StickyPhone
3. ProductCard
4. TestimonialCard
5. Accordion
6. AnimatedButton
7. StarRating
8. BeforeAfter
9. NewsletterForm