From 40e0385b53098af9bf0a454a92c6375e948c412f Mon Sep 17 00:00:00 2001
From: gd2910 <122624946+gd2910@users.noreply.github.com>
Date: Tue, 21 Jan 2025 15:11:32 +0000
Subject: [PATCH] feat(root): homepage SVG

SVG change based on theme in the Home Page section

1318
---
 src/assets/svg/index.ts                 |   1 +
 src/assets/svg/test-dark-mode-image.svg |   9 +++
 src/icds-pages-data.json                | 103 +++++-------------------
 src/templates/Homepage/index.tsx        |  20 ++++-
 4 files changed, 48 insertions(+), 85 deletions(-)
 create mode 100644 src/assets/svg/test-dark-mode-image.svg

diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
index 876870efb..d2b49c1d3 100644
--- a/src/assets/svg/index.ts
+++ b/src/assets/svg/index.ts
@@ -6,3 +6,4 @@ export { default as ICDSLogo } from "./icds-logo.svg";
 export { default as StackBlitzLogo } from "./stackblitz-logo.svg";
 export { default as DesignImage } from "./designers-image.svg";
 export { default as DevImage } from "./developers-image.svg";
+export { default as TestDarkImage } from "./test-dark-mode-image.svg";
diff --git a/src/assets/svg/test-dark-mode-image.svg b/src/assets/svg/test-dark-mode-image.svg
new file mode 100644
index 000000000..bae9c4549
--- /dev/null
+++ b/src/assets/svg/test-dark-mode-image.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="sw-js-blob-svg" viewBox="0 0 100 100" version="1.1">
+    <defs> 
+        <linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0">
+            <stop id="stop1" stop-color="rgba(251.695, 101.924, 31.039, 1)" offset="0%"/>
+            <stop id="stop2" stop-color="rgba(31, 251, 40.61, 1)" offset="100%"/>
+        </linearGradient>
+    </defs>
+<path fill="url(#sw-gradient)" d="M25.1,-18.1C28.6,-15.5,25.1,-5.3,21.7,3.2C18.4,11.7,15.2,18.4,8.3,24.5C1.4,30.6,-9.3,36,-19.2,33.6C-29.2,31.2,-38.3,21,-36.9,12.6C-35.5,4.2,-23.5,-2.5,-15.6,-6.1C-7.7,-9.7,-3.8,-10.1,3.4,-12.9C10.7,-15.6,21.5,-20.7,25.1,-18.1Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition: 0.3s;" stroke="url(#sw-gradient)"/>
+</svg>
\ No newline at end of file
diff --git a/src/icds-pages-data.json b/src/icds-pages-data.json
index d2082b7f7..85bc86704 100644
--- a/src/icds-pages-data.json
+++ b/src/icds-pages-data.json
@@ -903,13 +903,7 @@
           "path": "/components/alert/accessibility"
         }
       ],
-      "tags": [
-        "Notification",
-        "Feedback",
-        "Message",
-        "Banner",
-        "Callout"
-      ],
+      "tags": ["Notification", "Feedback", "Message", "Banner", "Callout"],
       "meta": {
         "relativePath": "components\\alerts\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:11.344Z",
@@ -1004,11 +998,7 @@
           "path": "/components/back-to-top/accessibility"
         }
       ],
-      "tags": [
-        "Button",
-        "Anchor",
-        "Scroll to top"
-      ],
+      "tags": ["Button", "Anchor", "Scroll to top"],
       "meta": {
         "relativePath": "components\\back-to-top\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:11.352Z",
@@ -1103,11 +1093,7 @@
           "path": "/components/badge/accessibility"
         }
       ],
-      "tags": [
-        "Tab",
-        "Label",
-        "Chip"
-      ],
+      "tags": ["Tab", "Label", "Chip"],
       "meta": {
         "relativePath": "components\\badge\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.267Z",
@@ -1202,9 +1188,7 @@
           "path": "/components/breadcrumb/accessibility"
         }
       ],
-      "tags": [
-        "Breadcrumb trail"
-      ],
+      "tags": ["Breadcrumb trail"],
       "meta": {
         "relativePath": "components\\breadcrumbs\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.269Z",
@@ -1635,9 +1619,7 @@
           "path": "/components/chip/accessibility"
         }
       ],
-      "tags": [
-        "Tags"
-      ],
+      "tags": ["Tags"],
       "meta": {
         "relativePath": "components\\chips\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:11.449Z",
@@ -1879,9 +1861,7 @@
           "path": "/components/data-table/code"
         }
       ],
-      "tags": [
-        "Table"
-      ],
+      "tags": ["Table"],
       "meta": {
         "relativePath": "components\\data-table\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:11.475Z",
@@ -2064,10 +2044,7 @@
           "path": "/components/date-picker/accessibility"
         }
       ],
-      "tags": [
-        "Calendar",
-        "Datetime picker"
-      ],
+      "tags": ["Calendar", "Datetime picker"],
       "meta": {
         "relativePath": "components\\date-picker\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:11.487Z",
@@ -2162,10 +2139,7 @@
           "path": "/components/dialog/accessibility"
         }
       ],
-      "tags": [
-        "Popup",
-        "Modal window"
-      ],
+      "tags": ["Popup", "Modal window"],
       "meta": {
         "relativePath": "components\\dialog\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.298Z",
@@ -2545,9 +2519,7 @@
           "path": "/components/hero/accessibility"
         }
       ],
-      "tags": [
-        "Banner"
-      ],
+      "tags": ["Banner"],
       "meta": {
         "relativePath": "components\\hero\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.325Z",
@@ -2658,10 +2630,7 @@
           "path": "/components/link/accessibility"
         }
       ],
-      "tags": [
-        "Anchor",
-        "Hyperlink"
-      ],
+      "tags": ["Anchor", "Hyperlink"],
       "meta": {
         "relativePath": "components\\links\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.326Z",
@@ -2756,11 +2725,7 @@
           "path": "/components/loading-indicator/accessibility"
         }
       ],
-      "tags": [
-        "Progress bar",
-        "Progress indicator",
-        "Spinner"
-      ],
+      "tags": ["Progress bar", "Progress indicator", "Spinner"],
       "meta": {
         "relativePath": "components\\loading-indicators\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.327Z",
@@ -3231,9 +3196,7 @@
           "path": "/components/search-bar/accessibility"
         }
       ],
-      "tags": [
-        "Search input"
-      ],
+      "tags": ["Search input"],
       "meta": {
         "relativePath": "components\\search-bar\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.334Z",
@@ -3524,9 +3487,7 @@
           "path": "/components/side-navigation/accessibility"
         }
       ],
-      "tags": [
-        "Navigation bar"
-      ],
+      "tags": ["Navigation bar"],
       "meta": {
         "relativePath": "components\\side-nav\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.337Z",
@@ -3715,9 +3676,7 @@
           "path": "/components/status-tag/accessibility"
         }
       ],
-      "tags": [
-        "Tags"
-      ],
+      "tags": ["Tags"],
       "meta": {
         "relativePath": "components\\status-tags\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.339Z",
@@ -3812,11 +3771,7 @@
           "path": "/components/stepper/accessibility"
         }
       ],
-      "tags": [
-        "Progress indicator",
-        "Steps",
-        "Progress tracker"
-      ],
+      "tags": ["Progress indicator", "Steps", "Progress tracker"],
       "meta": {
         "relativePath": "components\\stepper\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.340Z",
@@ -3911,10 +3866,7 @@
           "path": "/components/switch/accessibility"
         }
       ],
-      "tags": [
-        "Toggle",
-        "Lightswitch"
-      ],
+      "tags": ["Toggle", "Lightswitch"],
       "meta": {
         "relativePath": "components\\switch\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:51.342Z",
@@ -4103,10 +4055,7 @@
           "path": "/components/text-field/accessibility"
         }
       ],
-      "tags": [
-        "Text input",
-        "Text area"
-      ],
+      "tags": ["Text input", "Text area"],
       "meta": {
         "relativePath": "components\\text-field\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:11.758Z",
@@ -4201,9 +4150,7 @@
           "path": "/components/toast/accessibility"
         }
       ],
-      "tags": [
-        "Snackbar"
-      ],
+      "tags": ["Snackbar"],
       "meta": {
         "relativePath": "components\\toasts\\guidance.mdx",
         "createdAt": "2025-01-06T13:48:46.465Z",
@@ -4298,9 +4245,7 @@
           "path": "/components/toggle-button/accessibility"
         }
       ],
-      "tags": [
-        "Segmented control"
-      ],
+      "tags": ["Segmented control"],
       "meta": {
         "relativePath": "components\\toggle-buttons\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:11.785Z",
@@ -4489,9 +4434,7 @@
           "path": "/components/top-navigation/accessibility"
         }
       ],
-      "tags": [
-        "Navigation bar"
-      ],
+      "tags": ["Navigation bar"],
       "meta": {
         "relativePath": "components\\top-nav\\guidance.mdx",
         "createdAt": "2024-12-31T11:42:11.798Z",
@@ -4643,11 +4586,7 @@
           "path": "/components/typography/accessibility"
         }
       ],
-      "tags": [
-        "Text",
-        "Heading",
-        "Label"
-      ],
+      "tags": ["Text", "Heading", "Label"],
       "meta": {
         "relativePath": "components\\typography\\guidance.mdx",
         "createdAt": "2025-01-06T13:48:46.468Z",
diff --git a/src/templates/Homepage/index.tsx b/src/templates/Homepage/index.tsx
index b9f26e070..43a21b404 100644
--- a/src/templates/Homepage/index.tsx
+++ b/src/templates/Homepage/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import clsx from "clsx";
 import { Link as GatsbyLink } from "gatsby";
 import Icon from "@mdi/react";
@@ -11,7 +11,7 @@ import accessibility from "../../assets/png/accessibility.png";
 import components from "../../assets/png/components.png";
 import patterns from "../../assets/png/patterns.png";
 import styles from "../../assets/png/styles.png";
-import { DesignImage, DevImage } from "../../assets/svg";
+import { DevImage } from "../../assets/svg";
 
 import "./index.css";
 import { useViewportWidth } from "../../utils/helpers";
@@ -84,7 +84,19 @@ const Homepage: React.FC = () => {
   };
 
   const { theme } = useTheme();
+  const LightDesignImage = lazy(
+    () => import("../../assets/svg/designers-image.svg")
+  );
+  const DarkDesignImage = lazy(
+    () => import("../../assets/svg/test-dark-mode-image.svg")
+  );
 
+  const DesignImageTest =
+    theme === "light" ? (
+      <LightDesignImage className="design-image" />
+    ) : (
+      <DarkDesignImage className="design-image" />
+    );
   return (
     <div className="homepage">
       <ic-hero
@@ -196,7 +208,9 @@ const Homepage: React.FC = () => {
             </div>
           </div>
           <div>
-            <DesignImage className="design-image" />
+            <Suspense fallback={<div>Loading...</div>}>
+              {DesignImageTest}
+            </Suspense>
           </div>
         </div>
         <hr aria-hidden="true" className="divider" />