Update src/app/page.tsx
This commit is contained in:
293
src/app/page.tsx
293
src/app/page.tsx
@@ -20,27 +20,22 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Collection",
|
||||
id: "#products",
|
||||
},
|
||||
{
|
||||
name: "Science",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Results",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Collection", id: "#products" },
|
||||
{ name: "Science", id: "#about" },
|
||||
{ name: "Results", id: "#testimonials" },
|
||||
{ name: "Support", id: "#contact" },
|
||||
]}
|
||||
brandName="Radiant Skin"
|
||||
/>
|
||||
@@ -49,41 +44,19 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Radiant skin starts with the right routine"
|
||||
description="Clinically-formulated skincare designed for your unique skin. Discover products that deliver visible results without compromise."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Our Collection",
|
||||
href: "#products",
|
||||
},
|
||||
{ text: "Shop Our Collection", href: "#products" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/natural-selfcare-products-arrangement_23-2149353134.jpg?_wi=1",
|
||||
imageAlt: "Luxurious skincare bottle",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-concept-beautiful-caucasian-woman-with-clean-skin-natural-makeup-isolated-bright-pink-bac_1258-96850.jpg?_wi=1",
|
||||
imageAlt: "Glowing skin model",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-tropical-leaves-with-beauty-tools-cosmetics_23-2148179530.jpg?_wi=1",
|
||||
imageAlt: "Organic skincare ingredients",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautician-woman-clinic-consults-client_23-2148878890.jpg",
|
||||
imageAlt: "Laboratory clinical skincare",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hydroalcoholic-gel-close-up_23-2148858943.jpg",
|
||||
imageAlt: "Skincare lifestyle routine",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skincare-products-big-green-leaf_23-2148317645.jpg",
|
||||
imageAlt: "Botanical skincare essence",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/natural-selfcare-products-arrangement_23-2149353134.jpg", imageAlt: "Luxurious skincare bottle" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beauty-concept-beautiful-caucasian-woman-with-clean-skin-natural-makeup-isolated-bright-pink-bac_1258-96850.jpg", imageAlt: "Glowing skin model" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-tropical-leaves-with-beauty-tools-cosmetics_23-2148179530.jpg", imageAlt: "Organic skincare ingredients" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautician-woman-clinic-consults-client_23-2148878890.jpg", imageAlt: "Laboratory clinical skincare" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-hydroalcoholic-gel-close-up_23-2148858943.jpg", imageAlt: "Skincare lifestyle routine" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/skincare-products-big-green-leaf_23-2148317645.jpg", imageAlt: "Botanical skincare essence" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -93,9 +66,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Clean Science, Real Results"
|
||||
description={[
|
||||
"We believe that effective skincare shouldn't require harsh chemicals. By merging clinical precision with natural botanical extracts, we create routines that work in harmony with your skin's biological rhythm.",
|
||||
"Our mission is to foster ingredient transparency, ensuring you understand exactly what you are putting on your face.",
|
||||
]}
|
||||
"We believe that effective skincare shouldn't require harsh chemicals. By merging clinical precision with natural botanical extracts, we create routines that work in harmony with your skin's biological rhythm.", "Our mission is to foster ingredient transparency, ensuring you understand exactly what you are putting on your face."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -106,49 +77,25 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Botanical Actives",
|
||||
description: "Formulated with plant-derived antioxidants for maximum skin nourishment.",
|
||||
icon: Leaf,
|
||||
title: "Botanical Actives", description: "Formulated with plant-derived antioxidants for maximum skin nourishment.", icon: Leaf,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fish-eggs-with-word-fish-them_91008-486.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-science-banner-with-glass-containers_23-2149495069.jpg",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-fish-eggs-with-word-fish-them_91008-486.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/horizontal-science-banner-with-glass-containers_23-2149495069.jpg" },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/natural-selfcare-products-arrangement_23-2149353134.jpg?_wi=2",
|
||||
imageAlt: "skincare botanical ingredients macro photography",
|
||||
},
|
||||
{
|
||||
title: "Clinical Precision",
|
||||
description: "Rigorously tested formulas backed by dermatological research.",
|
||||
icon: Droplets,
|
||||
title: "Clinical Precision", description: "Rigorously tested formulas backed by dermatological research.", icon: Droplets,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-doctor-recording-vlog-video-about-medicin_1157-36738.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nurse-working-laboratory_1398-1089.jpg",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-doctor-recording-vlog-video-about-medicin_1157-36738.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/nurse-working-laboratory_1398-1089.jpg" },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-concept-beautiful-caucasian-woman-with-clean-skin-natural-makeup-isolated-bright-pink-bac_1258-96850.jpg?_wi=2",
|
||||
imageAlt: "skincare botanical ingredients macro photography",
|
||||
},
|
||||
{
|
||||
title: "Sustainable Ethics",
|
||||
description: "Eco-conscious sourcing and fully recyclable packaging.",
|
||||
icon: Recycle,
|
||||
title: "Sustainable Ethics", description: "Eco-conscious sourcing and fully recyclable packaging.", icon: Recycle,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coconut-other-products-top-view_23-2148337502.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/avocado-eco-cream-spa-natural-cosmetics_23-2148645572.jpg",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/coconut-other-products-top-view_23-2148337502.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/avocado-eco-cream-spa-natural-cosmetics_23-2148645572.jpg" },
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-tropical-leaves-with-beauty-tools-cosmetics_23-2148179530.jpg?_wi=2",
|
||||
imageAlt: "skincare botanical ingredients macro photography",
|
||||
},
|
||||
]}
|
||||
title="Why Our Skincare Works"
|
||||
@@ -163,48 +110,12 @@ export default function LandingPage() {
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Hydration Serum",
|
||||
price: "$48.00",
|
||||
variant: "30ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glowing-bottle-foundation-advertising_23-2149511222.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Balancing Cleanser",
|
||||
price: "$32.00",
|
||||
variant: "150ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Radiance Oil",
|
||||
price: "$55.00",
|
||||
variant: "30ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/healthy-argan-oil-composition_23-2148989081.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Eye Recovery Cream",
|
||||
price: "$42.00",
|
||||
variant: "15ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-smiling-woman-with-patches-her-eyes-looking-mirror-skin-care-theme_1268-21223.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Clarifying Toner",
|
||||
price: "$28.00",
|
||||
variant: "200ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bowl-with-leaves-oil_23-2148268452.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Night Repair Moisturizer",
|
||||
price: "$62.00",
|
||||
variant: "50ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-ice-cream_23-2149022015.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Hydration Serum", price: "$48.00", variant: "30ml", imageSrc: "http://img.b2bpic.net/free-photo/glowing-bottle-foundation-advertising_23-2149511222.jpg" },
|
||||
{ id: "p2", name: "Balancing Cleanser", price: "$32.00", variant: "150ml", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg" },
|
||||
{ id: "p3", name: "Radiance Oil", price: "$55.00", variant: "30ml", imageSrc: "http://img.b2bpic.net/free-photo/healthy-argan-oil-composition_23-2148989081.jpg" },
|
||||
{ id: "p4", name: "Eye Recovery Cream", price: "$42.00", variant: "15ml", imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-smiling-woman-with-patches-her-eyes-looking-mirror-skin-care-theme_1268-21223.jpg" },
|
||||
{ id: "p5", name: "Clarifying Toner", price: "$28.00", variant: "200ml", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bowl-with-leaves-oil_23-2148268452.jpg" },
|
||||
{ id: "p6", name: "Night Repair Moisturizer", price: "$62.00", variant: "50ml", imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-ice-cream_23-2149022015.jpg" },
|
||||
]}
|
||||
title="The Daily Essentials"
|
||||
description="A curated collection for every skin type and concern."
|
||||
@@ -217,24 +128,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Smile,
|
||||
title: "Happy Customers",
|
||||
value: "15,000+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Award,
|
||||
title: "Products Awarded",
|
||||
value: "24",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Leaf,
|
||||
title: "Natural Ingredients",
|
||||
value: "100%",
|
||||
},
|
||||
{ id: "m1", icon: Smile, title: "Happy Customers", value: "15,000+" },
|
||||
{ id: "m2", icon: Award, title: "Products Awarded", value: "24" },
|
||||
{ id: "m3", icon: Leaf, title: "Natural Ingredients", value: "100%" },
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="We are proud of the transformation we help our customers achieve daily."
|
||||
@@ -247,41 +143,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Miller",
|
||||
role: "Beauty Editor",
|
||||
testimonial: "My skin has never felt this balanced and hydrated. A complete game-changer.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-brunette-woman-looks-camera-smiles-sits-home-kitchen_1258-199763.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "David Chen",
|
||||
role: "Skincare Blogger",
|
||||
testimonial: "Transparency is everything, and these products deliver on their promise.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-celebrating-all-skin-tones_23-2149179699.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Marketing Lead",
|
||||
testimonial: "The glow is real! I've finally found a routine that works for my sensitive skin.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/daydreaming-woman-blurred-plant_23-2148537387.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Marcus Thorne",
|
||||
role: "Architect",
|
||||
testimonial: "Simple, effective, and actually does what it claims. Highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396231.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Linda Wu",
|
||||
role: "Nurse",
|
||||
testimonial: "As a healthcare worker, my skin takes a toll. This routine is my sanctuary.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-cute-young-caucasian-girl-with-closed-eyes-touches-her-face-light-background-emotion-concept_197531-31396.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Sarah Miller", role: "Beauty Editor", testimonial: "My skin has never felt this balanced and hydrated. A complete game-changer.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-brunette-woman-looks-camera-smiles-sits-home-kitchen_1258-199763.jpg" },
|
||||
{ id: "t2", name: "David Chen", role: "Skincare Blogger", testimonial: "Transparency is everything, and these products deliver on their promise.", imageSrc: "http://img.b2bpic.net/free-photo/women-celebrating-all-skin-tones_23-2149179699.jpg" },
|
||||
{ id: "t3", name: "Elena Rodriguez", role: "Marketing Lead", testimonial: "The glow is real! I've finally found a routine that works for my sensitive skin.", imageSrc: "http://img.b2bpic.net/free-photo/daydreaming-woman-blurred-plant_23-2148537387.jpg" },
|
||||
{ id: "t4", name: "Marcus Thorne", role: "Architect", testimonial: "Simple, effective, and actually does what it claims. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-practicing-selfcare_23-2150396231.jpg" },
|
||||
{ id: "t5", name: "Linda Wu", role: "Nurse", testimonial: "As a healthcare worker, my skin takes a toll. This routine is my sanctuary.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-cute-young-caucasian-girl-with-closed-eyes-touches-her-face-light-background-emotion-concept_197531-31396.jpg" },
|
||||
]}
|
||||
title="Community Love"
|
||||
description="Don't just take our word for it—listen to the stories of our radiant community."
|
||||
@@ -293,21 +159,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Are your ingredients vegan?",
|
||||
content: "Yes, our entire line is 100% vegan and cruelty-free, sourced ethically from sustainable farms.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How long until I see results?",
|
||||
content: "While individual results vary, most customers notice improved texture within 2 weeks and a visible glow after 4 weeks of consistent use.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I use these products on sensitive skin?",
|
||||
content: "We prioritize skin barrier health and use gentle actives. However, we always recommend a patch test before starting any new product.",
|
||||
},
|
||||
{ id: "f1", title: "Are your ingredients vegan?", content: "Yes, our entire line is 100% vegan and cruelty-free, sourced ethically from sustainable farms." },
|
||||
{ id: "f2", title: "How long until I see results?", content: "While individual results vary, most customers notice improved texture within 2 weeks and a visible glow after 4 weeks of consistent use." },
|
||||
{ id: "f3", title: "Can I use these products on sensitive skin?", content: "We prioritize skin barrier health and use gentle actives. However, we always recommend a patch test before starting any new product." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about starting your Radiant Skin journey."
|
||||
@@ -318,18 +172,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in touch"
|
||||
title="Ready for your best skin?"
|
||||
description="Have questions about our ingredients or need help finding your perfect routine? Our experts are here to assist."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -337,49 +184,13 @@ export default function LandingPage() {
|
||||
<FooterBaseCard
|
||||
logoText="Radiant Skin"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "All Products",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Learn",
|
||||
items: [
|
||||
{
|
||||
label: "Our Science",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Ingredients",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Shop", items: [{ label: "All Products", href: "#products" }, { label: "New Arrivals", href: "#" }] },
|
||||
{ title: "Learn", items: [{ label: "Our Science", href: "#about" }, { label: "Ingredients", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Support", href: "#contact" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user