Switch to version 3: modified src/app/contact/page.tsx
This commit is contained in:
@@ -1,22 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
||||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Hammer, Wrench, Phone, Mail, MessageCircle, CheckCircle } from "lucide-react";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Hammer, Phone, Mail, MapPin, Clock, Users, TrendingUp, Zap, Facebook, Instagram, Linkedin } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Services", id: "/services" },
|
||||
];
|
||||
|
||||
const contactButton = {
|
||||
text: "Get Started", href: "#contact"
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -31,158 +36,191 @@ export default function ContactPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
button={contactButton}
|
||||
brandName="Earl Boys Services"
|
||||
bottomLeftText="Richmond, VA"
|
||||
bottomRightText="804-938-0669"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
<HeroBillboardDashboard
|
||||
title="Contact Earl Boys Services"
|
||||
description="Get in touch with our team for all your home service needs. We're here to help transform your home with professional, reliable service."
|
||||
description="Get in touch with our team for all your home service needs. We are here to help transform your home with professional, reliable service."
|
||||
tag="Earl Boys Services"
|
||||
tagIcon={Hammer}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-cute-family-repairs-room_1157-24897.jpg?_wi=2", imageAlt: "Professional home services team"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=3", imageAlt: "Expert plumbing services"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg?_wi=3", imageAlt: "Professional painting services"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg?_wi=3", imageAlt: "Licensed electrical work"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanics-checking-planning-workshop_329181-11868.jpg?_wi=3", imageAlt: "General maintenance services"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now: 804-938-0669", href: "tel:804-938-0669"},
|
||||
text: "Call Now: 804-938-0669", href: "tel:804-938-0669"
|
||||
},
|
||||
{
|
||||
text: "Get Free Estimate", href: "#contact-form"},
|
||||
text: "Quick Contact Form", href: "#contact-form"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
ariaLabel="Contact page hero section for Earl Boys Services"
|
||||
dashboard={{
|
||||
title: "Contact Information", logoIcon: Phone,
|
||||
imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=100&h=100&fit=crop&crop=face", buttons: [
|
||||
{ text: "Call Us", href: "tel:804-938-0669" },
|
||||
{ text: "Email", href: "mailto:contact@earlboys.com" },
|
||||
],
|
||||
sidebarItems: [
|
||||
{ icon: Phone, active: true },
|
||||
{ icon: Mail },
|
||||
{ icon: MapPin },
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
title: "Response Time", values: [1, 0.5, 0],
|
||||
description: "We respond fast"
|
||||
},
|
||||
{
|
||||
title: "Service Area", values: [100, 50, 25],
|
||||
description: "Coverage zone"
|
||||
},
|
||||
{
|
||||
title: "Experience", values: [15, 10, 5],
|
||||
description: "In business"
|
||||
},
|
||||
],
|
||||
chartTitle: "Contact Volume", chartData: [
|
||||
{ value: 45 },
|
||||
{ value: 65 },
|
||||
{ value: 75 },
|
||||
{ value: 85 },
|
||||
{ value: 90 },
|
||||
],
|
||||
listTitle: "Ways to Reach Us", listItems: [
|
||||
{ icon: Phone, title: "804-938-0669", status: "Available" },
|
||||
{ icon: Mail, title: "Email Support", status: "24/7" },
|
||||
{ icon: MapPin, title: "Richmond, VA", status: "Local" },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
title="How to Reach Us"
|
||||
description="Multiple convenient ways to get in touch with Earl Boys Services. We're ready to discuss your project and provide expert recommendations."
|
||||
tag="Contact Options"
|
||||
tagIcon={Wrench}
|
||||
features={[
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
metrics={[
|
||||
{
|
||||
title: "Phone Support", description: "Call us directly for immediate assistance and emergency service requests.", icon: Phone,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg", imageAlt: "Customer service support"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=2", imageAlt: "Professional communication"},
|
||||
],
|
||||
id: "1", value: "804-938-0669", title: "Direct Phone Line", description: "Available during business hours", imageSrc: "https://images.unsplash.com/photo-1634017303134-b69a4aacbfbb?w=500&h=500&fit=crop", imageAlt: "Phone support"
|
||||
},
|
||||
{
|
||||
title: "Service Area Coverage", description: "We proudly serve Richmond, VA and all surrounding areas with comprehensive home services.", icon: Wrench,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-s-hand-holding-push-pin-blur-map_23-2147958186.jpg?_wi=2", imageAlt: "Richmond virginia map location marker"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-cleaning-office-together_23-2149345517.jpg", imageAlt: "Professional home services team working"},
|
||||
],
|
||||
id: "2", value: "Richmond", title: "Service Area", description: "Plus surrounding Virginia areas", imageSrc: "https://images.unsplash.com/photo-1524661135-423995f22d0b?w=500&h=500&fit=crop", imageAlt: "Richmond Virginia map"
|
||||
},
|
||||
{
|
||||
title: "Free Estimates", description: "Schedule a free consultation and estimate for your project with our experienced team.", icon: CheckCircle,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg?_wi=2", imageAlt: "Home improvement project"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-builder-men-with-smartphones_23-2148751993.jpg", imageAlt: "Professional consultation"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Licensed & Insured", description: "All services fully licensed, insured, and bonded for your peace of mind.", icon: CheckCircle,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-grey-haired-logistic-worker-hardhat-uniform-standing-shelves-warehouse-with-arms-folded-looking-camera-smiling-vertical-shot-labor-blue-collar-portrait-concept_74855-14227.jpg", imageAlt: "Professional tradesman"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-professional-cleaning-service-person-holding-supplies_23-2150520608.jpg", imageAlt: "Professional service team"},
|
||||
],
|
||||
id: "3", value: "24/7", title: "Emergency Support", description: "On-call for urgent issues", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop&_wi=1", imageAlt: "Emergency services team"
|
||||
},
|
||||
]}
|
||||
title="Ready to Transform Your Home?"
|
||||
description="Join thousands of satisfied customers who have trusted Earl Boys Services with their most important projects."
|
||||
tag="Contact Details"
|
||||
tagIcon={TrendingUp}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Request Service", href: "tel:804-938-0669"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactFaq
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What is your phone number?", content: "You can reach us at 804-938-0669. We're available during business hours and offer emergency service for urgent issues."},
|
||||
{
|
||||
id: "2", title: "How quickly can you respond to my request?", content: "We typically respond to service requests within 24 hours. For emergency issues, call us immediately at 804-938-0669."},
|
||||
{
|
||||
id: "3", title: "What areas do you serve?", content: "We proudly serve Richmond, VA and all surrounding areas. Our service team covers residential and commercial properties throughout the region."},
|
||||
{
|
||||
id: "4", title: "Do you charge for consultations and estimates?", content: "No! We provide free, no-obligation estimates for all services. Contact us to schedule your consultation."},
|
||||
{
|
||||
id: "5", title: "What payment methods do you accept?", content: "We accept cash, check, credit cards, and digital payments. We also offer financing options for larger projects."},
|
||||
{
|
||||
id: "6", title: "Are you licensed and insured?", content: "Absolutely. Earl Boys Services is fully licensed, insured, and bonded. We maintain all required certifications."},
|
||||
]}
|
||||
ctaTitle="Ready to Get Started?"
|
||||
ctaDescription="Contact Earl Boys Services today for a free estimate and professional home service solutions."
|
||||
ctaButton={{ text: "Call Now", href: "tel:804-938-0669" }}
|
||||
ctaIcon={Phone}
|
||||
<div id="trust" data-section="trust">
|
||||
<SocialProofOne
|
||||
names={["Licensed", "Insured", "Bonded", "Certified", "Trusted"]}
|
||||
title="Why Homeowners Trust Us"
|
||||
description="Proven reliability with years of excellent service in Richmond and surrounding areas"
|
||||
tag="Credentials"
|
||||
tagIcon={Users}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
accordionAnimationType="smooth"
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactSplitForm
|
||||
title="Get Your Free Estimate"
|
||||
description="Tell us about your project and we will get back to you within 24 hours with a detailed estimate. No obligation, no pressure."
|
||||
inputs={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Plumbing", href: "/" },
|
||||
{ label: "Electrical", href: "/" },
|
||||
{ label: "Painting", href: "/" },
|
||||
{ label: "Maintenance", href: "/" },
|
||||
],
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Testimonials", href: "/" },
|
||||
{ label: "Get Estimate", href: "tel:804-938-0669" },
|
||||
],
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "Phone: 804-938-0669", href: "tel:804-938-0669" },
|
||||
{ label: "Richmond, VA", href: "#" },
|
||||
{ label: "Licensed & Insured", href: "#" },
|
||||
{ label: "Available 24/7", href: "#" },
|
||||
],
|
||||
name: "phone", type: "tel", placeholder: "Your Phone Number", required: true,
|
||||
},
|
||||
{
|
||||
name: "service", type: "text", placeholder: "Service Needed", required: false,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Describe your project in detail...", rows: 5,
|
||||
required: true,
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop&_wi=2"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
buttonText="Request Estimate"
|
||||
onSubmit={(data) => {
|
||||
console.log("Form submitted:", data);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What is your phone number?", content: "You can reach us at 804-938-0669. We are available during business hours and offer emergency service for urgent issues."
|
||||
},
|
||||
{
|
||||
id: "2", title: "How quickly can you respond to my request?", content: "We typically respond to service requests within 24 hours. For emergency issues, call us immediately at 804-938-0669."
|
||||
},
|
||||
{
|
||||
id: "3", title: "What areas do you serve?", content: "We proudly serve Richmond, VA and all surrounding areas. Our service team covers residential and commercial properties throughout the region."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Do you charge for consultations and estimates?", content: "No! We provide free, no-obligation estimates for all services. Contact us to schedule your consultation."
|
||||
},
|
||||
{
|
||||
id: "5", title: "What payment methods do you accept?", content: "We accept cash, check, credit cards, and digital payments. We also offer financing options for larger projects."
|
||||
},
|
||||
{
|
||||
id: "6", title: "Are you licensed and insured?", content: "Absolutely. Earl Boys Services is fully licensed, insured, and bonded. We maintain all required certifications."
|
||||
},
|
||||
]}
|
||||
title="Questions About Our Services?"
|
||||
description="Find answers to common questions about contacting Earl Boys Services, scheduling appointments, and our service offerings."
|
||||
tag="Support"
|
||||
tagIcon={Mail}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Earl Boys Services"
|
||||
copyrightText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com", ariaLabel: "Facebook"
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com", ariaLabel: "Instagram"
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
href: "tel:804-938-0669", ariaLabel: "Call us"
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
|
||||
bottomRightText="Professional Home Services"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user