From 7926287bca7292049d41f7d56aa552e6fe3e5f0e Mon Sep 17 00:00:00 2001
From: Thiemann96 <e.thieme@reedu.de>
Date: Fri, 6 Feb 2026 10:33:28 +0100
Subject: [PATCH] hotfix: phenomena in :home

---
 docs/boards/mini/mini-overview.mdx   |  2 +-
 docs/products/home/home-overview.mdx | 72 ++++++++++++++++++++--------
 src/components/icons/IconItem.js     | 15 ++++--
 3 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/docs/boards/mini/mini-overview.mdx b/docs/boards/mini/mini-overview.mdx
index 1d2a556..5b88a4f 100644
--- a/docs/boards/mini/mini-overview.mdx
+++ b/docs/boards/mini/mini-overview.mdx
@@ -107,7 +107,7 @@ return (
             <div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-8">
               <NavBlocks href="/docs/hardware/bee/wifi-bee" title="Wifi-Bee" />
               <NavBlocks href="/docs/hardware/bee/sd-bee" title="SD-Bee" />
-              <NavBlocks href="/docs/hardware/sensors/display" title="OLED Display" />
+              <NavBlocks href="/docs/hardware/accessoires/display" title="OLED Display" />
               <NavBlocks href="/docs/hardware/sensors/umweltsensor" title="Umweltsensor" />
               <NavBlocks href="/docs/hardware/accessoires/rgb-led" title="RGB-LED" />
               <NavBlocks href="/docs/hardware/sensors/niederschlag-rg15" title="Niederschlagsensor" />
diff --git a/docs/products/home/home-overview.mdx b/docs/products/home/home-overview.mdx
index e9642af..b9c68a4 100644
--- a/docs/products/home/home-overview.mdx
+++ b/docs/products/home/home-overview.mdx
@@ -20,12 +20,16 @@ import {
 import { IconItem } from '@site/src/components/icons/IconItem'
 import {
   faCloud,
+  faEthernet,
   faGaugeHigh,
   faMicrophone,
   faPercent,
+  faSdCard,
   faSmog,
   faSun,
   faTemperatureHigh,
+  faTowerBroadcast,
+  faWifi,
   faWind,
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -51,30 +55,60 @@ return (
       />
         
      {activeTopTab === 'Messbare Phänomene' && (
-   <PortsOverview>
-    <IconItem> 
-      <FontAwesomeIcon icon={faTemperatureHigh} />
-      <FontAwesomeIcon icon={faGaugeHigh} />
-      <FontAwesomeIcon icon={faPercent} />
-      <FontAwesomeIcon icon={faSun} />
-      <FontAwesomeIcon icon={faSmog} />
-      <FontAwesomeIcon icon={faCloud} />
-      <FontAwesomeIcon icon={faMicrophone} />
-      <FontAwesomeIcon icon={faWind} />
+  <PortsOverview className="flex flex-wrap gap-4">
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faTemperatureHigh} style={{ color: 'green' }} />
+      <span>Temperatur</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faGaugeHigh} style={{ color: 'green' }} />
+      <span>Luftdruck</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center gap-2 p-5">
+      <FontAwesomeIcon icon={faPercent} style={{ color: 'green' }} />
+      <span>Luftfeuchtigkeit</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faSun} style={{ color: 'green' }} />
+      <span>Helligkeit</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faSmog} style={{ color: 'green' }} />
+      <span>Luftqualität</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faCloud} style={{ color: 'green' }} />
+      <span>Wolken</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faMicrophone} style={{ color: 'green' }} />
+      <span>Geräuschpegel</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faWind} style={{ color: 'green' }} />
+      <span>Wind</span>
     </IconItem>
   </PortsOverview>
  )}
 
 {activeTopTab === 'Datenübertragung' && (
-
-<PortsOverview>
-<IconItem>
-<FontAwesomeIcon icon={faWifi} />
-<FontAwesomeIcon icon={faEthernet} />
-<FontAwesomeIcon icon={faTowerBroadcast} />
-<FontAwesomeIcon icon={faSdCard} />
-</IconItem>
-
+  <PortsOverview className="flex flex-wrap gap-4">
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faWifi} style={{ color: 'green' }} />
+      <span>WLAN</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faEthernet} style={{ color: 'green' }} />
+      <span>Ethernet</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faTowerBroadcast} style={{ color: 'green' }} />
+      <span>Funk</span>
+    </IconItem>
+    <IconItem width="14rem" className="flex flex-col items-center p-5">
+      <FontAwesomeIcon icon={faSdCard} style={{ color: 'green' }} />
+      <span>SD-Karte</span>
+    </IconItem>
   </PortsOverview>
  )}
 
diff --git a/src/components/icons/IconItem.js b/src/components/icons/IconItem.js
index 591004f..ba8ae7e 100644
--- a/src/components/icons/IconItem.js
+++ b/src/components/icons/IconItem.js
@@ -1,16 +1,21 @@
 import React from 'react'
 
-export function IconItem({ icon, name, children }) {
+export function IconItem({ icon, name, children, height = 16, width = 16, className = '' }) {
   return (
-    <div className="flex flex-col items-center group">
-      <div className="w-16 h-16 mb-2 flex items-center justify-center bg-white rounded-xl border border-gray-200 shadow-sm group-hover:scale-110 group-hover:border-green-400 transition-all duration-200 dark:bg-gray-800 dark:border-gray-700">
+    <div className={`flex flex-col items-center group ${className}`}>
+      <div
+        className={`w-${width} h-${height} mb-2 flex items-center justify-center bg-white rounded-xl border border-gray-200 shadow-sm group-hover:scale-110 group-hover:border-green-400 transition-all duration-200 dark:bg-gray-800 dark:border-gray-700`}
+      >
         {children ? (
           children
         ) : (
-          <i className={`${icon} text-2xl text-green-600 dark:text-green-400`} aria-hidden="true"></i>
+          <i
+            className={`${icon} text-2xl text-green-600 dark:text-green-400`}
+            aria-hidden="true"
+          ></i>
         )}
       </div>
-      
+
       <p className="text-[11px] font-semibold text-gray-500 uppercase tracking-tight text-center leading-tight dark:text-gray-400">
         {name}
       </p>