Premium design updates: gold accents, improved sections, verified review badges, reordered homepage layout
Some checks failed
Build and Deploy / build (push) Has been cancelled
Some checks failed
Build and Deploy / build (push) Has been cancelled
This commit is contained in:
Unchained
@@ -38,7 +38,7 @@ export default function AsSeenIn() {
|
||||
<section className="py-12 bg-[#1a1a1a] overflow-hidden border-y border-white/10">
|
||||
<div className="container mx-auto px-4 mb-8">
|
||||
<motion.p
|
||||
className="text-center text-[10px] uppercase tracking-[0.4em] text-white/30 font-medium"
|
||||
className="text-center text-[10px] uppercase tracking-[0.4em] text-[#c9a962] font-bold"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
|
||||
@@ -8,42 +8,59 @@ export default function HowItWorks() {
|
||||
number: "01",
|
||||
title: "Choose Your Oil",
|
||||
description: "Select from our collection of pure, cold-pressed oils formulated for your specific hair and skin needs.",
|
||||
icon: (
|
||||
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#c9a962" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
title: "Apply Daily",
|
||||
description: " Massage a few drops into damp hair or skin. Our oils absorb instantly—never greasy, always nourishing.",
|
||||
description: "Massage a few drops into damp hair or skin. Our oils absorb instantly—never greasy, always nourishing.",
|
||||
icon: (
|
||||
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#c9a962" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
title: "See Results",
|
||||
description: "Experience transformation in 4-6 weeks. Shinier hair, radiant skin, and confidence that glows.",
|
||||
icon: (
|
||||
<svg className="w-8 h-8" viewBox="0 0 24 24" fill="#FFD700">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-24 bg-white">
|
||||
<section className="py-24 bg-gradient-to-b from-white to-[#faf9f7]">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
className="text-center mb-20"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
|
||||
<span className="text-xs uppercase tracking-[0.3em] text-[#c9a962] mb-4 block font-medium">
|
||||
Simple Process
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-medium">
|
||||
<h2 className="text-4xl md:text-5xl font-medium text-[#1a1a1a]">
|
||||
How ManoonOils Works
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-[#c9a962] to-[#FFD700] mx-auto mt-6 rounded-full" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 max-w-5xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-16 max-w-6xl mx-auto">
|
||||
{steps.map((step, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="relative text-center"
|
||||
className="relative text-center group"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
@@ -51,26 +68,45 @@ export default function HowItWorks() {
|
||||
>
|
||||
{/* Connector line (not on last item) */}
|
||||
{index < steps.length - 1 && (
|
||||
<div className="hidden md:block absolute top-10 left-[60%] w-[80%] h-[2px] bg-gradient-to-r from-[#e5e5e5] to-transparent" />
|
||||
<div className="hidden md:block absolute top-16 left-[55%] w-[90%] h-[2px]">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#c9a962]/40 to-transparent rounded-full" />
|
||||
<motion.div
|
||||
className="absolute inset-y-0 left-0 w-2 bg-[#FFD700] rounded-full"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileInView={{ scaleX: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.5 + index * 0.2 }}
|
||||
style={{ originX: 0 }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Number circle */}
|
||||
<div className="relative inline-flex items-center justify-center w-20 h-20 mb-6">
|
||||
<div className="absolute inset-0 rounded-full bg-[#1a1a1a]" />
|
||||
<span className="relative text-white text-2xl font-medium">{step.number}</span>
|
||||
{/* Step card */}
|
||||
<div className="relative p-8 bg-white rounded-3xl shadow-lg border border-[#f0ede8] hover:shadow-2xl hover:border-[#c9a962]/30 transition-all duration-500">
|
||||
{/* Number badge */}
|
||||
<div className="absolute -top-5 left-1/2 -translate-x-1/2">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#c9a962] to-[#FFD700] flex items-center justify-center shadow-lg">
|
||||
<span className="text-white text-lg font-bold">{step.number}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon */}
|
||||
<div className="w-20 h-20 mx-auto mt-4 mb-6 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center border border-[#e8e4dc] group-hover:border-[#c9a962]/50 transition-colors duration-300">
|
||||
{step.icon}
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1a1a1a] mb-3">{step.title}</h3>
|
||||
<p className="text-[#666666] text-sm leading-relaxed max-w-xs mx-auto">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-medium mb-3">{step.title}</h3>
|
||||
<p className="text-[#666666] text-sm leading-relaxed max-w-xs mx-auto">
|
||||
{step.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<motion.div
|
||||
className="text-center mt-16"
|
||||
className="text-center mt-20"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
@@ -78,9 +114,12 @@ export default function HowItWorks() {
|
||||
>
|
||||
<a
|
||||
href="/products"
|
||||
className="inline-block px-10 py-4 bg-black text-white text-[13px] uppercase tracking-[0.15em] font-semibold hover:bg-[#333] transition-colors"
|
||||
className="group relative inline-flex items-center gap-3 px-12 py-5 bg-gradient-to-r from-[#1a1a1a] to-[#333333] text-white text-[13px] uppercase tracking-[0.2em] font-semibold hover:from-[#c9a962] hover:to-[#FFD700] transition-all duration-500 rounded-full shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Start Your Transformation
|
||||
<span>Start Your Transformation</span>
|
||||
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { motion } from "framer-motion";
|
||||
|
||||
export default function ProblemSection() {
|
||||
return (
|
||||
<section className="py-24 bg-[#faf9f7]">
|
||||
<section className="py-24 bg-gradient-to-b from-[#fefcfb] to-[#faf9f7]">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
@@ -13,20 +13,24 @@ export default function ProblemSection() {
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-4 block">
|
||||
<span className="text-xs uppercase tracking-[0.3em] text-[#c9a962] mb-4 block font-medium">
|
||||
The Problem
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-medium mb-8 leading-tight">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-medium mb-6 leading-tight text-[#1a1a1a]">
|
||||
Tired of Hair & Skin Products That Don't Deliver?
|
||||
</h2>
|
||||
<p className="text-[#666666] text-lg max-w-xl mx-auto">
|
||||
You deserve better than products filled with harsh chemicals and empty promises
|
||||
</p>
|
||||
<div className="w-16 h-1 bg-gradient-to-r from-[#c9a962] to-[#FFD700] mx-auto mt-8 rounded-full" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto mt-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto mt-16">
|
||||
{[
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
|
||||
<path stroke="#c9a962" strokeLinecap="round" strokeLinejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
problem: "Dry, Damaged Hair",
|
||||
@@ -34,8 +38,8 @@ export default function ProblemSection() {
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
|
||||
<path stroke="#e8967a" strokeLinecap="round" strokeLinejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
problem: "Confusing Ingredients",
|
||||
@@ -43,8 +47,8 @@ export default function ProblemSection() {
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||
<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
|
||||
<path stroke="#7eb89e" strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||
</svg>
|
||||
),
|
||||
problem: "No Real Results",
|
||||
@@ -53,16 +57,20 @@ export default function ProblemSection() {
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="text-center p-8 bg-white rounded-2xl shadow-sm border border-[#f0ede8]"
|
||||
className="relative text-center p-8 bg-white rounded-3xl shadow-lg border border-[#f0ede8] hover:shadow-2xl hover:border-[#c9a962]/30 transition-all duration-500 group"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-red-50 flex items-center justify-center text-red-400">
|
||||
{/* Decorative top border */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-gradient-to-r from-[#c9a962] to-[#FFD700] rounded-b-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
<div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center shadow-md border border-[#e8e4dc] group-hover:border-[#c9a962]/50 transition-colors duration-300">
|
||||
{item.icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-medium mb-3">{item.problem}</h3>
|
||||
<h3 className="text-lg font-semibold text-[#1a1a1a] mb-3">{item.problem}</h3>
|
||||
<p className="text-sm text-[#666666] leading-relaxed">{item.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
@@ -5,17 +5,17 @@ import { motion } from "framer-motion";
|
||||
const badges = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="#FFD700">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
),
|
||||
stats: "4.9/5",
|
||||
label: "Average Rating",
|
||||
subtext: "Based on 2,847 reviews",
|
||||
subtext: "Based on 1000+ reviews",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="#c9a962" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
|
||||
</svg>
|
||||
),
|
||||
@@ -25,7 +25,7 @@ const badges = [
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="#7eb89e" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||
</svg>
|
||||
),
|
||||
@@ -35,7 +35,7 @@ const badges = [
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="#e8967a" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
|
||||
</svg>
|
||||
),
|
||||
@@ -47,10 +47,10 @@ const badges = [
|
||||
|
||||
export default function TrustBadges() {
|
||||
return (
|
||||
<section className="py-14 bg-gradient-to-b from-[#faf9f7] to-white border-b border-[#e8e4e0]">
|
||||
<section className="py-16 bg-gradient-to-b from-[#fefcfb] to-[#faf9f7]">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
className="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8"
|
||||
className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
@@ -59,22 +59,23 @@ export default function TrustBadges() {
|
||||
{badges.map((badge, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="flex flex-col items-center text-center p-6 bg-white rounded-2xl shadow-sm border border-[#f0ede8]"
|
||||
className="flex flex-col items-center text-center p-5 bg-white rounded-2xl shadow-md border border-[#f0ede8] hover:shadow-xl hover:border-[#c9a962]/30 transition-all duration-300"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1 }}
|
||||
whileHover={{ y: -3 }}
|
||||
>
|
||||
<div className="w-12 h-12 rounded-full bg-[#1a1a1a] flex items-center justify-center text-white mb-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center shadow-sm mb-4 border border-[#e8e4dc]">
|
||||
{badge.icon}
|
||||
</div>
|
||||
<p className="text-2xl lg:text-3xl font-semibold text-[#1a1a1a] tracking-tight">
|
||||
<p className="text-2xl lg:text-3xl font-bold bg-gradient-to-r from-[#1a1a1a] to-[#4a4a4a] bg-clip-text text-transparent tracking-tight">
|
||||
{badge.stats}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-[#1a1a1a] mt-1">
|
||||
<p className="text-sm font-semibold text-[#1a1a1a] mt-1">
|
||||
{badge.label}
|
||||
</p>
|
||||
<p className="text-xs text-[#888888] mt-1">
|
||||
<p className="text-xs text-[#888888] mt-0.5">
|
||||
{badge.subtext}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user