Merge version_2 into main #1
189
src/app/page.tsx
189
src/app/page.tsx
@@ -33,21 +33,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Routine",
|
||||
id: "routine",
|
||||
},
|
||||
name: "Routine", id: "routine"},
|
||||
{
|
||||
name: "DIY",
|
||||
id: "diy",
|
||||
},
|
||||
name: "DIY", id: "diy"},
|
||||
{
|
||||
name: "Budget",
|
||||
id: "budget",
|
||||
},
|
||||
name: "Budget", id: "budget"},
|
||||
]}
|
||||
brandName="GlowUp Guide"
|
||||
/>
|
||||
@@ -56,41 +48,26 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Your Glow-Up Starts Here ✨"
|
||||
description="Unlock your healthiest skin with simple, beginner-friendly routines. Your journey to a radiant, confident you starts with just a few steps."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Your Routine",
|
||||
href: "#routine",
|
||||
},
|
||||
text: "Start Your Routine", href: "#routine"},
|
||||
{
|
||||
text: "Skin Type Quiz",
|
||||
href: "#quiz",
|
||||
},
|
||||
text: "Find Your Skin Type", href: "#quiz"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-composition-spa-objects_23-2148099250.jpg",
|
||||
imageAlt: "soft pastel skincare flatlay",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-composition-spa-objects_23-2148099250.jpg", imageAlt: "soft pastel skincare flatlay"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-little-girls-cute-pajamas_1157-25579.jpg",
|
||||
imageAlt: "young woman smiling glowing skin",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-little-girls-cute-pajamas_1157-25579.jpg", imageAlt: "young woman smiling glowing skin"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/packaging-concept-with-branches_23-2147672778.jpg",
|
||||
imageAlt: "minimalist skincare bottle on marble",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/packaging-concept-with-branches_23-2147672778.jpg", imageAlt: "minimalist skincare bottle on marble"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elements-relaxing-massage-spa_23-2148176938.jpg",
|
||||
imageAlt: "Elements for a relaxing massage in a spa",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elements-relaxing-massage-spa_23-2148176938.jpg", imageAlt: "Elements for a relaxing massage in a spa"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/loofah-spa-stone-himalayan-pink-rock-salt-soap-white-background_23-2147939991.jpg",
|
||||
imageAlt: "Loofah; spa stone; himalayan pink rock salt and soap on white background",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/loofah-spa-stone-himalayan-pink-rock-salt-soap-white-background_23-2147939991.jpg", imageAlt: "Loofah; spa stone; himalayan pink rock salt and soap on white background"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
@@ -118,20 +95,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Morning Routine",
|
||||
description: "Cleanse, hydrate, and protect with SPF to keep your skin safe all day long.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lady-without-makeup-with-towel-her-head-holding-red-cup-coffee-woman-bathrobe-posing-bedroom_197531-17271.jpg",
|
||||
},
|
||||
title: "Morning Routine", description: "Cleanse, hydrate, and protect with SPF to keep your skin safe all day long.", imageSrc: "http://img.b2bpic.net/free-photo/lady-without-makeup-with-towel-her-head-holding-red-cup-coffee-woman-bathrobe-posing-bedroom_197531-17271.jpg"},
|
||||
{
|
||||
title: "Natural Remedies",
|
||||
description: "Safe, effective DIY masks using ingredients you already have in your kitchen.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-ingredients-arrangement_23-2148897593.jpg",
|
||||
},
|
||||
title: "Natural Remedies", description: "Safe, effective DIY masks using ingredients you already have in your kitchen.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-ingredients-arrangement_23-2148897593.jpg"},
|
||||
{
|
||||
title: "Budget Hacks",
|
||||
description: "Build a solid routine without breaking the bank. Affordable gems included.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hands-packing-small-products-top-view_23-2149764825.jpg",
|
||||
},
|
||||
title: "Budget Hacks", description: "Build a solid routine without breaking the bank. Affordable gems included.", imageSrc: "http://img.b2bpic.net/free-photo/hands-packing-small-products-top-view_23-2149764825.jpg"},
|
||||
]}
|
||||
title="Master Your Routine"
|
||||
description="Consistency is key. Follow our simple morning and night guides designed for total beginners."
|
||||
@@ -146,59 +114,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "GlowBrand",
|
||||
name: "Gentle Cleanser",
|
||||
price: "$12",
|
||||
rating: 5,
|
||||
reviewCount: "1.2k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-eucalyptus-with-beauty-products_23-2149440672.jpg",
|
||||
},
|
||||
id: "p1", brand: "GlowBrand", name: "Gentle Cleanser", price: "$12", rating: 5,
|
||||
reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-eucalyptus-with-beauty-products_23-2149440672.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "HydraFix",
|
||||
name: "Daily Moisturizer",
|
||||
price: "$15",
|
||||
rating: 4,
|
||||
reviewCount: "890",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skincare-product-stone-with-branches_23-2152010125.jpg",
|
||||
},
|
||||
id: "p2", brand: "HydraFix", name: "Daily Moisturizer", price: "$15", rating: 4,
|
||||
reviewCount: "890", imageSrc: "http://img.b2bpic.net/free-photo/skincare-product-stone-with-branches_23-2152010125.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "SunGuard",
|
||||
name: "Invisible SPF 50",
|
||||
price: "$18",
|
||||
rating: 5,
|
||||
reviewCount: "2.1k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-skincare-product-beach_23-2150167901.jpg",
|
||||
},
|
||||
id: "p3", brand: "SunGuard", name: "Invisible SPF 50", price: "$18", rating: 5,
|
||||
reviewCount: "2.1k", imageSrc: "http://img.b2bpic.net/free-photo/top-view-skincare-product-beach_23-2150167901.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "PureGlow",
|
||||
name: "Vitamin C Serum",
|
||||
price: "$20",
|
||||
rating: 4,
|
||||
reviewCount: "560",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lemon-oils-healthy-relaxed-mind_23-2148677986.jpg",
|
||||
},
|
||||
id: "p4", brand: "PureGlow", name: "Vitamin C Serum", price: "$20", rating: 4,
|
||||
reviewCount: "560", imageSrc: "http://img.b2bpic.net/free-photo/lemon-oils-healthy-relaxed-mind_23-2148677986.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "SoftLips",
|
||||
name: "Lip Care Balm",
|
||||
price: "$8",
|
||||
rating: 5,
|
||||
reviewCount: "340",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serum-bottle-green-leaf-assortment_23-2149353093.jpg",
|
||||
},
|
||||
id: "p5", brand: "SoftLips", name: "Lip Care Balm", price: "$8", rating: 5,
|
||||
reviewCount: "340", imageSrc: "http://img.b2bpic.net/free-photo/serum-bottle-green-leaf-assortment_23-2149353093.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "NatureOil",
|
||||
name: "Pure Facial Oil",
|
||||
price: "$14",
|
||||
rating: 4,
|
||||
reviewCount: "420",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-argan-oil-arrangement_23-2148955757.jpg",
|
||||
},
|
||||
id: "p6", brand: "NatureOil", name: "Pure Facial Oil", price: "$14", rating: 4,
|
||||
reviewCount: "420", imageSrc: "http://img.b2bpic.net/free-photo/front-view-argan-oil-arrangement_23-2148955757.jpg"},
|
||||
]}
|
||||
title="Beginner Essentials"
|
||||
description="Curated affordable finds to get you started on your skin journey."
|
||||
@@ -211,20 +143,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Does your skin feel tight after washing?",
|
||||
content: "If yes, you might have dry skin.",
|
||||
},
|
||||
id: "1", title: "Does your skin feel tight after washing?", content: "If yes, you might have dry skin."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Does your T-zone get shiny during the day?",
|
||||
content: "You likely have combination or oily skin.",
|
||||
},
|
||||
id: "2", title: "Does your T-zone get shiny during the day?", content: "You likely have combination or oily skin."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you often get redness from new products?",
|
||||
content: "You might have sensitive skin.",
|
||||
},
|
||||
id: "3", title: "Do you often get redness from new products?", content: "You might have sensitive skin."},
|
||||
]}
|
||||
title="Skin Type Quiz"
|
||||
description="Identify your skin type with these simple questions."
|
||||
@@ -239,31 +162,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "80%",
|
||||
title: "Improvement Rate",
|
||||
items: [
|
||||
"In 4 weeks",
|
||||
"Consistent usage",
|
||||
],
|
||||
id: "m1", value: "80%", title: "Improvement Rate", items: [
|
||||
"In 4 weeks", "Consistent usage"],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "2x",
|
||||
title: "Hydration Boost",
|
||||
items: [
|
||||
"Correct products",
|
||||
"Daily habits",
|
||||
],
|
||||
id: "m2", value: "2x", title: "Hydration Boost", items: [
|
||||
"Correct products", "Daily habits"],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Confidence Gain",
|
||||
items: [
|
||||
"Positive results",
|
||||
"Healthy skin",
|
||||
],
|
||||
id: "m3", value: "100%", title: "Confidence Gain", items: [
|
||||
"Positive results", "Healthy skin"],
|
||||
},
|
||||
]}
|
||||
title="Why Routine Matters"
|
||||
@@ -280,25 +188,9 @@ export default function LandingPage() {
|
||||
description="Read our latest skincare advice and trends."
|
||||
blogs={[
|
||||
{
|
||||
id: "b1",
|
||||
category: "Education",
|
||||
title: "Morning Routine 101",
|
||||
excerpt: "Learn why the morning cleanse is vital.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-beautiful-young-woman-showing-beauty-products-camera-recommending_1258-255213.jpg",
|
||||
authorName: "Glow Team",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-beautiful-young-vlogger-content-maker-recording-video-about-makeup_1258-281992.jpg",
|
||||
date: "Feb 1, 2025",
|
||||
},
|
||||
id: "b1", category: "Education", title: "Morning Routine 101", excerpt: "Learn why the morning cleanse is vital.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-beautiful-young-woman-showing-beauty-products-camera-recommending_1258-255213.jpg", authorName: "Glow Team", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-beautiful-young-vlogger-content-maker-recording-video-about-makeup_1258-281992.jpg", date: "Feb 1, 2025"},
|
||||
{
|
||||
id: "b2",
|
||||
category: "DIY",
|
||||
title: "DIY Face Masks",
|
||||
excerpt: "Kitchen ingredients for better skin.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/homemade-treatment-ingredients-arrangement_23-2148894309.jpg",
|
||||
authorName: "Glow Team",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-beautiful-young-vlogger-content-maker-recording-video-about-makeup_1258-281992.jpg",
|
||||
date: "Feb 5, 2025",
|
||||
},
|
||||
id: "b2", category: "DIY", title: "DIY Face Masks", excerpt: "Kitchen ingredients for better skin.", imageSrc: "http://img.b2bpic.net/free-photo/homemade-treatment-ingredients-arrangement_23-2148894309.jpg", authorName: "Glow Team", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-beautiful-young-vlogger-content-maker-recording-video-about-makeup_1258-281992.jpg", date: "Feb 5, 2025"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -307,8 +199,7 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
text="Join our newsletter for weekly glow-up tips and exclusive product recommendations delivered straight to your inbox."
|
||||
/>
|
||||
</div>
|
||||
@@ -322,4 +213,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user