317 lines
20 KiB
TypeScript
317 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
|
import TeamCardTen from "@/components/sections/team/TeamCardTen";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Award, CheckCircle, Star, Users, Facebook, Twitter, Linkedin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="Local Services"
|
|
button={{ text: "Call Now", href: "tel:+1-555-123-4567" }}
|
|
animateOnLoad={true}
|
|
className="bg-opacity-95 backdrop-blur-md"
|
|
navItemClassName="font-medium text-sm"
|
|
buttonClassName="bg-gradient-to-r from-blue-600 to-blue-800 hover:shadow-lg transition-shadow"
|
|
buttonTextClassName="text-white font-semibold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="Local Services"
|
|
description="Professional home and commercial services you can trust. Fast, reliable solutions from certified experts serving your community for 15+ years."
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Call Now: (555) 123-4567", href: "tel:+1-555-123-4567" },
|
|
{ text: "Request a Quote", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
layoutOrder="default"
|
|
imageSrc="http://img.b2bpic.net/free-photo/serious-gardener-talking-by-mobile-phone_329181-20588.jpg?_wi=1"
|
|
imageAlt="Professional service technician"
|
|
mediaAnimation="opacity"
|
|
frameStyle="card"
|
|
className="py-20 lg:py-32"
|
|
containerClassName="max-w-7xl mx-auto px-4"
|
|
logoContainerClassName="mb-6"
|
|
descriptionClassName="text-xl text-gray-700 mb-8 max-w-2xl"
|
|
buttonContainerClassName="flex gap-4 flex-wrap"
|
|
buttonClassName="px-8 py-4 rounded-lg font-semibold transition-all"
|
|
buttonTextClassName="text-base"
|
|
mediaWrapperClassName="rounded-xl overflow-hidden shadow-2xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Trusted Local Experts You Can Depend On"
|
|
description="With over 15 years of industry experience, our certified professionals have built our reputation on quality workmanship, transparent pricing, and customer satisfaction. We're fully licensed, insured, and committed to solving your service needs efficiently and affordably."
|
|
tag="Why Choose Us"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Learn Our Story", href: "#about" }]}
|
|
buttonAnimation="opacity"
|
|
imageSrc="http://img.b2bpic.net/free-photo/successful-business-team-smiling-camera_1262-2018.jpg"
|
|
imageAlt="Experienced team of professionals"
|
|
useInvertedBackground={false}
|
|
className="py-20 lg:py-32"
|
|
textBoxClassName="max-w-2xl"
|
|
titleClassName="text-4xl lg:text-5xl font-bold mb-6"
|
|
descriptionClassName="text-lg text-gray-600 mb-8 leading-relaxed"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 text-blue-700 mb-6"
|
|
buttonContainerClassName="flex gap-4 mt-8"
|
|
buttonClassName="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold"
|
|
buttonTextClassName="text-base"
|
|
mediaWrapperClassName="rounded-xl overflow-hidden shadow-lg"
|
|
mediaClassName="w-full h-auto"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyThree
|
|
title="Our Core Services"
|
|
description="From plumbing and electrical to HVAC and general repairs, we handle all your maintenance and emergency service needs with expertise and care."
|
|
features={[
|
|
{
|
|
id: "service-plumbing", title: "Plumbing Services", tags: ["Repairs", "Installation", "Emergency"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721540.jpg", imageAlt: "Professional plumbing service"
|
|
},
|
|
{
|
|
id: "service-electrical", title: "Electrical Services", tags: ["Inspections", "Upgrades", "Installation"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/female-electrician-adjusting-electrical-panel-blue-industrial-light-electrician-energy-service_169016-71653.jpg", imageAlt: "Licensed electrical work"
|
|
},
|
|
{
|
|
id: "service-hvac", title: "HVAC Services", tags: ["Maintenance", "Repair", "Installation"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/trained-engineer-certified-technician-opening-up-old-faulty-hvac-system-replace-it-with-new-performant-outside-air-conditioner-after-draining-refrigerant-replacing-ductwork_482257-70157.jpg", imageAlt: "HVAC system service"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
className="py-20 lg:py-32"
|
|
containerClassName="max-w-7xl mx-auto px-4"
|
|
textBoxTitleClassName="text-4xl lg:text-5xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-lg text-gray-600 mb-12 max-w-2xl"
|
|
textBoxClassName="mb-12"
|
|
cardClassName="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow"
|
|
cardTitleClassName="text-2xl font-bold mb-4"
|
|
tagsContainerClassName="flex gap-2 flex-wrap"
|
|
tagClassName="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium"
|
|
mediaWrapperClassName="rounded-lg overflow-hidden mb-4 h-64"
|
|
mediaClassName="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="What Our Customers Say"
|
|
description="Real reviews from satisfied customers who trust us with their homes and businesses."
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "Sarah Johnson", role: "Homeowner", testimonial: "Absolutely fantastic service! They arrived on time, fixed our plumbing issue quickly, and were incredibly professional. Will definitely use them again.", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-girl-choosing-you_1262-17150.jpg", imageAlt: "Sarah Johnson", icon: Star
|
|
},
|
|
{
|
|
id: "testimonial-2", name: "Michael Chen", role: "Business Owner", testimonial: "Called them for an emergency electrical issue and they came within 2 hours. Saved us thousands of dollars. Can't recommend them enough.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-showing-double-thumbs-up-white-shirt-looking-happy_176474-83425.jpg", imageAlt: "Michael Chen", icon: Star
|
|
},
|
|
{
|
|
id: "testimonial-3", name: "Jennifer Lopez", role: "Homeowner", testimonial: "I've used them 3 times now for different services. Consistent quality, fair pricing, and always honest about what work is needed. They're the real deal.", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213514.jpg", imageAlt: "Jennifer Lopez", icon: Star
|
|
},
|
|
{
|
|
id: "testimonial-4", name: "David Thompson", role: "Property Manager", testimonial: "Managing multiple properties is easier knowing I can rely on them. Professional, reliable, and they handle everything from emergency repairs to routine maintenance.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-young-woman-pointing-camera_74855-4351.jpg", imageAlt: "David Thompson", icon: Star
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
tag="Customer Reviews"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
className="py-20 lg:py-32 bg-gradient-to-b from-white to-gray-50"
|
|
containerClassName="max-w-7xl mx-auto px-4"
|
|
textBoxTitleClassName="text-4xl lg:text-5xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-lg text-gray-600 mb-12 max-w-2xl"
|
|
textBoxClassName="mb-12"
|
|
textBoxTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-50 text-amber-700 mb-6"
|
|
cardClassName="bg-white rounded-xl shadow-md p-8 hover:shadow-lg transition-shadow border border-gray-100"
|
|
imageWrapperClassName="mb-4 rounded-full overflow-hidden w-16 h-16"
|
|
imageClassName="w-full h-full object-cover"
|
|
nameClassName="text-lg font-bold text-gray-900 mb-1"
|
|
roleClassName="text-sm text-gray-500 mb-4"
|
|
testimonialClassName="text-gray-700 leading-relaxed italic"
|
|
iconClassName="w-5 h-5 text-amber-400"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTen
|
|
title="Meet Our Expert Team"
|
|
tag="Certified Professionals"
|
|
tagAnimation="slide-up"
|
|
membersAnimation="slide-up"
|
|
members={[
|
|
{
|
|
id: "team-member-1", name: "John Martinez", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-employee-with-crossed-arms_1098-3148.jpg", imageAlt: "John Martinez - Service Manager"
|
|
},
|
|
{
|
|
id: "team-member-2", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-standing-outdoors_1262-20546.jpg", imageAlt: "Emily Rodriguez - Operations Director"
|
|
},
|
|
{
|
|
id: "team-member-3", name: "David Park", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1348.jpg", imageAlt: "David Park - Lead Technician"
|
|
}
|
|
]}
|
|
memberVariant="card"
|
|
useInvertedBackground={false}
|
|
className="py-20 lg:py-32"
|
|
containerClassName="max-w-7xl mx-auto px-4"
|
|
titleClassName="text-4xl lg:text-5xl font-bold text-center mb-4"
|
|
tagClassName="inline-flex items-center justify-center w-full gap-2 px-4 py-2 rounded-full bg-blue-50 text-blue-700 mb-12 text-center"
|
|
membersContainerClassName="grid grid-cols-1 md:grid-cols-3 gap-8"
|
|
memberClassName="bg-white rounded-xl shadow-lg p-8 text-center hover:shadow-xl transition-shadow"
|
|
mediaWrapperClassName="rounded-full overflow-hidden w-40 h-40 mx-auto mb-6"
|
|
mediaClassName="w-full h-full object-cover"
|
|
nameClassName="text-xl font-bold text-gray-900"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="Why Trust Local Services"
|
|
description="By the numbers, here's what sets us apart."
|
|
metrics={[
|
|
{ id: "metric-1", icon: Award, title: "Years in Business", value: "15+" },
|
|
{ id: "metric-2", icon: Users, title: "Happy Customers", value: "2,500+" },
|
|
{ id: "metric-3", icon: CheckCircle, title: "Jobs Completed", value: "5,000+" },
|
|
{ id: "metric-4", icon: Star, title: "Average Rating", value: "4.9/5" }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
className="py-20 lg:py-32 bg-gradient-to-r from-blue-50 to-blue-100"
|
|
containerClassName="max-w-7xl mx-auto px-4"
|
|
textBoxTitleClassName="text-4xl lg:text-5xl font-bold mb-4 text-center"
|
|
textBoxDescriptionClassName="text-lg text-gray-600 mb-12 text-center max-w-2xl mx-auto"
|
|
textBoxClassName="text-center mb-12"
|
|
cardClassName="bg-white rounded-xl shadow-md p-8 text-center hover:shadow-lg transition-shadow"
|
|
iconContainerClassName="mb-4 flex justify-center"
|
|
iconClassName="w-12 h-12 text-blue-600"
|
|
metricTitleClassName="text-gray-600 text-sm font-medium mb-2"
|
|
valueClassName="text-4xl font-bold text-blue-600"
|
|
gridClassName="grid grid-cols-1 md:grid-cols-4 gap-6"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Quick answers to common questions about our services, pricing, and availability."
|
|
faqs={[
|
|
{ id: "faq-1", title: "Do you offer emergency services?", content: "Yes! We provide 24/7 emergency services for urgent plumbing, electrical, and HVAC issues. Call (555) 123-4567 anytime." },
|
|
{ id: "faq-2", title: "Are you licensed and insured?", content: "Absolutely. All our technicians are fully licensed, certified, and our company carries comprehensive liability insurance." },
|
|
{ id: "faq-3", title: "How quickly can you respond?", content: "Standard appointments are available within 24-48 hours. Emergency calls typically arrive within 2-4 hours depending on location." },
|
|
{ id: "faq-4", title: "Do you offer warranties?", content: "Yes, we offer warranty guarantees on all workmanship and parts. Details vary by service—ask during your consultation." },
|
|
{ id: "faq-5", title: "What payment methods do you accept?", content: "We accept cash, check, credit cards, and financing options. Payment arrangements can be made based on your project." },
|
|
{ id: "faq-6", title: "Do you provide free estimates?", content: "Yes, we offer free, no-obligation estimates for all services. Call or fill out our form to schedule." }
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
showCard={true}
|
|
className="py-20 lg:py-32"
|
|
containerClassName="max-w-4xl mx-auto px-4"
|
|
textBoxTitleClassName="text-4xl lg:text-5xl font-bold mb-4 text-center"
|
|
textBoxDescriptionClassName="text-lg text-gray-600 mb-12 text-center"
|
|
textBoxClassName="text-center mb-12"
|
|
faqsContainerClassName="space-y-4"
|
|
accordionClassName="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow"
|
|
accordionTitleClassName="w-full p-6 text-left font-semibold text-gray-900 flex justify-between items-center cursor-pointer hover:bg-gray-50"
|
|
accordionIconClassName="w-5 h-5 text-blue-600 transition-transform"
|
|
accordionContentClassName="px-6 pb-6 text-gray-600 leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get a Free Quote Today"
|
|
description="Contact us for a no-obligation estimate. Our team will respond within 24 hours."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" },
|
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" },
|
|
{ name: "email", type: "email", placeholder: "Email Address", required: true, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" },
|
|
{ name: "service", type: "text", placeholder: "Service Needed", required: false, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" }
|
|
]}
|
|
textarea={{ name: "message", placeholder: "Describe your service needs...", rows: 5, required: false, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 resize-none" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/serious-gardener-talking-by-mobile-phone_329181-20588.jpg?_wi=2"
|
|
imageAlt="Professional service team"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="right"
|
|
buttonText="Request Quote"
|
|
className="py-20 lg:py-32 bg-gradient-to-b from-gray-50 to-white"
|
|
containerClassName="max-w-6xl mx-auto px-4"
|
|
contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
|
|
formCardClassName="bg-white rounded-xl shadow-lg p-8 border border-gray-200"
|
|
titleClassName="text-4xl lg:text-5xl font-bold mb-4"
|
|
descriptionClassName="text-lg text-gray-600 mb-8"
|
|
buttonClassName="w-full px-6 py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors mt-6"
|
|
buttonTextClassName="text-base font-semibold"
|
|
mediaWrapperClassName="rounded-xl overflow-hidden shadow-xl h-96 lg:h-full"
|
|
mediaClassName="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Local Services"
|
|
copyrightText="© 2025 Local Services. All rights reserved. Licensed & Insured."
|
|
socialLinks={[
|
|
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
|
|
]}
|
|
className="bg-gray-900 text-white py-12"
|
|
containerClassName="max-w-7xl mx-auto px-4"
|
|
cardClassName="border-t border-gray-700"
|
|
logoClassName="text-2xl font-bold mb-4"
|
|
dividerClassName="h-px bg-gray-700 my-6"
|
|
copyrightContainerClassName="flex flex-col md:flex-row justify-between items-center gap-4"
|
|
copyrightTextClassName="text-gray-400 text-sm"
|
|
socialContainerClassName="flex gap-4"
|
|
socialIconClassName="w-5 h-5 hover:text-blue-400 transition-colors"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |