331 lines
11 KiB
TypeScript
331 lines
11 KiB
TypeScript
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
|
import FeaturesTimelineCards from '@/components/sections/features/FeaturesTimelineCards';
|
|
import FooterBasic from '@/components/sections/footer/FooterBasic';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
|
import NavbarCentered from '@/components/ui/NavbarCentered';
|
|
import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
|
|
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
|
|
import { Award, CheckCircle, Zap } from "lucide-react";
|
|
import './styles/animations.css';
|
|
|
|
export default function App() {
|
|
return (
|
|
<>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarCentered
|
|
logo="LA Air Comfort"
|
|
navItems={[
|
|
{
|
|
name: "About",
|
|
href: "#about",
|
|
},
|
|
{
|
|
name: "Services",
|
|
href: "#services",
|
|
},
|
|
{
|
|
name: "Pricing",
|
|
href: "#pricing",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
ctaButton={{
|
|
text: "Emergency Help",
|
|
href: "#contact",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
tag="Serving Greater LA"
|
|
title="Beat the Heat: Expert AC Service, Today"
|
|
description="Licensed technicians arrive fast with upfront pricing and 24/7 emergency support. Keep your home cool with our reliable, professional cooling solutions."
|
|
primaryButton={{
|
|
text: "Schedule Service Now",
|
|
href: "#contact",
|
|
}}
|
|
secondaryButton={{
|
|
text: "Get Emergency Help",
|
|
href: "#contact",
|
|
}}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/professional-air-conditioning-service-te-1776513738870-c542f415.png"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMediaOverlay
|
|
tag="About Us"
|
|
title="Trusted LA Cooling Experts"
|
|
description="With over 15 years of experience serving Los Angeles, our team is committed to providing efficient, transparent, and high-quality AC service. We treat every home with respect and every repair with precision."
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/a-group-of-professional-hvac-technicians-1776513747649-573fea29.png"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeaturesTimelineCards
|
|
tag="Our Expertise"
|
|
title="Comprehensive Cooling Solutions"
|
|
description="We offer a full spectrum of air conditioning services to keep your system performing at its peak year-round."
|
|
items={[
|
|
{
|
|
title: "Emergency Repair",
|
|
description: "24/7 rapid response for unexpected system failures in the LA heat.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/a-technician-repairing-an-ac-system-comp-1776513756759-a6e4f3bb.png",
|
|
},
|
|
{
|
|
title: "Preventative Maintenance",
|
|
description: "Scheduled check-ups to prevent breakdowns and extend system life.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/maintenance-technician-cleaning-an-outdo-1776513765518-b9e7ddaf.png",
|
|
},
|
|
{
|
|
title: "System Installation",
|
|
description: "Energy-efficient installation and upgrades for your home or business.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/a-brand-new-modern-hvac-condenser-instal-1776513774967-1470ba40.png",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricsIconCards
|
|
tag="Reliability Metrics"
|
|
title="Why LA Homeowners Trust Us"
|
|
description="Our commitment to quality service shows in our numbers."
|
|
metrics={[
|
|
{
|
|
icon: Award,
|
|
title: "Years Experience",
|
|
value: "15+",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Emergency Calls",
|
|
value: "5000+",
|
|
},
|
|
{
|
|
icon: CheckCircle,
|
|
title: "Happy Customers",
|
|
value: "99%",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialOverlayCards
|
|
tag="Customer Reviews"
|
|
title="Proven Quality Service"
|
|
description="Hear what our Los Angeles neighbors say about our expert cooling solutions."
|
|
testimonials={[
|
|
{
|
|
name: "Sarah J.",
|
|
role: "Homeowner",
|
|
company: "Santa Monica",
|
|
rating: 5,
|
|
imageSrc: "https://pixabay.com/get/gb61f461296262f6b0cb6b08fd32ae850ced834ed0356407e8f8730ae9a56496f88559b3313a18d1787efe41b160bfa9ddf7d88f464dcc4d9826506990108ca50_1280.jpg",
|
|
},
|
|
{
|
|
name: "Michael B.",
|
|
role: "Manager",
|
|
company: "West Hollywood",
|
|
rating: 5,
|
|
imageSrc: "https://pixabay.com/get/g17e7530910fe96eca65759e18910665c7ec4ad872d9dfab1926f05763a0ac80f52f91e96f39c90ef225f0d27f2cf00d37379137309f698cff410aa4e7cf6e29a_1280.jpg",
|
|
},
|
|
{
|
|
name: "Emily R.",
|
|
role: "Homeowner",
|
|
company: "Beverly Hills",
|
|
rating: 5,
|
|
imageSrc: "https://pixabay.com/get/g287308a9ca325996d69fdea372b88f60b03aebf02c623ceeb2db402fef5ddef7ee5479a9afd92a231743f77a51078706fd369c1be64b0f8e577c835f9c073336_1280.jpg",
|
|
},
|
|
{
|
|
name: "David K.",
|
|
role: "Homeowner",
|
|
company: "Culver City",
|
|
rating: 5,
|
|
imageSrc: "https://pixabay.com/get/g4c99c4342c8e30c06770f5711e197083b1d6a1da358184cfe36aacef9021d137adb10a1a4e8b2182063a69c585e6ff181e652344af3f33c87fe16f83e9173e7a_1280.jpg",
|
|
},
|
|
{
|
|
name: "Lisa M.",
|
|
role: "Homeowner",
|
|
company: "Burbank",
|
|
rating: 5,
|
|
imageSrc: "https://pixabay.com/get/g58fba0e47e04404c9314e6756ac751139f92ab35f755aa554d449228bea3e1c470c22d974f2fab1fe3df625d57b7784fa85f5c845b8d180d092b20c9e96f4082_1280.jpg",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing" className="gradient-card">
|
|
<PricingHighlightedCards
|
|
tag="Fair Pricing"
|
|
title="Simple, Upfront Pricing"
|
|
description="No hidden fees, just reliable service you can count on."
|
|
plans={[
|
|
{
|
|
tag: "Essential",
|
|
price: "$99",
|
|
description: "Standard diagnostic call and system health check.",
|
|
features: [
|
|
"Full diagnostic",
|
|
"Safety check",
|
|
"Minor adjustments included",
|
|
],
|
|
primaryButton: {
|
|
text: "Book Now",
|
|
href: "#contact",
|
|
},
|
|
},
|
|
{
|
|
tag: "Popular",
|
|
price: "$189",
|
|
description: "Comprehensive maintenance package for peak efficiency.",
|
|
features: [
|
|
"Deep cleaning",
|
|
"Refrigerant check",
|
|
"Electrical test",
|
|
"Priority booking",
|
|
],
|
|
highlight: "Best Value",
|
|
primaryButton: {
|
|
text: "Choose Plan",
|
|
href: "#contact",
|
|
},
|
|
},
|
|
{
|
|
tag: "Emergency",
|
|
price: "$299",
|
|
description: "Priority 24/7 emergency response for critical system failures.",
|
|
features: [
|
|
"Same-day service",
|
|
"Priority arrival",
|
|
"Full repair estimate",
|
|
],
|
|
primaryButton: {
|
|
text: "Call Now",
|
|
href: "#contact",
|
|
},
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqTwoColumn
|
|
tag="Frequently Asked Questions"
|
|
title="Questions Answered"
|
|
description="Here is what our clients frequently ask about our services."
|
|
items={[
|
|
{
|
|
question: "What areas do you serve in LA?",
|
|
answer: "We serve all of Los Angeles County including Santa Monica, Beverly Hills, and Burbank.",
|
|
},
|
|
{
|
|
question: "Are you licensed?",
|
|
answer: "Yes, we are fully licensed and insured HVAC contractors in California.",
|
|
},
|
|
{
|
|
question: "Do you offer emergency service?",
|
|
answer: "Absolutely, we are available 24/7 for emergency repair calls.",
|
|
},
|
|
{
|
|
question: "How soon can you arrive?",
|
|
answer: "Depending on availability and location, we often arrive same-day for emergencies.",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
tag="Contact Us"
|
|
title="Schedule Your Service"
|
|
description="Fill out the form below or call us to book your AC service."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Your Email",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "address",
|
|
type: "text",
|
|
placeholder: "Your Service Address",
|
|
required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "Details of your AC issue...",
|
|
rows: 4,
|
|
}}
|
|
buttonText="Send Request"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJc0x1D8fz8hQeSgAZ5t4kfi3f/a-modern-well-equipped-service-van-parke-1776513787112-cb3f0e89.png"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBasic
|
|
columns={[
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Services",
|
|
href: "#services",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact",
|
|
items: [
|
|
{
|
|
label: "Contact Form",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "Emergency Support",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
leftText="© 2024 LA Air Comfort. All rights reserved."
|
|
rightText="Serving Los Angeles with integrity."
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|