github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

Refactor dashboards.ejs: enhance layout and content for the "Why OneUptime" section, improving readability and visual appeal

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-01-07 13:16:49 +00:00
parent f351d90046
commit 2d4f2d0d95
1 changed files with 160 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
Home/Views/dashboards.ejs
View File

@@ -146,59 +146,69 @@
</div>
</div>
<!-- Feature Block 1: Drag & Drop Builder -->
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
<!-- Why OneUptime Section -->
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
<div class="lg:pr-8">
<div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/20 mb-6">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
<span class="text-sm font-medium text-indigo-700">Drag & Drop</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Build dashboards <span class="text-indigo-600">without code</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Our intuitive drag-and-drop builder lets you create professional dashboards in minutes. No coding required - just drag widgets, resize, and customize.
</p>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Intuitive interface</div>
<div class="text-gray-600">Click, drag, and drop to add and arrange widgets</div>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Flexible layouts</div>
<div class="text-gray-600">Resize and position widgets anywhere on the canvas</div>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Responsive design</div>
<div class="text-gray-600">Dashboards look great on any screen size</div>
</div>
</li>
</ul>
<!-- Section Header -->
<div class="mx-auto max-w-2xl text-center mb-20">
<div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/20 mb-6">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
Why OneUptime
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Build beautiful dashboards in minutes
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Create stunning, real-time dashboards with our intuitive drag-and-drop builder. Visualize all your data in one place with powerful widgets and integrations.
</p>
</div>
<!-- Feature Blocks -->
<div class="space-y-24 lg:space-y-32">
<!-- Feature 1: Drag & Drop Builder -->
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
<div class="relative">
<div class="flex items-center gap-4 mb-6">
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-7 w-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
</div>
<span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Drag & Drop</span>
</div>
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Build dashboards without code</h3>
<p class="text-lg text-gray-600 mb-6">
Our intuitive drag-and-drop builder lets you create professional dashboards in minutes. No coding required - just drag widgets, resize, and customize.
</p>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Intuitive click, drag, and drop interface
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Flexible layouts with resizable widgets
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Responsive design for any screen size
</li>
</ul>
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
Get started
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
</div>
<div class="relative lg:order-last">
<div class="relative">
<!-- Subtle background -->
@@ -480,53 +490,46 @@
</div>
</div>
<div class="lg:pl-8">
<div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/20 mb-6">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<span class="text-sm font-medium text-indigo-700">Visualizations</span>
<div class="flex items-center gap-4 mb-6">
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-7 w-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Visualizations</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
20+ widget types <span class="text-indigo-600">to choose from</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
20+ widget types to choose from
</h3>
<p class="text-lg text-gray-600 mb-6">
From simple counters to complex time series charts, we have the right visualization for every type of data. Customize colors, legends, and labels to match your brand.
</p>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Time series charts</div>
<div class="text-gray-600">Line, area, bar, and stacked charts for metrics</div>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Time series, area, bar, and stacked charts
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Tables and logs</div>
<div class="text-gray-600">View log streams and tabular data in real-time</div>
</div>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Tables, logs, and real-time data streams
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Gauges and stats</div>
<div class="text-gray-600">Single value widgets, gauges, and progress indicators</div>
</div>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Gauges, stat cards, and progress indicators
</li>
</ul>
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-6">
Get started
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
</div>
</div>
</div>
@@ -537,53 +540,46 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
<div class="lg:pr-8">
<div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/20 mb-6">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
</svg>
<span class="text-sm font-medium text-indigo-700">Data Sources</span>
<div class="flex items-center gap-4 mb-6">
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-7 w-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
</svg>
</div>
<span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Data Sources</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
All your data <span class="text-indigo-600">in one view</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
All your data in one view
</h3>
<p class="text-lg text-gray-600 mb-6">
Combine metrics, logs, traces, and status data on a single dashboard. See the complete picture of your system's health without switching between tools.
</p>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Metrics & APM data</div>
<div class="text-gray-600">Visualize OpenTelemetry metrics and performance data</div>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
OpenTelemetry metrics and APM data
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Logs & events</div>
<div class="text-gray-600">Stream logs and filter by service, severity, or content</div>
</div>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Log streams filtered by service or severity
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Status & incidents</div>
<div class="text-gray-600">Monitor status, incidents, and on-call schedules</div>
</div>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Status, incidents, and on-call schedules
</li>
</ul>
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-6">
Get started
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
</div>
<div class="relative lg:order-last">
<div class="relative">
@@ -831,53 +827,46 @@
</div>
</div>
<div class="lg:pl-8">
<div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/20 mb-6">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
<span class="text-sm font-medium text-indigo-700">Sharing</span>
<div class="flex items-center gap-4 mb-6">
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-7 w-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
</div>
<span class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Sharing</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Share insights <span class="text-indigo-600">with anyone</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
Share insights with anyone
</h3>
<p class="text-lg text-gray-600 mb-6">
Share dashboards with your team or create public links for stakeholders. Control who can view and edit with fine-grained permissions.
</p>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Shareable links</div>
<div class="text-gray-600">Generate public or private links to share dashboards</div>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Public or private shareable links
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">TV mode</div>
<div class="text-gray-600">Full-screen mode perfect for NOC displays and TV screens</div>
</div>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Full-screen TV mode for NOC displays
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Role-based access</div>
<div class="text-gray-600">Control who can view, edit, or manage dashboards</div>
</div>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Role-based access control
</li>
</ul>
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-6">
Get started
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
</div>
</div>
</div>