towerops/lib/towerops_web/controllers/page_html/home.html.heex

<MarketingLayouts.marketing flash={@flash}>
  <!-- Hero Section -->
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 pb-16 text-center lg:pt-32">
    <div class="inline-flex items-center rounded-full px-4 py-1.5 mb-8 bg-blue-50 text-blue-700 text-sm font-medium ring-1 ring-blue-600/20">
      <span class="mr-2">📡</span> Built specifically for WISP &amp; ISP operators
    </div>
    <h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
      See the
      <span class="relative whitespace-nowrap text-blue-600">
        <svg
          aria-hidden="true"
          viewBox="0 0 418 42"
          class="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
          preserveAspectRatio="none"
        >
          <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
        </svg>
        <span class="relative">business impact</span>
      </span>
      of every network event.
    </h1>
    <p class="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
      TowerOps connects your network monitoring to subscriber impact and revenue.
      When a tower goes down, instantly see which customers are affected, how much MRR is at risk,
      and what to fix first.
    </p>
    <p class="mx-auto mt-4 max-w-2xl text-xl font-semibold tracking-tight text-blue-600">
      Free up to 10 devices. No credit card required.
    </p>
    <div class="mt-10 flex justify-center gap-x-6">
      <.link
        navigate={~p"/users/register"}
        class="group inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600"
      >
        Start monitoring free →
      </.link>
      <a
        href="#features"
        class="group inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold ring-1 ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 focus-visible:outline-blue-600"
      >
        See how it works
      </a>
    </div>
  </div>
  
<!-- Pain Point Section -->
  <section class="bg-slate-900 py-20 sm:py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="mx-auto max-w-2xl text-center">
        <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl">
          Your tools don't talk to each other.
        </h2>
        <p class="mt-4 text-lg tracking-tight text-slate-400">
          You have LibreNMS for monitoring, Preseem for QoE, Sonar or Gaiia for billing,
          and a spreadsheet for tower sites. When something breaks, you're alt-tabbing between
          five dashboards trying to figure out who's affected.
        </p>
      </div>
      <div class="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-lg bg-slate-800 p-6 text-center">
          <div class="text-3xl font-bold text-red-400">45 min</div>
          <div class="mt-2 text-sm text-slate-400">Average time to assess outage impact</div>
        </div>
        <div class="rounded-lg bg-slate-800 p-6 text-center">
          <div class="text-3xl font-bold text-red-400">5+</div>
          <div class="mt-2 text-sm text-slate-400">Dashboards to check during incidents</div>
        </div>
        <div class="rounded-lg bg-slate-800 p-6 text-center">
          <div class="text-3xl font-bold text-red-400">???</div>
          <div class="mt-2 text-sm text-slate-400">Subscribers affected right now</div>
        </div>
        <div class="rounded-lg bg-slate-800 p-6 text-center">
          <div class="text-3xl font-bold text-red-400">$???</div>
          <div class="mt-2 text-sm text-slate-400">Revenue at risk from this outage</div>
        </div>
      </div>
      <div class="mt-12 text-center">
        <p class="text-lg font-medium text-blue-400">
          TowerOps gives you one place to see it all.
        </p>
      </div>
    </div>
  </section>
  
<!-- Primary Features Section -->
  <section
    id="features"
    aria-label="Features for WISP operators"
    class="relative overflow-hidden bg-blue-600 pt-20 pb-28 sm:py-32"
  >
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
      <div class="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
        <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
          Operational intelligence built for WISPs.
        </h2>
        <p class="mt-6 text-lg tracking-tight text-blue-100">
          Not another generic monitoring tool. TowerOps understands tower sites, subscribers, and revenue.
        </p>
      </div>
      <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
        <!-- Feature 1 -->
        <div class="relative rounded-2xl bg-white/10 p-8 ring-1 ring-white/10">
          <div class="flex items-center gap-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20">
              <.icon name="hero-currency-dollar" class="h-6 w-6 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-white">Impact Dashboard</h3>
          </div>
          <p class="mt-4 text-sm text-blue-100">
            See MRR at risk, affected subscriber counts, and active incidents at a glance.
            Know the business impact of every network event before your customers call.
          </p>
        </div>
        <!-- Feature 2 -->
        <div class="relative rounded-2xl bg-white/10 p-8 ring-1 ring-white/10">
          <div class="flex items-center gap-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20">
              <.icon name="hero-magnifying-glass" class="h-6 w-6 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-white">Subscriber Trace</h3>
          </div>
          <p class="mt-4 text-sm text-blue-100">
            Help desk calls in? Search by name or account and instantly see their device status,
            QoE scores, alerts, and whether nearby subscribers are also affected.
          </p>
        </div>
        <!-- Feature 3 -->
        <div class="relative rounded-2xl bg-white/10 p-8 ring-1 ring-white/10">
          <div class="flex items-center gap-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20">
              <.icon name="hero-bell-alert" class="h-6 w-6 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-white">Smart Alert Triage</h3>
          </div>
          <p class="mt-4 text-sm text-blue-100">
            Alerts grouped by tower site and ranked by severity and subscriber impact.
            Filter by critical/unresolved/all. Resolve directly from the alert view.
          </p>
        </div>
        <!-- Feature 4 -->
        <div class="relative rounded-2xl bg-white/10 p-8 ring-1 ring-white/10">
          <div class="flex items-center gap-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20">
              <.icon name="hero-clock" class="h-6 w-6 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-white">Config Change Tracking</h3>
          </div>
          <p class="mt-4 text-sm text-blue-100">
            Correlate config changes with performance shifts. See a timeline of what changed,
            when, and whether it caused problems — before you start guessing.
          </p>
        </div>
        <!-- Feature 5 -->
        <div class="relative rounded-2xl bg-white/10 p-8 ring-1 ring-white/10">
          <div class="flex items-center gap-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20">
              <.icon name="hero-signal" class="h-6 w-6 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-white">Tower Site Intelligence</h3>
          </div>
          <p class="mt-4 text-sm text-blue-100">
            Enriched site pages with subscriber counts, device health grids, active alerts,
            latency charts, and recent config changes — all on one screen.
          </p>
        </div>
        <!-- Feature 6 -->
        <div class="relative rounded-2xl bg-white/10 p-8 ring-1 ring-white/10">
          <div class="flex items-center gap-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white/20">
              <.icon name="hero-puzzle-piece" class="h-6 w-6 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-white">Billing &amp; QoE Integrations</h3>
          </div>
          <p class="mt-4 text-sm text-blue-100">
            Connect Gaiia or Sonar for subscriber data and Preseem for QoE metrics.
            TowerOps pulls it all together so you see the full picture without switching tabs.
          </p>
        </div>
      </div>
    </div>
  </section>
  
<!-- How It Works Section -->
  <section
    id="how-it-works"
    aria-label="How TowerOps works"
    class="relative bg-slate-50 py-20 sm:py-32"
  >
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="mx-auto max-w-2xl md:text-center">
        <h2 class="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
          Up and running in 10 minutes
        </h2>
        <p class="mt-4 text-lg tracking-tight text-slate-700">
          No agents to install on every device. One Docker container per network, and you're monitoring everything.
        </p>
      </div>
      <div class="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3 lg:gap-12">
        <!-- Step 1 -->
        <div class="relative">
          <div class="flex items-center gap-x-4">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 text-white font-semibold text-lg">
              1
            </div>
            <h3 class="text-xl font-semibold text-slate-900">Deploy a lightweight agent</h3>
          </div>
          <p class="mt-4 text-base text-slate-600">
            Run a single Docker container on your network. It discovers SNMP devices automatically
            and starts collecting metrics. No firewall changes, no VPN, no open ports.
          </p>
          <div class="mt-6 rounded-lg bg-slate-900 p-4 font-mono text-sm text-green-400">
            $ docker run -d towerops/agent
          </div>
        </div>
        <!-- Step 2 -->
        <div class="relative">
          <div class="flex items-center gap-x-4">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 text-white font-semibold text-lg">
              2
            </div>
            <h3 class="text-xl font-semibold text-slate-900">Connect your tools</h3>
          </div>
          <p class="mt-4 text-base text-slate-600">
            Add your Gaiia/Sonar API key for subscriber data and Preseem for QoE metrics.
            TowerOps automatically maps subscribers to devices and tower sites.
          </p>
          <div class="mt-6 flex flex-wrap gap-2">
            <span class="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-600/20">
              Gaiia
            </span>
            <span class="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-600/20">
              Sonar
            </span>
            <span class="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-600/20">
              Preseem
            </span>
            <span class="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500 ring-1 ring-slate-300">
              UISP — coming soon
            </span>
            <span class="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500 ring-1 ring-slate-300">
              Splynx — coming soon
            </span>
          </div>
        </div>
        <!-- Step 3 -->
        <div class="relative">
          <div class="flex items-center gap-x-4">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 text-white font-semibold text-lg">
              3
            </div>
            <h3 class="text-xl font-semibold text-slate-900">See the full picture</h3>
          </div>
          <p class="mt-4 text-base text-slate-600">
            Your dashboard lights up with subscriber impact, revenue at risk, device health,
            and site status. Help desk gets subscriber trace. NOC gets alert triage. Everyone wins.
          </p>
          <div class="mt-6 rounded-lg border-2 border-blue-200 bg-white p-4">
            <div class="flex items-center gap-2">
              <.icon name="hero-chart-bar" class="h-5 w-5 text-blue-600" />
              <span class="text-sm font-medium text-slate-900">Impact Dashboard</span>
            </div>
            <div class="mt-2 grid grid-cols-2 gap-2 text-xs text-slate-600">
              <div>📊 MRR at Risk</div>
              <div>👥 Affected Subs</div>
              <div>🔴 Active Incidents</div>
              <div>📍 Site Health</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
<!-- Social Proof / Use Cases -->
  <section class="py-20 sm:py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="mx-auto max-w-2xl md:text-center">
        <h2 class="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
          Built by a WISP operator, for WISP operators.
        </h2>
        <p class="mt-4 text-lg tracking-tight text-slate-700">
          We run a network too. TowerOps exists because we got tired of the same problems you have.
        </p>
      </div>
      <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
        <div class="rounded-xl bg-slate-50 p-8">
          <div class="text-2xl mb-4">🏗️</div>
          <h3 class="text-lg font-semibold text-slate-900">For the NOC</h3>
          <p class="mt-3 text-sm text-slate-600">
            Alert triage grouped by site with severity colors and subscriber impact.
            Stop wasting time on low-impact alerts when a whole tower is down.
          </p>
        </div>
        <div class="rounded-xl bg-slate-50 p-8">
          <div class="text-2xl mb-4">📞</div>
          <h3 class="text-lg font-semibold text-slate-900">For the Help Desk</h3>
          <p class="mt-3 text-sm text-slate-600">
            Subscriber trace: search by name, see their device status, QoE, and whether
            the whole tower is having issues. Answer "is it just me?" in seconds.
          </p>
        </div>
        <div class="rounded-xl bg-slate-50 p-8">
          <div class="text-2xl mb-4">📈</div>
          <h3 class="text-lg font-semibold text-slate-900">For the Owner</h3>
          <p class="mt-3 text-sm text-slate-600">
            MRR at risk, revenue impact per incident, and site health scores.
            Make investment decisions based on which towers affect the most revenue.
          </p>
        </div>
      </div>
    </div>
  </section>
  
<!-- Pricing Section -->
  <section id="pricing" class="bg-slate-50 py-20 sm:py-32">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="mx-auto max-w-2xl text-center">
        <h2 class="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
          Simple per-device pricing
        </h2>
        <p class="mt-4 text-lg tracking-tight text-slate-700">
          Start free. Pay only when you're ready to scale.
        </p>
      </div>
      <div class="mt-16 mx-auto max-w-xl">
        <div class="rounded-2xl bg-white p-8 shadow-lg ring-2 ring-blue-600 text-center">
          <div class="mt-2">
            <span class="text-5xl font-bold text-slate-900">$3</span>
            <span class="text-lg text-slate-500">/device/month</span>
          </div>
          <p class="mt-3 text-base text-slate-600">
            First <strong class="text-slate-900">10 devices free</strong>, forever. All features included.
          </p>

          <div class="mt-10 grid grid-cols-2 gap-x-8 gap-y-3 text-sm text-slate-600 text-left max-w-md mx-auto">
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              Unlimited devices
            </div>
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              Unlimited agents &amp; networks
            </div>
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              SNMP monitoring &amp; alerts
            </div>
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              Impact dashboard
            </div>
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              Gaiia / Sonar integration
            </div>
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              Preseem QoE integration
            </div>
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              Subscriber trace &amp; alert triage
            </div>
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              Config change tracking
            </div>
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              Team access &amp; email alerts
            </div>
            <div class="flex items-center gap-2">
              <.icon name="hero-check" class="h-5 w-5 text-blue-600 flex-shrink-0" />
              API access
            </div>
          </div>

          <.link
            navigate={~p"/users/register"}
            class="mt-10 inline-block rounded-full px-8 py-3 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500"
          >
            Get started free
          </.link>
        </div>
      </div>
      <p class="mt-8 text-center text-sm text-slate-500">
        No credit card required. Need a custom plan for 500+ devices? <a
          href="mailto:hi@towerops.net"
          class="text-blue-600 hover:text-blue-500 underline"
        >Talk to us</a>.
      </p>
    </div>
  </section>
  
<!-- Tech Details -->
  <section class="py-20 sm:py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="mx-auto max-w-2xl md:text-center">
        <h2 class="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
          Built for network engineers
        </h2>
        <p class="mt-4 text-lg tracking-tight text-slate-700">
          We know you care about the details. Here's what's under the hood.
        </p>
      </div>
      <div class="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-lg border border-slate-200 p-6">
          <h3 class="font-semibold text-slate-900">786 Device Profiles</h3>
          <p class="mt-2 text-sm text-slate-600">
            MikroTik, Ubiquiti, Cambium, Cisco, Juniper, and hundreds more. Auto-detected via SNMP sysObjectID.
          </p>
        </div>
        <div class="rounded-lg border border-slate-200 p-6">
          <h3 class="font-semibold text-slate-900">Secure Agent Architecture</h3>
          <p class="mt-2 text-sm text-slate-600">
            Agent initiates outbound-only connections. Your devices never touch the internet. Zero attack surface.
          </p>
        </div>
        <div class="rounded-lg border border-slate-200 p-6">
          <h3 class="font-semibold text-slate-900">SNMP v1/v2c/v3</h3>
          <p class="mt-2 text-sm text-slate-600">
            Full SNMP support including SNMPv3 auth/priv. Custom OID polling for vendor-specific metrics.
          </p>
        </div>
        <div class="rounded-lg border border-slate-200 p-6">
          <h3 class="font-semibold text-slate-900">Real-time LiveView UI</h3>
          <p class="mt-2 text-sm text-slate-600">
            No page refreshes. WebSocket-powered dashboard updates in real time as metrics flow in.
          </p>
        </div>
      </div>
    </div>
  </section>
  
<!-- Final CTA -->
  <section class="relative overflow-hidden bg-blue-600 py-32">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
      <div class="mx-auto max-w-lg text-center">
        <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl">
          Stop guessing. Start seeing impact.
        </h2>
        <p class="mt-4 text-lg tracking-tight text-blue-100">
          Free for up to 10 devices. Deploy an agent, connect your billing system,
          and see the difference in your first outage.
        </p>
        <.link
          navigate={~p"/users/register"}
          class="group inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 mt-10 bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white"
        >
          Start monitoring free →
        </.link>
      </div>
    </div>
  </section>
</MarketingLayouts.marketing>