261 lines
14 KiB
TypeScript
261 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import PricingCardSix from '@/components/sections/pricing/PricingCardSix';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterSplit from '@/components/sections/footer/FooterSplit';
|
|
import { Phone, Mail, MapPin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="sharp"
|
|
contentWidth="small"
|
|
sizing="large"
|
|
background="floatingGradient"
|
|
cardStyle="solid-accent-light"
|
|
primaryButtonStyle="layered-depth"
|
|
secondaryButtonStyle="outline"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleMinimal
|
|
brandName="Beauty Lux"
|
|
button={{
|
|
text: "Shop Now", href: "products"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Elevate Your Beauty Ritual"
|
|
description="Discover luxury beauty products that transform your skincare and makeup routine with premium ingredients and innovative formulations."
|
|
tag="Premium Collection"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/online-workshop-demontration-beauty-products_259150-60056.jpg", imageAlt: "Luxury beauty cosmetics collection"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/makeup-supplies-lying-circle_23-2147710733.jpg", imageAlt: "Premium skincare products"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/coffee-mug-with-cosmetics-product-white-flower-twig-white-background_23-2147891373.jpg", imageAlt: "Makeup palette and cosmetics"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/lay-out-basic-tools-putting-make-up_23-2148181456.jpg", imageAlt: "Luxury fragrance bottle"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/makeup-tools_23-2148109505.jpg", imageAlt: "Skincare serum and cream"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/makeup-products-light-surface_23-2148181404.jpg", imageAlt: "Nail polish and manicure"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Shop Collection", href: "products"
|
|
},
|
|
{
|
|
text: "Learn More", href: "about"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Featured Beauty Products"
|
|
description="Handpicked luxury items curated for their superior quality and transformative results."
|
|
tag="Best Sellers"
|
|
products={[
|
|
{
|
|
id: "1", name: "Radiant Lipstick Pro", price: "$45", imageSrc: "https://img.b2bpic.net/free-photo/lipsticks-assortment-with-dark-background_23-2148978138.jpg", imageAlt: "Radiant Lipstick Pro in rose gold"
|
|
},
|
|
{
|
|
id: "2", name: "Perfect Coverage Foundation", price: "$52", imageSrc: "https://img.b2bpic.net/free-photo/high-angle-make-up-products-arrangement_23-2149030336.jpg", imageAlt: "Perfect Coverage Foundation bottle"
|
|
},
|
|
{
|
|
id: "3", name: "Sunset Eyeshadow Palette", price: "$65", imageSrc: "https://img.b2bpic.net/free-photo/cosmetic-item-with-marijuana-leaves_23-2151336398.jpg", imageAlt: "Sunset Eyeshadow Palette with 12 shades"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="Our Story"
|
|
description={[
|
|
"Beauty Lux was founded on the belief that everyone deserves access to premium beauty products that deliver real results. We partner with leading dermatologists and cosmetic chemists to create innovative formulations.", "Our commitment to quality means every product is tested rigorously and crafted with the finest natural and scientific ingredients. We believe beauty should be inclusive, sustainable, and transformative.", "Join thousands of customers who have experienced the difference that luxury beauty can make in their daily lives."
|
|
]}
|
|
showBorder={true}
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{
|
|
text: "Explore Our Values", href: "#values"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Trusted by Beauty Enthusiasts"
|
|
description="Discover what our customers love about Beauty Lux products."
|
|
tag="Customer Love"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Game-Changing Skincare Results", quote: "I've tried countless skincare products, but Beauty Lux's serum has genuinely transformed my skin. Within two weeks, my complexion was visibly clearer and more radiant. Highly recommend!", name: "Jennifer Martinez", role: "Beauty Consultant", imageSrc: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", imageAlt: "Jennifer Martinez"
|
|
},
|
|
{
|
|
id: "2", title: "Perfect Makeup Every Time", quote: "The foundation blends beautifully and lasts all day without feeling heavy. The color match is precise, and I love that it's formulated with skincare ingredients. Best investment ever!", name: "Sarah Chen", role: "Makeup Artist", imageSrc: "https://img.b2bpic.net/free-photo/front-view-beautiful-man_23-2148780802.jpg", imageAlt: "Sarah Chen"
|
|
},
|
|
{
|
|
id: "3", title: "Luxury That's Worth It", quote: "While the price point is premium, the quality is unmatched. Every product feels luxurious, performs exceptionally, and the results speak for themselves. Worth every penny!", name: "Amanda Rodriguez", role: "Fashion Blogger", imageSrc: "https://img.b2bpic.net/free-photo/woman-with-blond-short-hair-tanned-smiling-cute-gazing-camera-with-friendly_176420-44610.jpg", imageAlt: "Amanda Rodriguez"
|
|
},
|
|
{
|
|
id: "4", title: "Finally, My Sensitive Skin Loves It", quote: "As someone with sensitive skin, I'm thrilled to have found Beauty Lux. Their formulations are gentle yet effective, and I haven't experienced any irritation. Pure joy!", name: "Michelle Thompson", role: "Dermatology Patient", imageSrc: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg", imageAlt: "Michelle Thompson"
|
|
},
|
|
{
|
|
id: "5", title: "Sustainable Beauty I Can Feel Good About", quote: "I love that Beauty Lux prioritizes sustainability without compromising on quality. Their packaging is elegant and eco-friendly. This is the future of beauty!", name: "Elena Rossi", role: "Sustainability Advocate", imageSrc: "https://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601457.jpg", imageAlt: "Elena Rossi"
|
|
},
|
|
{
|
|
id: "6", title: "Professional Grade for Everyone", quote: "These products rival what I use in my professional makeup studio. The pigmentation, texture, and longevity are exceptional. My clients always ask what I use!", name: "Victoria Park", role: "Professional Makeup Artist", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-beautiful-smiling-hipster-girl-trendy-summer-checkered-shirt-jeans-clothes_158538-3329.jpg", imageAlt: "Victoria Park"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardSix
|
|
title="Beauty Subscription Plans"
|
|
description="Choose the perfect plan to receive curated beauty products delivered to your door each month."
|
|
tag="Flexible Plans"
|
|
plans={[
|
|
{
|
|
id: "starter", price: "$29/month", subtitle: "Perfect for beauty explorers", features: [
|
|
"3 full-size beauty products monthly", "Free standard shipping", "15% discount on additional purchases", "Access to beauty tutorials", "Cancel anytime"
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Start Free Trial", href: "#subscribe"
|
|
}
|
|
],
|
|
bottomNotes: [
|
|
"First month 50% off", "No commitment required"
|
|
]
|
|
},
|
|
{
|
|
id: "deluxe", price: "$59/month", subtitle: "For serious beauty lovers", features: [
|
|
"6 full-size beauty products monthly", "Free express shipping", "20% discount on all products", "Priority customer support", "Exclusive member-only events", "Personalized beauty consultation"
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Subscribe Now", href: "#subscribe"
|
|
}
|
|
],
|
|
bottomNotes: [
|
|
"Most popular choice", "Save $120+ annually"
|
|
]
|
|
},
|
|
{
|
|
id: "premium", price: "$99/month", subtitle: "The ultimate luxury experience", features: [
|
|
"10 full-size beauty products monthly", "Free overnight shipping", "30% discount on all products", "Dedicated beauty concierge", "VIP access to new launches", "Quarterly luxury beauty box", "Free professional makeup session"
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Unlock Premium", href: "#subscribe"
|
|
}
|
|
],
|
|
bottomNotes: [
|
|
"White glove service included", "Best value for power users"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Stay Connected"
|
|
title="Get Exclusive Beauty Tips & Offers"
|
|
description="Subscribe to our newsletter and receive early access to new products, beauty tutorials, and special discounts curated just for you."
|
|
useInvertedBackground="invertDefault"
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe at any time. By subscribing, you agree to our Beauty & Wellness newsletter."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSplit
|
|
logoText="Beauty Lux"
|
|
title="Redefining luxury beauty for the modern world"
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{ label: "All Products", href: "#products" },
|
|
{ label: "Skincare", href: "#skincare" },
|
|
{ label: "Makeup", href: "#makeup" },
|
|
{ label: "Fragrances", href: "#fragrances" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#story" },
|
|
{ label: "Sustainability", href: "#sustainability" },
|
|
{ label: "Careers", href: "#careers" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Returns", href: "#returns" },
|
|
{ label: "Shipping", href: "#shipping" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#privacy" },
|
|
{ label: "Terms of Service", href: "#terms" },
|
|
{ label: "Cookie Policy", href: "#cookies" }
|
|
]
|
|
}
|
|
]}
|
|
contactItems={[
|
|
{
|
|
icon: Phone,
|
|
label: "Phone", value: "+1 (555) 123-4567", href: "tel:+15551234567"
|
|
},
|
|
{
|
|
icon: Mail,
|
|
label: "Email", value: "hello@beautylux.com", href: "mailto:hello@beautylux.com"
|
|
},
|
|
{
|
|
icon: MapPin,
|
|
label: "Address", value: "123 Beauty Boulevard, New York, NY 10001", href: "#"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |