Merge version_1 into main #1
246
src/app/page.tsx
246
src/app/page.tsx
@@ -32,26 +32,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Our Science",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Benefits",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Our Science", id: "about" },
|
||||
{ name: "Benefits", id: "features" },
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
]}
|
||||
brandName="Lumina Skincare"
|
||||
/>
|
||||
@@ -61,35 +46,15 @@ export default function LandingPage() {
|
||||
<HeroOverlay
|
||||
title="Timeless Radiance, Redefined"
|
||||
description="Experience the pinnacle of luxury anti-aging. Our signature cream merges scientific innovation with botanical elegance for visible rejuvenation."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop The Collection",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Shop The Collection", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/shea-butter-treatment-arrangement_23-2148963344.jpg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-bath-concept-cream-accessories_23-2148419398.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/elements-relaxing-massage-spa_23-2148176947.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-beauty-cream-bottle-cotton-flower-plant_23-2147844991.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-bath-concept-accessories_23-2148419404.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/elegant-mature-woman-applying-moisturizer_23-2148277922.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-bath-concept-cream-accessories_23-2148419398.jpg", alt: "Customer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/elements-relaxing-massage-spa_23-2148176947.jpg", alt: "Customer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-beauty-cream-bottle-cotton-flower-plant_23-2147844991.jpg", alt: "Customer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-angle-bath-concept-accessories_23-2148419404.jpg", alt: "Customer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/elegant-mature-woman-applying-moisturizer_23-2148277922.jpg", alt: "Customer 5" },
|
||||
]}
|
||||
avatarText="Join 10,000+ satisfied clients"
|
||||
/>
|
||||
@@ -101,18 +66,9 @@ export default function LandingPage() {
|
||||
title="Science Meets Elegance"
|
||||
description="Our formula is crafted in clinical laboratories, utilizing proprietary bio-actives that accelerate natural collagen production while deeply hydrating your skin at the cellular level."
|
||||
metrics={[
|
||||
{
|
||||
value: "98%",
|
||||
title: "Hydration Increase",
|
||||
},
|
||||
{
|
||||
value: "12+",
|
||||
title: "Active Botanicals",
|
||||
},
|
||||
{
|
||||
value: "4 Weeks",
|
||||
title: "Visible Results",
|
||||
},
|
||||
{ value: "98%", title: "Hydration Increase" },
|
||||
{ value: "12+", title: "Active Botanicals" },
|
||||
{ value: "4 Weeks", title: "Visible Results" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/oil-dropper-background-pink-dripping-cosmetic-product_53876-137330.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
@@ -126,26 +82,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
tag: "Active",
|
||||
title: "Deep Hydration",
|
||||
subtitle: "Lasting moisture",
|
||||
description: "24-hour hydration complex locks in moisture for a plump appearance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-looking-away_23-2148092948.jpg",
|
||||
},
|
||||
tag: "Active", title: "Deep Hydration", subtitle: "Lasting moisture", description: "24-hour hydration complex locks in moisture for a plump appearance.", imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-looking-away_23-2148092948.jpg"},
|
||||
{
|
||||
tag: "Pure",
|
||||
title: "Organic Botanicals",
|
||||
subtitle: "Nature's touch",
|
||||
description: "Ethically sourced rare botanicals calm inflammation and brighten skin.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669117.jpg",
|
||||
},
|
||||
tag: "Pure", title: "Organic Botanicals", subtitle: "Nature's touch", description: "Ethically sourced rare botanicals calm inflammation and brighten skin.", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669117.jpg"},
|
||||
{
|
||||
tag: "Result",
|
||||
title: "Clinically Proven",
|
||||
subtitle: "Scientific efficacy",
|
||||
description: "Formulated by dermatologists to guarantee visible improvements.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-pomegranate-cream_23-2148803519.jpg",
|
||||
},
|
||||
tag: "Result", title: "Clinically Proven", subtitle: "Scientific efficacy", description: "Formulated by dermatologists to guarantee visible improvements.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-pomegranate-cream_23-2148803519.jpg"},
|
||||
]}
|
||||
title="Why Your Skin Loves Lumina"
|
||||
description="A refined ritual designed for the modern woman who demands efficacy and luxury in every drop."
|
||||
@@ -159,48 +100,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Signature Cream",
|
||||
price: "$125",
|
||||
variant: "50ml Jar",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-banner-beauty-products-with-copy-space_23-2149446552.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Revitalizing Serum",
|
||||
price: "$95",
|
||||
variant: "30ml Bottle",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-sideways-pipette-with-spa-oil_23-2148223724.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Brightening Eye Cream",
|
||||
price: "$75",
|
||||
variant: "15ml Jar",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232280.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Luminous Day Moisturizer",
|
||||
price: "$85",
|
||||
variant: "50ml Pump",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/model-holding-zero-waste-beauty-product_23-2151440284.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Botanical Face Oil",
|
||||
price: "$110",
|
||||
variant: "30ml Dropper",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-natural-argan-oil-dropper_23-2149016620.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Night Recovery Balm",
|
||||
price: "$135",
|
||||
variant: "50ml Jar",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-male-beauty-products-with-rock-stone-display_23-2150435231.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Signature Cream", price: "$125", variant: "50ml Jar", imageSrc: "http://img.b2bpic.net/free-photo/horizontal-banner-beauty-products-with-copy-space_23-2149446552.jpg" },
|
||||
{ id: "p2", name: "Revitalizing Serum", price: "$95", variant: "30ml Bottle", imageSrc: "http://img.b2bpic.net/free-photo/close-up-sideways-pipette-with-spa-oil_23-2148223724.jpg" },
|
||||
{ id: "p3", name: "Brightening Eye Cream", price: "$75", variant: "15ml Jar", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232280.jpg" },
|
||||
{ id: "p4", name: "Luminous Day Moisturizer", price: "$85", variant: "50ml Pump", imageSrc: "http://img.b2bpic.net/free-photo/model-holding-zero-waste-beauty-product_23-2151440284.jpg" },
|
||||
{ id: "p5", name: "Botanical Face Oil", price: "$110", variant: "30ml Dropper", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-natural-argan-oil-dropper_23-2149016620.jpg" },
|
||||
{ id: "p6", name: "Night Recovery Balm", price: "$135", variant: "50ml Jar", imageSrc: "http://img.b2bpic.net/free-photo/view-male-beauty-products-with-rock-stone-display_23-2150435231.jpg" },
|
||||
]}
|
||||
title="Signature Collection"
|
||||
description="Discover your perfect skin ritual."
|
||||
@@ -209,30 +114,16 @@ export default function LandingPage() {
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "92%",
|
||||
title: "Radiance Improvement",
|
||||
description: "Observed glow and brightness increase.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-adult-female-doctor-medical-robe-with-stethoscope-sitting-desk-with-office-tools-holding-glass-water-gesturing-ok-sign-isolated-purple-wall-with-copy-space_141793-119621.jpg",
|
||||
},
|
||||
id: "m1", value: "92%", title: "Radiance Improvement", description: "Observed glow and brightness increase.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-adult-female-doctor-medical-robe-with-stethoscope-sitting-desk-with-office-tools-holding-glass-water-gesturing-ok-sign-isolated-purple-wall-with-copy-space_141793-119621.jpg"},
|
||||
{
|
||||
id: "m2",
|
||||
value: "88%",
|
||||
title: "Firmness Boost",
|
||||
description: "Noticeable improvement in skin elasticity.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/healthy-pills-illness-treatment-instrument-diagnosis_1291-188.jpg",
|
||||
},
|
||||
id: "m2", value: "88%", title: "Firmness Boost", description: "Noticeable improvement in skin elasticity.", imageSrc: "http://img.b2bpic.net/free-photo/healthy-pills-illness-treatment-instrument-diagnosis_1291-188.jpg"},
|
||||
{
|
||||
id: "m3",
|
||||
value: "95%",
|
||||
title: "Customer Satisfaction",
|
||||
description: "Rated positively by dermatologists.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-brush_23-2148978131.jpg",
|
||||
},
|
||||
id: "m3", value: "95%", title: "Customer Satisfaction", description: "Rated positively by dermatologists.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-brush_23-2148978131.jpg"},
|
||||
]}
|
||||
title="Clinically Proven Efficacy"
|
||||
description="Results observed after consistent use during our 8-week clinical trial study."
|
||||
@@ -244,14 +135,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Vogue",
|
||||
"Harper's Bazaar",
|
||||
"Allure",
|
||||
"Cosmopolitan",
|
||||
"Marie Claire",
|
||||
"Elle",
|
||||
"Glamour",
|
||||
]}
|
||||
"Vogue", "Harper's Bazaar", "Allure", "Cosmopolitan", "Marie Claire", "Elle", "Glamour"]}
|
||||
title="Trusted by Experts"
|
||||
description="Featured in leading beauty publications and recommended by top clinics."
|
||||
/>
|
||||
@@ -264,45 +148,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Elena R.",
|
||||
handle: "@elena_skincare",
|
||||
testimonial: "My skin has never felt more alive and vibrant. Truly life-changing.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/world-cancer-day-awareness-with-patient_23-2151249710.jpg",
|
||||
},
|
||||
id: "t1", name: "Elena R.", handle: "@elena_skincare", testimonial: "My skin has never felt more alive and vibrant. Truly life-changing.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/world-cancer-day-awareness-with-patient_23-2151249710.jpg"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah J.",
|
||||
handle: "@sarahj",
|
||||
testimonial: "The most luxurious texture I've encountered in years. Obsessed.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-2934.jpg",
|
||||
},
|
||||
id: "t2", name: "Sarah J.", handle: "@sarahj", testimonial: "The most luxurious texture I've encountered in years. Obsessed.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-2934.jpg"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Maria K.",
|
||||
handle: "@mariak_beauty",
|
||||
testimonial: "Visible results in just one week. Highly recommended for busy professionals.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-attractive-young-caucasian-girl-with-dark-short-hair-white-top-looks-camera-indoors_197531-33260.jpg",
|
||||
},
|
||||
id: "t3", name: "Maria K.", handle: "@mariak_beauty", testimonial: "Visible results in just one week. Highly recommended for busy professionals.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-attractive-young-caucasian-girl-with-dark-short-hair-white-top-looks-camera-indoors_197531-33260.jpg"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Claire B.",
|
||||
handle: "@claireb",
|
||||
testimonial: "Finally, a cream that actually delivers on its anti-aging promises.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-strong-sporty-athletic-fitness-trainer-instructor-woman-wearing-brown-tracksuit-sitting_1258-200304.jpg",
|
||||
},
|
||||
id: "t4", name: "Claire B.", handle: "@claireb", testimonial: "Finally, a cream that actually delivers on its anti-aging promises.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-strong-sporty-athletic-fitness-trainer-instructor-woman-wearing-brown-tracksuit-sitting_1258-200304.jpg"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Sophia L.",
|
||||
handle: "@sophl",
|
||||
testimonial: "Simple, elegant, and effective. The ultimate skin luxury.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-combed-blonde-hair-applies-collagen-patches-eyes_273609-49267.jpg",
|
||||
},
|
||||
id: "t5", name: "Sophia L.", handle: "@sophl", testimonial: "Simple, elegant, and effective. The ultimate skin luxury.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-combed-blonde-hair-applies-collagen-patches-eyes_273609-49267.jpg"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Beauty Whispered"
|
||||
@@ -316,20 +175,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Is this cream suitable for sensitive skin?",
|
||||
content: "Yes, our formula is dermatologist-tested and hypoallergenic, perfect for even the most sensitive skin.",
|
||||
},
|
||||
id: "f1", title: "Is this cream suitable for sensitive skin?", content: "Yes, our formula is dermatologist-tested and hypoallergenic, perfect for even the most sensitive skin."},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How often should I use the product?",
|
||||
content: "We recommend applying morning and evening as part of your regular ritual for optimal results.",
|
||||
},
|
||||
id: "f2", title: "How often should I use the product?", content: "We recommend applying morning and evening as part of your regular ritual for optimal results."},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are your ingredients organic?",
|
||||
content: "Our ingredients are 100% ethically sourced and our primary actives are certified organic.",
|
||||
},
|
||||
id: "f3", title: "Are your ingredients organic?", content: "Our ingredients are 100% ethically sourced and our primary actives are certified organic."},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our premium skincare line."
|
||||
@@ -340,9 +190,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Newsletter"
|
||||
title="Join the Lumina Inner Circle"
|
||||
description="Receive exclusive skincare tips, early access to new releases, and personalized offers directly to your inbox."
|
||||
@@ -352,14 +200,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Lumina Skincare"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user