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
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user