Files
preview_sites/templates/elctrical_installation/lighting-installation.html
T
2026-07-20 05:38:53 -05:00

372 lines
25 KiB
HTML
Executable File
Raw 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" />
<meta name="description" content="VoltEdge Electrical professional lighting installation for residential, commercial and landscape projects. LED upgrades, smart lighting, and energy-efficient designs." />
<meta name="keywords" content="lighting installation, LED lighting, indoor lighting, outdoor lighting, landscape lighting, smart lighting" />
<title>VoltEdge Electrical | Lighting Installation</title>
<link rel="icon" href="assets/images/electrical-service.png">
<!-- Bootstrap 5 -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
<!-- AOS -->
<link href="assets/css/aos.css" rel="stylesheet" />
<!-- Google Fonts: Barlow Condensed + DM Sans -->
<link
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap"
rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<!-- PRELOADER (same) -->
<div id="preloader" aria-hidden="true">
<div class="preloader-bolt">
<div class="preloader-rings"></div><div class="preloader-rings"></div>
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
</div>
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
<div class="preloader-text">Powering Up...</div>
</div>
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<i class="fas fa-bolt me-2" style="color:var(--yellow)"></i>Volt<span>Edge</span>
</a>
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu"
aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menu -->
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav mx-auto gap-1">
<li class="nav-item"><a class="nav-link" href="index.html#hero">Home</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
</ul>
<a href="tel:+18005551234" class="nav-link btn-call ms-2">
<i class="fas fa-phone-alt me-2"></i>+1 800 555 1234
</a>
</div>
</div>
</nav>
<!-- PAGE HEADER (Lighting Installation) -->
<section class="page-header">
<div class="page-header-bg" role="img" aria-label="modern lighting fixtures"></div>
<div class="page-header-overlay"></div>
<div class="container">
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-lightbulb"></i> Illuminate Your Space</div>
<h1 data-aos="fade-up">Lighting <span>Installation</span> Services</h1>
<p data-aos="fade-up" data-aos-delay="80">From cozy indoor ambiance to dramatic landscape lighting we design and install energyefficient, smart, and beautiful lighting systems.</p>
</div>
</section>
<!-- OVERVIEW SECTION -->
<section class="section-pad" style="background:var(--white);">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6" data-aos="fade-right">
<img src="assets/images/30622.jpg" alt="electrician installing recessed lighting" class="img-fluid rounded-3 shadow">
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="section-label">Brilliant by design</div>
<h2 class="section-title">Custom <span>Lighting</span> Solutions</h2>
<p class="section-desc" style="max-width:100%;">Great lighting transforms a space. Whether you need subtle accent lighting, bright task illumination, or a complete smart home integration, our certified electricians deliver flawless installation with a focus on energy efficiency and aesthetics.</p>
<ul class="about-list mt-4">
<li><i class="fas fa-check-circle"></i> Indoor & outdoor lighting design</li>
<li><i class="fas fa-check-circle"></i> LED retrofits & energysaving upgrades</li>
<li><i class="fas fa-check-circle"></i> Smart lighting (WiFi / Zigbee / DALI)</li>
<li><i class="fas fa-check-circle"></i> Lowvoltage landscape lighting</li>
<li><i class="fas fa-check-circle"></i> Codecompliant, dimmer & sensor integration</li>
</ul>
</div>
</div>
</div>
</section>
<!-- TYPES OF LIGHTING (service cards) -->
<section class="section-pad" style="background:var(--bg);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">What we offer</div>
<h2 class="section-title">Lighting <span>Services</span> For Every Space</h2>
<p class="section-desc mx-auto">Residential, commercial, and landscape we cover it all.</p>
</div>
<div class="row g-4">
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">I</div>
<div class="service-icon"><i class="fas fa-home"></i></div>
<h5>Indoor Lighting</h5>
<p>Recessed cans, chandeliers, undercabinet, cove lighting, and ceiling fans. Perfect for kitchens, living areas, and bedrooms.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">O</div>
<div class="service-icon"><i class="fas fa-tree"></i></div>
<h5>Outdoor & Landscape</h5>
<p>Path lights, floodlights, deck/patio lighting, and security lighting. Weatherproof and lowvoltage systems.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">C</div>
<div class="service-icon"><i class="fas fa-building"></i></div>
<h5>Commercial Lighting</h5>
<p>Office troffers, retail display lighting, warehouse highbays, and emergency egress lighting. Energy audits included.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">L</div>
<div class="service-icon"><i class="fas fa-lightbulb"></i></div>
<h5>LED Upgrades</h5>
<p>Replace fluorescent or incandescent with highefficiency LED. Rebates available, longer life, lower bills.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">S</div>
<div class="service-icon"><i class="fas fa-microchip"></i></div>
<h5>Smart Lighting</h5>
<p>WiFi / Bluetooth controls, voice assistants (Alexa, Google), automated schedules, and dimming systems.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">A</div>
<div class="service-icon"><i class="fas fa-palette"></i></div>
<h5>Architectural & Accent</h5>
<p>Picture lights, cove lighting, track lighting, and feature wall illumination to highlight art or architecture.</p>
</div>
</div>
</div>
</div>
</section>
<!-- LIGHTING PROCESS (custom process steps) -->
<section class="section-pad" style="background:var(--white);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">How we light</div>
<h2 class="section-title">Our <span>Lighting</span> Process</h2>
<p class="section-desc mx-auto">From concept to glow a seamless workflow.</p>
</div>
<div class="process-wrap" data-aos="fade-up">
<div class="process-step"><div class="process-icon"><span class="process-step-num">1</span><i class="fas fa-clipboard-list"></i></div><h5>Consultation</h5><p>We discuss your vision, take measurements, and assess existing wiring. We'll suggest fixture types and layouts.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-drafting-compass"></i></div><h5>Design & Selection</h5><p>We create a lighting plan, help select fixtures, and provide a detailed quote all within your budget.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-tools"></i></div><h5>Professional Installation</h5><p>Our electricians install all wiring, mounts, and controls with minimal disruption and meticulous attention.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-sun"></i></div><h5>Testing & Walkthrough</h5><p>We test every light, demonstrate controls, and ensure you're delighted with the result.</p></div>
</div>
</div>
</section>
<!-- WHY CHOOSE US FOR LIGHTING (dark cards) -->
<section class="section-pad" style="background:var(--navy);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center" style="color:var(--yellow);">Why VoltEdge</div>
<h2 class="section-title light">Lighting <span>Advantages</span></h2>
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Experience, quality, and innovation in every fixture.</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-shield-alt"></i></div><div><h5>Safety guaranteed</h5><p>All installations meet NEC codes, with proper grounding and防水 for outdoor.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-gem"></i></div><div><h5>Premium fixtures</h5><p>We work with trusted brands like Philips, Halo, and Kichler for lasting quality.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-tachometer-alt"></i></div><div><h5>Energy efficient</h5><p>LED and smart controls reduce your energy bill and carbon footprint.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-paint-brush"></i></div><div><h5>Design expertise</h5><p>Our team understands color temperature, beam angles, and layering for perfect ambiance.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-file-invoice"></i></div><div><h5>Transparent quotes</h5><p>Detailed breakdown of materials and labor no surprises.</p></div></div></div>
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-history"></i></div><div><h5>5year warranty</h5><p>All lighting installations backed by our comprehensive warranty.</p></div></div></div>
</div>
</div>
</section>
<!-- PROJECT GALLERY (lighting specific) -->
<section class="section-pad" style="background:var(--bg);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">Recent work</div>
<h2 class="section-title">Lighting <span>Showcase</span></h2>
</div>
<div class="row g-3">
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1556909114-44e3e70034e2?w=600&q=80" alt="modern kitchen lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Kitchen remodel</h5><span>Recessed & undercabinet</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1540932239986-30128078f3c5?w=600&q=80" alt="landscape lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Garden path lights</h5><span>Lowvoltage LED</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="assets/images/22073.jpg" alt="office lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Commercial office</h5><span>Troffer LED retrofit</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="chandelier installation"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Grand chandelier</h5><span>Luxury residence</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="assets/images/2150652842.jpg" alt="smart lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Smart home automation</h5><span>Caseta / Control4</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="assets/images/2149728872.jpg" alt="outdoor floodlights"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Security lighting</h5><span>Motionsensor LEDs</span></div></div></div>
</div>
</div>
</section>
<!-- TESTIMONIAL (lighting focused) -->
<section class="section-pad" style="background:var(--navy);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center" style="color:var(--yellow);">Client story</div>
<h2 class="section-title light">Brighter with <span>VoltEdge</span></h2>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="testi-card">
<div class="testi-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<div class="testi-quote">"</div>
<p class="testi-text">VoltEdge transformed our dark backyard into a beautiful evening oasis with landscape lighting. They also installed dimmable LEDs throughout our home. The team was professional, the quality superb, and the energy savings noticeable.</p>
<div class="testi-author"><img src="https://randomuser.me/api/portraits/men/52.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">David Chen</div><div class="testi-role">Homeowner, Austin TX</div></div></div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION (same as index) -->
<section id="contact" class="section-pad" style="background:var(--white);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">Get In Touch</div>
<h2 class="section-title">Contact <span>VoltEdge</span></h2>
<p class="section-desc mx-auto">Ready to brighten your space? Our team is standing by.</p>
</div>
<div class="row g-4">
<div class="col-lg-4" data-aos="fade-right">
<div class="contact-info-card">
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>1240 Electric Ave, Suite 300<br>Austin, TX 78701</p></div></div>
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-phone-alt"></i></div><div><h6>Phone</h6><p>+1 800 555 1234<br>+1 800 555 5678 (emergency)</p></div></div>
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-envelope"></i></div><div><h6>Email</h6><p>hello@voltedge.com<br>support@voltedge.com</p></div></div>
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-clock"></i></div><div><h6>Hours</h6><p>MonFri: 7am6pm<br>Emergency: 24/7</p></div></div>
</div>
</div>
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
<div class="contact-form-card">
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
<form id="contactForm" novalidate>
<div class="row g-3">
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
<div class="col-md-6"><label class="form-label" for="service">Service Needed</label><select class="form-select" id="service"><option selected disabled>Select</option><option>Lighting Installation</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Maintenance</option><option>Emergency</option><option>Smart Home</option></select></div>
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
</div>
</form>
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
</div>
</div>
<div class="map-wrap mt-4">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3446.1740254609737!2d-97.74306848485296!3d30.267152381782017!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644b5a0f7f8da63%3A0xd0e2e3e8e3b3b3b3!2sAustin%2C%20TX!5e0!3m2!1sen!2sus!4v1691000000000" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row g-5">
<!-- Brand Column -->
<div class="col-lg-4 col-md-6">
<div class="footer-brand">
<i class="fas fa-bolt me-2" style="color:var(--yellow)"></i>Volt<span>Edge</span>
</div>
<p class="footer-desc">
VoltEdge Electrical delivers professional, certified electrical services for
residential, commercial, and industrial clients. Safety, quality, and trust
are our core values.
</p>
<div class="footer-social">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
<!-- Quick Links -->
<div class="col-lg-2 col-md-6 col-6">
<h5 class="footer-heading">Quick Links</h5>
<ul class="footer-links">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#about">About Us</a></li>
<li><a href="index.html#services">Services</a></li>
<li><a href="index.html#projects">Projects</a></li>
<li><a href="index.html#team">Our Team</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
<!-- Services -->
<div class="col-lg-2 col-md-6 col-6">
<h5 class="footer-heading">Services</h5>
<ul class="footer-links">
<li><a href="electrical-installation.html">Installation</a></li>
<li><a href="wiring-services.html">Wiring</a></li>
<li><a href="lighting-installation.html">Lighting</a></li>
<li><a href="electrical-maintenance.html">Maintenance</a></li>
<li><a href="emergency-repair.html">Emergency</a></li>
<li><a href="smart-home.html">Smart Home</a></li>
</ul>
</div>
<!-- Newsletter -->
<div class="col-lg-4 col-md-6">
<h5 class="footer-heading">Newsletter</h5>
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
Subscribe for electrical safety tips, company news, and exclusive service promotions.
</p>
<div class="newsletter-input-wrap">
<input type="email" class="newsletter-input" placeholder="Your email address"
aria-label="Newsletter email" />
<button class="newsletter-btn" aria-label="Subscribe">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Footer Bottom -->
<div class="container">
<div class="footer-bottom">
<p>© 2026 <a href="#hero">VoltEdge Electrical</a>. All rights reserved.</p>
<p>
<a href="privacy-policy.html">Privacy Policy</a>
<a href="terms-conditions.html">Terms of Service</a>
<a href="faq.html">FAQS</a>
</p>
</div>
</div>
</footer>
<!-- SCROLL TOP -->
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
<!-- SCRIPTS (same) -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/aos.js"></script>
<script>
// preloader
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
document.body.style.overflow='hidden';
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
// sticky nav
const nav=document.getElementById('mainNav');
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
// smooth scroll for local anchors
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
// scroll top
const scrollTopBtn=document.getElementById('scrollTop');
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
// contact form demo
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
</script>
</body>
</html>