204 lines
11 KiB
TypeScript
204 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Sparkles, Palette, Heart, Award } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="LUXE"
|
|
navItems={[
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Shades", id: "features" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Discover Your Perfect Shade"
|
|
description="Premium lipstick designed for confidence. Luxurious color, all-day wear, and a finish that turns heads. Experience beauty that lasts."
|
|
tag="Luxury Cosmetics"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{ text: "Shop Collection", href: "#products" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-lipstick-arrangement-plain-background_23-2148306680.jpg", imageAlt: "Premium lipstick product showcase"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fashion-woman-hand-holding-lip-care_1150-14163.jpg", imageAlt: "Red luxury lipstick"
|
|
}
|
|
]}
|
|
rating={5}
|
|
ratingText="Loved by 50K+ Beauty Enthusiasts"
|
|
background={{ variant: "plain" }}
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Our Signature Collection"
|
|
description="Hand-crafted shades for every mood and occasion. Premium pigments meet comfort in our bestselling lipstick line."
|
|
tag="Limited Edition"
|
|
tagIcon={Palette}
|
|
products={[
|
|
{
|
|
id: "1", name: "Crimson Dream", price: "$28", variant: "Classic Red • 5 Colors", imageSrc: "http://img.b2bpic.net/free-photo/fashion-woman-hand-holding-lip-care_1150-14163.jpg", imageAlt: "Crimson Dream red lipstick"
|
|
},
|
|
{
|
|
id: "2", name: "Nude Romance", price: "$28", variant: "Warm Nude • 4 Colors", imageSrc: "http://img.b2bpic.net/free-photo/top-view-lipsticks-red-silk_23-2148978202.jpg", imageAlt: "Nude Romance nude lipstick"
|
|
},
|
|
{
|
|
id: "3", name: "Berry Bliss", price: "$28", variant: "Deep Berry • 3 Colors", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-item-with-marijuana-leaves_23-2151336399.jpg", imageAlt: "Berry Bliss berry lipstick"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
title="Crafted for Confidence"
|
|
description="Founded on the belief that beauty should be empowering, LUXE lipsticks are formulated with premium ingredients and precision. Each shade is designed to enhance your natural beauty while providing all-day comfort and lasting color. We're committed to sustainability and cruelty-free practices."
|
|
metrics={[
|
|
{ value: "50K+", title: "Happy Customers" },
|
|
{ value: "98%", title: "Would Repurchase" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/researchers-biotechnology-laboratory-with-microscope-tablet_23-2148776109.jpg"
|
|
imageAlt="LUXE beauty brand cosmetics lab"
|
|
useInvertedBackground={false}
|
|
tagAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFour
|
|
title="Why Beauty Lovers Choose LUXE"
|
|
description="Experience the difference premium quality makes"
|
|
features={[
|
|
{
|
|
id: "1", title: "Long-Lasting Color", author: "24-Hour Wear", description: "Vibrant color that stays put from morning to night. Smudge-proof formula that doesn't fade.", tags: ["Durability", "Professional"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-visagiste-applying-makeup_23-2148113125.jpg", imageAlt: "Long-lasting lipstick application"
|
|
},
|
|
{
|
|
id: "2", title: "Hydrating Formula", author: "Comfort First", description: "Enriched with natural oils and vitamins. Your lips stay soft, moisturized, and beautiful all day.", tags: ["Care", "Natural"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-visagiste-applying-makeup_23-2148113125.jpg", imageAlt: "Hydrating lipstick formula"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="LUXE lipsticks have completely transformed my daily makeup routine. The color is stunning, stays all day, and my lips feel incredible. This is now my go-to brand for every occasion."
|
|
rating={5}
|
|
author="Sarah Mitchell, Beauty Influencer"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/fashion-beauty-portrait-young-brunette-woman-with-evening-stylish-makeup-perfect-clean-skin-model-with-long-curly-hair-posing-studio-blue-background_158538-20750.jpg", alt: "Sarah Mitchell" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-successful-woman-with-blue-shirt_1098-3627.jpg", alt: "Customer 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-woman-posing-work_23-2148826458.jpg", alt: "Customer 3" },
|
|
{ src: "http://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg", alt: "Customer 4" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Featured In"
|
|
description="Trusted by leading beauty publications and retailers worldwide"
|
|
tag="Media"
|
|
tagIcon={Award}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Sephora", "Ulta Beauty", "Vogue", "Harper's Bazaar", "Allure", "Elle", "Nylon"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about LUXE lipsticks"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does the color last?", content: "Our formula is designed to last up to 24 hours with continuous wear. The exact duration depends on your lifestyle, diet, and application method. For best results, apply on clean, moisturized lips."
|
|
},
|
|
{
|
|
id: "2", title: "Are your products cruelty-free?", content: "Yes! LUXE is 100% cruelty-free and vegan. We never test on animals and all our ingredients are ethically sourced. We're proud to be certified by leading animal welfare organizations."
|
|
},
|
|
{
|
|
id: "3", title: "What's the best way to apply?", content: "Start with a lip liner for precision, then apply LUXE lipstick directly from the tube or with a brush. For a polished look, use a lip brush for even coverage. Blot and reapply for longer wear."
|
|
},
|
|
{
|
|
id: "4", title: "Can I return products?", content: "Absolutely! We offer a 30-day money-back guarantee. If you're not completely satisfied, simply contact our customer service team and we'll process your return hassle-free."
|
|
},
|
|
{
|
|
id: "5", title: "Do you offer shade matching?", content: "Yes! Visit our website to take our shade quiz or contact our beauty consultants for personalized recommendations based on your skin tone and preferences."
|
|
},
|
|
{
|
|
id: "6", title: "Are there any allergens?", content: "LUXE lipsticks are formulated without common allergens like latex and parabens. However, always check the full ingredient list on our website, as formulations may vary by shade."
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<FooterLogoReveal
|
|
logoText="LUXE"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |