368 lines
21 KiB
TypeScript
368 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
|
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import Link from "next/link";
|
|
import { Leaf, Award, Images, MessageCircle, Clock, FileText, Phone, Star } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="W&M Services"
|
|
bottomLeftText="Washington, DC 20011"
|
|
bottomRightText="+1 202-361-8677"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="W&M Services"
|
|
description="Transform Your Outdoor Space with Professional Landscaping & Home Improvement Services"
|
|
buttons={[
|
|
{
|
|
text: "Call Now +1 202-361-8677", href: "tel:+12023618677"
|
|
},
|
|
{
|
|
text: "Get Free Quote", href: "#contact"
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/back-view-young-woman-taking-care-plants_23-2148509882.jpg"
|
|
imageAlt="Professional landscaping transformation in Washington DC"
|
|
showDimOverlay={true}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Hero section - W&M Services landscaping"
|
|
/>
|
|
</div>
|
|
|
|
{/* Services Section */}
|
|
<div id="services" data-section="services">
|
|
<FeatureCardOne
|
|
title="Professional Landscaping Services"
|
|
description="Comprehensive outdoor solutions for your home"
|
|
tag="Services"
|
|
tagIcon={Leaf}
|
|
features={[
|
|
{
|
|
title: "Landscaping Design", description: "Custom designs that increase curb appeal and property value", imageSrc: "http://img.b2bpic.net/free-photo/pensive-middle-aged-gardener-holding-small-thuja-pot-bearded-garden-worker-glasses-wearing-blue-shirt-apron-growing-evergreen-plants-greenhouse-commercial-gardening-summer-concept_74855-12936.jpg", imageAlt: "Professional landscaping design"
|
|
},
|
|
{
|
|
title: "Fence Installation", description: "Durable fences that enhance security, privacy, and property aesthetics", imageSrc: "http://img.b2bpic.net/free-photo/closeup-base-green-barrier-overpass-bridge_181624-22816.jpg?_wi=1", imageAlt: "Fence installation services"
|
|
},
|
|
{
|
|
title: "Gate Installation", description: "Professional gates that boost home security and create stunning entrances", imageSrc: "http://img.b2bpic.net/free-photo/closeup-base-green-barrier-overpass-bridge_181624-22816.jpg?_wi=2", imageAlt: "Gate installation services"
|
|
},
|
|
{
|
|
title: "Backyard Renovation", description: "Complete outdoor transformations that expand living space and lifestyle enjoyment", imageSrc: "http://img.b2bpic.net/free-photo/view-robot-tending-maintaining-gardens_23-2151803953.jpg", imageAlt: "Backyard renovation project"
|
|
},
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Why Choose Us Section */}
|
|
<div id="why-choose-us" data-section="why-choose-us">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{
|
|
type: "text" as const,
|
|
content: "Why Choose W&M Services for Your Landscaping Needs"
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Schedule Consultation", href: "#contact"
|
|
},
|
|
{
|
|
text: "View Our Work", href: "#gallery"
|
|
},
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Metrics Section */}
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="Our Track Record"
|
|
description="Proven excellence in landscaping and outdoor services"
|
|
tag="Results"
|
|
tagIcon={Award}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "4.9★", description: "Average Rating on Google & Reviews"
|
|
},
|
|
{
|
|
id: "2", value: "24+", description: "Verified Customer Reviews"
|
|
},
|
|
{
|
|
id: "3", value: "15+", description: "Years of Experience"
|
|
},
|
|
{
|
|
id: "4", value: "100%", description: "Customer Satisfaction Rate"
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Gallery Section */}
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardTwo
|
|
title="Our Project Portfolio"
|
|
description="Stunning transformations showcasing our landscaping expertise"
|
|
tag="Gallery"
|
|
tagIcon={Images}
|
|
products={[
|
|
{
|
|
id: "1", brand: "Residential", name: "Backyard Landscape Transformation", price: "Complete Design", rating: 5,
|
|
reviewCount: "12 Reviews", imageSrc: "http://img.b2bpic.net/free-photo/african-american-lady-safety-helmet-writing-notepad-near-building-construction_23-2148039982.jpg?_wi=1", imageAlt: "Completed backyard landscaping project"
|
|
},
|
|
{
|
|
id: "2", brand: "Residential", name: "Premium Fence Installation", price: "Full Project", rating: 5,
|
|
reviewCount: "15 Reviews", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg?_wi=1", imageAlt: "Professional fence installation"
|
|
},
|
|
{
|
|
id: "3", brand: "Luxury", name: "Outdoor Living Space Design", price: "Premium Service", rating: 5,
|
|
reviewCount: "18 Reviews", imageSrc: "http://img.b2bpic.net/free-photo/woman-training-with-tractor-wheel_23-2147671878.jpg?_wi=1", imageAlt: "Luxury backyard transformation"
|
|
},
|
|
{
|
|
id: "4", brand: "Residential", name: "Gate & Entry Installation", price: "Complete Design", rating: 5,
|
|
reviewCount: "10 Reviews", imageSrc: "http://img.b2bpic.net/free-photo/japanese-culture-house-entrance_23-2149301087.jpg?_wi=1", imageAlt: "Professional gate installation"
|
|
},
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tagAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Customers Say"
|
|
description="Real reviews from homeowners we've helped transform their outdoor spaces"
|
|
tag="Testimonials"
|
|
tagIcon={MessageCircle}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson, Homeowner", date: "Date: November 2024", title: "Exceptional Quality and Attention to Detail", quote: "We couldn't be happier with the quality and design of the fence. W&M Services exceeded all our expectations. The team was professional, punctual, and delivered exactly what we envisioned.", tag: "Fence Installation", avatarSrc: "http://img.b2bpic.net/free-photo/afro-american-woman-taking-selfie_23-2148336923.jpg", avatarAlt: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg?_wi=2", imageAlt: "Fence installation project"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen, Property Owner", date: "Date: October 2024", title: "Amazing Backyard Transformation", quote: "They did an amazing job on our backyard project. Highly recommend their team. The landscaping design is beautiful and has completely changed how we enjoy our outdoor space.", tag: "Landscaping Design", avatarSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", avatarAlt: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/african-american-lady-safety-helmet-writing-notepad-near-building-construction_23-2148039982.jpg?_wi=2", imageAlt: "Backyard landscaping project"
|
|
},
|
|
{
|
|
id: "3", name: "Walter Martinez, Homeowner", date: "Date: September 2024", title: "Professional Installation and Great Service", quote: "Walter and his team did a fantastic job installing our fence and gate. Their professionalism and expertise made the entire process smooth and stress-free. Couldn't ask for better service.", tag: "Fence & Gate", avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-bearded-man_1098-22109.jpg", avatarAlt: "Walter Martinez", imageSrc: "http://img.b2bpic.net/free-photo/japanese-culture-house-entrance_23-2149301087.jpg?_wi=2", imageAlt: "Gate installation project"
|
|
},
|
|
{
|
|
id: "4", name: "Emily Rodriguez, DC Resident", date: "Date: August 2024", title: "Trustworthy Local Professionals", quote: "As a local resident, I trust W&M Services completely. They've been in the community for years and their reputation is well-deserved. Excellent work every single time.", tag: "Premium Service", avatarSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg", avatarAlt: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/woman-training-with-tractor-wheel_23-2147671878.jpg?_wi=2", imageAlt: "Luxury backyard project"
|
|
},
|
|
{
|
|
id: "5", name: "David Kim, Property Manager", date: "Date: July 2024", title: "Reliable and High-Quality Work", quote: "W&M Services handles multiple properties for us. Their reliability, quality workmanship, and attention to detail are unmatched. They're our go-to for all landscaping needs.", tag: "Commercial Properties", avatarSrc: "http://img.b2bpic.net/free-photo/copy-space-smiley-business-woman-with-glasses_23-2148317348.jpg", avatarAlt: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/african-american-lady-safety-helmet-writing-notepad-near-building-construction_23-2148039982.jpg?_wi=3", imageAlt: "Commercial landscaping project"
|
|
},
|
|
{
|
|
id: "6", name: "Jessica Thompson, Homeowner", date: "Date: June 2024", title: "Outstanding Customer Service", quote: "From the initial consultation to project completion, W&M Services provided outstanding customer service. They listened to our needs and delivered beyond expectations. Highly recommended!", tag: "Full Service", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg", avatarAlt: "Jessica Thompson", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg?_wi=3", imageAlt: "Residential fence project"
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Social Proof Section */}
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted By Leading Review Platforms"
|
|
description="Featured and highly-rated on industry-leading platforms"
|
|
tag="Partnerships"
|
|
tagIcon={Star}
|
|
names={[
|
|
"Google Reviews", "Angi", "Houzz", "Thumbtack", "Yelp", "Facebook", "Better Business Bureau"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
speed={40}
|
|
showCard={true}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* CTA Section */}
|
|
<div id="cta-section" data-section="cta-section">
|
|
<PricingCardFive
|
|
title="Ready to Transform Your Yard?"
|
|
description="Get Your Free Quote Today - No Obligation. Contact W&M Services for a professional consultation."
|
|
tag="Limited Time"
|
|
tagIcon={Clock}
|
|
plans={[
|
|
{
|
|
id: "consultation", tag: "Free Consultation", tagIcon: Phone,
|
|
price: "Call", period: "Today", description: "Speak directly with our landscaping experts about your project needs and vision.", button: {
|
|
text: "Schedule Free Call", href: "tel:+12023618677"
|
|
},
|
|
featuresTitle: "What's Included:", features: [
|
|
"Free project evaluation", "Professional recommendations", "No hidden charges", "Flexible scheduling"
|
|
],
|
|
},
|
|
{
|
|
id: "quote", tag: "Free Quote Request", tagIcon: FileText,
|
|
price: "Online", period: "24-48 hrs", description: "Submit your project details online and receive a detailed quote from our team within 24-48 hours.", button: {
|
|
text: "Request Free Quote", href: "#contact"
|
|
},
|
|
featuresTitle: "What's Included:", features: [
|
|
"Detailed project estimate", "Service timeline", "Material recommendations", "Professional guidance"
|
|
],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Contact Section */}
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Get in Touch With W&M Services"
|
|
ctaDescription="Ready to start your landscaping project? Contact us today for a free consultation and quote."
|
|
ctaButton={{
|
|
text: "Call +1 202-361-8677", href: "tel:+12023618677"
|
|
}}
|
|
ctaIcon={Phone}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What areas do you service?", content: "We provide professional landscaping services throughout Washington, DC and surrounding areas. Contact us to confirm service availability for your location."
|
|
},
|
|
{
|
|
id: "2", title: "How much does a landscape design cost?", content: "Costs vary depending on project scope and materials. We offer free consultations to assess your needs and provide accurate quotes. Contact us today for your personalized estimate."
|
|
},
|
|
{
|
|
id: "3", title: "Do you offer maintenance services?", content: "Yes! We provide comprehensive lawn and property maintenance services including ongoing landscape care, seasonal updates, and custom maintenance plans."
|
|
},
|
|
{
|
|
id: "4", title: "How long does a typical project take?", content: "Project timelines depend on scope and complexity. We'll provide a detailed timeline during your consultation. Most projects are completed within 2-4 weeks."
|
|
},
|
|
{
|
|
id: "5", title: "Are you licensed and insured?", content: "Yes, W&M Services is fully licensed, insured, and bonded. Your property and our team are fully protected during every project."
|
|
},
|
|
{
|
|
id: "6", title: "Do you provide warranties on your work?", content: "Absolutely! We stand behind our work with comprehensive warranties on materials and labor. We want you completely satisfied with your landscaping investment."
|
|
},
|
|
]}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
accordionAnimationType="smooth"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="W&M Services"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Home", href: "/"
|
|
},
|
|
{
|
|
label: "Services", href: "#services"
|
|
},
|
|
{
|
|
label: "Gallery", href: "#gallery"
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "About", href: "/about"
|
|
},
|
|
{
|
|
label: "Contact", href: "#contact"
|
|
},
|
|
{
|
|
label: "Get Quote", href: "#contact"
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Call Us", href: "tel:+12023618677"
|
|
},
|
|
{
|
|
label: "Email", href: "mailto:info@wmnservices.com"
|
|
},
|
|
{
|
|
label: "Address", href: "#"
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Google Reviews", href: "https://www.google.com/search?q=W&M+Services+landscaping+DC"
|
|
},
|
|
{
|
|
label: "Facebook", href: "https://www.facebook.com"
|
|
},
|
|
{
|
|
label: "Privacy Policy", href: "#"
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |