DOCS: promocards + features

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

docs/FEATURES.md

@@ -17,7 +17,7 @@ NetAlertX is a lightweight, flexible platform for monitoring networks, tracking
 
 ## LAN Visualization
 
-[LAN visualization](./img/FEATURES/LAN_Visualization.png)
+![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.
@@ -29,7 +29,7 @@ NetAlertX is a lightweight, flexible platform for monitoring networks, tracking
 
 ## Event-Driven Alerts
 
-[Event-Driven Alerts](./img/FEATURES/Event-Driven_Alerts.png)
+![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.
@@ -40,7 +40,7 @@ NetAlertX is a lightweight, flexible platform for monitoring networks, tracking
 
 ## Multi-Channel Notification
 
-[Multi-Channel Notification](./img/FEATURES/Multi-Channel_Notifications.png)
+![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.
@@ -50,7 +50,7 @@ NetAlertX is a lightweight, flexible platform for monitoring networks, tracking
 
 ## Security & Compliance-Friendly Logging
 
-[Events](./img/FEATURES/Events.png)
+![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.
@@ -60,7 +60,7 @@ NetAlertX is a lightweight, flexible platform for monitoring networks, tracking
 
 ## Extensible & Open Source
 
-[Plugins](./img/plugins_json_settings.png)
+![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.

docs/index.md

@@ -11,7 +11,7 @@ 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">
+  <a href="./FEATURES" class="promo-button">
     Explore Features
   </a>
 </div>
@@ -19,15 +19,15 @@ Guides and resources to help you set up, configure, and troubleshoot NetAlertX.
 <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">
+  <a href="./INSTALLATION" class="promo-button">
     View Installation Guides
   </a>
 </div>
 
 <div class="promo-card">
-  <h3>MSP / Security Lite</h3>
+  <h3>Notifications</h3>
-  <p>Learn how NetAlertX provides device presence, alerting, and compliance-friendly monitoring for MSPs</p>
+  <p>Learn how NetAlertX provides device presence, alerting, and compliance-friendly monitoring</p>
-  <a href="./NOTIFICATIONS.md" class="promo-button">
+  <a href="./NOTIFICATIONS" class="promo-button">
     Explore Notifications
   </a>
 </div>
@@ -35,7 +35,7 @@ Guides and resources to help you set up, configure, and troubleshoot NetAlertX.
 <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">
+  <a href="./DEV_ENV_SETUP" class="promo-button">
     Contribute on GitHub
   </a>
 </div>

docs/stylesheets/custom.css

@@ -14,30 +14,34 @@
  * limitations under the License.
  */
 
-/* --- PROMO CARDS  --- */
+/* --- PROMO CARDS --- */
 .promo-card-wrapper {
   display: flex;
+  flex-wrap: wrap;
   gap: 24px;
   max-width: 1200px;
   margin: 60px auto;
-  flex-wrap: wrap;
 }
 
 .promo-card {
-  flex: 1;
+  flex: 0 0 calc(50% - 12px);
   min-width: 300px;
-  background-color: #f8f9fa;
   border-radius: 24px;
   padding: 16px 24px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  background-color: var(--md-primary-bg-color--light);
+  transition: transform 0.2s ease;
+}
+
+.promo-card:hover {
+  transform: translateY(-2px);
 }
 
 .promo-card h3 {
-  color: #202124;
+  margin: 0 0 12px;
-  margin-top: 0;
+  color: var(--md-primary-fg-color);
-  margin-bottom: 12px;
 }
 
 .promo-card p {
@@ -45,27 +49,22 @@
   flex-grow: 1;
 }
 
+/* --- PROMO BUTTONS --- */
 .promo-button,
 .learn-more-btn {
   display: inline-block;
   padding: 0.5rem 1.2rem;
-  border: 1px solid #000;
+  border: 1px solid var(--md-primary-fg-color);
-  border-radius: 50px; /* Pill shape */
+  border-radius: 50px;
   text-decoration: none;
-  color: #000;
+  color: var(--md-primary-fg-color);
   font-weight: 500;
   font-size: 0.8rem;
-  transition: background-color 0.2s ease-in-out;
   background-color: transparent;
-}
+  transition: opacity 0.2s ease-in-out;
-
-/* 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;
+  opacity: 0.8;
-  color: #000;
+}
-}