Redesign homepage with moumoujus-inspired layout
- Add AnnouncementBar with marquee animation - Add NewHero with floating product card - Add StatsSection with large stat numbers - Add FeaturesSection with icons - Add TestimonialsSection with cards - Add NewsletterSection with signup form - Update Header styling for new design - Update globals.css with marquee animations - Update page.tsx to use new components All existing WooCommerce functionality preserved
This commit is contained in:
Unchained
240
moumoujus-specification.md
Normal file
240
moumoujus-specification.md
Normal file
@@ -0,0 +1,240 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user