alwisp/www/pages/home.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 a local 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>