165 lines
9.5 KiB
PHP
165 lines
9.5 KiB
PHP
<!-- ====================================================
|
|
HOME PAGE
|
|
===================================================== -->
|
|
|
|
<!-- HERO -->
|
|
<section class="hero" aria-labelledby="hero-heading">
|
|
<div class="hero__mesh-bg" aria-hidden="true"></div>
|
|
<div class="container hero__content">
|
|
<p class="hero__eyebrow">Custom Networking Solutions</p>
|
|
<h1 id="hero-heading" class="hero__heading">
|
|
Networks Engineered<br>
|
|
<span class="gradient-text">Around Your Needs</span>
|
|
</h1>
|
|
<p class="hero__sub">
|
|
We design and deploy custom mesh networks, structured cabling, access control,
|
|
and IP camera systems — built for your environment and managed by our team.
|
|
</p>
|
|
<div class="hero__actions">
|
|
<a href="/contact" class="btn btn--primary">Request a Consultation</a>
|
|
<a href="/services" class="btn btn--ghost">Our Services</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero__scroll-hint" aria-hidden="true">
|
|
<span class="hero__scroll-dot"></span>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- STATS BAR -->
|
|
<section class="stats-bar" aria-label="Quick statistics">
|
|
<div class="container stats-bar__grid">
|
|
<div class="stat">
|
|
<span class="stat__value" data-count="25">0</span><span class="stat__unit">+</span>
|
|
<span class="stat__label">Custom Deployments</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat__value" data-count="99">0</span><span class="stat__unit">%</span>
|
|
<span class="stat__label">Uptime SLA</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat__value" data-count="24">0</span><span class="stat__unit">/7</span>
|
|
<span class="stat__label">Monitoring & Support</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat__value" data-count="4">0</span><span class="stat__unit">hr</span>
|
|
<span class="stat__label">Avg. Response Time</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- SERVICES PREVIEW -->
|
|
<section class="section services-preview" aria-labelledby="services-heading">
|
|
<div class="container">
|
|
<div class="section__header">
|
|
<span class="section__eyebrow">What We Do</span>
|
|
<h2 id="services-heading" class="section__heading">End-to-End Network Solutions</h2>
|
|
<p class="section__sub">Every project is custom-designed for the environment, the client, and the goal.</p>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
|
|
<div class="card card--hover">
|
|
<div class="card__icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><circle cx="12" cy="5" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="12" cy="19" r="1"/><circle cx="5" cy="15" r="1"/><circle cx="5" cy="9" r="1"/><path d="M12 7v3m5.2.8-2.5 1.5m2.5 4.7-2.5-1.5M12 17v-3m-5.2-.8 2.5-1.5m-2.5-4.7 2.5 1.5"/></svg>
|
|
</div>
|
|
<h3 class="card__title">Custom Mesh Networking</h3>
|
|
<p class="card__body">Outdoor and indoor wireless mesh deployments engineered for your site — from temporary event networks to permanent enterprise infrastructure.</p>
|
|
<a href="/services#mesh" class="card__link">Learn More →</a>
|
|
</div>
|
|
|
|
<div class="card card--hover">
|
|
<div class="card__icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h3 class="card__title">Managed Network Services</h3>
|
|
<p class="card__body">24/7 monitoring, proactive maintenance, and remote support. Your network runs itself while our team watches over it.</p>
|
|
<a href="/services#managed" class="card__link">Learn More →</a>
|
|
</div>
|
|
|
|
<div class="card card--hover">
|
|
<div class="card__icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
|
</div>
|
|
<h3 class="card__title">Access Control</h3>
|
|
<p class="card__body">Custom door access systems — key cards, fobs, mobile credentials, and remote management for facilities of any size.</p>
|
|
<a href="/services#access" class="card__link">Learn More →</a>
|
|
</div>
|
|
|
|
<div class="card card--hover">
|
|
<div class="card__icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
|
</div>
|
|
<h3 class="card__title">IP Camera & Surveillance</h3>
|
|
<p class="card__body">End-to-end IP camera design, installation, and NVR configuration with remote viewing and alerts.</p>
|
|
<a href="/services#cameras" class="card__link">Learn More →</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- WHY ALWISP -->
|
|
<section class="section section--alt why" aria-labelledby="why-heading">
|
|
<div class="container why__grid">
|
|
<div class="why__text">
|
|
<span class="section__eyebrow">Why ALWISP</span>
|
|
<h2 id="why-heading" class="section__heading">Built From Experience.<br>Driven by Mission.</h2>
|
|
<p>ALWISP was born in the field. After a tornado left an Alabama community without internet during disaster relief efforts, we built and deployed custom equipment under tents to restore connectivity for charity workers and residents. That solve-it-anywhere mentality drives every project we take on today.</p>
|
|
<ul class="why__list">
|
|
<li><span class="why__check" aria-hidden="true">✓</span> Rapid deployment — operational in hours when it matters</li>
|
|
<li><span class="why__check" aria-hidden="true">✓</span> Custom-engineered for every environment</li>
|
|
<li><span class="why__check" aria-hidden="true">✓</span> End-to-end management from design through support</li>
|
|
<li><span class="why__check" aria-hidden="true">✓</span> Local team with on-site capability</li>
|
|
<li><span class="why__check" aria-hidden="true">✓</span> No cookie-cutter solutions — built around your needs</li>
|
|
</ul>
|
|
<a href="/about" class="btn btn--primary" style="margin-top:1.5rem">Our Story</a>
|
|
</div>
|
|
<div class="why__visual" aria-hidden="true">
|
|
<div class="mesh-diagram">
|
|
<svg viewBox="0 0 400 340" xmlns="http://www.w3.org/2000/svg" class="mesh-svg">
|
|
<defs>
|
|
<linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#00bcd4" stop-opacity="0.6"/>
|
|
<stop offset="100%" stop-color="#1565c0" stop-opacity="0.3"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g stroke="url(#lineGrad)" stroke-width="1.5" fill="none">
|
|
<line x1="200" y1="60" x2="320" y2="140"/>
|
|
<line x1="200" y1="60" x2="80" y2="140"/>
|
|
<line x1="320" y1="140" x2="80" y2="140"/>
|
|
<line x1="320" y1="140" x2="280" y2="280"/>
|
|
<line x1="80" y1="140" x2="120" y2="280"/>
|
|
<line x1="280" y1="280" x2="120" y2="280"/>
|
|
<line x1="200" y1="60" x2="200" y2="200"/>
|
|
<line x1="200" y1="200" x2="320" y2="140"/>
|
|
<line x1="200" y1="200" x2="80" y2="140"/>
|
|
<line x1="200" y1="200" x2="280" y2="280"/>
|
|
<line x1="200" y1="200" x2="120" y2="280"/>
|
|
</g>
|
|
<g>
|
|
<circle cx="200" cy="60" r="12" fill="#f57c00" opacity="0.9" class="mesh-node mesh-node--tower"/>
|
|
<circle cx="320" cy="140" r="9" fill="#00bcd4" opacity="0.85" class="mesh-node"/>
|
|
<circle cx="80" cy="140" r="9" fill="#00bcd4" opacity="0.85" class="mesh-node"/>
|
|
<circle cx="200" cy="200" r="10" fill="#1565c0" opacity="0.9" class="mesh-node"/>
|
|
<circle cx="280" cy="280" r="8" fill="#00acc1" opacity="0.8" class="mesh-node"/>
|
|
<circle cx="120" cy="280" r="8" fill="#00acc1" opacity="0.8" class="mesh-node"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- CTA BAND -->
|
|
<section class="section cta-band" aria-labelledby="cta-heading">
|
|
<div class="container cta-band__content">
|
|
<h2 id="cta-heading" class="cta-band__heading">Have a project in mind?</h2>
|
|
<p class="cta-band__sub">Whether it's a mesh network for an event, a managed network for your facility, or a complete surveillance deployment — let's talk through it.</p>
|
|
<a href="/contact" class="btn btn--primary">Start a Conversation</a>
|
|
</div>
|
|
</section>
|