diff --git a/src/app/page.tsx b/src/app/page.tsx index 535ce1b..a45cfcf 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,7 +5,7 @@ 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 ProductReviews from "@/components/product/ProductReviews"; import BeforeAfterGallery from "@/components/home/BeforeAfterGallery"; import ProblemSection from "@/components/home/ProblemSection"; import HowItWorks from "@/components/home/HowItWorks"; @@ -36,15 +36,21 @@ export default async function Homepage() { {/* Hero Section with Video Background */} - {/* Trust Badges */} - - {/* As Seen In */} + {/* Testimonials Section */} + + + {/* Trust Badges */} + + {/* Problem Section - Create empathy */} + {/* Before/After Gallery */} + + {/* Main Content */}
{/* Products Grid Section */} @@ -84,9 +90,6 @@ export default async function Homepage() { )} - {/* Before/After Gallery */} - - {/* How It Works */} @@ -129,49 +132,64 @@ export default async function Homepage() { {/* Benefits Section */} -
+
- + Why Choose Us -

+

The Manoon Difference

+
-
+
{[ { title: "100% Natural", description: "Pure, cold-pressed oils with no additives or preservatives. Just nature's goodness.", + icon: ( + + + + + ), }, { title: "Handcrafted", description: "Each batch is carefully prepared by hand to ensure the highest quality.", + icon: ( + + + + ), }, { title: "Sustainable", description: "Ethically sourced ingredients and eco-friendly packaging for a better planet.", + icon: ( + + + + ), }, ].map((benefit, index) => ( -
-
- - {String(index + 1).padStart(2, '0')} - +
+
+ {benefit.icon}
-

{benefit.title}

-

{benefit.description}

+

{benefit.title}

+

{benefit.description}

))}
- {/* Testimonials Section */} - - {/* Newsletter Section */}
diff --git a/src/components/home/AsSeenIn.tsx b/src/components/home/AsSeenIn.tsx index 38e8cf2..45870c3 100644 --- a/src/components/home/AsSeenIn.tsx +++ b/src/components/home/AsSeenIn.tsx @@ -38,7 +38,7 @@ export default function AsSeenIn() {
+ + + + ), }, { 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: ( + + + + ), }, { number: "03", title: "See Results", description: "Experience transformation in 4-6 weeks. Shinier hair, radiant skin, and confidence that glows.", + icon: ( + + + + ), }, ]; return ( -
+
- + Simple Process -

+

How ManoonOils Works

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

{step.title}

+

+ {step.description} +

- -

{step.title}

-

- {step.description} -

))}
{/* CTA */} - Start Your Transformation + Start Your Transformation + + +
diff --git a/src/components/home/ProblemSection.tsx b/src/components/home/ProblemSection.tsx index 531cdcc..a81a05a 100644 --- a/src/components/home/ProblemSection.tsx +++ b/src/components/home/ProblemSection.tsx @@ -4,7 +4,7 @@ import { motion } from "framer-motion"; export default function ProblemSection() { return ( -
+
- + The Problem -

+

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

+

+ You deserve better than products filled with harsh chemicals and empty promises +

+
-
+
{[ { icon: ( - - + + ), problem: "Dry, Damaged Hair", @@ -34,8 +38,8 @@ export default function ProblemSection() { }, { icon: ( - - + + ), problem: "Confusing Ingredients", @@ -43,8 +47,8 @@ export default function ProblemSection() { }, { icon: ( - - + + ), problem: "No Real Results", @@ -53,16 +57,20 @@ export default function ProblemSection() { ].map((item, index) => ( -
+ {/* Decorative top border */} +
+ +
{item.icon}
-

{item.problem}

+

{item.problem}

{item.description}

))} diff --git a/src/components/home/TrustBadges.tsx b/src/components/home/TrustBadges.tsx index 19e2862..b700ec6 100644 --- a/src/components/home/TrustBadges.tsx +++ b/src/components/home/TrustBadges.tsx @@ -5,17 +5,17 @@ import { motion } from "framer-motion"; const badges = [ { icon: ( - + ), stats: "4.9/5", label: "Average Rating", - subtext: "Based on 2,847 reviews", + subtext: "Based on 1000+ reviews", }, { icon: ( - + ), @@ -25,7 +25,7 @@ const badges = [ }, { icon: ( - + ), @@ -35,7 +35,7 @@ const badges = [ }, { icon: ( - + ), @@ -47,10 +47,10 @@ const badges = [ export default function TrustBadges() { return ( -
+
( -
+
{badge.icon}
-

+

{badge.stats}

-

+

{badge.label}

-

+

{badge.subtext}

diff --git a/src/components/product/ProductBenefits.tsx b/src/components/product/ProductBenefits.tsx index a1e03ec..f8cb1e4 100644 --- a/src/components/product/ProductBenefits.tsx +++ b/src/components/product/ProductBenefits.tsx @@ -9,8 +9,9 @@ interface ProductBenefitsProps { const benefits = [ { icon: ( - - + + + ), title: "Pure & Natural", @@ -18,8 +19,9 @@ const benefits = [ }, { icon: ( - - + + + ), title: "Cruelty Free", @@ -27,8 +29,9 @@ const benefits = [ }, { icon: ( - - + + + ), title: "Made with Love", @@ -36,8 +39,9 @@ const benefits = [ }, { icon: ( - - + + + ), title: "Visible Results", @@ -56,7 +60,7 @@ export default function ProductBenefits({ locale = "SR" }: ProductBenefitsProps) viewport={{ once: true }} transition={{ duration: 0.6 }} > - + {locale === "EN" ? "Why Choose This Product" : "Zašto odabrati ovaj proizvod"}

@@ -68,17 +72,18 @@ export default function ProductBenefits({ locale = "SR" }: ProductBenefitsProps) {benefits.map((benefit, index) => ( -
+
{benefit.icon}
-

{benefit.title}

-

{benefit.description}

+

{benefit.title}

+

{benefit.description}

))}
diff --git a/src/components/product/ProductDetail.tsx b/src/components/product/ProductDetail.tsx index 27eb980..4748d15 100644 --- a/src/components/product/ProductDetail.tsx +++ b/src/components/product/ProductDetail.tsx @@ -76,12 +76,12 @@ function StarRating({ rating = 5, count = 0 }: { rating?: number; count?: number {[...Array(5)].map((_, i) => ( ))}

{count > 0 && ( - ({count}) + ({count >= 1000 ? '1000+' : count}) )}
); @@ -216,7 +216,7 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR" {price || (locale === "EN" ? "Contact for price" : "Kontaktirajte za cenu")} - +
{/* Divider */} diff --git a/src/components/product/ProductReviews.tsx b/src/components/product/ProductReviews.tsx index 1984f89..74f6aac 100644 --- a/src/components/product/ProductReviews.tsx +++ b/src/components/product/ProductReviews.tsx @@ -76,7 +76,13 @@ function ReviewCard({ review }: { review: typeof reviews[0] }) { {review.name.charAt(0)}
-

{review.name}

+
+

{review.name}

+ + + + Verified +

{review.location}

@@ -112,7 +118,7 @@ export default function ProductReviews({ locale = "SR", productName = "this prod ))}
-

Based on 50 reviews

+

Based on 1000+ reviews