Files

Unchained 9cd8b19787 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

2026-03-06 16:05:50 +02:00

6.0 KiB

Raw Permalink Blame History

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

Height: 64px Max Width: 1400px Padding: px-6

Left Side:

Logo: SVG format
Height: h-5 lg:h-6

Right Side Icons:

Account/User
Shopping Bag
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:

Product Image
Title: "The Mantle" + 5-star rating
Subtitle: Product description
Tech Badge: "STRATA-3™ Technology"
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):

Cellular - Ectoin and exosomes
Tissue - Peptides and stem cells
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.

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

14. FOOTER

5 Columns:

Who is Moumoujus?
About
Shop
Help
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

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

Marquee
StickyPhone
ProductCard
TestimonialCard
Accordion
AnimatedButton
StarRating
BeforeAfter
NewsletterForm

6.0 KiB Raw Permalink Blame History