190 lines
8.1 KiB
TypeScript
190 lines
8.1 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import { Award, CheckCircle, Wrench } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "About", id: "#about" },
|
|
{ name: "Services", id: "#features" },
|
|
{ name: "Testimonials", id: "#testimonials" },
|
|
{ name: "FAQ", id: "#faq" },
|
|
{ name: "Contact", id: "#contact" },
|
|
]}
|
|
brandName="Job Done"
|
|
button={{ text: "Get Quote", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="Job Done Maintenance Services"
|
|
description="Your reliable partner for residential and commercial maintenance solutions. From small repairs to complex fixes, we get the job done right, on time, and within budget."
|
|
buttons={[
|
|
{
|
|
text: "Get a Free Quote", href: "#contact"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-male-electrician-carrying-tester-mouth-while-working_23-2148087634.jpg"
|
|
imageAlt="Professional maintenance services at work"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text", content: "Professional Care for Your Property"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721527.jpg", alt: "Our team at work"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Learn More", href: "#about"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
textboxLayout="inline-image"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Plumbing", description: "Expert leak fixes, pipe repairs, and fixture installations.", imageSrc: "http://img.b2bpic.net/free-vector/plumber-flat-icons-set_1284-16865.jpg", imageAlt: "Plumbing services"},
|
|
{
|
|
title: "Electrical", description: "Safe electrical diagnostics, lighting setups, and upgrades.", imageSrc: "http://img.b2bpic.net/free-photo/3d-morph-man-builder-with-wrench_1048-13677.jpg", imageAlt: "Electrical services"},
|
|
{
|
|
title: "General Repairs", description: "From carpentry to furniture assembly, we cover all basics.", imageSrc: "http://img.b2bpic.net/free-photo/hammer-hand-with-glove_23-2148180559.jpg", imageAlt: "General repairs"},
|
|
]}
|
|
title="Services We Provide"
|
|
description="Comprehensive maintenance solutions for your specific needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", icon: Wrench,
|
|
title: "Projects Completed", value: "1,250+"},
|
|
{
|
|
id: "m2", icon: CheckCircle,
|
|
title: "Happy Clients", value: "900+"},
|
|
{
|
|
id: "m3", icon: Award,
|
|
title: "Years Experience", value: "12+"},
|
|
]}
|
|
title="By The Numbers"
|
|
description="Trusted by hundreds across the community."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alex P.", role: "Homeowner", testimonial: "Excellent service and very fast turnaround on our bathroom leak.", imageSrc: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15675.jpg"},
|
|
{
|
|
id: "2", name: "Sarah D.", role: "Property Manager", testimonial: "Professional team that gets the job done without hassle.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-girl-laying-sofa-living-room-reading-magazine_176420-42537.jpg"},
|
|
{
|
|
id: "3", name: "Mark L.", role: "Homeowner", testimonial: "Very thorough work on my electrical repairs. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/happy-manager-handshaking-with-candidate-after-successful-job-interview-office_637285-6543.jpg"},
|
|
{
|
|
id: "4", name: "Jane M.", role: "Commercial Client", testimonial: "Reliable and responsive team for all building maintenance.", imageSrc: "http://img.b2bpic.net/free-photo/supportive-cute-blond-girlfriend-cheering-liking-interesting-concept-cool-idea-thumbsup-smiling_1258-229510.jpg"},
|
|
{
|
|
id: "5", name: "Robert B.", role: "Homeowner", testimonial: "Fair pricing and top-notch quality on our kitchen updates.", imageSrc: "http://img.b2bpic.net/free-photo/young-engineer-man-wearing-construction-vest-looking-camera-with-big-smile-happy-face-doing-ok-signs-isolated-white-background_141793-20160.jpg"},
|
|
]}
|
|
title="Trusted by Homeowners"
|
|
description="See why our clients choose us for their maintenance needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Do you offer emergency services?", content: "Yes, we handle emergency requests with priority scheduling."},
|
|
{
|
|
id: "2", title: "What areas do you serve?", content: "We cover the greater metropolitan area and surrounding neighborhoods."},
|
|
{
|
|
id: "3", title: "Are you licensed and insured?", content: "Absolutely, all our technicians are fully licensed and insured."},
|
|
]}
|
|
title="Common Questions"
|
|
description="Information you need about our process."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Get in Touch"
|
|
title="Ready to Start?"
|
|
description="Send us your request and we'll reach out to discuss your needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Services", href: "#features"},
|
|
{
|
|
label: "About", href: "#about"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
{
|
|
label: "FAQs", href: "#faq"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Job Done Maintenance Services"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|