353 lines
12 KiB
TypeScript
353 lines
12 KiB
TypeScript
import { useRef } from 'react';
|
|
import useOnScreen from '@/hooks/useOnScreen';
|
|
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() {
|
|
const heroRef = useRef<HTMLDivElement>(null);
|
|
const aboutRef = useRef<HTMLDivElement>(null);
|
|
const servicesRef = useRef<HTMLDivElement>(null);
|
|
const metricsRef = useRef<HTMLDivElement>(null);
|
|
const testimonialsRef = useRef<HTMLDivElement>(null);
|
|
const pricingRef = useRef<HTMLDivElement>(null);
|
|
const faqRef = useRef<HTMLDivElement>(null);
|
|
const contactRef = useRef<HTMLDivElement>(null);
|
|
const footerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const heroOnScreen = useOnScreen(heroRef, "-100px");
|
|
const aboutOnScreen = useOnScreen(aboutRef, "-100px");
|
|
const servicesOnScreen = useOnScreen(servicesRef, "-100px");
|
|
const metricsOnScreen = useOnScreen(metricsRef, "-100px");
|
|
const testimonialsOnScreen = useOnScreen(testimonialsRef, "-100px");
|
|
const pricingOnScreen = useOnScreen(pricingRef, "-100px");
|
|
const faqOnScreen = useOnScreen(faqRef, "-100px");
|
|
const contactOnScreen = useOnScreen(contactRef, "-100px");
|
|
const footerOnScreen = useOnScreen(footerRef, "-100px");
|
|
|
|
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 ref={heroRef} id="hero" data-section="hero" className={`animate-on-scroll ${heroOnScreen ? 'is-visible' : ''}`}>
|
|
<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 ref={aboutRef} id="about" data-section="about" className={`animate-on-scroll ${aboutOnScreen ? 'is-visible' : ''}`}>
|
|
<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 ref={servicesRef} id="services" data-section="services" className={`texture-noise animate-on-scroll ${servicesOnScreen ? 'is-visible' : ''}`}>
|
|
<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 ref={metricsRef} id="metrics" data-section="metrics" className={`animate-on-scroll ${metricsOnScreen ? 'is-visible' : ''}`}>
|
|
<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 ref={testimonialsRef} id="testimonials" data-section="testimonials" className={`animate-on-scroll ${testimonialsOnScreen ? 'is-visible' : ''}`}>
|
|
<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 ref={pricingRef} id="pricing" data-section="pricing" className={`gradient-card animate-on-scroll ${pricingOnScreen ? 'is-visible' : ''}`}>
|
|
<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 ref={faqRef} id="faq" data-section="faq" className={`texture-noise animate-on-scroll ${faqOnScreen ? 'is-visible' : ''}`}>
|
|
<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 ref={contactRef} id="contact" data-section="contact" className={`animate-on-scroll ${contactOnScreen ? 'is-visible' : ''}`}>
|
|
<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 ref={footerRef} id="footer" data-section="footer" className={`animate-on-scroll ${footerOnScreen ? 'is-visible' : ''}`}>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|