Update src/app/page.tsx

This commit is contained in:
2026-05-10 03:53:54 +00:00
parent 4870315372
commit 5d63fdeabe

View File

@@ -10,8 +10,8 @@ import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarou
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
export default function LandingPage() {
return (
@@ -19,362 +19,161 @@ export default function LandingPage() {
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
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: "Home",
id: "hero",
},
{
name: "Products",
id: "products",
},
{
name: "About",
id: "features",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="City Mobile Bazaar"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "Products", id: "products" },
{ name: "About", id: "features" },
{ name: "Contact", id: "contact" },
]}
brandName="City Mobile Bazaar"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "gradient-bars",
}}
title="Welcome to City Mobile Bazaar"
description="Your ultimate destination for the latest smartphones and mobile technology. Expert service, competitive prices, and a huge selection of top brands."
tag="Mobile Tech Experts"
buttons={[
{
text: "View Products",
href: "#products",
},
{
text: "Contact Us",
href: "#contact",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/young-slavic-female-barber-wearing-uniform-singing-using-mobile-phone-as-microphone-keeping-hand-air-isolated-orange-background_141793-89843.jpg",
imageAlt: "Flagship Smartphone",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/person-controlling-house-light-using-smart-home-application-touching-screen-turn-it-by-mobile_482257-2842.jpg",
imageAlt: "Display Screen",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-phone_23-2148883535.jpg",
imageAlt: "Retail Display",
},
{
imageSrc: "http://img.b2bpic.net/free-vector/mobile-phone-design_1176-229.jpg",
imageAlt: "Smartphone Held",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-smartphone-technology_23-2149263977.jpg",
imageAlt: "Collection",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/background-with-printed-circuit-board-concept-modern-technologies_169016-61800.jpg",
imageAlt: "Tech Background",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{ variant: "gradient-bars" }}
title="Welcome to City Mobile Bazaar"
description="Your ultimate destination for the latest smartphones and mobile technology. Expert service, competitive prices, and a huge selection of top brands."
tag="Mobile Tech Experts"
buttons={[
{ text: "View Products", href: "#products" },
{ text: "Contact Us", href: "#contact" }
]}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/young-slavic-female-barber-wearing-uniform-singing-using-mobile-phone-as-microphone-keeping-hand-air-isolated-orange-background_141793-89843.jpg", imageAlt: "Flagship Smartphone" },
{ imageSrc: "http://img.b2bpic.net/free-photo/person-controlling-house-light-using-smart-home-application-touching-screen-turn-it-by-mobile_482257-2842.jpg", imageAlt: "Display Screen" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-phone_23-2148883535.jpg", imageAlt: "Retail Display" },
{ imageSrc: "http://img.b2bpic.net/free-vector/mobile-phone-design_1176-229.jpg", imageAlt: "Smartphone Held" },
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-using-smartphone-technology_23-2149263977.jpg", imageAlt: "Collection" },
{ imageSrc: "http://img.b2bpic.net/free-photo/background-with-printed-circuit-board-concept-modern-technologies_169016-61800.jpg", imageAlt: "Tech Background" }
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Ultra Pro X",
price: "$999",
imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-white-background_58702-5130.jpg",
},
{
id: "p2",
name: "Elite Note",
price: "$849",
imageSrc: "http://img.b2bpic.net/free-photo/golden-phone-rendering-black-background_187299-46588.jpg",
},
{
id: "p3",
name: "Galaxy Vision",
price: "$799",
imageSrc: "http://img.b2bpic.net/free-photo/ramadan-mobile-crescent-perspective-side-white-background_187299-37679.jpg",
},
{
id: "p4",
name: "Smart Edge 5",
price: "$699",
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-surrounded-with-rosemary-black-pepper-garlic-dark-backdrop_23-2147917362.jpg",
},
{
id: "p5",
name: "Basic Plus",
price: "$499",
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-white-podium-with-cubes-modern-studio_187299-46586.jpg",
},
{
id: "p6",
name: "Power Series",
price: "$399",
imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-white-background_58702-5011.jpg",
},
]}
title="Latest Arrivals"
description="Explore our curated selection of the newest and best performing mobile devices on the market."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Ultra Pro X", price: "$999", imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-white-background_58702-5130.jpg" },
{ id: "p2", name: "Elite Note", price: "$849", imageSrc: "http://img.b2bpic.net/free-photo/golden-phone-rendering-black-background_187299-46588.jpg" },
{ id: "p3", name: "Galaxy Vision", price: "$799", imageSrc: "http://img.b2bpic.net/free-photo/ramadan-mobile-crescent-perspective-side-white-background_187299-37679.jpg" },
{ id: "p4", name: "Smart Edge 5", price: "$699", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-surrounded-with-rosemary-black-pepper-garlic-dark-backdrop_23-2147917362.jpg" },
{ id: "p5", name: "Basic Plus", price: "$499", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-white-podium-with-cubes-modern-studio_187299-46586.jpg" },
{ id: "p6", name: "Power Series", price: "$399", imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-white-background_58702-5011.jpg" }
]}
title="Latest Arrivals"
description="Explore our curated selection of the newest and best performing mobile devices on the market."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
useInvertedBackground={false}
title="Why Choose City Mobile Bazaar"
tag="Our Achievements"
metrics={[
{
id: "m1",
value: "15k+",
description: "Happy Customers",
},
{
id: "m2",
value: "20+",
description: "Top Brands",
},
{
id: "m3",
value: "5+",
description: "Retail Locations",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
useInvertedBackground={false}
title="Why Choose City Mobile Bazaar"
tag="Our Achievements"
metrics={[
{ id: "m1", value: "15k+", description: "Happy Customers" },
{ id: "m2", value: "20+", description: "Top Brands" },
{ id: "m3", value: "5+", description: "Retail Locations" }
]}
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
id: "f1",
title: "Expert Repair",
author: "Tech Support",
description: "Professional mobile phone repairs with genuine parts and quick turnaround.",
tags: [
"Support",
"Expertise",
],
imageSrc: "http://img.b2bpic.net/free-photo/professional-young-woman-checking-her-phone_23-2148452656.jpg",
},
{
id: "f2",
title: "Trade-in Program",
author: "Finance Team",
description: "Get the best value for your old device when upgrading to the latest model.",
tags: [
"Value",
"Savings",
],
imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201858.jpg",
},
{
id: "f3",
title: "Lifetime Support",
author: "CS Team",
description: "We stand by our products with dedicated after-sales support and helpful advice.",
tags: [
"Reliability",
"Support",
],
imageSrc: "http://img.b2bpic.net/free-photo/seller-man-mobile-phone-professional-consultant-tech-store-shop_627829-4977.jpg",
},
]}
title="Exceptional Service"
description="We are committed to providing the best shopping experience for mobile technology enthusiasts in the city."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{ id: "f1", title: "Expert Repair", author: "Tech Support", description: "Professional mobile phone repairs with genuine parts and quick turnaround.", tags: ["Support", "Expertise"], imageSrc: "http://img.b2bpic.net/free-photo/professional-young-woman-checking-her-phone_23-2148452656.jpg" },
{ id: "f2", title: "Trade-in Program", author: "Finance Team", description: "Get the best value for your old device when upgrading to the latest model.", tags: ["Value", "Savings"], imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201858.jpg" },
{ id: "f3", title: "Lifetime Support", author: "CS Team", description: "We stand by our products with dedicated after-sales support and helpful advice.", tags: ["Reliability", "Support"], imageSrc: "http://img.b2bpic.net/free-photo/seller-man-mobile-phone-professional-consultant-tech-store-shop_627829-4977.jpg" }
]}
title="Exceptional Service"
description="We are committed to providing the best shopping experience for mobile technology enthusiasts in the city."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Johnson",
handle: "@sarah_j",
testimonial: "Excellent service and the best selection of phones in the city!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-cute-brunette-girl-with-short-hair-sitting-table-gray-plaid-terrace-restaurant-she-wears-blue-shirt-looks-happy_197531-971.jpg",
},
{
id: "2",
name: "Michael Chen",
handle: "@mchen",
testimonial: "Very professional staff and great trade-in deals.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-short-curly-hair-showing-credit-card-looking-aside-smiling-standing-white-wall_141793-29289.jpg",
},
{
id: "3",
name: "Emily Rodriguez",
handle: "@em_rod",
testimonial: "Always the first place I go when I need an upgrade.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
},
{
id: "4",
name: "David Kim",
handle: "@dkim",
testimonial: "The repair services saved my phone when I thought it was gone for good.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13320.jpg",
},
{
id: "5",
name: "Jessica Lee",
handle: "@jlee",
testimonial: "Fantastic experience every time I shop here.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/european-man-smiling-cheerful-expression-closeup-portrait_53876-129391.jpg",
},
]}
showRating={true}
title="What Our Customers Say"
description="We pride ourselves on our community and the trust our customers place in us daily."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Sarah Johnson", handle: "@sarah_j", testimonial: "Excellent service and the best selection of phones in the city!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-cute-brunette-girl-with-short-hair-sitting-table-gray-plaid-terrace-restaurant-she-wears-blue-shirt-looks-happy_197531-971.jpg" },
{ id: "2", name: "Michael Chen", handle: "@mchen", testimonial: "Very professional staff and great trade-in deals.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-short-curly-hair-showing-credit-card-looking-aside-smiling-standing-white-wall_141793-29289.jpg" },
{ id: "3", name: "Emily Rodriguez", handle: "@em_rod", testimonial: "Always the first place I go when I need an upgrade.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg" },
{ id: "4", name: "David Kim", handle: "@dkim", testimonial: "The repair services saved my phone when I thought it was gone for good.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13320.jpg" },
{ id: "5", name: "Jessica Lee", handle: "@jlee", testimonial: "Fantastic experience every time I shop here.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/european-man-smiling-cheerful-expression-closeup-portrait_53876-129391.jpg" }
]}
showRating={true}
title="What Our Customers Say"
description="We pride ourselves on our community and the trust our customers place in us daily."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "q1",
title: "Do you offer financing?",
content: "Yes, we offer flexible financing plans through our partners.",
},
{
id: "q2",
title: "Are repairs guaranteed?",
content: "All repairs come with a standard 90-day warranty on parts and labor.",
},
{
id: "q3",
title: "Can I trade in an older model?",
content: "Absolutely, bring in your device and get an instant quote.",
},
]}
title="Frequently Asked Questions"
description="Get quick answers to common questions about our products and services."
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/modern-smartphone-screen-concept_1194-638673.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{ id: "q1", title: "Do you offer financing?", content: "Yes, we offer flexible financing plans through our partners." },
{ id: "q2", title: "Are repairs guaranteed?", content: "All repairs come with a standard 90-day warranty on parts and labor." },
{ id: "q3", title: "Can I trade in an older model?", content: "Absolutely, bring in your device and get an instant quote." }
]}
title="Frequently Asked Questions"
description="Get quick answers to common questions about our products and services."
faqsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/modern-smartphone-screen-concept_1194-638673.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Apple",
"Samsung",
"Google",
"OnePlus",
"Xiaomi",
"Motorola",
"Sony",
]}
title="Trusted Partners"
description="We are proud to work with the industry's leading brands."
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["Apple", "Samsung", "Google", "OnePlus", "Xiaomi", "Motorola", "Sony"]}
title="Trusted Partners"
description="We are proud to work with the industry's leading brands."
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "gradient-bars",
}}
text="Have questions or need support? Our team is ready to help you."
buttons={[
{
text: "Contact Us",
href: "mailto:hello@citymobile.com",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{ variant: "gradient-bars" }}
text="Have questions or need support? Our team is ready to help you."
buttons={[{ text: "Contact Us", href: "mailto:hello@citymobile.com" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="City Mobile Bazaar"
columns={[
{
title: "Shop",
items: [
{
label: "Smartphones",
href: "#products",
},
{
label: "Accessories",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "Repairs",
href: "#features",
},
{
label: "FAQs",
href: "#faq",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "#",
},
{
label: "Careers",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="City Mobile Bazaar"
columns={[
{ title: "Shop", items: [{ label: "Smartphones", href: "#products" }, { label: "Accessories", href: "#" }] },
{ title: "Support", items: [{ label: "Repairs", href: "#features" }, { label: "FAQs", href: "#faq" }] },
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}