added first three mockups
This commit is contained in:
Executable
+907
@@ -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 & <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 & 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 & 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 & 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 & 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 & 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 & 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>Mon–Fri: 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 & 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>
|
||||
Reference in New Issue
Block a user