465 lines
21 KiB
HTML
465 lines
21 KiB
HTML
<!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 Inc</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 Inc. HVAC & Plumbing Services" />
|
||
|
||
<!-- 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>1048 S Sirrine Mesa, AZ, United States, Arizona 85210</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>
|
||
|
||
<!--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" id="crumb" style="color: #ccc;"></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">Loading...</p>
|
||
</div>
|
||
|
||
<ul id="service-features">
|
||
<!-- Dynamically populated features here -->
|
||
</ul>
|
||
|
||
<div class="bottom-text" id="second-description">
|
||
<p id="second-description-text"></p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!--End Service Details page2 sec1-->
|
||
|
||
<script>
|
||
// Service Data (Plumbing services)
|
||
const services = {
|
||
"inspection": {
|
||
header: 'Plumbing Inspection',
|
||
image: 'assets/images/services/plumbing-inspection.jpg',
|
||
title: "Comprehensive Plumbing Inspections",
|
||
description: `Our plumbing inspection service ensures your home or business is free from plumbing issues. We carefully inspect your pipes, fixtures, and connections to identify any potential issues before they become major problems.`,
|
||
features: [
|
||
"Thorough inspection of all plumbing systems",
|
||
"Leak detection using state-of-the-art technology",
|
||
"Detailed reports with photos and recommendations",
|
||
"Preventative maintenance suggestions",
|
||
],
|
||
secondDesc: `Our technicians use advanced tools to check for hidden leaks, clogs, and wear on your pipes. We provide you with a detailed report to help you make informed decisions on necessary repairs or upgrades.`
|
||
},
|
||
"repair": {
|
||
header: 'Plumbing Repair',
|
||
image: 'assets/images/services/plumbing-repair.jpg',
|
||
title: "Reliable Plumbing Repairs",
|
||
description: `When plumbing issues arise, our expert team is ready to quickly provide the repair services you need. From leaking faucets to broken pipes, we handle it all with professionalism and efficiency.`,
|
||
features: [
|
||
"24/7 emergency repair services",
|
||
"Leak detection and pipe repair",
|
||
"Water heater repair and installation",
|
||
"Fast response times to minimize damage",
|
||
],
|
||
secondDesc: `Our team is equipped to handle all plumbing repairs with top-quality parts and expert craftsmanship, ensuring your home is safe from plumbing disasters.`
|
||
},
|
||
"water-heaters": {
|
||
header: 'Water Heaters',
|
||
image: 'assets/images/services/water-heater.jpg',
|
||
title: "Water Heater Installation & Repair",
|
||
description: `Ensure your home always has hot water with our water heater installation and repair services. We offer both traditional and tankless water heater options to suit your needs and preferences.`,
|
||
features: [
|
||
"Installation of both tank and tankless water heaters",
|
||
"Water heater repairs and maintenance",
|
||
"Energy-efficient options available",
|
||
"Professional installation with warranty options",
|
||
],
|
||
secondDesc: `We provide expert water heater installation and repair, ensuring that your home enjoys reliable and energy-efficient hot water throughout the year.`
|
||
},
|
||
"tankless-water-heater": {
|
||
header: 'Tankless Water Heater',
|
||
image: 'assets/images/services/tankless-water-heater.jpg',
|
||
title: "Tankless Water Heater Installation & Service",
|
||
description: `Tankless water heaters provide on-demand hot water, which is more energy-efficient than traditional systems. We offer expert installation and repair services for tankless models.`,
|
||
features: [
|
||
"Instant hot water on demand",
|
||
"Energy-efficient and space-saving design",
|
||
"Installation and repair services for tankless models",
|
||
"Professional advice on choosing the right model for your needs",
|
||
],
|
||
secondDesc: `Switching to a tankless water heater is an investment in energy efficiency and convenience. Our expert team will guide you through the process of installation and provide maintenance services for long-lasting performance.`
|
||
},
|
||
"hydro-jetting": {
|
||
header: 'Hydro Jetting',
|
||
image: 'assets/images/services/hydro-jetting.jpg',
|
||
title: "High-Pressure Hydro Jetting Services",
|
||
description: `Our hydro-jetting service uses high-pressure water to clear blockages and buildup in your pipes. This environmentally friendly method ensures a thorough cleaning, preventing future clogs and costly repairs.`,
|
||
features: [
|
||
"Effective at clearing stubborn clogs and blockages",
|
||
"Environmentally friendly, no harsh chemicals used",
|
||
"Restores flow and efficiency to your plumbing",
|
||
"Ideal for residential and commercial properties",
|
||
],
|
||
secondDesc: `Hydro-jetting is a powerful, non-invasive method for cleaning your plumbing system, restoring full flow and efficiency to your drains and pipes without the use of harsh chemicals.`
|
||
},
|
||
"under-slab-plumbing": {
|
||
header: 'Under Slab Plumbing',
|
||
image: 'assets/images/services/under-slab-plumbing.jpg',
|
||
title: "Under Slab Plumbing Repair & Maintenance",
|
||
description: `Our under-slab plumbing services specialize in detecting and repairing plumbing issues beneath your home's foundation. We use advanced tools to minimize disruption while fixing your plumbing problems.`,
|
||
features: [
|
||
"Leak detection under concrete slabs",
|
||
"Advanced tools and techniques to minimize disruption",
|
||
"Pipe repair and replacement under the slab",
|
||
"Full plumbing inspection included",
|
||
],
|
||
secondDesc: `We use advanced leak detection technology to pinpoint and resolve plumbing issues under your slab foundation, ensuring your plumbing system remains in top condition.`
|
||
},
|
||
"slab-leak-detection": {
|
||
header: 'Slab Leak Detection',
|
||
image: 'assets/images/services/slab-leak-detection.jpg',
|
||
title: "Professional Slab Leak Detection Services",
|
||
description: `Detect and repair slab leaks early with our professional slab leak detection services. Our technicians use cutting-edge technology to locate leaks under your slab without unnecessary damage to your property.`,
|
||
features: [
|
||
"State-of-the-art leak detection equipment",
|
||
"Non-invasive, accurate leak location",
|
||
"Fast response to prevent further damage",
|
||
"Expert repair services for slab leaks",
|
||
],
|
||
secondDesc: `Our slab leak detection services provide quick and accurate results, ensuring your home’s plumbing is safe from undetected leaks that can cause significant damage to your foundation.`
|
||
},
|
||
"commercial-plumbing-service": {
|
||
header: 'Commercial Plumbing Service',
|
||
image: 'assets/images/services/commercial-plumbing.jpg',
|
||
title: "Expert Commercial Plumbing Services",
|
||
description: `We offer reliable commercial plumbing services for businesses of all sizes. From installations and repairs to maintenance, we handle it all, ensuring your business operations remain smooth and efficient.`,
|
||
features: [
|
||
"24/7 emergency plumbing services",
|
||
"Commercial plumbing installations and repairs",
|
||
"Regular maintenance programs for businesses",
|
||
"Plumbing solutions tailored to your business’s needs",
|
||
],
|
||
secondDesc: `Our commercial plumbing services are designed to keep your business running smoothly. We provide tailored solutions, ensuring minimal disruption and maximum efficiency.`
|
||
}
|
||
};
|
||
|
||
// DOM Elements
|
||
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'),
|
||
secondDesc: document.getElementById('second-description-text'),
|
||
};
|
||
|
||
// 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.crumbTitle.textContent = service.header;
|
||
elements.crumb.textContent = service.header;
|
||
elements.serviceDetail.textContent = service.header;
|
||
|
||
// Clear previous lists
|
||
elements.features.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);
|
||
});
|
||
|
||
// Second description
|
||
elements.secondDesc.textContent = service.secondDesc;
|
||
|
||
// Update meta tags
|
||
document.title = `${service.title} | Air & Water Mechanical Inc`;
|
||
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);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|