bender/fb1a8b81-52c6-4a41-ad8b-83cc94a8844a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-22 19:59:48 +00:00
Conversation 0 Commits 1 Files Changed 1 +144 -456
1 changed files with 144 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

600
src/app/page.tsx
View File

@@ -28,470 +28,158 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "Gallery",
id: "gallery",
},
{
name: "Reviews",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Jasper's Precision Detailing"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "Gallery", id: "gallery" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="Jasper's Precision Detailing"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
title="Professional Car Care in Prosper, TX."
description="High-quality mobile detailing that brings the showroom shine back to your driveway. Managed with the discipline of an athlete and the eye of a professional."
testimonials={[
{
name: "Michael S.",
handle: "@prosper_resident",
testimonial: "Jasper is incredibly professional and punctual. He treated my SUV like it was his own.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg?_wi=1",
imageAlt: "luxury car detailing mobile service",
},
{
name: "Sarah L.",
handle: "@local_client",
testimonial: "It's rare to see a young entrepreneur with this much attention to detail.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg?_wi=1",
imageAlt: "luxury car detailing mobile service",
},
{
name: "David K.",
handle: "@happy_customer",
testimonial: "The best detailing service in Prosper. My car hasn't looked this good since it left the lot.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-spraying-powder-paint_23-2149714339.jpg?_wi=1",
imageAlt: "luxury car detailing mobile service",
},
{
name: "Jessica M.",
handle: "@loyal_fan",
testimonial: "Punctual, efficient, and thorough. Highly recommended!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31692.jpg?_wi=1",
imageAlt: "luxury car detailing mobile service",
},
{
name: "Brian P.",
handle: "@daily_driver",
testimonial: "Professional results every time. Jasper is my go-to guy for all my detailing needs.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-young-woman-celebrating-winning-triumphing-sitting-street-bench-laughing-holding_1258-206035.jpg?_wi=1",
imageAlt: "luxury car detailing mobile service",
},
]}
buttons={[
{
text: "Get a Free Quote",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg?_wi=2"
imageAlt="Professional car detailing service"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-cheerful-european-woman-green-jacket-touching-her-hair-blur-background-photo-fashionable-girl-with-beautiful-brown-hair-smiling-camera_291650-2183.jpg",
alt: "Satisfied client 1",
},
{
src: "http://img.b2bpic.net/free-photo/woman-posing-outdoors-while-holding-shopping-bags_23-2148673232.jpg",
alt: "Satisfied client 2",
},
{
src: "http://img.b2bpic.net/free-photo/man-sitting-near-house-looking-camera_259150-59313.jpg",
alt: "Satisfied client 3",
},
{
src: "http://img.b2bpic.net/free-photo/person-doing-house-tour-online_23-2151050266.jpg",
alt: "Satisfied client 4",
},
{
src: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-holding-her-her_23-2148631401.jpg",
alt: "Satisfied client 5",
},
]}
avatarText="Trusted by 100+ Prosper residents"
marqueeItems={[
{
type: "text",
text: "Premium Paint Correction",
},
{
type: "text",
text: "Interior Deep Clean",
},
{
type: "text",
text: "Ceramic Coating",
},
{
type: "text",
text: "Mobile Service",
},
{
type: "text",
text: "Showroom Finish",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
title="Professional Car Care in Prosper, TX."
description="High-quality mobile detailing that brings the showroom shine back to your driveway. Managed with the discipline of an athlete and the eye of a professional."
testimonials={[
{ name: "Michael S.", handle: "@prosper_resident", testimonial: "Jasper is incredibly professional and punctual. He treated my SUV like it was his own.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg", imageAlt: "luxury car detailing mobile service" },
{ name: "Sarah L.", handle: "@local_client", testimonial: "It's rare to see a young entrepreneur with this much attention to detail.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg", imageAlt: "luxury car detailing mobile service" },
{ name: "David K.", handle: "@happy_customer", testimonial: "The best detailing service in Prosper. My car hasn't looked this good since it left the lot.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-spraying-powder-paint_23-2149714339.jpg", imageAlt: "luxury car detailing mobile service" },
{ name: "Jessica M.", handle: "@loyal_fan", testimonial: "Punctual, efficient, and thorough. Highly recommended!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31692.jpg", imageAlt: "luxury car detailing mobile service" },
{ name: "Brian P.", handle: "@daily_driver", testimonial: "Professional results every time. Jasper is my go-to guy for all my detailing needs.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/upbeat-young-woman-celebrating-winning-triumphing-sitting-street-bench-laughing-holding_1258-206035.jpg", imageAlt: "luxury car detailing mobile service" }
]}
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg"
imageAlt="Professional car detailing service"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/portrait-cheerful-european-woman-green-jacket-touching-her-hair-blur-background-photo-fashionable-girl-with-beautiful-brown-hair-smiling-camera_291650-2183.jpg", alt: "Satisfied client 1" },
{ src: "http://img.b2bpic.net/free-photo/woman-posing-outdoors-while-holding-shopping-bags_23-2148673232.jpg", alt: "Satisfied client 2" },
{ src: "http://img.b2bpic.net/free-photo/man-sitting-near-house-looking-camera_259150-59313.jpg", alt: "Satisfied client 3" },
{ src: "http://img.b2bpic.net/free-photo/person-doing-house-tour-online_23-2151050266.jpg", alt: "Satisfied client 4" },
{ src: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-holding-her-her_23-2148631401.jpg", alt: "Satisfied client 5" },
]}
avatarText="Trusted by 100+ Prosper residents"
marqueeItems={[
{ type: "text", text: "Premium Paint Correction" },
{ type: "text", text: "Interior Deep Clean" },
{ type: "text", text: "Ceramic Coating" },
{ type: "text", text: "Mobile Service" },
{ type: "text", text: "Showroom Finish" },
]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Why Choose Jasper?"
metrics={[
{
icon: Award,
label: "Professional Training",
value: "Longo Toyota",
},
{
icon: MapPin,
label: "Service Type",
value: "Mobile",
},
{
icon: Target,
label: "Philosophy",
value: "Discipline",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Why Choose Jasper?"
metrics={[
{ icon: Award, label: "Professional Training", value: "Longo Toyota" },
{ icon: MapPin, label: "Service Type", value: "Mobile" },
{ icon: Target, label: "Philosophy", value: "Discipline" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<PricingCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "full-detail",
title: "Full Detail Package",
price: "$175",
period: "Best Value",
features: [
"Hand wash & dry",
"Clay bar treatment",
"Wax/sealant",
"Steam interior clean",
"Leather conditioning",
],
button: {
text: "Book Now",
href: "#contact",
},
imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342625.jpg",
imageAlt: "Person working on car wrapping",
},
{
id: "interior-clean",
title: "Interior Deep Clean",
price: "$100",
period: "Focused Clean",
features: [
"Stain removal",
"Upholstery shampoo",
"Odor elimination",
"Crevice dusting",
"Glass cleaning",
],
button: {
text: "Book Now",
href: "#contact",
},
imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg?_wi=3",
imageAlt: "Person working on car wrapping",
},
{
id: "express-wash",
title: "Express Wash & Shine",
price: "$60",
period: "Maintenance",
features: [
"Exterior hand wash",
"Wheel cleaning",
"Windows",
"Light interior vacuum",
],
button: {
text: "Book Now",
href: "#contact",
},
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg?_wi=2",
imageAlt: "Person working on car wrapping",
},
]}
title="Premium Services & Pricing"
description="Choose the package that best fits your car's needs."
/>
</div>
<div id="services" data-section="services">
<PricingCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "full-detail", title: "Full Detail Package", price: "$175", period: "Best Value", features: ["Hand wash & dry", "Clay bar treatment", "Wax/sealant", "Steam interior clean", "Leather conditioning"], button: { text: "Book Now", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342625.jpg" },
{ id: "interior-clean", title: "Interior Deep Clean", price: "$100", period: "Focused Clean", features: ["Stain removal", "Upholstery shampoo", "Odor elimination", "Crevice dusting", "Glass cleaning"], button: { text: "Book Now", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg" },
{ id: "express-wash", title: "Express Wash & Shine", price: "$60", period: "Maintenance", features: ["Exterior hand wash", "Wheel cleaning", "Windows", "Light interior vacuum"], button: { text: "Book Now", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg" }
]}
title="Premium Services & Pricing"
description="Choose the package that best fits your car's needs."
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardFour
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Interior Restoration",
price: "Before & After",
variant: "Premium Clean",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg?_wi=3",
},
{
id: "p2",
name: "Mirror-Finish Paint",
price: "Paint Correction",
variant: "Reflective",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-spraying-powder-paint_23-2149714339.jpg?_wi=2",
},
{
id: "p3",
name: "Deep Cleaned Rims",
price: "Rim Detail",
variant: "Shiny",
imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31692.jpg?_wi=2",
},
{
id: "p4",
name: "Console Detail",
price: "Precision Focus",
variant: "Detailed",
imageSrc: "http://img.b2bpic.net/free-photo/interior-hyperbaric-chamber-with-no-people_637285-632.jpg",
},
{
id: "p5",
name: "Paint Polish",
price: "Surface Correction",
variant: "High Gloss",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wrapping-car-job_23-2149385695.jpg",
},
{
id: "p6",
name: "Tire Detail",
price: "Rubber Treatment",
variant: "Matte Black",
imageSrc: "http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-36586.jpg",
},
]}
title="Work That Speaks For Itself"
description="See the precision results of our detailing process."
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardFour
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
animationType="slide-up"
products={[
{ id: "p1", name: "Interior Restoration", price: "Before & After", variant: "Premium Clean", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg" },
{ id: "p2", name: "Mirror-Finish Paint", price: "Paint Correction", variant: "Reflective", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-spraying-powder-paint_23-2149714339.jpg" },
{ id: "p3", name: "Deep Cleaned Rims", price: "Rim Detail", variant: "Shiny", imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31692.jpg" },
{ id: "p4", name: "Console Detail", price: "Precision Focus", variant: "Detailed", imageSrc: "http://img.b2bpic.net/free-photo/interior-hyperbaric-chamber-with-no-people_637285-632.jpg" },
{ id: "p5", name: "Paint Polish", price: "Surface Correction", variant: "High Gloss", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wrapping-car-job_23-2149385695.jpg" },
{ id: "p6", name: "Tire Detail", price: "Rubber Treatment", variant: "Matte Black", imageSrc: "http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-36586.jpg" },
]}
title="Work That Speaks For Itself"
description="See the precision results of our detailing process."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Michael S.",
role: "Local Resident",
company: "Prosper",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-young-woman-celebrating-winning-triumphing-sitting-street-bench-laughing-holding_1258-206035.jpg?_wi=2",
},
{
id: "2",
name: "Sarah L.",
role: "Client",
company: "Prosper",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-happy-asian-woman-entrepreneur-recommending-cafe-showing-okay-ok-sign-approval_1258-199352.jpg",
},
{
id: "3",
name: "David K.",
role: "Customer",
company: "Prosper",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-green-suit-using-phone-outside-street_1303-29546.jpg",
},
{
id: "4",
name: "Jessica M.",
role: "Homeowner",
company: "Prosper",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman-headset_74855-2661.jpg",
},
{
id: "5",
name: "Brian P.",
role: "Driver",
company: "Prosper",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-checking-out-new-car_23-2148130202.jpg",
},
]}
kpiItems={[
{
value: "100+",
label: "Cars Detailed",
},
{
value: "5.0",
label: "Avg. Rating",
},
{
value: "100%",
label: "Satisfaction",
},
]}
title="What Your Neighbors Are Saying"
description="Trusted by the Prosper community to deliver elite results."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="What Your Neighbors Are Saying"
description="Trusted by the Prosper community to deliver elite results."
testimonials={[
{ id: "1", name: "Michael S.", role: "Local Resident", company: "Prosper", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/upbeat-young-woman-celebrating-winning-triumphing-sitting-street-bench-laughing-holding_1258-206035.jpg" },
{ id: "2", name: "Sarah L.", role: "Client", company: "Prosper", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-happy-asian-woman-entrepreneur-recommending-cafe-showing-okay-ok-sign-approval_1258-199352.jpg" },
{ id: "3", name: "David K.", role: "Customer", company: "Prosper", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-woman-green-suit-using-phone-outside-street_1303-29546.jpg" },
{ id: "4", name: "Jessica M.", role: "Homeowner", company: "Prosper", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman-headset_74855-2661.jpg" },
{ id: "5", name: "Brian P.", role: "Driver", company: "Prosper", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-checking-out-new-car_23-2148130202.jpg" },
]}
kpiItems={[
{ value: "100+", label: "Cars Detailed" },
{ value: "5.0", label: "Avg. Rating" },
{ value: "100%", label: "Satisfaction" },
]}
/>
</div>
<div id="why-choose" data-section="why-choose">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Student-Athlete Discipline",
description: "Bringing focus to your car.",
icon: Trophy,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/side-view-valet-doing-his-job_23-2150274629.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/man-wrapping-car-with-blue-cover-medium-shot_23-2149385699.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg?_wi=4",
imageAlt: "luxury car detailing mobile service",
},
{
title: "Mobile Service",
description: "I come to you anywhere in Prosper.",
icon: Car,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31994.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/male-hand-with-foam-sponge-washing-car_1157-36587.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg?_wi=4",
imageAlt: "luxury car detailing mobile service",
},
{
title: "Professional Training",
description: "Standards refined at Longo Toyota.",
icon: ShieldCheck,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-red-luxury-sport-car_181624-25467.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/man-s-hand-is-cleaning-waxing-car_1150-6113.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-spraying-powder-paint_23-2149714339.jpg?_wi=3",
imageAlt: "luxury car detailing mobile service",
},
]}
title="The Jasper's Precision Difference"
description="Combining discipline, convenience, and professional expertise."
/>
</div>
<div id="why-choose" data-section="why-choose">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="The Jasper's Precision Difference"
description="Combining discipline, convenience, and professional expertise."
features={[
{ title: "Student-Athlete Discipline", description: "Bringing focus to your car.", icon: Trophy, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-valet-doing-his-job_23-2150274629.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/man-wrapping-car-with-blue-cover-medium-shot_23-2149385699.jpg" }] },
{ title: "Mobile Service", description: "I come to you anywhere in Prosper.", icon: Car, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31994.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/male-hand-with-foam-sponge-washing-car_1157-36587.jpg" }] },
{ title: "Professional Training", description: "Standards refined at Longo Toyota.", icon: ShieldCheck, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-red-luxury-sport-car_181624-25467.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/man-s-hand-is-cleaning-waxing-car_1150-6113.jpg" }] },
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="Booking"
title="Ready to get that shine?"
description="Reach out to Jasper to schedule your mobile detail appointment."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "radial-gradient" }}
tag="Booking"
title="Ready to get that shine?"
description="Reach out to Jasper to schedule your mobile detail appointment."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Home",
href: "#hero",
},
{
label: "Services",
href: "#services",
},
{
label: "Gallery",
href: "#gallery",
},
],
},
{
items: [
{
label: "Call: 949-220-3459",
href: "tel:9492203459",
},
{
label: "Email Jasper",
href: "mailto:jasper.wallet.17@gmail.com",
},
],
},
{
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
logoText="Jasper's Precision Detailing"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Jasper's Precision Detailing"
columns={[
{ items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Gallery", href: "#gallery" }] },
{ items: [{ label: "Call: 949-220-3459", href: "tel:9492203459" }, { label: "Email Jasper", href: "mailto:jasper.wallet.17@gmail.com" }] },
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}