382 lines
12 KiB
TypeScript
382 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Collection",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="GOPAL BEAUTY WORLD"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Discover Your Radiant Beauty"
|
|
description="Premium makeup for every face, every style, and every moment. Gopal Beauty World brings you the art of perfection."
|
|
buttons={[
|
|
{
|
|
text: "Shop Now",
|
|
href: "#products",
|
|
},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-lipsticks-red-silk_23-2148978202.jpg?_wi=1",
|
|
imageAlt: "luxury makeup collection hero",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-blushes_23-2149030355.jpg?_wi=1",
|
|
imageAlt: "glamour beauty product photography",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-item-with-marijuana-leaves_23-2151336400.jpg?_wi=1",
|
|
imageAlt: "elegance makeup set studio",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/assortment-cosmetics-with-copy-space_23-2148574349.jpg",
|
|
imageAlt: "luxury makeup collection hero",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flowers-cosmetic-products-assortment_23-2149270058.jpg",
|
|
imageAlt: "glamour beauty product photography",
|
|
},
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
title="Defining Modern Elegance"
|
|
description="At Gopal Beauty World, we believe makeup is more than art—it's confidence. We curate luxury products designed to empower your unique beauty."
|
|
bulletPoints={[
|
|
{
|
|
title: "Luxurious Quality",
|
|
description: "Selected ingredients for flawless finish.",
|
|
},
|
|
{
|
|
title: "Expertly Curated",
|
|
description: "Professional-grade products for your vanity.",
|
|
},
|
|
{
|
|
title: "Confidence Guaranteed",
|
|
description: "Feel radiant and empowered everyday.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-view-smiley-bride-indoors_23-2149721992.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Rich Pigments",
|
|
description: "Intense color payoff in every swipe.",
|
|
buttonIcon: "Zap",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-products-assortment_23-2148978141.jpg",
|
|
imageAlt: "luxury lipstick product shot",
|
|
},
|
|
{
|
|
title: "Long-Lasting Wear",
|
|
description: "Stay perfect from dawn to dusk.",
|
|
buttonIcon: "Shield",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-lipsticks-red-silk_23-2148978202.jpg?_wi=2",
|
|
imageAlt: "luxury lipstick product shot",
|
|
},
|
|
{
|
|
title: "Skin Loving",
|
|
description: "Gentle formulas that nourish your skin.",
|
|
buttonIcon: "Star",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-blushes_23-2149030355.jpg?_wi=2",
|
|
imageAlt: "luxury lipstick product shot",
|
|
},
|
|
{
|
|
title: "Cruelty-Free",
|
|
description: "Beauty without compromising our values.",
|
|
buttonIcon: "Award",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-item-with-marijuana-leaves_23-2151336400.jpg?_wi=2",
|
|
imageAlt: "luxury lipstick product shot",
|
|
},
|
|
]}
|
|
title="Why Gopal Beauty?"
|
|
description="Beyond just products, we deliver an experience of luxury and self-expression."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Classic Velvet Lipstick",
|
|
price: "$29",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/luxury-lipstick-golden-sculpture-still-life_23-2151983297.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Radiance Liquid Foundation",
|
|
price: "$45",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-make-up-foundation-products_23-2149736911.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Celestial Eyeshadow Palette",
|
|
price: "$55",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/eyeshadows-applicator_23-2147784004.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Pro Beauty Brush Set",
|
|
price: "$65",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/different-type-makeup-brushes-colored-backdrop_23-2148129478.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Luxury Nail Lacquer",
|
|
price: "$15",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-product-with-color-year-tones-3d-packaging_23-2151510098.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Ultra Black Mascara",
|
|
price: "$25",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-makeup-hold-black-mascara-brush-gray-wall-beauty-concept_343596-6813.jpg",
|
|
},
|
|
]}
|
|
title="Our Best Sellers"
|
|
description="Explore the collection that everyone is talking about."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Ananya Sharma",
|
|
handle: "@ananya",
|
|
testimonial: "Absolutely love the lipstick collection! The colors are so rich.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Priya Kapoor",
|
|
handle: "@priyak",
|
|
testimonial: "The foundation matches my skin perfectly. Feels like second skin.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-female-putting-makeup-front-mirror_181624-55894.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Rohan Mehta",
|
|
handle: "@rohanm",
|
|
testimonial: "Gifted this to my wife and she loves the quality. Fantastic packaging.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Sneha Gupta",
|
|
handle: "@snehag",
|
|
testimonial: "Best eyeshadows I've ever owned. So pigmented and blendable.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/make-up-tips-young-smiling-cosmetologyst-explaining-secrets-good-make-up_259150-60138.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Isha Verma",
|
|
handle: "@ishav",
|
|
testimonial: "Gopal Beauty World is my go-to for all luxury makeup needs.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/two-young-women-enjoying-apply-cosmetics-girls-having-fun-before-recording-video-about-make-up-applying-rouge-with-brushes-each-others-cheeks-laughing-cosmetics-beauty-blogging-concept_74855-22777.jpg",
|
|
},
|
|
]}
|
|
showRating={true}
|
|
title="Our Beautiful Community"
|
|
description="Hear what our radiant customers have to say."
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Vogue Beauty",
|
|
"Allure",
|
|
"Cosmopolitan",
|
|
"Harper's Bazaar",
|
|
"Elle",
|
|
"Marie Claire",
|
|
"Beauty Insider",
|
|
]}
|
|
title="Trusted by Industry Leaders"
|
|
description="Featured in and partner with top beauty authorities."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Are your products cruelty-free?",
|
|
content: "Yes, we are 100% committed to ethical beauty standards.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "How do I choose the right shade?",
|
|
content: "Use our AI shade finder tool available on the product page.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Do you offer international shipping?",
|
|
content: "Yes, we ship globally to select regions.",
|
|
},
|
|
]}
|
|
sideTitle="Questions? We have answers."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
text="Ready to transform your beauty routine? Let's connect."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Shop",
|
|
items: [
|
|
{
|
|
label: "Lipstick",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Eyeshadow",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Foundation",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Press",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "FAQ",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Shipping",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Privacy",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 Gopal Beauty World. All rights reserved."
|
|
bottomRightText="Crafted with love."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|