From 1c7f7ec1d3acbc38332f9bb8ca66837eee02a479 Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Tue, 24 Sep 2024 20:49:44 +0200
Subject: [PATCH] Icons from Figma as svg

---
 app/dashboard/page.jsx        | 158 +++++++++++++++++++---------------
 public/images/IEC.svg         |   9 ++
 public/images/IP-icon.svg     |  10 +++
 public/images/gateway.svg     |   3 +
 public/images/subnet-mask.svg |   3 +
 5 files changed, 115 insertions(+), 68 deletions(-)
 create mode 100644 public/images/IEC.svg
 create mode 100644 public/images/IP-icon.svg
 create mode 100644 public/images/gateway.svg
 create mode 100644 public/images/subnet-mask.svg

diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
index 6d3af6d..98f9a7b 100644
--- a/app/dashboard/page.jsx
+++ b/app/dashboard/page.jsx
@@ -101,77 +101,99 @@ function Dashboard() {
   }, []);
 
   return (
-    <div className="bg-gray-100 flex flex-col min-h-screen">
-      <div className="flex flex-grow w-full">
-        {/* Hauptinhalt */}
-        <main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden">
-          <h1 className="text-2xl font-bold mb-4">Letzten 20 Meldungen:</h1>
-          <div>
-            <h1>Gerätedaten</h1>
-            <DeviceData />
+    <div className="bg-gray-100 flex flex-col min-h-screen p-8">
+      {/* Letzte Meldungen */}
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-xl font-bold">Letzten 20 Meldungen</h1>
+        <button className="text-red-500">
+          <i className="bi bi-trash"></i>
+        </button>
+      </div>
+
+      <div className="flex flex-col lg:flex-row gap-8">
+        {/* Meldungen Liste */}
+        <div className="bg-white shadow rounded-lg p-4 w-full lg:w-2/3">
+          <table className="min-w-full text-left">
+            <thead className="bg-gray-200 text-sm font-semibold">
+              <tr>
+                <th className="py-2 px-4">Zeitstempel</th>
+                <th className="py-2 px-4">Modul</th>
+                <th className="py-2 px-4">Meldung</th>
+              </tr>
+            </thead>
+            <tbody className="text-sm">
+              {/* Beispiel-Daten */}
+              <tr>
+                <td className="py-2 px-4">10.11.23 07:10:12</td>
+                <td className="py-2 px-4">KUE 04</td>
+                <td className="py-2 px-4">Isowert 2</td>
+              </tr>
+              {/* Weitere Zeilen nach Bedarf */}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Sidebar mit Informationen */}
+        <div className="bg-white shadow rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4">
+          {/* Versionsinformationen */}
+          <div className="bg-gray-50 p-4 rounded-lg shadow">
+            <h2 className="text-lg font-semibold mb-2">
+              Versionsinformationen
+            </h2>
+            <p className="text-sm">
+              <span className="font-bold">Applikationsversion: </span> 5.1.1.8
+              C-24-KA
+            </p>
+            <p className="text-sm">
+              <span className="font-bold">Webserverversion: </span> 5.3.4.1
+            </p>
           </div>
-          {loading && <p>Lade Gerätedaten...</p>}
-          {error && <p className="text-red-500">Fehler: {error.message}</p>}
 
-          {/* Gerätedaten anzeigen */}
-          {deviceData && (
-            <div>
-              <h2>Gerätedaten</h2>
-              <p>
-                <strong>Device Name:</strong> {deviceData.deviceName}
-              </p>
-              <p>
-                <strong>IP:</strong> {deviceData.ip}
-              </p>
-              <p>
-                <strong>MAC1:</strong> {deviceData.mac1}
-              </p>
-              <p>
-                <strong>MAC2:</strong> {deviceData.mac2}
-              </p>
-              <p>
-                <strong>Subnet:</strong> {deviceData.subnet}
-              </p>
-              <p>
-                <strong>Gateway:</strong> {deviceData.gateway}
-              </p>
-              <p>
-                <strong>Datetime:</strong> {deviceData.datetime}
-              </p>
-            </div>
-          )}
+          {/* Beispiel für Geräteanzeige */}
+          <div className="bg-gray-50 p-4 rounded-lg shadow">
+            <h2 className="text-lg font-semibold mb-2">Geräte Status</h2>
+            {/* Hier könntest du die Daten von "deviceData" verwenden */}
+            <p className="text-sm">Server: Online</p>
+            <p className="text-sm">Access 1: Online</p>
+            {/* Weitere Geräteinformationen */}
+          </div>
+        </div>
+      </div>
 
-          {/* Digitale Eingänge anzeigen */}
-          {digitalInputs && (
-            <div>
-              <h2>Digitale Eingänge</h2>
-              {digitalInputs.inputs.map((input, index) => (
-                <div key={index}>
-                  <p>
-                    <strong>Eingang {index + 1}:</strong> Zustand: {input} |
-                    Zähler: {digitalInputs.counters[index]} | Flatter:{" "}
-                    {digitalInputs.flutters[index]}
-                  </p>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Kabelüberwachungsdaten anzeigen */}
-          {cableMonitoring && (
-            <div>
-              <h2>Kabelüberwachung</h2>
-              {cableMonitoring.cableAddress.map((address, index) => (
-                <div key={index}>
-                  <p>
-                    <strong>Kabel {index + 1}:</strong> Adresse: {address} |
-                    Status: {cableMonitoring.status[index]}
-                  </p>
-                </div>
-              ))}
-            </div>
-          )}
-        </main>
+      {/* Footer Informationen */}
+      <div className="flex justify-between items-center mt-8 bg-white p-4 rounded-lg shadow">
+        <div className="flex items-center space-x-4">
+          <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
+          <div>
+            <p className="text-xs text-gray-500">IP-Adresse</p>
+            <p className="text-sm font-medium">192.168.10.147</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <img
+            src="/images/subnet-mask.svg"
+            alt="subnet mask"
+            className="w-6 h-6"
+          />
+          <div>
+            <p className="text-xs text-gray-500">Subnet-Maske</p>
+            <p className="text-sm font-medium">255.255.255.0</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <img src="/images/gateway.svg" alt="gateway" className="w-6 h-6" />
+          <div>
+            <p className="text-xs text-gray-500">Gateway</p>
+            <p className="text-sm font-medium">192.168.10.1</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <img src="/images/IEC.svg" alt="IEC" className="w-6 h-6" />
+          <div>
+            <p className="text-xs text-gray-500">IEC-Adresse</p>
+            <p className="text-sm font-medium">223</p>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/public/images/IEC.svg b/public/images/IEC.svg
new file mode 100644
index 0000000..2a2b6d4
--- /dev/null
+++ b/public/images/IEC.svg
@@ -0,0 +1,9 @@
+<svg width="33" height="28" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.467529" y="6" width="32.0116" height="22" rx="3.01911" fill="#0060AC"/>
+<mask id="path-2-outside-1_526_2058" maskUnits="userSpaceOnUse" x="6.47333" y="10.5" width="20" height="12" fill="black">
+<rect fill="white" x="6.47333" y="10.5" width="20" height="12"/>
+<path d="M8.9122 12.0559V21.5H7.66033V12.0559H8.9122ZM17.1888 20.4816V21.5H12.1878V20.4816H17.1888ZM12.4408 12.0559V21.5H11.1889V12.0559H12.4408ZM16.5272 16.1163V17.1347H12.1878V16.1163H16.5272ZM17.1239 12.0559V13.0807H12.1878V12.0559H17.1239ZM24.4406 18.4968H25.6859C25.6211 19.0936 25.4503 19.6276 25.1735 20.0989C24.8968 20.5703 24.5054 20.9443 23.9995 21.2211C23.4936 21.4935 22.8622 21.6297 22.1055 21.6297C21.552 21.6297 21.0482 21.5259 20.5941 21.3184C20.1444 21.1108 19.7574 20.8168 19.4331 20.4362C19.1088 20.0514 18.858 19.5908 18.6807 19.0546C18.5077 18.5141 18.4212 17.913 18.4212 17.2514V16.3109C18.4212 15.6493 18.5077 15.0504 18.6807 14.5142C18.858 13.9737 19.1109 13.511 19.4396 13.1261C19.7725 12.7412 20.1725 12.445 20.6395 12.2375C21.1066 12.0299 21.632 11.9261 22.2157 11.9261C22.9292 11.9261 23.5325 12.0602 24.0254 12.3283C24.5184 12.5964 24.9011 12.9683 25.1735 13.4439C25.4503 13.9153 25.6211 14.4623 25.6859 15.085H24.4406C24.38 14.6439 24.2676 14.2655 24.1033 13.9499C23.9389 13.6299 23.7054 13.3834 23.4027 13.2104C23.1 13.0375 22.7044 12.951 22.2157 12.951C21.7963 12.951 21.4266 13.031 21.1066 13.191C20.7909 13.351 20.525 13.578 20.3087 13.872C20.0969 14.1661 19.9369 14.5185 19.8288 14.9293C19.7206 15.3401 19.6666 15.7963 19.6666 16.2979V17.2514C19.6666 17.7141 19.7142 18.1487 19.8093 18.5552C19.9088 18.9617 20.0579 19.3184 20.2569 19.6254C20.4558 19.9325 20.7087 20.1746 21.0158 20.3519C21.3228 20.5249 21.686 20.6114 22.1055 20.6114C22.6374 20.6114 23.0611 20.527 23.3768 20.3584C23.6925 20.1898 23.9303 19.9476 24.0903 19.6319C24.2546 19.3163 24.3714 18.9379 24.4406 18.4968Z"/>
+</mask>
+<path d="M8.9122 12.0559V21.5H7.66033V12.0559H8.9122ZM17.1888 20.4816V21.5H12.1878V20.4816H17.1888ZM12.4408 12.0559V21.5H11.1889V12.0559H12.4408ZM16.5272 16.1163V17.1347H12.1878V16.1163H16.5272ZM17.1239 12.0559V13.0807H12.1878V12.0559H17.1239ZM24.4406 18.4968H25.6859C25.6211 19.0936 25.4503 19.6276 25.1735 20.0989C24.8968 20.5703 24.5054 20.9443 23.9995 21.2211C23.4936 21.4935 22.8622 21.6297 22.1055 21.6297C21.552 21.6297 21.0482 21.5259 20.5941 21.3184C20.1444 21.1108 19.7574 20.8168 19.4331 20.4362C19.1088 20.0514 18.858 19.5908 18.6807 19.0546C18.5077 18.5141 18.4212 17.913 18.4212 17.2514V16.3109C18.4212 15.6493 18.5077 15.0504 18.6807 14.5142C18.858 13.9737 19.1109 13.511 19.4396 13.1261C19.7725 12.7412 20.1725 12.445 20.6395 12.2375C21.1066 12.0299 21.632 11.9261 22.2157 11.9261C22.9292 11.9261 23.5325 12.0602 24.0254 12.3283C24.5184 12.5964 24.9011 12.9683 25.1735 13.4439C25.4503 13.9153 25.6211 14.4623 25.6859 15.085H24.4406C24.38 14.6439 24.2676 14.2655 24.1033 13.9499C23.9389 13.6299 23.7054 13.3834 23.4027 13.2104C23.1 13.0375 22.7044 12.951 22.2157 12.951C21.7963 12.951 21.4266 13.031 21.1066 13.191C20.7909 13.351 20.525 13.578 20.3087 13.872C20.0969 14.1661 19.9369 14.5185 19.8288 14.9293C19.7206 15.3401 19.6666 15.7963 19.6666 16.2979V17.2514C19.6666 17.7141 19.7142 18.1487 19.8093 18.5552C19.9088 18.9617 20.0579 19.3184 20.2569 19.6254C20.4558 19.9325 20.7087 20.1746 21.0158 20.3519C21.3228 20.5249 21.686 20.6114 22.1055 20.6114C22.6374 20.6114 23.0611 20.527 23.3768 20.3584C23.6925 20.1898 23.9303 19.9476 24.0903 19.6319C24.2546 19.3163 24.3714 18.9379 24.4406 18.4968Z" fill="white"/>
+<path d="M8.9122 12.0559H9.51602V11.452H8.9122V12.0559ZM8.9122 21.5V22.1038H9.51602V21.5H8.9122ZM7.66033 21.5H7.05651V22.1038H7.66033V21.5ZM7.66033 12.0559V11.452H7.05651V12.0559H7.66033ZM8.30838 12.0559V21.5H9.51602V12.0559H8.30838ZM8.9122 20.8962H7.66033V22.1038H8.9122V20.8962ZM8.26415 21.5V12.0559H7.05651V21.5H8.26415ZM7.66033 12.6597H8.9122V11.452H7.66033V12.6597ZM17.1888 20.4816H17.7926V19.8778H17.1888V20.4816ZM17.1888 21.5V22.1038H17.7926V21.5H17.1888ZM12.1878 21.5H11.584V22.1038H12.1878V21.5ZM12.1878 20.4816V19.8778H11.584V20.4816H12.1878ZM12.4408 12.0559H13.0446V11.452H12.4408V12.0559ZM12.4408 21.5V22.1038H13.0446V21.5H12.4408ZM11.1889 21.5H10.5851V22.1038H11.1889V21.5ZM11.1889 12.0559V11.452H10.5851V12.0559H11.1889ZM16.5272 16.1163H17.131V15.5125H16.5272V16.1163ZM16.5272 17.1347V17.7385H17.131V17.1347H16.5272ZM12.1878 17.1347H11.584V17.7385H12.1878V17.1347ZM12.1878 16.1163V15.5125H11.584V16.1163H12.1878ZM17.1239 12.0559H17.7278V11.452H17.1239V12.0559ZM17.1239 13.0807V13.6845H17.7278V13.0807H17.1239ZM12.1878 13.0807H11.584V13.6845H12.1878V13.0807ZM12.1878 12.0559V11.452H11.584V12.0559H12.1878ZM16.585 20.4816V21.5H17.7926V20.4816H16.585ZM17.1888 20.8962H12.1878V22.1038H17.1888V20.8962ZM12.7916 21.5V20.4816H11.584V21.5H12.7916ZM12.1878 21.0855H17.1888V19.8778H12.1878V21.0855ZM11.837 12.0559V21.5H13.0446V12.0559H11.837ZM12.4408 20.8962H11.1889V22.1038H12.4408V20.8962ZM11.7927 21.5V12.0559H10.5851V21.5H11.7927ZM11.1889 12.6597H12.4408V11.452H11.1889V12.6597ZM15.9234 16.1163V17.1347H17.131V16.1163H15.9234ZM16.5272 16.5309H12.1878V17.7385H16.5272V16.5309ZM12.7916 17.1347V16.1163H11.584V17.1347H12.7916ZM12.1878 16.7201H16.5272V15.5125H12.1878V16.7201ZM16.5201 12.0559V13.0807H17.7278V12.0559H16.5201ZM17.1239 12.4769H12.1878V13.6845H17.1239V12.4769ZM12.7916 13.0807V12.0559H11.584V13.0807H12.7916ZM12.1878 12.6597H17.1239V11.452H12.1878V12.6597ZM24.4406 18.4968V17.893H23.9241L23.844 18.4032L24.4406 18.4968ZM25.6859 18.4968L26.2862 18.5621L26.359 17.893H25.6859V18.4968ZM23.9995 21.2211L24.2858 21.7527L24.2893 21.7508L23.9995 21.2211ZM20.5941 21.3184L20.3411 21.8666L20.3431 21.8675L20.5941 21.3184ZM19.4331 20.4362L18.9713 20.8253L18.9735 20.8279L19.4331 20.4362ZM18.6807 19.0546L18.1055 19.2387L18.1074 19.2442L18.6807 19.0546ZM18.6807 14.5142L18.1069 14.326L18.106 14.3288L18.6807 14.5142ZM19.4396 13.1261L18.9829 12.731L18.9804 12.734L19.4396 13.1261ZM25.1735 13.4439L24.6495 13.744L24.6528 13.7497L25.1735 13.4439ZM25.6859 15.085V15.6888H26.3559L26.2865 15.0224L25.6859 15.085ZM24.4406 15.085L23.8423 15.1671L23.914 15.6888H24.4406V15.085ZM24.1033 13.9499L23.5661 14.2257L23.5677 14.2287L24.1033 13.9499ZM21.1066 13.191L20.8365 12.6509L20.8336 12.6524L21.1066 13.191ZM20.3087 13.872L19.8223 13.5143L19.8189 13.519L20.3087 13.872ZM19.8288 14.9293L19.2448 14.7756L19.8288 14.9293ZM19.8093 18.5552L19.2213 18.6928L19.2228 18.6987L19.8093 18.5552ZM21.0158 20.3519L20.7138 20.8748L20.7194 20.878L21.0158 20.3519ZM24.0903 19.6319L23.5547 19.3531L23.5517 19.3589L24.0903 19.6319ZM24.4406 19.1006H25.6859V17.893H24.4406V19.1006ZM25.0857 18.4316C25.0291 18.9518 24.8822 19.4025 24.6528 19.7932L25.6942 20.4047C26.0183 19.8527 26.2131 19.2353 26.2862 18.5621L25.0857 18.4316ZM24.6528 19.7932C24.4345 20.1651 24.1253 20.464 23.7097 20.6913L24.2893 21.7508C24.8855 21.4247 25.3591 20.9755 25.6942 20.4047L24.6528 19.7932ZM23.7132 20.6894C23.3187 20.9019 22.7929 21.0259 22.1055 21.0259V22.2335C22.9316 22.2335 23.6684 22.0852 24.2858 21.7527L23.7132 20.6894ZM22.1055 21.0259C21.6291 21.0259 21.2123 20.937 20.8452 20.7692L20.3431 21.8675C20.8841 22.1149 21.4748 22.2335 22.1055 22.2335V21.0259ZM20.8472 20.7701C20.4776 20.5996 20.1608 20.3592 19.8926 20.0446L18.9735 20.8279C19.354 21.2743 19.8113 21.6221 20.3411 21.8666L20.8472 20.7701ZM19.8948 20.0471C19.6258 19.7278 19.4101 19.3372 19.254 18.8651L18.1074 19.2442C18.3059 19.8445 18.5918 20.3749 18.9714 20.8253L19.8948 20.0471ZM19.2558 18.8706C19.1047 18.3985 19.025 17.8607 19.025 17.2514H17.8174C17.8174 17.9654 17.9107 18.6297 18.1056 19.2387L19.2558 18.8706ZM19.025 17.2514V16.3109H17.8174V17.2514H19.025ZM19.025 16.3109C19.025 15.7015 19.1047 15.1665 19.2553 14.6996L18.106 14.3288C17.9107 14.9343 17.8174 15.5971 17.8174 16.3109H19.025ZM19.2544 14.7024C19.4102 14.2274 19.6272 13.8362 19.8988 13.5182L18.9804 12.734C18.5947 13.1857 18.3057 13.7199 18.1069 14.326L19.2544 14.7024ZM19.8962 13.5212C20.1708 13.2038 20.4985 12.9609 20.8848 12.7892L20.3943 11.6857C19.8465 11.9292 19.3742 12.2787 18.9829 12.731L19.8962 13.5212ZM20.8848 12.7892C21.2644 12.6206 21.7045 12.5299 22.2157 12.5299V11.3223C21.5595 11.3223 20.9488 11.4393 20.3943 11.6857L20.8848 12.7892ZM22.2157 12.5299C22.8552 12.5299 23.3534 12.6501 23.7369 12.8587L24.3139 11.7978C23.7116 11.4702 23.0033 11.3223 22.2157 11.3223V12.5299ZM23.7369 12.8587C24.134 13.0747 24.4341 13.3679 24.6495 13.744L25.6975 13.1438C25.3681 12.5687 24.9028 12.1181 24.3139 11.7978L23.7369 12.8587ZM24.6528 13.7497C24.88 14.1365 25.0282 14.5982 25.0854 15.1475L26.2865 15.0224C26.214 14.3264 26.0206 13.694 25.6942 13.1382L24.6528 13.7497ZM25.6859 14.4812H24.4406V15.6888H25.6859V14.4812ZM25.0388 15.0029C24.9711 14.5097 24.8421 14.0615 24.6389 13.6711L23.5677 14.2287C23.6931 14.4696 23.789 14.7782 23.8423 15.1671L25.0388 15.0029ZM24.6404 13.674C24.4244 13.2535 24.11 12.9191 23.7023 12.6862L23.1032 13.7347C23.3009 13.8477 23.4535 14.0063 23.5661 14.2257L24.6404 13.674ZM23.7023 12.6862C23.279 12.4443 22.7694 12.3471 22.2157 12.3471V13.5548C22.6393 13.5548 22.9211 13.6307 23.1032 13.7347L23.7023 12.6862ZM22.2157 12.3471C21.7187 12.3471 21.2537 12.4423 20.8365 12.6509L21.3766 13.731C21.5994 13.6196 21.8739 13.5548 22.2157 13.5548V12.3471ZM20.8336 12.6524C20.4309 12.8565 20.0927 13.1466 19.8223 13.5143L20.7952 14.2297C20.9572 14.0094 21.1509 13.8454 21.3796 13.7296L20.8336 12.6524ZM19.8189 13.519C19.5569 13.8826 19.3686 14.3053 19.2448 14.7756L20.4127 15.083C20.5051 14.7317 20.6368 14.4496 20.7986 14.225L19.8189 13.519ZM19.2448 14.7756C19.1214 15.2447 19.0628 15.7535 19.0628 16.2979H20.2704C20.2704 15.8391 20.3199 15.4356 20.4127 15.083L19.2448 14.7756ZM19.0628 16.2979V17.2514H20.2704V16.2979H19.0628ZM19.0628 17.2514C19.0628 17.7555 19.1146 18.2366 19.2214 18.6928L20.3972 18.4176C20.3137 18.0608 20.2704 17.6727 20.2704 17.2514H19.0628ZM19.2228 18.6987C19.336 19.1615 19.5096 19.5825 19.7501 19.9538L20.7636 19.2971C20.6063 19.0543 20.4815 18.7618 20.3958 18.4117L19.2228 18.6987ZM19.7501 19.9538C19.9992 20.3383 20.3214 20.6482 20.7138 20.8748L21.3177 19.829C21.0961 19.701 20.9123 19.5266 20.7636 19.2971L19.7501 19.9538ZM20.7194 20.878C21.1327 21.1108 21.602 21.2152 22.1055 21.2152V20.0075C21.7701 20.0075 21.5129 19.9389 21.3121 19.8258L20.7194 20.878ZM22.1055 21.2152C22.6921 21.2152 23.2258 21.1237 23.6613 20.891L23.0923 19.8258C22.8964 19.9304 22.5826 20.0075 22.1055 20.0075V21.2152ZM23.6613 20.891C24.085 20.6646 24.4122 20.3325 24.6289 19.9049L23.5517 19.3589C23.4484 19.5627 23.2999 19.7149 23.0923 19.8258L23.6613 20.891ZM24.6259 19.9107C24.827 19.5244 24.9602 19.0804 25.0371 18.5904L23.844 18.4032C23.7825 18.7954 23.6822 19.1081 23.5547 19.3531L24.6259 19.9107Z" fill="#0060AC" mask="url(#path-2-outside-1_526_2058)"/>
+</svg>
diff --git a/public/images/IP-icon.svg b/public/images/IP-icon.svg
new file mode 100644
index 0000000..ae64a71
--- /dev/null
+++ b/public/images/IP-icon.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_523_7201)">
+<path d="M21.3411 8.66763V27.3411H2.66763V8.66763H21.3411ZM21.3411 6H2.66763C1.20043 6 0 7.20043 0 8.66763V27.3411C0 28.8082 1.20043 30.0087 2.66763 30.0087H21.3411C22.8082 30.0087 24.0087 28.8082 24.0087 27.3411V8.66763C24.0087 7.20043 22.8082 6 21.3411 6ZM8.00289 11.3353H5.33526V24.6734H8.00289V11.3353ZM16.0058 11.3353H10.6705V24.6734H13.3382V19.3382H16.0058C17.473 19.3382 18.6734 18.1377 18.6734 16.6705V14.0029C18.6734 12.5357 17.473 11.3353 16.0058 11.3353ZM16.0058 16.6705H13.3382V14.0029H16.0058V16.6705Z" fill="#6750A4"/>
+</g>
+<defs>
+<clipPath id="clip0_523_7201">
+<rect width="24.0087" height="24.0087" fill="white" transform="translate(0 6)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/gateway.svg b/public/images/gateway.svg
new file mode 100644
index 0000000..87e624b
--- /dev/null
+++ b/public/images/gateway.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="27" viewBox="0 0 22 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3503 23.4751V18.8764M11.3503 13.3579V8.75923M4.91213 16.1172H9.51084M17.7885 16.1172H13.1898M12.2986 12.4097L11.3503 13.6743L10.4021 12.4097H12.2986ZM10.4021 19.832L11.3503 18.5674L12.2986 19.832H10.403H10.4021ZM5.83187 17.0654L4.56722 16.1172L5.83187 15.1689V17.0654ZM16.8688 15.1689L18.1334 16.1172L16.8688 17.0654V15.1698V15.1689ZM11.3503 6C16.9378 6 21.4675 10.5297 21.4675 16.1172C21.4675 21.7046 16.9378 26.2344 11.3503 26.2344C5.76289 26.2344 1.23315 21.7046 1.23315 16.1172C1.23315 10.5297 5.76289 6 11.3503 6Z" stroke="#001AFF" stroke-width="1.06497"/>
+</svg>
diff --git a/public/images/subnet-mask.svg b/public/images/subnet-mask.svg
new file mode 100644
index 0000000..67eca94
--- /dev/null
+++ b/public/images/subnet-mask.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="25" viewBox="0 0 19 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6222 19.0063C15.1598 19.0053 14.7075 19.1411 14.322 19.3965L11.3405 16.4051L10.4212 17.3246L13.4118 20.307C13.2974 20.5116 13.21 20.7302 13.1517 20.9573H5.1278C5.06289 20.7264 4.96243 20.507 4.83004 20.307L14.322 10.8123C14.7075 11.0678 15.1598 11.2036 15.6222 11.2025C16.1091 11.2045 16.5867 11.0697 17.0007 10.8135C17.4147 10.5573 17.7485 10.1901 17.9641 9.75348C18.1798 9.31689 18.2686 8.82852 18.2204 8.34394C18.1722 7.85936 17.9891 7.39804 17.6917 7.01246C17.3944 6.62689 16.9948 6.33254 16.5384 6.16292C16.0821 5.9933 15.5873 5.95522 15.1104 6.05301C14.6335 6.1508 14.1936 6.38053 13.8408 6.71606C13.488 7.05159 13.2364 7.47945 13.1147 7.95095H5.1551C5.0024 7.394 4.67216 6.90212 4.21454 6.55C3.75691 6.19789 3.19691 6.00478 2.61958 6C1.92988 6 1.26843 6.27406 0.780732 6.76189C0.293038 7.24973 0.0190543 7.91137 0.0190543 8.60127C0.0190543 9.29117 0.293038 9.95281 0.780732 10.4406C1.26843 10.9285 1.92988 11.2025 2.61958 11.2025C3.08199 11.2036 3.53437 11.0678 3.91985 10.8123L6.90136 13.8038L7.82065 12.8843L4.83004 9.90191C4.94443 9.69727 5.03184 9.47868 5.09009 9.25159H13.114C13.179 9.4825 13.2794 9.7019 13.4118 9.90191L3.91985 19.3965C3.53437 19.1411 3.08199 19.0053 2.61958 19.0063C2.13276 19.0044 1.65517 19.1392 1.24115 19.3954C0.827129 19.6515 0.493311 20.0188 0.27768 20.4554C0.0620486 20.892 -0.026737 21.3804 0.0214263 21.865C0.0695897 22.3495 0.252768 22.8109 0.550116 23.1964C0.847465 23.582 1.24704 23.8763 1.70338 24.046C2.15972 24.2156 2.6545 24.2537 3.13141 24.1559C3.60832 24.0581 4.04821 23.8284 4.40104 23.4928C4.75386 23.1573 5.00544 22.7294 5.12715 22.2579H13.0867C13.2069 22.731 13.4573 23.1609 13.8095 23.4987C14.1617 23.8365 14.6016 24.0687 15.0792 24.1689C15.5567 24.2691 16.0528 24.2333 16.511 24.0656C16.9693 23.8979 17.3713 23.6049 17.6714 23.2201C17.9715 22.8352 18.1577 22.3739 18.2087 21.8884C18.2598 21.403 18.1737 20.913 17.9603 20.4741C17.7468 20.0352 17.4146 19.665 17.0013 19.4055C16.588 19.146 16.1102 19.0078 15.6222 19.0063ZM15.6222 7.30063C15.8794 7.30063 16.1308 7.37692 16.3446 7.51983C16.5585 7.66275 16.7251 7.86588 16.8235 8.10354C16.9219 8.3412 16.9477 8.60271 16.8975 8.85501C16.8473 9.10731 16.7235 9.33906 16.5417 9.52096C16.3598 9.70285 16.1281 9.82673 15.8759 9.87691C15.6237 9.9271 15.3622 9.90134 15.1246 9.8029C14.8871 9.70446 14.684 9.53775 14.5411 9.32386C14.3982 9.10998 14.322 8.85851 14.322 8.60127C14.323 8.25664 14.4603 7.92641 14.7039 7.68272C14.9476 7.43903 15.2777 7.30166 15.6222 7.30063ZM2.61958 9.90191C2.36242 9.90191 2.11102 9.82562 1.8972 9.68271C1.68337 9.53979 1.51671 9.33666 1.4183 9.099C1.31988 8.86134 1.29413 8.59983 1.3443 8.34753C1.39447 8.09523 1.51831 7.86348 1.70016 7.68158C1.882 7.49969 2.11369 7.37581 2.36592 7.32563C2.61814 7.27544 2.87958 7.3012 3.11717 7.39964C3.35477 7.49808 3.55784 7.66479 3.70072 7.87868C3.84359 8.09256 3.91985 8.34403 3.91985 8.60127C3.91882 8.9459 3.7815 9.27613 3.53787 9.51982C3.29425 9.76351 2.96412 9.90088 2.61958 9.90191ZM2.61958 22.9083C2.36242 22.9083 2.11102 22.832 1.8972 22.6891C1.68337 22.5461 1.51671 22.343 1.4183 22.1054C1.31988 21.8677 1.29413 21.6062 1.3443 21.3539C1.39447 21.1016 1.51831 20.8698 1.70016 20.6879C1.882 20.506 2.11369 20.3822 2.36592 20.332C2.61814 20.2818 2.87958 20.3075 3.11717 20.406C3.35477 20.5044 3.55784 20.6711 3.70072 20.885C3.84359 21.0989 3.91985 21.3504 3.91985 21.6076C3.91882 21.9523 3.7815 22.2825 3.53787 22.5262C3.29425 22.7699 2.96412 22.9072 2.61958 22.9083ZM15.6222 22.9083C15.3651 22.9083 15.1137 22.832 14.8998 22.6891C14.686 22.5461 14.5194 22.343 14.4209 22.1054C14.3225 21.8677 14.2968 21.6062 14.347 21.3539C14.3971 21.1016 14.521 20.8698 14.7028 20.6879C14.8847 20.506 15.1163 20.3822 15.3686 20.332C15.6208 20.2818 15.8822 20.3075 16.1198 20.406C16.3574 20.5044 16.5605 20.6711 16.7034 20.885C16.8462 21.0989 16.9225 21.3504 16.9225 21.6076C16.9215 21.9523 16.7842 22.2825 16.5405 22.5262C16.2969 22.7699 15.9668 22.9072 15.6222 22.9083Z" fill="#647BA7"/>
+</svg>