From db2f82be140ebc04abf468b62a57f76368ae4f99 Mon Sep 17 00:00:00 2001
From: "huy.phan" <huy.phan@df.technology>
Date: Wed, 7 Jan 2026 15:37:33 +0700
Subject: [PATCH 1/2] fix: dark mode color icon

---
 src/app/_components/GettingStartedCards.jsx | 16 ++++++
 src/app/globals.css                         | 25 +++++++--
 src/content/getting-started/index.mdx       | 14 ++++-
 src/content/index.mdx                       | 60 ++++++++++++++-------
 4 files changed, 89 insertions(+), 26 deletions(-)

diff --git a/src/app/_components/GettingStartedCards.jsx b/src/app/_components/GettingStartedCards.jsx
index ad90efc..d32b456 100644
--- a/src/app/_components/GettingStartedCards.jsx
+++ b/src/app/_components/GettingStartedCards.jsx
@@ -123,6 +123,7 @@ export function GettingStartedCards() {
 
         :global(.dark) .getting-started-card:hover {
           border-color: #6366f1;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
         }
 
         .getting-started-card-image {
@@ -159,6 +160,12 @@ export function GettingStartedCards() {
           white-space: nowrap;
         }
 
+        :global(.dark) .getting-started-card-label {
+          background: #1f2937;
+          color: #818cf8;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        }
+
         .getting-started-card-content {
           display: flex;
           align-items: center;
@@ -170,6 +177,7 @@ export function GettingStartedCards() {
 
         :global(.dark) .getting-started-card-content {
           border-top-color: #374151;
+          background-color: #111827;
         }
 
         .getting-started-card-icon {
@@ -199,10 +207,18 @@ export function GettingStartedCards() {
           transition: transform 0.2s ease;
         }
 
+        :global(.dark) .getting-started-card-arrow {
+          color: #6b7280;
+        }
+
         .getting-started-card:hover .getting-started-card-arrow {
           transform: translateX(4px);
           color: #4f46e5;
         }
+
+        :global(.dark) .getting-started-card:hover .getting-started-card-arrow {
+          color: #818cf8;
+        }
       `}</style>
     </div>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index beb9185..13983ec 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,7 +11,7 @@
 
 /* Custom SpaceDF primary color #4006AA overrides */
 .nextra-sidebar-container .nextra-sidebar ul li.active > a {
-  background-color: #4006AA !important;
+  background-color: #4006aa !important;
   color: white !important;
 }
 
@@ -21,11 +21,17 @@
 
 /* Override specific classes to use 80% lightness instead of 45% */
 .nx-text-primary-600 {
-  color: hsl(var(--nextra-primary-hue) var(--nextra-primary-saturation) 80% / var(--tw-text-opacity)) !important;
+  color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation) 80% /
+      var(--tw-text-opacity)
+  ) !important;
 }
 
-html[class~=dark] .dark\:nx-text-primary-600 {
-  color: hsl(var(--nextra-primary-hue) var(--nextra-primary-saturation) 80% / var(--tw-text-opacity)) !important;
+html[class~="dark"] .dark\:nx-text-primary-600 {
+  color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation) 80% /
+      var(--tw-text-opacity)
+  ) !important;
 }
 
 /* SpaceDF Logo Theme Styles */
@@ -35,4 +41,13 @@ html[class~=dark] .dark\:nx-text-primary-600 {
 
 .dark .spacedf-logo {
   filter: brightness(0) invert(1);
-}
\ No newline at end of file
+}
+
+/* Training Icon Theme Styles */
+.svg-icon {
+  filter: brightness(0);
+}
+
+.dark .svg-icon {
+  filter: brightness(0) invert(1);
+}
diff --git a/src/content/getting-started/index.mdx b/src/content/getting-started/index.mdx
index 77de5f3..496ebd8 100644
--- a/src/content/getting-started/index.mdx
+++ b/src/content/getting-started/index.mdx
@@ -23,6 +23,7 @@ Ready to dive in? The getting started guides take you step-by-step through Space
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/cloud.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Cloud Platform"
       />
@@ -34,6 +35,7 @@ Ready to dive in? The getting started guides take you step-by-step through Space
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/self-service.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Self-Hosted Installation"
       />
@@ -50,6 +52,7 @@ Ready to dive in? The getting started guides take you step-by-step through Space
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/tracking-app.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Fleet Management System"
       />
@@ -61,7 +64,8 @@ Ready to dive in? The getting started guides take you step-by-step through Space
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/inspiration.png"
-        style={{width: "24px"}}
+        className="svg-icon"
+        style={{height: "24px"}}
         alt="Smart Building Solution"
       />
     }
@@ -72,6 +76,7 @@ Ready to dive in? The getting started guides take you step-by-step through Space
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/smart-city.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Smart City Platform"
       />
@@ -90,6 +95,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/internet-of-things.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="IoT Devices"
       />
@@ -101,6 +107,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/platform.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Platform Integrations"
       />
@@ -134,6 +141,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/tour-guide.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Complete Onboarding Guide"
       />
@@ -150,6 +158,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/node.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Multi-Protocol Support"
       />
@@ -161,6 +170,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/location.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Real-Time Tracking"
       />
@@ -172,6 +182,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/organization-chart.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Multi-Tenancy"
       />
@@ -183,6 +194,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/dashboard.png"
+        className="svg-icon"
         style={{width: "24px"}}
         alt="Customizable Dashboards"
       />
diff --git a/src/content/index.mdx b/src/content/index.mdx
index ea89de3..6392719 100644
--- a/src/content/index.mdx
+++ b/src/content/index.mdx
@@ -12,7 +12,7 @@ Connect your devices using any of these protocols through our **Multi-Protocol A
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="LoRaWAN"
-    href="/protocols/lorawan"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/lora-logo.png"
@@ -26,7 +26,7 @@ Connect your devices using any of these protocols through our **Multi-Protocol A
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="HTTP/HTTPS"
-    href="/protocols/http"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/http.png"
@@ -40,7 +40,7 @@ Connect your devices using any of these protocols through our **Multi-Protocol A
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="MQTT"
-    href="/protocols/mqtt"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/mqtt.png"
@@ -54,7 +54,7 @@ Connect your devices using any of these protocols through our **Multi-Protocol A
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="WebSocket"
-    href="/protocols/websocket"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/websocket.png"
@@ -68,7 +68,7 @@ Connect your devices using any of these protocols through our **Multi-Protocol A
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Socket.IO"
-    href="/protocols/socketio"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/socket-io.png"
@@ -82,10 +82,11 @@ Connect your devices using any of these protocols through our **Multi-Protocol A
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="CoAP"
-    href="/protocols/coap"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/constrained-app.png"
+        className="svg-icon"
         style={{width: "44px"}}
         alt="CoAP"
       />
@@ -96,7 +97,7 @@ Connect your devices using any of these protocols through our **Multi-Protocol A
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="LwM2M"
-    href="/protocols/lwm2m"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/lwm2m.png"
@@ -110,10 +111,11 @@ Connect your devices using any of these protocols through our **Multi-Protocol A
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="SNMP"
-    href="/protocols/snmp"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/snmp.png"
+        className="svg-icon"
         style={{width: "44px"}}
         alt="SNMP"
       />
@@ -131,10 +133,11 @@ SpaceDF integrates seamlessly with popular IoT platforms and network servers:
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="ChirpStack"
-    href="/platforms/chirpstack"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/chirpstack.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="ChirpStack"
       />
@@ -145,7 +148,7 @@ SpaceDF integrates seamlessly with popular IoT platforms and network servers:
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="The Things Network"
-    href="/platforms/ttn"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/ttn.webp"
@@ -159,7 +162,7 @@ SpaceDF integrates seamlessly with popular IoT platforms and network servers:
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Helium"
-    href="/platforms/helium"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/helium.png"
@@ -173,7 +176,7 @@ SpaceDF integrates seamlessly with popular IoT platforms and network servers:
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Your Platform"
-    href="/platforms/custom"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/platform.jpg"
@@ -187,7 +190,7 @@ SpaceDF integrates seamlessly with popular IoT platforms and network servers:
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Your MQTT Platform"
-    href="/platforms/mqtt"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/mqtt.png"
@@ -206,10 +209,11 @@ SpaceDF integrates seamlessly with popular IoT platforms and network servers:
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Fleet Tracking"
-    href="/spaces"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/location.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Fleet Tracking"
       />
@@ -220,10 +224,11 @@ SpaceDF integrates seamlessly with popular IoT platforms and network servers:
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Smart Buildings"
-    href="/spaces"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/building.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Smart Buildings"
       />
@@ -234,10 +239,11 @@ SpaceDF integrates seamlessly with popular IoT platforms and network servers:
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Smart City"
-    href="/spaces"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/smart-city.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Smart City"
       />
@@ -248,10 +254,11 @@ SpaceDF integrates seamlessly with popular IoT platforms and network servers:
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Industrial IoT"
-    href="/spaces"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/iot.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Industrial IoT"
       />
@@ -269,10 +276,11 @@ Visualize and interact with your IoT data through powerful dashboard components
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Digital Twins"
-    href="/spaces"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/digital-twin.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Digital Twins"
       />
@@ -283,10 +291,11 @@ Visualize and interact with your IoT data through powerful dashboard components
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Views"
-    href="/spaces"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/grid.png"
+        className="svg-icon"
         style={{height: "44px"}}
         alt="Views"
       />
@@ -297,10 +306,11 @@ Visualize and interact with your IoT data through powerful dashboard components
   <Cards.Card
     style={{padding: "5px 10px"}}
     title="Cards"
-    href="/spaces"
+    href="#"
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/real-time-strategy.png"
+        className="svg-icon"
         style={{height: "44px"}}
         alt="Cards"
       />
@@ -315,6 +325,7 @@ Visualize and interact with your IoT data through powerful dashboard components
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/window.png"
+        className="svg-icon"
         style={{height: "44px"}}
         alt="Widgets"
       />
@@ -329,6 +340,7 @@ Visualize and interact with your IoT data through powerful dashboard components
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/status-update.png"
+        className="svg-icon"
         style={{height: "44px"}}
         alt="Badges"
       />
@@ -343,6 +355,7 @@ Visualize and interact with your IoT data through powerful dashboard components
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/3d.png"
+        className="svg-icon"
         style={{height: "44px"}}
         alt="2D/3D Views"
       />
@@ -364,6 +377,7 @@ Organize and manage your IoT deployments with flexible multi-tenant architecture
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/organization-chart.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Multi-Tenant"
       />
@@ -378,6 +392,7 @@ Organize and manage your IoT deployments with flexible multi-tenant architecture
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/space.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Multi-Spaces"
       />
@@ -392,6 +407,7 @@ Organize and manage your IoT deployments with flexible multi-tenant architecture
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/assets.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Group Your Assets"
       />
@@ -434,6 +450,7 @@ Need help? We're here to support you:
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/meeting.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Community Forum"
       />
@@ -449,6 +466,7 @@ Need help? We're here to support you:
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/github.png"
+        className="svg-icon"
         style={{height: "44px"}}
         alt="GitHub"
       />
@@ -464,6 +482,7 @@ Need help? We're here to support you:
     icon={
       <img
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/support.png"
+        className="svg-icon"
         style={{height: "54px"}}
         alt="Professional Support"
       />
@@ -478,6 +497,7 @@ Need help? We're here to support you:
     href="/support"
     icon={
       <img
+        className="svg-icon"
         src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/training.png"
         style={{height: "54px"}}
         alt="Training"

From 7a84bf0719e8e7c5163cbba34f0d7c4ba32e907d Mon Sep 17 00:00:00 2001
From: Quynh-Nguyen <quynh.nguyen@digitalfortress.dev>
Date: Wed, 7 Jan 2026 08:38:59 +0000
Subject: [PATCH 2/2] Trigger Build