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
@@ -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