5 Commits

Author SHA1 Message Date
de25c899d9 Merge version_3 into main
Merge version_3 into main
2026-04-03 18:44:32 +00:00
e6c4d6e2d8 Update src/app/page.tsx 2026-04-03 18:44:29 +00:00
5d2a16bfe7 Merge version_3 into main
Merge version_3 into main
2026-04-03 18:44:03 +00:00
5fed17e43f Update src/app/page.tsx 2026-04-03 18:44:00 +00:00
8aa837a03d Merge version_2 into main
Merge version_2 into main
2026-04-03 18:16:58 +00:00

View File

@@ -6,7 +6,7 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import CardStack from '@/components/cardStack/CardStack';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Sparkles } from "lucide-react";
@@ -26,171 +26,96 @@ export default function LandingPage() {
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Collections", id: "products"},
{
name: "Our Story", id: "about"},
{
name: "Testimonials", id: "testimonials"},
{
name: "Contact", id: "contact"},
]}
brandName="MOGWARDS"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Collections", id: "products" },
{ name: "Our Story", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="MOGWARDS"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={true}
background={{
variant: "sparkles-gradient"}}
title="Timeless Radiance"
description="Experience the pinnacle of luxury skincare with MOGWARDS. Formulated for the modern visionary, our collection brings nature and science together."
testimonials={[
{
name: "Elena R.", handle: "@elena_skincare", testimonial: "The glow is undeniable. A true luxury ritual.", rating: 5,
imageSrc: "https://images.unsplash.com/photo-1598440947619-2c35fc95f088?q=80&w=800", imageAlt: "luxury skincare bottle flat lay"},
{
name: "Marcus T.", handle: "@marc_dermal", testimonial: "Exquisite ingredients. My skin has never felt healthier.", rating: 5,
imageSrc: "https://images.unsplash.com/photo-1608248543803-ba4f8c70a0b9?q=80&w=800", imageAlt: "luxury skincare facial cream jar"},
{
name: "Sophia L.", handle: "@sophia_glow", testimonial: "Worth every drop. MOGWARDS changed my morning routine.", rating: 5,
imageSrc: "https://images.unsplash.com/photo-1556228578-0d85b1a4d571?q=80&w=800", imageAlt: "luxury face oil bottle"},
{
name: "James P.", handle: "@james_luxury", testimonial: "Unparalleled sophistication and results.", rating: 5,
imageSrc: "https://images.unsplash.com/photo-1612817288484-6f916006741a?q=80&w=800", imageAlt: "skincare cream jar luxury"},
{
name: "Chloe P.", handle: "@chloe_skincare", testimonial: "Simply the best, my skin feels revitalized every day.", rating: 5,
imageSrc: "https://images.unsplash.com/photo-1571781926291-c4a7e3021b3d?q=80&w=800", imageAlt: "serum dropper bottle glass"},
]}
imageSrc="https://images.unsplash.com/photo-1598440947619-2c35fc95f088?q=80&w=1200"
imageAlt="Mogwards luxury skincare showcase"
mediaAnimation="blur-reveal"
avatars={[
{ src: "https://i.pravatar.cc/150?u=1", alt: "Customer 1" },
{ src: "https://i.pravatar.cc/150?u=2", alt: "Customer 2" },
{ src: "https://i.pravatar.cc/150?u=3", alt: "Customer 3" },
{ src: "https://i.pravatar.cc/150?u=4", alt: "Customer 4" },
{ src: "https://i.pravatar.cc/150?u=5", alt: "Customer 5" },
]}
marqueeItems={[
{ type: "text", text: "Cruelty-Free" },
{ type: "text", text: "Ethically Sourced" },
{ type: "text", text: "Organic Ingredients" },
{ type: "text", text: "Sustainable Packaging" },
{ type: "text", text: "Dermatologist Tested" },
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={true}
background={{ variant: "sparkles-gradient" }}
title="Timeless Radiance"
description="Experience the pinnacle of luxury skincare with MOGWARDS. Formulated for the modern visionary, our collection brings nature and science together."
testimonials={[
{ name: "Elena R.", handle: "@elena_skincare", testimonial: "The glow is undeniable. A true luxury ritual.", rating: 5 },
{ name: "Marcus T.", handle: "@marc_dermal", testimonial: "Exquisite ingredients. My skin has never felt healthier.", rating: 5 },
]}
imageSrc="https://images.unsplash.com/photo-1598440947619-2c35fc95f088?q=80&w=1200"
imageAlt="Mogwards luxury skincare showcase"
mediaAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Our Philosophy"
title="Where Nature Meets Innovation"
description="MOGWARDS was founded to redefine the standard of luxury skincare. We believe that true beauty is cultivated through precision, integrity, and the finest organic essences."
subdescription="Every ingredient is ethically sourced and meticulously blended, ensuring unparalleled performance and a sensory journey like no other."
icon={Sparkles}
imageSrc="https://images.unsplash.com/photo-1608248543803-ba4f8c70a0b9?q=80&w=1200"
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Our Philosophy"
title="Where Nature Meets Innovation"
description="MOGWARDS was founded to redefine the standard of luxury skincare. We believe that true beauty is cultivated through precision, integrity, and the finest organic essences."
subdescription="Every ingredient is ethically sourced and meticulously blended, ensuring unparalleled performance and a sensory journey like no other."
icon={Sparkles}
imageSrc="https://images.unsplash.com/photo-1608248543803-ba4f8c70a0b9?q=80&w=1200"
mediaAnimation="slide-up"
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{
id: "p1", brand: "MOGWARDS", name: "Radiance Oil", price: "$125", rating: 5,
reviewCount: "120", imageSrc: "https://images.unsplash.com/photo-1615397349754-cfa2066a298e?q=80&w=600"},
{
id: "p2", brand: "MOGWARDS", name: "Day Cream", price: "$95", rating: 5,
reviewCount: "85", imageSrc: "https://images.unsplash.com/photo-1570177759628-98e3b782c5e5?q=80&w=600"},
{
id: "p3", brand: "MOGWARDS", name: "Night Serum", price: "$150", rating: 5,
reviewCount: "210", imageSrc: "https://images.unsplash.com/photo-1556228578-0d85b1a4d571?q=80&w=600"},
{
id: "p4", brand: "MOGWARDS", name: "Cleansing Gel", price: "$65", rating: 4,
reviewCount: "95", imageSrc: "https://images.unsplash.com/photo-1598440947619-2c35fc95f088?q=80&w=600"},
{
id: "p5", brand: "MOGWARDS", name: "Eye Concentrate", price: "$110", rating: 5,
reviewCount: "67", imageSrc: "https://images.unsplash.com/photo-1612817288484-6f916006741a?q=80&w=600"},
{
id: "p6", brand: "MOGWARDS", name: "Hydration Mist", price: "$55", rating: 5,
reviewCount: "140", imageSrc: "https://images.unsplash.com/photo-1571781926291-c4a7e3021b3d?q=80&w=600"},
]}
title="The Collection"
description="Discover our curated selection of high-performance skincare essentials."
/>
</div>
<div id="products" data-section="products">
<CardStack
animationType="blur-reveal"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
title="The Collection"
description="Discover our curated selection of high-performance skincare essentials."
>
<div className="bg-white/5 p-6 rounded-xl">Product 1</div>
<div className="bg-white/5 p-6 rounded-xl">Product 2</div>
<div className="bg-white/5 p-6 rounded-xl">Product 3</div>
<div className="bg-white/5 p-6 rounded-xl">Product 4</div>
</CardStack>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1", title: "Transformative", quote: "I've never felt more radiant.", name: "Sarah J.", role: "Client", imageSrc: "https://i.pravatar.cc/150?u=1"},
{
id: "2", title: "Simply Luxury", quote: "The packaging, the scent, the results—perfection.", name: "Elena R.", role: "Brand Ambassador", imageSrc: "https://i.pravatar.cc/150?u=2"},
{
id: "3", title: "Gold Standard", quote: "MOGWARDS is in a league of its own.", name: "Mark D.", role: "Skincare Expert", imageSrc: "https://i.pravatar.cc/150?u=3"},
{
id: "4", title: "Essential Ritual", quote: "I cannot start my day without it.", name: "Chloe P.", role: "Artist", imageSrc: "https://i.pravatar.cc/150?u=4"},
{
id: "5", title: "Radiant Health", quote: "My skin has been forever changed.", name: "Lucas K.", role: "Entrepreneur", imageSrc: "https://i.pravatar.cc/150?u=5"},
]}
title="A Legacy of Glow"
description="Don't just take our word for it."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", title: "Transformative", quote: "I've never felt more radiant.", name: "Sarah J.", role: "Client" },
{ id: "2", title: "Simply Luxury", quote: "The packaging, the scent, the results—perfection.", name: "Elena R.", role: "Brand Ambassador" },
]}
title="A Legacy of Glow"
description="Don't just take our word for it."
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={true}
background={{
variant: "radial-gradient"}}
tag="Let's Connect"
title="Experience MOGWARDS"
description="Ready to begin your skincare journey? Get in touch with our concierge team for personalized recommendations."
buttons={[
{
text: "Inquire Now", href: "#"},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={true}
background={{ variant: "radial-gradient" }}
tag="Let's Connect"
title="Experience MOGWARDS"
description="Ready to begin your skincare journey? Get in touch with our concierge team for personalized recommendations."
buttons={[{ text: "Inquire Now", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{ label: "Collections", href: "#products" },
{ label: "About", href: "#about" },
],
},
{
items: [
{ label: "Contact", href: "#contact" },
{ label: "Concierge", href: "#" },
],
},
{
items: [
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
],
},
]}
logoText="MOGWARDS"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "Collections", href: "#products" }, { label: "About", href: "#about" }] },
{ items: [{ label: "Contact", href: "#contact" }] }
]}
logoText="MOGWARDS"
/>
</div>
</ReactLenis>
</ThemeProvider>
);