DOCS: promocards + features

Signed-off-by: jokob-sk <jokob.sk@gmail.com>

docs/FEATURES.md

@@ -0,0 +1,71 @@
+# NetAlertX Features Overview
+
+NetAlertX is a lightweight, flexible platform for monitoring networks, tracking devices, and delivering actionable alerts. It combines discovery, change detection, and multi-channel notification into a single, streamlined solution.
+
+---
+
+## Network Discovery & Device Tracking
+
+[Network Discovery & Device Tracking](./img/FEATURES/Network_Discovery_Device_Tracking.png)
+
+- **Automatic Device Detection**: Continuously scans your local network to detect all connected devices via ARP, DHCP, SNMP, and compatible controllers.
+- **Presence Monitoring**: Track when devices appear, disappear, or reconnect on the network.
+- **IP & MAC Tracking**: Log device IP changes, ensuring accurate identification over time.
+- **Import from Existing Systems**: Integrates with DHCP servers, Pi-hole, UniFi controllers, and other supported sources to maintain an accurate inventory.
+
+---
+
+## LAN Visualization
+
+[LAN visualization](./img/FEATURES/LAN_Visualization.png)
+
+- **Lightweight Network Map**: View a real-time representation of your local network with all connected devices.
+- **Device Status Indicators**: Quickly identify active, missing, or new devices at a glance.
+- **Interactive Overview**: Hover over devices to see IP, MAC, and last seen timestamps.
+- **Change Highlighting**: Newly detected, disconnected, or reconnected devices are visually flagged to reduce oversight.
+- **Simple & Efficient**: Designed for quick insights without heavy resource usage or complex topology maps.
+
+---
+
+## Event-Driven Alerts
+
+[Event-Driven Alerts](./img/FEATURES/Event-Driven_Alerts.png)
+
+- **Real-Time Notifications**: Receive immediate alerts for new devices, disconnected devices, or unexpected changes.
+- **Customizable Triggers**: Define rules based on device type, IP ranges, presence, or other network parameters.
+- **Alert Deduplication & Suppression**: Avoid unnecessary noise with smart alert handling.
+- **Historical Logs**: Maintain a complete timeline of network events for review and reporting.
+
+---
+
+## Multi-Channel Notification
+
+[Multi-Channel Notification](./img/FEATURES/Multi-Channel_Notifications.png)
+
+- **Flexible Delivery Options**: Send alerts via email, webhooks, MQTT, and more.
+- **Integration with Automation**: Connect to ticketing systems, workflow engines, and custom scripts for automated responses.
+- **Apprise Support**: Utilize over 80 pre-built notification services without additional configuration.
+
+---
+
+## Security & Compliance-Friendly Logging
+
+[Events](./img/FEATURES/Events.png)
+
+- **Device Accountability**: Maintain an auditable record of every device that appears or disappears from the network.
+- **Change Tracking**: Document network events with timestamps for review and compliance reporting.
+- **Rogue Device Alerts**: Detect and respond to unexpected or unauthorized network connections.
+
+---
+
+## Extensible & Open Source
+
+[Plugins](./img/plugins_json_settings.png)
+
+- **Plugin System**: Extend discovery methods, ingestion types, or notification channels through modular plugins.
+- **Community Contributions**: Open-source architecture encourages collaboration and improvements.
+- **Full Transparency**: All logs, scans, and configurations are visible for analysis.
+
+---
+
+NetAlertX provides a centralized, proactive approach to network awareness, combining device visibility, event-driven alerting, and flexible notifications into a single, deployable solution. Its design prioritizes efficiency, clarity, and actionable insights, making it ideal for monitoring dynamic environments.

docs/index.md

@@ -6,7 +6,39 @@ hide:
 
 # NetAlertX Documentation
 
-Find guides and resources to help you set up, configure, and troubleshoot your NetAlertX instance.
+Guides and resources to help you set up, configure, and troubleshoot NetAlertX.
+
+<div class="promo-card">
+  <h3>Learn</h3>
+  <p>Understand NetAlertX core features, discovery, and alerting concepts</p>
+  <a href="./FEATURES.md" class="promo-button">
+    Explore Features
+  </a>
+</div>
+
+<div class="promo-card">
+  <h3>Install</h3>
+  <p>Step-by-step installation guides for Docker, Home Assistant, Unraid, and bare-metal setups</p>
+  <a href="./INSTALLATION.md" class="promo-button">
+    View Installation Guides
+  </a>
+</div>
+
+<div class="promo-card">
+  <h3>MSP / Security Lite</h3>
+  <p>Learn how NetAlertX provides device presence, alerting, and compliance-friendly monitoring for MSPs</p>
+  <a href="./NOTIFICATIONS.md" class="promo-button">
+    Explore Notifications
+  </a>
+</div>
+
+<div class="promo-card">
+  <h3>Contribute</h3>
+  <p>Source code, development environment setup, and contribution guidelines</p>
+  <a href="./DEV_ENV_SETUP.md" class="promo-button">
+    Contribute on GitHub
+  </a>
+</div>
 
 ![Preview](./img/devices_split.png)
 

docs/stylesheets/custom.css

@@ -0,0 +1,71 @@
+/**
+ * Copyright 2026 UCP Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* --- PROMO CARDS  --- */
+.promo-card-wrapper {
+  display: flex;
+  gap: 24px;
+  max-width: 1200px;
+  margin: 60px auto;
+  flex-wrap: wrap;
+}
+
+.promo-card {
+  flex: 1;
+  min-width: 300px;
+  background-color: #f8f9fa;
+  border-radius: 24px;
+  padding: 16px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.promo-card h3 {
+  color: #202124;
+  margin-top: 0;
+  margin-bottom: 12px;
+}
+
+.promo-card p {
+  margin-bottom: 16px;
+  flex-grow: 1;
+}
+
+.promo-button,
+.learn-more-btn {
+  display: inline-block;
+  padding: 0.5rem 1.2rem;
+  border: 1px solid #000;
+  border-radius: 50px; /* Pill shape */
+  text-decoration: none;
+  color: #000;
+  font-weight: 500;
+  font-size: 0.8rem;
+  transition: background-color 0.2s ease-in-out;
+  background-color: transparent;
+}
+
+/* Ensure link buttons don't inherit blue color */
+:is(a.promo-button, a.learn-more-btn):is(:link, :visited) {
+  color: #000;
+}
+
+.promo-button:hover,
+.learn-more-btn:hover {
+  background-color: #e9ecef;
+  color: #000;
+}