DOCS: MCP features, css

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

docs/index.md

@@ -4,10 +4,21 @@ hide:
   - toc
 ---
 
-# NetAlertX Documentation
-
-Guides and resources to help you set up, configure, and troubleshoot NetAlertX.
 
+<div class="hero-wrapper">
+  <div class="hero-content">
+    <h1>NetAlertX</h1>
+    <p class="hero-subheading">
+      Centralized network visibility and continuous asset discovery.
+    </p>
+    <p class="hero-description">
+     NetAlertx delivers a scalable and secure solution for comprehensive network monitoring, supporting security awareness and operational efficiency.
+    </p>
+  </div>
+  <div class="hero-image">
+    <img src="./img/devices_split.png" alt="Hero image for NetAlertx" class="hero-logo-crisp">
+  </div>
+</div>
 
 <div class="promo-card-wrapper">
   <div class="promo-card">
@@ -43,7 +54,7 @@ Guides and resources to help you set up, configure, and troubleshoot NetAlertX.
   </div>
 </div>
 
-![Preview](./img/devices_split.png)
+
 
 ## In-App Help
 
@@ -52,38 +63,6 @@ NetAlertX provides contextual help within the application:
 - **Hover over settings, fields, or labels** to see additional tooltips and guidance.
 - **Click ? (question-mark) icons** next to various elements to view detailed information.
 
----
-
-## Installation Guides
-
-The app can be installed different ways, with the best support of the docker-based deployments. This includes the Home Assistant and Unraid installation approaches. See details below.
-
-### Docker (Fully Supported)
-
-NetAlertX is fully supported in Docker environments, allowing for easy setup and configuration. Follow the official guide to get started:
-
-- [Docker Installation Guide](./DOCKER_INSTALLATION.md)
-
-This guide will take you through the process of setting up NetAlertX using Docker Compose or standalone Docker commands.
-
-### Home Assistant (Fully Supported)
-
-You can install NetAlertX also as a Home Assistant addon [![Home Assistant](https://img.shields.io/badge/Repo-blue?logo=home-assistant&style=for-the-badge&color=0aa8d2&logoColor=fff&label=Add)](https://my.home-assistant.io/redirect/supervisor_add_addon_repository/?repository_url=https%3A%2F%2Fgithub.com%2Falexbelgium%2Fhassio-addons) via the [alexbelgium/hassio-addons](https://github.com/alexbelgium/hassio-addons/) repository. This is only possible if you run a supervised instance of Home Assistant. If not, you can still run NetAlertX in a separate Docker container and follow this guide to configure MQTT.
-
-- [[Installation] Home Assistant](https://github.com/alexbelgium/hassio-addons/tree/master/netalertx)
-
-### Unraid (Partial Support)
-
-The Unraid template was created by the community, so it's only partially supported. Alternatively, here is [another version of the Unraid template](https://github.com/jokob-sk/NetAlertX-unraid).
-
-- [[Installation] Unraid App](https://unraid.net/community/apps)
-
-### Bare-Metal Installation (Experimental)
-
-If you prefer to run NetAlertX on your own hardware, you can try the experimental bare-metal installation. Please note that this method is still under development, and are looking for maintainers to help improve it.
-
-- [Bare-Metal Installation Guide](./HW_INSTALL.md)
-
 
 ---
 

docs/stylesheets/custom.css

@@ -14,6 +14,54 @@
  * limitations under the License.
  */
 
+
+/* --- HERO SECTION --- */
+.hero-wrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.hero-content {
+  flex: 1;
+  max-width: 26.8rem;
+}
+
+.hero-content h1 {
+  font-size: 3rem;
+  line-height: 1.12;
+  font-weight: 450;
+  margin-bottom: 0.5rem;
+  letter-spacing: -0.02em;
+}
+
+p.hero-subheading {
+  font-size: 1.5rem;
+  line-height: 1.28;
+  margin: 0 0 1rem;
+}
+
+p.hero-description {
+  line-height: 1.4;
+  margin: 0;
+}
+
+.hero-image {
+  flex: 0 0 250px;
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+  max-width: 250px;
+}
+
+.hero-logo-crisp {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
 /* --- PROMO CARDS --- */
 .promo-card-wrapper {
   display: flex;