Add src/app/contact/page.tsx
This commit is contained in:
163
src/app/contact/page.tsx
Normal file
163
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { Phone, Mail, MapPin, Clock, AlertCircle, CheckCircle } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="ProServe"
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Why Us", id: "why-us" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Call Now", href: "tel:+1-555-0123"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Get in Touch With ProServe"
|
||||
description="We're here to help with your plumbing needs. Reach out for a free quote or emergency service."
|
||||
tag="Contact Us"
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/customer-service-employees-having-team-meeting_1368-7524.jpg"
|
||||
imageAlt="Contact us"
|
||||
textPosition="center"
|
||||
showBlur={true}
|
||||
showDimOverlay={false}
|
||||
ariaLabel="Contact page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info">
|
||||
<FeatureCardTwelve
|
||||
title="Contact Information & Service Area"
|
||||
description="Multiple ways to reach us for your plumbing needs"
|
||||
features={[
|
||||
{
|
||||
id: "phone", label: "Phone", title: "Call Us Anytime", items: ["Local: (555) 0123", "Toll Free: 1-800-PROSERVE", "24/7 Emergency Line", "Quick response guaranteed"]
|
||||
},
|
||||
{
|
||||
id: "service-area", label: "Service Area", title: "Serving All of Texas", items: ["Dallas & Fort Worth", "Houston & Austin", "San Antonio & Suburbs", "Emergency service available statewide"]
|
||||
},
|
||||
{
|
||||
id: "hours", label: "Hours", title: "Always Available", items: ["Monday - Friday: 8AM - 6PM", "Saturday - Sunday: 9AM - 4PM", "24/7 Emergency Response", "Holiday service available"]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Contact information and service area"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="quote-form" data-section="quote-form">
|
||||
<ContactSplitForm
|
||||
title="Get Your Free Plumbing Quote"
|
||||
description="Fill out the form to receive a detailed estimate from our team. We'll contact you within 30 minutes with pricing and availability. For immediate assistance, call us directly."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Full Name", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "service", type: "text", placeholder: "What service do you need?", required: true }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Describe your plumbing issue in detail. The more details you provide, the more accurate our estimate will be...", rows: 6,
|
||||
required: true
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/technician-checking-heating-system-boiler-room_169016-53010.jpg"
|
||||
imageAlt="Professional plumbing service"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
buttonText="Request Free Quote"
|
||||
ariaLabel="Lead capture quote form"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-choose" data-section="why-choose">
|
||||
<FeatureCardTwelve
|
||||
title="Why Request a Quote From ProServe?"
|
||||
description="We make the quoting process simple, transparent, and obligation-free"
|
||||
features={[
|
||||
{
|
||||
id: "free", label: "Free", title: "100% Free Quotes", items: ["No cost for estimates", "No hidden charges", "Transparent pricing breakdown", "Obligation-free assessment"]
|
||||
},
|
||||
{
|
||||
id: "fast", label: "Fast", title: "Quick Turnaround", items: ["30-minute response time", "Same-day service available", "Immediate emergency assistance", "No lengthy wait times"]
|
||||
},
|
||||
{
|
||||
id: "professional", label: "Expert", title: "Licensed Professionals", items: ["Certified technicians", "Years of experience", "Quality guaranteed", "Fully insured service"]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
ariaLabel="Why choose ProServe for quotes"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="emergency" data-section="emergency">
|
||||
<FeatureCardTwelve
|
||||
title="Emergency Plumbing Service"
|
||||
description="For urgent plumbing issues, we're available 24/7 to help you"
|
||||
tag="Emergency"
|
||||
features={[
|
||||
{
|
||||
id: "burst-pipe", label: "Burst Pipes", title: "Water Line Emergencies", items: ["Immediate response", "Water damage mitigation", "Temporary and permanent repairs", "Preventive solutions"]
|
||||
},
|
||||
{
|
||||
id: "backup", label: "Backup", title: "Sewage & Drain Backup", items: ["Quick diagnostic assessment", "Safe cleanup and sanitization", "Fast resolution", "Prevention services"]
|
||||
},
|
||||
{
|
||||
id: "gas", label: "No Heat", title: "Water Heater & Gas Issues", items: ["Gas leak detection", "Water heater repair", "Emergency replacement", "Safety inspection"]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Call Emergency Line", href: "tel:+1-555-0123" }]}
|
||||
ariaLabel="Emergency plumbing services"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="ProServe"
|
||||
copyrightText="© 2025 ProServe Plumbing. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Phone, href: "tel:+1-555-0123", ariaLabel: "Call us" },
|
||||
{ icon: Mail, href: "mailto:info@proserve.com", ariaLabel: "Email us" },
|
||||
{ icon: MapPin, href: "#", ariaLabel: "Find us on map" }
|
||||
]}
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user