Add src/app/service-area/page.tsx
This commit is contained in:
192
src/app/service-area/page.tsx
Normal file
192
src/app/service-area/page.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import { MapPin, Phone, AlertCircle, Clock } from "lucide-react";
|
||||
|
||||
export default function ServiceAreaPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Reviews", id: "/reviews" },
|
||||
{ name: "Service Area", id: "/service-area" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const handleCallNow = () => {
|
||||
window.location.href = "tel:+15619999999";
|
||||
};
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Towing Services", href: "/services" },
|
||||
{ label: "Roadside Assistance", href: "/services" },
|
||||
{ label: "Vehicle Transport", href: "/services" },
|
||||
{ label: "Mechanical Help", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Customer Reviews", href: "/reviews" },
|
||||
{ label: "Service Area", href: "/service-area" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Get Help", items: [
|
||||
{ label: "Call Now", href: "tel:+15619999999", onClick: handleCallNow },
|
||||
{ label: "Request a Quote", href: "/contact" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Service Hours", href: "/service-area" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="medium"
|
||||
background="blurBottom"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
{/* Sticky Call Now Button */}
|
||||
<button
|
||||
onClick={handleCallNow}
|
||||
className="fixed bottom-8 right-8 z-50 bg-gradient-to-r from-[var(--primary-cta)] to-[var(--accent)] hover:shadow-lg transform hover:scale-105 transition-all duration-300 text-white px-6 py-4 rounded-full flex items-center gap-2 font-semibold shadow-lg"
|
||||
aria-label="Call now for immediate service"
|
||||
>
|
||||
<Phone size={20} />
|
||||
<span>Call Now</span>
|
||||
</button>
|
||||
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Shook Towing"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Call Now", href: "tel:+15619999999"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Our Service Area"
|
||||
description="Shook Towing proudly serves Corpus Christi and the surrounding areas with fast, professional towing and roadside assistance. Check if your location is in our service area."
|
||||
tag="Serving Corpus Christi"
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Call to Confirm", href: "tel:+15619999999"},
|
||||
{
|
||||
text: "Request Service", href: "/contact"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mechanic-giving-keys-car-customer_329181-11861.jpg"
|
||||
imageAlt="Service area coverage map"
|
||||
mediaAnimation="blur-reveal"
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="service-area" data-section="service-area">
|
||||
<FeatureBento
|
||||
title="Coverage Areas"
|
||||
description="We serve Corpus Christi and surrounding communities with rapid response times and professional service."
|
||||
features={[
|
||||
{
|
||||
title: "Corpus Christi", description: "Our primary service area with 20-30 minute average response times throughout the city.", bentoComponent: "icon-info-cards", items: [
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Coverage", value: "Full City"},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Response", value: "20-30 min"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Surrounding Areas", description: "We also serve nearby communities and highways throughout the region. Call to confirm your location.", bentoComponent: "icon-info-cards", items: [
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Expanding", value: "Beyond City"},
|
||||
{
|
||||
icon: Phone,
|
||||
label: "Just Call", value: "We'll Confirm"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "24/7 Availability", description: "Rain or shine, day or night, we're here. Emergency service available around the clock every day.", bentoComponent: "icon-info-cards", items: [
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Hours", value: "24/7/365"},
|
||||
{
|
||||
icon: AlertCircle,
|
||||
label: "Emergency", value: "Always Ready"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Not Sure?", description: "Not certain if we serve your area? Give us a call and we'll let you know immediately.", bentoComponent: "icon-info-cards", items: [
|
||||
{
|
||||
icon: Phone,
|
||||
label: "Quick Check", value: "Call Now"},
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Likely", value: "In Area"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="In Our Service Area?"
|
||||
tagIcon={AlertCircle}
|
||||
title="Get Fast Help Right Now"
|
||||
description="Whether you're in Corpus Christi or nearby, Shook Towing is ready to respond quickly to your emergency."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now", href: "tel:+15619999999"},
|
||||
{
|
||||
text: "Contact Us", href: "/contact"},
|
||||
]}
|
||||
background={{
|
||||
variant: "downward-rays-animated"}}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 Shook Towing. All rights reserved."
|
||||
bottomRightText="Fast. Fair. Professional."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user