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

907 lines
41 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="VoltEdge Electrical Professional 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>