Merge version_1 into main #2
@@ -23,75 +23,50 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "/shop",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="Shine Lab"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="Shine Lab"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-info" data-section="about-info">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="About Shine Lab"
|
||||
metrics={[
|
||||
{
|
||||
label: "Trendy Styles",
|
||||
value: "100+",
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
label: "Happy Clients",
|
||||
value: "5k+",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
label: "Years Active",
|
||||
value: "2",
|
||||
icon: Calendar,
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about-info" data-section="about-info">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="About Shine Lab"
|
||||
metrics={[
|
||||
{ label: "Trendy Styles", value: "100+", icon: Sparkles },
|
||||
{ label: "Happy Clients", value: "5k+", icon: Users },
|
||||
{ label: "Years Active", value: "2", icon: Calendar },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Story"
|
||||
title="Made for You"
|
||||
description="Shine Lab started in a small studio with a mission to change how the youth views jewelry."
|
||||
subdescription="Beauty doesn't have to be expensive."
|
||||
icon={Heart}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-gold-chains-pears_23-2149836416.jpg"
|
||||
videoSrc="http://img.b2bpic.net/free-photo/golden-christmas-ornament_23-2147722551.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Story"
|
||||
title="Made for You"
|
||||
description="Shine Lab started in a small studio with a mission to change how the youth views jewelry."
|
||||
subdescription="Beauty doesn't have to be expensive."
|
||||
icon={Heart}
|
||||
videoSrc="http://img.b2bpic.net/free-photo/golden-christmas-ornament_23-2147722551.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Shine Lab"
|
||||
copyrightText="© 2025 Shine Lab | Affordable Luxury"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Shine Lab"
|
||||
copyrightText="© 2025 Shine Lab | Affordable Luxury"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
362
src/app/page.tsx
362
src/app/page.tsx
@@ -26,270 +26,116 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "/shop",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="Shine Lab"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="Shine Lab"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Shine Lab - Minimal Jewelry Collection"
|
||||
description="Discover affordable luxury designed for the modern generation. Elevate your everyday style with our trendy pieces."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gold-ring-with-shiny-diamond-stone-it_181624-32220.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-female-wearing-beautiful-silver-bracelet_181624-26319.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/moments-two-symbol-love-adorable_1304-2500.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409258.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expensive-golden-ring-with-white-powder-background_23-2150347034.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599063.jpg",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metal-precious-bracelet-chain-luxury-bright_1400-31.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-gold-chains-brick-arrangement_23-2149836426.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/jewelry-box_1339-396.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409292.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anniversary-decoration-background-valentine-red_1172-410.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-rock-concrete-tray_23-2150329710.jpg",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop New",
|
||||
href: "/shop",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-kids-hands-wearing-colorful-bracelets_329181-16003.jpg",
|
||||
alt: "Close up on kids hands wearing colorful bracelets",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-showing-hands-form-support_23-2150693577.jpg",
|
||||
alt: "Woman showing hands in form of support",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-shot-female-wearing-fashionable-bracelet-with-charm-pendants_181624-26943.jpg",
|
||||
alt: "Closeup shot of a female wearing a fashionable bracelet with charm pendants",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bride-s-morning-fine-art-wedding-happy-bride_1328-1772.jpg",
|
||||
alt: "Bride's morning. Fine art wedding. Happy Bride",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-young-women-having-fun-together_329181-15563.jpg",
|
||||
alt: "Beautiful young women having fun together",
|
||||
},
|
||||
]}
|
||||
avatarText="Join our global community"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Minimalist Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable Gold",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Quality",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Affordable Luxury",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Trendsetting",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Shine Lab - Minimal Jewelry Collection"
|
||||
description="Discover affordable luxury designed for the modern generation. Elevate your everyday style with our trendy pieces."
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/gold-ring-with-shiny-diamond-stone-it_181624-32220.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-female-wearing-beautiful-silver-bracelet_181624-26319.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/moments-two-symbol-love-adorable_1304-2500.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409258.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/expensive-golden-ring-with-white-powder-background_23-2150347034.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599063.jpg" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/metal-precious-bracelet-chain-luxury-bright_1400-31.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-gold-chains-brick-arrangement_23-2149836426.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/jewelry-box_1339-396.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409292.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/anniversary-decoration-background-valentine-red_1172-410.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-rock-concrete-tray_23-2150329710.jpg" },
|
||||
]}
|
||||
buttons={[{ text: "Shop New", href: "/shop" }]}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-kids-hands-wearing-colorful-bracelets_329181-16003.jpg", alt: "Close up on kids hands wearing colorful bracelets" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-showing-hands-form-support_23-2150693577.jpg", alt: "Woman showing hands in form of support" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-shot-female-wearing-fashionable-bracelet-with-charm-pendants_181624-26943.jpg", alt: "Closeup shot of a female wearing a fashionable bracelet with charm pendants" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/bride-s-morning-fine-art-wedding-happy-bride_1328-1772.jpg", alt: "Bride's morning. Fine art wedding. Happy Bride" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-young-women-having-fun-together_329181-15563.jpg", alt: "Beautiful young women having fun together" },
|
||||
]}
|
||||
avatarText="Join our global community"
|
||||
marqueeItems={[{ type: "text", text: "Minimalist Design" }, { type: "text", text: "Sustainable Gold" }, { type: "text", text: "Premium Quality" }, { type: "text", text: "Affordable Luxury" }, { type: "text", text: "Trendsetting" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Affordable Luxury",
|
||||
subtitle: "High-end style without the high price.",
|
||||
category: "Quality",
|
||||
value: "Premium",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Trendy Designs",
|
||||
subtitle: "Curated for the modern youth.",
|
||||
category: "Style",
|
||||
value: "Trendy",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Limited Collections",
|
||||
subtitle: "Get them before they disappear.",
|
||||
category: "Stock",
|
||||
value: "Limited",
|
||||
},
|
||||
]}
|
||||
title="Why Shine Lab?"
|
||||
description="Jewelry that fits your lifestyle, not just your budget."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Affordable Luxury", subtitle: "High-end style without the high price.", category: "Quality", value: "Premium" },
|
||||
{ id: "f2", title: "Trendy Designs", subtitle: "Curated for the modern youth.", category: "Style", value: "Trendy" },
|
||||
{ id: "f3", title: "Limited Collections", subtitle: "Get them before they disappear.", category: "Stock", value: "Limited" },
|
||||
]}
|
||||
title="Why Shine Lab?"
|
||||
description="Jewelry that fits your lifestyle, not just your budget."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about Shine Lab."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you ship internationally?",
|
||||
content: "Yes, we ship to over 50 countries worldwide.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is your jewelry waterproof?",
|
||||
content: "Our pieces are designed for durability, but we recommend avoiding heavy chemicals.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day return policy for unused items.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about Shine Lab."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you ship internationally?", content: "Yes, we ship to over 50 countries worldwide." },
|
||||
{ id: "q2", title: "Is your jewelry waterproof?", content: "Our pieces are designed for durability, but we recommend avoiding heavy chemicals." },
|
||||
{ id: "q3", title: "What is your return policy?", content: "We offer a 30-day return policy for unused items." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Premium Membership"
|
||||
description="Get exclusive access to new drops."
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Monthly",
|
||||
price: "$10/mo",
|
||||
subtitle: "Standard access",
|
||||
buttons: [
|
||||
{
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Early access",
|
||||
"Free shipping",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Yearly",
|
||||
price: "$100/yr",
|
||||
subtitle: "Best value",
|
||||
buttons: [
|
||||
{
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Everything in Monthly",
|
||||
"VIP support",
|
||||
"Birthday gift",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Premium Membership"
|
||||
description="Get exclusive access to new drops."
|
||||
plans={[
|
||||
{ id: "p1", badge: "Monthly", price: "$10/mo", subtitle: "Standard access", buttons: [{ text: "Subscribe", href: "#" }], features: ["Early access", "Free shipping"] },
|
||||
{ id: "p2", badge: "Yearly", price: "$100/yr", subtitle: "Best value", buttons: [{ text: "Subscribe", href: "#" }], features: ["Everything in Monthly", "VIP support", "Birthday gift"] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Quality Assured"
|
||||
description="Crafted with precision for longevity."
|
||||
features={[
|
||||
{
|
||||
title: "Expert Design",
|
||||
description: "Hand-picked aesthetics for every individual.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: PenTool,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/christmas-decoration-window_23-2147724518.jpg",
|
||||
imageAlt: "minimalist jewelry lifestyle",
|
||||
},
|
||||
{
|
||||
title: "Fast Shipping",
|
||||
description: "Your items arrive in sustainable packaging.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Truck,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gold-ring-with-shiny-diamond-stone-it_181624-32220.jpg?_wi=2",
|
||||
imageAlt: "minimalist jewelry lifestyle",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Quality Assured"
|
||||
description="Crafted with precision for longevity."
|
||||
features={[
|
||||
{ title: "Expert Design", description: "Hand-picked aesthetics for every individual.", bentoComponent: "reveal-icon", icon: PenTool },
|
||||
{ title: "Fast Shipping", description: "Your items arrive in sustainable packaging.", bentoComponent: "reveal-icon", icon: Truck },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Shine Lab"
|
||||
copyrightText="© 2025 Shine Lab | Affordable Luxury"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Shine Lab"
|
||||
copyrightText="© 2025 Shine Lab | Affordable Luxury"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user