404 lines
13 KiB
TypeScript
404 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSizeMediumTitles"
|
|
background="fluid"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Shop",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Luminous"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
title="Unveil Your Natural Radiance."
|
|
description="Experience the intersection of science and nature with our premium, plant-powered skincare solutions designed to illuminate your complexion."
|
|
testimonials={[
|
|
{
|
|
name: "Elena V.",
|
|
handle: "@elena_skin",
|
|
testimonial: "My skin has never felt this hydrated. Absolutely game-changing.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/elegant-metallic-cosmetic-bottle-with-pump_187299-47646.jpg?_wi=1",
|
|
imageAlt: "luxury skincare minimalist background",
|
|
},
|
|
{
|
|
name: "Mark D.",
|
|
handle: "@mark_glow",
|
|
testimonial: "Simple, clean, and effective. Luminous is my new daily ritual.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/homemade-remedy-with-honey_23-2148894305.jpg?_wi=1",
|
|
imageAlt: "luxury skincare minimalist background",
|
|
},
|
|
{
|
|
name: "Sarah P.",
|
|
handle: "@sarah_beauty",
|
|
testimonial: "Finally found products that don't irritate my sensitive skin.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-serum-bottles_23-2149030375.jpg?_wi=1",
|
|
imageAlt: "luxury skincare minimalist background",
|
|
},
|
|
{
|
|
name: "Jade W.",
|
|
handle: "@jade_glow",
|
|
testimonial: "Glowing results after just two weeks of use. Impressive!",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242188.jpg?_wi=1",
|
|
imageAlt: "luxury skincare minimalist background",
|
|
},
|
|
{
|
|
name: "Tom H.",
|
|
handle: "@tom_care",
|
|
testimonial: "The texture is incredible. High-end quality without the compromise.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-composition_23-2149047757.jpg?_wi=1",
|
|
imageAlt: "luxury skincare minimalist background",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Shop Collection",
|
|
href: "#products",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/elegant-metallic-cosmetic-bottle-with-pump_187299-47646.jpg?_wi=2"
|
|
imageAlt="Luxury skincare presentation"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-serene-young-woman-with-beautiful-olive-skin-curly-hair-ideal-skin-brown-eyes-studio_633478-1003.jpg",
|
|
alt: "Portrait of a glowing customer",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-woman-with-glowing-skin-natural-sunlight_23-2151992832.jpg",
|
|
alt: "Portrait of a radiant skincare user",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-beautiful-woman-posing_23-2149652024.jpg",
|
|
alt: "Front view of beauty customer",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-natural-young-woman-portrait_23-2148994706.jpg",
|
|
alt: "Natural portrait of a happy user",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg",
|
|
alt: "Smiling customer portrait",
|
|
},
|
|
]}
|
|
avatarText="Join 50,000+ happy customers."
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Cruelty-Free",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Vegan Formulations",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Scientifically Proven",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Dermatologist Tested",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Natural Botanicals",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Clean Science, Real Results."
|
|
description={[
|
|
"We believe that true beauty comes from purity. Our formulations are crafted with high-performance ingredients that respect your skin's natural barrier while delivering visible, transformative results.",
|
|
"Every product is dermatologically tested, cruelty-free, and designed to fit into your lifestyle effortlessly.",
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
brand: "Luminous",
|
|
name: "Hydrating Serum",
|
|
price: "$85",
|
|
rating: 5,
|
|
reviewCount: "120",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-serum-bottles_23-2149030375.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p2",
|
|
brand: "Luminous",
|
|
name: "Night Cream",
|
|
price: "$95",
|
|
rating: 5,
|
|
reviewCount: "85",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242188.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p3",
|
|
brand: "Luminous",
|
|
name: "Facial Oil",
|
|
price: "$70",
|
|
rating: 4,
|
|
reviewCount: "45",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-composition_23-2149047757.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p4",
|
|
brand: "Luminous",
|
|
name: "Daily Cleanser",
|
|
price: "$45",
|
|
rating: 5,
|
|
reviewCount: "210",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238321.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
brand: "Luminous",
|
|
name: "Brightening Eye Cream",
|
|
price: "$60",
|
|
rating: 5,
|
|
reviewCount: "92",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pink-cream-jar-with-gold-lid_187299-47227.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
brand: "Luminous",
|
|
name: "Calming Mask",
|
|
price: "$55",
|
|
rating: 4,
|
|
reviewCount: "78",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-tropical-leaves-with-beauty-tools-cosmetics_23-2148179558.jpg",
|
|
},
|
|
]}
|
|
title="Curated Essentials."
|
|
description="Discover our signature line of facial care, tailored to restore, rejuvenate, and revitalize your unique beauty."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "98%",
|
|
description: "Skin Hydration Increase",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "50k+",
|
|
description: "Happy Customers",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "15",
|
|
description: "Active Botanicals",
|
|
},
|
|
]}
|
|
title="Proven Efficacy."
|
|
description="Our results speak for themselves. Join thousands who have transformed their skin health."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
title: "Life Changer!",
|
|
quote: "My skin has never felt this soft and radiant.",
|
|
name: "Maya R.",
|
|
role: "Fashion Designer",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-blond-woman-with-light-make-up-blue-eyes_613910-3003.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
title: "So Effective",
|
|
quote: "The texture is just beautiful. Worth every penny.",
|
|
name: "Chloe T.",
|
|
role: "Creative Director",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-woman-talking-mobile-phone-looking-surprised-hears-amazing-news_1258-200261.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
title: "Total Radiance",
|
|
quote: "I'm obsessed with the hydration levels. Highly recommend!",
|
|
name: "David L.",
|
|
role: "Entrepreneur",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021814.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
title: "Gentle & Pure",
|
|
quote: "Finally, products that are actually gentle enough.",
|
|
name: "Anya B.",
|
|
role: "Architect",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-happy-fit-girl-sportswear-laughing_1153-7827.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
title: "Essential Ritual",
|
|
quote: "This routine has restored my confidence completely.",
|
|
name: "Marcus K.",
|
|
role: "Writer",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg",
|
|
},
|
|
]}
|
|
title="Loved by You."
|
|
description="Hear what our radiant community has to say about their experience with Luminous."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Are products cruelty-free?",
|
|
content: "Yes, we are 100% cruelty-free and vegan.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Can I use with other products?",
|
|
content: "Yes, our products are formulated to work well within any routine.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Shipping times?",
|
|
content: "Orders are typically processed within 24 hours.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/homemade-remedy-with-honey_23-2148894305.jpg?_wi=2"
|
|
mediaAnimation="blur-reveal"
|
|
title="Frequently Asked."
|
|
description="Got questions? We've got answers. Everything you need to know about your new skincare ritual."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
tag="Stay Connected"
|
|
title="Get the Glow."
|
|
description="Sign up for exclusive beauty insights, early access to collections, and special offers."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Shop",
|
|
items: [
|
|
{
|
|
label: "Serum",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Creams",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Cleansers",
|
|
href: "#products",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 Luminous Skincare"
|
|
bottomRightText="All rights reserved"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|