new-air-and-water-mechanical/service-detail.html

906 lines
40 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Air & Water Mechanical</title>
<!-- Favicons Icons -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/images/logo/air.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/images/logo/air.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/images/logo/air.png"
/>
<link rel="manifest" href="assets/images/favicons/site.webmanifest" />
<meta name="description" content="Air & Water Mechanical" />
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/vendors/animate/animate.min.css" />
<link rel="stylesheet" href="assets/vendors/animate/custom-animate.css" />
<link
rel="stylesheet"
href="assets/vendors/bootstrap/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="assets/vendors/bxslider/jquery.bxslider.css" />
<link rel="stylesheet" href="assets/vendors/fontawesome/css/all.min.css" />
<link
rel="stylesheet"
href="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.css"
/>
<link rel="stylesheet" href="assets/vendors/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="assets/vendors/nice-select/nice-select.css" />
<link rel="stylesheet" href="assets/vendors/odometer/odometer.min.css" />
<link
rel="stylesheet"
href="assets/vendors/owl-carousel/owl.carousel.min.css"
/>
<link
rel="stylesheet"
href="assets/vendors/owl-carousel/owl.theme.default.min.css"
/>
<link rel="stylesheet" href="assets/vendors/swiper/swiper.min.css" />
<link rel="stylesheet" href="assets/vendors/vegas/vegas.min.css" />
<link rel="stylesheet" href="assets/vendors/thm-icons/style.css" />
<link
rel="stylesheet"
href="assets/vendors/language-switcher/polyglot-language-switcher.css"
/>
<link rel="stylesheet" href="assets/vendors/fancybox/fancybox.min.css" />
<link rel="stylesheet" href="assets/vendors/aos/aos.css" />
<!-- Module css -->
<link rel="stylesheet" href="assets/css/module-css/01-header-section.css" />
<link rel="stylesheet" href="assets/css/module-css/02-banner-section.css" />
<link rel="stylesheet" href="assets/css/module-css/03-about-section.css" />
<link
rel="stylesheet"
href="assets/css/module-css/04-fact-counter-section.css"
/>
<link
rel="stylesheet"
href="assets/css/module-css/05-testimonial-section.css"
/>
<link
rel="stylesheet"
href="assets/css/module-css/06-partner-section.css"
/>
<link rel="stylesheet" href="assets/css/module-css/07-footer-section.css" />
<link rel="stylesheet" href="assets/css/module-css/08-blog-section.css" />
<link
rel="stylesheet"
href="assets/css/module-css/09-breadcrumb-section.css"
/>
<link rel="stylesheet" href="assets/css/module-css/10-contact.css" />
<!-- Template styles -->
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/responsive.css" />
</head>
<body>
<div class="page-wrapper boxed_wrapper">
<header class="main-header main-header-style4">
<!--Start Main Header Style2 Top-->
<div class="main-header-style2__top">
<div class="container">
<div class="main-header-style2__top-inner">
<!--Start Main Header Style2 Top Left-->
<div class="main-header-style2-top-left">
<div class="phone-number-box-style2">
<h3>
Call us for a Free Quote :
<a href="tel:480706333">(480) 706-333</a>
</h3>
</div>
<div class="consultation-box svg-container">
<img src="assets/images/icon/bbb-icon.svg" alt="BBB Icon" />
</div>
</div>
<!--End Main Header Style2 Top Left-->
<!--Start Main Header Style2 Top Right-->
<div class="main-header-style2-top-right">
<div class="header-social-link-style1">
<ul class="clearfix">
<li>
<a href="https://www.facebook.com/airandwatermechanical/">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/airwatermechanical/">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC40ZVdaGGLBiVZQBBNz1U5A/featured">
<i class="fab fa-youtube"></i>
</a>
</li>
</ul>
</div>
<div class="icon text-white">
<span class="icon-location" style="margin-right: 10px;"></span>
<span>Serving Metro Phoenix</span>
</div>
</div>
<!--End Main Header Style2 Top Right-->
</div>
</div>
</div>
<!--End Main Header Style2 Top-->
<!--Start Main Menu Style2-->
<nav class="main-menu main-menu-style2">
<div class="main-menu__wrapper clearfix">
<div class="container">
<div class="main-menu__wrapper-inner">
<div class="main-menu-style2-left">
<div class="logo-box-style1">
<a href="index.html">
<img src="assets/images/logo/air.png" alt="Logo" />
</a>
</div>
</div>
<div class="main-menu-style2-right">
<div class="main-menu-box">
<a href="#" class="mobile-nav__toggler">
<i class="icon-bars"></i>
</a>
<ul class="main-menu__list">
<li>
<a href="index.html">Home</a>
</li>
<li class="dropdown">
<a href="services.html">HVAC Services</a>
<ul>
<li><a href="service-detail.html?service=ac-repair">AC Repair</a></li>
<li><a href="service-detail.html?service=ac-installation">AC Installation</a></li>
<li><a href="service-detail.html?service=ac-maintenance">AC Maintenance</a></li>
<li><a href="service-detail.html?service=air-quality">Air Quality Solutions</a></li>
<li><a href="ductless-ac.html">Ductless AC</a></li>
<li><a href="commercial-hvac.html">Commercial HVAC</a></li>
</ul>
</li>
<li class="dropdown">
<a href="plumbing.html">Plumbing Services</a>
<ul>
<li><a href="plumbing-inspection.html">Plumbing Inspection</a></li>
<li><a href="plumbing-repair.html">Plumbing Repair</a></li>
<li><a href="water-heaters.html">Water Heaters</a></li>
<li><a href="tankless-water-heaters.html">Tankless Water Heater</a></li>
<li><a href="hydro-jetting.html">Hydro Jetting</a></li>
<li><a href="under-slab-plumbing.html">Under Slab Plumbing</a></li>
<li><a href="slab-leak-detection.html">Slab Leak Detection</a></li>
<li><a href="commercial-plumbing-service.html">Commercial Plumbing Service</a></li>
</ul>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="service-area.html">Service Area</a>
</li>
<li>
<a href="contact-us.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--End Main Menu Style2-->
</header>
<div
class="stricky-header stricky-header--style4 stricked-menu main-menu"
>
<div class="sticky-header__content"></div>
<!-- /.sticky-header__content -->
</div>
<!-- /.stricky-header -->
<!--Start breadcrumb area-->
<section class="breadcrumb-area">
<div class="breadcrumb-area__inner">
<div
class="breadcrumb-area-bg"
style="
background-image: url(assets/images/breadcrumb/breadcrumb-5.webp);
"
></div>
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="inner-content">
<div class="title">
<h2 id="crumb-title"></h2>
</div>
<div class="breadcrumb-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li
class="active"
style="color: #ccc;"
id="crumb"
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End breadcrumb area-->
<!--Start Service Details page2 sec1-->
<section class="service-details-page2-sec1">
<div class="container">
<div class="row">
<div class="col-xl-6">
<div class="service-details-page2-sec1__image">
<div class="inner">
<img id="service-img" src="assets/images/services/service-details-page2-img-1.jpg" alt="">
</div>
</div>
</div>
<div class="col-xl-6">
<div class="service-details-page2-sec1__content">
<div class="sec-title">
<div class="sub-title">
<div class="border-left"></div>
<h5 id="service-detail">service details</h5>
</div>
<h2 class="text-blue" id="service-title"></h2>
</div>
<div class="text">
<p id="service-description">There are many variations of passages of Lorem Ipsum available, but the majority have
suffered alteration in some form, by injected humour, or randomised words which
don't look even slightly believable. If you are going to use a passage of Lorem
Ipsum, you need to be sure there isn't anything embarrassing hidden.</p>
</div>
<ul id="service-features">
</ul>
<div class="bottom-text" id="second-description">
<p>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End Service Details page2 sec1-->
<!--Start Service Details Style3 -->
<section class="service-details-style3 pb-5 pt-0">
<div class="container">
<div class="row">
<div class="col-xl-9">
<div class="service-details-style3__content">
<div class="inner-title">
<h2 class="text-blue">Images</h2>
<p>At Air & Water Mechanical, we understand just how brutal Phoenix summers can be. Keeping your homes air conditioning system in top shape is our priority! No matter the issue, weve got the solution to restore your comfort quickly. When your A/C stops working, well be there to save the day. Call us or schedule your service online today, and discover why were recognized as one of the best A/C companies in Air & Water Mechanical!</p>
</div>
<div class="service-details-style3-img-box">
<div class="row">
<!--Start Single Img Box-->
<div class="col-xl-4 col-lg-4">
<div class="single-img-box">
<img style="height: 250px; object-fit: cover;" src="assets/images/home/home3.jpg" alt="">
</div>
</div>
<!--End Single Img Box-->
<!--Start Single Img Box-->
<div class="col-xl-4 col-lg-4">
<div class="single-img-box">
<img style="height: 250px; object-fit: cover;" src="assets/images/home/home4.jpg" alt="">
</div>
</div>
<!--End Single Img Box-->
<!--Start Single Img Box-->
<div class="col-xl-4 col-lg-4">
<div class="single-img-box">
<img style="height: 250px; object-fit: cover;" src="assets/images/home/home2.jpg" alt="">
<!-- <div class="video-gallery-style2">
<div class="icon wow zoomIn animated animated" data-wow-delay="300ms"
data-wow-duration="1500ms"
style="visibility: visible; animation-duration: 1500ms; animation-delay: 300ms; animation-name: zoomIn;">
<a class="video-popup" title="Video Gallery"
href="https://www.youtube.com/watch?v=06dV9txztKY">
<span class="icon-play"></span>
</a>
</div>
</div> -->
</div>
</div>
<!--End Single Img Box-->
</div>
</div>
<!-- <div class="service-details-style3-bottom-text">
<h2>Benefit of Service</h2>
<p>Duis quis faucibus dolor. Nulla nulla justo, posuere eu aliquam a, tristique sed
nisi. Suspendisse vel erat mauris. Maecenas maximus sed nisl imperdiet eleifend.
Mauris suscipit .</p>
<div class="list-items">
<div class="row">
<ul id="service-benefits" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px">
</ul>
</div>
</div>
</div> -->
</div>
</div>
<div class="col-xl-3">
<div class="service-details-sidebar-box-style2">
<div class="service-details-contact-info-box">
<div class="img-box">
<img src="assets/images/resources/service-details-contact-info.jpg" alt="">
<div class="img-holder-img-bg"></div>
</div>
<div class="title-box">
<h3>Available<br> <span>for any type of<br> Service</span></h3>
<h2>We can help</h2>
<div class="btn-box">
<a class="btn-fix btn-fix-red py-3 px-5" href="contact-us.html">
<span class="txt">
contact us
</span>
</a>
</div>
</div>
</div>
<!-- <div class="sidebar-download-box">
<div class="inner-title">
<h2>Download</h2>
</div>
<div class="dwn-btn">
<a class="btn-fix btn-fix-blue" href="#">
<span class="txt">
Download Brochure
<i class="icon-download"></i>
</span>
</a>
</div>
</div> -->
</div>
</div>
</div>
</div>
</section>
<!--End Service Details Style3 -->
<div class="bottom-parallax">
<!--Start footer area -->
<footer class="footer-area">
<!--Start Footer Top-->
<div class="footer-top">
<div
class="footer-top__bg"
style="
background-image: url(assets/images/pattern/thm-pattern-1.png);
"
></div>
<div class="container">
<div class="footer-top__inner">
<ul class="footer-contact-info-box1">
<li>
<div class="footer-contact-info-box1__single">
<div class="icon map">
<span class="icon-location"></span>
</div>
<div class="text">
<p>
Servicing:<br />
<h5><a target="_blank" href="https://maps.app.goo.gl/N5aEwupa7DoLP6xy9"
>1048 S Sirrine, Mesa, AZ, United States, Arizona</a
></h5>
</p>
</div>
</div>
</li>
<li>
<div class="footer-contact-info-box1__single">
<div class="icon">
<span class="icon-mail"></span>
</div>
<div class="text">
<p>Email Us:</p>
<h5>
<a href="mailto:dispatch@airwateraz.com"
>dispatch@airwateraz.com</a
>
</h5>
</div>
</div>
</li>
<li>
<div class="footer-contact-info-box1__single">
<div class="icon">
<span class="icon-phone-call"></span>
</div>
<div class="text">
<p>Call Us:</p>
<h5><a href="tel:480706333">+ (480) 706-333</a></h5>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--End Footer Top-->
<!--Start Footer Top-->
<div class="footer-main">
<div class="container">
<div class="row">
<!--Start single footer widget-->
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 single-widget">
<div class="single-footer-widget">
<div class="our-company-info">
<div class="footer-logo-style1">
<a href="index.html">
<img
src="assets/images/logo/AWM-logo.png"
alt="Awesome Logo"
title=""
/>
</a>
</div>
<div class="text">
<p style="color: black;">
Air & Water Mechanical. Phoenixs trusted provider of honest, affordable HVAC solutions, dedicated to ensuring comfort in every home we serve.
</p>
</div>
<div class="footer-social-link">
<ul class="clearfix">
<li>
<a href="https://www.facebook.com/airandwatermechanical/">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/airwatermechanical/">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC40ZVdaGGLBiVZQBBNz1U5A/featured">
<i class="fab fa-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--End single footer widget-->
<!--Start single footer widget-->
<div class="col-xl-2 col-lg-6 col-md-6 col-sm-12 single-widget">
<div
class="single-footer-widget single-footer-widget--link-box margin-leftminus1"
>
<div class="title">
<h3>Company Info</h3>
</div>
<div class="footer-widget-links">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">HVAC Services</a></li>
<li><a href="#">Plumbing Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Service Area</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<!--End single footer widget-->
<!--Start single footer widget-->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 single-widget">
<div
class="single-footer-widget single-footer-widget--link-box"
>
<div class="title">
<h3>Our Services</h3>
</div>
<div class="footer-widget-links">
<ul>
<li><a href="#">AC Repair</a></li>
<li>
<a href="#">AC Installation</a>
</li>
<li><a href="#">AC Maintenance</a></li>
<li><a href="#">Air Quality Solutions</a></li>
<li><a href="#">Refrigeration</a></li>
</ul>
</div>
</div>
</div>
<!--End single footer widget-->
<!--Start single footer widget-->
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 single-widget">
<div class="single-footer-widget">
<div class="single-footer-widget__img-box">
<img
src="assets/images/footer/single-footer-widget-img-1.png"
alt=""
/>
</div>
</div>
</div>
<!--End single footer widget-->
</div>
</div>
</div>
<!--End Footer Top-->
<div class="footer-bottom">
<div class="container">
<div class="bottom-inner">
<div class="copyright-text">
<p>
&copy; Copyright <a href="/">Air & Water Mechanical</a> 2025.
All right reserved.<br />
</p>
</div>
<!-- <div class="footer-bottom-right">
<p>
Created by
<a href="https://rankrunners.net/portfolio">RankRunners</a>
</p>
</div> -->
</div>
</div>
</div>
</footer>
<!--End footer area-->
</div>
</div>
<!-- /.page-wrapper -->
<div class="mobile-nav__wrapper">
<div class="mobile-nav__overlay mobile-nav__toggler"></div>
<div class="mobile-nav__content">
<span class="mobile-nav__close mobile-nav__toggler">
<i class="icon-close"></i>
</span>
<div class="logo-box w-75">
<a href="index.html" aria-label="logo image">
<img src="assets/images/logo/logo.webp" alt="" />
</a>
</div>
<div class="mobile-nav-search-box">
<form class="search-form" action="#">
<input placeholder="Keyword" type="text" />
<button type="submit">
<i class="icon-magnifying-glass"></i>
</button>
</form>
</div>
<div class="mobile-nav__container"></div>
<ul class="mobile-nav__contact list-unstyled">
<li>
<i class="fa fa-envelope"></i>
<a href="mailto:info@example.com">info@example.com</a>
</li>
<li>
<i class="fa fa-phone-alt"></i>
<a href="tel:123456789">444 000 777 66</a>
</li>
</ul>
<div class="mobile-nav__social">
<a href="#" class="fab fa-facebook-square"></a>
</div>
</div>
</div>
<div class="search-popup">
<div class="search-popup__overlay search-toggler"></div>
<div class="search-popup__content">
<form action="#">
<label for="search" class="sr-only">search here</label>
<input type="text" id="search" placeholder="Search Here..." />
<button type="submit" aria-label="search submit" class="thm-btn">
<i class="icon-magnifying-glass"></i>
</button>
</form>
</div>
</div>
<!--Scroll to top-->
<div class="scroll-to-top">
<div>
<div class="scroll-top-inner">
<div class="scroll-bar">
<div class="bar-inner"></div>
</div>
<div class="scroll-bar-text">Go To Top</div>
</div>
</div>
</div>
<!-- Scroll to top end -->
<script src="assets/vendors/jquery/jquery-3.6.0.min.js"></script>
<script src="assets/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendors/bxslider/jquery.bxslider.min.js"></script>
<script src="assets/vendors/circleType/jquery.circleType.js"></script>
<script src="assets/vendors/circleType/jquery.lettering.min.js"></script>
<script src="assets/vendors/isotope/isotope.js"></script>
<script src="assets/vendors/jquery-ajaxchimp/jquery.ajaxchimp.min.js"></script>
<script src="assets/vendors/jquery-appear/jquery.appear.min.js"></script>
<script src="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/vendors/jquery-migrate/jquery-migrate.min.js"></script>
<script src="assets/vendors/jquery-ui/jquery-ui.js"></script>
<script src="assets/vendors/jquery-validate/jquery.validate.min.js"></script>
<script src="assets/vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="assets/vendors/odometer/odometer.min.js"></script>
<script src="assets/vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="assets/vendors/swiper/swiper.min.js"></script>
<script src="assets/vendors/vegas/vegas.min.js"></script>
<script src="assets/vendors/wnumb/wNumb.min.js"></script>
<script src="assets/vendors/wow/wow.js"></script>
<script src="assets/vendors/extra-scripts/jquery.paroller.min.js"></script>
<script src="assets/vendors/language-switcher/jquery.polyglot.language.switcher.js"></script>
<script src="assets/vendors/extra-scripts/jquery-sidebar-content.js"></script>
<script src="assets/vendors/fancybox/jquery.fancybox.js"></script>
<script src="assets/vendors/aos/aos.js"></script>
<script src="assets/vendors/extra-scripts/TweenMax.min.js"></script>
<!-- Template js -->
<script src="assets/js/custom.js"></script>
<style>
#service-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 767px) {
#service-grid{
grid-template-columns: repeat(1, 1fr);
}
}
</style>
<script>
// Service Data (could also be fetched from an API)
const services = {
"ac-repair": {
header: 'AC Repair',
image: 'assets/images/home/repair.jpg',
title: "Emergency AC Repair Services",
description: `When your air conditioner breaks down during Phoenix's scorching heat waves, every minute matters. Thats why our NATE-certified technicians are ready to respond quickly, 365 days a year. Whether it's a refrigerant leak or a compressor failure, were equipped to tackle it all. With fully-stocked trucks carrying essential replacement parts, we resolve 85% of repairs on the first visit, ensuring you get back to comfort faster. `,
features: [
"Same-day service for most residential repairs",
"Advanced diagnostics with digital reporting",
"Repairs on all brands (including vintage systems)",
"90-day labor warranty on all work",
"Emergency service available nights/weekends"
],
benefits: [
"Prevent secondary damage from prolonged system failure",
"Maintain manufacturer warranty compliance",
"Improve energy efficiency by up to 25%",
"Extend equipment lifespan with proper repairs",
"Avoid costly replacement with timely intervention"
],
secondDesc: `Unlike handymen or general contractors,
we specialize exclusively in HVAC systems, ensuring your repair meets manufacturer specifications and local building codes.
Our diagnostic process includes thermal imaging and airflow measurements to identify root causes, not just symptoms.`
},
"ac-installation": {
header: 'AC Installation',
image: 'assets/images/home/repair2.jpg',
title: "Custom Cooling Solutions Engineered for Phoenix Homes",
description: `A proper A/C installation is about more than just swapping out equipment—its about precision. Our 27-point installation process starts with a Manual J load calculation, ensuring we accurately assess your homes cooling needs based on factors like window orientation, insulation quality, and local climate patterns. From there, we design a tailored system that fits both your budget and usage habits, whether youre seeking a high-efficiency inverter system for reliable comfort or a commercial-grade unit for your business.`,
features: [
"Free in-home consultation with load calculation",
"Energy Star® certified equipment options",
"Ductwork design/redesign services",
"10-year parts/labor warranty options",
"Smart thermostat integration included"
],
benefits: [
"Eliminate hot/cold spots with properly sized equipment",
"Reduce energy costs by 30-50% with modern systems",
"Quieter operation through vibration-dampening installs",
"Increased home value with documented professional installation",
"Personalized climate zones available"
],
secondDesc: `Our installations include complete ductwork evaluation,
electrical safety checks, and post-installation performance testing to ensure optimal operation from day one.
We're authorized dealers for top brands like Trane, Carrier, and Mitsubishi, with access to exclusive manufacturer warranties.`
},
"ac-maintenance": {
header: 'AC Maintenance',
image: 'assets/images/home/home5.jpg',
title: "Comprehensive AC Maintenance Plans",
description: `Just like changing your car's oil, regular A/C maintenance is essential to prevent 90% of emergency breakdowns while ensuring peak efficiency. Our Gold and Platinum maintenance plans are specifically designed for Phoenixs harsh climate, with a focus on dust filtration and condenser coil care. Every visit includes thorough checks of refrigerant levels, electrical components, and system calibration to ensure your unit can handle seasonal temperature fluctuations.`,
features: [
"Bi-annual tune-ups (spring/fall recommended)",
"28-point inspection checklist",
"Condensate drain line clearing",
"Airflow measurement & balancing",
"Discounts on repairs for members"
],
benefits: [
"Maintain manufacturer warranty requirements",
"Improve indoor air quality by reducing allergens",
"Extend system lifespan by 5-10 years",
"Lower energy bills through optimized performance",
"First priority during heat wave emergencies"
],
secondDesc: `Snowbird clients receive additional remote monitoring services, including smart thermostat alerts if temperatures exceed safe ranges while you're away.
Our maintenance customers enjoy priority scheduling and discounted repairs, with detailed service reports stored in your online customer portal for warranty documentation.`
},
"air-quality": {
header: 'Air Quality Solutions',
image: 'assets/images/services/service-6.webp',
title: "Breathe Cleaner in Your Phoenix Home",
description: `Phoenix's dust storms, pollen, and dry air present unique challenges for indoor air quality. Our advanced whole-home purification systems go beyond standard filters to tackle particulate matter, chemical vapors, and biological contaminants. We begin with a comprehensive air quality assessment, measuring PM2.5, VOCs, humidity levels, and CO2 concentrations to ensure your homes air is clean and healthy.`,
features: [
"Professional air quality testing available",
"Medical-grade HEPA filtration systems",
"UV-C light installation for pathogen control",
"Whole-home dehumidification options",
"Duct sealing & sanitization services"
],
benefits: [
"Reduce asthma/allergy symptoms by up to 80%",
"Neutralize odors from pets, smoke, or cooking",
"Prevent mold growth through humidity control",
"Protect HVAC equipment from dust accumulation",
"Smart monitoring with real-time air quality data"
],
secondDesc: `Solutions may include hospital-grade HEPA filtration, UV-C germicidal lights, or whole-home
humidifiers depending on your family's specific needs (especially beneficial for allergy sufferers, infants, or elderly residents).
All systems integrate seamlessly with your existing HVAC equipment and include smart monitoring with mobile alerts when air quality changes.`
}
};
// DOM Elements (replace with your actual element IDs/classes)
const elements = {
serviceImg: document.getElementById('service-img'),
title: document.getElementById('service-title'),
crumbTitle: document.getElementById('crumb-title'),
serviceDetail: document.getElementById('service-detail'),
crumb: document.getElementById('crumb'),
description: document.getElementById('service-description'),
features: document.getElementById('service-features'),
benefits: document.getElementById('service-benefits'),
secondDesc: document.getElementById('second-description'),
};
// Function to render service data
function renderService(serviceId) {
const service = services[serviceId];
if (!service) {
console.error('Service not found');
window.location.href = '/services'; // Redirect if invalid service
return;
}
// Update DOM
elements.serviceImg.src = service.image;
elements.title.textContent = service.title;
elements.description.textContent = service.description;
// elements.secondDesc.textContent = service.secondDesc;
elements.crumbTitle.textContent = service.header;
elements.crumb.textContent = service.header;
elements.serviceDetail.textContent = service.header;
// Clear previous lists
elements.features.innerHTML = '';
elements.benefits.innerHTML = '';
// Render features
service.features.forEach(feature => {
const li = document.createElement('li');
li.innerHTML = `
<div class="icon">
<span class="icon-checkmark"></span>
</div>
${feature}
`;
elements.features.appendChild(li);
});
// Render benefits
service.benefits.forEach(benefits => {
const li = document.createElement('li');
li.innerHTML = `
<div class="icon">
<span class="icon-check-mark"></span>
</div>
${benefits}
`;
elements.benefits.appendChild(li);
});
// Update meta tags
document.title = `${service.title} | 520 Indoor Comfort`;
document.querySelector('meta[name="description"]').setAttribute('content',
service.description.substring(0, 160));
}
// Get service ID from URL
function getServiceId() {
const params = new URLSearchParams(window.location.search);
return params.get('service');
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
const serviceId = getServiceId();
if (serviceId) {
renderService(serviceId);
}
});
// For navigation (if needed)
function navigateToService(serviceId) {
window.history.pushState({}, '', `?service=${serviceId}`);
renderService(serviceId);
}
</script>
</body>
</html>