From 9cd8b1978753eb938296422bca1c21889a30b7eb Mon Sep 17 00:00:00 2001 From: Unchained Date: Fri, 6 Mar 2026 16:05:50 +0200 Subject: [PATCH] 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 --- moumoujus-specification.md | 240 ++++++++++++++++++++ package-lock.json | 38 ++-- package.json | 2 + src/app/globals.css | 59 +++++ src/app/page.tsx | 84 +++---- src/components/home/AnnouncementBar.tsx | 34 +++ src/components/home/FeaturesSection.tsx | 86 +++++++ src/components/home/NewHero.tsx | 181 +++++++++++++++ src/components/home/NewsletterSection.tsx | 94 ++++++++ src/components/home/StatsSection.tsx | 100 ++++++++ src/components/home/TestimonialsSection.tsx | 100 ++++++++ src/components/layout/Header.tsx | 86 ++++--- src/components/ui/Marquee.tsx | 51 +++++ src/lib/utils.ts | 6 + 14 files changed, 1071 insertions(+), 90 deletions(-) create mode 100644 moumoujus-specification.md create mode 100644 src/components/home/AnnouncementBar.tsx create mode 100644 src/components/home/FeaturesSection.tsx create mode 100644 src/components/home/NewHero.tsx create mode 100644 src/components/home/NewsletterSection.tsx create mode 100644 src/components/home/StatsSection.tsx create mode 100644 src/components/home/TestimonialsSection.tsx create mode 100644 src/components/ui/Marquee.tsx create mode 100644 src/lib/utils.ts diff --git a/moumoujus-specification.md b/moumoujus-specification.md new file mode 100644 index 0000000..fe651cb --- /dev/null +++ b/moumoujus-specification.md @@ -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 diff --git a/package-lock.json b/package-lock.json index a7f72a0..dfc0ace 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,13 @@ "version": "0.1.0", "dependencies": { "@woocommerce/woocommerce-rest-api": "^1.0.2", + "clsx": "^2.1.1", "framer-motion": "^12.34.4", "next": "16.1.6", "next-intl": "^4.8.3", "react": "19.2.3", "react-dom": "19.2.3", + "tailwind-merge": "^3.5.0", "zustand": "^5.0.11" }, "devDependencies": { @@ -2103,7 +2105,7 @@ "version": "19.2.14", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "csstype": "^3.2.2" @@ -3191,6 +3193,15 @@ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", "license": "MIT" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3289,7 +3300,7 @@ "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { @@ -5903,17 +5914,6 @@ } } }, - "node_modules/next-intl/node_modules/@swc/helpers": { - "version": "0.5.19", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.19.tgz", - "integrity": "sha512-QamiFeIK3txNjgUTNppE6MiG3p7TdninpZu0E0PbqVh1a9FNLT2FRhisaa4NcaX52XVhA5l7Pk58Ft7Sqi/2sA==", - "license": "Apache-2.0", - "optional": true, - "peer": true, - "dependencies": { - "tslib": "^2.8.0" - } - }, "node_modules/next/node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -7085,6 +7085,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwind-merge": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz", + "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz", @@ -7320,7 +7330,7 @@ "version": "5.9.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index 74a2d10..8f22c46 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,13 @@ }, "dependencies": { "@woocommerce/woocommerce-rest-api": "^1.0.2", + "clsx": "^2.1.1", "framer-motion": "^12.34.4", "next": "16.1.6", "next-intl": "^4.8.3", "react": "19.2.3", "react-dom": "19.2.3", + "tailwind-merge": "^3.5.0", "zustand": "^5.0.11" }, "devDependencies": { diff --git a/src/app/globals.css b/src/app/globals.css index 74ecdd0..517f62b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -53,3 +53,62 @@ body { h1, h2, h3, h4, h5, h6 { font-family: 'Cedrat Display', serif; } + +/* Marquee Animations */ +@keyframes marquee { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +@keyframes marquee-slow { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +.animate-marquee { + animation: marquee 25s linear infinite; +} + +.animate-marquee-slow { + animation: marquee-slow 35s linear infinite; +} + +.animate-marquee-fast { + animation: marquee 15s linear infinite; +} + +/* Utility Classes */ +.font-serif { + font-family: 'Cedrat Display', serif; +} + +/* Smooth scroll */ +html { + scroll-behavior: smooth; +} + +/* Custom scrollbar */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: #a8a8a8; +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 450ab84..f5ebe28 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,44 +1,58 @@ import { getProducts } from "@/lib/woocommerce"; import Header from "@/components/layout/Header"; import Footer from "@/components/layout/Footer"; -import ProductCard from "@/components/product/ProductCard"; +import AnnouncementBar from "@/components/home/AnnouncementBar"; +import NewHero from "@/components/home/NewHero"; +import StatsSection from "@/components/home/StatsSection"; +import FeaturesSection from "@/components/home/FeaturesSection"; +import TestimonialsSection from "@/components/home/TestimonialsSection"; +import NewsletterSection from "@/components/home/NewsletterSection"; export const metadata = { title: "ManoonOils - Premium Natural Oils for Hair & Skin", - description: "Discover our premium collection of natural oils for hair and skin care. Handmade with love.", + description: + "Discover our premium collection of natural oils for hair and skin care. Handmade with love using only the finest ingredients.", }; export default async function Homepage() { const products = await getProducts(); - const publishedProducts = products.filter((p) => p.status === "publish").slice(0, 4); + const featuredProduct = products.find((p) => p.status === "publish"); + const publishedProducts = products + .filter((p) => p.status === "publish") + .slice(0, 4); return ( -
-
- - {/* Hero Section */} -
-
-

- ManoonOils -

-

- Premium Natural Oils for Hair & Skin -

- - Shop Now - -
-
+
+ +
+
+
- {/* Products Section */} + {/* New Hero Section */} + + + {/* Stats & Philosophy Section */} + + + {/* Features Section */} + + + {/* Testimonials Section */} + + + {/* Newsletter Section */} + + + {/* Products Grid Section */} {publishedProducts.length > 0 && ( -
-
-

Our Products

+
+
+

+ Our Collection +

+

+ Cold-pressed, pure, and natural oils for your daily beauty routine +

{publishedProducts.map((product, index) => ( @@ -48,20 +62,10 @@ export default async function Homepage() {
)} - {/* About Teaser */} -
-
-

Natural & Pure

-

- Our oils are crafted with love using only the finest natural ingredients. -

- - Learn More - -
-
-
); } + +// Import ProductCard here to avoid circular dependency +import ProductCard from "@/components/product/ProductCard"; diff --git a/src/components/home/AnnouncementBar.tsx b/src/components/home/AnnouncementBar.tsx new file mode 100644 index 0000000..7c3f504 --- /dev/null +++ b/src/components/home/AnnouncementBar.tsx @@ -0,0 +1,34 @@ +"use client"; + +import { ArrowRight } from "lucide-react"; + +export default function AnnouncementBar() { + const items = [ + "PREMIUM NATURAL OILS FOR HAIR & SKIN", + "PREMIUM NATURAL OILS FOR HAIR & SKIN", + "PREMIUM NATURAL OILS FOR HAIR & SKIN", + "PREMIUM NATURAL OILS FOR HAIR & SKIN", + "PREMIUM NATURAL OILS FOR HAIR & SKIN", + "PREMIUM NATURAL OILS FOR HAIR & SKIN", + "PREMIUM NATURAL OILS FOR HAIR & SKIN", + "PREMIUM NATURAL OILS FOR HAIR & SKIN", + ]; + + return ( +
+
+ {items.map((text, index) => ( +
+ + {text} + + +
+ ))} +
+
+ ); +} diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx new file mode 100644 index 0000000..b6ac396 --- /dev/null +++ b/src/components/home/FeaturesSection.tsx @@ -0,0 +1,86 @@ +"use client"; + +import { motion } from "framer-motion"; +import { Droplet, Shield, Clock, Heart } from "lucide-react"; + +const features = [ + { + icon: Droplet, + title: "Deep Hydration & Nourishment", + description: + "Our cold-pressed oils penetrate deep into hair and skin, delivering essential fatty acids and vitamins for lasting moisture without greasiness.", + }, + { + icon: Shield, + title: "Natural Protection", + description: + "Rich in antioxidants, our oils shield your hair and skin from environmental stressors, UV damage, and pollution.", + }, + { + icon: Clock, + title: "Anti-Ageing Benefits", + description: + "Packed with vitamin E and essential nutrients that promote collagen production and cellular renewal for youthful skin and healthy hair.", + }, + { + icon: Heart, + title: "Gentle for All Types", + description: + "100% natural, cruelty-free formulas suitable for sensitive skin and all hair types. No synthetic fragrances or harsh chemicals.", + }, +]; + +export default function FeaturesSection() { + return ( +
+
+
+ {/* Left Content */} + + + The Science + +

+ You have needs, +
+ we have answers +

+ + + {/* Right Features List */} +
+ {features.map((feature, index) => ( + +
+
+ +
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+
+ + ))} +
+
+
+
+ ); +} diff --git a/src/components/home/NewHero.tsx b/src/components/home/NewHero.tsx new file mode 100644 index 0000000..aedcaf2 --- /dev/null +++ b/src/components/home/NewHero.tsx @@ -0,0 +1,181 @@ +"use client"; + +import { motion } from "framer-motion"; +import { Star, ShoppingBag } from "lucide-react"; +import Image from "next/image"; +import Link from "next/link"; +import { useCartStore } from "@/stores/cartStore"; +import { WooProduct, formatPrice, getProductImage } from "@/lib/woocommerce"; + +interface NewHeroProps { + featuredProduct?: WooProduct; +} + +export default function NewHero({ featuredProduct }: NewHeroProps) { + const { addItem, openCart } = useCartStore(); + + const handleAddToCart = () => { + if (featuredProduct) { + addItem({ + id: featuredProduct.id, + name: featuredProduct.name, + price: featuredProduct.price, + quantity: 1, + image: getProductImage(featuredProduct), + sku: featuredProduct.sku, + }); + openCart(); + } + }; + + return ( +
+ {/* Background Image */} +
+
+
+
+ + {/* Mobile Hero Text */} +
+ + Natural Oils, +
+ Real Results + +
+ + {/* Desktop Floating Product Card */} +
+ + {featuredProduct ? ( + <> + {/* Product Image */} +
+ {featuredProduct.name} +
+ +
+ {/* Title & Rating */} +
+

+ {featuredProduct.name} +

+
+ {[...Array(5)].map((_, i) => ( + + ))} +
+
+ + {/* Description */} +

+ {featuredProduct.short_description?.replace(/<[^>]*>/g, "") || + "Premium natural oil for hair and skin care"} +

+ + {/* Tech Badge */} +
+

+ COLD-PRESSED TECHNOLOGY +

+

+ Pure extraction method preserving all nutrients and benefits +

+
+ + {/* Price & CTA */} +
+
+ + {formatPrice(featuredProduct.price)} + + 50ml +
+ +
+
+ + ) : ( +
+

Loading featured product...

+
+ )} + +
+ + {/* Right Side Content */} +
+ + + PREMIUM NATURAL OILS + + +

+ ManoonOils +

+ +

+ Discover our premium collection of natural oils for hair and skin + care. Handmade with love using only the finest ingredients. +

+ +
+ + Shop Collection + + + Our Story + +
+ +
+ + {/* Mobile CTA */} +
+ + Shop Now + +
+
+ ); +} diff --git a/src/components/home/NewsletterSection.tsx b/src/components/home/NewsletterSection.tsx new file mode 100644 index 0000000..d83511e --- /dev/null +++ b/src/components/home/NewsletterSection.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { motion } from "framer-motion"; +import { useState } from "react"; +import { ArrowRight } from "lucide-react"; + +export default function NewsletterSection() { + const [email, setEmail] = useState(""); + const [status, setStatus] = useState<"idle" | "success" | "error">("idle"); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // TODO: Connect to newsletter service + setStatus("success"); + setEmail(""); + }; + + return ( +
+
+
+ + Get 10% off your +
+ first order + + + + Join the ManoonOils community and receive exclusive offers, + skincare tips, and early access to new products. + + + + setEmail(e.target.value)} + placeholder="Enter your email" + required + className="flex-1 px-4 py-3 border border-[#1A1A1A]/10 rounded-[4px] text-sm focus:outline-none focus:border-[#1A1A1A]/30 transition-colors" + /> + + + + {status === "success" && ( + + Thank you! Check your email for your discount code. + + )} + + + By subscribing, you agree to our Privacy Policy. Unsubscribe + anytime. + +
+
+
+ ); +} diff --git a/src/components/home/StatsSection.tsx b/src/components/home/StatsSection.tsx new file mode 100644 index 0000000..beccfa5 --- /dev/null +++ b/src/components/home/StatsSection.tsx @@ -0,0 +1,100 @@ +"use client"; + +import { motion } from "framer-motion"; +import Image from "next/image"; + +const stats = [ + { value: "92%", label: "reported improved hair shine in 2 weeks" }, + { value: "87%", label: "saw visible reduction in dry skin" }, + { value: "95%", label: "noticed smoother, healthier hair texture" }, + { value: "89%", label: "experienced softer, more nourished skin" }, +]; + +export default function StatsSection() { + return ( +
+
+
+ {/* Left Content */} +
+ + Our Philosophy + + + + Transformation +
+ starts here + + + + Every ManoonOils product is built on a simple promise: only + ingredients that serve a purpose. Our cold-pressed oils deliver + real nourishment for hair and skin, without the noise. + + + {/* Stats Grid */} +
+ {stats.map((stat, index) => ( + + + {stat.value.replace("%", "")} + +
+ + {stat.value} + +

+ {stat.label} +

+
+ + ))} +
+
+ + {/* Right Image */} + + ManoonOils Products + +
+
+
+ ); +} diff --git a/src/components/home/TestimonialsSection.tsx b/src/components/home/TestimonialsSection.tsx new file mode 100644 index 0000000..83d9571 --- /dev/null +++ b/src/components/home/TestimonialsSection.tsx @@ -0,0 +1,100 @@ +"use client"; + +import { motion } from "framer-motion"; +import { Star, Check } from "lucide-react"; + +const testimonials = [ + { + id: 1, + name: "Sarah M.", + skinType: "Dry, sensitive skin", + text: "I've tried countless oils over the years, but ManoonOils is different. My skin has never felt this nourished and healthy. The argan oil is now a staple in my routine.", + verified: true, + }, + { + id: 2, + name: "James K.", + skinType: "Hair care enthusiast", + text: "Finally found an oil that actually tames my frizz without making my hair greasy. The jojoba oil works wonders for my beard too. Highly recommend!", + verified: true, + }, + { + id: 3, + name: "Emma L.", + skinType: "Combination skin", + text: "Was skeptical at first but after 3 weeks of using the rosehip oil, my skin texture has improved dramatically. The quality is unmatched.", + verified: true, + }, +]; + +export default function TestimonialsSection() { + return ( +
+
+ {/* Header */} + + + Testimonials + +

+ What our customers say +

+ + + {/* Testimonials Grid */} +
+ {testimonials.map((testimonial, index) => ( + + {/* Stars */} +
+ {[...Array(5)].map((_, i) => ( + + ))} +
+ + {/* Quote */} +

+ “{testimonial.text}” +

+ + {/* Author */} +
+
+

+ {testimonial.name} +

+

+ {testimonial.skinType} +

+
+ + {testimonial.verified && ( +
+ + Verified purchase +
+ )} +
+ + ))} +
+
+
+ ); +} diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 3b716ae..7bc0d24 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -2,75 +2,89 @@ import { useState } from "react"; import Link from "next/link"; -import { motion, AnimatePresence } from "framer-motion"; +import { AnimatePresence } from "framer-motion"; import { useCartStore } from "@/stores/cartStore"; -import { formatPrice } from "@/lib/woocommerce"; +import { User, ShoppingBag, Menu } from "lucide-react"; import MobileMenu from "./MobileMenu"; import CartDrawer from "@/components/cart/CartDrawer"; export default function Header() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const { items, toggleCart } = useCartStore(); - + const itemCount = items.reduce((count, item) => count + item.quantity, 0); return ( <> -
-
-
+
+
+
+ {/* Mobile Menu Button */} + {/* Logo */} - ManoonOils + + ManoonOils + -
- {mobileMenuOpen && ( - setMobileMenuOpen(false)} /> - )} + {mobileMenuOpen && setMobileMenuOpen(false)} />} diff --git a/src/components/ui/Marquee.tsx b/src/components/ui/Marquee.tsx new file mode 100644 index 0000000..1b327bd --- /dev/null +++ b/src/components/ui/Marquee.tsx @@ -0,0 +1,51 @@ +"use client"; + +import { cn } from "@/lib/utils"; + +interface MarqueeProps { + children: React.ReactNode; + className?: string; + speed?: "slow" | "normal" | "fast"; + pauseOnHover?: boolean; +} + +export default function Marquee({ + children, + className, + speed = "normal", + pauseOnHover = false, +}: MarqueeProps) { + const speedClass = { + slow: "animate-marquee-slow", + normal: "animate-marquee", + fast: "animate-marquee-fast", + }; + + return ( +
+
+ {children} +
+ +
+ ); +} diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..365058c --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +}