added first three mockups
This commit is contained in:
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+2121
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,471 @@
|
||||
/* Shared UX gallery + pricing hub (platform proposals) */
|
||||
:root {
|
||||
--ink: #12141a;
|
||||
--muted: #5c6570;
|
||||
--surface: #f3f5f7;
|
||||
--card: #fff;
|
||||
--border: #d9dee5;
|
||||
--accent: #1a4f6e;
|
||||
--accent-2: #c45c26;
|
||||
--ok: #1a7f4b;
|
||||
--warn: #b45309;
|
||||
--banner: #111827;
|
||||
--radius: 4px;
|
||||
--font: "Segoe UI", system-ui, sans-serif;
|
||||
--display: Georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
color: var(--ink);
|
||||
background: var(--surface);
|
||||
line-height: 1.5;
|
||||
}
|
||||
a { color: var(--accent); }
|
||||
.proposal-banner {
|
||||
background: var(--banner);
|
||||
color: #e5e7eb;
|
||||
font-size: 13px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.proposal-banner a { color: #93c5fd; text-decoration: none; }
|
||||
.proposal-banner a:hover { text-decoration: underline; }
|
||||
.proposal-banner .tag {
|
||||
display: inline-block;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.hub-hero {
|
||||
background: linear-gradient(135deg, #0b1f33 0%, #1a4f6e 55%, #2a6f8f 100%);
|
||||
color: #fff;
|
||||
padding: 56px 24px 48px;
|
||||
}
|
||||
.hub-hero.paint {
|
||||
background: linear-gradient(135deg, #1a2332 0%, #3d4a5c 50%, #c4a574 120%);
|
||||
}
|
||||
.hub-hero h1 {
|
||||
font-family: var(--display);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 12px;
|
||||
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||||
}
|
||||
.hub-hero p { max-width: 560px; margin: 0; opacity: 0.92; }
|
||||
.hub-section {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px 8px;
|
||||
}
|
||||
.hub-section h2 {
|
||||
font-family: var(--display);
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
.hub-section .sec-lead {
|
||||
margin: 0 0 16px;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
.hub-grid {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 40px;
|
||||
padding: 0 24px;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
}
|
||||
.hub-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
padding: 20px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
display: block;
|
||||
}
|
||||
.hub-card:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hub-card.planned {
|
||||
opacity: 0.85;
|
||||
border-style: dashed;
|
||||
}
|
||||
.hub-card .eyebrow {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.hub-card.paint .eyebrow { color: var(--accent-2); }
|
||||
.hub-card h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
font-family: var(--display);
|
||||
}
|
||||
.hub-card p { margin: 0; font-size: 14px; color: var(--muted); }
|
||||
.hub-card .status {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ok);
|
||||
}
|
||||
.hub-card.planned .status { color: var(--warn); }
|
||||
|
||||
/* Pricing */
|
||||
.pricing-layout {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px 64px;
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
grid-template-columns: 1fr minmax(240px, 300px);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.pricing-layout { grid-template-columns: 1fr; }
|
||||
}
|
||||
.price-panel, .price-summary {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
padding: 20px;
|
||||
}
|
||||
.price-panel h2, .price-summary h2 {
|
||||
font-family: var(--display);
|
||||
font-size: 1.15rem;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.feat-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.feat-row:last-child { border-bottom: none; }
|
||||
.feat-row.locked { background: #f8fafc; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
|
||||
.feat-row label { font-weight: 600; cursor: pointer; }
|
||||
.feat-row .desc { font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 2px; }
|
||||
.feat-row .amt { font-size: 13px; text-align: right; white-space: nowrap; color: var(--muted); }
|
||||
.feat-row .amt strong { display: block; color: var(--ink); font-size: 14px; }
|
||||
.feat-row input:disabled + .feat-text label { cursor: default; }
|
||||
.dep-note { font-size: 12px; color: var(--warn); margin-top: 4px; }
|
||||
.price-summary { position: sticky; top: 56px; }
|
||||
.price-summary .line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.price-summary .total {
|
||||
border-top: 2px solid var(--ink);
|
||||
margin-top: 12px;
|
||||
padding-top: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-family: var(--display);
|
||||
}
|
||||
.price-summary .disclaimer {
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.stub-page {
|
||||
min-height: calc(100vh - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
.stub-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
max-width: 480px;
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
.stub-card h1 { font-family: var(--display); font-size: 1.5rem; margin: 0 0 8px; }
|
||||
.stub-card p { color: var(--muted); margin: 0 0 20px; }
|
||||
.stub-card a.btn {
|
||||
display: inline-block;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 10px 18px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* —— Portal shell —— */
|
||||
body.portal { margin: 0; background: var(--surface); font-family: var(--font); color: var(--ink); }
|
||||
.portal-shell { display: flex; min-height: calc(100vh - 36px); }
|
||||
.portal-sidebar {
|
||||
width: 220px; flex-shrink: 0; background: #0b1f33; color: #cbd5e1;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.portal-brand {
|
||||
padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
|
||||
font-family: var(--display); font-weight: 700; color: #fff; font-size: 14px;
|
||||
text-decoration: none; display: block;
|
||||
}
|
||||
.portal-brand span { display: block; color: #7dd3da; font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-top: 2px; font-family: var(--font); }
|
||||
.portal-nav { padding: 12px 0; flex: 1; overflow-y: auto; }
|
||||
.portal-nav .nav-section {
|
||||
font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #64748b;
|
||||
padding: 14px 18px 6px;
|
||||
}
|
||||
.portal-nav a {
|
||||
display: block; padding: 9px 18px; color: #94a3b8; text-decoration: none; font-size: 13px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.portal-nav a:hover { color: #fff; background: rgba(255,255,255,.04); }
|
||||
.portal-nav a.active { color: #fff; background: rgba(26,79,110,.35); border-left-color: #7dd3da; }
|
||||
.portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||||
.portal-topbar {
|
||||
background: #fff; border-bottom: 1px solid var(--border);
|
||||
padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
||||
}
|
||||
.portal-topbar h1 { margin: 0; font-size: 20px; font-family: var(--display); font-weight: 600; }
|
||||
.portal-user { font-size: 13px; color: var(--muted); }
|
||||
.portal-user strong { color: var(--ink); }
|
||||
.portal-user a { color: var(--accent); }
|
||||
.portal-content { padding: 24px; flex: 1; }
|
||||
.proposal-note {
|
||||
border-left: 3px solid var(--accent); background: #e8f0f5; padding: 12px 16px;
|
||||
margin: 0 0 20px; font-size: 14px; color: #0d3a45;
|
||||
}
|
||||
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: #fff; border: 1px solid var(--border); padding: 18px; }
|
||||
.stat-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
|
||||
.stat-card .value { font-size: 28px; font-weight: 700; font-family: var(--display); margin-top: 4px; }
|
||||
.stat-card .delta { font-size: 12px; margin-top: 4px; color: var(--ok); }
|
||||
.panel { background: #fff; border: 1px solid var(--border); margin-bottom: 20px; }
|
||||
.panel-h {
|
||||
padding: 14px 18px; border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||||
}
|
||||
.panel-h h2 { margin: 0; font-size: 15px; font-family: var(--display); font-weight: 600; }
|
||||
.panel-b { padding: 18px; }
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
@media (max-width: 900px) {
|
||||
.portal-shell { flex-direction: column; }
|
||||
.portal-sidebar { width: 100%; }
|
||||
.portal-nav { display: flex; flex-wrap: wrap; padding: 8px; }
|
||||
.portal-nav .nav-section { display: none; }
|
||||
.portal-nav a { border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; }
|
||||
.portal-nav a.active { border-bottom-color: #7dd3da; background: transparent; }
|
||||
.split { grid-template-columns: 1fr; }
|
||||
}
|
||||
.btn {
|
||||
display: inline-block; padding: 9px 18px; font-size: 13px; font-weight: 600;
|
||||
border: none; cursor: pointer; text-decoration: none; font-family: var(--font);
|
||||
}
|
||||
.btn-primary { background: var(--accent); color: #fff; }
|
||||
.btn-primary:hover { background: #143d56; color: #fff; text-decoration: none; }
|
||||
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--ink); }
|
||||
.btn-sm { padding: 6px 12px; font-size: 12px; }
|
||||
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.table th {
|
||||
text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
|
||||
color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600;
|
||||
}
|
||||
.table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
||||
.table tr:hover td { background: #f8fafc; }
|
||||
.table a { color: var(--accent); text-decoration: none; font-weight: 500; }
|
||||
.badge {
|
||||
display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
|
||||
border-radius: 2px; text-transform: uppercase; letter-spacing: .04em;
|
||||
}
|
||||
.badge-new { background: #d0eef0; color: #00626c; }
|
||||
.badge-contacted { background: #fef3c7; color: #92400e; }
|
||||
.badge-won { background: #d1fae5; color: #065f46; }
|
||||
.badge-lost { background: #fee2e2; color: #991b1b; }
|
||||
.badge-sent { background: #d0eef0; color: #00626c; }
|
||||
.badge-scheduled { background: #ede9fe; color: #5b21b6; }
|
||||
.badge-paid { background: #d1fae5; color: #065f46; }
|
||||
.badge-open { background: #fef3c7; color: #92400e; }
|
||||
.badge-draft { background: #f3f4f6; color: #4b5563; }
|
||||
.form-grid { display: grid; gap: 16px; }
|
||||
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
|
||||
@media (max-width: 700px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }
|
||||
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #374151; }
|
||||
.field input, .field select, .field textarea {
|
||||
width: 100%; padding: 10px 12px; border: 1px solid var(--border); font: inherit; background: #fff; box-sizing: border-box;
|
||||
}
|
||||
.field textarea { min-height: 100px; resize: vertical; }
|
||||
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
|
||||
.login-wrap {
|
||||
min-height: calc(100vh - 36px); display: flex; align-items: center; justify-content: center;
|
||||
background: linear-gradient(160deg, #0b1f33, #1a4f6e 60%, #e8f0f5 60%); padding: 24px;
|
||||
}
|
||||
.login-card { background: #fff; width: 100%; max-width: 400px; padding: 36px 32px; border: 1px solid var(--border); }
|
||||
.login-card h1 { font-family: var(--display); font-size: 22px; margin: 0 0 6px; }
|
||||
.login-card .sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
|
||||
.chart-ph {
|
||||
height: 220px; background: linear-gradient(180deg, #e8f0f5 0%, #fff 100%);
|
||||
border: 1px dashed #a8d8dc; display: flex; align-items: flex-end; gap: 8px; padding: 24px 16px 16px;
|
||||
}
|
||||
.chart-ph .bar { flex: 1; background: var(--accent); opacity: .75; border-radius: 2px 2px 0 0; min-height: 20px; }
|
||||
.channel-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
|
||||
.channel-tabs a {
|
||||
padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--muted);
|
||||
text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
|
||||
}
|
||||
.channel-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
.connect-grid { display: grid; gap: 12px; }
|
||||
.connect-card {
|
||||
display: flex; gap: 14px; align-items: flex-start; text-align: left;
|
||||
padding: 14px; border: 1px solid var(--border); background: #fff; width: 100%;
|
||||
cursor: pointer; font: inherit; color: inherit;
|
||||
}
|
||||
.connect-card:hover { border-color: var(--accent); }
|
||||
.platform-icon {
|
||||
width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center;
|
||||
justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; font-size: 14px;
|
||||
}
|
||||
.platform-icon.meta { background: #1877f2; }
|
||||
.platform-icon.ig { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); font-size: 12px; }
|
||||
.platform-icon.li { background: #0a66c2; }
|
||||
.social-phone {
|
||||
width: 100%; max-width: 360px; background: #fff; border: 1px solid #d1d5db;
|
||||
box-shadow: 0 8px 30px rgba(15,23,42,.12); overflow: hidden; font-size: 14px;
|
||||
}
|
||||
.soc-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
|
||||
.soc-avatar {
|
||||
width: 40px; height: 40px; background: var(--accent); color: #fff; display: flex;
|
||||
align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; border-radius: 50%;
|
||||
}
|
||||
.soc-name { font-weight: 700; font-size: 13px; }
|
||||
.soc-meta { font-size: 11px; color: #6b7280; }
|
||||
.soc-caption { padding: 0 14px 12px; white-space: pre-wrap; line-height: 1.4; font-size: 13px; }
|
||||
.soc-image { height: 200px; background: linear-gradient(135deg, #e5e7eb, #cbd5e1); }
|
||||
.soc-actions { padding: 10px 14px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #4b5563; font-weight: 600; }
|
||||
.ai-chat { display: flex; flex-direction: column; height: min(640px, 75vh); background: #fff; border: 1px solid var(--border); }
|
||||
.ai-chat-h { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
|
||||
.ai-chat-h h2 { margin: 0; font-size: 15px; font-family: var(--display); }
|
||||
.ai-pill { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #e8f0f5; color: var(--accent); padding: 3px 8px; }
|
||||
.ai-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, #f8fafc, #fff 40%); }
|
||||
.ai-msg { max-width: 92%; font-size: 13px; line-height: 1.45; }
|
||||
.ai-msg.bot { align-self: flex-start; }
|
||||
.ai-msg.user { align-self: flex-end; }
|
||||
.ai-msg .bubble { padding: 10px 12px; border: 1px solid var(--border); background: #fff; }
|
||||
.ai-msg.user .bubble { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
.ai-msg .who { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
|
||||
.ai-draft { margin-top: 8px; padding: 10px; background: #f8fafc; border: 1px dashed #a8d8dc; white-space: pre-wrap; font-size: 12px; }
|
||||
.ai-chat-input { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end; }
|
||||
.ai-chat-input textarea { flex: 1; min-height: 44px; max-height: 100px; resize: vertical; border: 1px solid var(--border); padding: 8px 10px; font: inherit; font-size: 13px; }
|
||||
.postcard {
|
||||
width: 100%; max-width: 420px; aspect-ratio: 6/4; position: relative; overflow: hidden;
|
||||
background: #111; box-shadow: 0 12px 40px rgba(15,23,42,.25); color: #fff;
|
||||
}
|
||||
.postcard-media { position: absolute; inset: 0; background: linear-gradient(135deg, #1a4f6e, #0b1f33 60%, #c45c26); }
|
||||
.postcard-copy { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
|
||||
.postcard-headline { font-family: var(--display); font-weight: 700; font-size: 26px; border-left: 4px solid #7dd3da; padding-left: 10px; line-height: 1.1; }
|
||||
.postcard-sub { margin-top: 8px; font-size: 14px; opacity: .95; }
|
||||
.size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.size-option {
|
||||
border: 1px solid var(--border); background: #fff; padding: 10px 12px; text-align: left;
|
||||
cursor: pointer; font: inherit; color: inherit;
|
||||
}
|
||||
.size-option.active { border-color: var(--accent); background: #e8f0f5; box-shadow: inset 3px 0 0 var(--accent); }
|
||||
.designer-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 20px; align-items: start; }
|
||||
@media (max-width: 960px) { .designer-layout { grid-template-columns: 1fr; } }
|
||||
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 12px; }
|
||||
.calendar-grid .dow { text-align: center; color: var(--muted); font-weight: 600; padding: 6px; }
|
||||
.calendar-grid .day {
|
||||
aspect-ratio: 1; border: 1px solid var(--border); background: #fff; padding: 6px; position: relative;
|
||||
}
|
||||
.calendar-grid .day.has-post { background: #e8f0f5; }
|
||||
.calendar-grid .day .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 4px; }
|
||||
.steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
.step {
|
||||
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
|
||||
padding: 8px 12px; background: #fff; border: 1px solid var(--border);
|
||||
}
|
||||
.step span {
|
||||
width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #374151;
|
||||
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
|
||||
}
|
||||
.step.active { border-color: var(--accent); color: var(--ink); }
|
||||
.step.active span { background: var(--accent); color: #fff; }
|
||||
.dropzone { border: 2px dashed var(--border); padding: 32px; text-align: center; background: #f8fafc; }
|
||||
.public-simple { max-width: 720px; margin: 40px auto; padding: 0 24px 64px; }
|
||||
.public-simple .card { background: #fff; border: 1px solid var(--border); padding: 32px; }
|
||||
.public-nav {
|
||||
background: #fff; border-bottom: 1px solid var(--border);
|
||||
padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
||||
}
|
||||
.public-nav .brand { font-family: var(--display); font-weight: 700; color: var(--ink); text-decoration: none; font-size: 18px; }
|
||||
.public-nav .links a { margin-left: 16px; font-size: 14px; color: var(--muted); text-decoration: none; }
|
||||
.public-nav .links a:hover { color: var(--accent); }
|
||||
.blog-list { display: grid; gap: 16px; }
|
||||
.blog-item { background: #fff; border: 1px solid var(--border); padding: 20px; text-decoration: none; color: inherit; display: block; }
|
||||
.blog-item:hover { border-color: var(--accent); color: inherit; text-decoration: none; }
|
||||
.blog-item h3 { margin: 0 0 6px; font-family: var(--display); }
|
||||
.blog-item .meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
|
||||
.blog-item p { margin: 0; font-size: 14px; color: var(--muted); }
|
||||
.pay-box { max-width: 480px; margin: 48px auto; background: #fff; border: 1px solid var(--border); padding: 32px; }
|
||||
.pay-box h1 { font-family: var(--display); margin: 0 0 8px; }
|
||||
.pay-amount { font-size: 36px; font-weight: 700; font-family: var(--display); margin: 16px 0; }
|
||||
.error-hero { text-align: center; padding: 80px 24px; }
|
||||
.error-hero h1 { font-family: var(--display); font-size: 4rem; margin: 0; color: var(--accent); }
|
||||
.muted { color: var(--muted); font-size: 12px; }
|
||||
.theme-paint {
|
||||
--accent: #c45c26;
|
||||
--accent-2: #1a2332;
|
||||
}
|
||||
.theme-paint .portal-sidebar { background: #1a2332; }
|
||||
.theme-paint .portal-nav a.active { background: rgba(196,92,38,.25); border-left-color: #c45c26; }
|
||||
.theme-paint .login-wrap { background: linear-gradient(160deg, #1a2332, #3d4a5c 60%, #f3efe8 60%); }
|
||||
.theme-paint .proposal-note { border-left-color: #c45c26; background: #faf6f1; color: #5c3d2e; }
|
||||
.theme-paint .btn-primary { background: #c45c26; }
|
||||
.theme-paint .btn-primary:hover { background: #a34a1e; }
|
||||
.theme-paint .portal-nav a.active { border-left-color: #e8b88a; }
|
||||
|
||||
/* Vendor credit */
|
||||
.aiml-site-credit {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
padding: 16px 24px 28px;
|
||||
}
|
||||
.aiml-site-credit a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.aiml-site-credit a:hover { text-decoration: underline; }
|
||||
body.portal .aiml-site-credit {
|
||||
border-top: 1px solid var(--border);
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
|
||||
.brand-logo-link { display:inline-flex; align-items:center; }
|
||||
.brand-logo--hub { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 847 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 534 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 436 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 649 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 802 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
+1
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
+146
@@ -0,0 +1,146 @@
|
||||
|
||||
// ============================================
|
||||
// PRELOADER
|
||||
// ============================================
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
document.getElementById('preloader').classList.add('hidden');
|
||||
document.body.style.overflow = 'visible';
|
||||
}, 2200);
|
||||
});
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// ============================================
|
||||
// AOS INIT
|
||||
// ============================================
|
||||
AOS.init({
|
||||
duration: 700,
|
||||
once: true,
|
||||
easing: 'ease-out-cubic',
|
||||
offset: 60,
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// STICKY NAVBAR
|
||||
// ============================================
|
||||
const nav = document.getElementById('mainNav');
|
||||
window.addEventListener('scroll', () => {
|
||||
nav.classList.toggle('scrolled', window.scrollY > 50);
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// SMOOTH SCROLL FOR NAV LINKS
|
||||
// ============================================
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
const offset = nav.offsetHeight;
|
||||
const top = target.getBoundingClientRect().top + window.scrollY - offset;
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
// Close mobile menu if open
|
||||
const bsCollapse = bootstrap.Collapse.getInstance(document.getElementById('navMenu'));
|
||||
if (bsCollapse) bsCollapse.hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// ANIMATED COUNTERS
|
||||
// ============================================
|
||||
const counters = document.querySelectorAll('[data-target]');
|
||||
const counterObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target;
|
||||
const target = parseInt(el.dataset.target);
|
||||
const suffix = el.querySelector('span') ? el.querySelector('span').textContent : '';
|
||||
const duration = 1800;
|
||||
const step = Math.ceil(target / (duration / 16));
|
||||
let current = 0;
|
||||
const update = () => {
|
||||
current = Math.min(current + step, target);
|
||||
el.innerHTML = current.toLocaleString() + `<span>${suffix}</span>`;
|
||||
if (current < target) requestAnimationFrame(update);
|
||||
};
|
||||
update();
|
||||
counterObserver.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
counters.forEach(c => counterObserver.observe(c));
|
||||
|
||||
// ============================================
|
||||
// TESTIMONIAL SLIDER
|
||||
// ============================================
|
||||
(() => {
|
||||
const track = document.getElementById('testiTrack');
|
||||
const slides = track.children;
|
||||
const totalSlides = slides.length;
|
||||
const dots = document.querySelectorAll('.slider-dot');
|
||||
let current = 0;
|
||||
|
||||
const go = (idx) => {
|
||||
current = (idx + totalSlides) % totalSlides;
|
||||
track.style.transform = `translateX(-${current * 100}%)`;
|
||||
dots.forEach((d, i) => d.classList.toggle('active', i === current));
|
||||
};
|
||||
|
||||
document.getElementById('testiPrev').addEventListener('click', () => go(current - 1));
|
||||
document.getElementById('testiNext').addEventListener('click', () => go(current + 1));
|
||||
dots.forEach(d => d.addEventListener('click', () => go(parseInt(d.dataset.index))));
|
||||
|
||||
// Auto-advance
|
||||
let autoTimer = setInterval(() => go(current + 1), 5000);
|
||||
track.parentElement.addEventListener('mouseenter', () => clearInterval(autoTimer));
|
||||
track.parentElement.addEventListener('mouseleave', () => { autoTimer = setInterval(() => go(current + 1), 5000); });
|
||||
|
||||
// Touch support
|
||||
let startX = 0;
|
||||
track.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, { passive: true });
|
||||
track.addEventListener('touchend', e => {
|
||||
const diff = startX - e.changedTouches[0].clientX;
|
||||
if (Math.abs(diff) > 50) go(diff > 0 ? current + 1 : current - 1);
|
||||
});
|
||||
})();
|
||||
|
||||
// ============================================
|
||||
// SCROLL TO TOP BUTTON
|
||||
// ============================================
|
||||
const scrollTopBtn = document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll', () => {
|
||||
scrollTopBtn.classList.toggle('visible', window.scrollY > 400);
|
||||
});
|
||||
scrollTopBtn.addEventListener('click', () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// CONTACT FORM SUBMISSION (demo)
|
||||
// ============================================
|
||||
document.getElementById('contactForm').addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const name = document.getElementById('name').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const message = document.getElementById('message').value.trim();
|
||||
if (!name || !email || !message) {
|
||||
alert('Please fill in all required fields (Name, Email, Message).');
|
||||
return;
|
||||
}
|
||||
this.style.display = 'none';
|
||||
document.getElementById('formSuccess').style.display = 'block';
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// NEWSLETTER (demo)
|
||||
// ============================================
|
||||
document.querySelector('.newsletter-btn').addEventListener('click', function () {
|
||||
const input = this.previousElementSibling;
|
||||
if (input.value && input.value.includes('@')) {
|
||||
this.innerHTML = '<i class="fas fa-check"></i>';
|
||||
this.style.background = '#22c55e';
|
||||
input.value = '';
|
||||
input.placeholder = 'Subscribed!';
|
||||
}
|
||||
});
|
||||
+404
@@ -0,0 +1,404 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="5 Essential Electrical Safety Checks for Homeowners - A comprehensive guide from Select Electrical Services on keeping your home safe." />
|
||||
<meta name="keywords" content="electrical safety, home safety, electrical tips, selectelectrical blog" />
|
||||
<title>Select Electrical Services | 5 Essential Electrical Safety Checks</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"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- PAGE HEADER (smaller) -->
|
||||
<section class="page-header-sm">
|
||||
<div class="page-header-bg" role="img" aria-label="electrical safety"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-shield-alt"></i> Safety Tips</div>
|
||||
<h1 data-aos="fade-up">5 Essential Electrical <span>Safety Checks</span> for Homeowners</h1>
|
||||
<div class="meta" data-aos="fade-up" data-aos-delay="50">
|
||||
<span><i class="far fa-calendar-alt"></i> March 12, 2025</span>
|
||||
<span><i class="far fa-user"></i> Select Electrical</span>
|
||||
<span><i class="far fa-clock"></i> 6 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOG DETAIL CONTENT -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Main column -->
|
||||
<div class="col-lg-8">
|
||||
<div class="blog-detail" data-aos="fade-up">
|
||||
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=1200&q=80" alt="Electrician checking panel" class="featured-image">
|
||||
|
||||
<p>Electrical safety is often out of sight, out of mind – until something goes wrong. Taking a few minutes each season to perform simple checks can prevent fires, shocks, and costly repairs. Here are five essential safety checks every homeowner should know.</p>
|
||||
|
||||
<h2>1. Inspect Cords and Outlets</h2>
|
||||
<p>Walk through your home and look at every power cord and outlet. Frayed cords, cracked plugs, or loose outlets are fire hazards. If an outlet feels warm to the touch, or if you see discoloration, call a professional immediately. Also, never use an extension cord as permanent wiring – it's a common code violation and safety risk.</p>
|
||||
|
||||
<h2>2. Test Your GFCIs</h2>
|
||||
<p>Ground Fault Circuit Interrupters (GFCIs) are required in kitchens, bathrooms, garages, and outdoors. They protect against shock. Press the "TEST" button – the "RESET" button should pop out. If it doesn't, the outlet needs replacement. Reset by pressing "RESET" firmly. Do this monthly.</p>
|
||||
|
||||
<blockquote>
|
||||
“According to the Electrical Safety Foundation, GFCIs have reduced the risk of electrocution by over 70% since their introduction.”
|
||||
</blockquote>
|
||||
|
||||
<h2>3. Check Your Electrical Panel</h2>
|
||||
<p>Your breaker panel should never feel hot. Listen for buzzing or crackling sounds – those indicate loose connections or failing breakers. If you have an old fuse box or a panel with known safety issues (like Federal Pacific), consider an upgrade. Also, ensure the area around the panel is clear and easily accessible.</p>
|
||||
|
||||
<h2>4. Test Smoke and CO Alarms</h2>
|
||||
<p>Working smoke and carbon monoxide alarms are your last line of defense. Press the test button monthly. Replace batteries at least once a year (or use 10-year sealed units). Alarms themselves should be replaced every 10 years.</p>
|
||||
|
||||
<h2>5. Look for Overloaded Circuits</h2>
|
||||
<p>If lights flicker when you turn on an appliance, or breakers trip frequently, you may have an overloaded circuit. This is especially common in older homes with modern electronics. Consider having a licensed electrician add new circuits or perform a load calculation.</p>
|
||||
|
||||
<p>By staying vigilant and addressing small issues early, you protect your home and family. If you're unsure about any of these checks, Select Electrical is always here to help – schedule an inspection today.</p>
|
||||
|
||||
<!-- Share buttons -->
|
||||
<div class="share-buttons">
|
||||
<a href="#" class="share-btn facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" class="share-btn twitter"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" class="share-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" class="share-btn email"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- Author bio -->
|
||||
<div class="author-bio">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Select Electrical">
|
||||
<div>
|
||||
<h5>Select Electrical</h5>
|
||||
<p>Master Electrician and Safety Specialist at Select Electrical. With over 15 years in the field, Robert is passionate about educating homeowners on electrical safety and code compliance.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comments section -->
|
||||
<div class="comments-section">
|
||||
<h4 class="comments-title">3 Comments</h4>
|
||||
|
||||
<div class="comment">
|
||||
<div class="comment-avatar"><img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sarah M."></div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-author">Sarah Mitchell</div>
|
||||
<div class="comment-date"><i class="far fa-calendar-alt"></i> March 13, 2025 at 9:23 am</div>
|
||||
<p class="comment-text">Great tips! I just tested my GFCIs and one failed. Called Select Electrical and they replaced it within two hours. Highly recommend!</p>
|
||||
<a href="#" class="comment-reply"><i class="fas fa-reply me-1"></i>Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<div class="comment-avatar"><img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Mike T."></div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-author">Mike Thompson</div>
|
||||
<div class="comment-date"><i class="far fa-calendar-alt"></i> March 12, 2025 at 4:15 pm</div>
|
||||
<p class="comment-text">I never thought about the panel buzzing. I'll have to check mine. Thanks for the reminder!</p>
|
||||
<a href="#" class="comment-reply"><i class="fas fa-reply me-1"></i>Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<div class="comment-avatar"><img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Linda"></div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-author">Linda Hayes</div>
|
||||
<div class="comment-date"><i class="far fa-calendar-alt"></i> March 12, 2025 at 10:05 am</div>
|
||||
<p class="comment-text">Great article, Robert! I'll be sharing this with my clients.</p>
|
||||
<a href="#" class="comment-reply"><i class="fas fa-reply me-1"></i>Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reply form -->
|
||||
<div class="reply-form">
|
||||
<h5>Leave a Comment</h5>
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Name *</label>
|
||||
<input type="text" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Email *</label>
|
||||
<input type="email" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label">Comment *</label>
|
||||
<textarea class="form-control" rows="5" required></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn-submit" style="width:auto; padding:12px 32px;">Post Comment</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Categories -->
|
||||
<div class="sidebar-card" data-aos="fade-left">
|
||||
<h5 class="sidebar-title">Categories</h5>
|
||||
<ul class="categories-list">
|
||||
<li><a href="#">Safety Tips (8)</a></li>
|
||||
<li><a href="#">Smart Home (12)</a></li>
|
||||
<li><a href="#">Commercial (6)</a></li>
|
||||
<li><a href="#">Residential (15)</a></li>
|
||||
<li><a href="#">Lighting (9)</a></li>
|
||||
<li><a href="#">EV Charging (4)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Recent Posts -->
|
||||
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="50">
|
||||
<h5 class="sidebar-title">Recent Posts</h5>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">The Ultimate Guide to Smart Lighting Retrofit</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Mar 5, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">When to Rewire Your Office Building</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 28, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">Do You Need a 200-Amp Service Upgrade?</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 20, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="100">
|
||||
<h5 class="sidebar-title">Newsletter</h5>
|
||||
<p style="font-size:0.9rem; color:var(--gray); margin-bottom:15px;">Get the latest articles and safety tips.</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address">
|
||||
<button class="newsletter-btn"><i class="fas fa-paper-plane"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Have questions about electrical safety? Our team is ready to help.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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><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>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="service">I'm interested in</label><select class="form-select" id="service"><option selected disabled>Select</option><option>General Inquiry</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting</option><option>Maintenance</option><option>Smart Home</option></select></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- FOOTER -->
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
// newsletter button demo
|
||||
document.querySelectorAll('.newsletter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const input = this.previousElementSibling;
|
||||
if (input.value && input.value.includes('@')) {
|
||||
this.innerHTML = '<i class="fas fa-check"></i>';
|
||||
this.style.background = '#22c55e';
|
||||
input.value = '';
|
||||
input.placeholder = 'Subscribed!';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+442
@@ -0,0 +1,442 @@
|
||||
<!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 Blog – expert insights, electrical safety tips, company news, and industry updates." />
|
||||
<meta name="keywords" content="electrical blog, electrician tips, home safety, electrical news, selectelectrical" />
|
||||
<title>Select Electrical Services | Blog</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 (same) -->
|
||||
<div id="preloader" aria-hidden="true">
|
||||
<div class="preloader-bolt">
|
||||
<div class="preloader-rings"></div><div class="preloader-rings"></div>
|
||||
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Blog) -->
|
||||
<section class="page-header">
|
||||
<div class="page-header-bg" role="img" aria-label="blog background"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-pen-fancy"></i> Insights & Updates</div>
|
||||
<h1 data-aos="fade-up">Select Electrical <span>Blog</span></h1>
|
||||
<p data-aos="fade-up" data-aos-delay="80">Expert advice, safety tips, company news, and industry trends from our team of certified electricians.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOG CONTENT -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Main posts column -->
|
||||
<div class="col-lg-8">
|
||||
<div class="row g-4">
|
||||
<!-- Blog post 1 -->
|
||||
<div class="col-md-6" data-aos="fade-up">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=600&q=80" alt="Electrician working" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Safety Tips</span>
|
||||
<h5 class="blog-title">5 Essential Electrical Safety Checks for Homeowners</h5>
|
||||
<p class="blog-excerpt">Learn how to identify common hazards like overloaded outlets, flickering lights, and warm switches before they become serious problems.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Select Electrical">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Mar 12, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 2 -->
|
||||
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=600&q=80" alt="Smart home" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Smart Home</span>
|
||||
<h5 class="blog-title">The Ultimate Guide to Smart Lighting Retrofit</h5>
|
||||
<p class="blog-excerpt">Everything you need to know about upgrading your existing fixtures to smart, energy-efficient LED lighting with voice control.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Select Electrical">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Mar 5, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 3 -->
|
||||
<div class="col-md-6" data-aos="fade-up">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="Office rewiring" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Commercial</span>
|
||||
<h5 class="blog-title">When to Rewire Your Office Building</h5>
|
||||
<p class="blog-excerpt">Signs your commercial space needs rewiring, how to plan for minimal downtime, and the benefits of modern electrical systems.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Select Electrical">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Feb 28, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 4 -->
|
||||
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="blog-card">
|
||||
<img src="assets/images/8829.jpg" alt="Panel upgrade" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Electrical Panel</span>
|
||||
<h5 class="blog-title">Do You Need a 200-Amp Service Upgrade?</h5>
|
||||
<p class="blog-excerpt">With EV chargers and modern appliances, many homes need more capacity. We explain the signs and benefits of upgrading.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Select Electrical">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Feb 20, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 5 -->
|
||||
<div class="col-md-6" data-aos="fade-up">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?w=600&q=80" alt="EV charger" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">EV Charging</span>
|
||||
<h5 class="blog-title">Installing a Level 2 EV Charger at Home: What to Expect</h5>
|
||||
<p class="blog-excerpt">From permits to panel capacity, we walk you through the entire process of adding a fast home charger.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/42.jpg" alt="David Chen">
|
||||
<span>David Chen</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Feb 12, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blog post 6 -->
|
||||
<div class="col-md-6" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="blog-card">
|
||||
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="Outdoor lighting" class="blog-img">
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">Landscape</span>
|
||||
<h5 class="blog-title">Transform Your Backyard with Low-Voltage Landscape Lighting</h5>
|
||||
<p class="blog-excerpt">Design ideas, installation tips, and the safety benefits of professional outdoor lighting.</p>
|
||||
<div class="blog-meta">
|
||||
<div class="blog-author">
|
||||
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Sarah M.">
|
||||
<span>Select Electrical</span>
|
||||
</div>
|
||||
<div class="blog-date">
|
||||
<i class="far fa-calendar-alt"></i> Feb 5, 2025
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" data-aos="fade-up">
|
||||
<a href="#" class="page-link active">1</a>
|
||||
<a href="#" class="page-link">2</a>
|
||||
<a href="#" class="page-link">3</a>
|
||||
<a href="#" class="page-link"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Categories -->
|
||||
<div class="sidebar-card" data-aos="fade-left">
|
||||
<h5 class="sidebar-title">Categories</h5>
|
||||
<ul class="categories-list">
|
||||
<li><a href="#">Safety Tips (8)</a></li>
|
||||
<li><a href="#">Smart Home (12)</a></li>
|
||||
<li><a href="#">Commercial (6)</a></li>
|
||||
<li><a href="#">Residential (15)</a></li>
|
||||
<li><a href="#">Lighting (9)</a></li>
|
||||
<li><a href="#">EV Charging (4)</a></li>
|
||||
<li><a href="#">Company News (5)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Recent Posts -->
|
||||
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="50">
|
||||
<h5 class="sidebar-title">Recent Posts</h5>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">5 Essential Electrical Safety Checks for Homeowners</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Mar 12, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">The Ultimate Guide to Smart Lighting Retrofit</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Mar 5, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">When to Rewire Your Office Building</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 28, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post">
|
||||
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=100&q=80" alt="post" class="recent-post-img">
|
||||
<div class="recent-post-content">
|
||||
<h6><a href="#">Do You Need a 200-Amp Service Upgrade?</a></h6>
|
||||
<div class="recent-post-date"><i class="far fa-calendar-alt"></i> Feb 20, 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Signup (similar to footer) -->
|
||||
<div class="sidebar-card" data-aos="fade-left" data-aos-delay="100">
|
||||
<h5 class="sidebar-title">Newsletter</h5>
|
||||
<p style="font-size:0.9rem; color:var(--gray); margin-bottom:15px;">Subscribe for electrical tips and company news.</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address" aria-label="Blog newsletter">
|
||||
<button class="newsletter-btn" aria-label="Subscribe"><i class="fas fa-paper-plane"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Have a question or need professional advice? Our team is ready to help.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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><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>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="service">I'm interested in</label><select class="form-select" id="service"><option selected disabled>Select</option><option>General Inquiry</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting</option><option>Maintenance</option><option>Smart Home</option></select></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS (same) -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
// newsletter button demo
|
||||
document.querySelectorAll('.newsletter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const input = this.previousElementSibling;
|
||||
if (input.value && input.value.includes('@')) {
|
||||
this.innerHTML = '<i class="fas fa-check"></i>';
|
||||
this.style.background = '#22c55e';
|
||||
input.value = '';
|
||||
input.placeholder = 'Subscribed!';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,354 @@
|
||||
<!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 – professional electrical installation for residential, commercial and industrial projects. Certified electricians, safe & reliable." />
|
||||
<meta name="keywords" content="electrical installation, wiring, panel upgrade, commercial electrician, residential electrician" />
|
||||
<title>Select Electrical Services | Electrical Installation</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 (same) -->
|
||||
<div id="preloader" aria-hidden="true">
|
||||
<div class="preloader-bolt">
|
||||
<div class="preloader-rings"></div><div class="preloader-rings"></div>
|
||||
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Electrical Installation) -->
|
||||
<section class="page-header">
|
||||
<div class="page-header-bg" role="img" aria-label="electrician installing panel"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-bolt"></i> Expert Installation</div>
|
||||
<h1 data-aos="fade-up">Electrical <span>Installation</span> Services</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="80">Safe, code-compliant installations for residential, commercial, and industrial projects. From panels to complete rewiring.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- OVERVIEW / INTRODUCTION -->
|
||||
<section class="section-pad" id="installation-overview" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-5">
|
||||
<div class="col-lg-6" data-aos="fade-right">
|
||||
<img src="assets/images/2150652842.jpg" alt="Electrician at panel" class="img-fluid rounded-3 shadow">
|
||||
</div>
|
||||
<div class="col-lg-6" data-aos="fade-left">
|
||||
<div class="section-label">Power with precision</div>
|
||||
<h2 class="section-title">Complete <span>Electrical</span> Setup</h2>
|
||||
<p class="section-desc" style="max-width:100%;">Whether you're building new, renovating, or need a heavy‑duty upgrade, our certified electricians deliver turnkey electrical installation. We handle everything from service panels and subpanels to branch circuits, outlets, and specialized equipment.</p>
|
||||
<ul class="about-list mt-4">
|
||||
<li><i class="fas fa-check-circle"></i> 100% compliant with National Electrical Code</li>
|
||||
<li><i class="fas fa-check-circle"></i> Premium materials and branded components</li>
|
||||
<li><i class="fas fa-check-circle"></i> Load calculation & energy efficiency advice</li>
|
||||
<li><i class="fas fa-check-circle"></i> Permits & inspections included</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TYPES OF INSTALLATION (service cards) -->
|
||||
<section class="section-pad" style="background:var(--bg);" id="installation-types">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Installation types</div>
|
||||
<h2 class="section-title">We cover every <span>sector</span></h2>
|
||||
<p class="section-desc mx-auto">Tailored electrical systems for homes, businesses, and industrial facilities.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">R</div>
|
||||
<div class="service-icon"><i class="fas fa-home"></i></div>
|
||||
<h5>Residential</h5>
|
||||
<p>New home wiring, panel upgrades, kitchen/ bath circuits, home automation rough‑ins, and backup generator hookups.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">C</div>
|
||||
<div class="service-icon"><i class="fas fa-building"></i></div>
|
||||
<h5>Commercial</h5>
|
||||
<p>Office wiring, lighting control, data center power, retail store fit‑outs, and energy‑efficient LED installations.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">I</div>
|
||||
<div class="service-icon"><i class="fas fa-industry"></i></div>
|
||||
<h5>Industrial</h5>
|
||||
<p>High‑voltage equipment, motor controls, panel boards, conduit bending, and machinery wiring for factories.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- INSTALLATION PROCESS (same process style) -->
|
||||
<section class="section-pad" style="background:var(--white);" id="installation-process">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Our process</div>
|
||||
<h2 class="section-title">How we <span>install</span></h2>
|
||||
<p class="section-desc mx-auto">A proven workflow from consultation to final testing.</p>
|
||||
</div>
|
||||
<div class="process-wrap" data-aos="fade-up">
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">1</span><i class="fas fa-clipboard-list"></i></div><h5>Site survey</h5><p>We assess your needs, measure loads, and design a system that meets current and future demands.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-drafting-compass"></i></div><h5>Permit & plan</h5><p>We handle permits, create detailed blueprints, and select materials with your approval.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-tools"></i></div><h5>Professional installation</h5><p>Certified electricians execute the work with minimal disruption, following safety protocols.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-clipboard-check"></i></div><h5>Testing & sign‑off</h5><p>Every circuit is tested, inspected, and we walk you through the final system.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHY CHOOSE US FOR INSTALLATION (dark cards) -->
|
||||
<section class="section-pad" style="background:var(--navy);" id="installation-benefits">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Why Select Electrical</div>
|
||||
<h2 class="section-title light">Installation <span>advantages</span></h2>
|
||||
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Quality, safety, and long‑term reliability.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-shield-alt"></i></div><div><h5>Safety guaranteed</h5><p>Arc‑fault protection, proper grounding, and full code compliance.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-gem"></i></div><div><h5>Premium materials</h5><p>We use only top‑tier brands like Siemens, Leviton, and Eaton.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-bolt"></i></div><div><h5>Energy efficient</h5><p>Load calculations and smart design to reduce waste and save money.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-clock"></i></div><div><h5>On‑time completion</h5><p>We respect your schedule and deliver projects on deadline.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-file-invoice"></i></div><div><h5>Transparent quotes</h5><p>Detailed breakdowns, no hidden costs, fixed‑price options.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-history"></i></div><div><h5>5‑year warranty</h5><p>All installation work comes with our comprehensive warranty.</p></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROJECT GALLERY (installation specific) -->
|
||||
<section class="section-pad" style="background:var(--bg);" id="installation-gallery">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Recent work</div>
|
||||
<h2 class="section-title">Installation <span>projects</span></h2>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?w=600&q=80" alt="panel installation"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>New 400A panel</h5><span>Commercial building</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="office wiring"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Office floor rewiring</h5><span>Data & power</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" alt="home automation"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Smart home rough‑in</h5><span>Residential</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="industrial"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Factory machine feed</h5><span>Industrial</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?w=600&q=80" alt="solar"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Solar + battery backup</h5><span>Renewable</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Architectural lighting</h5><span>Luxury residence</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIALS (installation focused) -->
|
||||
<section class="section-pad" style="background:var(--navy);" id="installation-testimonials">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Client stories</div>
|
||||
<h2 class="section-title light">Trusted for <span>installations</span></h2>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="testi-card">
|
||||
<div class="testi-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
|
||||
<div class="testi-quote">"</div>
|
||||
<p class="testi-text">Select Electrical handled the complete electrical installation for our new warehouse. From 800A service to lighting and machinery hookups — flawless execution and passed inspection with zero corrections.</p>
|
||||
<div class="testi-author"><img src="https://randomuser.me/api/portraits/men/42.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Michael Chen</div><div class="testi-role">Operations Manager, Pinnacle Logistics</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (identical to index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Ready to start your installation? Our team is standing by.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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><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>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="service">Service Needed</label><select class="form-select" id="service"><option selected disabled>Select</option><option>Electrical Installation</option><option>Wiring</option><option>Lighting</option><option>Maintenance</option><option>Emergency</option><option>Smart Home</option></select></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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>
|
||||
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- scripts (same) -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors (#contact only)
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,380 @@
|
||||
<!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 – professional electrical maintenance services for residential, commercial and industrial clients. Preventive maintenance, inspections, and safety checks." />
|
||||
<meta name="keywords" content="electrical maintenance, preventive maintenance, electrical inspection, panel maintenance, safety check, emergency repair" />
|
||||
<title>Select Electrical Services | Electrical Maintenance</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 (same) -->
|
||||
<div id="preloader" aria-hidden="true">
|
||||
<div class="preloader-bolt">
|
||||
<div class="preloader-rings"></div><div class="preloader-rings"></div>
|
||||
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Electrical Maintenance) -->
|
||||
<section class="page-header">
|
||||
<div class="page-header-bg" role="img" aria-label="electrician inspecting panel"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-tools"></i> Keep Your System Safe</div>
|
||||
<h1 data-aos="fade-up">Electrical <span>Maintenance</span> Services</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="80">Preventive maintenance, inspections, and safety checks to ensure your electrical system runs reliably and efficiently year‑round.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- OVERVIEW SECTION -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-5">
|
||||
<div class="col-lg-6" data-aos="fade-right">
|
||||
<img src="assets/images/2149728872.jpg" alt="electrician checking electrical panel" class="img-fluid rounded-3 shadow">
|
||||
</div>
|
||||
<div class="col-lg-6" data-aos="fade-left">
|
||||
<div class="section-label">Prevent. Protect. Perform.</div>
|
||||
<h2 class="section-title">Proactive <span>Maintenance</span> Matters</h2>
|
||||
<p class="section-desc" style="max-width:100%;">Regular electrical maintenance prevents unexpected failures, reduces energy waste, and extends the life of your equipment. Our certified technicians perform thorough inspections, testing, and tune‑ups for homes and businesses.</p>
|
||||
<ul class="about-list mt-4">
|
||||
<li><i class="fas fa-check-circle"></i> Annual / semi‑annual inspections</li>
|
||||
<li><i class="fas fa-check-circle"></i> Thermal imaging of panels & connections</li>
|
||||
<li><i class="fas fa-check-circle"></i> Emergency lighting & backup system testing</li>
|
||||
<li><i class="fas fa-check-circle"></i> Surge protection & grounding checks</li>
|
||||
<li><i class="fas fa-check-circle"></i> Detailed maintenance reports</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TYPES OF MAINTENANCE (service cards) -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">What we offer</div>
|
||||
<h2 class="section-title">Maintenance <span>Programs</span> For Every Need</h2>
|
||||
<p class="section-desc mx-auto">Residential, commercial, and industrial – tailored to your equipment and usage.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">R</div>
|
||||
<div class="service-icon"><i class="fas fa-home"></i></div>
|
||||
<h5>Residential Maintenance</h5>
|
||||
<p>Panel inspection, outlet testing, GFCI checks, and surge protector verification. Ideal for home safety and insurance compliance.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">C</div>
|
||||
<div class="service-icon"><i class="fas fa-building"></i></div>
|
||||
<h5>Commercial Maintenance</h5>
|
||||
<p>Preventive plans for offices, retail, and warehouses. Includes lighting, panels, emergency systems, and energy audits.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">I</div>
|
||||
<div class="service-icon"><i class="fas fa-industry"></i></div>
|
||||
<h5>Industrial Maintenance</h5>
|
||||
<p>Motor controls, VFD checks, high‑voltage switchgear, thermal imaging, and predictive maintenance for factories.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">E</div>
|
||||
<div class="service-icon"><i class="fas fa-bolt"></i></div>
|
||||
<h5>Emergency System Testing</h5>
|
||||
<p>Generator transfer switches, UPS systems, battery backups, and emergency lighting – load tested and certified.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">S</div>
|
||||
<div class="service-icon"><i class="fas fa-shield-alt"></i></div>
|
||||
<h5>Safety & Code Inspections</h5>
|
||||
<p>Identify potential hazards, outdated wiring, and code violations. We provide a clear report and fix recommendations.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">P</div>
|
||||
<div class="service-icon"><i class="fas fa-calendar-check"></i></div>
|
||||
<h5>Preventive Maintenance Plans</h5>
|
||||
<p>Scheduled visits (quarterly, bi‑annual) with priority service, discounts, and detailed system history.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MAINTENANCE PROCESS (custom process steps) -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">How we maintain</div>
|
||||
<h2 class="section-title">Our <span>Maintenance</span> Process</h2>
|
||||
<p class="section-desc mx-auto">Thorough, documented, and hassle‑free.</p>
|
||||
</div>
|
||||
<div class="process-wrap" data-aos="fade-up">
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">1</span><i class="fas fa-clipboard-list"></i></div><h5>Inspection</h5><p>We review your system history, inspect panels, connections, and safety devices. Thermal scan if needed.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-chart-line"></i></div><h5>Testing</h5><p>Load testing, voltage readings, breaker function, and GFCI/AFCI checks. Identify any weak points.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-tools"></i></div><h5>Adjustments & Repairs</h5><p>Tighten connections, replace worn parts, and fix minor issues on the spot. For major repairs we provide a quote.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-file-alt"></i></div><h5>Report & Recommendations</h5><p>You receive a detailed report with findings, photos, and suggested next steps for optimal performance.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHY CHOOSE US FOR MAINTENANCE (dark cards) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Why Select Electrical</div>
|
||||
<h2 class="section-title light">Maintenance <span>Advantages</span></h2>
|
||||
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Experience, reliability, and peace of mind.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-shield-alt"></i></div><div><h5>Safety first</h5><p>We spot hazards before they cause outages or fires. Your safety is our priority.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-gem"></i></div><div><h5>Certified technicians</h5><p>All maintenance performed by licensed electricians with ongoing training.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-tachometer-alt"></i></div><div><h5>Extend equipment life</h5><p>Regular care prevents premature failure of panels, breakers, and motors.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-file-invoice"></i></div><div><h5>Transparent reporting</h5><p>Clear, detailed reports with photos – no hidden surprises.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-clock"></i></div><div><h5>Flexible scheduling</h5><p>We work around your hours, including after‑hours for commercial clients.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-history"></i></div><div><h5>Warranty on work</h5><p>All maintenance and repairs backed by our 1‑year warranty.</p></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROJECT GALLERY (maintenance specific) -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Recent work</div>
|
||||
<h2 class="section-title">Maintenance <span>Showcase</span></h2>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?w=600&q=80" alt="panel inspection"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Panel thermal scan</h5><span>Commercial building</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="emergency light test"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Emergency lighting test</h5><span>Office complex</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" alt="breaker replacement"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Faulty breaker replacement</h5><span>Residential</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="motor maintenance"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Motor control inspection</h5><span>Industrial</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?w=600&q=80" alt="generator maintenance"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Generator load test</h5><span>Data center</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="outlet testing"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>GFCI / outlet check</h5><span>Multifamily housing</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIAL (maintenance focused) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Client story</div>
|
||||
<h2 class="section-title light">Peace of mind with <span>Select Electrical</span></h2>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="testi-card">
|
||||
<div class="testi-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
|
||||
<div class="testi-quote">"</div>
|
||||
<p class="testi-text">We've used Select Electrical for annual maintenance at our retail store for three years. They always find small issues before they become big problems – like a loose neutral that could have caused a fire. Their reports are thorough and the team is professional.</p>
|
||||
<div class="testi-author"><img src="https://randomuser.me/api/portraits/women/63.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Laura Benson</div><div class="testi-role">Store Owner, Naperville IL</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Ready to schedule maintenance? Our team is standing by.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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><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>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="service">Service Needed</label><select class="form-select" id="service"><option selected disabled>Select</option><option>Electrical Maintenance</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting Installation</option><option>Emergency Repair</option><option>Smart Home</option></select></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS (same) -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+381
@@ -0,0 +1,381 @@
|
||||
<!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 – 24/7 emergency electrical repair services. Fast response for power outages, sparking outlets, breaker trips, and urgent electrical faults." />
|
||||
<meta name="keywords" content="emergency electrician, 24/7 electrician, electrical repair, power outage, sparking outlet, breaker trip, emergency electrical service" />
|
||||
<title>Select Electrical Services | Emergency Repair</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 (same) -->
|
||||
<div id="preloader" aria-hidden="true">
|
||||
<div class="preloader-bolt">
|
||||
<div class="preloader-rings"></div><div class="preloader-rings"></div>
|
||||
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Emergency Repair) -->
|
||||
<section class="page-header">
|
||||
<div class="page-header-bg" role="img" aria-label="electrician working urgently"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-exclamation-triangle"></i> 24/7 Emergency Service</div>
|
||||
<h1 data-aos="fade-up">Emergency <span>Repair</span> Services</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="80">Fast, reliable response when you need it most. Our certified electricians are on call 24/7 to handle urgent electrical issues safely.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- OVERVIEW SECTION -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-5">
|
||||
<div class="col-lg-6" data-aos="fade-right">
|
||||
<img src="https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=700&q=80" alt="electrician troubleshooting" class="img-fluid rounded-3 shadow">
|
||||
</div>
|
||||
<div class="col-lg-6" data-aos="fade-left">
|
||||
<div class="section-label">When every minute counts</div>
|
||||
<h2 class="section-title">Rapid <span>Response</span> & Lasting Fixes</h2>
|
||||
<p class="section-desc" style="max-width:100%;">Electrical emergencies can happen anytime – a sudden power outage, sparking outlet, or tripped breaker that won't reset. Our team is ready 24 hours a day, 365 days a year, to respond quickly and resolve the problem with safety as the top priority.</p>
|
||||
<ul class="about-list mt-4">
|
||||
<li><i class="fas fa-check-circle"></i> 24/7 live answering – no voicemail loops</li>
|
||||
<li><i class="fas fa-check-circle"></i> Average arrival time: 45–60 minutes</li>
|
||||
<li><i class="fas fa-check-circle"></i> Fully stocked trucks for most repairs</li>
|
||||
<li><i class="fas fa-check-circle"></i> Upfront pricing, no overtime surprises</li>
|
||||
<li><i class="fas fa-check-circle"></i> Licensed & insured for your protection</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TYPES OF EMERGENCY REPAIRS (service cards) -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Common emergencies</div>
|
||||
<h2 class="section-title">We Fix <span>Urgent</span> Electrical Issues</h2>
|
||||
<p class="section-desc mx-auto">From flickering lights to complete blackouts – we handle it all.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">P</div>
|
||||
<div class="service-icon"><i class="fas fa-bolt"></i></div>
|
||||
<h5>Power Outages</h5>
|
||||
<p>Partial or whole‑house power loss. We diagnose the cause (utility, panel, or internal fault) and restore power quickly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">S</div>
|
||||
<div class="service-icon"><i class="fas fa-fire"></i></div>
|
||||
<h5>Sparking / Burning Smell</h5>
|
||||
<p>Immediate hazard. We locate the source, replace damaged wiring, and ensure no fire risk remains.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">T</div>
|
||||
<div class="service-icon"><i class="fas fa-exchange-alt"></i></div>
|
||||
<h5>Tripping Breakers / Blown Fuses</h5>
|
||||
<p>Frequent trips indicate overload or short circuit. We identify and fix the root cause, not just reset.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">S</div>
|
||||
<div class="service-icon"><i class="fas fa-plug"></i></div>
|
||||
<h5>Dead Outlets / Switches</h5>
|
||||
<p>Non‑working outlets or switches can signal loose connections or wiring damage. We restore function safely.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">L</div>
|
||||
<div class="service-icon"><i class="fas fa-bolt"></i></div>
|
||||
<h5>Lightning / Surge Damage</h5>
|
||||
<p>After a strike or surge, we inspect all systems, replace damaged components, and install surge protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">W</div>
|
||||
<div class="service-icon"><i class="fas fa-water"></i></div>
|
||||
<h5>Water / Flood Damage</h5>
|
||||
<p>Flooded basements or leaks near electrical – we safely isolate and repair affected circuits.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- EMERGENCY PROCESS (custom process steps) -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">How we respond</div>
|
||||
<h2 class="section-title">Our <span>Emergency</span> Process</h2>
|
||||
<p class="section-desc mx-auto">From your call to final fix – fast and transparent.</p>
|
||||
</div>
|
||||
<div class="process-wrap" data-aos="fade-up">
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">1</span><i class="fas fa-phone-alt"></i></div><h5>Call & Assess</h5><p>Call our 24/7 line. We'll ask key questions to understand the urgency and dispatch the nearest technician.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-truck"></i></div><h5>Rapid Dispatch</h5><p>Our on‑call electrician heads to your location with a fully stocked service vehicle.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-search"></i></div><h5>Diagnose & Quote</h5><p>We identify the issue, explain the cause, and provide a clear price before starting any work.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-tools"></i></div><h5>Repair & Test</h5><p>We perform the repair, test thoroughly, and ensure everything is safe and operational.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHY CHOOSE US FOR EMERGENCY (dark cards) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Why Select Electrical</div>
|
||||
<h2 class="section-title light">Emergency <span>Advantages</span></h2>
|
||||
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">When you need help fast, we deliver.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-clock"></i></div><div><h5>24/7 Availability</h5><p>We never sleep. Holidays, weekends, midnight – we're always ready.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-tachometer-alt"></i></div><div><h5>Fast arrival</h5><p>Average 45‑minute response time. We know you can't wait.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-shield-alt"></i></div><div><h5>Safety certified</h5><p>All emergency techs are licensed, background‑checked, and follow strict safety protocols.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-dollar-sign"></i></div><div><h5>Upfront pricing</h5><p>No hidden fees, no overtime markups. We quote before starting.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-tools"></i></div><div><h5>Fully stocked</h5><p>Our vans carry common parts to fix most emergencies in one visit.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-history"></i></div><div><h5>Work guaranteed</h5><p>All emergency repairs backed by our 1‑year warranty.</p></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROJECT GALLERY (emergency specific) -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Recent emergencies</div>
|
||||
<h2 class="section-title">Repairs <span>We've Handled</span></h2>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?w=600&q=80" alt="breaker panel repair"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Tripped main breaker</h5><span>Residential</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="sparking outlet"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Burnt outlet replacement</h5><span>Commercial</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="assets/images/30622.jpg" alt="power outage"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Underground line fault</h5><span>Industrial</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="flooded panel"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Flood damage repair</h5><span>Basement</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?w=600&q=80" alt="lightning damage"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Surge damage repair</h5><span>Home office</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="emergency call"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>No power – restaurant</h5><span>Commercial</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIAL (emergency focused) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Client story</div>
|
||||
<h2 class="section-title light">Saved by <span>Select Electrical</span></h2>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="testi-card">
|
||||
<div class="testi-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
|
||||
<div class="testi-quote">"</div>
|
||||
<p class="testi-text">Our basement flooded at 2 a.m. and we had water near the electrical panel. I called Select Electrical and a technician arrived within 45 minutes. He safely isolated the circuits, replaced a damaged breaker, and even gave us tips to prevent future issues. True lifesavers!</p>
|
||||
<div class="testi-author"><img src="https://randomuser.me/api/portraits/men/45.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Mike Thompson</div><div class="testi-role">Homeowner, Round Rock</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">For emergencies, call our 24/7 line. For non‑urgent requests, fill out the form.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Emergency Phone</h6><p><strong>(630) 202-8020</strong> (24/7)<br>Office: (630) 202-8020</p></div></div>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-envelope"></i></div><div><h6>Email</h6><p>emergency@selectelectricalservices.net<br>select8020@gmail.com</p></div></div>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-clock"></i></div><div><h6>Hours</h6><p>Emergency: 24/7/365<br>Office: Mon–Fri 7am–6pm</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="service">Service Needed</label><select class="form-select" id="service"><option selected disabled>Select</option><option>Emergency Repair</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting Installation</option><option>Maintenance</option><option>Smart Home</option></select></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Describe the issue</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours. For emergencies, please call our 24/7 line.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS (same) -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+418
@@ -0,0 +1,418 @@
|
||||
<!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 – Frequently Asked Questions about our electrical services, scheduling, billing, safety, and more." />
|
||||
<meta name="keywords" content="FAQ, electrical questions, electrician FAQ, service questions, selectelectrical" />
|
||||
<title>Select Electrical Services | FAQ</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"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (FAQ) -->
|
||||
<section class="page-header-sm">
|
||||
<div class="page-header-bg" role="img" aria-label="frequently asked questions"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container text-center text-lg-start">
|
||||
<h1 data-aos="fade-up">Frequently Asked <span>Questions</span></h1>
|
||||
<p data-aos="fade-up" data-aos-delay="30">Find quick answers about our services, scheduling, billing, and safety. Still have questions? Contact us!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ CONTENT -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="faq-section" data-aos="fade-up">
|
||||
|
||||
<!-- Category: General -->
|
||||
<h3 class="faq-category">General Questions</h3>
|
||||
<div class="accordion accordion-flush" id="faqGeneral">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#general1">
|
||||
What areas do you serve?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="general1" class="accordion-collapse collapse" data-bs-parent="#faqGeneral">
|
||||
<div class="accordion-body">
|
||||
We primarily serve the Western Chicago suburbs — DuPage, Will, Kane, Kendall, and Cook Counties. For commercial and industrial projects, we often travel further – please call to confirm availability.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#general2">
|
||||
Are you licensed and insured?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="general2" class="accordion-collapse collapse" data-bs-parent="#faqGeneral">
|
||||
<div class="accordion-body">
|
||||
Absolutely. Select Electrical Services is fully licensed in the state of Texas (License # TECL 34567) and carries comprehensive liability insurance and workers' compensation coverage for your protection.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#general3">
|
||||
Do you provide free estimates?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="general3" class="accordion-collapse collapse" data-bs-parent="#faqGeneral">
|
||||
<div class="accordion-body">
|
||||
Yes, we offer free, no-obligation estimates for most residential and commercial projects. We'll visit your site, discuss your needs, and provide a detailed written quote. Emergency service calls may have a diagnostic fee that is applied to any repair work.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category: Services & Scheduling -->
|
||||
<h3 class="faq-category mt-5">Services & Scheduling</h3>
|
||||
<div class="accordion accordion-flush" id="faqServices">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#service1">
|
||||
What types of electrical services do you offer?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="service1" class="accordion-collapse collapse" data-bs-parent="#faqServices">
|
||||
<div class="accordion-body">
|
||||
We offer a full range of electrical services including residential wiring and rewiring, commercial installations, lighting design and installation, panel upgrades, emergency repairs, EV charger installation, smart home automation, and preventive maintenance. See our <a href="index.html#services">Services</a> page for details.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#service2">
|
||||
How quickly can you schedule a non-emergency job?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="service2" class="accordion-collapse collapse" data-bs-parent="#faqServices">
|
||||
<div class="accordion-body">
|
||||
Typically, we can schedule residential service appointments within 2-5 business days. Larger commercial or industrial projects may require more lead time for planning and permitting. We'll always work with you to find a convenient date.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#service3">
|
||||
Do you offer 24/7 emergency service?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="service3" class="accordion-collapse collapse" data-bs-parent="#faqServices">
|
||||
<div class="accordion-body">
|
||||
Yes, we have electricians on call 24 hours a day, 7 days a week, including holidays. For emergencies such as power outages, sparking outlets, or downed wires, call our emergency line: <strong>(630) 202-8020</strong>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category: Billing & Payments -->
|
||||
<h3 class="faq-category mt-5">Billing & Payments</h3>
|
||||
<div class="accordion accordion-flush" id="faqBilling">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bill1">
|
||||
What payment methods do you accept?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="bill1" class="accordion-collapse collapse" data-bs-parent="#faqBilling">
|
||||
<div class="accordion-body">
|
||||
We accept all major credit cards (Visa, Mastercard, American Express, Discover), checks, and cash. For larger projects, financing options may be available – ask your project manager for details.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bill2">
|
||||
Do you require a deposit?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="bill2" class="accordion-collapse collapse" data-bs-parent="#faqBilling">
|
||||
<div class="accordion-body">
|
||||
For smaller jobs (under $500), payment is due upon completion. For larger projects, we typically require a 25-50% deposit to secure materials and scheduling, with the balance due at final completion. This is always outlined in your proposal.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bill3">
|
||||
Is there a warranty on your work?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="bill3" class="accordion-collapse collapse" data-bs-parent="#faqBilling">
|
||||
<div class="accordion-body">
|
||||
Yes, we stand behind our craftsmanship. All electrical work carries a 1-year parts and labor warranty. Some installed products may have additional manufacturer warranties – we'll provide all documentation upon completion.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category: Safety & Emergencies -->
|
||||
<h3 class="faq-category mt-5">Safety & Emergencies</h3>
|
||||
<div class="accordion accordion-flush" id="faqSafety">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#safe1">
|
||||
What should I do if I smell burning or see sparks?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="safe1" class="accordion-collapse collapse" data-bs-parent="#faqSafety">
|
||||
<div class="accordion-body">
|
||||
Immediately turn off power at the main breaker if safe to do so, evacuate the area, and call our emergency line at <strong>(630) 202-8020</strong>. Do not attempt to touch or investigate until a professional arrives.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#safe2">
|
||||
How often should I have my home's electrical system inspected?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="safe2" class="accordion-collapse collapse" data-bs-parent="#faqSafety">
|
||||
<div class="accordion-body">
|
||||
We recommend a professional electrical inspection every 3-5 years for homes, or immediately if you experience frequent breaker trips, flickering lights, or before purchasing an older home. Commercial properties may require more frequent inspections per code.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#safe3">
|
||||
Are your electricians background-checked?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="safe3" class="accordion-collapse collapse" data-bs-parent="#faqSafety">
|
||||
<div class="accordion-body">
|
||||
Yes, every Select Electrical employee undergoes a thorough background check, drug screening, and ongoing safety training. Your family and property are in safe hands.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Still have questions? -->
|
||||
<div class="still-questions">
|
||||
<h4>Still have questions?</h4>
|
||||
<p>Can't find the answer you're looking for? Please chat with our team or send us a message. We're happy to help!</p>
|
||||
<a href="#contact" class="btn-primary-main" style="background:var(--yellow); color:var(--navy); font-family:var(--font-display); font-weight:700; padding:12px 32px; border-radius:4px; display:inline-block;">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Have a different question? Our team is ready to help.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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><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>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="subject">Subject</label><input type="text" class="form-control" id="subject" placeholder="FAQ inquiry"></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
// newsletter button demo
|
||||
document.querySelectorAll('.newsletter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const input = this.previousElementSibling;
|
||||
if (input.value && input.value.includes('@')) {
|
||||
this.innerHTML = '<i class="fas fa-check"></i>';
|
||||
this.style.background = '#22c55e';
|
||||
input.value = '';
|
||||
input.placeholder = 'Subscribed!';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+895
@@ -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 & 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 & 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 & 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 & 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 & 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>
|
||||
<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 & 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 & 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 & 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>
|
||||
@@ -0,0 +1,381 @@
|
||||
<!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 – professional lighting installation for residential, commercial and landscape projects. LED upgrades, smart lighting, and energy-efficient designs." />
|
||||
<meta name="keywords" content="lighting installation, LED lighting, indoor lighting, outdoor lighting, landscape lighting, smart lighting" />
|
||||
<title>Select Electrical Services | Lighting Installation</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 (same) -->
|
||||
<div id="preloader" aria-hidden="true">
|
||||
<div class="preloader-bolt">
|
||||
<div class="preloader-rings"></div><div class="preloader-rings"></div>
|
||||
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Lighting Installation) -->
|
||||
<section class="page-header">
|
||||
<div class="page-header-bg" role="img" aria-label="modern lighting fixtures"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-lightbulb"></i> Illuminate Your Space</div>
|
||||
<h1 data-aos="fade-up">Lighting <span>Installation</span> Services</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="80">From cozy indoor ambiance to dramatic landscape lighting – we design and install energy‑efficient, smart, and beautiful lighting systems.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- OVERVIEW SECTION -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-5">
|
||||
<div class="col-lg-6" data-aos="fade-right">
|
||||
<img src="assets/images/30622.jpg" alt="electrician installing recessed lighting" class="img-fluid rounded-3 shadow">
|
||||
</div>
|
||||
<div class="col-lg-6" data-aos="fade-left">
|
||||
<div class="section-label">Brilliant by design</div>
|
||||
<h2 class="section-title">Custom <span>Lighting</span> Solutions</h2>
|
||||
<p class="section-desc" style="max-width:100%;">Great lighting transforms a space. Whether you need subtle accent lighting, bright task illumination, or a complete smart home integration, our certified electricians deliver flawless installation with a focus on energy efficiency and aesthetics.</p>
|
||||
<ul class="about-list mt-4">
|
||||
<li><i class="fas fa-check-circle"></i> Indoor & outdoor lighting design</li>
|
||||
<li><i class="fas fa-check-circle"></i> LED retrofits & energy‑saving upgrades</li>
|
||||
<li><i class="fas fa-check-circle"></i> Smart lighting (WiFi / Zigbee / DALI)</li>
|
||||
<li><i class="fas fa-check-circle"></i> Low‑voltage landscape lighting</li>
|
||||
<li><i class="fas fa-check-circle"></i> Code‑compliant, dimmer & sensor integration</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TYPES OF LIGHTING (service cards) -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">What we offer</div>
|
||||
<h2 class="section-title">Lighting <span>Services</span> For Every Space</h2>
|
||||
<p class="section-desc mx-auto">Residential, commercial, and landscape – we cover it all.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">I</div>
|
||||
<div class="service-icon"><i class="fas fa-home"></i></div>
|
||||
<h5>Indoor Lighting</h5>
|
||||
<p>Recessed cans, chandeliers, under‑cabinet, cove lighting, and ceiling fans. Perfect for kitchens, living areas, and bedrooms.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">O</div>
|
||||
<div class="service-icon"><i class="fas fa-tree"></i></div>
|
||||
<h5>Outdoor & Landscape</h5>
|
||||
<p>Path lights, floodlights, deck/patio lighting, and security lighting. Weatherproof and low‑voltage systems.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">C</div>
|
||||
<div class="service-icon"><i class="fas fa-building"></i></div>
|
||||
<h5>Commercial Lighting</h5>
|
||||
<p>Office troffers, retail display lighting, warehouse high‑bays, and emergency egress lighting. Energy audits included.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">L</div>
|
||||
<div class="service-icon"><i class="fas fa-lightbulb"></i></div>
|
||||
<h5>LED Upgrades</h5>
|
||||
<p>Replace fluorescent or incandescent with high‑efficiency LED. Rebates available, longer life, lower bills.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">S</div>
|
||||
<div class="service-icon"><i class="fas fa-microchip"></i></div>
|
||||
<h5>Smart Lighting</h5>
|
||||
<p>WiFi / Bluetooth controls, voice assistants (Alexa, Google), automated schedules, and dimming systems.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">A</div>
|
||||
<div class="service-icon"><i class="fas fa-palette"></i></div>
|
||||
<h5>Architectural & Accent</h5>
|
||||
<p>Picture lights, cove lighting, track lighting, and feature wall illumination to highlight art or architecture.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LIGHTING PROCESS (custom process steps) -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">How we light</div>
|
||||
<h2 class="section-title">Our <span>Lighting</span> Process</h2>
|
||||
<p class="section-desc mx-auto">From concept to glow – a seamless workflow.</p>
|
||||
</div>
|
||||
<div class="process-wrap" data-aos="fade-up">
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">1</span><i class="fas fa-clipboard-list"></i></div><h5>Consultation</h5><p>We discuss your vision, take measurements, and assess existing wiring. We'll suggest fixture types and layouts.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-drafting-compass"></i></div><h5>Design & Selection</h5><p>We create a lighting plan, help select fixtures, and provide a detailed quote – all within your budget.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-tools"></i></div><h5>Professional Installation</h5><p>Our electricians install all wiring, mounts, and controls with minimal disruption and meticulous attention.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-sun"></i></div><h5>Testing & Walkthrough</h5><p>We test every light, demonstrate controls, and ensure you're delighted with the result.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHY CHOOSE US FOR LIGHTING (dark cards) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Why Select Electrical</div>
|
||||
<h2 class="section-title light">Lighting <span>Advantages</span></h2>
|
||||
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Experience, quality, and innovation in every fixture.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-shield-alt"></i></div><div><h5>Safety guaranteed</h5><p>All installations meet NEC codes, with proper grounding and防水 for outdoor.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-gem"></i></div><div><h5>Premium fixtures</h5><p>We work with trusted brands like Philips, Halo, and Kichler for lasting quality.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-tachometer-alt"></i></div><div><h5>Energy efficient</h5><p>LED and smart controls reduce your energy bill and carbon footprint.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-paint-brush"></i></div><div><h5>Design expertise</h5><p>Our team understands color temperature, beam angles, and layering for perfect ambiance.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-file-invoice"></i></div><div><h5>Transparent quotes</h5><p>Detailed breakdown of materials and labor – no surprises.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-history"></i></div><div><h5>5‑year warranty</h5><p>All lighting installations backed by our comprehensive warranty.</p></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROJECT GALLERY (lighting specific) -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Recent work</div>
|
||||
<h2 class="section-title">Lighting <span>Showcase</span></h2>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1556909114-44e3e70034e2?w=600&q=80" alt="modern kitchen lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Kitchen remodel</h5><span>Recessed & under‑cabinet</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1540932239986-30128078f3c5?w=600&q=80" alt="landscape lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Garden path lights</h5><span>Low‑voltage LED</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="assets/images/22073.jpg" alt="office lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Commercial office</h5><span>Troffer LED retrofit</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="chandelier installation"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Grand chandelier</h5><span>Luxury residence</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="assets/images/2150652842.jpg" alt="smart lighting"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Smart home automation</h5><span>Caseta / Control4</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="assets/images/2149728872.jpg" alt="outdoor floodlights"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Security lighting</h5><span>Motion‑sensor LEDs</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIAL (lighting focused) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Client story</div>
|
||||
<h2 class="section-title light">Brighter with <span>Select Electrical</span></h2>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="testi-card">
|
||||
<div class="testi-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
|
||||
<div class="testi-quote">"</div>
|
||||
<p class="testi-text">Select Electrical transformed our dark backyard into a beautiful evening oasis with landscape lighting. They also installed dimmable LEDs throughout our home. The team was professional, the quality superb, and the energy savings noticeable.</p>
|
||||
<div class="testi-author"><img src="https://randomuser.me/api/portraits/men/52.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">David Chen</div><div class="testi-role">Homeowner, Naperville IL</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Ready to brighten your space? Our team is standing by.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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><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>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="service">Service Needed</label><select class="form-select" id="service"><option selected disabled>Select</option><option>Lighting Installation</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Maintenance</option><option>Emergency</option><option>Smart Home</option></select></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS (same) -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>UTM analytics · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="active" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>UTM analytics</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Included with every client portal — leads by source/campaign over time.</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-card"><div class="label">Leads (30d)</div><div class="value">42</div><div class="delta">+12% vs prior</div></div>
|
||||
<div class="stat-card"><div class="label">Top source</div><div class="value" style="font-size:18px;margin-top:10px">Google</div><div class="delta">18 leads</div></div>
|
||||
<div class="stat-card"><div class="label">Top campaign</div><div class="value" style="font-size:18px;margin-top:10px">spring-promo</div><div class="delta">11 leads</div></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Leads by week</h2></div>
|
||||
<div class="panel-b"><div class="chart-ph"><div class="bar" style="height:40%"></div><div class="bar" style="height:65%"></div><div class="bar" style="height:35%"></div><div class="bar" style="height:80%"></div><div class="bar" style="height:55%"></div><div class="bar" style="height:70%"></div><div class="bar" style="height:90%"></div></div></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>By source / campaign</h2></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Source</th><th>Campaign</th><th>Leads</th><th>Won</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>google</td><td>emergency</td><td>12</td><td>3</td></tr>
|
||||
<tr><td>facebook</td><td>spring-promo</td><td>11</td><td>2</td></tr>
|
||||
<tr><td>direct</td><td>(none)</td><td>9</td><td>4</td></tr>
|
||||
<tr><td>postcard</td><td>march-mailer</td><td>6</td><td>1</td></tr>
|
||||
<tr><td>yelp</td><td>profile</td><td>4</td><td>1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Blog editor · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="active" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Blog editor</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Create and edit posts; publish or keep as draft.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Edit post</h2>
|
||||
<div><button class="btn btn-sm btn-ghost" type="button">Save draft</button>
|
||||
<button class="btn btn-sm btn-primary" type="button">Publish</button></div>
|
||||
</div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Title</label><input value="When to schedule an electrical safety inspection"></div>
|
||||
<div class="field"><label>Slug</label><input value="when-to-schedule-electrical-safety-inspection"></div>
|
||||
<div class="field"><label>Excerpt</label><textarea style="min-height:60px">How a safety inspection can catch problems before they become emergencies.</textarea></div>
|
||||
<div class="field"><label>Body</label><textarea style="min-height:180px">Customers often wait too long. Here's what to watch for…
|
||||
|
||||
(Mock editor — production uses a rich text field.)</textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Blog list · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="active" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Blog list</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Client manages drafts and published posts.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Blog posts</h2><a class="btn btn-sm btn-primary" href="portal-blog-edit.html">New post</a></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table"><thead><tr><th>Title</th><th>Date</th><th>Status</th></tr></thead><tbody><tr><td><a href="portal-blog-edit.html">When to schedule an electrical safety inspection</a></td><td>Mar 12, 2026</td><td><span class="badge badge-won">Published</span></td></tr><tr><td><a href="portal-blog-edit.html">Signs your electrical panel needs an upgrade</a></td><td>Feb 28, 2026</td><td><span class="badge badge-draft">Draft</span></td></tr><tr><td><a href="portal-blog-edit.html">Benefits of installing ceiling fans</a></td><td>Jan 15, 2026</td><td><span class="badge badge-draft">Draft</span></td></tr></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Email engagement · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="active" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Email engagement</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Opens, clicks, bounces, unsubscribes per campaign.</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-card"><div class="label">Delivered</div><div class="value">178</div><div class="delta">of 186</div></div>
|
||||
<div class="stat-card"><div class="label">Opens</div><div class="value">64%</div><div class="delta">114 opens</div></div>
|
||||
<div class="stat-card"><div class="label">Clicks</div><div class="value">18%</div><div class="delta">32 clicks</div></div>
|
||||
<div class="stat-card"><div class="label">Unsubscribes</div><div class="value">2</div><div class="delta">1 bounce</div></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Panel safety inspection reminder</h2><span class="badge badge-sent">Sent</span></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Recipient</th><th>Opened</th><th>Clicked</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>jordan@example.com</td><td>Yes</td><td>Yes</td><td>Engaged</td></tr>
|
||||
<tr><td>sam@example.com</td><td>Yes</td><td>—</td><td>Opened</td></tr>
|
||||
<tr><td>avery@example.com</td><td>—</td><td>—</td><td>Delivered</td></tr>
|
||||
<tr><td>bad@example.com</td><td>—</td><td>—</td><td>Bounced</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Campaign composer · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="active" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Campaign composer</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Email, SMS, or postcard — select recipients, schedule, send.</div>
|
||||
|
||||
<div class="channel-tabs">
|
||||
<a class="active" href="#">Email</a>
|
||||
<a href="#">SMS</a>
|
||||
<a href="portal-direct-mail.html">Postcard</a>
|
||||
</div>
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Compose</h2></div>
|
||||
<div class="panel-b">
|
||||
<form class="form-grid">
|
||||
<div class="field"><label>Campaign name</label><input value="Panel safety inspection reminder"></div>
|
||||
<div class="field"><label>Subject</label><input value="A quick note from Select Electrical Services"></div>
|
||||
<div class="field"><label>Recipients</label><select><option>All email-consent contacts (186)</option><option>Tagged: customers</option></select></div>
|
||||
<div class="field"><label>Body</label><textarea>Hi {{first_name}},
|
||||
|
||||
Just a friendly reminder we're here when you need us in Naperville & western suburbs.
|
||||
|
||||
— Select Electrical Services</textarea></div>
|
||||
<div class="field"><label>Send</label><select><option>Schedule for Fri 10:00am</option><option>Send now</option><option>Save draft</option></select></div>
|
||||
<button class="btn btn-primary" type="button">Schedule campaign</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Preview</h2></div>
|
||||
<div class="panel-b" style="background:#f8fafc;min-height:200px;font-size:14px">
|
||||
<strong>Subject:</strong> A quick note from Select Electrical Services<br><br>
|
||||
Hi Jordan,<br><br>
|
||||
Just a friendly reminder we're here when you need us in Naperville & western suburbs.<br><br>
|
||||
— Select Electrical Services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Import contacts · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="active" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Import contacts</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> CSV/Excel upload, column mapping, consent defaults, duplicate merge.</div>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step active"><span>1</span> Upload</div>
|
||||
<div class="step"><span>2</span> Map columns</div>
|
||||
<div class="step"><span>3</span> Consent defaults</div>
|
||||
<div class="step"><span>4</span> Review duplicates</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Upload CSV / Excel</h2></div>
|
||||
<div class="panel-b">
|
||||
<div class="dropzone">Drop file here or <strong>browse</strong><div class="muted" style="margin-top:8px">.csv, .xlsx · max 5MB mock</div></div>
|
||||
<p class="hint-block muted" style="margin-top:16px">After upload: map name/email/phone, set default consent, merge duplicates.</p>
|
||||
<a class="btn btn-primary" href="portal-contacts.html" style="margin-top:16px">Continue (mock)</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Mailing list · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="active" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Mailing list</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Contacts with per-channel consent (email / SMS / postcard).</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h">
|
||||
<h2>Mailing list</h2>
|
||||
<div>
|
||||
<a class="btn btn-sm btn-ghost" href="portal-contacts-import.html">Import</a>
|
||||
<a class="btn btn-sm btn-primary" href="portal-campaign.html">New campaign</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Name</th><th>Email</th><th>Email</th><th>SMS</th><th>Postcard</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Jordan Lee</td><td>jordan@example.com</td><td>✓</td><td>✓</td><td>—</td></tr>
|
||||
<tr><td>Sam Ortiz</td><td>sam@example.com</td><td>✓</td><td>—</td><td>✓</td></tr>
|
||||
<tr><td>Avery Chen</td><td>avery@example.com</td><td>✓</td><td>✓</td><td>✓</td></tr>
|
||||
<tr><td>Morgan Diaz</td><td>morgan@example.com</td><td>—</td><td>✓</td><td>✓</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Dashboard · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="active" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Dashboard</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Portal home — glanceable widgets for leads, list health, and scheduled work.</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-card"><div class="label">New leads</div><div class="value">7</div><div class="delta">+3 this week</div></div>
|
||||
<div class="stat-card"><div class="label">Open pipeline</div><div class="value">18</div><div class="delta">4 contacted</div></div>
|
||||
<div class="stat-card"><div class="label">Mailing list</div><div class="value">412</div><div class="delta">8 opted out (30d)</div></div>
|
||||
<div class="stat-card"><div class="label">Open invoices</div><div class="value">2</div><div class="delta">Next due Fri</div></div>
|
||||
</div>
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Recent leads</h2><a class="btn btn-sm btn-ghost" href="portal-leads.html">View all</a></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table"><thead><tr><th>Name</th><th>Source</th><th>Status</th></tr></thead><tbody><tr><td><a href="portal-lead-detail.html">Jordan Lee</a></td><td>google / emergency</td><td><span class="badge badge-new">New</span></td></tr><tr><td><a href="portal-lead-detail.html">Sam Ortiz</a></td><td>facebook / spring-promo</td><td><span class="badge badge-contacted">Contacted</span></td></tr><tr><td><a href="portal-lead-detail.html">Avery Chen</a></td><td>direct / contact-form</td><td><span class="badge badge-new">New</span></td></tr></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Upcoming outreach</h2><a class="btn btn-sm btn-ghost" href="portal-campaign.html">Compose</a></div>
|
||||
<div class="panel-b">
|
||||
<p style="margin:0 0 12px;font-size:14px"><strong>Panel safety inspection reminder</strong> — Email · scheduled Fri 10:00 · 186 recipients</p>
|
||||
<p style="margin:0 0 12px;font-size:14px"><strong>Job reminder SMS</strong> — Draft · 42 recipients</p>
|
||||
<p style="margin:0;font-size:14px"><strong>EV charger promo</strong> — Postcard · queued · 120 pieces</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Direct mail campaign · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="active" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Direct mail campaign</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Recipient selection from contacts with postcard consent; vendor send.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Direct mail campaign</h2><a class="btn btn-sm btn-ghost" href="portal-postcard-designer.html">Edit design</a></div>
|
||||
<div class="panel-b">
|
||||
<form class="form-grid cols-2">
|
||||
<div class="field"><label>Name</label><input value="Neighborhood just listed — March"></div>
|
||||
<div class="field"><label>Piece</label><select><option>Need an EV outlet? (4×6)</option></select></div>
|
||||
<div class="field"><label>Recipients</label><select><option>Postcard-consent contacts (120)</option></select></div>
|
||||
<div class="field"><label>Schedule</label><input type="date" value="2026-03-28"></div>
|
||||
</form>
|
||||
<p class="muted" style="margin:16px 0">Print + postage pass-through billed separately.</p>
|
||||
<button class="btn btn-primary" type="button">Queue for print</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Create invoice · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="active" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Create invoice</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Amount, line items, customer email; pay link via email.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Create invoice</h2></div>
|
||||
<div class="panel-b">
|
||||
<form class="form-grid cols-2">
|
||||
<div class="field"><label>Customer name</label><input value="Jordan Lee"></div>
|
||||
<div class="field"><label>Customer email</label><input type="email" value="jordan@example.com"></div>
|
||||
<div class="field"><label>Line item</label><input value="Service call — diagnosis"></div>
|
||||
<div class="field"><label>Amount</label><input value="480.00"></div>
|
||||
<div class="field" style="grid-column:1/-1"><label>Notes</label><textarea style="min-height:70px">Due on receipt. Pay link emailed via Email add-on.</textarea></div>
|
||||
</form>
|
||||
<p class="muted" style="margin:12px 0">Stripe processing fees billed separately. Email notification requires Email & SMS add-on.</p>
|
||||
<a class="btn btn-primary" href="portal-invoice-detail.html">Create & send</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Invoice detail · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="active" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Invoice detail</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Status and payment history; resend pay link.</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>INV-1042</h2><span class="badge badge-open">Open</span></div>
|
||||
<div class="panel-b">
|
||||
<p><strong>Customer:</strong> Jordan Lee</p>
|
||||
<p><strong>Email:</strong> jordan@example.com</p>
|
||||
<p><strong>Amount:</strong> $480.00</p>
|
||||
<p><strong>Created:</strong> Mar 18, 2026</p>
|
||||
<p><strong>Pay link:</strong> <a href="public-pay.html">public-pay.html</a></p>
|
||||
<button class="btn btn-ghost btn-sm" type="button">Resend email</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Activity</h2></div>
|
||||
<div class="panel-b" style="font-size:14px">
|
||||
<p>Mar 18 · Invoice created</p>
|
||||
<p>Mar 18 · Pay-link email sent</p>
|
||||
<p>Mar 19 · Customer opened email</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Invoices · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="active" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Invoices</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Paid / open / past due. Requires Email & SMS for pay-link notifications.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Invoices</h2><a class="btn btn-sm btn-primary" href="portal-invoice-create.html">Create invoice</a></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table"><thead><tr><th>Number</th><th>Customer</th><th>Amount</th><th>Status</th></tr></thead><tbody><tr><td><a href="portal-invoice-detail.html">INV-1042</a></td><td>Jordan Lee</td><td>$480.00</td><td><span class="badge badge-open">Open</span></td></tr><tr><td><a href="portal-invoice-detail.html">INV-1041</a></td><td>Morgan Diaz</td><td>$1,250.00</td><td><span class="badge badge-paid">Paid</span></td></tr><tr><td><a href="portal-invoice-detail.html">INV-1040</a></td><td>Sam Ortiz</td><td>$320.00</td><td><span class="badge badge-open">Open</span></td></tr></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lead detail · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="active" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Lead detail</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Notes, UTM attribution, linked contact consent.</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Jordan Lee</h2><span class="badge badge-new">New</span></div>
|
||||
<div class="panel-b">
|
||||
<p><strong>Need:</strong> Panel upgrade quote</p>
|
||||
<p><strong>Email:</strong> jordan@example.com</p>
|
||||
<p><strong>Phone:</strong> (630) 555-0142</p>
|
||||
<p><strong>Area:</strong> Naperville & western suburbs</p>
|
||||
<div class="field" style="margin-top:16px">
|
||||
<label>Internal notes</label>
|
||||
<textarea>Called back — scheduling site visit Thursday AM.</textarea>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="button" style="margin-top:12px">Save notes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>UTM attribution</h2></div>
|
||||
<div class="panel-b">
|
||||
<table class="table">
|
||||
<tr><td>Source</td><td><strong>google</strong></td></tr>
|
||||
<tr><td>Medium</td><td>cpc</td></tr>
|
||||
<tr><td>Campaign</td><td>emergency</td></tr>
|
||||
<tr><td>Landing</td><td>/contact.html</td></tr>
|
||||
<tr><td>First touch</td><td>Mar 18, 2026 · 9:14am</td></tr>
|
||||
</table>
|
||||
<p class="muted" style="margin-top:12px">Linked contact consent: email ✓ · SMS ✓ · postcard —</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lead inbox · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="active" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Lead inbox</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Statuses, source attribution, quick filter. Contact form submissions land here.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h">
|
||||
<h2>Lead inbox</h2>
|
||||
<div>
|
||||
<select style="padding:6px 10px;border:1px solid var(--border);font:inherit;margin-right:8px">
|
||||
<option>All statuses</option><option>New</option><option>Contacted</option><option>Won</option>
|
||||
</select>
|
||||
<input placeholder="Filter…" style="padding:6px 10px;border:1px solid var(--border);font:inherit;width:160px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Name</th><th>Source / UTM</th><th>Need</th><th>Status</th></tr></thead>
|
||||
<tbody><tr><td><a href="portal-lead-detail.html">Jordan Lee</a></td><td>google / emergency</td><td>Panel upgrade quote</td><td><span class="badge badge-new">New</span></td></tr><tr><td><a href="portal-lead-detail.html">Sam Ortiz</a></td><td>facebook / spring-promo</td><td>EV charger install</td><td><span class="badge badge-contacted">Contacted</span></td></tr><tr><td><a href="portal-lead-detail.html">Avery Chen</a></td><td>direct / contact-form</td><td>Recessed lighting</td><td><span class="badge badge-new">New</span></td></tr><tr><td><a href="portal-lead-detail.html">Morgan Diaz</a></td><td>postcard / march-mailer</td><td>GFCI / outlet upgrade</td><td><span class="badge badge-won">Won</span></td></tr><tr><td><a href="portal-lead-detail.html">Riley Park</a></td><td>google / brand</td><td>Ceiling fan install</td><td><span class="badge badge-lost">Lost</span></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Sign in · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="login-wrap">
|
||||
<div class="login-card">
|
||||
<div class="proposal-note" style="margin-bottom:20px"><strong>UX note:</strong> Private client login (Django auth). Not public.</div>
|
||||
<h1>Select Portal</h1>
|
||||
<p class="sub">Select Electrical Services · leads, campaigns, and billing in one place.</p>
|
||||
<form class="form-grid" action="portal-dashboard.html" method="get">
|
||||
<div class="field"><label for="email">Email</label><input id="email" type="email" value="select8020@gmail.com"></div>
|
||||
<div class="field"><label for="password">Password</label><input id="password" type="password" value="••••••••"></div>
|
||||
<button class="btn btn-primary" type="submit">Sign in</button>
|
||||
</form>
|
||||
<p style="margin-top:16px;font-size:13px;color:#6b7280"><a href="ux-gallery.html">← Back to proposal gallery</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Postcard designer · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="active" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Postcard designer</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Size picker, reusable media library, live front/back preview.</div>
|
||||
|
||||
<div class="designer-layout">
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Size</h2></div>
|
||||
<div class="panel-b">
|
||||
<div class="size-grid">
|
||||
<button type="button" class="size-option active"><div class="sz-name">4×6</div><div class="muted">Standard</div></button>
|
||||
<button type="button" class="size-option"><div class="sz-name">6×9</div><div class="muted">Large</div></button>
|
||||
<button type="button" class="size-option"><div class="sz-name">6×11</div><div class="muted">Jumbo</div></button>
|
||||
<button type="button" class="size-option"><div class="sz-name">Square</div><div class="muted">6×6</div></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Copy</h2></div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Headline</label><input value="Need an electrician?"></div>
|
||||
<div class="field"><label>Subline</label><input value="Licensed electrician · Call or text · (630) 202-8020"></div>
|
||||
<a class="btn btn-primary" href="portal-direct-mail.html">Use in campaign</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Live preview — front</h2></div>
|
||||
<div class="panel-b" style="display:flex;justify-content:center">
|
||||
<div class="postcard">
|
||||
<div class="postcard-media"></div>
|
||||
<div class="postcard-copy">
|
||||
<div class="postcard-headline">Need an electrician?</div>
|
||||
<div class="postcard-sub">Licensed electrician · Call or text · (630) 202-8020</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Social accounts · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="active" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Social accounts</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> OAuth connect / reconnect when tokens expire; health + disconnect.</div>
|
||||
|
||||
<div class="connect-grid">
|
||||
<button type="button" class="connect-card">
|
||||
<div class="platform-icon meta">f</div>
|
||||
<div><strong>Facebook Page</strong><p class="muted" style="margin:4px 0 0">Connected · token healthy</p></div>
|
||||
</button>
|
||||
<button type="button" class="connect-card">
|
||||
<div class="platform-icon ig">IG</div>
|
||||
<div><strong>Instagram</strong><p class="muted" style="margin:4px 0 0">Reconnect required · token expired</p></div>
|
||||
</button>
|
||||
<button type="button" class="connect-card">
|
||||
<div class="platform-icon li">in</div>
|
||||
<div><strong>LinkedIn</strong><p class="muted" style="margin:4px 0 0">Not connected · Add via OAuth</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>AI social generator · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="active" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>AI social generator</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Prompt → draft variants → insert into social composer. Ollama local.</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="ai-chat">
|
||||
<div class="ai-chat-h"><h2>AI social generator</h2><span class="ai-pill">Ollama · local</span></div>
|
||||
<div class="ai-messages">
|
||||
<div class="ai-msg bot"><div class="who">Assistant</div><div class="bubble">Describe the post. I'll draft captions you can send to the composer.</div></div>
|
||||
<div class="ai-msg user"><div class="who">You</div><div class="bubble">Spring promo for local customers, friendly, include phone.</div></div>
|
||||
<div class="ai-msg bot"><div class="who">Assistant</div><div class="bubble">Draft A:
|
||||
<div class="ai-draft">Need an EV outlet or panel upgrade? Licensed electrician serving Naperville & western suburbs since 1984.
|
||||
|
||||
Call (630) 202-8020</div>
|
||||
<div style="margin-top:8px"><a class="btn btn-sm btn-primary" href="portal-social.html">Insert into composer</a></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="ai-chat-input">
|
||||
<textarea placeholder="Ask for another tone or length…"></textarea>
|
||||
<button class="btn btn-primary" type="button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>How it works</h2></div>
|
||||
<div class="panel-b" style="font-size:14px">
|
||||
<p>Runs against your <strong>local LLM via Ollama</strong> — no cloud LLM required.</p>
|
||||
<p>Requires <strong>Social consolidation</strong> so drafts hand off to compose → preview → schedule.</p>
|
||||
<p class="muted">Mock only — production streams from your Ollama host.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Social calendar · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="active" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Social calendar</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Schedule and queue upcoming posts.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>March 2026</h2><a class="btn btn-sm btn-primary" href="portal-social.html">New post</a></div>
|
||||
<div class="panel-b">
|
||||
<div class="calendar-grid">
|
||||
<div class="dow">Sun</div><div class="dow">Mon</div><div class="dow">Tue</div><div class="dow">Wed</div><div class="dow">Thu</div><div class="dow">Fri</div><div class="dow">Sat</div>
|
||||
<div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day has-post">5<div class="dot"></div></div><div class="day">6</div><div class="day">7</div><div class="day">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day has-post">12<div class="dot"></div></div><div class="day">13</div><div class="day">14</div><div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day has-post">18<div class="dot"></div></div><div class="day">19</div><div class="day">20</div><div class="day">21</div><div class="day">22</div><div class="day">23</div><div class="day has-post">24<div class="dot"></div></div><div class="day">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div><div class="day">29</div><div class="day">30</div><div class="day">31</div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div>
|
||||
</div>
|
||||
<p class="muted" style="margin-top:16px">Dots = scheduled posts. Click through to composer in production.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Social composer · Portal · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Select Electrical Services<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="active" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Social composer</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Compose once; live FB / IG / LinkedIn previews update as you type.</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Compose</h2><a class="btn btn-sm btn-ghost" href="portal-social-ai.html">AI assist</a></div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Networks</label>
|
||||
<div style="display:flex;gap:12px;font-size:14px"><label><input type="checkbox" checked> Facebook</label>
|
||||
<label><input type="checkbox" checked> Instagram</label>
|
||||
<label><input type="checkbox"> LinkedIn</label></div>
|
||||
</div>
|
||||
<div class="field"><label>Caption</label><textarea id="cap">Need an EV outlet or panel upgrade? Licensed electrician serving Naperville & western suburbs since 1984.
|
||||
|
||||
Call (630) 202-8020</textarea></div>
|
||||
<div class="field"><label>Schedule</label><select><option>Post now</option><option>Tomorrow 9:00am</option><option>Add to calendar</option></select></div>
|
||||
<button class="btn btn-primary" type="button">Schedule post</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Facebook preview</h2></div>
|
||||
<div class="panel-b" style="display:flex;justify-content:center">
|
||||
<div class="social-phone">
|
||||
<div class="soc-header">
|
||||
<div class="soc-avatar">E</div>
|
||||
<div><div class="soc-name">Select Electrical Services</div><div class="soc-meta">Just now · Public</div></div>
|
||||
</div>
|
||||
<div class="soc-caption">Need an EV outlet or panel upgrade? Licensed electrician serving Naperville & western suburbs since 1984.
|
||||
|
||||
Call (630) 202-8020</div>
|
||||
<div class="soc-image"></div>
|
||||
<div class="soc-actions">Like · Comment · Share</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Select Electrical Services — Feature pricing</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — pricing picker (not a quote)</div>
|
||||
<div>
|
||||
<a href="ux-gallery.html">All screens</a> ·
|
||||
<a href="index.html">Marketing home</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hub-hero">
|
||||
<h1>Build your package</h1>
|
||||
<p>Base public site + client portal (with UTM) always included. Toggle add-ons to see one-time build and monthly totals. Stripe / SMS / postage usage billed separately.</p>
|
||||
</section>
|
||||
|
||||
<div class="pricing-layout">
|
||||
<div class="price-panel">
|
||||
<h2>Features</h2>
|
||||
|
||||
<div class="feat-row locked">
|
||||
<input type="checkbox" checked disabled id="f-public" data-build="300" data-month="10" data-base>
|
||||
<div class="feat-text">
|
||||
<label for="f-public">Public site</label>
|
||||
<div class="desc">Landing, about, contact (+ your service pages).</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$300</strong> build</div>
|
||||
<div class="amt"><strong>$10</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row locked">
|
||||
<input type="checkbox" checked disabled id="f-portal" data-build="300" data-month="30" data-base>
|
||||
<div class="feat-text">
|
||||
<label for="f-portal">Client portal + UTM</label>
|
||||
<div class="desc">Login, dashboard, leads, UTM analytics — every client.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$300</strong> build</div>
|
||||
<div class="amt"><strong>$30</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-email" data-build="500" data-month="10" checked>
|
||||
<div class="feat-text">
|
||||
<label for="f-email">Email & SMS</label>
|
||||
<div class="desc">Campaigns, mailing list, engagement reports.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$10</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-mail" data-build="500" data-month="5">
|
||||
<div class="feat-text">
|
||||
<label for="f-mail">Direct mail</label>
|
||||
<div class="desc">Postcard designer + print/send. Postage separate.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$5</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-blog" data-build="500" data-month="10" checked>
|
||||
<div class="feat-text">
|
||||
<label for="f-blog">Blog</label>
|
||||
<div class="desc">Public blog + portal post management.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$10</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-pay" data-build="500" data-month="20" data-requires="f-email" checked>
|
||||
<div class="feat-text">
|
||||
<label for="f-pay">Payments (Stripe)</label>
|
||||
<div class="desc">Invoices + pay links. Requires Email & SMS.</div>
|
||||
<div class="dep-note" id="dep-pay" hidden>Requires Email & SMS — auto-selected.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$20</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-social" data-build="500" data-month="20">
|
||||
<div class="feat-text">
|
||||
<label for="f-social">Social consolidation</label>
|
||||
<div class="desc">Accounts, composer, scheduling.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$20</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-ai" data-build="300" data-month="20" data-requires="f-social">
|
||||
<div class="feat-text">
|
||||
<label for="f-ai">AI social generator</label>
|
||||
<div class="desc">Ollama drafts. Requires Social consolidation.</div>
|
||||
<div class="dep-note" id="dep-ai" hidden>Requires Social — auto-selected.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$300</strong> build</div>
|
||||
<div class="amt"><strong>$20</strong> /mo</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="price-summary">
|
||||
<h2>Estimate</h2>
|
||||
<div class="line"><span>One-time build</span><strong id="sum-build">$0</strong></div>
|
||||
<div class="line"><span>Monthly</span><strong id="sum-month">$0</strong></div>
|
||||
<div class="line total"><span>Selected</span><span id="sum-count">0 features</span></div>
|
||||
<p class="disclaimer">Draft catalog pricing from platform <code>features.md</code>. Not a formal quote. Third-party usage (Stripe fees, SMS, postage) not included.</p>
|
||||
<p class="disclaimer"><a href="ux-gallery.html">← Back to UX gallery</a></p>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const boxes = [...document.querySelectorAll('.price-panel input[type=checkbox]')];
|
||||
const sumBuild = document.getElementById('sum-build');
|
||||
const sumMonth = document.getElementById('sum-month');
|
||||
const sumCount = document.getElementById('sum-count');
|
||||
|
||||
function enforceDeps(changed) {
|
||||
const pay = document.getElementById('f-pay');
|
||||
const email = document.getElementById('f-email');
|
||||
const ai = document.getElementById('f-ai');
|
||||
const social = document.getElementById('f-social');
|
||||
const depPay = document.getElementById('dep-pay');
|
||||
const depAi = document.getElementById('dep-ai');
|
||||
|
||||
if (pay.checked && !email.checked) {
|
||||
email.checked = true;
|
||||
depPay.hidden = false;
|
||||
} else if (!pay.checked) {
|
||||
depPay.hidden = true;
|
||||
}
|
||||
|
||||
if (ai.checked && !social.checked) {
|
||||
social.checked = true;
|
||||
depAi.hidden = false;
|
||||
} else if (!ai.checked) {
|
||||
depAi.hidden = true;
|
||||
}
|
||||
|
||||
if (changed === email && !email.checked && pay.checked) {
|
||||
pay.checked = false;
|
||||
depPay.hidden = true;
|
||||
}
|
||||
if (changed === social && !social.checked && ai.checked) {
|
||||
ai.checked = false;
|
||||
depAi.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
function totals() {
|
||||
let build = 0, month = 0, n = 0;
|
||||
boxes.forEach((el) => {
|
||||
if (!el.checked) return;
|
||||
build += Number(el.dataset.build || 0);
|
||||
month += Number(el.dataset.month || 0);
|
||||
n += 1;
|
||||
});
|
||||
sumBuild.textContent = '$' + build.toLocaleString();
|
||||
sumMonth.textContent = '$' + month.toLocaleString();
|
||||
sumCount.textContent = n + (n === 1 ? ' feature' : ' features');
|
||||
}
|
||||
|
||||
boxes.forEach((el) => {
|
||||
el.addEventListener('change', () => {
|
||||
enforceDeps(el);
|
||||
totals();
|
||||
});
|
||||
});
|
||||
enforceDeps(null);
|
||||
totals();
|
||||
})();
|
||||
</script>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
+319
@@ -0,0 +1,319 @@
|
||||
<!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 – Privacy Policy explaining how we collect, use, and protect your personal information." />
|
||||
<meta name="keywords" content="privacy policy, data protection, personal information, selectelectrical" />
|
||||
<title>Select Electrical Services | Privacy Policy</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"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Privacy Policy) -->
|
||||
<section class="page-header-sm">
|
||||
<div class="page-header-bg" role="img" aria-label="privacy and security"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container text-center text-lg-start">
|
||||
<h1 data-aos="fade-up">Privacy <span>Policy</span></h1>
|
||||
<div class="last-updated" data-aos="fade-up" data-aos-delay="30">Last Updated: March 15, 2025</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRIVACY CONTENT -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="privacy-content" data-aos="fade-up">
|
||||
<p class="lead">At Select Electrical Services, accessible from <strong>selectelectricalservices.net</strong>, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Select Electrical Services and how we use it.</p>
|
||||
|
||||
<p>If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us.</p>
|
||||
|
||||
<h2>1. Information We Collect</h2>
|
||||
<p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
|
||||
<p>If you contact us directly, we may receive additional information about you such as your name, email address, phone number, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
|
||||
<p>When you register for an Account, we may ask for your contact information, including items such as name, company name, address, email address, and telephone number.</p>
|
||||
|
||||
<h2>2. How We Use Your Information</h2>
|
||||
<p>We use the information we collect in various ways, including to:</p>
|
||||
<ul>
|
||||
<li>Provide, operate, and maintain our website</li>
|
||||
<li>Improve, personalize, and expand our website</li>
|
||||
<li>Understand and analyze how you use our website</li>
|
||||
<li>Develop new products, services, features, and functionality</li>
|
||||
<li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
|
||||
<li>Send you emails</li>
|
||||
<li>Find and prevent fraud</li>
|
||||
</ul>
|
||||
|
||||
<h2>3. Log Files</h2>
|
||||
<p>Select Electrical Services follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
|
||||
|
||||
<h2>4. Cookies and Web Beacons</h2>
|
||||
<p>Like any other website, Select Electrical Services uses "cookies". These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
|
||||
|
||||
<h2>5. Third Party Privacy Policies</h2>
|
||||
<p>Select Electrical Services's Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options.</p>
|
||||
|
||||
<div class="highlight">
|
||||
<p><strong>Your Rights:</strong> Depending on your location, you may have certain rights regarding your personal information, such as the right to access, correct, or delete the data we hold about you. To exercise these rights, please contact us.</p>
|
||||
</div>
|
||||
|
||||
<h2>6. CCPA Privacy Rights (Do Not Sell My Personal Information)</h2>
|
||||
<p>Under the CCPA, among other rights, California consumers have the right to:</p>
|
||||
<ul>
|
||||
<li>Request that a business that collects a consumer's personal data disclose the categories and specific pieces of personal data that a business has collected about consumers.</li>
|
||||
<li>Request that a business delete any personal data about the consumer that a business has collected.</li>
|
||||
<li>Request that a business that sells a consumer's personal data, not sell the consumer's personal data.</li>
|
||||
</ul>
|
||||
<p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
|
||||
|
||||
<h2>7. GDPR Data Protection Rights</h2>
|
||||
<p>We would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to the following:</p>
|
||||
<ul>
|
||||
<li><strong>The right to access</strong> – You have the right to request copies of your personal data.</li>
|
||||
<li><strong>The right to rectification</strong> – You have the right to request that we correct any information you believe is inaccurate.</li>
|
||||
<li><strong>The right to erasure</strong> – You have the right to request that we erase your personal data, under certain conditions.</li>
|
||||
<li><strong>The right to restrict processing</strong> – You have the right to request that we restrict the processing of your personal data, under certain conditions.</li>
|
||||
<li><strong>The right to object to processing</strong> – You have the right to object to our processing of your personal data, under certain conditions.</li>
|
||||
<li><strong>The right to data portability</strong> – You have the right to request that we transfer the data that we have collected to another organization, or directly to you, under certain conditions.</li>
|
||||
</ul>
|
||||
<p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
|
||||
|
||||
<h2>8. Children's Information</h2>
|
||||
<p>Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity.</p>
|
||||
<p>Select Electrical Services does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records.</p>
|
||||
|
||||
<h2>9. Changes to This Privacy Policy</h2>
|
||||
<p>We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page. We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective and update the "effective date" at the top of this Privacy Policy.</p>
|
||||
<p>You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.</p>
|
||||
|
||||
<h2>10. Contact Us</h2>
|
||||
<p>If you have any questions or suggestions about our Privacy Policy, do not hesitate to contact us:</p>
|
||||
<ul>
|
||||
<li>By email: <a href="mailto:privacy@selectelectricalservices.net">privacy@selectelectricalservices.net</a></li>
|
||||
<li>By visiting our contact page: <a href="#contact">Contact Us</a></li>
|
||||
<li>By mail: 1778 Villanova Drive, Naperville, IL 60565, USA</li>
|
||||
</ul>
|
||||
|
||||
<p class="mt-4"><em>This Privacy Policy was last updated on March 15, 2025 and is effective immediately.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Have questions about our privacy practices? Our team is ready to help.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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>select8020@gmail.com<br>privacy@selectelectricalservices.net</p></div></div>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-clock"></i></div><div><h6>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="subject">Subject</label><input type="text" class="form-control" id="subject" placeholder="Privacy inquiry"></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
// newsletter button demo
|
||||
document.querySelectorAll('.newsletter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const input = this.previousElementSibling;
|
||||
if (input.value && input.value.includes('@')) {
|
||||
this.innerHTML = '<i class="fas fa-check"></i>';
|
||||
this.style.background = '#22c55e';
|
||||
input.value = '';
|
||||
input.placeholder = 'Subscribed!';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>404 · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Branded error page with path home or to contact.</div>
|
||||
|
||||
<div class="error-hero">
|
||||
<h1>404</h1>
|
||||
<p style="font-size:18px">Page not found</p>
|
||||
<p class="muted">That URL doesn't exist on Select Electrical Services.</p>
|
||||
<p style="margin-top:24px">
|
||||
<a class="btn btn-primary" href="index.html">Go home</a>
|
||||
<a class="btn btn-ghost" href="index.html#contact" style="margin-left:8px">Contact</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>When to schedule an electrical safety inspection · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
|
||||
|
||||
<p class="muted">Mar 12, 2026 · <a href="public-blog.html">All posts</a></p>
|
||||
<h1 style="font-family:var(--display);margin:8px 0 16px">When to schedule an electrical safety inspection</h1>
|
||||
<div class="card" style="font-size:15px;line-height:1.6">
|
||||
<p>How a safety inspection can catch problems before they become emergencies.</p>
|
||||
<p>This is a mock article body for the proposal. In production, posts are managed from the client portal blog editor and rendered on the public site.</p>
|
||||
<p><a href="index.html#contact">Contact Select Electrical Services</a> if you need help sooner.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Blog · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Public readers view posts; client manages them in the portal.</div>
|
||||
<h1 style="font-family:var(--display);margin:0 0 8px">Blog</h1><p class="muted" style="margin:0 0 24px;font-size:14px">Tips from Select Electrical Services</p><div class="blog-list"><a class="blog-item" href="public-blog-post.html"><div class="meta">Mar 12, 2026</div><h3>When to schedule an electrical safety inspection</h3><p>How a safety inspection can catch problems before they become emergencies.</p></a><a class="blog-item" href="public-blog-post.html"><div class="meta">Feb 28, 2026</div><h3>Signs your electrical panel needs an upgrade</h3><p>Breakers tripping, outdated fuse boxes, and when to call a licensed electrician.</p></a><a class="blog-item" href="public-blog-post.html"><div class="meta">Jan 15, 2026</div><h3>Benefits of installing ceiling fans</h3><p>Lower utility bills and better airflow — installed to code.</p></a></div>
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Pay invoice · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
|
||||
<div class="pay-box">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Stripe Checkout (hosted). Email add-on delivered this link.</div>
|
||||
<p class="muted">Invoice INV-1042 · Jordan Lee</p>
|
||||
<h1>Pay Select Electrical Services</h1>
|
||||
<div class="pay-amount">$480.00</div>
|
||||
<p style="font-size:14px;color:var(--muted)">Secure payment via Stripe. Card details never touch our servers in this mock.</p>
|
||||
<button class="btn btn-primary" type="button" style="width:100%;margin-top:16px" onclick="alert('Mock only — Stripe Checkout in production.')">Pay with card</button>
|
||||
<p class="muted" style="margin-top:16px;text-align:center"><a href="index.html">Back to site</a></p>
|
||||
</div>
|
||||
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Under construction · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Pre-launch / maintenance holding page with notify-me email.</div>
|
||||
|
||||
<div class="card" style="text-align:center;padding:48px 32px">
|
||||
<h1 style="font-family:var(--display);margin:0 0 12px">Under construction</h1>
|
||||
<p style="color:var(--muted)">We're finishing something new for Select Electrical Services. Leave your email and we'll notify you.</p>
|
||||
<form class="form-grid" style="max-width:360px;margin:24px auto 0" onsubmit="alert('Mock notify-me only');return false;">
|
||||
<div class="field"><input type="email" placeholder="you@example.com" required></div>
|
||||
<button class="btn btn-primary" type="submit">Notify me</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Unsubscribe · Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
<div class="proposal-note"><strong>UX note:</strong> One-click email unsubscribe and per-channel preference.</div>
|
||||
|
||||
<div class="card">
|
||||
<h1 style="font-family:var(--display);margin:0 0 8px">Email preferences</h1>
|
||||
<p class="muted" style="font-size:14px;margin:0 0 20px">Manage how Select Electrical Services contacts you.</p>
|
||||
<form class="form-grid">
|
||||
<div class="field"><label><input type="checkbox"> Marketing email</label></div>
|
||||
<div class="field"><label><input type="checkbox" checked> Transactional / job updates</label></div>
|
||||
<div class="field"><label><input type="checkbox"> SMS</label></div>
|
||||
<div class="field"><label><input type="checkbox"> Postcard mail</label></div>
|
||||
<button class="btn btn-primary" type="button">Save preferences</button>
|
||||
</form>
|
||||
<p class="muted" style="margin-top:16px"><a href="#">Unsubscribe from all marketing</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
+362
@@ -0,0 +1,362 @@
|
||||
<!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 – professional smart home system installation. Home automation, smart lighting, security, climate control, and entertainment integration." />
|
||||
<meta name="keywords" content="smart home, home automation, smart lighting, smart thermostat, home security, voice control, Alexa, Google Home" />
|
||||
<title>Select Electrical Services | Smart Home Systems</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 (same) -->
|
||||
<div id="preloader" aria-hidden="true">
|
||||
<div class="preloader-bolt">
|
||||
<div class="preloader-rings"></div><div class="preloader-rings"></div>
|
||||
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Smart Home Systems) -->
|
||||
<section class="page-header">
|
||||
<div class="page-header-bg" role="img" aria-label="smart home devices"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-microchip"></i> Intelligent Living</div>
|
||||
<h1 data-aos="fade-up">Smart Home <span>Systems</span> Integration</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="80">Control lighting, climate, security, and entertainment from anywhere. Future‑proof your home with seamless automation.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- OVERVIEW SECTION -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-5">
|
||||
<div class="col-lg-6" data-aos="fade-right">
|
||||
<img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=700&q=80" alt="smart home control panel" class="img-fluid rounded-3 shadow">
|
||||
</div>
|
||||
<div class="col-lg-6" data-aos="fade-left">
|
||||
<div class="section-label">Connect. Control. Comfort.</div>
|
||||
<h2 class="section-title">Your Home, <span>Intelligently</span> Wired</h2>
|
||||
<p class="section-desc" style="max-width:100%;">We design and install whole‑home automation that works together flawlessly. Whether you're starting small or building a fully integrated system, our certified technicians ensure every device communicates securely and reliably.</p>
|
||||
<ul class="about-list mt-4">
|
||||
<li><i class="fas fa-check-circle"></i> Voice control (Alexa, Google, Siri)</li>
|
||||
<li><i class="fas fa-check-circle"></i> Centralized & remote access via app</li>
|
||||
<li><i class="fas fa-check-circle"></i> Scalable – start with one room, expand later</li>
|
||||
<li><i class="fas fa-check-circle"></i> Professional wiring & network setup</li>
|
||||
<li><i class="fas fa-check-circle"></i> Compatibility with major ecosystems</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TYPES OF SMART HOME SYSTEMS (service cards) -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">What we offer</div>
|
||||
<h2 class="section-title">Smart <span>Solutions</span> For Every Room</h2>
|
||||
<p class="section-desc mx-auto">From lighting to security – we integrate it all.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">L</div>
|
||||
<div class="service-icon"><i class="fas fa-lightbulb"></i></div>
|
||||
<h5>Smart Lighting</h5>
|
||||
<p>Dimmers, color‑changing LEDs, automated schedules, and motion sensors. Control from your phone or voice.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">C</div>
|
||||
<div class="service-icon"><i class="fas fa-thermometer-half"></i></div>
|
||||
<h5>Climate Control</h5>
|
||||
<p>Smart thermostats, zoned heating/cooling, and remote temperature management for comfort and savings.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">S</div>
|
||||
<div class="service-icon"><i class="fas fa-shield-alt"></i></div>
|
||||
<h5>Security & Cameras</h5>
|
||||
<p>Smart locks, video doorbells, indoor/outdoor cameras, and alarm systems – all accessible from one app.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">E</div>
|
||||
<div class="service-icon"><i class="fas fa-tv"></i></div>
|
||||
<h5>Entertainment</h5>
|
||||
<p>Whole‑home audio, home theater, multi‑room video distribution, and voice‑controlled media.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">P</div>
|
||||
<div class="service-icon"><i class="fas fa-charging-station"></i></div>
|
||||
<h5>EV Charging & Solar</h5>
|
||||
<p>Smart EV chargers with scheduling, solar monitoring, and battery backup integration for energy independence.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">N</div>
|
||||
<div class="service-icon"><i class="fas fa-wifi"></i></div>
|
||||
<h5>Networking & Connectivity</h5>
|
||||
<p>Whole‑home mesh WiFi, wired Ethernet drops, and network cabinets to keep everything fast and reliable.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SMART HOME PROCESS (custom process steps) -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">How we build</div>
|
||||
<h2 class="section-title">Our <span>Smart Home</span> Process</h2>
|
||||
<p class="section-desc mx-auto">From consultation to seamless integration.</p>
|
||||
</div>
|
||||
<div class="process-wrap" data-aos="fade-up">
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">1</span><i class="fas fa-clipboard-list"></i></div><h5>Consultation</h5><p>We discuss your goals, budget, and preferred ecosystem (Google, Alexa, Apple, Crestron, etc.).</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-drafting-compass"></i></div><h5>Design</h5><p>We create a system design, specifying devices, wiring needs, and network requirements.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-tools"></i></div><h5>Installation</h5><p>We run low‑voltage wiring, install devices, set up controllers, and configure the network.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-mobile-alt"></i></div><h5>Integration & Training</h5><p>We connect everything, program scenes, and show you how to use your new smart home.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHY CHOOSE US FOR SMART HOME (dark cards) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Why Select Electrical</div>
|
||||
<h2 class="section-title light">Smart Home <span>Advantages</span></h2>
|
||||
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Expertise, quality, and future‑proofing.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-shield-alt"></i></div><div><h5>Secure & private</h5><p>We prioritize network security, encrypted connections, and secure device setup.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-gem"></i></div><div><h5>Premium brands</h5><p>We partner with Lutron, Control4, Sonos, Ring, Ecobee, and more.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-tachometer-alt"></i></div><div><h5>Future‑ready wiring</h5><p>We install structured cabling and conduit to support tomorrow's tech.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-mobile-alt"></i></div><div><h5>User‑friendly</h5><p>We keep it simple – you'll love using your system every day.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-file-invoice"></i></div><div><h5>Transparent quotes</h5><p>Itemized costs for equipment, labor, and programming – no surprises.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-history"></i></div><div><h5>Ongoing support</h5><p>We're here to help with updates, troubleshooting, and expansions.</p></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- TESTIMONIAL (smart home focused) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Client story</div>
|
||||
<h2 class="section-title light">Living the <span>smart life</span></h2>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="testi-card">
|
||||
<div class="testi-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
|
||||
<div class="testi-quote">"</div>
|
||||
<p class="testi-text">Select Electrical designed and installed a complete Control4 system in our new home. Lighting, blinds, music, and security all work together seamlessly. They took the time to understand our lifestyle and the result is both elegant and easy to use. Worth every penny!</p>
|
||||
<div class="testi-author"><img src="https://randomuser.me/api/portraits/women/33.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Jennifer Walsh</div><div class="testi-role">Homeowner, Naperville IL</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Ready to make your home smarter? Our team is standing by.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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><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>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="service">Service Needed</label><select class="form-select" id="service"><option selected disabled>Select</option><option>Smart Home Systems</option><option>Electrical Installation</option><option>Wiring & Rewiring</option><option>Lighting Installation</option><option>Maintenance</option><option>Emergency Repair</option></select></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER (exact same as index, with service links updated) -->
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS (same) -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+284
@@ -0,0 +1,284 @@
|
||||
<!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 – Terms and Conditions governing the use of our website and services." />
|
||||
<meta name="keywords" content="terms and conditions, terms of service, legal, selectelectrical" />
|
||||
<title>Select Electrical Services | Terms and Conditions</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"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Terms) -->
|
||||
<section class="page-header-sm">
|
||||
<div class="page-header-bg" role="img" aria-label="legal gavel"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container text-center text-lg-start">
|
||||
<h1 data-aos="fade-up">Terms <span>and</span> Conditions</h1>
|
||||
<div class="last-updated" data-aos="fade-up" data-aos-delay="30">Last Updated: March 15, 2025</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TERMS CONTENT -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="terms-content" data-aos="fade-up">
|
||||
<p class="lead">Please read these Terms and Conditions ("Terms", "Terms and Conditions") carefully before using the <strong>selectelectricalservices.net</strong> website (the "Service") operated by <strong>Select Electrical Services LLC</strong> ("us", "we", or "our").</p>
|
||||
|
||||
<p>Your access to and use of the Service is conditioned on your acceptance of and compliance with these Terms. These Terms apply to all visitors, users, and others who access or use the Service.</p>
|
||||
|
||||
<p>By accessing or using the Service you agree to be bound by these Terms. If you disagree with any part of the terms, you may not access the Service.</p>
|
||||
|
||||
<h2>1. Intellectual Property</h2>
|
||||
<p>The Service and its original content, features, and functionality are and will remain the exclusive property of Select Electrical Services LLC and its licensors. The Service is protected by copyright, trademark, and other laws of both the United States and foreign countries. Our trademarks and trade dress may not be used in connection with any product or service without the prior written consent of Select Electrical Services LLC.</p>
|
||||
|
||||
<h2>2. Links to Other Websites</h2>
|
||||
<p>Our Service may contain links to third-party websites or services that are not owned or controlled by Select Electrical Services. Select Electrical Services has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third-party websites or services. You further acknowledge and agree that Select Electrical shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods, or services available on or through any such websites or services.</p>
|
||||
<p><strong>We strongly advise you to read the terms and conditions and privacy policies of any third-party websites or services that you visit.</strong></p>
|
||||
|
||||
<h2>3. Termination</h2>
|
||||
<p>We may terminate or suspend access to our Service immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms. All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity, and limitations of liability.</p>
|
||||
|
||||
<h2>4. Disclaimer</h2>
|
||||
<div class="highlight">
|
||||
<p><strong>Your use of the Service is at your sole risk.</strong> The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind, whether express or implied, including, but not limited to, implied warranties of merchantability, fitness for a particular purpose, non-infringement, or course of performance.</p>
|
||||
</div>
|
||||
<p>Select Electrical Services, its subsidiaries, affiliates, and its licensors do not warrant that a) the Service will function uninterrupted, secure, or available at any particular time or location; b) any errors or defects will be corrected; c) the results of using the Service will meet your requirements.</p>
|
||||
|
||||
<h2>5. Governing Law</h2>
|
||||
<p>These Terms shall be governed and construed in accordance with the laws of Texas, United States, without regard to its conflict of law provisions. Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect.</p>
|
||||
|
||||
<h2>6. Changes</h2>
|
||||
<p>We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material, we will try to provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion. By continuing to access or use our Service after those revisions become effective, you agree to be bound by the revised terms. If you do not agree to the new terms, please stop using the Service.</p>
|
||||
|
||||
<h2>7. Contact Us</h2>
|
||||
<p>If you have any questions about these Terms, please contact us:</p>
|
||||
<ul>
|
||||
<li>By email: <a href="mailto:legal@selectelectricalservices.net">legal@selectelectricalservices.net</a></li>
|
||||
<li>By visiting our contact page: <a href="#contact">Contact Us</a></li>
|
||||
<li>By mail: 1778 Villanova Drive, Naperville, IL 60565, USA</li>
|
||||
</ul>
|
||||
|
||||
<p class="mt-4"><em>These Terms and Conditions were last updated on March 15, 2025 and are effective immediately.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Have questions about our terms or services? Our team is ready to help.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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>select8020@gmail.com<br>legal@selectelectricalservices.net</p></div></div>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-clock"></i></div><div><h6>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="subject">Subject</label><input type="text" class="form-control" id="subject" placeholder="Terms inquiry"></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
// newsletter button demo
|
||||
document.querySelectorAll('.newsletter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const input = this.previousElementSibling;
|
||||
if (input.value && input.value.includes('@')) {
|
||||
this.innerHTML = '<i class="fas fa-check"></i>';
|
||||
this.style.background = '#22c55e';
|
||||
input.value = '';
|
||||
input.placeholder = 'Subscribed!';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Select Electrical Services — UX proposal gallery</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="hub-page">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Select Electrical Services — UX examples (not production)</div>
|
||||
<div>
|
||||
<a href="pricing.html">Pricing picker</a> ·
|
||||
<a href="index.html">Marketing home</a> ·
|
||||
<a href="ux-gallery.html">All screens</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hub-hero">
|
||||
<h1>Select Electrical Services — UX proposal</h1>
|
||||
<p>Click-through mocks for the public marketing site and Django client portal: leads, UTM analytics, and optional add-ons (email/SMS, direct mail, blog, Stripe payments, social, AI social).</p>
|
||||
</section>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Proposal</h2>
|
||||
<p class="sec-lead">Scope and interactive estimate.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="pricing.html">
|
||||
<div class="eyebrow">Proposal · Pricing</div>
|
||||
<h3>Feature pricing</h3>
|
||||
<p>Toggle add-ons; live build + monthly totals. Dependencies enforced.</p>
|
||||
<span class="status">Ready</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Public site · base</h2>
|
||||
<p class="sec-lead">What visitors see.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="index.html"><div class="eyebrow">Public · base</div><h3>Marketing home</h3><p>Brand-forward landing with services, reviews, and CTA.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="index.html#about"><div class="eyebrow">Public · base</div><h3>About</h3><p>Since 1984 · western suburbs · trust signals.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="index.html#contact"><div class="eyebrow">Public · base</div><h3>Contact form</h3><p>Lead capture → portal lead + contact.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="index.html#services"><div class="eyebrow">Public · extras</div><h3>Services overview</h3><p>Repairs, lighting, panels, fans, GFCI, EV charging.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="electrical-installation.html"><div class="eyebrow">Public · extras</div><h3>Panel / installation</h3><p>Service detail page.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="lighting-installation.html"><div class="eyebrow">Public · extras</div><h3>Lighting</h3><p>Service detail page.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="emergency-repair.html"><div class="eyebrow">Public · extras</div><h3>Troubleshooting & repairs</h3><p>Service detail page.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="smart-home.html"><div class="eyebrow">Public · extras</div><h3>EV charging</h3><p>Service detail page.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-404.html"><div class="eyebrow">Public · system</div><h3>404 not found</h3><p>Branded error page.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-under-construction.html"><div class="eyebrow">Public · system</div><h3>Under construction</h3><p>Pre-launch holding page with notify-me.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Client portal · base (+ UTM)</h2>
|
||||
<p class="sec-lead">Private Django UI. UTM tracking included with every portal.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-login.html"><div class="eyebrow">Portal · base</div><h3>Login</h3><p>Client authentication.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-dashboard.html"><div class="eyebrow">Portal · base</div><h3>Dashboard</h3><p>New leads, campaign health, add-on widgets.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-leads.html"><div class="eyebrow">Portal · base</div><h3>Lead inbox</h3><p>Statuses, source attribution, filters.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-lead-detail.html"><div class="eyebrow">Portal · base</div><h3>Lead detail</h3><p>Notes, UTM, linked contact.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-analytics.html"><div class="eyebrow">Portal · base</div><h3>UTM analytics</h3><p>Leads by source/campaign over time.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Email & SMS</h2>
|
||||
<p class="sec-lead">Add-on. Required for payment notifications.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-contacts.html"><div class="eyebrow">Portal · Email/SMS</div><h3>Mailing list</h3><p>Contacts with per-channel consent.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-contacts-import.html"><div class="eyebrow">Portal · Email/SMS</div><h3>Import contacts</h3><p>CSV upload, mapping, consent defaults.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-campaign.html"><div class="eyebrow">Portal · Email/SMS</div><h3>Campaign composer</h3><p>Email or SMS — recipients, schedule, send.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-campaign-report.html"><div class="eyebrow">Portal · Email/SMS</div><h3>Email engagement</h3><p>Opens, clicks, bounces, unsubscribes.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-unsubscribe.html"><div class="eyebrow">Public · Email/SMS</div><h3>Opt-out / unsubscribe</h3><p>One-click and per-channel preference.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Direct mail</h2>
|
||||
<p class="sec-lead">Add-on. Postcards / print vendor handoff.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-postcard-designer.html"><div class="eyebrow">Portal · Direct mail</div><h3>Postcard designer</h3><p>Sizes, media library, front/back preview.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-direct-mail.html"><div class="eyebrow">Portal · Direct mail</div><h3>Direct mail campaign</h3><p>Recipients, schedule, send.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Blog</h2>
|
||||
<p class="sec-lead">Add-on. Public posts + portal management.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="public-blog.html"><div class="eyebrow">Public · Blog</div><h3>Blog index</h3><p>Public post listing.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-blog-post.html"><div class="eyebrow">Public · Blog</div><h3>Blog post</h3><p>Single article view.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-blog.html"><div class="eyebrow">Portal · Blog</div><h3>Blog list</h3><p>Draft / published management.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-blog-edit.html"><div class="eyebrow">Portal · Blog</div><h3>Blog editor</h3><p>Create and edit posts.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Payments (Stripe)</h2>
|
||||
<p class="sec-lead">Add-on. Requires Email & SMS.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-invoices.html"><div class="eyebrow">Portal · Payments</div><h3>Invoices</h3><p>Open / paid / past due list.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-invoice-create.html"><div class="eyebrow">Portal · Payments</div><h3>Create invoice</h3><p>Line items, customer email, send.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-invoice-detail.html"><div class="eyebrow">Portal · Payments</div><h3>Invoice detail</h3><p>Status and payment history.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-pay.html"><div class="eyebrow">Public · Payments</div><h3>Pay invoice</h3><p>Stripe checkout / confirmation.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Social & AI social</h2>
|
||||
<p class="sec-lead">Add-ons. AI generator requires social consolidation (Ollama).</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-social-accounts.html"><div class="eyebrow">Portal · Social</div><h3>Social accounts</h3><p>OAuth connect, health, disconnect.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-social.html"><div class="eyebrow">Portal · Social</div><h3>Social composer</h3><p>Live FB / IG / LinkedIn previews.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-social-calendar.html"><div class="eyebrow">Portal · Social</div><h3>Social calendar</h3><p>Schedule and queue.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-social-ai.html"><div class="eyebrow">Portal · AI Social</div><h3>AI social generator</h3><p>Ollama drafts → insert into composer.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Planned UX screen — Select Electrical Services</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Screen planned — not designed yet</div>
|
||||
<div><a href="ux-gallery.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="stub-page">
|
||||
<div class="stub-card">
|
||||
<div class="eyebrow" id="eyebrow" style="font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#1a4f6e;font-weight:600;margin-bottom:8px">Portal</div>
|
||||
<h1 id="title">Planned screen</h1>
|
||||
<p id="desc">This feature screen is scoped in the proposal but not mocked yet. Public marketing pages are ready; portal and add-on UIs come next.</p>
|
||||
<a class="btn" href="ux-gallery.html">Back to gallery</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const catalog = {
|
||||
'public-404': { eyebrow: 'Public · system', title: '404 not found', desc: 'Branded error page with paths home or to contact.' },
|
||||
'portal-login': { eyebrow: 'Portal · base', title: 'Login', desc: 'Private client authentication for the Django portal.' },
|
||||
'portal-dashboard': { eyebrow: 'Portal · base', title: 'Dashboard', desc: 'Home widgets: new leads, campaign health, scheduled activity.' },
|
||||
'portal-leads': { eyebrow: 'Portal · base', title: 'Lead inbox', desc: 'Statuses, source attribution, quick filter.' },
|
||||
'portal-lead-detail': { eyebrow: 'Portal · base', title: 'Lead detail', desc: 'Notes, UTM attribution, linked contact consent.' },
|
||||
'portal-analytics': { eyebrow: 'Portal · base', title: 'UTM analytics', desc: 'Leads by source/campaign over time — included with every portal.' },
|
||||
'portal-contacts': { eyebrow: 'Portal · Email/SMS', title: 'Mailing list', desc: 'Contacts with per-channel consent (email / SMS / postcard).' },
|
||||
'portal-contacts-import': { eyebrow: 'Portal · Email/SMS', title: 'Import contacts', desc: 'CSV/Excel upload, column mapping, consent defaults.' },
|
||||
'portal-campaign': { eyebrow: 'Portal · Email/SMS', title: 'Campaign composer', desc: 'Email or SMS — select recipients, schedule, send.' },
|
||||
'portal-campaign-report': { eyebrow: 'Portal · Email/SMS', title: 'Email engagement', desc: 'Opens, clicks, bounces, unsubscribes per campaign.' },
|
||||
'public-unsubscribe': { eyebrow: 'Public · Email/SMS', title: 'Opt-out / unsubscribe', desc: 'One-click email unsubscribe and per-channel preference.' },
|
||||
'portal-postcard-designer': { eyebrow: 'Portal · Direct mail', title: 'Postcard designer', desc: 'Size picker, media library, live front/back preview.' },
|
||||
'portal-direct-mail': { eyebrow: 'Portal · Direct mail', title: 'Direct mail campaign', desc: 'Recipients, schedule, vendor send.' },
|
||||
'public-blog': { eyebrow: 'Public · Blog', title: 'Blog index', desc: 'Public listing of posts.' },
|
||||
'public-blog-post': { eyebrow: 'Public · Blog', title: 'Blog post', desc: 'Single article view.' },
|
||||
'portal-blog': { eyebrow: 'Portal · Blog', title: 'Blog list', desc: 'Draft and published post management.' },
|
||||
'portal-blog-edit': { eyebrow: 'Portal · Blog', title: 'Blog editor', desc: 'Create and edit posts.' },
|
||||
'portal-invoices': { eyebrow: 'Portal · Payments', title: 'Invoices', desc: 'Invoice list with payment status.' },
|
||||
'portal-invoice-create': { eyebrow: 'Portal · Payments', title: 'Create invoice', desc: 'Line items, customer email, send pay link.' },
|
||||
'portal-invoice-detail': { eyebrow: 'Portal · Payments', title: 'Invoice detail', desc: 'Status, history, resend.' },
|
||||
'public-pay': { eyebrow: 'Public · Payments', title: 'Pay invoice', desc: 'Stripe checkout and confirmation states.' },
|
||||
'portal-social-accounts': { eyebrow: 'Portal · Social', title: 'Social accounts', desc: 'OAuth connect, reconnect, disconnect.' },
|
||||
'portal-social': { eyebrow: 'Portal · Social', title: 'Social composer', desc: 'Compose with live network previews.' },
|
||||
'portal-social-calendar': { eyebrow: 'Portal · Social', title: 'Social calendar', desc: 'Schedule and upcoming posts.' },
|
||||
'portal-social-ai': { eyebrow: 'Portal · AI Social', title: 'AI social generator', desc: 'Ollama prompt → draft → hand off to composer.' }
|
||||
};
|
||||
const key = new URLSearchParams(location.search).get('p') || '';
|
||||
const item = catalog[key];
|
||||
if (item) {
|
||||
document.getElementById('eyebrow').textContent = item.eyebrow;
|
||||
document.getElementById('title').textContent = item.title;
|
||||
document.getElementById('desc').textContent = item.desc;
|
||||
document.title = item.title + " — planned UX";
|
||||
}
|
||||
</script>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</body>
|
||||
</html>
|
||||
+381
@@ -0,0 +1,381 @@
|
||||
<!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 – professional wiring and rewiring services for homes, offices, and industrial facilities. Safe, code-compliant, and future-ready." />
|
||||
<meta name="keywords" content="wiring, rewiring, electrical wiring, home rewiring, office rewiring, electrical panel upgrade" />
|
||||
<title>Select Electrical Services | Wiring & Rewiring</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 (same) -->
|
||||
<div id="preloader" aria-hidden="true">
|
||||
<div class="preloader-bolt">
|
||||
<div class="preloader-rings"></div><div class="preloader-rings"></div>
|
||||
<svg class="bolt-svg" viewBox="0 0 60 80" fill="none"><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="#f4b400"/><polygon points="35,0 10,45 28,45 25,80 50,35 32,35" fill="url(#boltGrad)" opacity="0.6"/><defs><linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#f4b400" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
</div>
|
||||
<div class="preloader-bar"><div class="preloader-bar-inner"></div></div>
|
||||
<div class="preloader-text">Powering Up...</div>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<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="index.html#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#testimonials">Testimonials</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
|
||||
</ul>
|
||||
<a href="tel:+16302028020" class="nav-link btn-call ms-2">
|
||||
<i class="fas fa-phone-alt me-2"></i>(630) 202-8020
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HEADER (Wiring & Rewiring) -->
|
||||
<section class="page-header">
|
||||
<div class="page-header-bg" role="img" aria-label="electrician working on wires"></div>
|
||||
<div class="page-header-overlay"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge" data-aos="fade-down"><i class="fas fa-bolt"></i> Safe & Code‑Compliant</div>
|
||||
<h1 data-aos="fade-up">Wiring & <span>Rewiring</span> Services</h1>
|
||||
<p data-aos="fade-up" data-aos-delay="80">Modernize your property with professional wiring solutions. From full rewiring of old homes to new branch circuits and panel upgrades.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- OVERVIEW SECTION -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-5">
|
||||
<div class="col-lg-6" data-aos="fade-right">
|
||||
<img src="assets/images/67419.jpg" alt="Electrician wiring a panel" class="img-fluid rounded-3 shadow">
|
||||
</div>
|
||||
<div class="col-lg-6" data-aos="fade-left">
|
||||
<div class="section-label">Safe & future‑ready</div>
|
||||
<h2 class="section-title">Expert <span>Wiring</span> You Can Trust</h2>
|
||||
<p class="section-desc" style="max-width:100%;">Whether your home has outdated knob‑and‑tube wiring or your business needs a complete rewire to support modern equipment, Select Electrical delivers meticulous, code‑compliant work. We ensure every circuit is properly sized, grounded, and protected.</p>
|
||||
<ul class="about-list mt-4">
|
||||
<li><i class="fas fa-check-circle"></i> Complete home and office rewiring</li>
|
||||
<li><i class="fas fa-check-circle"></i> Old wiring replacement (aluminum, cloth‑insulated)</li>
|
||||
<li><i class="fas fa-check-circle"></i> New branch circuits for appliances / additions</li>
|
||||
<li><i class="fas fa-check-circle"></i> Surge protection and grounding upgrades</li>
|
||||
<li><i class="fas fa-check-circle"></i> Permits & final inspection included</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TYPES OF WIRING / REWIRING (service cards) -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">What we offer</div>
|
||||
<h2 class="section-title">Wiring <span>Solutions</span> For Every Need</h2>
|
||||
<p class="section-desc mx-auto">Residential, commercial, and industrial rewiring tailored to your property.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">R</div>
|
||||
<div class="service-icon"><i class="fas fa-home"></i></div>
|
||||
<h5>Residential Rewiring</h5>
|
||||
<p>Full or partial rewiring for older homes, upgrading to modern safety standards. Includes new outlets, switches, and AFCI/GFCI protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">C</div>
|
||||
<div class="service-icon"><i class="fas fa-building"></i></div>
|
||||
<h5>Commercial Wiring</h5>
|
||||
<p>Office rewiring, data cabling, dedicated circuits for servers, and lighting control systems. Minimal downtime guaranteed.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">I</div>
|
||||
<div class="service-icon"><i class="fas fa-industry"></i></div>
|
||||
<h5>Industrial Rewiring</h5>
|
||||
<p>Heavy‑duty conduit, motor feeds, control panels, and high‑capacity wiring for manufacturing facilities and warehouses.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up">
|
||||
<div class="service-card">
|
||||
<div class="service-num">P</div>
|
||||
<div class="service-icon"><i class="fas fa-charging-station"></i></div>
|
||||
<h5>Panel Upgrades</h5>
|
||||
<p>Replace outdated fuse boxes or insufficient panels. Increase amperage for modern appliances or EV chargers.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="80">
|
||||
<div class="service-card">
|
||||
<div class="service-num">A</div>
|
||||
<div class="service-icon"><i class="fas fa-plug"></i></div>
|
||||
<h5>Additional Circuits</h5>
|
||||
<p>Add dedicated circuits for kitchens, home theaters, workshops, or HVAC equipment – safely and neatly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="160">
|
||||
<div class="service-card">
|
||||
<div class="service-num">S</div>
|
||||
<div class="service-icon"><i class="fas fa-shield-alt"></i></div>
|
||||
<h5>Surge Protection & Grounding</h5>
|
||||
<p>Whole‑house surge protectors and proper grounding systems to safeguard electronics and comply with code.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REWIRING PROCESS (custom process steps) -->
|
||||
<section class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">How we rewire</div>
|
||||
<h2 class="section-title">Our <span>Rewiring</span> Process</h2>
|
||||
<p class="section-desc mx-auto">Minimal disruption, maximum safety.</p>
|
||||
</div>
|
||||
<div class="process-wrap" data-aos="fade-up">
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">1</span><i class="fas fa-clipboard-list"></i></div><h5>Inspection</h5><p>We assess your existing wiring, identify hazards, and create a detailed rewiring plan with a fixed quote.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">2</span><i class="fas fa-drafting-compass"></i></div><h5>Design & Permits</h5><p>Engineered layouts, load calculations, and all necessary permits secured before work begins.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">3</span><i class="fas fa-hammer"></i></div><h5>Rewiring</h5><p>Old wires removed (if needed) and new cabling run, terminated, and labeled. Temporary power maintained.</p></div>
|
||||
<div class="process-step"><div class="process-icon"><span class="process-step-num">4</span><i class="fas fa-check-double"></i></div><h5>Testing & Close‑up</h5><p>Thorough testing of every outlet, switch, and circuit. Final inspection and walk‑through with you.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHY CHOOSE US FOR WIRING (dark cards) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Why Select Electrical</div>
|
||||
<h2 class="section-title light">Wiring <span>Advantages</span></h2>
|
||||
<p style="color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto;">Quality materials, expert craftsmanship, and long‑term reliability.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-shield-alt"></i></div><div><h5>Safety first</h5><p>AFCI/GFCI protection, proper grounding, and strict NEC compliance.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-gem"></i></div><div><h5>Premium materials</h5><p>Copper wiring, certified breakers, and durable conduit from top brands.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-tachometer-alt"></i></div><div><h5>Future‑ready</h5><p>Larger conduit, extra capacity for smart home or EV upgrades.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up"><div class="why-card"><div class="why-icon"><i class="fas fa-clock"></i></div><div><h5>Minimal disruption</h5><p>We work efficiently, clean up daily, and respect your schedule.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="60"><div class="why-card"><div class="why-icon"><i class="fas fa-file-invoice"></i></div><div><h5>Transparent pricing</h5><p>Itemized quotes, no hidden fees, fixed‑price options available.</p></div></div></div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="120"><div class="why-card"><div class="why-icon"><i class="fas fa-history"></i></div><div><h5>5‑year warranty</h5><p>All rewiring work backed by our comprehensive warranty.</p></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROJECT GALLERY (wiring specific) -->
|
||||
<section class="section-pad" style="background:var(--bg);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Recent projects</div>
|
||||
<h2 class="section-title">Wiring <span>Showcase</span></h2>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?w=600&q=80" alt="panel upgrade"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>200A panel upgrade</h5><span>Residential</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="office rewiring"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Full office rewiring</h5><span>Commercial</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" alt="old home rewiring"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Victorian home rewire</h5><span>Historical</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in"><div class="project-card"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt="industrial"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Factory lighting circuit</h5><span>Industrial</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="80"><div class="project-card"><img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?w=600&q=80" alt="EV charger"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>EV charger circuit</h5><span>Garage</span></div></div></div>
|
||||
<div class="col-md-4" data-aos="zoom-in" data-aos-delay="160"><div class="project-card"><img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="kitchen wiring"><div class="project-overlay"><a href="#" class="proj-link"><i class="fas fa-arrow-up-right-from-square"></i></a><h5>Kitchen remodel wiring</h5><span>Residential</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TESTIMONIAL (wiring focused) -->
|
||||
<section class="section-pad" style="background:var(--navy);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center" style="color:var(--yellow);">Client story</div>
|
||||
<h2 class="section-title light">Trusted for <span>Rewiring</span></h2>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="testi-card">
|
||||
<div class="testi-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
|
||||
<div class="testi-quote">"</div>
|
||||
<p class="testi-text">We bought a 1920s house with cloth wiring and knob‑and‑tube. Select Electrical rewired the entire place in a week, with minimal wall damage. They even ran new circuits for our modern kitchen. Now we have peace of mind and plenty of power.</p>
|
||||
<div class="testi-author"><img src="https://randomuser.me/api/portraits/women/68.jpg" alt="client" class="testi-avatar"><div><div class="testi-name">Emily Foster</div><div class="testi-role">Homeowner, Naperville IL</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION (same as index) -->
|
||||
<section id="contact" class="section-pad" style="background:var(--white);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5" data-aos="fade-up">
|
||||
<div class="section-label justify-content-center">Get In Touch</div>
|
||||
<h2 class="section-title">Contact <span>Select Electrical</span></h2>
|
||||
<p class="section-desc mx-auto">Ready to rewire? Our team is standing by.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4" data-aos="fade-right">
|
||||
<div class="contact-info-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:28px;">Reach Out</h4>
|
||||
<div class="contact-info-item"><div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div><div><h6>Office</h6><p>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>Phone</h6><p>(630) 202-8020<br>(630) 202-8020 (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><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>Hours</h6><p>Mon–Fri: 7am–6pm<br>Emergency: 24/7</p></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8" data-aos="fade-left" data-aos-delay="100">
|
||||
<div class="contact-form-card">
|
||||
<h4 style="font-family:var(--font-display);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:28px;">Send a message</h4>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6"><label class="form-label" for="name">Full Name</label><input type="text" class="form-control" id="name" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="email">Email</label><input type="email" class="form-control" id="email" required></div>
|
||||
<div class="col-md-6"><label class="form-label" for="phone">Phone</label><input type="tel" class="form-control" id="phone"></div>
|
||||
<div class="col-md-6"><label class="form-label" for="service">Service Needed</label><select class="form-select" id="service"><option selected disabled>Select</option><option>Wiring & Rewiring</option><option>Electrical Installation</option><option>Lighting</option><option>Maintenance</option><option>Emergency</option><option>Smart Home</option></select></div>
|
||||
<div class="col-12"><label class="form-label" for="message">Message</label><textarea class="form-control" id="message" rows="5" required></textarea></div>
|
||||
<div class="col-12"><button type="submit" class="btn-submit"><i class="fas fa-paper-plane me-2"></i>Send Message</button></div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formSuccess" style="display:none; margin-top:20px; padding:18px; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); border-radius:8px; color:#1d4ed8; text-align:center; font-weight:600;"><i class="fas fa-check-circle me-2"></i>Thank you! We'll be in touch within 24 hours.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap mt-4">
|
||||
<iframe src="https://maps.google.com/maps?q=1778+Villanova+Drive,+Naperville,+IL+60565&output=embed" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- Brand Column -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="footer-brand">
|
||||
<img src="assets/images/logo-select-electrical.png" alt="Select Electrical" class="brand-logo">
|
||||
</div>
|
||||
<p class="footer-desc">
|
||||
Select Electrical Services delivers professional, certified electrical services for
|
||||
residential, commercial, and industrial clients. Safety, quality, and trust
|
||||
are our core values.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter/X"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Quick Links</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="index.html#about">About Us</a></li>
|
||||
<li><a href="index.html#services">Services</a></li>
|
||||
<li><a href="index.html#projects">Projects</a></li>
|
||||
<li><a href="index.html#team">Our Team</a></li>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Services -->
|
||||
<div class="col-lg-2 col-md-6 col-6">
|
||||
<h5 class="footer-heading">Services</h5>
|
||||
<ul class="footer-links">
|
||||
<li><a href="electrical-installation.html">Installation</a></li>
|
||||
<li><a href="wiring-services.html">Wiring</a></li>
|
||||
<li><a href="lighting-installation.html">Lighting</a></li>
|
||||
<li><a href="electrical-maintenance.html">Maintenance</a></li>
|
||||
<li><a href="emergency-repair.html">Emergency</a></li>
|
||||
<li><a href="smart-home.html">Smart Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Newsletter -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="footer-heading">Newsletter</h5>
|
||||
<p style="font-size:0.88rem;line-height:1.7;margin-bottom:0">
|
||||
Subscribe for electrical safety tips, company news, and exclusive service promotions.
|
||||
</p>
|
||||
<div class="newsletter-input-wrap">
|
||||
<input type="email" class="newsletter-input" placeholder="Your email address"
|
||||
aria-label="Newsletter email" />
|
||||
<button class="newsletter-btn" aria-label="Subscribe">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Bottom -->
|
||||
<div class="container">
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 <a href="#hero">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 TOP -->
|
||||
<button id="scrollTop" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
|
||||
|
||||
<!-- SCRIPTS (same) -->
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/aos.js"></script>
|
||||
<script>
|
||||
// preloader
|
||||
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('preloader').classList.add('hidden');document.body.style.overflow='visible'},2200)});
|
||||
document.body.style.overflow='hidden';
|
||||
AOS.init({duration:700,once:true,easing:'ease-out-cubic',offset:60});
|
||||
// sticky nav
|
||||
const nav=document.getElementById('mainNav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>50)});
|
||||
// smooth scroll for local anchors
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){const target=document.querySelector(this.getAttribute('href'));if(target){e.preventDefault();const offset=nav.offsetHeight;const top=target.getBoundingClientRect().top+window.scrollY-offset;window.scrollTo({top,behavior:'smooth'});const bsCollapse=bootstrap.Collapse.getInstance(document.getElementById('navMenu'));if(bsCollapse)bsCollapse.hide();}})});
|
||||
// scroll top
|
||||
const scrollTopBtn=document.getElementById('scrollTop');
|
||||
window.addEventListener('scroll',()=>{scrollTopBtn.classList.toggle('visible',window.scrollY>400)});
|
||||
scrollTopBtn.addEventListener('click',()=>{window.scrollTo({top:0,behavior:'smooth'})});
|
||||
// contact form demo
|
||||
document.getElementById('contactForm').addEventListener('submit',function(e){e.preventDefault();const name=document.getElementById('name').value.trim(),email=document.getElementById('email').value.trim(),message=document.getElementById('message').value.trim();if(!name||!email||!message){alert('Please fill Name, Email, Message.');return;}this.style.display='none';document.getElementById('formSuccess').style.display='block';});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
# Select Electrical Services — UX Mockup Notes
|
||||
|
||||
## Client
|
||||
- **Brand:** Select Electrical Services
|
||||
- **Current site:** https://www.selectelectricalservices.net/ (Google Sites)
|
||||
- **Google Business:** [Select Electrical Services](https://business.google.com/v/select-electrical-services/015987001196866101279/7932/) (Naperville electrician listing)
|
||||
|
||||
## Platform features
|
||||
Catalog: [`features.md`](../../../features.md)
|
||||
Client scope + recommended pricing: [`SCOPE.md`](SCOPE.md)
|
||||
|
||||
**Base always:** public site + client portal with UTM.
|
||||
**Recommended add-ons for this client:** Email & SMS, Payments (Stripe), Blog (SEO tips).
|
||||
|
||||
## Mockup location
|
||||
`proposals/select-electrical/mockup/`
|
||||
|
||||
Built from `templates/elctrical_installation/` with business copy from the live site and Google Business profile.
|
||||
|
||||
| Entry | File |
|
||||
|-------|------|
|
||||
| UX gallery (feature cards) | [`ux-gallery.html`](../mockup/ux-gallery.html) |
|
||||
| Interactive pricing | [`pricing.html`](../mockup/pricing.html) |
|
||||
| Marketing home | [`index.html`](../mockup/index.html) |
|
||||
| Planned portal/add-on stubs | [`ux-planned.html`](../mockup/ux-planned.html) |
|
||||
|
||||
## Site map (public concept — mocked)
|
||||
| Page | File |
|
||||
|------|------|
|
||||
| Home (landing + about + contact sections) | `index.html` |
|
||||
| About (section) | `index.html#about` |
|
||||
| Contact (section) | `index.html#contact` |
|
||||
| Panel / installation | `electrical-installation.html` |
|
||||
| Lighting | `lighting-installation.html` |
|
||||
| Fans / wiring | `wiring-services.html` |
|
||||
| Outlets / maintenance | `electrical-maintenance.html` |
|
||||
| Troubleshooting / repairs | `emergency-repair.html` |
|
||||
| EV charging | `smart-home.html` |
|
||||
| FAQ / legal / blog (template extras) | `faq.html`, `privacy-policy.html`, `terms-conditions.html`, `blog.html` |
|
||||
|
||||
Portal, add-on, and system screens are mocked — start at `ux-gallery.html`.
|
||||
|
||||
## Contact data used (from live site + Google Business)
|
||||
- Address: 1778 Villanova Drive, Naperville, IL 60565
|
||||
- Phone / text: (630) 202-8020
|
||||
- Email: select8020@gmail.com
|
||||
- Service area: DuPage, Will, Kane, Kendall, Cook Counties (western Chicago suburbs)
|
||||
- Since: 1984
|
||||
- Hours: Open 24 hours (per Google Business)
|
||||
- Credentials: Licensed / Bonded / Insured
|
||||
- Ratings: 4.8 ★ Google (20 reviews); 200+ Angie's List reviews (per marketing site)
|
||||
|
||||
## Reviews used in mockup
|
||||
Public Google Business reviews (paraphrased layout only; wording kept):
|
||||
- **Teri Peot** — professional multi-project work, honest pricing, recommends Select Electrical
|
||||
- **Arne Hendricksen** — EV outlet install, knowledgeable / great work
|
||||
- Reputation slide: Angie's List 200+ + Google 4.8 summary (not a fabricated quote)
|
||||
|
||||
## Preview reminder
|
||||
Pages show a fixed “UX Concept Preview” banner so visitors don’t confuse this with the live site. Open `ux-gallery.html` for the monica-style feature hub.
|
||||
|
||||
## Logo
|
||||
Real logo from live Google Sites: `mockup/assets/images/logo-select-electrical.png`
|
||||
Source: site asset hosted on Googleusercontent (linked from selectelectricalservices.net).
|
||||
|
||||
## Suggested next passes
|
||||
1. Swap in job / truck photos from Select Electrical (logo already in)
|
||||
2. Trim leftover template blog / project stock imagery if client prefers
|
||||
3. Confirm whether Dan should be named on-site (appears in public reviews)
|
||||
4. Forms → real intake (currently non-functional placeholders)
|
||||
5. Optional: dedicated `about.html` / `contact.html` if one-pager anchors are not enough for sales demos
|
||||
@@ -0,0 +1,62 @@
|
||||
# Select Electrical Services — Feature scope
|
||||
|
||||
Platform catalog: [`features.md`](../../../features.md). Prices from that catalog (draft).
|
||||
|
||||
**Stack:** Django · client portal (not Django admin as primary UI) · Stripe · Ollama (AI social)
|
||||
|
||||
Usage fees (Stripe, SMS, postage, email sends) billed separately.
|
||||
|
||||
---
|
||||
|
||||
## Recommended package
|
||||
|
||||
| Feature | Include? | Build | Monthly | Notes |
|
||||
|---------|----------|------:|--------:|-------|
|
||||
| Public site | **Yes (base)** | $300 | $10 | Replace Google Sites; home, about, services, contact |
|
||||
| Client portal + UTM | **Yes (base)** | $300 | $30 | Login, dashboard, leads, UTM analytics |
|
||||
| Email & SMS | **Recommended** | $500 | $10 | Lead follow-up, job reminders, estimate confirmations |
|
||||
| Direct mail | Optional | $500 | $5 | Neighborhood postcards (EV / panel / safety season) |
|
||||
| Blog | **Recommended** | $500 | $10 | Tips (fans, surge, EV, inspections) for local SEO |
|
||||
| Payments (Stripe) | **Recommended** | $500 | $20 | Invoices after jobs; **requires Email & SMS** |
|
||||
| Social consolidation | Optional | $500 | $20 | Google posts / FB scheduling |
|
||||
| AI social generator | Optional | $300 | $20 | Needs Social; Ollama drafts |
|
||||
|
||||
### Suggested quote (recommended only)
|
||||
|
||||
| | Build | Monthly |
|
||||
|--|------:|--------:|
|
||||
| Base (public + portal/UTM) | $600 | $40 |
|
||||
| Email & SMS | $500 | $10 |
|
||||
| Blog | $500 | $10 |
|
||||
| Payments | $500 | $20 |
|
||||
| **Recommended total** | **$2,100** | **$80** |
|
||||
|
||||
Interactive picker (mock): [`../mockup/pricing.html`](../mockup/pricing.html)
|
||||
|
||||
---
|
||||
|
||||
## Dependency rules
|
||||
|
||||
1. Payments → Email & SMS required
|
||||
2. AI social → Social consolidation required
|
||||
3. Base public + portal + UTM always included
|
||||
|
||||
---
|
||||
|
||||
## UX mock status
|
||||
|
||||
Gallery hub: [`../mockup/ux-gallery.html`](../mockup/ux-gallery.html)
|
||||
|
||||
| Feature | Screens | Status |
|
||||
|---------|---------|--------|
|
||||
| Public site | Home (about/contact sections), service details, 404, under construction | **Mocked** |
|
||||
| Portal + UTM | Login, dashboard, leads, detail, analytics | **Mocked** |
|
||||
| Email & SMS | Contacts, import, campaign, report, unsubscribe | **Mocked** |
|
||||
| Direct mail | Designer, campaign | **Mocked** |
|
||||
| Blog | Public index/post; portal list/editor | **Mocked** |
|
||||
| Payments | Invoice list/create/detail; public pay | **Mocked** |
|
||||
| Social | Accounts, composer, calendar | **Mocked** |
|
||||
| AI social | Generator → composer | **Mocked** |
|
||||
| Pricing picker | Interactive totals | **Mocked** (`pricing.html`) |
|
||||
|
||||
Service detail pages exceed the three-page public base (landing / about / contact) — keep as public marketing extras for this client.
|
||||
Reference in New Issue
Block a user