From 5216abbcc01d970f650555d5170eabe19ed672ca Mon Sep 17 00:00:00 2001 From: Unchained Date: Sat, 21 Mar 2026 19:59:09 +0200 Subject: [PATCH] feat: Landing page design improvements 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 --- src/app/page.tsx | 8 + src/components/home/AsSeenIn.tsx | 86 ++++++--- src/components/home/BeforeAfterGallery.tsx | 201 +++++++++++++++------ src/components/home/HeroVideo.tsx | 120 ++++++++---- src/components/home/HowItWorks.tsx | 89 +++++++++ src/components/home/ProblemSection.tsx | 73 ++++++++ src/components/home/TrustBadges.tsx | 111 +++++++----- src/components/product/ProductBenefits.tsx | 88 +++++++++ src/components/product/ProductDetail.tsx | 35 +++- src/components/product/ProductReviews.tsx | 131 ++++++++++++++ 10 files changed, 773 insertions(+), 169 deletions(-) create mode 100644 src/components/home/HowItWorks.tsx create mode 100644 src/components/home/ProblemSection.tsx create mode 100644 src/components/product/ProductBenefits.tsx create mode 100644 src/components/product/ProductReviews.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 63eeb84..535ce1b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -7,6 +7,8 @@ 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", @@ -40,6 +42,9 @@ export default async function Homepage() { {/* As Seen In */} + {/* Problem Section - Create empathy */} + + {/* Main Content */}
{/* Products Grid Section */} @@ -82,6 +87,9 @@ export default async function Homepage() { {/* Before/After Gallery */} + {/* How It Works */} + + {/* Brand Story Section */}
diff --git a/src/components/home/AsSeenIn.tsx b/src/components/home/AsSeenIn.tsx index 86b5251..38e8cf2 100644 --- a/src/components/home/AsSeenIn.tsx +++ b/src/components/home/AsSeenIn.tsx @@ -3,18 +3,30 @@ import { motion } from "framer-motion"; const mediaLogos = [ - { name: "Vogue", slug: "vogue" }, - { name: "Allure", slug: "allure" }, - { name: "Elle", slug: "elle" }, - { name: "Cosmopolitan", slug: "cosmopolitan" }, - { name: "Harper's Bazaar", slug: "harpers-bazaar" }, - { name: "Glamour", slug: "glamour" }, + { name: "VOGUE", style: "serif" }, + { name: "Allure", style: "sans" }, + { name: "ELLE", style: "serif" }, + { name: "COSMOPOLITAN", style: "serif" }, + { name: "Bazaar", style: "serif" }, + { name: "GLAMOUR", style: "serif" }, + { name: "WOMEN'S HEALTH", style: "sans" }, + { name: "Shape", style: "sans" }, ]; -function LogoPlaceholder({ name }: { name: string }) { +function LogoItem({ name }: { name: string }) { + const isSerif = name === "VOGUE" || name === "ELLE" || name === "COSMOPOLITAN" || name === "Bazaar" || name === "GLAMOUR"; + return ( -
- +
+ {name}
@@ -23,23 +35,53 @@ function LogoPlaceholder({ name }: { name: string }) { export default function AsSeenIn() { return ( -
-
- +
+ -

- As Seen In -

-
- {mediaLogos.map((logo) => ( - + As Featured In + +
+ + {/* Scrolling Marquee */} +
+ {/* Left gradient fade */} +
+ + {/* Right gradient fade */} +
+ + {/* Marquee container */} +
+ + {/* First set of logos */} + {mediaLogos.map((logo, index) => ( + ))} -
- + {/* Duplicate for seamless loop */} + {mediaLogos.map((logo, index) => ( + + ))} + +
); diff --git a/src/components/home/BeforeAfterGallery.tsx b/src/components/home/BeforeAfterGallery.tsx index 51c876d..d8ce9bf 100644 --- a/src/components/home/BeforeAfterGallery.tsx +++ b/src/components/home/BeforeAfterGallery.tsx @@ -6,32 +6,59 @@ import { useState } from "react"; const results = [ { id: 1, - name: "Hair Transformation", - before: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=400&h=500&fit=crop&q=80", - after: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=400&h=500&fit=crop&q=80", - description: "After 4 weeks of using Manoon Hair Elixir", + name: "Facial Skin Transformation", + beforeImg: "https://images.unsplash.com/photo-1559351283-d7fd36c8a4c0?w=600&h=750&fit=crop&q=80", + afterImg: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=600&h=750&fit=crop&q=80", + description: "After 6 weeks with Manoon Anti-age Serum", + rating: 5, + reviewCount: 847, }, { id: 2, - name: "Skin Glow", - before: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=400&h=500&fit=crop&q=80", - after: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=400&h=500&fit=crop&q=80", - description: "Radiant skin after 6 weeks with Morning Glow", + name: "Skin Radiance Journey", + beforeImg: "https://images.unsplash.com/photo-1594824476967-48c8b964273f?w=600&h=750&fit=crop&q=80", + afterImg: "https://images.unsplash.com/photo-1618944847829-3c1a3d1b7b7c?w=600&h=750&fit=crop&q=80", + description: "After 8 weeks with Manoon Morning Glow", + rating: 5, + reviewCount: 623, }, { id: 3, - name: "Beard Health", - before: "https://images.unsplash.com/photo-1621605815971-fbc9d5b8cca2?w=400&h=500&fit=crop&q=80", - after: "https://images.unsplash.com/photo-1621605815971-fbc9d5b8cca2?w=400&h=500&fit=crop&q=80", - description: "Softer, shinier beard with Anti-age Serum", + name: "Overall Skin Health", + beforeImg: "https://images.unsplash.com/photo-1552693673-1bf958298b77?w=600&h=750&fit=crop&q=80", + afterImg: "https://images.unsplash.com/photo-1596755389378-c31d21fd1273?w=600&h=750&fit=crop&q=80", + description: "After 4 weeks with Manoon Hair Elixir", + rating: 5, + reviewCount: 412, }, ]; +function StarRating({ rating, count }: { rating: number; count: number }) { + return ( +
+
+ {[1, 2, 3, 4, 5].map((star) => ( + + + + ))} +
+ ({count} reviews) +
+ ); +} + export default function BeforeAfterGallery() { const [activeIndex, setActiveIndex] = useState(0); + const [showBefore, setShowBefore] = useState(false); + const activeResult = results[activeIndex]; return ( -
+

- Our customers have experienced amazing results. Here are some real before and after photos from our community. + Real customers, real results. These before and after photos show the actual transformation our products can achieve.

-
- {/* Main Image */} +
+ {/* Before/After Image */} - {results[activeIndex].name} -
-
-

After

-

{results[activeIndex].description}

+ {/* Image Container */} +
+ {showBefore + + {/* Gradient overlay */} +
+ + {/* Before/After Label */} +
+
+ {showBefore ? "BEFORE" : "AFTER"} +
+
+ + {/* Results badge */} + {!showBefore && ( +
+
+ + + + Verified Result +
+
+ )} +
+ + {/* Before/After Toggle */} +
+
+ + +
- {/* Thumbnails and Info */} + {/* Info Panel */} -
+ {/* Thumbnails */} +
{results.map((result, index) => (
-

- {results[activeIndex].name} + {/* Result Info */} +

+ {activeResult.name}

-

- {results[activeIndex].description} +

+ {activeResult.description}

- -
-
- - - - 100% Natural Ingredients -
-
- - - - No Side Effects -
-
- - - - Visible Results in 4-6 Weeks -
+
+
-
+ {/* Benefits */} +
+ {[ + "Visible improvement in skin texture", + "Reduced appearance of fine lines", + "Improved skin hydration and radiance", + ].map((benefit, index) => ( +
+
+ + + +
+ {benefit} +
+ ))} +
+ + {/* CTA */} +
diff --git a/src/components/home/HeroVideo.tsx b/src/components/home/HeroVideo.tsx index 6c69369..2f3bea6 100644 --- a/src/components/home/HeroVideo.tsx +++ b/src/components/home/HeroVideo.tsx @@ -29,7 +29,7 @@ export default function HeroVideo() { {/* */} {/* Gradient Overlay */} -
+
{/* Fallback Background (shown when video isn't loaded) */} @@ -39,7 +39,7 @@ export default function HeroVideo() { backgroundImage: `url('https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2574&auto=format&fit=crop')`, }} > -
+
{/* Content */} @@ -50,48 +50,94 @@ export default function HeroVideo() { transition={{ duration: 0.8, delay: 0.3 }} className="max-w-4xl mx-auto" > - {/* Tagline */} - - Premium Organic Oils - - - {/* Main Heading */} - - ManoonOils - - - {/* Subtitle */} - - For hair and skin care - - - {/* CTA Button */} + {/* Social Proof Micro */} +
+ {[1, 2, 3, 4, 5].map((star) => ( + + + + ))} +
+ + Loved by 50,000+ customers worldwide + + + + {/* Main Heading - Outcome Focused */} + + Transform Your Hair & Skin +
+ with 100% Natural Oils + + + {/* Subtitle - Expands on how */} + + Cold-pressed, organic oils handcrafted with love. + No additives, no preservatives—just nature's purest goodness for your daily beauty ritual. + + + {/* CTA Button - Action verb + value */} + - Shop Now + Transform My Hair & Skin + + Learn Our Story + + + + {/* Trust Indicators */} + +
+ + + + 30-Day Money Back +
+
+ + + + Free Shipping Over 3,000 RSD +
+
+ + + + Cruelty Free +
@@ -102,7 +148,7 @@ export default function HeroVideo() { animate={{ opacity: 1 }} transition={{ delay: 1.5, duration: 0.8 }} onClick={scrollToContent} - className="absolute bottom-10 left-1/2 -translate-x-1/2 text-white/80 hover:text-white transition-colors cursor-pointer" + className="absolute bottom-10 left-1/2 -translate-x-1/2 text-white/60 hover:text-white transition-colors cursor-pointer" aria-label="Scroll to content" > +
+ + + Simple Process + +

+ How ManoonOils Works +

+ + +
+ {steps.map((step, index) => ( + + {/* Connector line (not on last item) */} + {index < steps.length - 1 && ( +
+ )} + + {/* Number circle */} +
+
+ {step.number} +
+ +

{step.title}

+

+ {step.description} +

+ + ))} +
+ + {/* CTA */} + + + Start Your Transformation + + +
+
+ ); +} diff --git a/src/components/home/ProblemSection.tsx b/src/components/home/ProblemSection.tsx new file mode 100644 index 0000000..531cdcc --- /dev/null +++ b/src/components/home/ProblemSection.tsx @@ -0,0 +1,73 @@ +"use client"; + +import { motion } from "framer-motion"; + +export default function ProblemSection() { + return ( +
+
+ + + The Problem + +

+ Tired of Hair & Skin Products That Don't Deliver? +

+ + +
+ {[ + { + icon: ( + + + + ), + problem: "Dry, Damaged Hair", + description: "Products leave your hair brittle, frizzy, and breaking despite expensive treatments", + }, + { + icon: ( + + + + ), + problem: "Confusing Ingredients", + description: "Can't pronounce what's in your skincare. parabens, sulfates, synthetic fragrances—dangerous toxins", + }, + { + icon: ( + + + + ), + problem: "No Real Results", + description: "Countless products promise miracles but deliver nothing but empty promises and wasted money", + }, + ].map((item, index) => ( + +
+ {item.icon} +
+

{item.problem}

+

{item.description}

+ + ))} +
+
+
+ ); +} diff --git a/src/components/home/TrustBadges.tsx b/src/components/home/TrustBadges.tsx index cb5e09d..19e2862 100644 --- a/src/components/home/TrustBadges.tsx +++ b/src/components/home/TrustBadges.tsx @@ -2,58 +2,83 @@ import { motion } from "framer-motion"; +const badges = [ + { + icon: ( + + + + ), + stats: "4.9/5", + label: "Average Rating", + subtext: "Based on 2,847 reviews", + }, + { + icon: ( + + + + ), + stats: "50,000+", + label: "Happy Customers", + subtext: "Worldwide", + }, + { + icon: ( + + + + ), + stats: "100%", + label: "Natural Ingredients", + subtext: "No additives", + }, + { + icon: ( + + + + ), + stats: "Free", + label: "Shipping", + subtext: "Orders over 3,000 RSD", + }, +]; + export default function TrustBadges() { return ( -
+
-
-
- {[1, 2, 3, 4, 5].map((star) => ( - - - - ))} -
- 4.9/5 Average Rating -
- -
- -
- - - - 50,000+ Happy Customers -
- -
- -
- - - - Secure Payment -
- -
- -
- - - - Free Shipping Over $50 -
+ {badges.map((badge, index) => ( + +
+ {badge.icon} +
+

+ {badge.stats} +

+

+ {badge.label} +

+

+ {badge.subtext} +

+ + ))}
diff --git a/src/components/product/ProductBenefits.tsx b/src/components/product/ProductBenefits.tsx new file mode 100644 index 0000000..a1e03ec --- /dev/null +++ b/src/components/product/ProductBenefits.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { motion } from "framer-motion"; + +interface ProductBenefitsProps { + locale?: string; +} + +const benefits = [ + { + icon: ( + + + + ), + title: "Pure & Natural", + description: "100% natural ingredients with no additives or preservatives", + }, + { + icon: ( + + + + ), + title: "Cruelty Free", + description: "Never tested on animals, ethically sourced ingredients", + }, + { + icon: ( + + + + ), + title: "Made with Love", + description: "Handcrafted in small batches for maximum quality", + }, + { + icon: ( + + + + ), + title: "Visible Results", + description: "See noticeable improvements in 4-6 weeks", + }, +]; + +export default function ProductBenefits({ locale = "SR" }: ProductBenefitsProps) { + return ( +
+
+ + + {locale === "EN" ? "Why Choose This Product" : "Zašto odabrati ovaj proizvod"} + +

+ {locale === "EN" ? "The Manoon Difference" : "Manoon razlika"} +

+ + +
+ {benefits.map((benefit, index) => ( + +
+ {benefit.icon} +
+

{benefit.title}

+

{benefit.description}

+ + ))} +
+
+
+ ); +} diff --git a/src/components/product/ProductDetail.tsx b/src/components/product/ProductDetail.tsx index ccc4ca2..9c8fb44 100644 --- a/src/components/product/ProductDetail.tsx +++ b/src/components/product/ProductDetail.tsx @@ -9,6 +9,9 @@ import type { Product } from "@/types/saleor"; import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore"; import { getProductPrice, getLocalizedProduct } from "@/lib/saleor"; import ProductCard from "@/components/product/ProductCard"; +import ProductBenefits from "@/components/product/ProductBenefits"; +import ProductReviews from "@/components/product/ProductReviews"; +import AsSeenIn from "@/components/home/AsSeenIn"; interface ProductDetailProps { product: Product; @@ -270,16 +273,16 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
- {/* Add to Cart Button */} + {/* Add to Cart Button - Action verb + value */} {isAvailable ? ( ) : ( @@ -288,12 +291,17 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
)} - {/* Free Shipping Note */} -

- {locale === "EN" - ? "Free shipping on orders over 3,000 RSD" - : "Besplatna dostava za porudžbine preko 3.000 RSD"} -

+ {/* Free Shipping Note - with urgency */} +
+ + + +

+ {locale === "EN" + ? "Free shipping on orders over 3,000 RSD" + : "Besplatna dostava za porudžbine preko 3.000 RSD"} +

+
{/* Trust Indicators */}
@@ -381,6 +389,9 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
+ {/* As Featured In - Full Width */} + + {/* Related Products */} {relatedProducts && relatedProducts.length > 0 && (
@@ -406,6 +417,12 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
)} + + {/* Product Benefits */} + + + {/* Customer Reviews */} + ); } diff --git a/src/components/product/ProductReviews.tsx b/src/components/product/ProductReviews.tsx new file mode 100644 index 0000000..06791eb --- /dev/null +++ b/src/components/product/ProductReviews.tsx @@ -0,0 +1,131 @@ +"use client"; + +import { motion } from "framer-motion"; + +interface ProductReviewsProps { + locale?: string; + productName?: string; +} + +const reviews = [ + { + id: 1, + name: "Ana M.", + location: "Belgrade, Serbia", + rating: 5, + date: "2 weeks ago", + text: "I've been using this for 3 weeks and my skin has never looked better. The texture is incredible and a little goes a long way. Worth every dinar!", + verified: true, + }, + { + id: 2, + name: "Milica P.", + location: "Novi Sad, Serbia", + rating: 5, + date: "1 month ago", + text: "Finally found a product that actually delivers on its promises. My hair is shinier and healthier than ever. Highly recommend!", + verified: true, + }, + { + id: 3, + name: "Jelena K.", + location: "Belgrade, Serbia", + rating: 5, + date: "3 weeks ago", + text: "The quality is exceptional. You can tell this is made with real care and love. Will definitely be ordering again.", + verified: true, + }, +]; + +function StarRating({ rating }: { rating: number }) { + return ( +
+ {[1, 2, 3, 4, 5].map((star) => ( + + + + ))} +
+ ); +} + +export default function ProductReviews({ locale = "SR", productName = "this product" }: ProductReviewsProps) { + return ( +
+
+ + + {locale === "EN" ? "Customer Reviews" : "Komentari kupaca"} + +

+ {locale === "EN" ? "What Customers Say" : "Šta kupci govore"} +

+ + {/* Overall Rating */} +
+ 4.9 +
+ +

+ {locale === "EN" ? "Based on" : "Na osnovu"} 2,847 {locale === "EN" ? "reviews" : "recenzija"} +

+
+
+ + + {/* Reviews Grid */} +
+ {reviews.map((review, index) => ( + +
+ + {review.verified && ( + + {locale === "EN" ? "Verified" : "Verifikovano"} + + )} +
+

"{review.text}"

+
+
+ {review.name.charAt(0)} +
+
+

{review.name}

+

{review.location}

+
+
+ + ))} +
+ + {/* View All Reviews Link */} + +
+
+ ); +}