216 lines
10 KiB
Text
216 lines
10 KiB
Text
<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">
|
|
<h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
|
|
Network monitoring
|
|
<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">made simple</span>
|
|
</span>
|
|
for network operators.
|
|
</h1>
|
|
<p class="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
|
|
Monitor network devices via SNMP, track performance metrics in real-time, and respond to alerts instantly.
|
|
Built specifically for telecom tower infrastructure.
|
|
</p>
|
|
<p class="mx-auto mt-4 max-w-2xl text-xl font-semibold tracking-tight text-blue-600">
|
|
Monitor 10 devices for free. 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-2 px-4 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"
|
|
>
|
|
Get started free
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
<!-- Primary Features Section -->
|
|
<section
|
|
id="features"
|
|
aria-label="Features for monitoring your infrastructure"
|
|
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">
|
|
Everything you need to monitor your network.
|
|
</h2>
|
|
<p class="mt-6 text-lg tracking-tight text-blue-100">
|
|
Comprehensive SNMP monitoring with real-time alerts and performance tracking.
|
|
</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-signal" class="h-6 w-6 text-white" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-white">SNMP Monitoring</h3>
|
|
</div>
|
|
<p class="mt-4 text-sm text-blue-100">
|
|
Automatic device discovery via SNMP. Track interface statistics, sensor readings,
|
|
and device health with support for MikroTik, Cisco, and generic SNMP devices.
|
|
</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-bell-alert" class="h-6 w-6 text-white" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-white">Real-time Alerts</h3>
|
|
</div>
|
|
<p class="mt-4 text-sm text-blue-100">
|
|
Get instant notifications when devices go down or thresholds are exceeded.
|
|
Configurable alert rules with email notifications to keep you informed.
|
|
</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-chart-bar" class="h-6 w-6 text-white" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-white">Performance Charts</h3>
|
|
</div>
|
|
<p class="mt-4 text-sm text-blue-100">
|
|
Visualize historical data with interactive time-series charts. Track bandwidth,
|
|
temperature sensors, and custom metrics over configurable time ranges.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Secondary Features Section -->
|
|
<section
|
|
id="secondary-features"
|
|
aria-label="Features for managing your infrastructure"
|
|
class="pt-20 pb-14 sm:pt-32 sm:pb-20 lg:pb-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">
|
|
Built for multi-site operations.
|
|
</h2>
|
|
<p class="mt-4 text-lg tracking-tight text-slate-700">
|
|
Organize devices by site, collaborate with your team, and maintain clear visibility
|
|
across your entire network infrastructure.
|
|
</p>
|
|
</div>
|
|
<div class="mt-20 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
<!-- Feature 1 -->
|
|
<div>
|
|
<div class="w-9 rounded-lg bg-blue-600">
|
|
<svg aria-hidden="true" class="h-9 w-9" fill="none">
|
|
<path
|
|
d="M8 17a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
|
|
fill="#fff"
|
|
opacity=".5"
|
|
/>
|
|
<path
|
|
d="M8 24a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
|
|
fill="#fff"
|
|
opacity=".3"
|
|
/>
|
|
<path
|
|
d="M8 10a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
|
|
fill="#fff"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-sm font-medium text-blue-600">Site Management</h3>
|
|
<p class="mt-2 font-display text-xl text-slate-900">
|
|
Organize devices by physical location
|
|
</p>
|
|
<p class="mt-4 text-sm text-slate-600">
|
|
Group devices by tower site or facility. View site-wide status and health metrics
|
|
at a glance, then drill down into individual device details.
|
|
</p>
|
|
</div>
|
|
<!-- Feature 2 -->
|
|
<div>
|
|
<div class="w-9 rounded-lg bg-blue-600">
|
|
<svg aria-hidden="true" class="h-9 w-9" fill="none">
|
|
<path
|
|
opacity=".5"
|
|
d="M25.778 25.778c.39.39 1.027.393 1.384-.028A11.952 11.952 0 0 0 30 18c0-6.627-5.373-12-12-12S6 11.373 6 18c0 2.954 1.067 5.659 2.838 7.75.357.421.993.419 1.384.028.39-.39.386-1.02.036-1.448A9.959 9.959 0 0 1 8 18c0-5.523 4.477-10 10-10s10 4.477 10 10a9.959 9.959 0 0 1-2.258 6.33c-.35.427-.354 1.058.036 1.448Z"
|
|
fill="#fff"
|
|
/>
|
|
<path
|
|
d="M12 28.395V28a6 6 0 0 1 12 0v.395A11.945 11.945 0 0 1 18 30c-2.186 0-4.235-.584-6-1.605ZM21 16.5c0-1.933-.5-3.5-3-3.5s-3 1.567-3 3.5 1.343 3.5 3 3.5 3-1.567 3-3.5Z"
|
|
fill="#fff"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-sm font-medium text-blue-600">Team Collaboration</h3>
|
|
<p class="mt-2 font-display text-xl text-slate-900">Share access with your team</p>
|
|
<p class="mt-4 text-sm text-slate-600">
|
|
Create organizations and invite team members. Control access with owner, admin, and member roles.
|
|
Each team member sees only what they need.
|
|
</p>
|
|
</div>
|
|
<!-- Feature 3 -->
|
|
<div>
|
|
<div class="w-9 rounded-lg bg-blue-600">
|
|
<svg aria-hidden="true" class="h-9 w-9" fill="none">
|
|
<defs>
|
|
<linearGradient
|
|
id="reporting-gradient"
|
|
x1="11.5"
|
|
y1="18"
|
|
x2="36"
|
|
y2="15.5"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop offset=".194" stop-color="#fff" />
|
|
<stop offset="1" stop-color="#6692F1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path
|
|
d="m30 15-4 5-4-11-4 18-4-11-4 7-4-5"
|
|
stroke="url(#reporting-gradient)"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-sm font-medium text-blue-600">Historical Data</h3>
|
|
<p class="mt-2 font-display text-xl text-slate-900">Track trends over time</p>
|
|
<p class="mt-4 text-sm text-slate-600">
|
|
All sensor readings and interface statistics are stored for historical analysis.
|
|
View data from the past hour, day, week, or month with interactive charts.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Call to Action Section -->
|
|
<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">
|
|
Start monitoring today
|
|
</h2>
|
|
<p class="mt-4 text-lg tracking-tight text-white">
|
|
Monitor up to 10 devices for free. No credit card required.
|
|
</p>
|
|
<.link
|
|
navigate={~p"/users/register"}
|
|
class="group inline-flex items-center justify-center rounded-full py-2 px-4 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"
|
|
>
|
|
Get started free
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</MarketingLayouts.marketing>
|