added first three mockups

This commit is contained in:
2026-07-20 05:38:53 -05:00
parent 4dce423c4f
commit f839df7863
864 changed files with 235286 additions and 1 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
Binary file not shown.

After

Width:  |  Height:  |  Size: 847 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 534 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 396 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 436 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 649 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 428 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 802 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+146
View File
@@ -0,0 +1,146 @@
// ============================================
// PRELOADER
// ============================================
window.addEventListener('load', () => {
setTimeout(() => {
document.getElementById('preloader').classList.add('hidden');
document.body.style.overflow = 'visible';
}, 2200);
});
document.body.style.overflow = 'hidden';
// ============================================
// AOS INIT
// ============================================
AOS.init({
duration: 700,
once: true,
easing: 'ease-out-cubic',
offset: 60,
});
// ============================================
// STICKY NAVBAR
// ============================================
const nav = document.getElementById('mainNav');
window.addEventListener('scroll', () => {
nav.classList.toggle('scrolled', window.scrollY > 50);
});
// ============================================
// SMOOTH SCROLL FOR NAV LINKS
// ============================================
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' });
// Close mobile menu if open
const bsCollapse = bootstrap.Collapse.getInstance(document.getElementById('navMenu'));
if (bsCollapse) bsCollapse.hide();
}
});
});
// ============================================
// ANIMATED COUNTERS
// ============================================
const counters = document.querySelectorAll('[data-target]');
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const target = parseInt(el.dataset.target);
const suffix = el.querySelector('span') ? el.querySelector('span').textContent : '';
const duration = 1800;
const step = Math.ceil(target / (duration / 16));
let current = 0;
const update = () => {
current = Math.min(current + step, target);
el.innerHTML = current.toLocaleString() + `<span>${suffix}</span>`;
if (current < target) requestAnimationFrame(update);
};
update();
counterObserver.unobserve(el);
}
});
}, { threshold: 0.5 });
counters.forEach(c => counterObserver.observe(c));
// ============================================
// TESTIMONIAL SLIDER
// ============================================
(() => {
const track = document.getElementById('testiTrack');
const slides = track.children;
const totalSlides = slides.length;
const dots = document.querySelectorAll('.slider-dot');
let current = 0;
const go = (idx) => {
current = (idx + totalSlides) % totalSlides;
track.style.transform = `translateX(-${current * 100}%)`;
dots.forEach((d, i) => d.classList.toggle('active', i === current));
};
document.getElementById('testiPrev').addEventListener('click', () => go(current - 1));
document.getElementById('testiNext').addEventListener('click', () => go(current + 1));
dots.forEach(d => d.addEventListener('click', () => go(parseInt(d.dataset.index))));
// Auto-advance
let autoTimer = setInterval(() => go(current + 1), 5000);
track.parentElement.addEventListener('mouseenter', () => clearInterval(autoTimer));
track.parentElement.addEventListener('mouseleave', () => { autoTimer = setInterval(() => go(current + 1), 5000); });
// Touch support
let startX = 0;
track.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, { passive: true });
track.addEventListener('touchend', e => {
const diff = startX - e.changedTouches[0].clientX;
if (Math.abs(diff) > 50) go(diff > 0 ? current + 1 : current - 1);
});
})();
// ============================================
// SCROLL TO TOP BUTTON
// ============================================
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 SUBMISSION (demo)
// ============================================
document.getElementById('contactForm').addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const message = document.getElementById('message').value.trim();
if (!name || !email || !message) {
alert('Please fill in all required fields (Name, Email, Message).');
return;
}
this.style.display = 'none';
document.getElementById('formSuccess').style.display = 'block';
});
// ============================================
// NEWSLETTER (demo)
// ============================================
document.querySelector('.newsletter-btn').addEventListener('click', function () {
const input = this.previousElementSibling;
if (input.value && input.value.includes('@')) {
this.innerHTML = '<i class="fas fa-check"></i>';
this.style.background = '#22c55e';
input.value = '';
input.placeholder = 'Subscribed!';
}
});
+395
View File
@@ -0,0 +1,395 @@
<!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="5 Essential Electrical Safety Checks for Homeowners - A comprehensive guide from VoltEdge Electrical on keeping your home safe." />
<meta name="keywords" content="electrical safety, home safety, electrical tips, voltedge blog" />
<title>VoltEdge Electrical | 5 Essential Electrical Safety Checks</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 -->
<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>
<!-- NAVBAR -->
<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 (smaller) -->
<section class="page-header-sm">
<div class="page-header-bg" role="img" aria-label="electrical safety"></div>
<div class="page-header-overlay"></div>
<div class="container">
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-shield-alt"></i> Safety Tips</div>
<h1 data-aos="fade-up">5 Essential Electrical <span>Safety Checks</span> for Homeowners</h1>
<div class="meta" data-aos="fade-up" data-aos-delay="50">
<span><i class="far fa-calendar-alt"></i> March 12, 2025</span>
<span><i class="far fa-user"></i> Robert Hayes</span>
<span><i class="far fa-clock"></i> 6 min read</span>
</div>
</div>
</section>
<!-- BLOG DETAIL CONTENT -->
<section class="section-pad" style="background:var(--bg);">
<div class="container">
<div class="row g-5">
<!-- Main column -->
<div class="col-lg-8">
<div class="blog-detail" data-aos="fade-up">
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=1200&q=80" alt="Electrician checking panel" class="featured-image">
<p>Electrical safety is often out of sight, out of mind until something goes wrong. Taking a few minutes each season to perform simple checks can prevent fires, shocks, and costly repairs. Here are five essential safety checks every homeowner should know.</p>
<h2>1. Inspect Cords and Outlets</h2>
<p>Walk through your home and look at every power cord and outlet. Frayed cords, cracked plugs, or loose outlets are fire hazards. If an outlet feels warm to the touch, or if you see discoloration, call a professional immediately. Also, never use an extension cord as permanent wiring it's a common code violation and safety risk.</p>
<h2>2. Test Your GFCIs</h2>
<p>Ground Fault Circuit Interrupters (GFCIs) are required in kitchens, bathrooms, garages, and outdoors. They protect against shock. Press the "TEST" button the "RESET" button should pop out. If it doesn't, the outlet needs replacement. Reset by pressing "RESET" firmly. Do this monthly.</p>
<blockquote>
“According to the Electrical Safety Foundation, GFCIs have reduced the risk of electrocution by over 70% since their introduction.”
</blockquote>
<h2>3. Check Your Electrical Panel</h2>
<p>Your breaker panel should never feel hot. Listen for buzzing or crackling sounds those indicate loose connections or failing breakers. If you have an old fuse box or a panel with known safety issues (like Federal Pacific), consider an upgrade. Also, ensure the area around the panel is clear and easily accessible.</p>
<h2>4. Test Smoke and CO Alarms</h2>
<p>Working smoke and carbon monoxide alarms are your last line of defense. Press the test button monthly. Replace batteries at least once a year (or use 10-year sealed units). Alarms themselves should be replaced every 10 years.</p>
<h2>5. Look for Overloaded Circuits</h2>
<p>If lights flicker when you turn on an appliance, or breakers trip frequently, you may have an overloaded circuit. This is especially common in older homes with modern electronics. Consider having a licensed electrician add new circuits or perform a load calculation.</p>
<p>By staying vigilant and addressing small issues early, you protect your home and family. If you're unsure about any of these checks, VoltEdge is always here to help schedule an inspection today.</p>
<!-- Share buttons -->
<div class="share-buttons">
<a href="#" class="share-btn facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="share-btn twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="share-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="share-btn email"><i class="fas fa-envelope"></i></a>
</div>
<!-- Author bio -->
<div class="author-bio">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Robert Hayes">
<div>
<h5>Robert Hayes</h5>
<p>Master Electrician and Safety Specialist at VoltEdge. With over 15 years in the field, Robert is passionate about educating homeowners on electrical safety and code compliance.</p>
</div>
</div>
<!-- Comments section -->
<div class="comments-section">
<h4 class="comments-title">3 Comments</h4>
<div class="comment">
<div class="comment-avatar"><img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sarah M."></div>
<div class="comment-content">
<div class="comment-author">Sarah Mitchell</div>
<div class="comment-date"><i class="far fa-calendar-alt"></i> March 13, 2025 at 9:23 am</div>
<p class="comment-text">Great tips! I just tested my GFCIs and one failed. Called VoltEdge and they replaced it within two hours. Highly recommend!</p>
<a href="#" class="comment-reply"><i class="fas fa-reply me-1"></i>Reply</a>
</div>
</div>
<div class="comment">
<div class="comment-avatar"><img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Mike T."></div>
<div class="comment-content">
<div class="comment-author">Mike Thompson</div>
<div class="comment-date"><i class="far fa-calendar-alt"></i> March 12, 2025 at 4:15 pm</div>
<p class="comment-text">I never thought about the panel buzzing. I'll have to check mine. Thanks for the reminder!</p>
<a href="#" class="comment-reply"><i class="fas fa-reply me-1"></i>Reply</a>
</div>
</div>
<div class="comment">
<div class="comment-avatar"><img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Linda"></div>
<div class="comment-content">
<div class="comment-author">Linda Hayes</div>
<div class="comment-date"><i class="far fa-calendar-alt"></i> March 12, 2025 at 10:05 am</div>
<p class="comment-text">Great article, Robert! I'll be sharing this with my clients.</p>
<a href="#" class="comment-reply"><i class="fas fa-reply me-1"></i>Reply</a>
</div>
</div>
<!-- Reply form -->
<div class="reply-form">
<h5>Leave a Comment</h5>
<form>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Name *</label>
<input type="text" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">Email *</label>
<input type="email" class="form-control" required>
</div>
<div class="col-12">
<label class="form-label">Comment *</label>
<textarea class="form-control" rows="5" required></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn-submit" style="width:auto; padding:12px 32px;">Post Comment</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="col-lg-4">
<!-- Categories -->
<div class="sidebar-card" data-aos="fade-left">
<h5 class="sidebar-title">Categories</h5>
<ul class="categories-list">
<li><a href="#">Safety Tips (8)</a></li>
<li><a href="#">Smart Home (12)</a></li>
<li><a href="#">Commercial (6)</a></li>
<li><a href="#">Residential (15)</a></li>
<li><a href="#">Lighting (9)</a></li>
<li><a href="#">EV Charging (4)</a></li>
</ul>
</div>
<!-- Recent Posts -->
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="50">
<h5 class="sidebar-title">Recent Posts</h5>
<div class="recent-post">
<img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=100&q=80" alt="post" class="recent-post-img">
<div class="recent-post-content">
<h6><a href="#">The Ultimate Guide to Smart Lighting Retrofit</a></h6>
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Mar 5, 2025</div>
</div>
</div>
<div class="recent-post">
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=100&q=80" alt="post" class="recent-post-img">
<div class="recent-post-content">
<h6><a href="#">When to Rewire Your Office Building</a></h6>
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 28, 2025</div>
</div>
</div>
<div class="recent-post">
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=100&q=80" alt="post" class="recent-post-img">
<div class="recent-post-content">
<h6><a href="#">Do You Need a 200-Amp Service Upgrade?</a></h6>
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 20, 2025</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="100">
<h5 class="sidebar-title">Newsletter</h5>
<p style="font-size:0.9rem; color:var(--gray); margin-bottom:15px;">Get the latest articles and safety tips.</p>
<div class="newsletter-input-wrap">
<input type="email" class="newsletter-input" placeholder="Your email address">
<button class="newsletter-btn"><i class="fas fa-paper-plane"></i></button>
</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">Have questions about electrical safety? Our team is ready to help.</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">I'm interested in</label><select class="form-select" id="service"><option selected disabled>Select</option><option>General Inquiry</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting</option><option>Maintenance</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 -->
<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 -->
<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';});
// newsletter button demo
document.querySelectorAll('.newsletter-btn').forEach(btn => {
btn.addEventListener('click', function() {
const input = this.previousElementSibling;
if (input.value && input.value.includes('@')) {
this.innerHTML = '<i class="fas fa-check"></i>';
this.style.background = '#22c55e';
input.value = '';
input.placeholder = 'Subscribed!';
}
});
});
</script>
</body>
</html>
+433
View File
@@ -0,0 +1,433 @@
<!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 Blog expert insights, electrical safety tips, company news, and industry updates." />
<meta name="keywords" content="electrical blog, electrician tips, home safety, electrical news, voltedge" />
<title>VoltEdge Electrical | Blog</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 (Blog) -->
<section class="page-header">
<div class="page-header-bg" role="img" aria-label="blog background"></div>
<div class="page-header-overlay"></div>
<div class="container">
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-pen-fancy"></i> Insights & Updates</div>
<h1 data-aos="fade-up">VoltEdge <span>Blog</span></h1>
<p data-aos="fade-up" data-aos-delay="80">Expert advice, safety tips, company news, and industry trends from our team of certified electricians.</p>
</div>
</section>
<!-- BLOG CONTENT -->
<section class="section-pad" style="background:var(--bg);">
<div class="container">
<div class="row g-5">
<!-- Main posts column -->
<div class="col-lg-8">
<div class="row g-4">
<!-- Blog post 1 -->
<div class="col-md-6" data-aos="fade-up">
<div class="blog-card">
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=600&q=80" alt="Electrician working" class="blog-img">
<div class="blog-content">
<span class="blog-category">Safety Tips</span>
<h5 class="blog-title">5 Essential Electrical Safety Checks for Homeowners</h5>
<p class="blog-excerpt">Learn how to identify common hazards like overloaded outlets, flickering lights, and warm switches before they become serious problems.</p>
<div class="blog-meta">
<div class="blog-author">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Robert Hayes">
<span>Robert Hayes</span>
</div>
<div class="blog-date">
<i class="far fa-calendar-alt"></i> Mar 12, 2025
</div>
</div>
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- Blog post 2 -->
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
<div class="blog-card">
<img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=600&q=80" alt="Smart home" class="blog-img">
<div class="blog-content">
<span class="blog-category">Smart Home</span>
<h5 class="blog-title">The Ultimate Guide to Smart Lighting Retrofit</h5>
<p class="blog-excerpt">Everything you need to know about upgrading your existing fixtures to smart, energy-efficient LED lighting with voice control.</p>
<div class="blog-meta">
<div class="blog-author">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Linda Torres">
<span>Linda Torres</span>
</div>
<div class="blog-date">
<i class="far fa-calendar-alt"></i> Mar 5, 2025
</div>
</div>
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- Blog post 3 -->
<div class="col-md-6" data-aos="fade-up">
<div class="blog-card">
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="Office rewiring" class="blog-img">
<div class="blog-content">
<span class="blog-category">Commercial</span>
<h5 class="blog-title">When to Rewire Your Office Building</h5>
<p class="blog-excerpt">Signs your commercial space needs rewiring, how to plan for minimal downtime, and the benefits of modern electrical systems.</p>
<div class="blog-meta">
<div class="blog-author">
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Marcus Webb">
<span>Marcus Webb</span>
</div>
<div class="blog-date">
<i class="far fa-calendar-alt"></i> Feb 28, 2025
</div>
</div>
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- Blog post 4 -->
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
<div class="blog-card">
<img src="assets/images/8829.jpg" alt="Panel upgrade" class="blog-img">
<div class="blog-content">
<span class="blog-category">Electrical Panel</span>
<h5 class="blog-title">Do You Need a 200-Amp Service Upgrade?</h5>
<p class="blog-excerpt">With EV chargers and modern appliances, many homes need more capacity. We explain the signs and benefits of upgrading.</p>
<div class="blog-meta">
<div class="blog-author">
<img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Priya Nair">
<span>Priya Nair</span>
</div>
<div class="blog-date">
<i class="far fa-calendar-alt"></i> Feb 20, 2025
</div>
</div>
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- Blog post 5 -->
<div class="col-md-6" data-aos="fade-up">
<div class="blog-card">
<img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?w=600&q=80" alt="EV charger" class="blog-img">
<div class="blog-content">
<span class="blog-category">EV Charging</span>
<h5 class="blog-title">Installing a Level 2 EV Charger at Home: What to Expect</h5>
<p class="blog-excerpt">From permits to panel capacity, we walk you through the entire process of adding a fast home charger.</p>
<div class="blog-meta">
<div class="blog-author">
<img src="https://randomuser.me/api/portraits/men/42.jpg" alt="David Chen">
<span>David Chen</span>
</div>
<div class="blog-date">
<i class="far fa-calendar-alt"></i> Feb 12, 2025
</div>
</div>
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- Blog post 6 -->
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
<div class="blog-card">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="Outdoor lighting" class="blog-img">
<div class="blog-content">
<span class="blog-category">Landscape</span>
<h5 class="blog-title">Transform Your Backyard with Low-Voltage Landscape Lighting</h5>
<p class="blog-excerpt">Design ideas, installation tips, and the safety benefits of professional outdoor lighting.</p>
<div class="blog-meta">
<div class="blog-author">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Sarah M.">
<span>Sarah Martinez</span>
</div>
<div class="blog-date">
<i class="far fa-calendar-alt"></i> Feb 5, 2025
</div>
</div>
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="pagination" data-aos="fade-up">
<a href="#" class="page-link active">1</a>
<a href="#" class="page-link">2</a>
<a href="#" class="page-link">3</a>
<a href="#" class="page-link"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
<!-- Sidebar -->
<div class="col-lg-4">
<!-- Categories -->
<div class="sidebar-card" data-aos="fade-left">
<h5 class="sidebar-title">Categories</h5>
<ul class="categories-list">
<li><a href="#">Safety Tips (8)</a></li>
<li><a href="#">Smart Home (12)</a></li>
<li><a href="#">Commercial (6)</a></li>
<li><a href="#">Residential (15)</a></li>
<li><a href="#">Lighting (9)</a></li>
<li><a href="#">EV Charging (4)</a></li>
<li><a href="#">Company News (5)</a></li>
</ul>
</div>
<!-- Recent Posts -->
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="50">
<h5 class="sidebar-title">Recent Posts</h5>
<div class="recent-post">
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=100&q=80" alt="post" class="recent-post-img">
<div class="recent-post-content">
<h6><a href="#">5 Essential Electrical Safety Checks for Homeowners</a></h6>
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Mar 12, 2025</div>
</div>
</div>
<div class="recent-post">
<img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=100&q=80" alt="post" class="recent-post-img">
<div class="recent-post-content">
<h6><a href="#">The Ultimate Guide to Smart Lighting Retrofit</a></h6>
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Mar 5, 2025</div>
</div>
</div>
<div class="recent-post">
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=100&q=80" alt="post" class="recent-post-img">
<div class="recent-post-content">
<h6><a href="#">When to Rewire Your Office Building</a></h6>
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 28, 2025</div>
</div>
</div>
<div class="recent-post">
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=100&q=80" alt="post" class="recent-post-img">
<div class="recent-post-content">
<h6><a href="#">Do You Need a 200-Amp Service Upgrade?</a></h6>
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 20, 2025</div>
</div>
</div>
</div>
<!-- Newsletter Signup (similar to footer) -->
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="100">
<h5 class="sidebar-title">Newsletter</h5>
<p style="font-size:0.9rem; color:var(--gray); margin-bottom:15px;">Subscribe for electrical tips and company news.</p>
<div class="newsletter-input-wrap">
<input type="email" class="newsletter-input" placeholder="Your email address" aria-label="Blog newsletter">
<button class="newsletter-btn" aria-label="Subscribe"><i class="fas fa-paper-plane"></i></button>
</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">Have a question or need professional advice? Our team is ready to help.</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">I'm interested in</label><select class="form-select" id="service"><option selected disabled>Select</option><option>General Inquiry</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting</option><option>Maintenance</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';});
// newsletter button demo
document.querySelectorAll('.newsletter-btn').forEach(btn => {
btn.addEventListener('click', function() {
const input = this.previousElementSibling;
if (input.value && input.value.includes('@')) {
this.innerHTML = '<i class="fas fa-check"></i>';
this.style.background = '#22c55e';
input.value = '';
input.placeholder = 'Subscribed!';
}
});
});
</script>
</body>
</html>
+233
View File
@@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VoltEdge Electrical HTML Template Documentation</title>
<style>
body{
font-family:Arial, sans-serif;
background:#eef3f6;
padding:40px;
line-height:1.7;
color:#333;
}
.container{
max-width:1000px;
margin:auto;
background:#fff;
padding:35px;
border-radius:12px;
box-shadow:0 0 20px rgba(0,0,0,0.08);
}
h1,h2,h3{
color:#1f3a5f;
}
pre{
background:#1a1a1a;
color:#4ae3ff;
padding:15px;
border-radius:6px;
overflow-x:auto;
}
a{
color:#1f3a5f;
font-weight:bold;
}
ul li{
margin:6px 0;
}
hr{
margin:30px 0;
}
table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}
table th,table td{
border:1px solid #ddd;
padding:10px;
text-align:left;
}
table th{
background:#f3f6f9;
}
</style>
</head>
<body>
<div class="container">
<h1>VoltEdge Electrical Services HTML Template Documentation</h1>
<p>
Thank you for purchasing <strong>VoltEdge Electrical Services & Electrician HTML Template</strong>.
This documentation will help you install, customize, and deploy the template easily.
</p>
<hr>
<h2>📁 1. Folder Structure</h2>
<pre><code>
VoltEdge/
│── index.html
│── blog.html
│── blog-detail.html
│── faq.html
│── privacy-policy.html
│── terms-conditions.html
├── assets/
│ ├── css/
│ │ ├── style.css
│ │ ├── aos.css
│ │ └── bootstrap.min.css
│ │
│ ├── js/
│ │ ├── script.js
│ │ ├── aos.js
│ │ └── bootstrap.bundle.min.js
│ │
│ ├── images/
│ └── fonts/
</code></pre>
<hr>
<h2>🎨 2. Editing Theme Colors</h2>
<p>
Theme colors are defined using CSS variables inside:
</p>
<pre><code>assets/css/style.css</code></pre>
Example:
<pre><code>
:root{
--yellow:#f4b400;
--navy:#0d1b2a;
--bg:#f4f7fa;
--white:#ffffff;
}
</code></pre>
<p>
Change the value of <strong>--yellow</strong> to update the primary theme color globally.
</p>
<hr>
<h2>🖼 3. Changing the Logo</h2>
Open <strong>index.html</strong> and find:
<pre><code>
&lt;a class="navbar-brand" href="#"&gt;
&lt;i class="fas fa-bolt"&gt;&lt;/i&gt;VoltEdge
&lt;/a&gt;
</code></pre>
To use an image logo:
<pre><code>
&lt;a class="navbar-brand" href="#"&gt;
&lt;img src="assets/images/logo.png" height="50" alt="Logo"&gt;
&lt;/a&gt;
</code></pre>
<hr>
<h2>🏠 4. Sections Overview</h2>
<table>
<tr>
<th>Section</th>
<th>Location in HTML</th>
<th>Editable Content</th>
</tr>
<tr>
<td>Hero Section</td>
<td>#hero</td>
<td>Title, subtitle, buttons</td>
</tr>
<tr>
<td>About Section</td>
<td>#about</td>
<td>Text and images</td>
</tr>
<tr>
<td>Services</td>
<td>#services</td>
<td>Service cards, icons, descriptions</td>
</tr>
<tr>
<td>Projects / Portfolio</td>
<td>#projects</td>
<td>Project images and titles</td>
</tr>
<tr>
<td>Working Process</td>
<td>#process</td>
<td>Steps and descriptions</td>
</tr>
<tr>
<td>Testimonials</td>
<td>#testimonials</td>
<td>Customer feedback</td>
</tr>
<tr>
<td>Team Members</td>
<td>#team</td>
<td>Images, names, roles</td>
</tr>
<tr>
<td>Contact Form</td>
<td>#contact</td>
<td>Form fields and contact info</td>
</tr>
<tr>
<td>Footer</td>
<td>Footer element</td>
<td>Links, social icons</td>
</tr>
</table>
<hr>
<h2>🖼 5. Changing Images</h2>
Replace images inside:
<pre><code>
assets/images/
</code></pre>
Example:
@@ -0,0 +1,345 @@
<!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 electrical installation for residential, commercial and industrial projects. Certified electricians, safe & reliable." />
<meta name="keywords" content="electrical installation, wiring, panel upgrade, commercial electrician, residential electrician" />
<title>VoltEdge Electrical | Electrical 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 (Electrical Installation) -->
<section class="page-header">
<div class="page-header-bg" role="img" aria-label="electrician installing panel"></div>
<div class="page-header-overlay"></div>
<div class="container">
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-bolt"></i> Expert Installation</div>
<h1 data-aos="fade-up">Electrical <span>Installation</span> Services</h1>
<p data-aos="fade-up" data-aos-delay="80">Safe, code-compliant installations for residential, commercial, and industrial projects. From panels to complete rewiring.</p>
</div>
</section>
<!-- OVERVIEW / INTRODUCTION -->
<section class="section-pad" id="installation-overview" 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/2150652842.jpg" alt="Electrician at panel" class="img-fluid rounded-3 shadow">
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="section-label">Power with precision</div>
<h2 class="section-title">Complete <span>Electrical</span> Setup</h2>
<p class="section-desc" style="max-width:100%;">Whether you're building new, renovating, or need a heavyduty upgrade, our certified electricians deliver turnkey electrical installation. We handle everything from service panels and subpanels to branch circuits, outlets, and specialized equipment.</p>
<ul class="about-list mt-4">
<li><i class="fas fa-check-circle"></i> 100% compliant with National Electrical Code</li>
<li><i class="fas fa-check-circle"></i> Premium materials and branded components</li>
<li><i class="fas fa-check-circle"></i> Load calculation & energy efficiency advice</li>
<li><i class="fas fa-check-circle"></i> Permits & inspections included</li>
</ul>
</div>
</div>
</div>
</section>
<!-- TYPES OF INSTALLATION (service cards) -->
<section class="section-pad" style="background:var(--bg);" id="installation-types">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">Installation types</div>
<h2 class="section-title">We cover every <span>sector</span></h2>
<p class="section-desc mx-auto">Tailored electrical systems for homes, businesses, and industrial facilities.</p>
</div>
<div class="row g-4">
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">R</div>
<div class="service-icon"><i class="fas fa-home"></i></div>
<h5>Residential</h5>
<p>New home wiring, panel upgrades, kitchen/ bath circuits, home automation roughins, and backup generator hookups.</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-building"></i></div>
<h5>Commercial</h5>
<p>Office wiring, lighting control, data center power, retail store fitouts, and energyefficient LED installations.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">I</div>
<div class="service-icon"><i class="fas fa-industry"></i></div>
<h5>Industrial</h5>
<p>Highvoltage equipment, motor controls, panel boards, conduit bending, and machinery wiring for factories.</p>
</div>
</div>
</div>
</div>
</section>
<!-- INSTALLATION PROCESS (same process style) -->
<section class="section-pad" style="background:var(--white);" id="installation-process">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">Our process</div>
<h2 class="section-title">How we <span>install</span></h2>
<p class="section-desc mx-auto">A proven workflow from consultation to final testing.</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>Site survey</h5><p>We assess your needs, measure loads, and design a system that meets current and future demands.</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>Permit & plan</h5><p>We handle permits, create detailed blueprints, and select materials with your approval.</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>Certified electricians execute the work with minimal disruption, following safety protocols.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-clipboard-check"></i></div><h5>Testing & signoff</h5><p>Every circuit is tested, inspected, and we walk you through the final system.</p></div>
</div>
</div>
</section>
<!-- WHY CHOOSE US FOR INSTALLATION (dark cards) -->
<section class="section-pad" style="background:var(--navy);" id="installation-benefits">
<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">Installation <span>advantages</span></h2>
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Quality, safety, and longterm reliability.</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>Arcfault protection, proper grounding, and full code compliance.</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 materials</h5><p>We use only toptier brands like Siemens, Leviton, and Eaton.</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-bolt"></i></div><div><h5>Energy efficient</h5><p>Load calculations and smart design to reduce waste and save money.</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-clock"></i></div><div><h5>Ontime completion</h5><p>We respect your schedule and deliver projects on deadline.</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 breakdowns, no hidden costs, fixedprice options.</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 installation work comes with our comprehensive warranty.</p></div></div></div>
</div>
</div>
</section>
<!-- PROJECT GALLERY (installation specific) -->
<section class="section-pad" style="background:var(--bg);" id="installation-gallery">
<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">Installation <span>projects</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-1581092795360-fd1ca04f0952?w=600&q=80" alt="panel installation"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>New 400A panel</h5><span>Commercial building</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-1497366216548-37526070297c?w=600&q=80" alt="office wiring"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Office floor rewiring</h5><span>Data & power</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" alt="home automation"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Smart home roughin</h5><span>Residential</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="industrial"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Factory machine feed</h5><span>Industrial</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-1516156008625-3a9d6067fab5?w=600&q=80" alt="solar"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Solar + battery backup</h5><span>Renewable</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Architectural lighting</h5><span>Luxury residence</span></div></div></div>
</div>
</div>
</section>
<!-- TESTIMONIALS (installation focused) -->
<section class="section-pad" style="background:var(--navy);" id="installation-testimonials">
<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 stories</div>
<h2 class="section-title light">Trusted for <span>installations</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 handled the complete electrical installation for our new warehouse. From 800A service to lighting and machinery hookups — flawless execution and passed inspection with zero corrections.</p>
<div class="testi-author"><img src="https://randomuser.me/api/portraits/men/42.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Michael Chen</div><div class="testi-role">Operations Manager, Pinnacle Logistics</div></div></div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION (identical to 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 start your installation? 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>Electrical Installation</option><option>Wiring</option><option>Lighting</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>
<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 (#contact only)
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>
@@ -0,0 +1,371 @@
<!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 electrical maintenance services for residential, commercial and industrial clients. Preventive maintenance, inspections, and safety checks." />
<meta name="keywords" content="electrical maintenance, preventive maintenance, electrical inspection, panel maintenance, safety check, emergency repair" />
<title>VoltEdge Electrical | Electrical Maintenance</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 (Electrical Maintenance) -->
<section class="page-header">
<div class="page-header-bg" role="img" aria-label="electrician inspecting panel"></div>
<div class="page-header-overlay"></div>
<div class="container">
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-tools"></i> Keep Your System Safe</div>
<h1 data-aos="fade-up">Electrical <span>Maintenance</span> Services</h1>
<p data-aos="fade-up" data-aos-delay="80">Preventive maintenance, inspections, and safety checks to ensure your electrical system runs reliably and efficiently yearround.</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/2149728872.jpg" alt="electrician checking electrical panel" class="img-fluid rounded-3 shadow">
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="section-label">Prevent. Protect. Perform.</div>
<h2 class="section-title">Proactive <span>Maintenance</span> Matters</h2>
<p class="section-desc" style="max-width:100%;">Regular electrical maintenance prevents unexpected failures, reduces energy waste, and extends the life of your equipment. Our certified technicians perform thorough inspections, testing, and tuneups for homes and businesses.</p>
<ul class="about-list mt-4">
<li><i class="fas fa-check-circle"></i> Annual / semiannual inspections</li>
<li><i class="fas fa-check-circle"></i> Thermal imaging of panels & connections</li>
<li><i class="fas fa-check-circle"></i> Emergency lighting & backup system testing</li>
<li><i class="fas fa-check-circle"></i> Surge protection & grounding checks</li>
<li><i class="fas fa-check-circle"></i> Detailed maintenance reports</li>
</ul>
</div>
</div>
</div>
</section>
<!-- TYPES OF MAINTENANCE (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">Maintenance <span>Programs</span> For Every Need</h2>
<p class="section-desc mx-auto">Residential, commercial, and industrial tailored to your equipment and usage.</p>
</div>
<div class="row g-4">
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">R</div>
<div class="service-icon"><i class="fas fa-home"></i></div>
<h5>Residential Maintenance</h5>
<p>Panel inspection, outlet testing, GFCI checks, and surge protector verification. Ideal for home safety and insurance compliance.</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-building"></i></div>
<h5>Commercial Maintenance</h5>
<p>Preventive plans for offices, retail, and warehouses. Includes lighting, panels, emergency systems, and energy audits.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">I</div>
<div class="service-icon"><i class="fas fa-industry"></i></div>
<h5>Industrial Maintenance</h5>
<p>Motor controls, VFD checks, highvoltage switchgear, thermal imaging, and predictive maintenance for factories.</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-bolt"></i></div>
<h5>Emergency System Testing</h5>
<p>Generator transfer switches, UPS systems, battery backups, and emergency lighting load tested and certified.</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-shield-alt"></i></div>
<h5>Safety & Code Inspections</h5>
<p>Identify potential hazards, outdated wiring, and code violations. We provide a clear report and fix recommendations.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">P</div>
<div class="service-icon"><i class="fas fa-calendar-check"></i></div>
<h5>Preventive Maintenance Plans</h5>
<p>Scheduled visits (quarterly, biannual) with priority service, discounts, and detailed system history.</p>
</div>
</div>
</div>
</div>
</section>
<!-- MAINTENANCE 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 maintain</div>
<h2 class="section-title">Our <span>Maintenance</span> Process</h2>
<p class="section-desc mx-auto">Thorough, documented, and hasslefree.</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>Inspection</h5><p>We review your system history, inspect panels, connections, and safety devices. Thermal scan if needed.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-chart-line"></i></div><h5>Testing</h5><p>Load testing, voltage readings, breaker function, and GFCI/AFCI checks. Identify any weak points.</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>Adjustments & Repairs</h5><p>Tighten connections, replace worn parts, and fix minor issues on the spot. For major repairs we provide a quote.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-file-alt"></i></div><h5>Report & Recommendations</h5><p>You receive a detailed report with findings, photos, and suggested next steps for optimal performance.</p></div>
</div>
</div>
</section>
<!-- WHY CHOOSE US FOR MAINTENANCE (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">Maintenance <span>Advantages</span></h2>
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Experience, reliability, and peace of mind.</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 first</h5><p>We spot hazards before they cause outages or fires. Your safety is our priority.</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>Certified technicians</h5><p>All maintenance performed by licensed electricians with ongoing training.</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>Extend equipment life</h5><p>Regular care prevents premature failure of panels, breakers, and motors.</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-file-invoice"></i></div><div><h5>Transparent reporting</h5><p>Clear, detailed reports with photos no hidden surprises.</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-clock"></i></div><div><h5>Flexible scheduling</h5><p>We work around your hours, including afterhours for commercial clients.</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>Warranty on work</h5><p>All maintenance and repairs backed by our 1year warranty.</p></div></div></div>
</div>
</div>
</section>
<!-- PROJECT GALLERY (maintenance 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">Maintenance <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-1581092795360-fd1ca04f0952?w=600&q=80" alt="panel inspection"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Panel thermal scan</h5><span>Commercial building</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-1497366216548-37526070297c?w=600&q=80" alt="emergency light test"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Emergency lighting test</h5><span>Office complex</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" alt="breaker replacement"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Faulty breaker replacement</h5><span>Residential</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="motor maintenance"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Motor control inspection</h5><span>Industrial</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-1516156008625-3a9d6067fab5?w=600&q=80" alt="generator maintenance"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Generator load test</h5><span>Data center</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="outlet testing"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>GFCI / outlet check</h5><span>Multifamily housing</span></div></div></div>
</div>
</div>
</section>
<!-- TESTIMONIAL (maintenance 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">Peace of mind 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">We've used VoltEdge for annual maintenance at our retail store for three years. They always find small issues before they become big problems like a loose neutral that could have caused a fire. Their reports are thorough and the team is professional.</p>
<div class="testi-author"><img src="https://randomuser.me/api/portraits/women/63.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Laura Benson</div><div class="testi-role">Store Owner, 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 schedule maintenance? 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>Electrical Maintenance</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting Installation</option><option>Emergency Repair</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>
+372
View File
@@ -0,0 +1,372 @@
<!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 24/7 emergency electrical repair services. Fast response for power outages, sparking outlets, breaker trips, and urgent electrical faults." />
<meta name="keywords" content="emergency electrician, 24/7 electrician, electrical repair, power outage, sparking outlet, breaker trip, emergency electrical service" />
<title>VoltEdge Electrical | Emergency Repair</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 (Emergency Repair) -->
<section class="page-header">
<div class="page-header-bg" role="img" aria-label="electrician working urgently"></div>
<div class="page-header-overlay"></div>
<div class="container">
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-exclamation-triangle"></i> 24/7 Emergency Service</div>
<h1 data-aos="fade-up">Emergency <span>Repair</span> Services</h1>
<p data-aos="fade-up" data-aos-delay="80">Fast, reliable response when you need it most. Our certified electricians are on call 24/7 to handle urgent electrical issues safely.</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-1621905252507-b35492cc74b4?w=700&q=80" alt="electrician troubleshooting" class="img-fluid rounded-3 shadow">
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="section-label">When every minute counts</div>
<h2 class="section-title">Rapid <span>Response</span> & Lasting Fixes</h2>
<p class="section-desc" style="max-width:100%;">Electrical emergencies can happen anytime a sudden power outage, sparking outlet, or tripped breaker that won't reset. Our team is ready 24 hours a day, 365 days a year, to respond quickly and resolve the problem with safety as the top priority.</p>
<ul class="about-list mt-4">
<li><i class="fas fa-check-circle"></i> 24/7 live answering no voicemail loops</li>
<li><i class="fas fa-check-circle"></i> Average arrival time: 4560 minutes</li>
<li><i class="fas fa-check-circle"></i> Fully stocked trucks for most repairs</li>
<li><i class="fas fa-check-circle"></i> Upfront pricing, no overtime surprises</li>
<li><i class="fas fa-check-circle"></i> Licensed & insured for your protection</li>
</ul>
</div>
</div>
</div>
</section>
<!-- TYPES OF EMERGENCY REPAIRS (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">Common emergencies</div>
<h2 class="section-title">We Fix <span>Urgent</span> Electrical Issues</h2>
<p class="section-desc mx-auto">From flickering lights to complete blackouts we handle 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">P</div>
<div class="service-icon"><i class="fas fa-bolt"></i></div>
<h5>Power Outages</h5>
<p>Partial or wholehouse power loss. We diagnose the cause (utility, panel, or internal fault) and restore power quickly.</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-fire"></i></div>
<h5>Sparking / Burning Smell</h5>
<p>Immediate hazard. We locate the source, replace damaged wiring, and ensure no fire risk remains.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">T</div>
<div class="service-icon"><i class="fas fa-exchange-alt"></i></div>
<h5>Tripping Breakers / Blown Fuses</h5>
<p>Frequent trips indicate overload or short circuit. We identify and fix the root cause, not just reset.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">S</div>
<div class="service-icon"><i class="fas fa-plug"></i></div>
<h5>Dead Outlets / Switches</h5>
<p>Nonworking outlets or switches can signal loose connections or wiring damage. We restore function safely.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">L</div>
<div class="service-icon"><i class="fas fa-bolt"></i></div>
<h5>Lightning / Surge Damage</h5>
<p>After a strike or surge, we inspect all systems, replace damaged components, and install surge protection.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">W</div>
<div class="service-icon"><i class="fas fa-water"></i></div>
<h5>Water / Flood Damage</h5>
<p>Flooded basements or leaks near electrical we safely isolate and repair affected circuits.</p>
</div>
</div>
</div>
</div>
</section>
<!-- EMERGENCY 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 respond</div>
<h2 class="section-title">Our <span>Emergency</span> Process</h2>
<p class="section-desc mx-auto">From your call to final fix fast and transparent.</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-phone-alt"></i></div><h5>Call & Assess</h5><p>Call our 24/7 line. We'll ask key questions to understand the urgency and dispatch the nearest technician.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-truck"></i></div><h5>Rapid Dispatch</h5><p>Our oncall electrician heads to your location with a fully stocked service vehicle.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-search"></i></div><h5>Diagnose & Quote</h5><p>We identify the issue, explain the cause, and provide a clear price before starting any work.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-tools"></i></div><h5>Repair & Test</h5><p>We perform the repair, test thoroughly, and ensure everything is safe and operational.</p></div>
</div>
</div>
</section>
<!-- WHY CHOOSE US FOR EMERGENCY (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">Emergency <span>Advantages</span></h2>
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">When you need help fast, we deliver.</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-clock"></i></div><div><h5>24/7 Availability</h5><p>We never sleep. Holidays, weekends, midnight we're always ready.</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-tachometer-alt"></i></div><div><h5>Fast arrival</h5><p>Average 45minute response time. We know you can't wait.</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-shield-alt"></i></div><div><h5>Safety certified</h5><p>All emergency techs are licensed, backgroundchecked, and follow strict safety protocols.</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-dollar-sign"></i></div><div><h5>Upfront pricing</h5><p>No hidden fees, no overtime markups. We quote before starting.</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-tools"></i></div><div><h5>Fully stocked</h5><p>Our vans carry common parts to fix most emergencies in one visit.</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>Work guaranteed</h5><p>All emergency repairs backed by our 1year warranty.</p></div></div></div>
</div>
</div>
</section>
<!-- PROJECT GALLERY (emergency 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 emergencies</div>
<h2 class="section-title">Repairs <span>We've Handled</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-1581092795360-fd1ca04f0952?w=600&q=80" alt="breaker panel repair"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Tripped main breaker</h5><span>Residential</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-1497366216548-37526070297c?w=600&q=80" alt="sparking outlet"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Burnt outlet replacement</h5><span>Commercial</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/30622.jpg" alt="power outage"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Underground line fault</h5><span>Industrial</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="flooded panel"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Flood damage repair</h5><span>Basement</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-1516156008625-3a9d6067fab5?w=600&q=80" alt="lightning damage"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Surge damage repair</h5><span>Home office</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="emergency call"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>No power restaurant</h5><span>Commercial</span></div></div></div>
</div>
</div>
</section>
<!-- TESTIMONIAL (emergency 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">Saved by <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">Our basement flooded at 2 a.m. and we had water near the electrical panel. I called VoltEdge and a technician arrived within 45 minutes. He safely isolated the circuits, replaced a damaged breaker, and even gave us tips to prevent future issues. True lifesavers!</p>
<div class="testi-author"><img src="https://randomuser.me/api/portraits/men/45.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Mike Thompson</div><div class="testi-role">Homeowner, Round Rock</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">For emergencies, call our 24/7 line. For nonurgent requests, fill out the form.</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>Emergency Phone</h6><p><strong>+1 800 555 5678</strong> (24/7)<br>Office: +1 800 555 1234</p></div></div>
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-envelope"></i></div><div><h6>Email</h6><p>emergency@voltedge.com<br>hello@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>Emergency: 24/7/365<br>Office: MonFri 7am6pm</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" required></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>Emergency Repair</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting Installation</option><option>Maintenance</option><option>Smart Home</option></select></div>
<div class="col-12"><label class="form-label" for="message">Describe the issue</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. For emergencies, please call our 24/7 line.</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>
+409
View File
@@ -0,0 +1,409 @@
<!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 Frequently Asked Questions about our electrical services, scheduling, billing, safety, and more." />
<meta name="keywords" content="FAQ, electrical questions, electrician FAQ, service questions, voltedge" />
<title>VoltEdge Electrical | FAQ</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 -->
<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 (FAQ) -->
<section class="page-header-sm">
<div class="page-header-bg" role="img" aria-label="frequently asked questions"></div>
<div class="page-header-overlay"></div>
<div class="container text-center text-lg-start">
<h1 data-aos="fade-up">Frequently Asked <span>Questions</span></h1>
<p data-aos="fade-up" data-aos-delay="30">Find quick answers about our services, scheduling, billing, and safety. Still have questions? Contact us!</p>
</div>
</section>
<!-- FAQ CONTENT -->
<section class="section-pad" style="background:var(--bg);">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="faq-section" data-aos="fade-up">
<!-- Category: General -->
<h3 class="faq-category">General Questions</h3>
<div class="accordion accordion-flush" id="faqGeneral">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#general1">
What areas do you serve?
</button>
</h2>
<div id="general1" class="accordion-collapse collapse" data-bs-parent="#faqGeneral">
<div class="accordion-body">
We primarily serve the greater Austin metropolitan area, including Round Rock, Cedar Park, Georgetown, and surrounding communities. For commercial and industrial projects, we often travel further please call to confirm availability.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#general2">
Are you licensed and insured?
</button>
</h2>
<div id="general2" class="accordion-collapse collapse" data-bs-parent="#faqGeneral">
<div class="accordion-body">
Absolutely. VoltEdge Electrical is fully licensed in the state of Texas (License # TECL 34567) and carries comprehensive liability insurance and workers' compensation coverage for your protection.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#general3">
Do you provide free estimates?
</button>
</h2>
<div id="general3" class="accordion-collapse collapse" data-bs-parent="#faqGeneral">
<div class="accordion-body">
Yes, we offer free, no-obligation estimates for most residential and commercial projects. We'll visit your site, discuss your needs, and provide a detailed written quote. Emergency service calls may have a diagnostic fee that is applied to any repair work.
</div>
</div>
</div>
</div>
<!-- Category: Services & Scheduling -->
<h3 class="faq-category mt-5">Services & Scheduling</h3>
<div class="accordion accordion-flush" id="faqServices">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#service1">
What types of electrical services do you offer?
</button>
</h2>
<div id="service1" class="accordion-collapse collapse" data-bs-parent="#faqServices">
<div class="accordion-body">
We offer a full range of electrical services including residential wiring and rewiring, commercial installations, lighting design and installation, panel upgrades, emergency repairs, EV charger installation, smart home automation, and preventive maintenance. See our <a href="index.html#services">Services</a> page for details.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#service2">
How quickly can you schedule a non-emergency job?
</button>
</h2>
<div id="service2" class="accordion-collapse collapse" data-bs-parent="#faqServices">
<div class="accordion-body">
Typically, we can schedule residential service appointments within 2-5 business days. Larger commercial or industrial projects may require more lead time for planning and permitting. We'll always work with you to find a convenient date.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#service3">
Do you offer 24/7 emergency service?
</button>
</h2>
<div id="service3" class="accordion-collapse collapse" data-bs-parent="#faqServices">
<div class="accordion-body">
Yes, we have electricians on call 24 hours a day, 7 days a week, including holidays. For emergencies such as power outages, sparking outlets, or downed wires, call our emergency line: <strong>+1 800 555 5678</strong>.
</div>
</div>
</div>
</div>
<!-- Category: Billing & Payments -->
<h3 class="faq-category mt-5">Billing & Payments</h3>
<div class="accordion accordion-flush" id="faqBilling">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bill1">
What payment methods do you accept?
</button>
</h2>
<div id="bill1" class="accordion-collapse collapse" data-bs-parent="#faqBilling">
<div class="accordion-body">
We accept all major credit cards (Visa, Mastercard, American Express, Discover), checks, and cash. For larger projects, financing options may be available ask your project manager for details.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bill2">
Do you require a deposit?
</button>
</h2>
<div id="bill2" class="accordion-collapse collapse" data-bs-parent="#faqBilling">
<div class="accordion-body">
For smaller jobs (under $500), payment is due upon completion. For larger projects, we typically require a 25-50% deposit to secure materials and scheduling, with the balance due at final completion. This is always outlined in your proposal.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bill3">
Is there a warranty on your work?
</button>
</h2>
<div id="bill3" class="accordion-collapse collapse" data-bs-parent="#faqBilling">
<div class="accordion-body">
Yes, we stand behind our craftsmanship. All electrical work carries a 1-year parts and labor warranty. Some installed products may have additional manufacturer warranties we'll provide all documentation upon completion.
</div>
</div>
</div>
</div>
<!-- Category: Safety & Emergencies -->
<h3 class="faq-category mt-5">Safety & Emergencies</h3>
<div class="accordion accordion-flush" id="faqSafety">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#safe1">
What should I do if I smell burning or see sparks?
</button>
</h2>
<div id="safe1" class="accordion-collapse collapse" data-bs-parent="#faqSafety">
<div class="accordion-body">
Immediately turn off power at the main breaker if safe to do so, evacuate the area, and call our emergency line at <strong>+1 800 555 5678</strong>. Do not attempt to touch or investigate until a professional arrives.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#safe2">
How often should I have my home's electrical system inspected?
</button>
</h2>
<div id="safe2" class="accordion-collapse collapse" data-bs-parent="#faqSafety">
<div class="accordion-body">
We recommend a professional electrical inspection every 3-5 years for homes, or immediately if you experience frequent breaker trips, flickering lights, or before purchasing an older home. Commercial properties may require more frequent inspections per code.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#safe3">
Are your electricians background-checked?
</button>
</h2>
<div id="safe3" class="accordion-collapse collapse" data-bs-parent="#faqSafety">
<div class="accordion-body">
Yes, every VoltEdge employee undergoes a thorough background check, drug screening, and ongoing safety training. Your family and property are in safe hands.
</div>
</div>
</div>
</div>
<!-- Still have questions? -->
<div class="still-questions">
<h4>Still have questions?</h4>
<p>Can't find the answer you're looking for? Please chat with our team or send us a message. We're happy to help!</p>
<a href="#contact" class="btn-primary-main" style="background:var(--yellow); color:var(--navy); font-family:var(--font-display); font-weight:700; padding:12px 32px; border-radius:4px; display:inline-block;">Contact Us</a>
</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">Have a different question? Our team is ready to help.</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="subject">Subject</label><input type="text" class="form-control" id="subject" placeholder="FAQ inquiry"></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 -->
<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 -->
<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';});
// newsletter button demo
document.querySelectorAll('.newsletter-btn').forEach(btn => {
btn.addEventListener('click', function() {
const input = this.previousElementSibling;
if (input.value && input.value.includes('@')) {
this.innerHTML = '<i class="fas fa-check"></i>';
this.style.background = '#22c55e';
input.value = '';
input.placeholder = 'Subscribed!';
}
});
});
</script>
</body>
</html>
+907
View File
@@ -0,0 +1,907 @@
<!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 electrical installation, maintenance, and technical services for homes and businesses. Certified electricians, fast response, reliable work." />
<meta name="keywords"
content="electrical services, electrician, wiring, electrical installation, maintenance, smart home, electrical repair" />
<title>VoltEdge Electrical | Reliable Electrical Solutions</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
============================================ -->
<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" xmlns="http://www.w3.org/2000/svg">
<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>
<!-- ============================================
NAVBAR
============================================ -->
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="#hero">
<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="#hero">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#team">Team</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="#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>
<!-- ============================================
HERO SECTION
============================================ -->
<section id="hero">
<div class="hero-bg" role="img" aria-label="Electrical technician at work"></div>
<div class="hero-overlay"></div>
<div class="hero-grid" aria-hidden="true"></div>
<!-- Decorative arc animation -->
<div class="hero-arc" aria-hidden="true">
<div class="arc-circle"></div>
<div class="arc-circle"></div>
<div class="arc-circle"></div>
<div class="arc-center"></div>
<div class="arc-bolt"><i class="fas fa-bolt"></i></div>
</div>
<div class="container hero-content">
<div class="row">
<div class="col-lg-8">
<h1 class="hero-title" data-aos="fade-up" data-aos-delay="200">
Reliable <span class="accent">Electrical</span><br />
Solutions for
Homes &amp; <span class="accent">Businesses</span>
</h1>
<p class="hero-subtitle" data-aos="fade-up" data-aos-delay="320">
Professional electrical installation, maintenance, and technical services
you can trust. Safety-first approach, modern equipment, certified team.
</p>
<div class="d-flex flex-wrap gap-3" data-aos="fade-up" data-aos-delay="440">
<a href="#contact" class="btn-primary-main">
<i class="fas fa-wrench"></i> Request Service
</a>
<a href="#contact" class="btn-outline-main">
<i class="fas fa-file-invoice-dollar"></i> Get a Quote
</a>
</div>
<!-- Stats -->
<div class="hero-stats" data-aos="fade-up" data-aos-delay="540">
<div>
<div class="hero-stat-num">20+</div>
<div class="hero-stat-label">Years Experience</div>
</div>
<div>
<div class="hero-stat-num">3.5K+</div>
<div class="hero-stat-label">Projects Done</div>
</div>
<div>
<div class="hero-stat-num">98%</div>
<div class="hero-stat-label">Client Satisfaction</div>
</div>
<div>
<div class="hero-stat-num">45+</div>
<div class="hero-stat-label">Expert Technicians</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="hero-badge" data-aos="fade-down" data-aos-delay="100">
<i class="fas fa-certificate"></i>
Certified Electrical Professionals
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
ABOUT SECTION
============================================ -->
<section id="about" class="section-pad">
<div class="container">
<div class="row align-items-center g-5">
<!-- Image Column -->
<div class="col-lg-5" data-aos="fade-right">
<div class="about-img-wrap me-lg-4">
<div class="about-exp-bar">
<i class="fas fa-shield-alt"></i>
<span>ISO Certified Safety Standards</span>
</div>
<img src="assets/images/67419.jpg"
alt="Electrician working on electrical panel" class="about-img-main" />
<div class="about-img-badge">
<div class="num">20+</div>
<div class="lbl">Years in<br>Business</div>
</div>
</div>
</div>
<!-- Text Column -->
<div class="col-lg-7" data-aos="fade-left" data-aos-delay="100">
<div class="section-label">About VoltEdge</div>
<h2 class="section-title">Powering Communities <span>Since 2004</span></h2>
<p class="section-desc">
VoltEdge Electrical is a premier electrical services company specializing in
residential, commercial, and industrial projects. Our team of certified
electricians delivers safe, reliable, and cost-effective solutions.
</p>
<ul class="about-list mt-4">
<li><i class="fas fa-check-circle"></i> Licensed and insured electrical contractors</li>
<li><i class="fas fa-check-circle"></i> Full-service installation, maintenance, and repairs</li>
<li><i class="fas fa-check-circle"></i> 24/7 emergency electrical support</li>
<li><i class="fas fa-check-circle"></i> Compliance with national electrical code standards</li>
<li><i class="fas fa-check-circle"></i> Smart home and commercial automation specialists</li>
</ul>
<div class="counter-grid">
<div class="counter-card">
<div class="counter-num" data-target="3500">0<span>+</span></div>
<div class="counter-lbl">Completed Projects</div>
</div>
<div class="counter-card">
<div class="counter-num" data-target="2800">0<span>+</span></div>
<div class="counter-lbl">Happy Clients</div>
</div>
<div class="counter-card">
<div class="counter-num" data-target="45">0<span>+</span></div>
<div class="counter-lbl">Expert Technicians</div>
</div>
<div class="counter-card">
<div class="counter-num" data-target="20">0<span>+</span></div>
<div class="counter-lbl">Years Experience</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="divider-line"></div>
<!-- ============================================
SERVICES SECTION
============================================ -->
<section id="services" class="section-pad">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">What We Do</div>
<h2 class="section-title">Our <span>Electrical</span> Services</h2>
<p class="section-desc mx-auto">
Comprehensive electrical solutions for every need — from simple repairs to
complex commercial installations.
</p>
</div>
<div class="row g-4">
<!-- Service 1 -->
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="0">
<div class="service-card">
<div class="service-num">01</div>
<div class="service-icon"><i class="fas fa-plug"></i></div>
<h5>Electrical Installation</h5>
<p>Full-service installation of electrical systems for new constructions and major renovations, including
panels, circuits, and outlets.</p>
<a href="electrical-installation.html" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<!-- Service 2 -->
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">02</div>
<div class="service-icon"><i class="fas fa-network-wired"></i></div>
<h5>Wiring &amp; Rewiring</h5>
<p>Safe, code-compliant wiring and complete rewiring services for older buildings requiring modernization or
capacity upgrades.</p>
<a href="wiring-services.html" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<!-- Service 3 -->
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">03</div>
<div class="service-icon"><i class="fas fa-lightbulb"></i></div>
<h5>Lighting Installation</h5>
<p>Indoor and outdoor lighting design and installation, including LED upgrades, accent lighting, and
energy-efficient smart lighting.</p>
<a href="lighting-installation.html" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<!-- Service 4 -->
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="0">
<div class="service-card">
<div class="service-num">04</div>
<div class="service-icon"><i class="fas fa-tools"></i></div>
<h5>Electrical Maintenance</h5>
<p>Scheduled and preventive maintenance programs to keep your electrical systems safe, efficient, and
operating at peak performance.</p>
<a href="electrical-maintenance.html" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<!-- Service 5 -->
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">05</div>
<div class="service-icon"><i class="fas fa-exclamation-triangle"></i></div>
<h5>Emergency Repair</h5>
<p>24/7 emergency electrical repair services. Our rapid-response team handles power outages, tripped
breakers, and urgent electrical faults.</p>
<a href="emergency-repair.html" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<!-- Service 6 -->
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">06</div>
<div class="service-icon"><i class="fas fa-home"></i></div>
<h5>Smart Home Systems</h5>
<p>Intelligent home automation, smart panel integration, EV charging stations, and connected electrical
systems for modern living.</p>
<a href="smart-home.html" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
WHY CHOOSE US
============================================ -->
<section id="why" class="section-pad">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-5" data-aos="fade-right">
<div class="section-label" style="color:var(--yellow)">Why VoltEdge</div>
<h2 class="section-title light">The Standard <span>Others</span> Measure Against</h2>
<p style="color:rgba(255,255,255,0.55); font-size:0.95rem; line-height:1.75; margin-top:14px;">
We don't just complete jobs — we build lasting relationships built on
transparency, craftsmanship, and an unwavering commitment to safety.
</p>
<a href="#contact" class="btn-primary-main mt-4">
<i class="fas fa-phone-alt"></i> Get In Touch
</a>
</div>
<div class="col-lg-7">
<div class="row g-3">
<div class="col-md-6" data-aos="fade-up" data-aos-delay="0">
<div class="why-card">
<div class="why-icon"><i class="fas fa-user-shield"></i></div>
<div>
<h5>Certified Electricians</h5>
<p>All our electricians are fully licensed, insured, and certified under national electrical
standards.</p>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
<div class="why-card">
<div class="why-icon"><i class="fas fa-tachometer-alt"></i></div>
<div>
<h5>Fast Response Time</h5>
<p>Our dispatch team ensures rapid on-site arrival for both scheduled jobs and emergency calls, day or
night.</p>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-up" data-aos-delay="160">
<div class="why-card">
<div class="why-icon"><i class="fas fa-hard-hat"></i></div>
<div>
<h5>Safe &amp; Reliable Work</h5>
<p>Safety is non-negotiable. Every project follows strict protocols and is inspected to the highest
standards.</p>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-up" data-aos-delay="240">
<div class="why-card">
<div class="why-icon"><i class="fas fa-tags"></i></div>
<div>
<h5>Affordable Pricing</h5>
<p>Competitive, transparent pricing with no hidden fees. We offer detailed quotes before any work
begins.</p>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-up" data-aos-delay="320">
<div class="why-card">
<div class="why-icon"><i class="fas fa-microchip"></i></div>
<div>
<h5>Modern Equipment</h5>
<p>We invest in the latest diagnostic tools and installation equipment to deliver precision and
efficiency.</p>
</div>
</div>
</div>
<div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
<div class="why-card">
<div class="why-icon"><i class="fas fa-leaf"></i></div>
<div>
<h5>Eco-Friendly Solutions</h5>
<p>We promote energy efficiency through LED upgrades, solar integration, and smart energy management
systems.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
PROJECTS / GALLERY
============================================ -->
<section id="projects" class="section-pad">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">Our Portfolio</div>
<h2 class="section-title">Recent <span>Projects</span></h2>
<p class="section-desc mx-auto">A selection of our completed electrical projects across residential, commercial,
and industrial sectors.</p>
</div>
<div class="row g-3">
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="0">
<div class="project-card">
<img src="assets/images/67419.jpg"
alt="Commercial building electrical installation" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<h5>Commercial Complex</h5>
<span>Full Electrical Installation</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="80">
<div class="project-card">
<img src="assets/images/7323.jpg"
alt="Office electrical work" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<h5>Corporate Office Rewire</h5>
<span>Wiring &amp; Lighting Upgrade</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="160">
<div class="project-card">
<img src="assets/images/8829.jpg"
alt="Residential electrical panel" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<h5>Smart Home Integration</h5>
<span>Home Automation System</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="0">
<div class="project-card">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80"
alt="Industrial facility" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<h5>Industrial Facility</h5>
<span>High-Voltage Installation</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="80">
<div class="project-card">
<img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?w=600&q=80"
alt="Solar panel installation" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<h5>Solar Power System</h5>
<span>Renewable Energy Integration</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="160">
<div class="project-card">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80"
alt="Luxury residential lighting" />
<div class="project-overlay">
<a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a>
<h5>Luxury Residence</h5>
<span>Lighting Design &amp; Installation</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
WORKING PROCESS
============================================ -->
<section id="process" class="section-pad">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center">How We Work</div>
<h2 class="section-title">Our <span>Working</span> Process</h2>
<p class="section-desc mx-auto">A streamlined 4-step process ensuring every project is delivered safely, on
time, and to specification.</p>
</div>
<div class="process-wrap" data-aos="fade-up" data-aos-delay="100">
<div class="process-step" data-aos="fade-up" data-aos-delay="0">
<div class="process-icon">
<span class="process-step-num">1</span>
<i class="fas fa-phone-alt"></i>
</div>
<h5>Request Service</h5>
<p>Contact us via phone, email, or our online form. Describe your electrical needs and we'll schedule a
consultation.</p>
</div>
<div class="process-step" data-aos="fade-up" data-aos-delay="100">
<div class="process-icon">
<span class="process-step-num">2</span>
<i class="fas fa-search"></i>
</div>
<h5>Inspection &amp; Planning</h5>
<p>Our certified engineers perform a thorough site inspection and prepare a detailed project plan and
transparent quote.</p>
</div>
<div class="process-step" data-aos="fade-up" data-aos-delay="200">
<div class="process-icon">
<span class="process-step-num">3</span>
<i class="fas fa-hammer"></i>
</div>
<h5>Installation / Repair</h5>
<p>Our skilled team executes the work efficiently with premium materials, adhering to all safety and code
requirements.</p>
</div>
<div class="process-step" data-aos="fade-up" data-aos-delay="300">
<div class="process-icon">
<span class="process-step-num">4</span>
<i class="fas fa-check-double"></i>
</div>
<h5>Testing &amp; Completion</h5>
<p>Every job ends with rigorous safety testing, final inspection, and a clean site handover with full
documentation.</p>
</div>
</div>
</div>
</section>
<!-- ============================================
TESTIMONIALS
============================================ -->
<section id="testimonials" class="section-pad">
<div class="container" style="position:relative;z-index:1">
<div class="text-center mb-5" data-aos="fade-up">
<div class="section-label justify-content-center" style="color:var(--yellow)">Client Feedback</div>
<h2 class="section-title light">What Our <span>Clients</span> Say</h2>
</div>
<div class="row justify-content-center" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-9">
<div class="testimonial-slider" id="testiSlider">
<div class="testimonial-track" id="testiTrack">
<!-- Slide 1 -->
<div class="testimonial-slide">
<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 completely rewired our 1980s office building and upgraded our entire
electrical panel. The team was professional, on time, and the quality of work was exceptional. Zero
disruption to our business operations.</p>
<div class="testi-author">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Marcus J." class="testi-avatar" />
<div>
<div class="testi-name">Marcus Johnson</div>
<div class="testi-role">CEO, Nexus Properties</div>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="testimonial-slide">
<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">We called VoltEdge at midnight for an electrical emergency and they had a
technician at our home within 45 minutes. Diagnosed and fixed the fault quickly and safely.
Absolutely outstanding service.</p>
<div class="testi-author">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah M." class="testi-avatar" />
<div>
<div class="testi-name">Sarah Martinez</div>
<div class="testi-role">Homeowner, Austin TX</div>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="testimonial-slide">
<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-half-alt"></i>
</div>
<div class="testi-quote">"</div>
<p class="testi-text">The smart home system VoltEdge installed is incredible. Automated lighting, EV
charger, solar integration — everything works flawlessly. Their team explained every detail and the
pricing was totally transparent.</p>
<div class="testi-author">
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="David K." class="testi-avatar" />
<div>
<div class="testi-name">David Kim</div>
<div class="testi-role">Tech Entrepreneur</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slider-controls">
<button class="slider-btn" id="testiPrev" aria-label="Previous testimonial">
<i class="fas fa-chevron-left"></i>
</button>
<button class="slider-btn" id="testiNext" aria-label="Next testimonial">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="slider-dots" id="testiDots">
<div class="slider-dot active" data-index="0"></div>
<div class="slider-dot" data-index="1"></div>
<div class="slider-dot" data-index="2"></div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
TEAM SECTION
============================================ -->
<section id="team" 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">Our People</div>
<h2 class="section-title">Meet the <span>Expert</span> Team</h2>
<p class="section-desc mx-auto">Seasoned professionals dedicated to delivering the highest standard of
electrical services.</p>
</div>
<div class="row g-4">
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="0">
<div class="team-card">
<div class="team-img-wrap">
<img src="assets/images/Sameer.jpg"
alt="Robert Hayes Master Electrician" />
<div class="team-social">
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-info">
<h5>Robert Hayes</h5>
<span>Master Electrician</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="80">
<div class="team-card">
<div class="team-img-wrap">
<img src="assets/images/sarah.jpeg"
alt="Linda Torres Project Manager" />
<div class="team-social">
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-info">
<h5>Linda Torres</h5>
<span>Project Manager</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="160">
<div class="team-card">
<div class="team-img-wrap">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80"
alt="Marcus Webb Systems Engineer" />
<div class="team-social">
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-info">
<h5>Marcus Webb</h5>
<span>Systems Engineer</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="240">
<div class="team-card">
<div class="team-img-wrap">
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&q=80"
alt="Priya Nair Safety Inspector" />
<div class="team-social">
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-info">
<h5>Priya Nair</h5>
<span>Safety Inspector</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
CONTACT SECTION
============================================ -->
<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 start your project? Our team is standing by. Request a quote or ask any
question.</p>
</div>
<div class="row g-4">
<!-- Contact Info -->
<div class="col-lg-4" data-aos="fade-right">
<div class="contact-info-card">
<h4 class="rach-out">
Reach Out To Us
</h4>
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div>
<div>
<h6>Our Office</h6>
<p>1240 Electric Ave, Suite 300<br>Austin, TX 78701, USA</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>Working Hours</h6>
<p>MonFri: 7:00 AM 6:00 PM<br>Emergency: 24/7</p>
</div>
</div>
</div>
</div>
<!-- Contact Form -->
<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 Us 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" placeholder="John Doe" required />
</div>
<div class="col-md-6">
<label class="form-label" for="email">Email Address</label>
<input type="email" class="form-control" id="email" placeholder="john@example.com" required />
</div>
<div class="col-md-6">
<label class="form-label" for="phone">Phone Number</label>
<input type="tel" class="form-control" id="phone" placeholder="+1 (555) 000-0000" />
</div>
<div class="col-md-6">
<label class="form-label" for="service">Service Needed</label>
<select class="form-select" id="service">
<option value="" disabled selected>Select a service</option>
<option>Electrical Installation</option>
<option>Wiring &amp; Rewiring</option>
<option>Lighting Installation</option>
<option>Electrical Maintenance</option>
<option>Emergency Repair</option>
<option>Smart Home Systems</option>
<option>Other</option>
</select>
</div>
<div class="col-12">
<label class="form-label" for="message">Message</label>
<textarea class="form-control" id="message" rows="5"
placeholder="Describe your project or issue in detail..." 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>
<!-- Success message (hidden) -->
<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! Your message has been received. We'll be in touch
within 24 hours.
</div>
</div>
</div>
<!-- Map -->
<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" referrerpolicy="no-referrer-when-downgrade"
title="VoltEdge office location map"></iframe>
</div>
</div>
</div>
</section>
<!-- ============================================
FOOTER
============================================ -->
<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="#hero">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#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 TO TOP BUTTON
============================================ -->
<button id="scrollTop" aria-label="Scroll to top">
<i class="fas fa-chevron-up"></i>
</button>
<!-- ============================================
SCRIPTS
============================================ -->
<!-- Bootstrap 5 JS -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- AOS JS -->
<script src="assets/js/aos.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
+372
View File
@@ -0,0 +1,372 @@
<!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>
+310
View File
@@ -0,0 +1,310 @@
<!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 Privacy Policy explaining how we collect, use, and protect your personal information." />
<meta name="keywords" content="privacy policy, data protection, personal information, voltedge" />
<title>VoltEdge Electrical | Privacy Policy</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 -->
<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 (Privacy Policy) -->
<section class="page-header-sm">
<div class="page-header-bg" role="img" aria-label="privacy and security"></div>
<div class="page-header-overlay"></div>
<div class="container text-center text-lg-start">
<h1 data-aos="fade-up">Privacy <span>Policy</span></h1>
<div class="last-updated" data-aos="fade-up" data-aos-delay="30">Last Updated: March 15, 2025</div>
</div>
</section>
<!-- PRIVACY CONTENT -->
<section class="section-pad" style="background:var(--bg);">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="privacy-content" data-aos="fade-up">
<p class="lead">At VoltEdge Electrical, accessible from <strong>voltedge.com</strong>, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by VoltEdge Electrical and how we use it.</p>
<p>If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us.</p>
<h2>1. Information We Collect</h2>
<p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
<p>If you contact us directly, we may receive additional information about you such as your name, email address, phone number, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
<p>When you register for an Account, we may ask for your contact information, including items such as name, company name, address, email address, and telephone number.</p>
<h2>2. How We Use Your Information</h2>
<p>We use the information we collect in various ways, including to:</p>
<ul>
<li>Provide, operate, and maintain our website</li>
<li>Improve, personalize, and expand our website</li>
<li>Understand and analyze how you use our website</li>
<li>Develop new products, services, features, and functionality</li>
<li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
<li>Send you emails</li>
<li>Find and prevent fraud</li>
</ul>
<h2>3. Log Files</h2>
<p>VoltEdge Electrical follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
<h2>4. Cookies and Web Beacons</h2>
<p>Like any other website, VoltEdge Electrical uses "cookies". These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
<h2>5. Third Party Privacy Policies</h2>
<p>VoltEdge Electrical's Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options.</p>
<div class="highlight">
<p><strong>Your Rights:</strong> Depending on your location, you may have certain rights regarding your personal information, such as the right to access, correct, or delete the data we hold about you. To exercise these rights, please contact us.</p>
</div>
<h2>6. CCPA Privacy Rights (Do Not Sell My Personal Information)</h2>
<p>Under the CCPA, among other rights, California consumers have the right to:</p>
<ul>
<li>Request that a business that collects a consumer's personal data disclose the categories and specific pieces of personal data that a business has collected about consumers.</li>
<li>Request that a business delete any personal data about the consumer that a business has collected.</li>
<li>Request that a business that sells a consumer's personal data, not sell the consumer's personal data.</li>
</ul>
<p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
<h2>7. GDPR Data Protection Rights</h2>
<p>We would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to the following:</p>
<ul>
<li><strong>The right to access</strong> You have the right to request copies of your personal data.</li>
<li><strong>The right to rectification</strong> You have the right to request that we correct any information you believe is inaccurate.</li>
<li><strong>The right to erasure</strong> You have the right to request that we erase your personal data, under certain conditions.</li>
<li><strong>The right to restrict processing</strong> You have the right to request that we restrict the processing of your personal data, under certain conditions.</li>
<li><strong>The right to object to processing</strong> You have the right to object to our processing of your personal data, under certain conditions.</li>
<li><strong>The right to data portability</strong> You have the right to request that we transfer the data that we have collected to another organization, or directly to you, under certain conditions.</li>
</ul>
<p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
<h2>8. Children's Information</h2>
<p>Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity.</p>
<p>VoltEdge Electrical does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records.</p>
<h2>9. Changes to This Privacy Policy</h2>
<p>We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page. We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective and update the "effective date" at the top of this Privacy Policy.</p>
<p>You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.</p>
<h2>10. Contact Us</h2>
<p>If you have any questions or suggestions about our Privacy Policy, do not hesitate to contact us:</p>
<ul>
<li>By email: <a href="mailto:privacy@voltedge.com">privacy@voltedge.com</a></li>
<li>By visiting our contact page: <a href="#contact">Contact Us</a></li>
<li>By mail: 1240 Electric Ave, Suite 300, Austin, TX 78701, USA</li>
</ul>
<p class="mt-4"><em>This Privacy Policy was last updated on March 15, 2025 and is effective immediately.</em></p>
</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">Have questions about our privacy practices? Our team is ready to help.</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>privacy@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="subject">Subject</label><input type="text" class="form-control" id="subject" placeholder="Privacy inquiry"></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 -->
<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 -->
<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';});
// newsletter button demo
document.querySelectorAll('.newsletter-btn').forEach(btn => {
btn.addEventListener('click', function() {
const input = this.previousElementSibling;
if (input.value && input.value.includes('@')) {
this.innerHTML = '<i class="fas fa-check"></i>';
this.style.background = '#22c55e';
input.value = '';
input.placeholder = 'Subscribed!';
}
});
});
</script>
</body>
</html>
+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. Futureproof 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 wholehome 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, colorchanging 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>Wholehome audio, home theater, multiroom video distribution, and voicecontrolled 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>Wholehome 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 lowvoltage 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 futureproofing.</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>Futureready 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>Userfriendly</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>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>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>
+275
View File
@@ -0,0 +1,275 @@
<!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 Terms and Conditions governing the use of our website and services." />
<meta name="keywords" content="terms and conditions, terms of service, legal, voltedge" />
<title>VoltEdge Electrical | Terms and Conditions</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 -->
<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 (Terms) -->
<section class="page-header-sm">
<div class="page-header-bg" role="img" aria-label="legal gavel"></div>
<div class="page-header-overlay"></div>
<div class="container text-center text-lg-start">
<h1 data-aos="fade-up">Terms <span>and</span> Conditions</h1>
<div class="last-updated" data-aos="fade-up" data-aos-delay="30">Last Updated: March 15, 2025</div>
</div>
</section>
<!-- TERMS CONTENT -->
<section class="section-pad" style="background:var(--bg);">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="terms-content" data-aos="fade-up">
<p class="lead">Please read these Terms and Conditions ("Terms", "Terms and Conditions") carefully before using the <strong>voltedge.com</strong> website (the "Service") operated by <strong>VoltEdge Electrical LLC</strong> ("us", "we", or "our").</p>
<p>Your access to and use of the Service is conditioned on your acceptance of and compliance with these Terms. These Terms apply to all visitors, users, and others who access or use the Service.</p>
<p>By accessing or using the Service you agree to be bound by these Terms. If you disagree with any part of the terms, you may not access the Service.</p>
<h2>1. Intellectual Property</h2>
<p>The Service and its original content, features, and functionality are and will remain the exclusive property of VoltEdge Electrical LLC and its licensors. The Service is protected by copyright, trademark, and other laws of both the United States and foreign countries. Our trademarks and trade dress may not be used in connection with any product or service without the prior written consent of VoltEdge Electrical LLC.</p>
<h2>2. Links to Other Websites</h2>
<p>Our Service may contain links to third-party websites or services that are not owned or controlled by VoltEdge Electrical. VoltEdge Electrical has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third-party websites or services. You further acknowledge and agree that VoltEdge shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods, or services available on or through any such websites or services.</p>
<p><strong>We strongly advise you to read the terms and conditions and privacy policies of any third-party websites or services that you visit.</strong></p>
<h2>3. Termination</h2>
<p>We may terminate or suspend access to our Service immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms. All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity, and limitations of liability.</p>
<h2>4. Disclaimer</h2>
<div class="highlight">
<p><strong>Your use of the Service is at your sole risk.</strong> The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind, whether express or implied, including, but not limited to, implied warranties of merchantability, fitness for a particular purpose, non-infringement, or course of performance.</p>
</div>
<p>VoltEdge Electrical, its subsidiaries, affiliates, and its licensors do not warrant that a) the Service will function uninterrupted, secure, or available at any particular time or location; b) any errors or defects will be corrected; c) the results of using the Service will meet your requirements.</p>
<h2>5. Governing Law</h2>
<p>These Terms shall be governed and construed in accordance with the laws of Texas, United States, without regard to its conflict of law provisions. Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect.</p>
<h2>6. Changes</h2>
<p>We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material, we will try to provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion. By continuing to access or use our Service after those revisions become effective, you agree to be bound by the revised terms. If you do not agree to the new terms, please stop using the Service.</p>
<h2>7. Contact Us</h2>
<p>If you have any questions about these Terms, please contact us:</p>
<ul>
<li>By email: <a href="mailto:legal@voltedge.com">legal@voltedge.com</a></li>
<li>By visiting our contact page: <a href="#contact">Contact Us</a></li>
<li>By mail: 1240 Electric Ave, Suite 300, Austin, TX 78701, USA</li>
</ul>
<p class="mt-4"><em>These Terms and Conditions were last updated on March 15, 2025 and are effective immediately.</em></p>
</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">Have questions about our terms or services? Our team is ready to help.</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>legal@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="subject">Subject</label><input type="text" class="form-control" id="subject" placeholder="Terms inquiry"></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 -->
<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 -->
<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';});
// newsletter button demo
document.querySelectorAll('.newsletter-btn').forEach(btn => {
btn.addEventListener('click', function() {
const input = this.previousElementSibling;
if (input.value && input.value.includes('@')) {
this.innerHTML = '<i class="fas fa-check"></i>';
this.style.background = '#22c55e';
input.value = '';
input.placeholder = 'Subscribed!';
}
});
});
</script>
</body>
</html>
+372
View File
@@ -0,0 +1,372 @@
<!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 wiring and rewiring services for homes, offices, and industrial facilities. Safe, code-compliant, and future-ready." />
<meta name="keywords" content="wiring, rewiring, electrical wiring, home rewiring, office rewiring, electrical panel upgrade" />
<title>VoltEdge Electrical | Wiring & Rewiring</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 (Wiring & Rewiring) -->
<section class="page-header">
<div class="page-header-bg" role="img" aria-label="electrician working on wires"></div>
<div class="page-header-overlay"></div>
<div class="container">
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-bolt"></i> Safe & CodeCompliant</div>
<h1 data-aos="fade-up">Wiring & <span>Rewiring</span> Services</h1>
<p data-aos="fade-up" data-aos-delay="80">Modernize your property with professional wiring solutions. From full rewiring of old homes to new branch circuits and panel upgrades.</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/67419.jpg" alt="Electrician wiring a panel" class="img-fluid rounded-3 shadow">
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="section-label">Safe & futureready</div>
<h2 class="section-title">Expert <span>Wiring</span> You Can Trust</h2>
<p class="section-desc" style="max-width:100%;">Whether your home has outdated knobandtube wiring or your business needs a complete rewire to support modern equipment, VoltEdge delivers meticulous, codecompliant work. We ensure every circuit is properly sized, grounded, and protected.</p>
<ul class="about-list mt-4">
<li><i class="fas fa-check-circle"></i> Complete home and office rewiring</li>
<li><i class="fas fa-check-circle"></i> Old wiring replacement (aluminum, clothinsulated)</li>
<li><i class="fas fa-check-circle"></i> New branch circuits for appliances / additions</li>
<li><i class="fas fa-check-circle"></i> Surge protection and grounding upgrades</li>
<li><i class="fas fa-check-circle"></i> Permits & final inspection included</li>
</ul>
</div>
</div>
</div>
</section>
<!-- TYPES OF WIRING / REWIRING (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">Wiring <span>Solutions</span> For Every Need</h2>
<p class="section-desc mx-auto">Residential, commercial, and industrial rewiring tailored to your property.</p>
</div>
<div class="row g-4">
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">R</div>
<div class="service-icon"><i class="fas fa-home"></i></div>
<h5>Residential Rewiring</h5>
<p>Full or partial rewiring for older homes, upgrading to modern safety standards. Includes new outlets, switches, and AFCI/GFCI protection.</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-building"></i></div>
<h5>Commercial Wiring</h5>
<p>Office rewiring, data cabling, dedicated circuits for servers, and lighting control systems. Minimal downtime guaranteed.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
<div class="service-card">
<div class="service-num">I</div>
<div class="service-icon"><i class="fas fa-industry"></i></div>
<h5>Industrial Rewiring</h5>
<p>Heavyduty conduit, motor feeds, control panels, and highcapacity wiring for manufacturing facilities and warehouses.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up">
<div class="service-card">
<div class="service-num">P</div>
<div class="service-icon"><i class="fas fa-charging-station"></i></div>
<h5>Panel Upgrades</h5>
<p>Replace outdated fuse boxes or insufficient panels. Increase amperage for modern appliances or EV chargers.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
<div class="service-card">
<div class="service-num">A</div>
<div class="service-icon"><i class="fas fa-plug"></i></div>
<h5>Additional Circuits</h5>
<p>Add dedicated circuits for kitchens, home theaters, workshops, or HVAC equipment safely and neatly.</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>Surge Protection & Grounding</h5>
<p>Wholehouse surge protectors and proper grounding systems to safeguard electronics and comply with code.</p>
</div>
</div>
</div>
</div>
</section>
<!-- REWIRING 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 rewire</div>
<h2 class="section-title">Our <span>Rewiring</span> Process</h2>
<p class="section-desc mx-auto">Minimal disruption, maximum safety.</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>Inspection</h5><p>We assess your existing wiring, identify hazards, and create a detailed rewiring plan with a fixed quote.</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 & Permits</h5><p>Engineered layouts, load calculations, and all necessary permits secured before work begins.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-hammer"></i></div><h5>Rewiring</h5><p>Old wires removed (if needed) and new cabling run, terminated, and labeled. Temporary power maintained.</p></div>
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-check-double"></i></div><h5>Testing & Closeup</h5><p>Thorough testing of every outlet, switch, and circuit. Final inspection and walkthrough with you.</p></div>
</div>
</div>
</section>
<!-- WHY CHOOSE US FOR WIRING (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">Wiring <span>Advantages</span></h2>
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Quality materials, expert craftsmanship, and longterm reliability.</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 first</h5><p>AFCI/GFCI protection, proper grounding, and strict NEC compliance.</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 materials</h5><p>Copper wiring, certified breakers, and durable conduit from top brands.</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>Futureready</h5><p>Larger conduit, extra capacity for smart home or EV upgrades.</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-clock"></i></div><div><h5>Minimal disruption</h5><p>We work efficiently, clean up daily, and respect your schedule.</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 pricing</h5><p>Itemized quotes, no hidden fees, fixedprice options available.</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 rewiring work backed by our comprehensive warranty.</p></div></div></div>
</div>
</div>
</section>
<!-- PROJECT GALLERY (wiring 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 projects</div>
<h2 class="section-title">Wiring <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-1581092795360-fd1ca04f0952?w=600&q=80" alt="panel upgrade"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>200A panel upgrade</h5><span>Residential</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-1497366216548-37526070297c?w=600&q=80" alt="office rewiring"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Full office rewiring</h5><span>Commercial</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" alt="old home rewiring"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Victorian home rewire</h5><span>Historical</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="industrial"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Factory lighting circuit</h5><span>Industrial</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-1516156008625-3a9d6067fab5?w=600&q=80" alt="EV charger"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>EV charger circuit</h5><span>Garage</span></div></div></div>
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="kitchen wiring"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Kitchen remodel wiring</h5><span>Residential</span></div></div></div>
</div>
</div>
</section>
<!-- TESTIMONIAL (wiring 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">Trusted for <span>Rewiring</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">We bought a 1920s house with cloth wiring and knobandtube. VoltEdge rewired the entire place in a week, with minimal wall damage. They even ran new circuits for our modern kitchen. Now we have peace of mind and plenty of power.</p>
<div class="testi-author"><img src="https://randomuser.me/api/portraits/women/68.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Emily Foster</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 rewire? 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>Wiring & Rewiring</option><option>Electrical Installation</option><option>Lighting</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>