Update src/app/contact/page.tsx
This commit is contained in:
@@ -1,190 +1,251 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
||||
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Linkedin, Twitter, Mail } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Phone, Mail, MessageCircle, ArrowRight, Check } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const carouselItems = [
|
||||
{ id: "1", imageSrc: "/carousel-1.jpg", imageAlt: "Service 1" },
|
||||
{ id: "2", imageSrc: "/carousel-2.jpg", imageAlt: "Service 2" },
|
||||
{ id: "3", imageSrc: "/carousel-3.jpg", imageAlt: "Service 3" },
|
||||
{ id: "4", imageSrc: "/carousel-4.jpg", imageAlt: "Service 4" },
|
||||
{ id: "5", imageSrc: "/carousel-5.jpg", imageAlt: "Service 5" },
|
||||
{ id: "6", imageSrc: "/carousel-6.jpg", imageAlt: "Service 6" },
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: "1", title: "Expert Consultation", descriptions: [
|
||||
"Our experienced team provides professional guidance", "We assess your needs thoroughly", "Personalized solutions for your situation"],
|
||||
imageSrc: "/feature-1.jpg", imageAlt: "Expert Consultation"},
|
||||
{
|
||||
id: "2", title: "24/7 Support", descriptions: [
|
||||
"Round-the-clock customer support", "Rapid response to urgent inquiries", "Dedicated support specialists"],
|
||||
imageSrc: "/feature-2.jpg", imageAlt: "24/7 Support"},
|
||||
{
|
||||
id: "3", title: "Quality Assurance", descriptions: [
|
||||
"Rigorous testing and verification", "Industry-leading standards compliance", "Continuous improvement processes"],
|
||||
imageSrc: "/feature-3.jpg", imageAlt: "Quality Assurance"},
|
||||
{
|
||||
id: "4", title: "Professional Team", descriptions: [
|
||||
"Certified and experienced professionals", "Ongoing training and development", "Commitment to excellence"],
|
||||
imageSrc: "/feature-4.jpg", imageAlt: "Professional Team"},
|
||||
];
|
||||
|
||||
const products = [
|
||||
{
|
||||
id: "1", name: "Premium Service Package", price: "$199", variant: "Comprehensive coverage", imageSrc: "/product-1.jpg", imageAlt: "Premium Package"},
|
||||
{
|
||||
id: "2", name: "Standard Service Package", price: "$99", variant: "Essential services", imageSrc: "/product-2.jpg", imageAlt: "Standard Package"},
|
||||
{
|
||||
id: "3", name: "Professional Service Package", price: "$149", variant: "Extended features", imageSrc: "/product-3.jpg", imageAlt: "Professional Package"},
|
||||
{
|
||||
id: "4", name: "Enterprise Service Package", price: "$299", variant: "Full suite access", imageSrc: "/product-4.jpg", imageAlt: "Enterprise Package"},
|
||||
];
|
||||
|
||||
const pricingPlans = [
|
||||
{
|
||||
id: "starter", title: "Starter", price: "$29", period: "/month", imageSrc: "/pricing-1.jpg", imageAlt: "Starter Plan", button: { text: "Get Started", href: "#contact" },
|
||||
features: ["Basic support", "Monthly consultations", "Email assistance"],
|
||||
},
|
||||
{
|
||||
id: "professional", title: "Professional", price: "$79", period: "/month", imageSrc: "/pricing-2.jpg", imageAlt: "Professional Plan", button: { text: "Choose Plan", href: "#contact" },
|
||||
features: [
|
||||
"Priority support", "Weekly consultations", "Phone and email support", "Dedicated account manager"],
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", imageSrc: "/testimonial-1.jpg", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "2", name: "Michael Chen", imageSrc: "/testimonial-2.jpg", imageAlt: "Michael Chen"},
|
||||
{
|
||||
id: "3", name: "Emma Davis", imageSrc: "/testimonial-3.jpg", imageAlt: "Emma Davis"},
|
||||
{
|
||||
id: "4", name: "James Wilson", imageSrc: "/testimonial-4.jpg", imageAlt: "James Wilson"},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
id: "1", title: "What services are included?", content:
|
||||
"Our comprehensive service package includes professional consultation, 24/7 support, quality assurance, and ongoing assistance from our experienced team."},
|
||||
{
|
||||
id: "2", title: "How quickly can you respond?", content:
|
||||
"We pride ourselves on rapid response times. Most inquiries are addressed within 24 hours, and urgent matters are handled immediately by our dedicated support team."},
|
||||
{
|
||||
id: "3", title: "Do you offer customized solutions?", content:
|
||||
"Yes! We provide personalized solutions tailored to your specific needs. Contact us to discuss your requirements and we'll create a customized plan."},
|
||||
{
|
||||
id: "4", title: "What are your pricing options?", content:
|
||||
"We offer flexible pricing plans ranging from basic to enterprise solutions. Choose the plan that best fits your needs, and upgrade or downgrade anytime."},
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Security", href: "#security" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Blog", href: "#blog" },
|
||||
{ label: "Careers", href: "#careers" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Help Center", href: "#help" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Status", href: "#status" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="OW HomeShield Inc."
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Membership Plans", id: "pricing" },
|
||||
{ name: "Request Service", id: "how-it-works" },
|
||||
{ name: "About", id: "benefits" },
|
||||
{ name: "Contact", id: "final-cta" }
|
||||
]}
|
||||
button={{
|
||||
text: "Call Now: 226-224-3573", href: "tel:226-224-3573"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
brandName="ContactHub"
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="Get in Touch with OW HomeShield"
|
||||
description="Have questions about our membership plans or need immediate assistance? We're here to help."
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Get in Touch with Our Team"
|
||||
description="We're here to help. Reach out to us with any questions or to schedule a consultation."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Contact Us"
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
kpis={[
|
||||
{ value: "10+", label: "Years Experience" },
|
||||
{ value: "24/7", label: "Emergency Support" },
|
||||
{ value: "500+", label: "Satisfied Customers" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tagIcon={MessageCircle}
|
||||
buttons={[
|
||||
{ text: "Call Now", href: "tel:226-224-3573" },
|
||||
{ text: "Email Us", href: "mailto:info@owhomeshield.com" }
|
||||
{ text: "Start Conversation", href: "#contact" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-young-man-taking-break_23-2148384545.jpg?_wi=1"
|
||||
imageAlt="Contact our team"
|
||||
carouselItems={carouselItems}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="benefits" data-section="benefits">
|
||||
<FeatureCardSeven
|
||||
title="Why Choose OW HomeShield?"
|
||||
description="We pride ourselves on delivering exceptional service across all areas"
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Why Choose Us"
|
||||
description={[
|
||||
"We pride ourselves on delivering exceptional service with professionalism and integrity.", "Our dedicated team is committed to understanding your needs and providing tailored solutions.", "With years of experience, we've built lasting relationships with thousands of satisfied customers."]}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#features" },
|
||||
{ text: "View Services", href: "#services" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
showBorder={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
features={features}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
title="Our Services"
|
||||
description="Discover the comprehensive solutions we offer to meet your needs"
|
||||
tag="Services"
|
||||
tagIcon={Check}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Expert Technicians", description: "Licensed and insured professionals with years of experience", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-young-man-taking-break_23-2148384545.jpg?_wi=2", imageAlt: "Expert technicians"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Fast Response", description: "Quick turnaround times for all service requests", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-young-man-taking-break_23-2148384545.jpg?_wi=3", imageAlt: "Fast response service"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Affordable Pricing", description: "Competitive rates with membership discounts", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-young-man-taking-break_23-2148384545.jpg?_wi=4", imageAlt: "Affordable pricing"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
products={products}
|
||||
title="Service Packages"
|
||||
description="Choose the package that best fits your requirements"
|
||||
tag="Packages"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
title="Our Membership Plans"
|
||||
description="Choose the perfect plan for your home protection needs"
|
||||
<PricingCardNine
|
||||
plans={pricingPlans}
|
||||
animationType="slide-up"
|
||||
title="Flexible Pricing Plans"
|
||||
description="Select the plan that works best for your budget and needs"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic", badge: "Basic", price: "$44/month", subtitle: "Essential coverage", features: ["1 service visit per month", "10% renovation discount"]
|
||||
},
|
||||
{
|
||||
id: "standard", badge: "Standard", price: "$59/month", subtitle: "Popular choice", features: ["2 service visits per month", "15% renovation discount", "Priority booking"]
|
||||
},
|
||||
{
|
||||
id: "premium", badge: "Premium", price: "$84/month", subtitle: "Full coverage", features: ["Unlimited service requests", "24/7 emergency support", "Priority scheduling"]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<FeatureCardSeven
|
||||
title="How Our Service Works"
|
||||
description="Simple steps to get your home protected"
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={testimonials}
|
||||
cardTitle="Over 5,000 satisfied customers trust us for their needs"
|
||||
cardTag="See what they say"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
faqs={faqs}
|
||||
ctaTitle="Ready to Get Started?"
|
||||
ctaDescription="Let's discuss how we can help you achieve your goals."
|
||||
ctaButton={{ text: "Schedule a Call", href: "#contact" }}
|
||||
ctaIcon={Phone}
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Choose Your Plan", description: "Select from our three membership options based on your needs", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-young-man-taking-break_23-2148384545.jpg?_wi=5", imageAlt: "Choose your plan"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Sign Up Online", description: "Quick registration process takes just a few minutes", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-young-man-taking-break_23-2148384545.jpg?_wi=6", imageAlt: "Sign up online"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Get Immediate Service", description: "Start receiving professional home maintenance and repairs", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-young-man-taking-break_23-2148384545.jpg?_wi=7", imageAlt: "Get immediate service"
|
||||
}
|
||||
]}
|
||||
accordionAnimationType="smooth"
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trust" data-section="trust">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Outstanding service! The team was professional and efficient. They fixed my plumbing issue quickly and at a fair price. Highly recommended."
|
||||
rating={5}
|
||||
author="John Smith"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cheerful-excited-businesswoman-blue-blouse-showing-thumb-up_1262-14826.jpg", alt: "Customer John"
|
||||
}
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
<div id="footer-base" data-section="footer-base">
|
||||
<FooterBase
|
||||
columns={footerColumns}
|
||||
logoText="ContactHub"
|
||||
copyrightText="© 2025 | ContactHub. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="final-cta" data-section="final-cta">
|
||||
<ContactCTA
|
||||
tag="Ready to Get Started?"
|
||||
title="Join OW HomeShield Today"
|
||||
description="Experience the peace of mind that comes with reliable home maintenance and emergency support available 24/7."
|
||||
buttons={[
|
||||
{ text: "Start Free Trial", href: "#" },
|
||||
{ text: "Call Us Now", href: "tel:226-224-3573" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="OW HomeShield Inc."
|
||||
copyrightText="© 2025 OW HomeShield Inc. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com", ariaLabel: "LinkedIn"
|
||||
},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com", ariaLabel: "Twitter"
|
||||
},
|
||||
{
|
||||
icon: Mail,
|
||||
href: "mailto:info@owhomeshield.com", ariaLabel: "Email"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<div id="footer-simple" data-section="footer-simple">
|
||||
<FooterSimple copyrightText="Privacy Policy • Terms of Service • Contact" />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user