Files
d35bf604-7c00-4df6-a4d7-648…/src/app/services/page.tsx

100 lines
5.6 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, CalendarCheck, Hammer, CloudLightning } from "lucide-react";
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumLargeSizeLargeTitles"
background="grid"
cardStyle="outline"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Young Roofing Co Inc"
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Reviews", id: "/reviews" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Get a Free Estimate", href: "/contact" }}
/>
</div>
<div id="services" data-section="services">
<MediaSplitTabsAbout
title="Complete Roofing Solutions"
description="We provide a full range of residential and commercial roofing services, ensuring quality craftsmanship and long-lasting protection for your property. Explore our core services below."
tabs={[
{ id: "repairs", label: "Roof Repairs", description: "Small leaks turn into expensive damage. We diagnose and fix the issue correctly the first time, addressing everything from shingle replacement to flashing and sealing." },
{ id: "replacement", label: "Roof Replacement", description: "Complete tear-offs and replacements with premium materials for long-term protection. We guide you through material selection to find the perfect fit for your home's style and budget." },
{ id: "inspection", label: "Storm Inspections", description: "Prevent damage before the next storm hits with our thorough pre-storm evaluations. We identify potential weak spots and provide recommendations to fortify your roof." },
{ id: "maintenance", label: "Preventative Maintenance", description: "Extend the life of your roof and protect your investment with regular upkeep. Our maintenance plans include debris removal, gutter cleaning, and a full inspection." },
]}
imageSrc="https://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=2"
imageAlt="Roofer inspecting roof for damage"
mediaAnimation="slide-up"
imagePosition="right"
useInvertedBackground={false}
/>
</div>
<div id="features" data-section="features">
<FeatureBorderGlow
title="Our Commitment to Excellence"
description="Every service we offer is backed by our core principles of reliability, speed, and superior craftsmanship."
features={[
{ icon: Zap, title: "Fast & Attentive", description: "We respond quickly and assess issues before they become costly problems." },
{ icon: CalendarCheck, title: "On Time — Every Time", description: "Our crews respect your schedule. No guessing. No waiting." },
{ icon: Hammer, title: "Detail-Driven Craftsmanship", description: "From flashing to finish work, we handle the details that prevent future leaks." },
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactSplit
tag="Get Started"
title="Ready to Protect Your Property?"
description="Contact us today for a comprehensive, no-obligation estimate on any of our roofing services."
tagIcon={CloudLightning}
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
imageSrc="https://img.b2bpic.net/free-photo/man-with-helmet-sitting-roof-full-shot_23-2149343712.jpg?_wi=2"
imageAlt="Storm approaching a house roof"
mediaAnimation="slide-up"
mediaPosition="left"
inputPlaceholder="Your Name or Email"
buttonText="Request My Estimate"
termsText="We respect your privacy. Your information will only be used to provide a free estimate."
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg?_wi=2"
imageAlt="A view of a modern house roof at sunset"
columns={[
{ title: "Services", items: [{ label: "Roof Repairs", href: "/services" }, { label: "Roof Replacement", href: "/services" }, { label: "Storm Inspections", href: "/services" }] },
{ title: "Company", items: [{ label: "Reviews", href: "/reviews" }, { label: "Contact", href: "/contact" }] },
]}
logoText="Young Roofing Co Inc"
copyrightText="© 2024 Young Roofing Co Inc. Licensed & Insured."
onPrivacyClick={() => console.log('Privacy policy clicked')}
/>
</div>
</ThemeProvider>
);
}