Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-23 12:12:08 +00:00

View File

@@ -2,6 +2,7 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { Shield, CheckCircle, Zap, MapPin } from "lucide-react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
@@ -18,360 +19,168 @@ export default function LandingPage() {
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Bikes",
id: "catalog",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Mark Holdings"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Bikes", id: "catalog" },
{ name: "Contact", id: "contact" }
]}
brandName="Mark Holdings"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Mark Holdings Bajaj Motorcycles"
description="Your reliable partner for Bajaj motorcycles in Ruiru, specializing in commercial bikes built for the boda boda sector."
testimonials={[
{
name: "John Kamau",
handle: "@boda_pro",
testimonial: "Excellent service and genuine parts. Best place to buy a bike in Ruiru.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-white-dress-with-bicycle-field_1303-9693.jpg?_wi=1",
imageAlt: "Bajaj motorcycle dealer interior",
},
{
name: "Peter Njoroge",
handle: "@ruiru_rider",
testimonial: "Very professional dealer. Highly recommend for any commercial bike needs.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8107.jpg?_wi=1",
imageAlt: "Bajaj motorcycle dealer interior",
},
{
name: "Samuel M.",
handle: "@kamau_boda",
testimonial: "Solid motorcycles and great support after sales. Good prices too.",
rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-indoors_23-2150849429.jpg?_wi=1",
imageAlt: "Bajaj motorcycle dealer interior",
},
{
name: "David Karanja",
handle: "@dk_rider",
testimonial: "The best bikes for the boda business. Very durable.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-carefree-relaxed-female-biker-wears-stylish-shades-white-t-shirt-jeans-sits-asphalt-near-motorbike-being-deep-thoughts-young-woman-looks-into-distance-rests-after-ride_273609-2882.jpg?_wi=1",
imageAlt: "Bajaj motorcycle dealer interior",
},
{
name: "Moses W.",
handle: "@mose_boda",
testimonial: "Excellent team and very knowledgeable about Bajaj models.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-woman-getting-ready-ready_23-2148311722.jpg?_wi=1",
imageAlt: "Bajaj motorcycle dealer interior",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/woman-white-dress-with-bicycle-field_1303-9693.jpg?_wi=2"
imageAlt="Bajaj Motorcycle Showroom"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149682030.jpg",
alt: "John Kamau",
},
{
src: "http://img.b2bpic.net/free-photo/creative-looking-bike-montenegro_23-2149040794.jpg",
alt: "Peter Njoroge",
},
{
src: "http://img.b2bpic.net/free-photo/vintage-bicycle_1182-899.jpg",
alt: "Samuel M.",
},
{
src: "http://img.b2bpic.net/free-photo/flower-basket-white-bicycle-desk-against-wooden-wall_23-2148053529.jpg",
alt: "David Karanja",
},
{
src: "http://img.b2bpic.net/free-photo/female-biker-repairing-motorbike_273609-5498.jpg",
alt: "Moses W.",
},
]}
avatarText="Trusted by over 100+ local boda riders"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Mark Holdings Bajaj Motorcycles"
description="Your reliable partner for Bajaj motorcycles in Ruiru, specializing in commercial bikes built for the boda boda sector."
testimonials={[
{ name: "John Kamau", handle: "@boda_pro", testimonial: "Excellent service and genuine parts. Best place to buy a bike in Ruiru.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-white-dress-with-bicycle-field_1303-9693.jpg", imageAlt: "Bajaj motorcycle dealer interior" },
{ name: "Peter Njoroge", handle: "@ruiru_rider", testimonial: "Very professional dealer. Highly recommend for any commercial bike needs.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8107.jpg", imageAlt: "Bajaj motorcycle dealer interior" },
{ name: "Samuel M.", handle: "@kamau_boda", testimonial: "Solid motorcycles and great support after sales. Good prices too.", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-indoors_23-2150849429.jpg", imageAlt: "Bajaj motorcycle dealer interior" },
{ name: "David Karanja", handle: "@dk_rider", testimonial: "The best bikes for the boda business. Very durable.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-carefree-relaxed-female-biker-wears-stylish-shades-white-t-shirt-jeans-sits-asphalt-near-motorbike-being-deep-thoughts-young-woman-looks-into-distance-rests-after-ride_273609-2882.jpg", imageAlt: "Bajaj motorcycle dealer interior" },
{ name: "Moses W.", handle: "@mose_boda", testimonial: "Excellent team and very knowledgeable about Bajaj models.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/long-shot-woman-getting-ready-ready_23-2148311722.jpg", imageAlt: "Bajaj motorcycle dealer interior" }
]}
imageSrc="http://img.b2bpic.net/free-photo/woman-white-dress-with-bicycle-field_1303-9693.jpg"
imageAlt="Bajaj Motorcycle Showroom"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149682030.jpg", alt: "John Kamau" },
{ src: "http://img.b2bpic.net/free-photo/creative-looking-bike-montenegro_23-2149040794.jpg", alt: "Peter Njoroge" },
{ src: "http://img.b2bpic.net/free-photo/vintage-bicycle_1182-899.jpg", alt: "Samuel M." },
{ src: "http://img.b2bpic.net/free-photo/flower-basket-white-bicycle-desk-against-wooden-wall_23-2148053529.jpg", alt: "David Karanja" },
{ src: "http://img.b2bpic.net/free-photo/female-biker-repairing-motorbike_273609-5498.jpg", alt: "Moses W." }
]}
avatarText="Trusted by over 100+ local boda riders"
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{
type: "text",
content: "Reliable Bajaj Motorcycles in Ruiru",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8107.jpg",
alt: "Motorcycle Service",
},
{
type: "text",
content: "Located inside CK Business Center, we specialize in high-performance Bajaj bikes engineered for daily commercial use.",
},
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{ type: "text", content: "Reliable Bajaj Motorcycles in Ruiru" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8107.jpg", alt: "Motorcycle Service" },
{ type: "text", content: "Located inside CK Business Center, we specialize in high-performance Bajaj bikes engineered for daily commercial use." }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={true}
features={[
{
title: "Expert Guidance",
description: "Get professional advice on the best bike for your budget.",
buttonIcon: "Shield",
imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8129.jpg",
imageAlt: "Man fixing a motorcycle in a modern workshop",
},
{
title: "Verified Quality",
description: "Every bike is checked for maximum performance and reliability.",
buttonIcon: "CheckCircle",
imageSrc: "http://img.b2bpic.net/free-photo/woman-white-dress-with-bicycle-field_1303-9693.jpg?_wi=3",
imageAlt: "Man fixing a motorcycle in a modern workshop",
},
{
title: "Boda Boda Experts",
description: "Deep understanding of the commercial motorbike industry.",
buttonIcon: "Zap",
imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8107.jpg?_wi=2",
imageAlt: "Man fixing a motorcycle in a modern workshop",
},
{
title: "Central Location",
description: "Conveniently located at CK Business Center in Ruiru.",
buttonIcon: "MapPin",
imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-indoors_23-2150849429.jpg?_wi=2",
imageAlt: "Man fixing a motorcycle in a modern workshop",
},
]}
title="Why Choose Mark Holdings?"
description="We are committed to delivering the best Bajaj motorcycles and support to our local community."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={true}
features={[
{ title: "Expert Guidance", description: "Get professional advice on the best bike for your budget.", buttonIcon: Shield, imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8129.jpg" },
{ title: "Verified Quality", description: "Every bike is checked for maximum performance and reliability.", buttonIcon: CheckCircle, imageSrc: "http://img.b2bpic.net/free-photo/woman-white-dress-with-bicycle-field_1303-9693.jpg" },
{ title: "Boda Boda Experts", description: "Deep understanding of the commercial motorbike industry.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8107.jpg" },
{ title: "Central Location", description: "Conveniently located at CK Business Center in Ruiru.", buttonIcon: MapPin, imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-indoors_23-2150849429.jpg" }
]}
title="Why Choose Mark Holdings?"
description="We are committed to delivering the best Bajaj motorcycles and support to our local community."
/>
</div>
<div id="catalog" data-section="catalog">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Bajaj Boxer 100",
price: "KSh 165,000",
imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-indoors_23-2150849429.jpg?_wi=3",
},
{
id: "2",
name: "Bajaj Boxer 150",
price: "KSh 185,000",
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-carefree-relaxed-female-biker-wears-stylish-shades-white-t-shirt-jeans-sits-asphalt-near-motorbike-being-deep-thoughts-young-woman-looks-into-distance-rests-after-ride_273609-2882.jpg?_wi=2",
},
{
id: "3",
name: "Bajaj Discover 125",
price: "KSh 210,000",
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-woman-getting-ready-ready_23-2148311722.jpg?_wi=2",
},
{
id: "4",
name: "Bajaj CT 100",
price: "KSh 155,000",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-wearing-protection-helmet_23-2148703188.jpg",
},
{
id: "5",
name: "Bajaj Platina",
price: "KSh 175,000",
imageSrc: "http://img.b2bpic.net/free-photo/view-children-s-bicycle_23-2150834408.jpg",
},
{
id: "6",
name: "Bajaj Avenger",
price: "KSh 250,000",
imageSrc: "http://img.b2bpic.net/free-photo/sexy-biker-girl-wearing-black-leather-jacket-posing-her-superbike-outside-building_613910-19369.jpg",
},
]}
title="Available Bajaj Models"
description="Choose from our reliable range of Bajaj motorcycles."
/>
</div>
<div id="catalog" data-section="catalog">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{ id: "1", name: "Bajaj Boxer 100", price: "KSh 165,000", imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-indoors_23-2150849429.jpg" },
{ id: "2", name: "Bajaj Boxer 150", price: "KSh 185,000", imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-carefree-relaxed-female-biker-wears-stylish-shades-white-t-shirt-jeans-sits-asphalt-near-motorbike-being-deep-thoughts-young-woman-looks-into-distance-rests-after-ride_273609-2882.jpg" },
{ id: "3", name: "Bajaj Discover 125", price: "KSh 210,000", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-woman-getting-ready-ready_23-2148311722.jpg" },
{ id: "4", name: "Bajaj CT 100", price: "KSh 155,000", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-wearing-protection-helmet_23-2148703188.jpg" },
{ id: "5", name: "Bajaj Platina", price: "KSh 175,000", imageSrc: "http://img.b2bpic.net/free-photo/view-children-s-bicycle_23-2150834408.jpg" },
{ id: "6", name: "Bajaj Avenger", price: "KSh 250,000", imageSrc: "http://img.b2bpic.net/free-photo/sexy-biker-girl-wearing-black-leather-jacket-posing-her-superbike-outside-building_613910-19369.jpg" }
]}
title="Available Bajaj Models"
description="Choose from our reliable range of Bajaj motorcycles."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "John Kamau",
role: "Rider",
company: "Ruiru Boda",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/full-length-image-smiling-business-couple-posing_171337-18364.jpg",
},
{
id: "2",
name: "Peter Njoroge",
role: "Rider",
company: "Boda Group",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/couple-celebrating-their-just-married-car_52683-87003.jpg",
},
{
id: "3",
name: "Samuel M.",
role: "Operator",
company: "Local Boda",
rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/couple-riding-motorcycle-city_329181-12522.jpg",
},
{
id: "4",
name: "David Karanja",
role: "Owner",
company: "Personal",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-curly-woman-sunglasses-rides-modern-motorbike_171337-16713.jpg",
},
{
id: "5",
name: "Moses W.",
role: "Rider",
company: "City Riders",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-secures-band-snow-headgear_482257-85388.jpg",
},
]}
kpiItems={[
{
value: "19+",
label: "Google Reviews",
},
{
value: "4.5",
label: "Star Rating",
},
{
value: "100%",
label: "Customer Care",
},
]}
title="What Riders Say"
description="Trusted by hundreds of riders in Ruiru."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
testimonials={[
{ id: "1", name: "John Kamau", role: "Rider", company: "Ruiru Boda", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/full-length-image-smiling-business-couple-posing_171337-18364.jpg" },
{ id: "2", name: "Peter Njoroge", role: "Rider", company: "Boda Group", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/couple-celebrating-their-just-married-car_52683-87003.jpg" },
{ id: "3", name: "Samuel M.", role: "Operator", company: "Local Boda", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/couple-riding-motorcycle-city_329181-12522.jpg" },
{ id: "4", name: "David Karanja", role: "Owner", company: "Personal", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-curly-woman-sunglasses-rides-modern-motorbike_171337-16713.jpg" },
{ id: "5", name: "Moses W.", role: "Rider", company: "City Riders", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-secures-band-snow-headgear_482257-85388.jpg" }
]}
kpiItems={[
{ value: "19+", label: "Google Reviews" },
{ value: "4.5", label: "Star Rating" },
{ value: "100%", label: "Customer Care" }
]}
title="What Riders Say"
description="Trusted by hundreds of riders in Ruiru."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "Where is Mark Holdings located?",
content: "We are located inside CK Business Center, along an unnamed road in Ruiru (Map code: VX36+3G).",
},
{
id: "2",
title: "Do you offer servicing for bikes?",
content: "Yes, we prioritize maintenance and service for all bikes bought from our shop.",
},
{
id: "3",
title: "How can I contact you?",
content: "You can reach us directly at +254 717 835822.",
},
]}
title="Frequently Asked Questions"
faqsAnimation="slide-up"
description="Common inquiries about our motorcycles and services."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "1", title: "Where is Mark Holdings located?", content: "We are located inside CK Business Center, along an unnamed road in Ruiru (Map code: VX36+3G)." },
{ id: "2", title: "Do you offer servicing for bikes?", content: "Yes, we prioritize maintenance and service for all bikes bought from our shop." },
{ id: "3", title: "How can I contact you?", content: "You can reach us directly at +254 717 835822." }
]}
title="Frequently Asked Questions"
faqsAnimation="slide-up"
description="Common inquiries about our motorcycles and services."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{
variant: "plain",
}}
tag="Contact"
title="Get in touch today"
description="Reach out to us via phone or visit our showroom in Ruiru to discuss your next Bajaj motorcycle."
buttonText="Call Us"
onSubmit={(email) => console.log(email)}
imageSrc="http://img.b2bpic.net/free-photo/woman-white-dress-with-bicycle-field_1303-9693.jpg?_wi=4"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{ variant: "plain" }}
tag="Contact"
title="Get in touch today"
description="Reach out to us via phone or visit our showroom in Ruiru to discuss your next Bajaj motorcycle."
buttonText="Call Us"
onSubmit={(email) => console.log(email)}
imageSrc="http://img.b2bpic.net/free-photo/woman-white-dress-with-bicycle-field_1303-9693.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Mark Holdings"
columns={[
{
title: "Navigation",
items: [
{
label: "Home",
href: "#hero",
},
{
label: "Catalog",
href: "#catalog",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Contact",
items: [
{
label: "+254 717 835822",
href: "tel:+254717835822",
},
{
label: "Ruiru, Kenya",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Mark Holdings"
columns={[
{
title: "Navigation", items: [
{ label: "Home", href: "#hero" },
{ label: "Catalog", href: "#catalog" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Contact", items: [
{ label: "+254 717 835822", href: "tel:+254717835822" },
{ label: "Ruiru, Kenya", href: "#" }
]
}
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);