Update src/pages/HomePage.tsx

This commit is contained in:
2026-06-14 14:35:30 +00:00
parent abf44af050
commit d05bedf0ac

View File

@@ -1,170 +1,133 @@
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarFloatingLogo from '@/components/ui/NavbarFloatingLogo';
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeaturesBento from '@/components/sections/features/FeaturesBento';
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
import { CreditCard, Smartphone } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCta from '@/components/sections/contact/ContactCta';
import FooterSimple from '@/components/sections/footer/FooterSimple';
export default function HomePage() {
const navItems = [
{ name: "Home", href: "#hero" },
{ name: "About", href: "#about" },
{ name: "Features", href: "#features" },
{ name: "Products", href: "#products" },
{ name: "Metrics", href: "#metrics" },
{ name: "Testimonials", href: "#testimonials" },
{ name: "FAQ", href: "#faq" },
{ name: "Contact", href: "#contact" },
];
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboardTiltedCarousel
tag="Visit Meru's Prime Hub"
title="Welcome to Meru Greenwood Park"
description="The ultimate destination for shopping, dining, and community gathering in the heart of Meru."
primaryButton={{ text: "Get Directions", href: "#contact" }}
secondaryButton={{ text: "Explore Shops", href: "#products" }}
items={[
{ imageSrc: "http://img.b2bpic.net/free-photo/asian-women-looking-something-phone_23-2149122959.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/people-walking-shopping-mall_1160-771.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/laughing-women-shopping_23-2147688258.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/three-elegant-women-with-shopping-bags-city_1157-38849.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-floor-with-modern-business-office-building_1127-3065.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/window-shopping-with-best-friend_329181-7988.jpg" },
]}
/>
</SectionErrorBoundary>
<ThemeProvider
defaultButtonVariant="gradient"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav" data-webild-component="NavbarFloatingLogo" data-webild-component-path="@/components/ui/NavbarFloatingLogo">
<NavbarFloatingLogo
logo="Meru Greenwood"
logoImageSrc="http://img.b2bpic.net/free-vector/hand-drawn-full-side-color-business-card_23-2151022832.jpg"
ctaButton={{ text: "Get Directions", href: "#contact" }}
navItems={navItems}
/>
</div>
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutMediaOverlay
tag="About Us"
title="A Community Landmark"
description="Meru Greenwood Park is a premier retail destination serving the vibrant community of Meru with a curated mix of shops, cafes, and services."
primaryButton={{ text: "Learn More", href: "#" }}
imageSrc="http://img.b2bpic.net/free-photo/pretty-girl-shopping-center_23-2147669894.jpg"
/>
</SectionErrorBoundary>
<div id="hero" data-section="hero" data-webild-component="HeroBillboardTiltedCarousel" data-webild-component-path="@/components/sections/hero/HeroBillboardTiltedCarousel">
<HeroBillboardTiltedCarousel
tag="Visit Meru's Prime Hub"
title="Welcome to Meru Greenwood Park"
description="The ultimate destination for shopping, dining, and community gathering in the heart of Meru."
primaryButton={{ text: "Get Directions", href: "#contact" }}
secondaryButton={{ text: "Explore Shops", href: "#products" }}
items={[{ imageSrc: "http://img.b2bpic.net/free-photo/asian-women-looking-something-phone_23-2149122959.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/people-walking-shopping-mall_1160-771.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/laughing-women-shopping_23-2147688258.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/three-elegant-women-with-shopping-bags-city_1157-38849.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/empty-floor-with-modern-business-office-building_1127-3065.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/window-shopping-with-best-friend_329181-7988.jpg" }]}
/>
</div>
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesBento
tag="Convenience First"
title="Designed for Your Needs"
description="Enjoy a hassle-free experience with modern amenities and diverse services at your fingertips."
features={[
{
title: "Secure Payments", description: "Support for KCB, M-Pesa, Visa, and Mastercard.", bentoComponent: "info-card-marquee", infoCards: [
{ icon: "CreditCard", label: "Visa", value: "Accepted" },
{ icon: "Smartphone", label: "M-Pesa", value: "Enabled" },
],
},
{
title: "Spacious Layout", description: "Easy navigation throughout the mall.", bentoComponent: "media-stack", mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-full-side-color-business-card_23-2151022832.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/african-american-customer-putting-credit-card-pos-terminal-paying-fashionable-clothes-counter-desk-modern-boutique-woman-shopper-buying-trendy-merchandise-clothing-store_482257-72466.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/confident-asian-helpline-customer-support-operator-wearing-headset-voicecall-with-client-talking-about-project-financial-risks-call-centre-telemarketer-wearing-headset-call-with-potential-buyer_482257-40174.jpg" },
],
},
{
title: "Customer Support", description: "We are here to assist you.", bentoComponent: "checklist-timeline", heading: "Our Services", subheading: "Excellence in comfort", checklistItems: [
{ label: "Concierge", detail: "Available daily" },
{ label: "Parking", detail: "Secured spaces" },
{ label: "WiFi", detail: "High speed" },
],
completedLabel: "Ready"},
]}
/>
</SectionErrorBoundary>
<div id="about" data-section="about" data-webild-component="AboutMediaOverlay" data-webild-component-path="@/components/sections/about/AboutMediaOverlay">
<AboutMediaOverlay
tag="About Us"
title="A Community Landmark"
description="Meru Greenwood Park is a premier retail destination serving the vibrant community of Meru with a curated mix of shops, cafes, and services."
primaryButton={{ text: "Learn More", href: "#" }}
imageSrc="http://img.b2bpic.net/free-photo/pretty-girl-shopping-center_23-2147669894.jpg"
/>
</div>
<div id="products" data-section="products">
<SectionErrorBoundary name="products">
<FeaturesRevealCardsBento
tag="Stores & Dining"
title="Everything Under One Roof"
description="Explore a wide variety of local and international brands tailored to your lifestyle."
items={[
{ title: "Fashion Boutiques", description: "Latest trends for every season.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/blurred-background-store-shopping-mall-blur-background-with-bokeh-vintage-filtered-image_1253-1654.jpg" },
{ title: "Casual Dining", description: "Fresh meals and great coffee.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/friends-coffee-shop-with-orange-bag_23-2147705110.jpg" },
{ title: "Supermarket", description: "Daily essentials at great prices.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/woman-buying-vegetables-supermarket_342744-1106.jpg" },
{ title: "Tech Hub", description: "Your go-to spot for gadgets.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/defocused-airport-shop_1203-238.jpg" },
{ title: "Beauty & Salon", description: "Pamper yourself today.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/walking-professional-asian-city-women_1303-2309.jpg" },
{ title: "Kids Zone", description: "Fun for the whole family.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-father-xmas_1098-14951.jpg" },
{ title: "Local Artisans", description: "Handcrafted products with care.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/silhouette-person-city_23-2149211282.jpg" },
]}
/>
</SectionErrorBoundary>
<div id="features" data-section="features" data-webild-component="FeaturesBento" data-webild-component-path="@/components/sections/features/FeaturesBento">
<FeaturesBento
tag="Convenience First"
title="Designed for Your Needs"
description="Enjoy a hassle-free experience with modern amenities and diverse services at your fingertips."
features={[{ title: "Secure Payments", description: "Support for KCB, M-Pesa, Visa, and Mastercard.", bentoComponent: "info-card-marquee", infoCards: [{ icon: "Visa", label: "Visa", value: "Accepted" }, { icon: "Smartphone", label: "M-Pesa", value: "Enabled" }] }, { title: "Spacious Layout", description: "Easy navigation throughout the mall.", bentoComponent: "media-stack", mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-full-side-color-business-card_23-2151022832.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/blurred-escalator-mall-view-from_1203-1298.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/african-american-customer-putting-credit-card-pos-terminal-paying-fashionable-clothes-counter-desk-modern-boutique-woman-shopper-buying-trendy-merchandise-clothing-store_482257-72466.jpg" }] }, { title: "Customer Support", description: "We are here to assist you.", bentoComponent: "checklist-timeline", heading: "Our Services", subheading: "Excellence in comfort", checklistItems: [{ label: "Concierge", detail: "Available daily" }, { label: "Parking", detail: "Secured spaces" }, { label: "WiFi", detail: "High speed" }], completedLabel: "Ready" }]}
/>
</div>
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsMediaCards
tag="Our Growth"
title="Serving the Community Daily"
description="We take pride in being a central part of Meru's commercial landscape."
metrics={[
{ value: "100+", title: "Retail Units", description: "Diverse businesses to explore.", imageSrc: "http://img.b2bpic.net/free-vector/flat-infographic-element-collection_23-2148044163.jpg" },
{ value: "4.4", title: "Rating", description: "Trusted by our visitors.", imageSrc: "http://img.b2bpic.net/free-photo/excited-models-clothing-shop_23-2147669927.jpg" },
{ value: "24/7", title: "Support", description: "We value your inquiries.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-female-friends-sitting-together-using-tablet-discussing-clothes-purchases-fashion-store-copy-space-consumerism-shopping-concept_74855-11590.jpg" },
]}
/>
</SectionErrorBoundary>
<div id="products" data-section="products" data-webild-component="FeaturesRevealCardsBento" data-webild-component-path="@/components/sections/features/FeaturesRevealCardsBento">
<FeaturesRevealCardsBento
tag="Stores & Dining"
title="Everything Under One Roof"
description="Explore a wide variety of local and international brands tailored to your lifestyle."
items={[{ title: "Fashion Boutiques", description: "Latest trends for every season.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/blurred-background-store-shopping-mall-blur-background-with-bokeh-vintage-filtered-image_1253-1654.jpg" }, { title: "Casual Dining", description: "Fresh meals and great coffee.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/friends-coffee-shop-with-orange-bag_23-2147705110.jpg" }, { title: "Supermarket", description: "Daily essentials at great prices.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/woman-buying-vegetables-supermarket_342744-1106.jpg" }, { title: "Tech Hub", description: "Your go-to spot for gadgets.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/defocused-airport-shop_1203-238.jpg" }, { title: "Beauty & Salon", description: "Pamper yourself today.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/walking-professional-asian-city-women_1303-2309.jpg" }, { title: "Kids Zone", description: "Fun for the whole family.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-father-xmas_1098-14951.jpg" }, { title: "Local Artisans", description: "Handcrafted products with care.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/silhouette-person-city_23-2149211282.jpg" }]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialOverlayCards
tag="Community Voices"
title="What Our Shoppers Say"
description="Join our community of happy shoppers who make us their first choice."
testimonials={[
{ name: "Sarah Mutua", role: "Resident", company: "Meru", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-lady-with-shopping-bags-mall_23-2147950204.jpg" },
{ name: "John Gitau", role: "Entrepreneur", company: "Meru Business", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/two-happy-shopaholics-having-great-time-shopping-mall_1262-13056.jpg" },
{ name: "Anne Wanjiku", role: "Visitor", company: "Family", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-teenage-girl-posing_23-2148672410.jpg" },
{ name: "Brian Otieno", role: "Student", company: "Education", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/friends-shopping-second-hand-market_23-2149353755.jpg" },
{ name: "Joyce Kendi", role: "Local", company: "Meru Central", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-excited-caucasian-guy-love-with-his-black-girlfriend_1262-20219.jpg" },
]}
/>
</SectionErrorBoundary>
<div id="metrics" data-section="metrics" data-webild-component="MetricsMediaCards" data-webild-component-path="@/components/sections/metrics/MetricsMediaCards">
<MetricsMediaCards
tag="Our Growth"
title="Serving the Community Daily"
description="We take pride in being a central part of Meru's commercial landscape."
metrics={[{ value: "100+", title: "Retail Units", description: "Diverse businesses to explore.", imageSrc: "http://img.b2bpic.net/free-vector/flat-infographic-element-collection_23-2148044163.jpg" }, { value: "4.4", title: "Rating", description: "Trusted by our visitors.", imageSrc: "http://img.b2bpic.net/free-photo/excited-models-clothing-shop_23-2147669927.jpg" }, { value: "24/7", title: "Support", description: "We value your inquiries.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-female-friends-sitting-together-using-tablet-discussing-clothes-purchases-fashion-store-copy-space-consumerism-shopping-concept_74855-11590.jpg" }]}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<SocialProofMarquee
tag="Trusted Partners"
title="Our Network"
description="Proudly working with leading brands."
names={["KCB Bank", "Visa", "Mastercard", "M-Pesa", "Meru Retail Hub", "Café Greenwood", "Fashion Corner"]}
/>
</SectionErrorBoundary>
<div id="testimonials" data-section="testimonials" data-webild-component="TestimonialOverlayCards" data-webild-component-path="@/components/sections/testimonial/TestimonialOverlayCards">
<TestimonialOverlayCards
tag="Community Voices"
title="What Our Shoppers Say"
description="Join our community of happy shoppers who make us their first choice."
testimonials={[{ name: "Sarah Mutua", role: "Resident", company: "Meru", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-lady-with-shopping-bags-mall_23-2147950204.jpg" }, { name: "John Gitau", role: "Entrepreneur", company: "Meru Business", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/two-happy-shopaholics-having-great-time-shopping-mall_1262-13056.jpg" }, { name: "Anne Wanjiku", role: "Visitor", company: "Family", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-teenage-girl-posing_23-2148672410.jpg" }, { name: "Brian Otieno", role: "Student", company: "Education", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/friends-shopping-second-hand-market_23-2149353755.jpg" }, { name: "Joyce Kendi", role: "Local", company: "Meru Central", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-excited-caucasian-guy-love-with-his-black-girlfriend_1262-20219.jpg" }]}
/>
</div>
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSplitMedia
tag="FAQ"
title="Answers to Your Questions"
description="Everything you need to know about your next visit."
items={[
{ question: "Are you open on weekends?", answer: "Yes, we are open seven days a week." },
{ question: "What payment methods do you accept?", answer: "We support M-Pesa, KCB, Visa, and Mastercard at most stores." },
{ question: "Where is the mall located?", answer: "We are centrally located in Meru, easily accessible by public transit." },
]}
imageSrc="http://img.b2bpic.net/free-photo/glass-structure_1127-2132.jpg"
/>
</SectionErrorBoundary>
<div id="social-proof" data-section="social-proof" data-webild-component="SocialProofMarquee" data-webild-component-path="@/components/sections/social-proof/SocialProofMarquee">
<SocialProofMarquee
tag="Trusted Partners"
title="Our Network"
description="Proudly working with leading brands."
names={["KCB Bank", "Visa", "Mastercard", "M-Pesa", "Meru Retail Hub", "Café Greenwood", "Fashion Corner"]}
/>
</div>
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Connect With Us"
text="Need assistance or have a business inquiry? Contact us today."
primaryButton={{ text: "Call +254 724 776945", href: "tel:+254724776945" }}
secondaryButton={{ text: "WhatsApp Support", href: "https://wa.me/254724776945" }}
/>
</SectionErrorBoundary>
<div id="faq" data-section="faq" data-webild-component="FaqSplitMedia" data-webild-component-path="@/components/sections/faq/FaqSplitMedia">
<FaqSplitMedia
tag="FAQ"
title="Answers to Your Questions"
description="Everything you need to know about your next visit."
items={[{ question: "Are you open on weekends?", answer: "Yes, we are open seven days a week." }, { question: "What payment methods do you accept?", answer: "We support M-Pesa, KCB, Visa, and Mastercard at most stores." }, { question: "Where is the mall located?", answer: "We are centrally located in Meru, easily accessible by public transit." }]}
imageSrc="http://img.b2bpic.net/free-photo/glass-structure_1127-2132.jpg"
/>
</div>
</>
<div id="contact" data-section="contact" data-webild-component="ContactCta" data-webild-component-path="@/components/sections/contact/ContactCta">
<ContactCta
tag="Connect With Us"
text="Need assistance or have a business inquiry? Contact us today."
primaryButton={{ text: "Call +254 724 776945", href: "tel:+254724776945" }}
secondaryButton={{ text: "WhatsApp Support", href: "https://wa.me/254724776945" }}
/>
</div>
<div id="footer" data-section="footer" data-webild-component="FooterSimple" data-webild-component-path="@/components/sections/footer/FooterSimple">
<FooterSimple
brand="Meru Greenwood Park"
columns={[{ title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Shops", href: "#products" }] }, { title: "Payments", items: [{ label: "KCB / M-Pesa", href: "#" }, { label: "Visa / Mastercard", href: "#" }] }, { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Privacy Policy", href: "#" }] }]}
copyright="© 2024 Meru Greenwood Park. All rights reserved."
links={[{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }]}
/>
</div>
</ThemeProvider>
);
}
}