6b44fe8b4c
CSS file changes were not rendering - likely due to Apache mod_expires caching style.css for 1 week in the browser. Two fixes: - Cache-bust the stylesheet link (?v=4) so the browser is forced to fetch a fresh copy of the CSS file - Move the dark card and heading size fix to inline styles on the hero div directly in home.php, so the change lives in the PHP output and is not subject to any CSS caching layer https://claude.ai/code/session_015wpwmheufcxkBuXivrSHhd
165 lines
9.7 KiB
PHP
165 lines
9.7 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" style="background:rgba(8,14,38,0.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:3rem 2.5rem;margin-block:3rem;max-width:780px;">
|
|
<p class="hero__eyebrow">Custom Networking Solutions</p>
|
|
<h1 id="hero-heading" class="hero__heading" style="font-size:clamp(2.2rem,4.5vw,3.25rem);">
|
|
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="50">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>
|