237 lines
11 KiB
TypeScript
237 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { CheckCircle, Globe, Leaf, Shield, Sparkles, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Luminous Skin"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Benefits", id: "features" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Luminous Skin"
|
|
description="Transform your skin with our scientifically-formulated, naturally-inspired skincare collection. Discover the power of premium ingredients."
|
|
buttons={[
|
|
{ text: "Shop Collection", href: "products" },
|
|
{ text: "Learn More", href: "about" }
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="https://img.b2bpic.net/free-photo/close-up-fair-skinned-young-women-s-hands-holding-jars-organic-body-creams-care-moisturizing-concept_197531-31493.jpg"
|
|
imageAlt="Premium skincare product collection"
|
|
frameStyle="card"
|
|
mediaAnimation="blur-reveal"
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Skincare brand hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Crafted with" },
|
|
{ type: "image", src: "https://img.b2bpic.net/free-photo/make-up-brushes-pile-wild-flowers-wooden-background_482257-9797.jpg", alt: "Natural ingredients" },
|
|
{ type: "text", content: "nature in mind" }
|
|
]}
|
|
buttons={[
|
|
{ text: "Discover Ingredients", href: "#features" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
ariaLabel="About section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Our Product Line"
|
|
description="Explore our curated collection of premium skincare essentials designed for every skin type and concern."
|
|
products={[
|
|
{
|
|
id: "1", name: "Hydrating Moisturizer", price: "$48", imageSrc: "https://img.b2bpic.net/free-photo/from-bottle-jar-with-cosmetics_23-2147803544.jpg", imageAlt: "Hydrating Moisturizer"
|
|
},
|
|
{
|
|
id: "2", name: "Radiance Serum", price: "$62", imageSrc: "https://img.b2bpic.net/free-photo/from-cream-jar-near-bottle_23-2147803547.jpg", imageAlt: "Radiance Serum"
|
|
},
|
|
{
|
|
id: "3", name: "Gentle Cleanser", price: "$36", imageSrc: "https://img.b2bpic.net/free-photo/cosmetics-bottle-near-cream_23-2147803535.jpg", imageAlt: "Gentle Cleanser"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Product showcase section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
title="Why Choose Luminous Skin"
|
|
description="Discover the benefits of our scientifically-formulated skincare products"
|
|
features={[
|
|
{
|
|
title: "Natural Ingredients", description: "Sourced from premium botanical extracts", bentoComponent: "marquee", centerIcon: Leaf,
|
|
variant: "text", texts: ["Organic Rose Extract", "Hyaluronic Acid", "Vitamin C Complex", "Peptide Blend"]
|
|
},
|
|
{
|
|
title: "Dermatologist Tested", description: "Clinically proven results", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Shield, label: "Tested", value: "100%" },
|
|
{ icon: CheckCircle, label: "Safe", value: "98%" },
|
|
{ icon: Star, label: "Rated", value: "4.9★" }
|
|
]
|
|
},
|
|
{
|
|
title: "Visible Results", description: "See transformation in 28 days", bentoComponent: "line-chart"
|
|
},
|
|
{
|
|
title: "Sustainable Beauty", description: "Eco-conscious packaging", bentoComponent: "globe"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
ariaLabel="Feature benefits section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Luminous Skin has completely transformed my skincare routine. My complexion is clearer, brighter, and more radiant than ever before. I've recommended it to all my friends!"
|
|
rating={5}
|
|
author="Sarah Mitchell, Beauty Influencer"
|
|
avatars={[
|
|
{ src: "https://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg", alt: "Sarah Mitchell" },
|
|
{ src: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Jessica Chen" },
|
|
{ src: "https://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg", alt: "Emma Roberts" },
|
|
{ src: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Olivia Davis" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Customer testimonial section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about our skincare products and routines"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does it take to see results?", content: "Most customers notice visible improvements in skin texture and brightness within 2-3 weeks of consistent use. For more dramatic transformations, allow 28 days of daily application."
|
|
},
|
|
{
|
|
id: "2", title: "Is the product suitable for sensitive skin?", content: "Yes! All our products are dermatologist-tested and formulated to be gentle on sensitive skin. We use hypoallergenic ingredients and avoid harsh chemicals."
|
|
},
|
|
{
|
|
id: "3", title: "Can I use all products together?", content: "Absolutely! Our entire line is designed to work synergistically. We recommend: Cleanser → Serum → Moisturizer for best results."
|
|
},
|
|
{
|
|
id: "4", title: "What is your return policy?", content: "We offer a 60-day satisfaction guarantee. If you're not completely happy with your purchase, we'll provide a full refund."
|
|
},
|
|
{
|
|
id: "5", title: "Are your products cruelty-free?", content: "Yes! We are 100% cruelty-free and never test on animals. All our ingredients are ethically sourced."
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/good-looking-woman-being-wrapped-white-towel-after-taking-shower-standing-front-mirror-with-closed-eyes-smelling-new-cream-skin-care-cosmetology-morning-procedures_176532-14929.jpg"
|
|
imageAlt="Skincare routine setup"
|
|
mediaPosition="left"
|
|
mediaAnimation="blur-reveal"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="FAQ section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Newsletter"
|
|
tagIcon={Sparkles}
|
|
title="Join Our Beauty Community"
|
|
description="Subscribe to receive exclusive skincare tips, product launches, and special member-only discounts."
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Your email address"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe anytime."
|
|
ariaLabel="Newsletter subscription section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Luminous Skin"
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{ label: "All Products", href: "#products" },
|
|
{ label: "Best Sellers", href: "#products" },
|
|
{ label: "New Arrivals", href: "#products" },
|
|
{ label: "Gift Sets", href: "#products" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "Sustainability", href: "#" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
{ label: "Returns", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Luminous Skin. All rights reserved."
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |