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

added first three mockups

Browse Source
This commit is contained in:
westfarn
2026-07-20 05:38:53 -05:00
parent 4dce423c4f
commit f839df7863
864 changed files with 235286 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
proposals/select-electrical/mockup/index.html
Executable
+895
View File
@@ -0,0 +1,895 @@
<!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="Select Electrical Services — licensed electrician serving Western Chicago suburbs since 1984. Troubleshooting, lighting, panel upgrades, EV charging, and more." />
<meta name="keywords"
content="electrician Naperville, Select Electrical, panel upgrade, EV charger, lighting installation, DuPage Will Kane Kendall Cook" />
<title>Select Electrical Services | Western Chicago Suburbs Since 1984</title>
<link rel="icon" href="assets/images/logo-select-electrical.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>
<style>
.preview-concept-banner{position:fixed;top:0;left:0;right:0;z-index:10000;background:#111827;color:#e5e7eb;font:600 13px/1.4 system-ui,sans-serif;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;text-align:center}
.preview-concept-banner a{color:#93c5fd;text-decoration:none;font-weight:600}
.preview-concept-banner span{opacity:.85;font-weight:400}
body{padding-top:42px}
#mainNav.fixed-top{top:42px}
</style>
<div class="preview-concept-banner">UX Concept Preview — Select Electrical Services <span>· Not the live website</span> · <a href="ux-gallery.html">Feature gallery</a> · <a href="pricing.html">Pricing</a></div>
<!-- ============================================
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">
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
</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="#testimonials">Reviews</a></li>
<li class="nav-item"><a class="nav-link" href="#team">Trust</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
</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">
Select <span class="accent">Electrical</span><br />
Everything Electrical —
<span class="accent">No Job Too Small</span>
</h1>
<p class="hero-subtitle" data-aos="fade-up" data-aos-delay="320">
Licensed electrician serving Western Chicago suburbs in DuPage, Will, Kane,
Kendall, and Cook Counties since 1984. Call or text for free estimates.
</p>
<div class="d-flex flex-wrap gap-3" data-aos="fade-up" data-aos-delay="440">
<a href="tel:+16302028020" class="btn-primary-main">
<i class="fas fa-phone-alt"></i> Call or Text
</a>
<a href="#contact" class="btn-outline-main">
<i class="fas fa-envelope"></i> Request a Quote
</a>
</div>
<!-- Stats -->
<div class="hero-stats" data-aos="fade-up" data-aos-delay="540">
<div>
<div class="hero-stat-num">40+</div>
<div class="hero-stat-label">Years Experience</div>
</div>
<div>
<div class="hero-stat-num">4.8</div>
<div class="hero-stat-label">Google Rating</div>
</div>
<div>
<div class="hero-stat-num">200+</div>
<div class="hero-stat-label">Angie's List Reviews</div>
</div>
<div>
<div class="hero-stat-num">5</div>
<div class="hero-stat-label">Counties Served</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>
Licensed / Bonded / Insured
</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>Licensed · Bonded · Insured</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">40+</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 Select Electrical</div>
<h2 class="section-title">Powering Western Suburbs <span>Since 1984</span></h2>
<p class="section-desc">
Select Electrical Services is a licensed electrician based in Naperville,
serving residential, commercial, and industrial needs across DuPage, Will,
Kane, Kendall, and Cook Counties. Small repairs to full upgrades — expert
troubleshooting since 1984.
</p>
<ul class="about-list mt-4">
<li><i class="fas fa-check-circle"></i> Licensed, bonded, and insured</li>
<li><i class="fas fa-check-circle"></i> Small repairs to full upgrades — no job too small</li>
<li><i class="fas fa-check-circle"></i> Available 24 hours · free estimates</li>
<li><i class="fas fa-check-circle"></i> Code corrections and safety inspections</li>
<li><i class="fas fa-check-circle"></i> EV charging, panel upgrades, lighting, and more</li>
</ul>
<div class="counter-grid">
<div class="counter-card">
<div class="counter-num" data-target="40">0<span>+</span></div>
<div class="counter-lbl">Years Experience</div>
</div>
<div class="counter-card">
<div class="counter-num" data-target="20">0</div>
<div class="counter-lbl">Google Reviews</div>
</div>
<div class="counter-card">
<div class="counter-num" data-target="200">0<span>+</span></div>
<div class="counter-lbl">Angie's List Reviews</div>
</div>
<div class="counter-card">
<div class="counter-num" data-target="5">0</div>
<div class="counter-lbl">Counties Covered</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">
Everything electrical — troubleshooting and repairs, lighting, panels, fans,
outlets, code work, and EV charging.
</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-search"></i></div>
<h5>Troubleshooting &amp; Repairs</h5>
<p>Expert diagnosis and repair for residential, commercial, and industrial electrical
problems — small fixes to full upgrades.</p>
<a href="emergency-repair.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-lightbulb"></i></div>
<h5>Lighting Installation</h5>
<p>Indoor and outdoor lighting, recessed fixtures, and upgrades that improve both
function and look of any room.</p>
<a href="lighting-installation.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-plug"></i></div>
<h5>Panel Upgrades &amp; Breakers</h5>
<p>Panel upgrades, circuit breakers, and whole-house surge protection to keep your
electrical system safe and up to code.</p>
<a href="electrical-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-fan"></i></div>
<h5>Ceiling &amp; Exhaust Fans</h5>
<p>Ceiling fans and exhaust fan installation for comfort, airflow, and lower utility
bills — installed safely and to code.</p>
<a href="wiring-services.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-toggle-on"></i></div>
<h5>Outlets, Switches &amp; GFCI</h5>
<p>Outlet and switch installation or relocation, GFCI protection, and code corrections
for safer kitchens, baths, and garages.</p>
<a href="electrical-maintenance.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-car"></i></div>
<h5>EV Charging Installation</h5>
<p>Code-compliant 240V garage circuits and EV charger installs so you can charge at
home without hassle.</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 Select Electrical</div>
<h2 class="section-title light">Trusted Across the <span>Western</span> Suburbs</h2>
<p style="color:rgba(255,255,255,0.55); font-size:0.95rem; line-height:1.75; margin-top:14px;">
Serving all electrical needs since 1984 — honest pricing, skilled work, and
a reputation backed by hundreds of Angie's List and Google reviews.
</p>
<a href="tel:+16302028020" class="btn-primary-main mt-4">
<i class="fas fa-phone-alt"></i> Call or Text (630) 202-8020
</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>
<p style="color:rgba(255,255,255,0.55);max-width:520px;margin:12px auto 0">4.8 ★ on Google · 200+ reviews on Angie's List</p>
</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 — Google Business -->
<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">Dan completed multiple electrical projects for me and all the work was done
professionally and in a timely manner. He was prompt, honest, and very courteous. He was very
upfront with project costs and completed everything as he said he would and for the original
quoted price. Dan is very skilled and trustworthy, and I would definitely recommend Select
Electrical!</p>
<div class="testi-author">
<div class="testi-avatar" style="width:52px;height:52px;border-radius:50%;background:#1a4f6e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700">TP</div>
<div>
<div class="testi-name">Teri Peot</div>
<div class="testi-role">Google Review · 5 stars</div>
</div>
</div>
</div>
</div>
<!-- Slide 2 — Google Business -->
<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">Dan was excellent. Very knowledgeable and did great work. We had an outlet
installed for our EV and are very pleased with the results.</p>
<div class="testi-author">
<div class="testi-avatar" style="width:52px;height:52px;border-radius:50%;background:#1a4f6e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700">AH</div>
<div>
<div class="testi-name">Arne Hendricksen</div>
<div class="testi-role">Google Review · EV outlet install</div>
</div>
</div>
</div>
</div>
<!-- Slide 3 — reputation -->
<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">Over 200 reviews on Angie's List and a 4.8 rating on Google Business.
Homeowners across Naperville and the western suburbs trust Select Electrical for honest quotes,
skilled work, and jobs done right the first time.</p>
<div class="testi-author">
<div class="testi-avatar" style="width:52px;height:52px;border-radius:50%;background:#c45c26;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700"><i class="fas fa-star"></i></div>
<div>
<div class="testi-name">Community reputation</div>
<div class="testi-role">Angie's List · Google Business</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>
<!-- ============================================
TRUST / CREDENTIALS
============================================ -->
<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">Why Homeowners Call</div>
<h2 class="section-title">Trusted <span>Credentials</span></h2>
<p class="section-desc mx-auto">Licensed electrician serving the western Chicago suburbs since 1984 —
residential, commercial, and industrial.</p>
</div>
<div class="row g-4 justify-content-center">
<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" style="display:flex;align-items:center;justify-content:center;min-height:220px;background:#0f2740">
<i class="fas fa-id-badge" style="font-size:4rem;color:var(--yellow)"></i>
</div>
<div class="team-info">
<h5>Licensed Electrician</h5>
<span>Illinois · Bonded &amp; Insured</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" style="display:flex;align-items:center;justify-content:center;min-height:220px;background:#0f2740">
<i class="fas fa-map-marked-alt" style="font-size:4rem;color:var(--yellow)"></i>
</div>
<div class="team-info">
<h5>5 Counties</h5>
<span>DuPage · Will · Kane · Kendall · Cook</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" style="display:flex;align-items:center;justify-content:center;min-height:220px;background:#0f2740">
<i class="fas fa-star" style="font-size:4rem;color:var(--yellow)"></i>
</div>
<div class="team-info">
<h5>4.8 Google Rating</h5>
<span>20 Google reviews · 200+ Angie's List</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" style="display:flex;align-items:center;justify-content:center;min-height:220px;background:#0f2740">
<i class="fas fa-clock" style="font-size:4rem;color:var(--yellow)"></i>
</div>
<div class="team-info">
<h5>Open 24 Hours</h5>
<span>Call or text · Free estimates</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>Select Electrical</span></h2>
<p class="section-desc mx-auto">Ready for a repair, upgrade, or free estimate? Call, text, or send a message —
no job too small.</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>1778 Villanova Drive<br>Naperville, IL 60565</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-phone-alt"></i></div>
<div>
<h6>Call or Text</h6>
<p><a href="tel:+16302028020">(630) 202-8020</a><br>Available 24 hours</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-envelope"></i></div>
<div>
<h6>Email</h6>
<p><a href="mailto:select8020@gmail.com">select8020@gmail.com</a></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>Open 24 hours<br>Free estimates</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>Troubleshooting &amp; Repairs</option>
<option>Lighting Installation</option>
<option>Panel Upgrades / Circuit Breakers</option>
<option>Ceiling / Exhaust Fans</option>
<option>Outlets / Switches / GFCI</option>
<option>Code Corrections / Safety Inspection</option>
<option>EV Charging Installation</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://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
title="Select Electrical Services — Naperville, IL"></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">
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
</div>
<p class="footer-desc">
Licensed electrician serving Western Chicago suburbs since 1984.
Residential, commercial, and industrial — no job too small.
</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">Credentials</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">Panel Upgrades</a></li>
<li><a href="wiring-services.html">Fans</a></li>
<li><a href="lighting-installation.html">Lighting</a></li>
<li><a href="electrical-maintenance.html">Outlets &amp; GFCI</a></li>
<li><a href="emergency-repair.html">Repairs</a></li>
<li><a href="smart-home.html">EV Charging</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">Select Electrical Services</a>. All rights reserved. · Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></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>