diff --git a/docs/FEATURES.md b/docs/FEATURES.md
index f19f7bb7..1200c57c 100644
--- a/docs/FEATURES.md
+++ b/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)
+
- **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)
+
- **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)
+
- **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)
+
- **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)
+
- **Plugin System**: Extend discovery methods, ingestion types, or notification channels through modular plugins.
- **Community Contributions**: Open-source architecture encourages collaboration and improvements.
diff --git a/docs/index.md b/docs/index.md
index 942dd3c0..59ad6b0e 100755
--- a/docs/index.md
+++ b/docs/index.md
@@ -11,7 +11,7 @@ Guides and resources to help you set up, configure, and troubleshoot NetAlertX.
@@ -19,15 +19,15 @@ Guides and resources to help you set up, configure, and troubleshoot NetAlertX.
@@ -35,7 +35,7 @@ Guides and resources to help you set up, configure, and troubleshoot NetAlertX.
diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css
index 9b92a212..96193faa 100644
--- a/docs/stylesheets/custom.css
+++ b/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-top: 0;
- margin-bottom: 12px;
+ margin: 0 0 12px;
+ color: var(--md-primary-fg-color);
}
.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-radius: 50px; /* Pill shape */
+ border: 1px solid var(--md-primary-fg-color);
+ 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;
-}
-
-/* Ensure link buttons don't inherit blue color */
-:is(a.promo-button, a.learn-more-btn):is(:link, :visited) {
- color: #000;
+ transition: opacity 0.2s ease-in-out;
}
.promo-button:hover,
.learn-more-btn:hover {
- background-color: #e9ecef;
- color: #000;
-}
\ No newline at end of file
+ opacity: 0.8;
+}