Add src/app/services/page.tsx
This commit is contained in:
237
src/app/services/page.tsx
Normal file
237
src/app/services/page.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis, { useLenis } from "lenis/react";
|
||||
import { useEffect } from 'react';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Award, Sparkles, Star } from "lucide-react";
|
||||
|
||||
export default function ServicesPage() {
|
||||
const lenis = useLenis();
|
||||
|
||||
useEffect(() => {
|
||||
const handleAnchorClick = (event) => {
|
||||
const target = event.target.closest('a');
|
||||
if (target && target.hash && target.pathname === window.location.pathname) {
|
||||
const id = target.hash.substring(1);
|
||||
const targetElement = document.getElementById(id);
|
||||
|
||||
if (targetElement) {
|
||||
event.preventDefault();
|
||||
setTimeout(() => {
|
||||
if (lenis && typeof lenis.scrollTo === 'function') {
|
||||
lenis.scrollTo(targetElement);
|
||||
} else {
|
||||
targetElement.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleAnchorClick);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('click', handleAnchorClick);
|
||||
};
|
||||
}, [lenis]);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Pricing", id: "/services#pricing" },
|
||||
{ name: "Schedule", id: "/schedule" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Book Now", id: "/schedule" },
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1779932862511-67bi4m4p.jpg"
|
||||
logoAlt="SparkleBins Logo"
|
||||
brandName="SparkleBins"
|
||||
button={{
|
||||
text: "Book Now", href: "/schedule"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
title="Comprehensive Bin Cleaning Services"
|
||||
description="From deep sanitization to odor elimination, SparkleBins offers a range of services designed to keep your bins fresh, hygienic, and sparkling clean."
|
||||
buttons={[
|
||||
{ text: "View Pricing", href: "#pricing" },
|
||||
{ text: "Book Now", href: "/schedule" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780004072964-ve3xbiif.png"
|
||||
imageAlt="SparkleBins brand hero image, showing a sparkling clean trash can"
|
||||
background={{ variant: "plain" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="service-details" data-section="service-details">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Deep Cleaning & Sanitizing", description: "We blast away dirt and disinfect surfaces, killing 99.9% of bacteria and viruses for a truly hygienic clean.", phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780005350740-n6dabrjc.jpg", imageAlt: "Pressure washer cleaning bin"
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780005373307-i95ynijd.jpg", imageAlt: "Sparkling clean bin after sanitization"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Effective Odor Removal", description: "Say goodbye to lingering foul smells with our specialized deodorizing treatments, leaving your bins fresh and pleasant.", phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780005390987-7x7tpa9g.jpg", imageAlt: "Odor removal from bin"
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780005403229-xofccxbm.jpg", imageAlt: "Fresh scent in clean bin"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Fast, Reliable Service", description: "Enjoy convenient scheduling and efficient service that fits seamlessly into your busy life, always on time.", phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780005427451-ki6nz8v3.jpg", imageAlt: "Scheduling calendar for service"
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780005436291-6tgxnd87.jpg", imageAlt: "Clock showing fast service"
|
||||
}
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Our Specialized Bin Cleaning Process"
|
||||
description="We use advanced techniques and eco-friendly products to ensure every bin is thoroughly cleaned, disinfected, and deodorized."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "one-can", badge: "Value", badgeIcon: Sparkles,
|
||||
price: "$20", subtitle: "Single Trash Can", features: [
|
||||
"One-time deep clean", "Odor elimination", "Eco-friendly products"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "two-cans", badge: "Popular", badgeIcon: Award,
|
||||
price: "$35", subtitle: "Two Trash Cans", features: [
|
||||
"One-time deep clean for two", "Odor elimination", "Eco-friendly products", "Convenient scheduling"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "three-cans", badge: "Best Deal", badgeIcon: Star,
|
||||
price: "$50", subtitle: "Three Trash Cans", features: [
|
||||
"One-time deep clean for three", "Odor elimination", "Eco-friendly products", "Priority scheduling", "Seasonal reminders"
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Transparent Pricing, Sparkling Cleanliness"
|
||||
description="Choose the perfect plan for your needs and enjoy a cleaner, fresher home without the hassle."
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "tel:9512288810" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", title: "Beyond Expectations!", quote: "SparkleBins completely transformed our trash cans. They went from smelly and grimy to absolutely spotless. I couldn't be happier with the service!", name: "Sarah J.", role: "Homeowner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780008084045-3crzqx9u.png", imageAlt: "Sarah J. happy with clean bin"
|
||||
},
|
||||
{
|
||||
id: "2", title: "A True Game Changer", quote: "I never thought I'd rave about trash can cleaning, but SparkleBins made a huge difference. The odors are gone, and my bins look brand new. Highly recommend!", name: "Michael D.", role: "Resident", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780008224081-nf3tqlgk.png", imageAlt: "Michael D. giving a thumbs up"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Professional and Prompt", quote: "The SparkleBins team is incredibly professional and always on time. It's a small service that makes a big impact on our home's hygiene.", name: "Emily R.", role: "Property Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780008275209-gn6i7aej.jpg", imageAlt: "Emily R. pleased with service"
|
||||
},
|
||||
{
|
||||
id: "4", title: "Healthier Home, Happier Family", quote: "Knowing our bins are sanitized and odor-free gives us peace of mind. SparkleBins helps us maintain a healthier environment for our kids.", name: "David K.", role: "Parent", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780008411993-dvmbi5xo.png", imageAlt: "David K. with family"
|
||||
},
|
||||
{
|
||||
id: "5", title: "Fantastic Value!", quote: "For the price, the service is unbeatable. My bins are spotless and fresh, and I don't have to worry about a thing. Thank you, SparkleBins!", name: "Jessica L.", role: "Satisfied Customer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780008686372-r96eyxm1.png", imageAlt: "Jessica L. smiling"
|
||||
},
|
||||
{
|
||||
id: "6", title: "Easy and Convenient", quote: "Scheduling was a breeze, and the cleaning was quick and thorough. SparkleBins takes all the hassle out of bin maintenance.", name: "Robert M.", role: "Homeowner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1780008778330-ubdwqkur.png", imageAlt: "Robert M. inspecting clean bin"
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say About Our Services"
|
||||
description="Hear from satisfied customers who love their SparkleBins experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta-text" data-section="cta-text">
|
||||
<ContactText
|
||||
text="Ready for truly clean bins? Book our services today! Call/Text (951)228-8810"
|
||||
background={{
|
||||
variant: "plain"
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "tel:9512288810" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Deep Cleaning", href: "/services" },
|
||||
{ label: "Odor Removal", href: "/services" },
|
||||
{ label: "Pricing Plans", href: "/services#pricing" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "Schedule", href: "/schedule" },
|
||||
{ label: "Book Now", href: "/schedule" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms of Service", href: "/terms-of-service" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E9Amf4FlECC3Rdb7T1HjTAYRK7/uploaded-1779932862511-67bi4m4p.jpg"
|
||||
logoAlt="SparkleBins Logo"
|
||||
logoText="SparkleBins"
|
||||
copyrightText="© 2026 SparkleBins. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user