bender/97895e1d-6b47-4b7d-b85c-25f9ef828901
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_2
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_3
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

3 Commits
version_2 ... version_3

Author SHA1 Message Date
bender
e6c4d6e2d8 Update src/app/page.tsx 2026-04-03 18:44:29 +00:00
bender
5fed17e43f Update src/app/page.tsx 2026-04-03 18:44:00 +00:00
bender
8aa837a03d Merge version_2 into main 
Merge version_2 into main
 2026-04-03 18:16:58 +00:00
1 changed files with 85 additions and 160 deletions
Expand all files Collapse all files

245
src/app/page.tsx
View File

@@ -6,7 +6,7 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial'; import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; 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 TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen'; import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Sparkles } from "lucide-react"; import { Sparkles } from "lucide-react";
@@ -26,171 +26,96 @@ export default function LandingPage() {
headingFontWeight="light" headingFontWeight="light"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleCentered <NavbarStyleCentered
navItems={[ navItems={[
{ { name: "Collections", id: "products" },
name: "Collections", id: "products"}, { name: "Our Story", id: "about" },
{ { name: "Testimonials", id: "testimonials" },
name: "Our Story", id: "about"}, { name: "Contact", id: "contact" },
{ ]}
name: "Testimonials", id: "testimonials"}, brandName="MOGWARDS"
{ />
name: "Contact", id: "contact"}, </div>
]}
brandName="MOGWARDS"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardTestimonial <HeroBillboardTestimonial
useInvertedBackground={true} useInvertedBackground={true}
background={{ background={{ variant: "sparkles-gradient" }}
variant: "sparkles-gradient"}} title="Timeless Radiance"
title="Timeless Radiance" description="Experience the pinnacle of luxury skincare with MOGWARDS. Formulated for the modern visionary, our collection brings nature and science together."
description="Experience the pinnacle of luxury skincare with MOGWARDS. Formulated for the modern visionary, our collection brings nature and science together." testimonials={[
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 },
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"}, imageSrc="https://images.unsplash.com/photo-1598440947619-2c35fc95f088?q=80&w=1200"
{ imageAlt="Mogwards luxury skincare showcase"
name: "Marcus T.", handle: "@marc_dermal", testimonial: "Exquisite ingredients. My skin has never felt healthier.", rating: 5, mediaAnimation="blur-reveal"
imageSrc: "https://images.unsplash.com/photo-1608248543803-ba4f8c70a0b9?q=80&w=800", imageAlt: "luxury skincare facial cream jar"}, />
{ </div>
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="about" data-section="about"> <div id="about" data-section="about">
<TestimonialAboutCard <TestimonialAboutCard
useInvertedBackground={false} useInvertedBackground={false}
tag="Our Philosophy" tag="Our Philosophy"
title="Where Nature Meets Innovation" 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." 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." subdescription="Every ingredient is ethically sourced and meticulously blended, ensuring unparalleled performance and a sensory journey like no other."
icon={Sparkles} icon={Sparkles}
imageSrc="https://images.unsplash.com/photo-1608248543803-ba4f8c70a0b9?q=80&w=1200" imageSrc="https://images.unsplash.com/photo-1608248543803-ba4f8c70a0b9?q=80&w=1200"
mediaAnimation="slide-up" mediaAnimation="slide-up"
/> />
</div> </div>
<div id="products" data-section="products"> <div id="products" data-section="products">
<ProductCardTwo <CardStack
animationType="slide-up" animationType="blur-reveal"
textboxLayout="default" textboxLayout="default"
gridVariant="four-items-2x2-equal-grid" gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true} useInvertedBackground={true}
products={[ title="The Collection"
{ description="Discover our curated selection of high-performance skincare essentials."
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"}, <div className="bg-white/5 p-6 rounded-xl">Product 1</div>
{ <div className="bg-white/5 p-6 rounded-xl">Product 2</div>
id: "p2", brand: "MOGWARDS", name: "Day Cream", price: "$95", rating: 5, <div className="bg-white/5 p-6 rounded-xl">Product 3</div>
reviewCount: "85", imageSrc: "https://images.unsplash.com/photo-1570177759628-98e3b782c5e5?q=80&w=600"}, <div className="bg-white/5 p-6 rounded-xl">Product 4</div>
{ </CardStack>
id: "p3", brand: "MOGWARDS", name: "Night Serum", price: "$150", rating: 5, </div>
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="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardTen <TestimonialCardTen
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ { id: "1", title: "Transformative", quote: "I've never felt more radiant.", name: "Sarah J.", role: "Client" },
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" },
{ ]}
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"}, title="A Legacy of Glow"
{ description="Don't just take our word for it."
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"}, />
{ </div>
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="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCTA <ContactCTA
useInvertedBackground={true} useInvertedBackground={true}
background={{ background={{ variant: "radial-gradient" }}
variant: "radial-gradient"}} tag="Let's Connect"
tag="Let's Connect" title="Experience MOGWARDS"
title="Experience MOGWARDS" description="Ready to begin your skincare journey? Get in touch with our concierge team for personalized recommendations."
description="Ready to begin your skincare journey? Get in touch with our concierge team for personalized recommendations." buttons={[{ text: "Inquire Now", href: "#" }]}
buttons={[ />
{ </div>
text: "Inquire Now", href: "#"},
]}
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoEmphasis <FooterLogoEmphasis
columns={[ columns={[
{ { items: [{ label: "Collections", href: "#products" }, { label: "About", href: "#about" }] },
items: [ { items: [{ label: "Contact", href: "#contact" }] }
{ label: "Collections", href: "#products" }, ]}
{ label: "About", href: "#about" }, logoText="MOGWARDS"
], />
}, </div>
{
items: [
{ label: "Contact", href: "#contact" },
{ label: "Concierge", href: "#" },
],
},
{
items: [
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
],
},
]}
logoText="MOGWARDS"
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );