ai_ml_operations/preview_sites
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added first three mockups

Browse Source
This commit is contained in:
westfarn
2026-07-20 05:38:53 -05:00
parent 4dce423c4f
commit f839df7863
864 changed files with 235286 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/elctrical_installation/smart-home.html
Executable
+353
View File
@@ -0,0 +1,353 @@
<!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 smart home system installation. Home automation, smart lighting, security, climate control, and entertainment integration." />
<meta name="keywords" content="smart home, home automation, smart lighting, smart thermostat, home security, voice control, Alexa, Google Home" />
<title>VoltEdge Electrical | Smart Home Systems</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 (Smart Home Systems) -->
<section class="page-header">
<div class="page-header-bg" role="img" aria-label="smart home devices"></div>
<div class="page-header-overlay"></div>
<div class="container">
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-microchip"></i> Intelligent Living</div>
<h1 data-aos="fade-up">Smart Home <span>Systems</span> Integration</h1>
<p data-aos="fade-up" data-aos-delay="80">Control lighting, climate, security, and entertainment from anywhere. Future‑proof your home with seamless automation.</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="https://images.unsplash.com/photo-1558002038-1055907df827?w=700&q=80" alt="smart home control panel" class="img-fluid rounded-3 shadow">
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="section-label">Connect. Control. Comfort.</div>
<h2 class="section-title">Your Home, <span>Intelligently</span> Wired</h2>
<p class="section-desc" style="max-width:100%;">We design and install whole‑home automation that works together flawlessly. Whether you're starting small or building a fully integrated system, our certified technicians ensure every device communicates securely and reliably.</p>
<ul class="about-list mt-4">
<li><i class="fas fa-check-circle"></i> Voice control (Alexa, Google, Siri)</li>
<li><i class="fas fa-check-circle"></i> Centralized & remote access via app</li>
<li><i class="fas fa-check-circle"></i> Scalable – start with one room, expand later</li>
<li><i class="fas fa-check-circle"></i> Professional wiring & network setup</li>
<li><i class="fas fa-check-circle"></i> Compatibility with major ecosystems</li>
</ul>
</div>
</div>
</div>
</section>
<!-- TYPES OF SMART HOME SYSTEMS (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">Smart <span>Solutions</span> For Every Room</h2>
<p class="section-desc mx-auto">From lighting to security – we integrate 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">L</div>
<div class="service-icon"><i class="fas fa-lightbulb"></i></div>
<h5>Smart Lighting</h5>
<p>Dimmers, color‑changing LEDs, automated schedules, and motion sensors. Control from your phone or voice.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">C</div>
<div class="service-icon"><i class="fas fa-thermometer-half"></i></div>
<h5>Climate Control</h5>
<p>Smart thermostats, zoned heating/cooling, and remote temperature management for comfort and savings.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">S</div>
<div class="service-icon"><i class="fas fa-shield-alt"></i></div>
<h5>Security & Cameras</h5>
<p>Smart locks, video doorbells, indoor/outdoor cameras, and alarm systems – all accessible from one app.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">E</div>
<div class="service-icon"><i class="fas fa-tv"></i></div>
<h5>Entertainment</h5>
<p>Whole‑home audio, home theater, multi‑room video distribution, and voice‑controlled media.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">P</div>
<div class="service-icon"><i class="fas fa-charging-station"></i></div>
<h5>EV Charging & Solar</h5>
<p>Smart EV chargers with scheduling, solar monitoring, and battery backup integration for energy independence.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">N</div>
<div class="service-icon"><i class="fas fa-wifi"></i></div>
<h5>Networking & Connectivity</h5>
<p>Whole‑home mesh WiFi, wired Ethernet drops, and network cabinets to keep everything fast and reliable.</p>
</div>
</div>
</div>
</div>
</section>
<!-- SMART HOME 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 build</div>
<h2 class="section-title">Our <span>Smart Home</span> Process</h2>
<p class="section-desc mx-auto">From consultation to seamless integration.</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 goals, budget, and preferred ecosystem (Google, Alexa, Apple, Crestron, etc.).</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</h5><p>We create a system design, specifying devices, wiring needs, and network requirements.</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>Installation</h5><p>We run low‑voltage wiring, install devices, set up controllers, and configure the network.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-mobile-alt"></i></div><h5>Integration & Training</h5><p>We connect everything, program scenes, and show you how to use your new smart home.</p></div>
</div>
</div>
</section>
<!-- WHY CHOOSE US FOR SMART HOME (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">Smart Home <span>Advantages</span></h2>
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Expertise, quality, and future‑proofing.</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>Secure & private</h5><p>We prioritize network security, encrypted connections, and secure device setup.</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 brands</h5><p>We partner with Lutron, Control4, Sonos, Ring, Ecobee, and more.</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>Future‑ready wiring</h5><p>We install structured cabling and conduit to support tomorrow's tech.</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-mobile-alt"></i></div><div><h5>User‑friendly</h5><p>We keep it simple – you'll love using your system every day.</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>Itemized costs for equipment, labor, and programming – 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>Ongoing support</h5><p>We're here to help with updates, troubleshooting, and expansions.</p></div></div></div>
</div>
</div>
</section>
<!-- TESTIMONIAL (smart home 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">Living the <span>smart life</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 designed and installed a complete Control4 system in our new home. Lighting, blinds, music, and security all work together seamlessly. They took the time to understand our lifestyle and the result is both elegant and easy to use. Worth every penny!</p>
<div class="testi-author"><img src="https://randomuser.me/api/portraits/women/33.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Jennifer Walsh</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 make your home smarter? 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>Mon–Fri: 7am–6pm<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>Smart Home Systems</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting Installation</option><option>Maintenance</option><option>Emergency Repair</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 (exact same as index, with service links updated) -->
<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>