235 lines
13 KiB
TypeScript
235 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Award, Droplets, Heart, Leaf, Shield, Sparkles, Star, Sun } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Benefits", id: "benefits" },
|
|
{ name: "Reviews", id: "reviews" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
brandName="Radiant"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
title="Indulge in Luxurious Skincare"
|
|
description="Experience transformative beauty rituals crafted with premium ingredients. Discover the art of skincare that celebrates your natural radiance and sensual essence."
|
|
tag="Premium Skincare"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
leftCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-psd/elegant-pink-white-beauty-products-display-luxurious-skincare-set_191095-90347.jpg?_wi=1", imageAlt: "Luxury facial serum" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/body-butter-with-nature-elements-white-background_23-2148241809.jpg?_wi=1", imageAlt: "Premium moisturizer cream" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-therapist-applying-face-treatment_23-2148815308.jpg?_wi=1", imageAlt: "Pink luxury mask" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/compostable-beauty-still-life-with-bottle_23-2149353107.jpg?_wi=1", imageAlt: "Beauty essence spray" }
|
|
]}
|
|
rightCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/body-butter-with-nature-elements-white-background_23-2148241809.jpg?_wi=2", imageAlt: "Premium moisturizer" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-therapist-applying-face-treatment_23-2148815308.jpg?_wi=2", imageAlt: "Luxury mask treatment" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/compostable-beauty-still-life-with-bottle_23-2149353107.jpg?_wi=2", imageAlt: "Essence spray" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-psd/elegant-pink-white-beauty-products-display-luxurious-skincare-set_191095-90347.jpg?_wi=2", imageAlt: "Facial serum" }
|
|
]}
|
|
carouselPosition="right"
|
|
buttons={[
|
|
{ text: "Explore Collection", href: "products" },
|
|
{ text: "Learn More", href: "about" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="About Radiant"
|
|
description="We believe skincare is an act of self-love. Every product is meticulously crafted with the finest natural ingredients to nourish your skin and elevate your daily ritual."
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
bulletPoints={[
|
|
{ title: "Premium Ingredients", description: "Ethically sourced botanicals and breakthrough formulations", icon: Leaf },
|
|
{ title: "Cruelty-Free", description: "Never tested on animals, always kind to nature", icon: Shield },
|
|
{ title: "Luxurious Experience", description: "Transform your skincare routine into a sensual ritual", icon: Sparkles }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/aloe-vera-plant-blue-background_23-2148241795.jpg"
|
|
imageAlt="Natural skincare ingredients"
|
|
imagePosition="right"
|
|
mediaAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Our Values", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="benefits" data-section="benefits">
|
|
<FeatureBorderGlow
|
|
title="Why Radiant Skincare"
|
|
description="Discover the transformative benefits of luxurious, thoughtfully formulated skincare that respects your skin and celebrates your natural beauty."
|
|
tag="Benefits"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{ icon: Droplets, title: "Deep Hydration", description: "Intensive moisture that penetrates layers for lasting nourishment and supple, glowing skin." },
|
|
{ icon: Leaf, title: "Nourishing Formula", description: "Enriched with botanical extracts that feed your skin essential nutrients and vitamins." },
|
|
{ icon: Sun, title: "Radiant Glow", description: "Enhances natural luminosity and reveals your skin's inherent beauty and radiance." },
|
|
{ icon: Shield, title: "Advanced Protection", description: "Guards against environmental stressors while maintaining your skin's natural balance." }
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Discover More", href: "products" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Shop Our Collection"
|
|
description="Curated luxurious skincare products designed to transform your beauty routine into a sensual ritual."
|
|
tag="Premium Products"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{ id: "serum-luminous", name: "Luminous Radiance Serum", price: "$85.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242149.jpg", imageAlt: "Luminous Radiance Serum bottle", initialQuantity: 1 },
|
|
{ id: "cream-silk", name: "Silk Moisture Cream", price: "$95.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-face-cream-with-her-finger-bathroom_140725-1637.jpg", imageAlt: "Silk Moisture Cream jar", initialQuantity: 1 },
|
|
{ id: "mask-rose", name: "Rose Petal Revival Mask", price: "$72.00", imageSrc: "http://img.b2bpic.net/free-photo/gold-gift-box-bed-bouquet-white-peonies-craft-packaging-scandivanavian-white-interior_1182-2570.jpg", imageAlt: "Rose Petal Revival Mask", initialQuantity: 1 }
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "View All Products", href: "#" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardThirteen
|
|
title="Loved by Our Customers"
|
|
description="Real stories from real customers who have transformed their skincare journey with Radiant."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{ id: "1", name: "Isabella Chen", handle: "@isabella.glow", testimonial: "Radiant has completely transformed my skin. The serum gives me the glow I've always dreamed of. Absolutely luxurious!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-girl-smiling-shopping-center_23-2148225680.jpg", imageAlt: "Isabella Chen" },
|
|
{ id: "2", name: "Sophie Mercier", handle: "@sophie.luxe", testimonial: "I've tried countless skincare brands, but this is the first that truly delivers. My skin has never felt better or looked more radiant.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-latino-female-model-warm-red-dress_633478-2096.jpg", imageAlt: "Sophie Mercier" },
|
|
{ id: "3", name: "Maya Kapoor", handle: "@maya.radiant", testimonial: "The rose petal mask is my new obsession. It feels like a spa treatment at home. Highly recommended for anyone seeking luxury skincare.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-happy-smiling-young-woman-beige-jacket-glasses-standing-lobby-office-reception-greeting-business-client-with-pleasant-grin-inviting-company_197531-30568.jpg", imageAlt: "Maya Kapoor" },
|
|
{ id: "4", name: "Emma Rodriguez", handle: "@emma.skincare", testimonial: "Finally found a brand that understands luxury and sustainability. My skin is glowing and my conscience is clear.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/yong-pretty-woman-portrait_624325-46.jpg", imageAlt: "Emma Rodriguez" },
|
|
{ id: "5", name: "Olivia Thompson", handle: "@olivia.beauty", testimonial: "The quality is unmatched. Every product feels like a luxury experience. I'm a customer for life!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-businesswoman-smiling-happy-standing-city_839833-16454.jpg", imageAlt: "Olivia Thompson" },
|
|
{ id: "6", name: "Jade Williams", handle: "@jade.wellness", testimonial: "Radiant skincare has become part of my self-care ritual. The products are effective, luxurious, and ethically made.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/headshot-cute-emotional-caucasian-girl-with-hair-knot-having-rest-cafe_273609-9038.jpg", imageAlt: "Jade Williams" }
|
|
]}
|
|
showRating={true}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Share Your Story", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Publications"
|
|
description="Featured in the world's most prestigious beauty and lifestyle magazines."
|
|
tag="Featured In"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["Vogue", "Harper's Bazaar", "Elle", "Beauty Industry", "Wellness Magazine", "Dermatology Review", "Organic Beauty", "Luxury Living"]}
|
|
speed={40}
|
|
showCard={true}
|
|
buttons={[
|
|
{ text: "Read Features", href: "#" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to start your luxurious skincare journey? Let us help you discover your most radiant self."
|
|
animationType="reveal-blur"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Get Started", href: "products" },
|
|
{ text: "Contact Us", href: "#" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Home", href: "#" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Products", href: "#products" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "FAQ", href: "#" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
{ label: "Returns", href: "#" },
|
|
{ label: "Warranty", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Accessibility", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Radiant Skincare. All rights reserved."
|
|
bottomRightText="Crafted with love and luxury"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |