Merge version_1 into main #2
392
src/app/page.tsx
392
src/app/page.tsx
@@ -26,300 +26,118 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "#products",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
]}
|
||||
brandName="SkincareDupes"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Reviews", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
]}
|
||||
brandName="SkincareDupes"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="SkincareDupes"
|
||||
description="Discover high-performance skincare without the luxury price tag. We help you find science-backed, affordable alternatives for your favorite beauty products."
|
||||
buttons={[
|
||||
{
|
||||
text: "Find a Dupe",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Learn How",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238280.jpg?_wi=1"
|
||||
imageAlt="minimalist skincare bottles marble"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="SkincareDupes"
|
||||
description="Discover high-performance skincare without the luxury price tag. We help you find science-backed, affordable alternatives for your favorite beauty products."
|
||||
buttons={[{ text: "Find a Dupe", href: "#products" }, { text: "Learn How", href: "#features" }]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238280.jpg"
|
||||
imageAlt="minimalist skincare bottles marble"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Expensive marketing markups",
|
||||
"Fragrance overload",
|
||||
"Hard to find availability",
|
||||
"Outdated formulations",
|
||||
"Heavy silicone bases",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Science-backed formulas",
|
||||
"Clean ingredient sourcing",
|
||||
"Accessible price points",
|
||||
"Verified clinical studies",
|
||||
"Transparent labeling",
|
||||
],
|
||||
}}
|
||||
title="Why Choose Our Dupes?"
|
||||
description="We rigorously analyze ingredient profiles to ensure our suggested dupes provide comparable performance to high-end equivalents."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
negativeCard={{ items: ["Expensive marketing markups", "Fragrance overload", "Hard to find availability", "Outdated formulations", "Heavy silicone bases"] }}
|
||||
positiveCard={{ items: ["Science-backed formulas", "Clean ingredient sourcing", "Accessible price points", "Verified clinical studies", "Transparent labeling"] }}
|
||||
title="Why Choose Our Dupes?"
|
||||
description="We rigorously analyze ingredient profiles to ensure our suggested dupes provide comparable performance to high-end equivalents."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Luxury Brand",
|
||||
name: "Hydra-Luxe Serum",
|
||||
price: "$85.00",
|
||||
rating: 5,
|
||||
reviewCount: "1.2k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-purple-make-up-bottle_23-2148320920.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Budget Brand",
|
||||
name: "Aqua-Balance Serum",
|
||||
price: "$12.00",
|
||||
rating: 5,
|
||||
reviewCount: "850",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/foundation-advertising-with-different-containers_23-2149511276.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Luxury Brand",
|
||||
name: "Night Repair Cream",
|
||||
price: "$120.00",
|
||||
rating: 4.5,
|
||||
reviewCount: "2.1k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-jars-food-storage-kitchen_169016-20584.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Budget Brand",
|
||||
name: "Overnight Restore",
|
||||
price: "$18.00",
|
||||
rating: 4.5,
|
||||
reviewCount: "1.5k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-natural-cream-concept_23-2148578663.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Luxury Brand",
|
||||
name: "Radiance Eye Cream",
|
||||
price: "$95.00",
|
||||
rating: 4.8,
|
||||
reviewCount: "900",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skin-care-product-arrangement-sand_23-2148761480.jpg",
|
||||
},
|
||||
]}
|
||||
title="Popular Dupes"
|
||||
description="Top-rated affordable skincare alternatives that match luxury formulations."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", brand: "Luxury Brand", name: "Hydra-Luxe Serum", price: "$85.00", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-purple-make-up-bottle_23-2148320920.jpg" },
|
||||
{ id: "2", brand: "Budget Brand", name: "Aqua-Balance Serum", price: "$12.00", rating: 5, reviewCount: "850", imageSrc: "http://img.b2bpic.net/free-photo/foundation-advertising-with-different-containers_23-2149511276.jpg" },
|
||||
{ id: "3", brand: "Luxury Brand", name: "Night Repair Cream", price: "$120.00", rating: 4.5, reviewCount: "2.1k", imageSrc: "http://img.b2bpic.net/free-photo/set-jars-food-storage-kitchen_169016-20584.jpg" },
|
||||
{ id: "4", brand: "Budget Brand", name: "Overnight Restore", price: "$18.00", rating: 4.5, reviewCount: "1.5k", imageSrc: "http://img.b2bpic.net/free-photo/front-view-natural-cream-concept_23-2148578663.jpg" },
|
||||
{ id: "5", brand: "Luxury Brand", name: "Radiance Eye Cream", price: "$95.00", rating: 4.8, reviewCount: "900", imageSrc: "http://img.b2bpic.net/free-photo/skin-care-product-arrangement-sand_23-2148761480.jpg" }
|
||||
]}
|
||||
title="Popular Dupes"
|
||||
description="Top-rated affordable skincare alternatives that match luxury formulations."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "User",
|
||||
company: "Skincare Community",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-make-up_23-2148932841.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jessica Chen",
|
||||
role: "User",
|
||||
company: "Skincare Community",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skin-care-after-effect-smiling-young-woman-with-healthy-hydrated-moisturized-natural-skin-touching-face-near-jawline-look-pleased-cosmetic-treatment-from-acne-blemishes-pure-pores_176420-45111.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Davis",
|
||||
role: "User",
|
||||
company: "Skincare Community",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12672.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Wilson",
|
||||
role: "User",
|
||||
company: "Skincare Community",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021814.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Maria Garcia",
|
||||
role: "User",
|
||||
company: "Skincare Community",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-wearing-bathrobe_23-2150100182.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "10k+",
|
||||
label: "Dupes Found",
|
||||
},
|
||||
{
|
||||
value: "$500k",
|
||||
label: "Savings Generated",
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
]}
|
||||
title="Loved by thousands"
|
||||
description="Hear what our community says about finding the perfect alternatives."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", role: "User", company: "Skincare Community", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-make-up_23-2148932841.jpg" },
|
||||
{ id: "2", name: "Jessica Chen", role: "User", company: "Skincare Community", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/skin-care-after-effect-smiling-young-woman-with-healthy-hydrated-moisturized-natural-skin-touching-face-near-jawline-look-pleased-cosmetic-treatment-from-acne-blemishes-pure-pores_176420-45111.jpg" },
|
||||
{ id: "3", name: "Emily Davis", role: "User", company: "Skincare Community", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12672.jpg" },
|
||||
{ id: "4", name: "David Wilson", role: "User", company: "Skincare Community", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021814.jpg" },
|
||||
{ id: "5", name: "Maria Garcia", role: "User", company: "Skincare Community", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-wearing-bathrobe_23-2150100182.jpg" }
|
||||
]}
|
||||
kpiItems={[{ value: "10k+", label: "Dupes Found" }, { value: "$500k", label: "Savings Generated" }, { value: "4.9/5", label: "Avg Rating" }]}
|
||||
title="Loved by thousands"
|
||||
description="Hear what our community says about finding the perfect alternatives."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Are these dupes really effective?",
|
||||
content: "Our dupes undergo rigorous formula analysis to ensure active ingredients and concentrations match luxury products.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How often do you update the list?",
|
||||
content: "We refresh our catalog monthly based on new product launches and ingredient changes.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Is the matching 100% identical?",
|
||||
content: "We look for 'functional duplicates'—products that provide the same skin benefits and results, even if the precise ingredient list isn't identical.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/make-up-products-aligned_23-2148598512.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about skincare dupe finding."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Are these dupes really effective?", content: "Our dupes undergo rigorous formula analysis to ensure active ingredients and concentrations match luxury products." },
|
||||
{ id: "2", title: "How often do you update the list?", content: "We refresh our catalog monthly based on new product launches and ingredient changes." },
|
||||
{ id: "3", title: "Is the matching 100% identical?", content: "We look for 'functional duplicates'—products that provide the same skin benefits and results, even if the precise ingredient list isn't identical." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/make-up-products-aligned_23-2148598512.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about skincare dupe finding."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Stay Updated"
|
||||
title="Never miss a deal"
|
||||
description="Sign up for our newsletter and be the first to know about new dupe finds for your favorite products."
|
||||
mediaPosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238280.jpg?_wi=2"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Stay Updated"
|
||||
title="Never miss a deal"
|
||||
description="Sign up for our newsletter and be the first to know about new dupe finds for your favorite products."
|
||||
mediaPosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="SkincareDupes"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Products",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Safety Info",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="SkincareDupes"
|
||||
columns={[
|
||||
{ title: "Platform", items: [{ label: "Features", href: "#features" }, { label: "Products", href: "#products" }, { label: "Testimonials", href: "#testimonials" }] },
|
||||
{ title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "Blog", href: "#" }, { label: "Safety Info", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user