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
|
||||
38
package-lock.json
generated
38
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<main className="min-h-screen">
|
||||
<Header />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[80vh] flex items-center justify-center bg-gradient-to-b from-white to-background-ice">
|
||||
<div className="text-center px-4">
|
||||
<h1 className="text-5xl md:text-7xl font-serif mb-6">
|
||||
ManoonOils
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-foreground-muted mb-8">
|
||||
Premium Natural Oils for Hair & Skin
|
||||
</p>
|
||||
<a
|
||||
href="/products"
|
||||
className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium hover:bg-opacity-90 transition-all"
|
||||
>
|
||||
Shop Now
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<main className="min-h-screen bg-white">
|
||||
<AnnouncementBar />
|
||||
<div className="pt-10">
|
||||
<Header />
|
||||
</div>
|
||||
|
||||
{/* Products Section */}
|
||||
{/* New Hero Section */}
|
||||
<NewHero featuredProduct={featuredProduct} />
|
||||
|
||||
{/* Stats & Philosophy Section */}
|
||||
<StatsSection />
|
||||
|
||||
{/* Features Section */}
|
||||
<FeaturesSection />
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<TestimonialsSection />
|
||||
|
||||
{/* Newsletter Section */}
|
||||
<NewsletterSection />
|
||||
|
||||
{/* Products Grid Section */}
|
||||
{publishedProducts.length > 0 && (
|
||||
<section className="py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-4xl font-serif text-center mb-12">Our Products</h2>
|
||||
<section className="py-20 px-6 bg-white">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<h2 className="font-serif italic text-4xl text-center mb-4">
|
||||
Our Collection
|
||||
</h2>
|
||||
<p className="text-center text-[#4A4A4A] mb-12 max-w-2xl mx-auto">
|
||||
Cold-pressed, pure, and natural oils for your daily beauty routine
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{publishedProducts.map((product, index) => (
|
||||
<ProductCard key={product.id} product={product} index={index} />
|
||||
@@ -48,20 +62,10 @@ export default async function Homepage() {
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* About Teaser */}
|
||||
<section className="py-20 px-4 bg-background-ice">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-serif mb-6">Natural & Pure</h2>
|
||||
<p className="text-lg text-foreground-muted mb-8">
|
||||
Our oils are crafted with love using only the finest natural ingredients.
|
||||
</p>
|
||||
<a href="/about" className="text-foreground border-b border-foreground pb-1">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
// Import ProductCard here to avoid circular dependency
|
||||
import ProductCard from "@/components/product/ProductCard";
|
||||
|
||||
34
src/components/home/AnnouncementBar.tsx
Normal file
34
src/components/home/AnnouncementBar.tsx
Normal file
@@ -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 (
|
||||
<div className="fixed top-0 left-0 right-0 z-50 bg-[#E8F4F8] overflow-hidden">
|
||||
<div className="flex animate-marquee whitespace-nowrap py-2 will-change-transform">
|
||||
{items.map((text, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="inline-flex items-center gap-4 mx-5 shrink-0"
|
||||
>
|
||||
<span className="text-xs tracking-[0.12em] uppercase text-[#1A1A1A]/70 font-medium">
|
||||
{text}
|
||||
</span>
|
||||
<ArrowRight className="w-4 h-4 text-[#1A1A1A]/50" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
86
src/components/home/FeaturesSection.tsx
Normal file
86
src/components/home/FeaturesSection.tsx
Normal file
@@ -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 (
|
||||
<section className="py-24 lg:py-32 bg-white">
|
||||
<div className="max-w-[1400px] mx-auto px-6">
|
||||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20">
|
||||
{/* Left Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
|
||||
The Science
|
||||
</span>
|
||||
<h2 className="font-serif italic text-4xl lg:text-5xl xl:text-6xl text-[#1A1A1A] tracking-tight leading-[1.1] mb-6">
|
||||
You have needs,
|
||||
<br />
|
||||
we have answers
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
{/* Right Features List */}
|
||||
<div className="space-y-0">
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="border-b border-dashed border-[#1A1A1A]/10 py-6 first:pt-0 last:border-b-0"
|
||||
>
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="shrink-0 text-[#1A1A1A]/70 mt-0.5">
|
||||
<feature.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-[#1A1A1A] font-medium text-base tracking-wide mb-1.5">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-[#4A4A4A] text-sm leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
181
src/components/home/NewHero.tsx
Normal file
181
src/components/home/NewHero.tsx
Normal file
@@ -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 (
|
||||
<section className="relative h-screen min-h-[700px] flex flex-col overflow-hidden pt-10">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#E8F4F8]/30 to-white/80" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#E8F4F8]/50 via-transparent to-[#E8F4F8]/30" />
|
||||
</div>
|
||||
|
||||
{/* Mobile Hero Text */}
|
||||
<div className="relative z-10 flex flex-col justify-end items-center text-center p-6 pb-12 lg:hidden">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="font-serif italic text-3xl text-[#1A1A1A] leading-[1.15] tracking-tight"
|
||||
>
|
||||
Natural Oils,
|
||||
<br />
|
||||
Real Results
|
||||
</motion.h1>
|
||||
</div>
|
||||
|
||||
{/* Desktop Floating Product Card */}
|
||||
<div className="hidden lg:block absolute left-10 xl:left-20 top-32 z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="bg-white/95 backdrop-blur-md w-[320px] xl:w-[360px] rounded-[4px] overflow-hidden shadow-lg"
|
||||
>
|
||||
{featuredProduct ? (
|
||||
<>
|
||||
{/* Product Image */}
|
||||
<div className="relative aspect-square bg-[#E8F4F8]">
|
||||
<Image
|
||||
src={getProductImage(featuredProduct)}
|
||||
alt={featuredProduct.name}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-5">
|
||||
{/* Title & Rating */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-lg font-medium text-[#1A1A1A]">
|
||||
{featuredProduct.name}
|
||||
</h3>
|
||||
<div className="flex items-center gap-0.5 shrink-0">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className="w-3.5 h-3.5 fill-amber-400 text-amber-400"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-[#4A4A4A]/70 mt-1 line-clamp-2">
|
||||
{featuredProduct.short_description?.replace(/<[^>]*>/g, "") ||
|
||||
"Premium natural oil for hair and skin care"}
|
||||
</p>
|
||||
|
||||
{/* Tech Badge */}
|
||||
<div className="mt-3 pt-3 border-t border-[#1A1A1A]/6">
|
||||
<p className="text-xs font-medium text-[#1A1A1A] tracking-wide">
|
||||
COLD-PRESSED TECHNOLOGY
|
||||
</p>
|
||||
<p className="text-xs text-[#4A4A4A]/60 mt-0.5 leading-relaxed">
|
||||
Pure extraction method preserving all nutrients and benefits
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Price & CTA */}
|
||||
<div className="flex items-center justify-between mt-4 pt-4 border-t border-[#1A1A1A]/6">
|
||||
<div>
|
||||
<span className="text-lg font-medium text-[#1A1A1A]">
|
||||
{formatPrice(featuredProduct.price)}
|
||||
</span>
|
||||
<span className="text-xs text-[#4A4A4A]/60 ml-2">50ml</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="inline-flex items-center gap-2 bg-[#1A1A1A] text-white px-4 py-2 text-sm font-medium hover:bg-[#1A1A1A]/90 transition-colors"
|
||||
>
|
||||
<ShoppingBag className="w-4 h-4" />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="p-8 text-center">
|
||||
<p className="text-[#4A4A4A]/70">Loading featured product...</p>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Right Side Content */}
|
||||
<div className="hidden lg:flex flex-1 items-center justify-end pr-10 xl:pr-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="max-w-xl text-right"
|
||||
>
|
||||
<span className="inline-block text-xs tracking-[0.3em] text-[#6B7280] mb-6">
|
||||
PREMIUM NATURAL OILS
|
||||
</span>
|
||||
|
||||
<h1 className="font-serif italic text-5xl xl:text-6xl text-[#1A1A1A] tracking-tight leading-[1.1] mb-6">
|
||||
ManoonOils
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-[#4A4A4A] font-light mb-8 leading-relaxed">
|
||||
Discover our premium collection of natural oils for hair and skin
|
||||
care. Handmade with love using only the finest ingredients.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-4 justify-end">
|
||||
<Link
|
||||
href="/products"
|
||||
className="inline-block bg-[#1A1A1A] text-white px-8 py-4 text-sm tracking-wide hover:bg-[#1A1A1A]/90 transition-colors"
|
||||
>
|
||||
Shop Collection
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className="inline-block border border-[#1A1A1A] text-[#1A1A1A] px-8 py-4 text-sm tracking-wide hover:bg-[#1A1A1A] hover:text-white transition-colors"
|
||||
>
|
||||
Our Story
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Mobile CTA */}
|
||||
<div className="lg:hidden relative z-10 px-6 pb-12">
|
||||
<Link
|
||||
href="/products"
|
||||
className="block w-full bg-[#1A1A1A] text-white text-center py-4 text-sm tracking-wide"
|
||||
>
|
||||
Shop Now
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
94
src/components/home/NewsletterSection.tsx
Normal file
94
src/components/home/NewsletterSection.tsx
Normal file
@@ -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 (
|
||||
<section className="border-t border-[#1A1A1A]/[0.06] py-14 lg:py-20 bg-white">
|
||||
<div className="max-w-[1400px] mx-auto px-6">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="font-serif italic text-4xl lg:text-5xl xl:text-[3.5rem] text-[#1A1A1A] tracking-tight leading-[1.1] mb-6"
|
||||
>
|
||||
Get 10% off your
|
||||
<br />
|
||||
first order
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-[#4A4A4A] mb-8"
|
||||
>
|
||||
Join the ManoonOils community and receive exclusive offers,
|
||||
skincare tips, and early access to new products.
|
||||
</motion.p>
|
||||
|
||||
<motion.form
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
onSubmit={handleSubmit}
|
||||
className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center justify-center gap-2 bg-[#1A1A1A] text-white px-6 py-3 text-sm font-medium hover:bg-[#1A1A1A]/90 transition-colors rounded-[4px]"
|
||||
>
|
||||
Subscribe
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
</motion.form>
|
||||
|
||||
{status === "success" && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="text-sm text-emerald-600 mt-4"
|
||||
>
|
||||
Thank you! Check your email for your discount code.
|
||||
</motion.p>
|
||||
)}
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="text-xs text-[#4A4A4A]/60 mt-4"
|
||||
>
|
||||
By subscribing, you agree to our Privacy Policy. Unsubscribe
|
||||
anytime.
|
||||
</motion.p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
100
src/components/home/StatsSection.tsx
Normal file
100
src/components/home/StatsSection.tsx
Normal file
@@ -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 (
|
||||
<section className="relative z-20 py-24 lg:py-32 bg-[#E8F4F8]">
|
||||
<div className="max-w-[1400px] mx-auto px-6">
|
||||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
{/* Left Content */}
|
||||
<div>
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block"
|
||||
>
|
||||
Our Philosophy
|
||||
</motion.span>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="font-serif italic text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight leading-[1.1] mb-6"
|
||||
>
|
||||
Transformation
|
||||
<br />
|
||||
starts here
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-[#4A4A4A] leading-relaxed mb-10"
|
||||
>
|
||||
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.
|
||||
</motion.p>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
|
||||
className="relative"
|
||||
>
|
||||
<span className="font-serif text-[72px] leading-none text-[#1A1A1A]/[0.07] select-none absolute top-0 -left-2">
|
||||
{stat.value.replace("%", "")}
|
||||
</span>
|
||||
<div className="relative pt-6">
|
||||
<span className="text-3xl font-medium text-[#1A1A1A]">
|
||||
{stat.value}
|
||||
</span>
|
||||
<p className="text-sm text-[#4A4A4A]/80 mt-1 leading-snug">
|
||||
{stat.label}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Image */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative aspect-[4/5] rounded-[4px] overflow-hidden bg-[#F0F7FA]"
|
||||
>
|
||||
<Image
|
||||
src="/images/product-showcase.jpg"
|
||||
alt="ManoonOils Products"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
100
src/components/home/TestimonialsSection.tsx
Normal file
100
src/components/home/TestimonialsSection.tsx
Normal file
@@ -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 (
|
||||
<section className="py-24 lg:py-32 bg-[#F0F7FA]">
|
||||
<div className="max-w-[1400px] mx-auto px-6">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
|
||||
Testimonials
|
||||
</span>
|
||||
<h2 className="font-serif italic text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
|
||||
What our customers say
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
{/* Testimonials Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<motion.div
|
||||
key={testimonial.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="bg-white rounded-[6px] border border-[#1A1A1A]/[0.06] p-9 flex flex-col"
|
||||
>
|
||||
{/* Stars */}
|
||||
<div className="flex gap-1 mb-5">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className="w-4 h-4 fill-amber-400 text-amber-400"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Quote */}
|
||||
<p className="font-serif italic text-base lg:text-lg text-[#1A1A1A] leading-relaxed flex-1 mb-6">
|
||||
“{testimonial.text}”
|
||||
</p>
|
||||
|
||||
{/* Author */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-[#1A1A1A]/[0.06]">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[#1A1A1A]">
|
||||
{testimonial.name}
|
||||
</p>
|
||||
<p className="text-xs text-[#4A4A4A]/70">
|
||||
{testimonial.skinType}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{testimonial.verified && (
|
||||
<div className="inline-flex items-center gap-1 text-[10px] tracking-wider uppercase text-emerald-600 font-medium">
|
||||
<Check className="w-3 h-3" />
|
||||
Verified purchase
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<>
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16 md:h-20">
|
||||
<header className="sticky top-10 z-40 bg-white border-b border-[#1A1A1A]/[0.06]">
|
||||
<div className="max-w-[1400px] mx-auto px-6">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="md:hidden p-2"
|
||||
className="lg:hidden p-2 -ml-2"
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<Menu className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<img
|
||||
src="/manoon-logo.jpg"
|
||||
alt="ManoonOils"
|
||||
className="h-8 w-[124px] md:h-10 md:w-[154px]"
|
||||
/>
|
||||
<span className="font-serif italic text-xl md:text-2xl text-[#1A1A1A]">
|
||||
ManoonOils
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<Link href="/products" className="text-foreground hover:text-accent-dark transition-colors">
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center gap-8">
|
||||
<Link
|
||||
href="/products"
|
||||
className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
|
||||
>
|
||||
Products
|
||||
</Link>
|
||||
<Link href="/about" className="text-foreground hover:text-accent-dark transition-colors">
|
||||
<Link
|
||||
href="/about"
|
||||
className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
<Link href="/contact" className="text-foreground hover:text-accent-dark transition-colors">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="text-sm text-[#1A1A1A] hover:text-[#1A1A1A]/70 transition-colors"
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
className="p-2 relative"
|
||||
onClick={toggleCart}
|
||||
aria-label="Open cart"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
||||
</svg>
|
||||
{itemCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 bg-accent-dark text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
|
||||
{itemCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{/* Icons */}
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
className="p-2 hidden sm:block"
|
||||
aria-label="Account"
|
||||
>
|
||||
<User className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="p-2 relative"
|
||||
onClick={toggleCart}
|
||||
aria-label="Open cart"
|
||||
>
|
||||
<ShoppingBag className="w-5 h-5" />
|
||||
{itemCount > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 bg-[#1A1A1A] text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center">
|
||||
{itemCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<AnimatePresence>
|
||||
{mobileMenuOpen && (
|
||||
<MobileMenu onClose={() => setMobileMenuOpen(false)} />
|
||||
)}
|
||||
{mobileMenuOpen && <MobileMenu onClose={() => setMobileMenuOpen(false)} />}
|
||||
</AnimatePresence>
|
||||
|
||||
<CartDrawer />
|
||||
|
||||
51
src/components/ui/Marquee.tsx
Normal file
51
src/components/ui/Marquee.tsx
Normal file
@@ -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 (
|
||||
<div
|
||||
className={cn(
|
||||
"flex overflow-hidden",
|
||||
pauseOnHover && "hover:[animation-play-state:paused]",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex shrink-0 items-center whitespace-nowrap will-change-transform",
|
||||
speedClass[speed]
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"flex shrink-0 items-center whitespace-nowrap will-change-transform",
|
||||
speedClass[speed]
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
Reference in New Issue
Block a user