Update src/app/page.tsx
This commit is contained in:
357
src/app/page.tsx
357
src/app/page.tsx
@@ -17,272 +17,113 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Artisan Bracelets"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Artisan Bracelets"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Timeless Elegance, Handcrafted."
|
||||
description="Discover our collection of artisanal bracelets, meticulously crafted for those who value unique stories and quality design."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "c1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-elegant-wedding-rings-with-copy-space_23-2148483559.jpg",
|
||||
imageAlt: "Handmade artisan bracelet",
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-female-pink-dress-wearing-beautiful-silver-bracelet-with-heart-pendant_181624-24485.jpg",
|
||||
imageAlt: "Artisan wrist accessories",
|
||||
},
|
||||
{
|
||||
id: "c3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-bride-s-hands_181624-40806.jpg",
|
||||
imageAlt: "Minimalist bracelet design",
|
||||
},
|
||||
{
|
||||
id: "c4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-painting-piece-wood_23-2148742373.jpg",
|
||||
imageAlt: "Crafting process",
|
||||
},
|
||||
{
|
||||
id: "c5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gold-chains-flower-arrangement_23-2149836411.jpg",
|
||||
imageAlt: "Collection of bracelets",
|
||||
},
|
||||
{
|
||||
id: "c6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-chair-studio_23-2149392868.jpg",
|
||||
imageAlt: "Fashion model bracelet",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "plain" }}
|
||||
title="Timeless Elegance, Handcrafted."
|
||||
description="Discover our collection of artisanal bracelets, meticulously crafted for those who value unique stories and quality design."
|
||||
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||
carouselItems={[
|
||||
{ id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/top-view-elegant-wedding-rings-with-copy-space_23-2148483559.jpg", imageAlt: "handmade beaded bracelet high quality close up" },
|
||||
{ id: "c2", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-female-pink-dress-wearing-beautiful-silver-bracelet-with-heart-pendant_181624-24485.jpg", imageAlt: "hand wearing multiple bracelets fashion style" },
|
||||
{ id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-bride-s-hands_181624-40806.jpg", imageAlt: "minimalist bracelet jewelry design elegant" },
|
||||
{ id: "c4", imageSrc: "http://img.b2bpic.net/free-photo/person-painting-piece-wood_23-2148742373.jpg", imageAlt: "jewelry maker studio workspace" },
|
||||
{ id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/gold-chains-flower-arrangement_23-2149836411.jpg", imageAlt: "stack of colorful handmade bracelets" },
|
||||
{ id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-chair-studio_23-2149392868.jpg", imageAlt: "woman modeling artisan bracelets" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Our Craftsmanship"
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
label: "Years Experience",
|
||||
value: "5+",
|
||||
},
|
||||
{
|
||||
icon: Diamond,
|
||||
label: "Unique Pieces",
|
||||
value: "1200+",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Happy Clients",
|
||||
value: "800+",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Our Craftsmanship"
|
||||
metrics={[
|
||||
{ icon: Award, label: "Years Experience", value: "5+" },
|
||||
{ icon: Diamond, label: "Unique Pieces", value: "1200+" },
|
||||
{ icon: Users, label: "Happy Clients", value: "800+" },
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Silver Moonlight",
|
||||
price: "$45.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-with-wood-set-letters-hand-made-things-materials-composition-top-view_1268-17354.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Boho Sunset",
|
||||
price: "$38.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring_23-2150329668.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Eternal Charm",
|
||||
price: "$52.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/jewellery-bangle-background-with-place-text-banner-fashion-accessories_460848-13233.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Earth Harmony",
|
||||
price: "$42.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cropped-photo-woman-tasting-cheese-wooden-board-with-christmas-decorations-background_132075-11272.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Modern Weave",
|
||||
price: "$58.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599102.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Vintage Spirit",
|
||||
price: "$49.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bracelets-made-by-colorful-pearls-stones_114579-13013.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Collection"
|
||||
description="Each piece is unique, reflecting a blend of traditional skill and modern aesthetic."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Silver Moonlight", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/working-with-wood-set-letters-hand-made-things-materials-composition-top-view_1268-17354.jpg" },
|
||||
{ id: "p2", name: "Boho Sunset", price: "$38.00", imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring_23-2150329668.jpg" },
|
||||
{ id: "p3", name: "Eternal Charm", price: "$52.00", imageSrc: "http://img.b2bpic.net/free-photo/jewellery-bangle-background-with-place-text-banner-fashion-accessories_460848-13233.jpg" },
|
||||
{ id: "p4", name: "Earth Harmony", price: "$42.00", imageSrc: "http://img.b2bpic.net/free-photo/cropped-photo-woman-tasting-cheese-wooden-board-with-christmas-decorations-background_132075-11272.jpg" },
|
||||
{ id: "p5", name: "Modern Weave", price: "$58.00", imageSrc: "http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599102.jpg" },
|
||||
{ id: "p6", name: "Vintage Spirit", price: "$49.00", imageSrc: "http://img.b2bpic.net/free-photo/bracelets-made-by-colorful-pearls-stones_114579-13013.jpg" }
|
||||
]}
|
||||
title="Our Collection"
|
||||
description="Each piece is unique, reflecting a blend of traditional skill and modern aesthetic."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice G.",
|
||||
role: "Creative Director",
|
||||
testimonial: "I absolutely love my custom bracelet! It's stunning and feels so special.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-with-coffee-hands-emotion-concept-emotion-happiness_169016-65974.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark S.",
|
||||
role: "Photographer",
|
||||
testimonial: "The craftsmanship is top-notch. You can tell real love went into this.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/concentrated-female-with-afro-hairstyle-enjoys-coffee-break-cafeteria-notices-someone-looks-thoughtfully-away_273609-3190.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sarah P.",
|
||||
role: "Entrepreneur",
|
||||
testimonial: "My new favorite accessory. Fits perfectly with every outfit.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-lady-with-red-big-earrings-smiles-makes-selfie-pink-background_197531-13573.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David W.",
|
||||
role: "Designer",
|
||||
testimonial: "Beautiful design and really durable. Extremely happy with the purchase.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-mask-stands-street_1157-33287.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Elena R.",
|
||||
role: "Teacher",
|
||||
testimonial: "Highly recommend! These bracelets make the perfect gifts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-dark-skinned-smiling-woman-with-bushy-hairdo-holds-cup-coffee-espresso-sits-against-cafe-interior_273609-3188.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="Stories from those who wear our pieces."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alice G.", role: "Creative Director", testimonial: "I absolutely love my custom bracelet! It's stunning and feels so special.", imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-with-coffee-hands-emotion-concept-emotion-happiness_169016-65974.jpg" },
|
||||
{ id: "t2", name: "Mark S.", role: "Photographer", testimonial: "The craftsmanship is top-notch. You can tell real love went into this.", imageSrc: "http://img.b2bpic.net/free-photo/concentrated-female-with-afro-hairstyle-enjoys-coffee-break-cafeteria-notices-someone-looks-thoughtfully-away_273609-3190.jpg" },
|
||||
{ id: "t3", name: "Sarah P.", role: "Entrepreneur", testimonial: "My new favorite accessory. Fits perfectly with every outfit.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-lady-with-red-big-earrings-smiles-makes-selfie-pink-background_197531-13573.jpg" },
|
||||
{ id: "t4", name: "David W.", role: "Designer", testimonial: "Beautiful design and really durable. Extremely happy with the purchase.", imageSrc: "http://img.b2bpic.net/free-photo/woman-mask-stands-street_1157-33287.jpg" },
|
||||
{ id: "t5", name: "Elena R.", role: "Teacher", testimonial: "Highly recommend! These bracelets make the perfect gifts.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-dark-skinned-smiling-woman-with-bushy-hairdo-holds-cup-coffee-espresso-sits-against-cafe-interior_273609-3188.jpg" }
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="Stories from those who wear our pieces."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
text="Have a custom design in mind? Let's create something unique together."
|
||||
buttons={[
|
||||
{
|
||||
text: "Email Us",
|
||||
href: "mailto:hello@example.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
text="Have a custom design in mind? Let's create something unique together."
|
||||
buttons={[{ text: "Email Us", href: "mailto:hello@example.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Shop All",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Artisan Bracelets"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Shop All", href: "#products" }, { label: "Our Story", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }, { label: "Twitter", href: "#" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||||
]}
|
||||
logoText="Artisan Bracelets"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user