9cd8b19787
- 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
87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|