5216abbcc0
Based on landing-page-design skill principles:
Homepage:
- Redesigned hero with outcome-focused headline ("Transform Your Hair & Skin")
- Added social proof micro (5 stars + 50,000+ customers)
- Better CTA: "Transform My Hair & Skin" instead of "Shop Now"
- Added trust indicators in hero (30-day guarantee, free shipping, cruelty free)
- Added ProblemSection to create empathy (dry hair, confusing ingredients, no results)
- Added HowItWorks section (3 steps: Choose, Apply, See Results)
- Improved AsSeenIn with scrolling marquee on dark background
- Premium trust badges with stats and icons
Product pages:
- Improved CTA: "Transform My Hair & Skin" (action verb + value)
- Added ProductBenefits section (4 key benefits)
- Added ProductReviews section with customer testimonials
- Added AsSeenIn scrolling banner
- Added trust indicators with icons
Section order now follows proven conversion sequence:
1. Hero (headline + outcome + CTA)
2. Social Proof (trust badges, logos)
3. Problem (empathy)
4. Solution (products)
5. How It Works
6. Testimonials
7. Final CTA
212 lines
9.0 KiB
TypeScript
212 lines
9.0 KiB
TypeScript
import { getProducts } from "@/lib/saleor";
|
|
import Header from "@/components/layout/Header";
|
|
import Footer from "@/components/layout/Footer";
|
|
import HeroVideo from "@/components/home/HeroVideo";
|
|
import ProductCard from "@/components/product/ProductCard";
|
|
import TrustBadges from "@/components/home/TrustBadges";
|
|
import AsSeenIn from "@/components/home/AsSeenIn";
|
|
import TestimonialsSection from "@/components/home/TestimonialsSection";
|
|
import BeforeAfterGallery from "@/components/home/BeforeAfterGallery";
|
|
import ProblemSection from "@/components/home/ProblemSection";
|
|
import HowItWorks from "@/components/home/HowItWorks";
|
|
|
|
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 using only the finest ingredients.",
|
|
};
|
|
|
|
export default async function Homepage() {
|
|
let products: any[] = [];
|
|
try {
|
|
products = await getProducts("SR");
|
|
} catch (e) {
|
|
// Fallback for build time when API is unavailable
|
|
console.log('Failed to fetch products during build');
|
|
}
|
|
|
|
const featuredProducts = products?.slice(0, 4) || [];
|
|
const hasProducts = featuredProducts.length > 0;
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
|
|
<main className="min-h-screen bg-white">
|
|
{/* Hero Section with Video Background */}
|
|
<HeroVideo />
|
|
|
|
{/* Trust Badges */}
|
|
<TrustBadges />
|
|
|
|
{/* As Seen In */}
|
|
<AsSeenIn />
|
|
|
|
{/* Problem Section - Create empathy */}
|
|
<ProblemSection />
|
|
|
|
{/* Main Content */}
|
|
<div id="main-content" className="scroll-mt-[72px] lg:scroll-mt-[72px]">
|
|
{/* Products Grid Section */}
|
|
{hasProducts && (
|
|
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-white">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Section Header */}
|
|
<div className="text-center mb-16">
|
|
<span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
|
|
Our Collection
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl font-medium mb-4">
|
|
Premium Natural Oils
|
|
</h2>
|
|
<p className="text-[#666666] max-w-xl mx-auto">
|
|
Cold-pressed, pure, and natural oils for your daily beauty routine
|
|
</p>
|
|
</div>
|
|
|
|
{/* Products Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
|
|
{featuredProducts.map((product, index) => (
|
|
<ProductCard key={product.id} product={product} index={index} locale="SR" />
|
|
))}
|
|
</div>
|
|
|
|
{/* View All Link */}
|
|
<div className="text-center mt-12">
|
|
<a
|
|
href="/products"
|
|
className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
|
|
>
|
|
View All Products
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Before/After Gallery */}
|
|
<BeforeAfterGallery />
|
|
|
|
{/* How It Works */}
|
|
<HowItWorks />
|
|
|
|
{/* Brand Story Section */}
|
|
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-[#f8f9fa]">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
|
<div>
|
|
<span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
|
|
Our Story
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl font-medium mb-6">
|
|
Handmade with Love
|
|
</h2>
|
|
<p className="text-[#666666] mb-6 leading-relaxed">
|
|
Every bottle of ManoonOils is crafted with care using traditional
|
|
methods passed down through generations. We source only the finest
|
|
organic ingredients to bring you oils that nourish both hair and skin.
|
|
</p>
|
|
<p className="text-[#666666] mb-8 leading-relaxed">
|
|
Our commitment to purity means no additives, no preservatives -
|
|
just nature's goodness in its most potent form.
|
|
</p>
|
|
<a
|
|
href="/about"
|
|
className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
|
|
>
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
<div className="relative aspect-[4/3] bg-[#e8f0f5] rounded-lg overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=800&auto=format&fit=crop"
|
|
alt="Natural oils production"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Benefits Section */}
|
|
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-white">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center mb-16">
|
|
<span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
|
|
Why Choose Us
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl font-medium">
|
|
The Manoon Difference
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12">
|
|
{[
|
|
{
|
|
title: "100% Natural",
|
|
description: "Pure, cold-pressed oils with no additives or preservatives. Just nature's goodness.",
|
|
},
|
|
{
|
|
title: "Handcrafted",
|
|
description: "Each batch is carefully prepared by hand to ensure the highest quality.",
|
|
},
|
|
{
|
|
title: "Sustainable",
|
|
description: "Ethically sourced ingredients and eco-friendly packaging for a better planet.",
|
|
},
|
|
].map((benefit, index) => (
|
|
<div key={index} className="text-center">
|
|
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-[#e8f0f5] flex items-center justify-center">
|
|
<span className="text-2xl font-medium text-[#1a1a1a]">
|
|
{String(index + 1).padStart(2, '0')}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-xl font-medium mb-3">{benefit.title}</h3>
|
|
<p className="text-[#666666]">{benefit.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Testimonials Section */}
|
|
<TestimonialsSection />
|
|
|
|
{/* Newsletter Section */}
|
|
<section className="py-28 lg:py-32 px-4 sm:px-6 lg:px-8 bg-[#1a1a1a] text-white">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="max-w-2xl mx-auto text-center">
|
|
<span className="text-xs uppercase tracking-[0.2em] text-white/60 mb-3 block">
|
|
Stay Connected
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-medium mb-6">
|
|
Join Our Community
|
|
</h2>
|
|
<p className="text-white/70 mb-10 mx-auto text-lg">
|
|
Subscribe to receive exclusive offers, beauty tips, and be the first to know about new products.
|
|
</p>
|
|
{/* Newsletter Form - Centered */}
|
|
<form className="flex flex-col sm:flex-row items-stretch justify-center max-w-md mx-auto gap-0">
|
|
<input
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
className="flex-1 min-w-0 px-5 h-14 bg-white/10 border border-white/20 border-b-0 sm:border-b border-r-0 sm:border-r border-white/20 text-white placeholder:text-white/50 focus:border-white focus:outline-none transition-colors text-base text-center sm:text-left rounded-t sm:rounded-l sm:rounded-tr-none"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="px-8 h-14 bg-white text-black text-sm uppercase tracking-[0.1em] font-medium hover:bg-white/90 transition-colors whitespace-nowrap flex-shrink-0 rounded-b sm:rounded-r sm:rounded-bl-none"
|
|
>
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|