Update src/app/page.tsx
This commit is contained in:
473
src/app/page.tsx
473
src/app/page.tsx
@@ -15,347 +15,158 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Aurelia"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Collection", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Aurelia"
|
||||
button={{ text: "View Collection", href: "#products" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Timeless Elegance in Every Detail"
|
||||
description="Discover handcrafted jewelry designed to celebrate life's most precious moments with grace and sophistication."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Collection",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/aesthetic-golden-earrings-assortment_23-2149846587.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/aesthetic-golden-earrings-high-angle_23-2149846560.jpg",
|
||||
alt: "Aesthetic golden earrings high angle",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599065.jpg",
|
||||
alt: "Abstract gold chain jewellery presentation",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/aesthetic-golden-earrings-high-angle_23-2149846567.jpg",
|
||||
alt: "Aesthetic golden earrings high angle",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-with-marble_23-2150329648.jpg",
|
||||
alt: "View of luxurious golden ring with marble",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599069.jpg",
|
||||
alt: "Abstract gold chain jewellery presentation",
|
||||
},
|
||||
]}
|
||||
avatarText="Loved by over 5,000 customers worldwide."
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Ethically Sourced",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Handcrafted Luxury",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Lifetime Warranty",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Artisanal Quality",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{ variant: "plain" }}
|
||||
title="Timeless Elegance in Every Detail"
|
||||
description="Discover handcrafted jewelry designed to celebrate life's most precious moments with grace and sophistication."
|
||||
buttons={[{ text: "View Collection", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/aesthetic-golden-earrings-assortment_23-2149846587.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/aesthetic-golden-earrings-high-angle_23-2149846560.jpg", alt: "Aesthetic golden earrings high angle" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599065.jpg", alt: "Abstract gold chain jewellery presentation" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/aesthetic-golden-earrings-high-angle_23-2149846567.jpg", alt: "Aesthetic golden earrings high angle" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-with-marble_23-2150329648.jpg", alt: "View of luxurious golden ring with marble" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599069.jpg", alt: "Abstract gold chain jewellery presentation" }
|
||||
]}
|
||||
avatarText="Loved by over 5,000 customers worldwide."
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Ethically Sourced" },
|
||||
{ type: "text", text: "Handcrafted Luxury" },
|
||||
{ type: "text", text: "Timeless Design" },
|
||||
{ type: "text", text: "Lifetime Warranty" },
|
||||
{ type: "text", text: "Artisanal Quality" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Craftsmanship"
|
||||
description="For over two decades, we have dedicated ourselves to the art of fine jewelry making, combining traditional techniques with contemporary aesthetics."
|
||||
metrics={[
|
||||
{
|
||||
value: "20+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
title: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Ethical Sourcing",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/craftswoman-using-blow-torch_107420-65200.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Craftsmanship"
|
||||
description="For over two decades, we have dedicated ourselves to the art of fine jewelry making, combining traditional techniques with contemporary aesthetics."
|
||||
metrics={[
|
||||
{ value: "20+", title: "Years Experience" },
|
||||
{ value: "5k+", title: "Happy Clients" },
|
||||
{ value: "100%", title: "Ethical Sourcing" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/craftswoman-using-blow-torch_107420-65200.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Eternal Gold Ring",
|
||||
price: "$1,200",
|
||||
variant: "18k Gold",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/golden-ring-with-purple-gemstone_1203-1529.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Moonlight Necklace",
|
||||
price: "$850",
|
||||
variant: "Sterling Silver",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-female-wearing-beautiful-silver-necklace-with-pendant_181624-24692.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Stellar Earrings",
|
||||
price: "$600",
|
||||
variant: "14k Gold",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-woman-tropical-luxury-villa-wearing-white-stylish-blazer-jewellery-tropical-leaves_343596-1959.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Heritage Bracelet",
|
||||
price: "$950",
|
||||
variant: "18k Gold",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-gold-chains-still-life_23-2149560608.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Classic Bangle",
|
||||
price: "$700",
|
||||
variant: "14k Gold",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-young-woman-street_1301-4773.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Petal Pendant",
|
||||
price: "$450",
|
||||
variant: "Gold Plated",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gold-ring_1203-2740.jpg",
|
||||
},
|
||||
]}
|
||||
title="Signature Collection"
|
||||
description="Each piece is meticulously crafted using ethically sourced materials, ensuring quality and elegance that endures."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "Eternal Gold Ring", price: "$1,200", variant: "18k Gold", imageSrc: "http://img.b2bpic.net/free-photo/golden-ring-with-purple-gemstone_1203-1529.jpg" },
|
||||
{ id: "2", name: "Moonlight Necklace", price: "$850", variant: "Sterling Silver", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-female-wearing-beautiful-silver-necklace-with-pendant_181624-24692.jpg" },
|
||||
{ id: "3", name: "Stellar Earrings", price: "$600", variant: "14k Gold", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-woman-tropical-luxury-villa-wearing-white-stylish-blazer-jewellery-tropical-leaves_343596-1959.jpg" },
|
||||
{ id: "4", name: "Heritage Bracelet", price: "$950", variant: "18k Gold", imageSrc: "http://img.b2bpic.net/free-photo/top-view-gold-chains-still-life_23-2149560608.jpg" },
|
||||
{ id: "5", name: "Classic Bangle", price: "$700", variant: "14k Gold", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-young-woman-street_1301-4773.jpg" },
|
||||
{ id: "6", name: "Petal Pendant", price: "$450", variant: "Gold Plated", imageSrc: "http://img.b2bpic.net/free-photo/gold-ring_1203-2740.jpg" }
|
||||
]}
|
||||
title="Signature Collection"
|
||||
description="Each piece is meticulously crafted using ethically sourced materials, ensuring quality and elegance that endures."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Ethical Sourcing",
|
||||
subtitle: "Consciously sourced materials.",
|
||||
category: "Quality",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Artisanal Craft",
|
||||
subtitle: "Made by hand in Italy.",
|
||||
category: "Detail",
|
||||
value: "Expert",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Lifetime Quality",
|
||||
subtitle: "Built to last generations.",
|
||||
category: "Endurance",
|
||||
value: "Always",
|
||||
},
|
||||
]}
|
||||
title="Why Aurelia?"
|
||||
description="We believe in transparency, quality, and beauty above all else."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Ethical Sourcing", subtitle: "Consciously sourced materials.", category: "Quality", value: "100%" },
|
||||
{ id: "f2", title: "Artisanal Craft", subtitle: "Made by hand in Italy.", category: "Detail", value: "Expert" },
|
||||
{ id: "f3", title: "Lifetime Quality", subtitle: "Built to last generations.", category: "Endurance", value: "Always" }
|
||||
]}
|
||||
title="Why Aurelia?"
|
||||
description="We believe in transparency, quality, and beauty above all else."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Anna S.",
|
||||
handle: "@anna_s",
|
||||
testimonial: "Exquisite quality and truly beautiful designs.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-dark-skinned-woman-with-pleased-expression-holds-sunglasses-has-curly-bushy-hair-sits-against-cafe-interior_273609-3177.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Marcus R.",
|
||||
handle: "@marcus_r",
|
||||
testimonial: "The perfect engagement ring. She loved it!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-adult-caucasian-blonde-silk-black-pajamas-uses-headphones-sits-balcony-day-leisure-lifestyle-beauty-concept_197531-31178.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena D.",
|
||||
handle: "@elena_d",
|
||||
testimonial: "Elegant and minimalist, exactly my style.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-black-sweater-posing_246466-38.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Sarah L.",
|
||||
handle: "@sarah_l",
|
||||
testimonial: "Fast delivery and stunning packaging.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/guy-presenting-gift-box-attractive-happy-lady_23-2148016809.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "James P.",
|
||||
handle: "@james_p",
|
||||
testimonial: "Excellent craftsmanship throughout.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17097.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Stories of Love"
|
||||
description="What our customers say about our pieces."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Anna S.", handle: "@anna_s", testimonial: "Exquisite quality and truly beautiful designs.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-dark-skinned-woman-with-pleased-expression-holds-sunglasses-has-curly-bushy-hair-sits-against-cafe-interior_273609-3177.jpg" },
|
||||
{ id: "t2", name: "Marcus R.", handle: "@marcus_r", testimonial: "The perfect engagement ring. She loved it!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-adult-caucasian-blonde-silk-black-pajamas-uses-headphones-sits-balcony-day-leisure-lifestyle-beauty-concept_197531-31178.jpg" },
|
||||
{ id: "t3", name: "Elena D.", handle: "@elena_d", testimonial: "Elegant and minimalist, exactly my style.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-black-sweater-posing_246466-38.jpg" },
|
||||
{ id: "t4", name: "Sarah L.", handle: "@sarah_l", testimonial: "Fast delivery and stunning packaging.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/guy-presenting-gift-box-attractive-happy-lady_23-2148016809.jpg" },
|
||||
{ id: "t5", name: "James P.", handle: "@james_p", testimonial: "Excellent craftsmanship throughout.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17097.jpg" }
|
||||
]}
|
||||
showRating={true}
|
||||
title="Stories of Love"
|
||||
description="What our customers say about our pieces."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What materials do you use?",
|
||||
content: "We use 14k/18k gold and sustainably sourced diamonds.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you offer repairs?",
|
||||
content: "Yes, we offer complimentary repair services for all our jewelry.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How do I choose the right size?",
|
||||
content: "We provide a comprehensive size guide on each product page.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our products."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "What materials do you use?", content: "We use 14k/18k gold and sustainably sourced diamonds." },
|
||||
{ id: "q2", title: "Do you offer repairs?", content: "Yes, we offer complimentary repair services for all our jewelry." },
|
||||
{ id: "q3", title: "How do I choose the right size?", content: "We provide a comprehensive size guide on each product page." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our products."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
text="Ready to find your perfect piece? Our consultants are here to help."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "mailto:hello@aurelia.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
text="Ready to find your perfect piece? Our consultants are here to help."
|
||||
buttons={[{ text: "Contact Us", href: "mailto:hello@aurelia.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Aurelia"
|
||||
columns={[
|
||||
{
|
||||
title: "Collections",
|
||||
items: [
|
||||
{
|
||||
label: "Rings",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Necklaces",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Aurelia"
|
||||
columns={[
|
||||
{ title: "Collections", items: [{ label: "Rings", href: "#products" }, { label: "Necklaces", href: "#products" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user