diff --git a/src/components/ClientOnlyWorkflow/index.js b/src/components/ClientOnlyWorkflow/index.js
index 4aaf973..88f71cc 100644
--- a/src/components/ClientOnlyWorkflow/index.js
+++ b/src/components/ClientOnlyWorkflow/index.js
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -64,43 +64,43 @@ export default function ClientOnlyWorkflow() {
 
 
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.thing1)}>
-                <FontAwesomeIcon icon={faQuestion} className={styles.icon} data-color="primary" />
+                <FontAwesomeIcon icon={faQuestion} className={styles.icon} />
                 <p className={styles.itemName}>Thing</p>
             </div>
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.thing2)}>
-                <FontAwesomeIcon icon={faQuestion} className={styles.icon} data-color="primary" />
+                <FontAwesomeIcon icon={faQuestion} className={styles.icon} />
                 <p className={styles.itemName}>Thing</p>
             </div>
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.td)}>
-                <FontAwesomeIcon icon={faFile} className={styles.icon} data-color="secondary" />
+                <FontAwesomeIcon icon={faFile} className={styles.icon} />
                 <p className={styles.itemName}>TD</p>
             </div>
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.tm)}>
-                <FontAwesomeIcon icon={faFile} className={styles.icon} data-color="secondary" />
+                <FontAwesomeIcon icon={faFile} className={styles.icon} />
                 <p className={styles.itemName}>TM</p>
             </div>
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.domus)}>
-                <FontAwesomeIcon icon={faHouse} className={styles.icon} data-color="primary" />
+                <FontAwesomeIcon icon={faHouse} className={styles.icon} />
                 <p className={styles.itemName}>Domus TDD</p>
             </div>
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.tools)}>
-                <FontAwesomeIcon icon={faScrewdriverWrench} className={styles.icon} data-color="primary" />
+                <FontAwesomeIcon icon={faScrewdriverWrench} className={styles.icon} />
                 <p className={styles.itemName}>TD Tools</p>
             </div>
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.playground)}>
-                <FontAwesomeIcon icon={faLaptopCode} className={styles.icon} data-color="primary" />
+                <FontAwesomeIcon icon={faLaptopCode} className={styles.icon} />
                 <p className={styles.itemName}>Playground</p>
             </div>
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.nodeWot)}>
-                <FontAwesomeIcon icon={faDisplay} className={styles.icon} data-color="secondary" />
+                <FontAwesomeIcon icon={faDisplay} className={styles.icon} />
                 <p className={styles.itemName}>node-wot</p>
             </div>
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.dartWot)}>
-                <FontAwesomeIcon icon={faMobile} className={styles.icon} data-color="secondary" />
+                <FontAwesomeIcon icon={faMobile} className={styles.icon} />
                 <p className={styles.itemName}>dart_wot</p>
             </div>
             <div className={clsx(styles.clientOnlyWorkflow__item, styles.nodeRed)}>
-                <FontAwesomeIcon icon={faCubes} className={styles.icon} data-color="secondary" />
+                <FontAwesomeIcon icon={faCubes} className={styles.icon} />
                 <p className={styles.itemName}>Node-RED</p>
             </div>
         </div>
diff --git a/src/components/ClientOnlyWorkflow/styles.module.scss b/src/components/ClientOnlyWorkflow/styles.module.scss
index ab55900..9c2b5e1 100644
--- a/src/components/ClientOnlyWorkflow/styles.module.scss
+++ b/src/components/ClientOnlyWorkflow/styles.module.scss
@@ -14,14 +14,21 @@
         ". tm . . dartWot"
         ". . domus . nodeRed";
 
+    --_item-width: clamp(2.5rem, 1.7857142857142858rem + 3.571428571428571vw, 5rem);
+    --_item-gap: clamp(0.25rem, 0.17857142857142858rem + 0.35714285714285715vw, 0.5rem);
+    --_item-font-size: clamp(0.35rem, 0.25rem + 0.49999999999999994vw, 0.7rem);
+    --_item-inactive-icon: clamp(1.25rem, 0.9642857142857143rem + 1.4285714285714286vw, 2.25rem);
+    --_item-active-icon: clamp(1rem, 0.7857142857142857rem + 1.0714285714285714vw, 1.75rem);
+    --_item-translate-icon: clamp(0.2rem, 0.14285714285714288rem + 0.2857142857142857vw, 0.4rem);
+
     &__line {
         position: absolute;
     }
 
     .line1 {
-        top: 6rem;
-        left: 6rem;
-        width: 8.25rem;
+        top: clamp(3rem, 2.142857142857143rem + 4.285714285714286vw, 6rem);
+        left: clamp(3rem, 2.142857142857143rem + 4.285714285714286vw, 6rem);
+        width: clamp(5rem, 4.071428571428571rem + 4.642857142857143vw, 8.25rem);
         height: auto;
         stroke-dasharray: 12rem;
         stroke-dashoffset: 12rem;
@@ -29,29 +36,29 @@
     }
 
     .line2 {
-        top: 6rem;
-        left: 14.6rem;
+        top: clamp(3.25rem, 2.5357142857142856rem + 3.571428571428571vw, 5.75rem);
+        left: clamp(8.5rem, 6.757142857142857rem + 8.714285714285714vw, 14.6rem);
         width: auto;
-        height: 14rem;
+        height: clamp(8rem, 6.214285714285714rem + 8.928571428571429vw, 14.25rem);
         stroke-dasharray: 15.5rem;
         stroke-dashoffset: 15.5rem;
         animation: animateLine2 10s ease-in-out infinite 250ms;
     }
 
     .line3 {
-        top: 11rem;
-        left: 22.25rem;
+        top: clamp(6.25rem, 4.892857142857143rem + 6.785714285714286vw, 11rem);
+        left: clamp(12.5rem, 9.714285714285715rem + 13.928571428571429vw, 22.25rem);
         width: auto;
-        height: 9rem;
-        stroke-dasharray: 10rem;
-        stroke-dashoffset: 10rem;
+        height: clamp(5rem, 3.857142857142857rem + 5.714285714285714vw, 9rem);
+        stroke-dasharray: 10.5rem;
+        stroke-dashoffset: 10.5rem;
         animation: animateLine3 10s ease-in-out infinite 250ms;
     }
 
     .line4 {
-        top: 20.5rem;
-        left: 6rem;
-        width: 2.75rem;
+        left: clamp(3.25rem, 2.4642857142857144rem + 3.9285714285714284vw, 6rem);
+        top: clamp(11.25rem, 8.607142857142858rem + 13.214285714285715vw, 20.5rem);
+        width: clamp(2rem, 1.7857142857142856rem + 1.0714285714285714vw, 2.75rem);
         height: auto;
         stroke-dasharray: 5rem;
         stroke-dashoffset: 5rem;
@@ -59,20 +66,20 @@
     }
 
     .line5 {
-        top: 14.5rem;
-        left: 9.5rem;
+        top: clamp(8.25rem, 6.464285714285714rem + 8.928571428571429vw, 14.5rem);
+        left: clamp(5.5rem, 4.357142857142858rem + 5.714285714285714vw, 9.5rem);
         width: auto;
-        height: 8.5rem;
+        height: clamp(4.75rem, 3.678571428571429rem + 5.357142857142857vw, 8.5rem);
         stroke-dasharray: 14.5rem;
         stroke-dashoffset: 14.5rem;
         animation: animateLine5 10s ease-in-out infinite 5.25s;
     }
 
     .line6 {
-        top: 14.5rem;
-        left: 22.5rem;
+        top: clamp(8.25rem, 6.464285714285714rem + 8.928571428571429vw, 14.5rem);
+        left: clamp(12.5rem, 9.642857142857142rem + 14.285714285714285vw, 22.5rem);
         width: auto;
-        height: 8.5rem;
+        height: clamp(5rem, 4rem + 5vw, 8.5rem);
         stroke-dasharray: 10.5rem;
         stroke-dashoffset: 10.5rem;
         animation: animateLine6 10s ease-in-out infinite 5.25s;
@@ -225,7 +232,7 @@
 
     &__item {
         aspect-ratio: 1/1;
-        min-width: clamp(4rem, 2.857142857142857rem + 2.380952380952381vw, 5rem);
+        min-width: var(--_item-width);
         background-color: var(--neutral-clr-75);
         border-radius: 5px;
         border: 1px solid var(--neutral-clr-300);
@@ -238,8 +245,8 @@
         gap: 0;
 
         p {
-            font-size: 0.6rem;
-            font-size: clamp(0.6rem, 0.4857142857142857rem + 0.23809523809523803vw, 0.7rem);
+            font-size: 0.35rem;
+            font-size: var(--_item-font-size);
             line-height: normal;
             font-weight: var(--fw-bold);
             font-family: var(--ff-primary);
@@ -249,9 +256,9 @@
         }
 
         .icon {
-            transform: translateY(.4rem);
-            font-size: 1.75rem;
-            font-size: clamp(1.75rem, 1.1785714285714286rem + 1.1904761904761905vw, 2.25rem);
+            transform: translateY(var(--_item-translate-icon));
+            font-size: 1.25rem;
+            font-size: var(--_item-inactive-icon);
             transition: all 350ms ease-in-out;
 
             path {
@@ -272,23 +279,22 @@
         box-shadow: 0 0 0 var(--box-shadow-clr);
         gap: 0;
     }
-
     4% {
         border-color: var(--neutral-clr-75);
         background-color: var(--neutral-clr-50);
         transform: scale(1.05);
         box-shadow: 3px 3px 10px var(--box-shadow-clr);
-        gap: .5rem;
+        gap: 0.25rem;
+        gap: var(--_item-gap);
     }
-
     30% {
         border-color: var(--neutral-clr-75);
         background-color: var(--neutral-clr-50);
         transform: scale(1.05);
         box-shadow: 3px 3px 10px var(--box-shadow-clr);
-        gap: .5rem;
+        gap: 0.25rem;
+        gap: var(--_item-gap);
     }
-
     38% {
         border-color: var(--neutral-clr-300);
         background-color: var(--neutral-clr-75);
@@ -296,7 +302,6 @@
         box-shadow: 0 0 0 var(--box-shadow-clr);
         gap: 0;
     }
-
     100% {
         border-color: var(--neutral-clr-300);
         background-color: var(--neutral-clr-75);
@@ -308,33 +313,29 @@
 
 @keyframes showItemIconSvg {
     0% {
-        transform: translateY(.4rem);
-        font-size: 1.75rem;
-        font-size: clamp(1.75rem, 1.1785714285714286rem + 1.1904761904761905vw, 2.25rem);
+        transform: translateY(var(--_item-translate-icon));
+        font-size: 1.25rem;
+        font-size: var(--_item-inactive-icon);
     }
-
     6% {
         transform: translateY(0);
-        font-size: 1.5rem;
-        font-size: clamp(1.5rem, 1.2142857142857144rem + 0.5952380952380952vw, 1.75rem);
+        font-size: 1rem;
+        font-size: var(--_item-active-icon);
     }
-
     30% {
         transform: translateY(0);
-        font-size: 1.5rem;
-        font-size: clamp(1.5rem, 1.2142857142857144rem + 0.5952380952380952vw, 1.75rem);
+        font-size: 1rem;
+        font-size: var(--_item-active-icon);
     }
-
     38% {
-        transform: translateY(.4rem);
-        font-size: 1.75rem;
-        font-size: clamp(1.75rem, 1.1785714285714286rem + 1.1904761904761905vw, 2.25rem);
+        transform: translateY(var(--_item-translate-icon));
+        font-size: 1.25rem;
+        font-size: var(--_item-inactive-icon);
     }
-
     100% {
-        transform: translateY(.4rem);
-        font-size: 1.75rem;
-        font-size: clamp(1.75rem, 1.1785714285714286rem + 1.1904761904761905vw, 2.25rem);
+        transform: translateY(var(--_item-translate-icon));
+        font-size: 1.25rem;
+        font-size: var(--_item-inactive-icon);
     }
 }
 
@@ -343,22 +344,18 @@
         stroke-width: 20px;
         fill: var(--neutral-clr-75);
     }
-
     4% {
         stroke-width: 0;
         fill: var(--ifm-color-primary);
     }
-
     30% {
         stroke-width: 0;
         fill: var(--ifm-color-primary);
     }
-
     38% {
         stroke-width: 20px;
         fill: var(--neutral-clr-75);
     }
-
     100% {
         stroke-width: 20px;
         fill: var(--neutral-clr-75);
@@ -370,22 +367,18 @@
         stroke-width: 20px;
         fill: var(--neutral-clr-75);
     }
-
     4% {
         stroke-width: 0;
         fill: var(--ifm-color-secondary);
     }
-
     30% {
         stroke-width: 0;
         fill: var(--ifm-color-secondary);
     }
-
     38% {
         stroke-width: 20px;
         fill: var(--neutral-clr-75);
     }
-
     100% {
         stroke-width: 20px;
         fill: var(--neutral-clr-75);
@@ -397,22 +390,18 @@
         transform: translateY(.9rem);
         opacity: 0;
     }
-
     4% {
         transform: translateY(0);
         opacity: 1;
     }
-
     30% {
         transform: translateY(0);
         opacity: 1;
     }
-
     38% {
         transform: translateY(.9rem);
         opacity: 0;
     }
-
     100% {
         transform: translateY(.9rem);
         opacity: 0;
@@ -423,19 +412,15 @@
     0% {
         stroke-dashoffset: 12rem;
     }
-
     4% {
         stroke-dashoffset: 0;
     }
-
     30% {
         stroke-dashoffset: 0;
     }
-
     38% {
         stroke-dashoffset: -12rem;
     }
-
     100% {
         stroke-dashoffset: -12rem;
     }
@@ -445,19 +430,15 @@
     0% {
         stroke-dashoffset: 15.5rem;
     }
-
     4% {
         stroke-dashoffset: 0;
     }
-
     30% {
         stroke-dashoffset: 0;
     }
-
     38% {
         stroke-dashoffset: -15.5rem;
     }
-
     100% {
         stroke-dashoffset: -15.5rem;
     }
@@ -465,23 +446,19 @@
 
 @keyframes animateLine3 {
     0% {
-        stroke-dashoffset: 10rem;
+        stroke-dashoffset: 10.5rem;
     }
-
     4% {
         stroke-dashoffset: 0;
     }
-
     30% {
         stroke-dashoffset: 0;
     }
-
     38% {
-        stroke-dashoffset: -10rem;
+        stroke-dashoffset: -10.5rem;
     }
-
     100% {
-        stroke-dashoffset: -10rem;
+        stroke-dashoffset: -10.5rem;
     }
 }
 
@@ -489,19 +466,15 @@
     0% {
         stroke-dashoffset: 5rem;
     }
-
     4% {
         stroke-dashoffset: 0;
     }
-
     30% {
         stroke-dashoffset: 0;
     }
-
     38% {
         stroke-dashoffset: -5rem;
     }
-
     100% {
         stroke-dashoffset: -5rem;
     }
@@ -511,19 +484,15 @@
     0% {
         stroke-dashoffset: 14.5rem;
     }
-
     4% {
         stroke-dashoffset: 0;
     }
-
     30% {
         stroke-dashoffset: 0;
     }
-
     38% {
         stroke-dashoffset: -14.5rem;
     }
-
     100% {
         stroke-dashoffset: -14.5rem;
     }
@@ -533,19 +502,15 @@
     0% {
         stroke-dashoffset: 10.5rem;
     }
-
     4% {
         stroke-dashoffset: 0;
     }
-
     30% {
         stroke-dashoffset: 0;
     }
-
     38% {
         stroke-dashoffset: -10.5rem;
     }
-
     100% {
         stroke-dashoffset: -10.5rem;
     }
diff --git a/src/components/FeedbackPrompt/styles.module.scss b/src/components/FeedbackPrompt/styles.module.scss
index d0d4fc2..c1ca54b 100644
--- a/src/components/FeedbackPrompt/styles.module.scss
+++ b/src/components/FeedbackPrompt/styles.module.scss
@@ -20,6 +20,7 @@
         width: 12rem;
         height: 1.5rem;
         overflow: hidden;
+        pointer-events: none;
 
         p {
             position: absolute;
diff --git a/src/components/PlatformWorkflow/index.js b/src/components/PlatformWorkflow/index.js
new file mode 100644
index 0000000..a7c7944
--- /dev/null
+++ b/src/components/PlatformWorkflow/index.js
@@ -0,0 +1,171 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faQuestion, faFile, faLaptopCode, faHouse, faScrewdriverWrench, faDisplay, faMobile, faCubes } from '@fortawesome/free-solid-svg-icons'
+
+export default function PlatformWorkflow() {
+    return (
+        <div className={styles.PlatformWorkflow}>
+            <svg width="auto" height="auto" viewBox="0 0 38 128" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line1)}>
+                <path d="M37 128V11C37 5.47716 32.5228 1 27 1H0" stroke="url(#paint0_linear_16_342)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_342" x1="18.5" y1="1" x2="18.5" y2="128" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#D65CAB" />
+                        <stop offset="1" stop-color="#33B8A4" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 35 127" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line2)}>
+                <path d="M1 127V11C1 5.47715 5.47715 1 11 1H35" stroke="url(#paint0_linear_16_341)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_341" x1="18" y1="1" x2="18" y2="127" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 94 70" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line3)}>
+                <path d="M0 69H24.6316C30.1544 69 34.6316 64.5228 34.6316 59V11C34.6316 5.47715 39.1087 1 44.6316 1H94" stroke="url(#paint0_linear_16_348)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_348" x1="47" y1="1" x2="47" y2="69" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#D65CAB" />
+                        <stop offset="1" stop-color="#33B8A4" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 94 1" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line4)}>
+                <path d="M93.5 0.5H0.5" stroke="url(#paint0_linear_16_346)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_346" x1="47" y1="0.5" x2="47" y2="1.5" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 94 69" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line5)}>
+                <path d="M0 1H49C54.5228 1 59 5.47715 59 11V58C59 63.5228 63.4772 68 69 68H94" stroke="url(#paint0_linear_16_350)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_350" x1="47" y1="1" x2="47" y2="68" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                        <stop offset="1" stop-color="#D65CAB" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 39 127" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line6)}>
+                <path d="M1 0V116C1 121.523 5.47715 126 11 126H39" stroke="url(#paint0_linear_16_343)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_343" x1="20" y1="0" x2="20" y2="126" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 42 126" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line7)}>
+                <path d="M41 0V115C41 120.523 36.5228 125 31 125H0" stroke="url(#paint0_linear_16_344)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_344" x1="20.5" y1="0" x2="20.5" y2="125" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                        <stop offset="1" stop-color="#D65CAB" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line8)}>
+                <path d="M94 1H64.2116C58.6888 1 54.2116 5.47715 54.2116 11V61C54.2116 66.5228 49.7345 71 44.2116 71H0" stroke="url(#paint0_linear_16_347)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_347" x1="47" y1="1" x2="47" y2="71" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 94 1" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line9)}>
+                <path d="M93.5 0.5H0.5" stroke="url(#paint0_linear_16_349)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_349" x1="0.5" y1="0.5" x2="93.5" y2="0.5" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#D65CAB" />
+                        <stop offset="1" stop-color="#33B8A4" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 94 64" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.PlatformWorkflow__line, styles.line10)}>
+                <path d="M94 63H41.8387C36.3159 63 31.8387 58.5228 31.8387 53V11C31.8387 5.47715 27.3616 1 21.8387 1H0" stroke="url(#paint0_linear_16_345)" />
+                <defs>
+                    <linearGradient id="paint0_linear_16_345" x1="47" y1="1" x2="47" y2="63" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+
+            <div className={clsx(styles.PlatformWorkflow__item, styles.thing1)}>
+                <svg width="auto" height="auto" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.icon, styles.thingwebLogo)}>
+                    <path d="M11.2439 25C11.2362 24.4834 11.0511 24.0053 10.9509 23.5041C10.92 23.3653 10.8275 23.3268 10.7041 23.3113C10.4111 23.2651 10.1104 23.2496 9.84052 23.1417C9.42414 22.9721 9.1851 23.1186 8.96149 23.4655C8.76872 23.7663 8.60679 24.1904 8.29065 24.2752C7.9745 24.36 7.64294 24.0361 7.31909 23.8896C6.94126 23.7277 6.57885 23.5427 6.20102 23.373C6.01596 23.2959 5.95427 23.188 6.01596 22.9875C6.10849 22.6713 6.14704 22.3321 6.24728 22.0236C6.33981 21.746 6.28584 21.5687 6.03909 21.4145C5.77692 21.2525 5.53018 21.0598 5.31427 20.8439C5.10608 20.6434 4.92873 20.6434 4.70512 20.7899C4.69741 20.7976 4.68199 20.8053 4.67428 20.8053C4.28874 20.9672 3.89549 21.3991 3.55621 21.2911C3.21693 21.1831 2.99332 20.6897 2.73115 20.3658C2.50754 20.0959 2.29935 19.8183 2.07573 19.5562C1.95236 19.4097 1.95236 19.3017 2.07573 19.1552C2.28393 18.9239 2.44585 18.6617 2.66947 18.4458C2.92392 18.1991 2.9779 17.9677 2.74658 17.6824C2.68489 17.6053 2.6232 17.5128 2.60007 17.4126C2.45356 16.6646 1.96778 16.5181 1.2661 16.5952C0.595259 16.6646 0.587548 16.6106 0.425621 15.9398C0.302248 15.4155 0.194297 14.8911 0.0477916 14.3745C-0.0138949 14.1586 0.0477916 14.0815 0.22514 14.0044C0.564416 13.8579 0.895981 13.6805 1.23526 13.534C1.39718 13.4646 1.46658 13.3721 1.45887 13.187C1.43574 12.7861 1.44345 12.3928 1.45887 11.9919C1.46658 11.8068 1.40489 11.7143 1.23526 11.6526C0.88827 11.5138 0.556705 11.3442 0.217429 11.1976C0.0400808 11.1205 -0.0370273 11.028 0.0169484 10.8198C0.178875 10.1644 0.31767 9.50127 0.456465 8.83814C0.495019 8.64537 0.587548 8.56055 0.79574 8.56826C1.15815 8.58368 1.51285 8.56055 1.87525 8.57597C2.09116 8.58368 2.19911 8.51429 2.27622 8.31381C2.42272 7.95911 2.59236 7.61212 2.762 7.27285C2.84682 7.11092 2.84682 7.00297 2.71573 6.86417C2.46128 6.58658 2.25308 6.27815 1.99863 6.00827C1.8367 5.83863 1.85212 5.73068 1.99092 5.56105C2.42272 5.03671 2.84682 4.50466 3.2632 3.96491C3.38657 3.80298 3.49452 3.76443 3.67958 3.87238C4.00344 4.04973 4.35042 4.19623 4.67428 4.37358C4.8362 4.4584 4.94416 4.45069 5.08295 4.32732C5.37596 4.07286 5.66897 3.82611 5.98512 3.61021C6.17018 3.47913 6.19331 3.34033 6.13933 3.14756C6.0468 2.80058 5.96198 2.45359 5.86174 2.1066C5.80777 1.92154 5.85403 1.79817 6.0468 1.71335C6.67138 1.42034 7.29595 1.11962 7.91282 0.811187C8.06703 0.734078 8.19812 0.718657 8.29065 0.896005C8.29836 0.903716 8.30607 0.919138 8.31378 0.926849C8.60679 1.26612 8.78414 1.80588 9.17739 1.92154C9.54751 2.02949 10.0102 1.77504 10.442 1.69793C10.6887 1.65938 10.8198 1.54371 10.8506 1.28926C10.9046 0.949981 10.9894 0.610705 11.0511 0.27143C11.082 0.0863704 11.1591 -0.0138702 11.375 0.00155142C11.7065 0.0246839 12.0458 0.016973 12.3774 0.00155142C12.5701 -0.00615939 12.6473 0.0478163 12.6473 0.256008C12.6395 1.58227 12.6395 2.90082 12.6473 4.22708C12.6473 4.48153 12.5162 4.47382 12.3388 4.48153C8.81498 4.61262 6.3321 6.33213 4.98271 9.55525C3.10898 14.0506 5.90801 19.2554 10.6579 20.2887C11.213 20.4121 11.7682 20.4738 12.3388 20.466C12.5393 20.466 12.6395 20.4969 12.6395 20.7359C12.6318 22.0622 12.6318 23.3807 12.6395 24.707C12.6395 24.8149 12.6087 24.9075 12.5547 24.9923C12.1152 25 11.6834 25 11.2439 25Z" fill="#33B8A4" />
+                    <path d="M12.4933 14.7757C12.4933 16.2253 12.4933 17.6827 12.4933 19.1323C12.4933 19.2094 12.4933 19.2865 12.4933 19.3636C12.4856 19.4716 12.5241 19.6027 12.339 19.6104C12.154 19.6181 12.1771 19.4947 12.1771 19.3791C12.1771 19.1092 12.1771 18.8393 12.1771 18.5694C12.1771 17.621 12.1771 16.6649 12.1771 15.7164C12.1771 15.0687 11.7993 14.6909 11.1593 14.6678C10.6427 14.6523 10.5578 14.5675 10.5578 14.0586C10.5578 13.5034 10.5656 12.956 10.5578 12.4008C10.5578 12.2311 10.5964 12.1309 10.7429 12.0229C11.167 11.6991 11.2056 11.2056 10.8663 10.8509C10.5501 10.5193 10.0181 10.5348 9.70966 10.8895C9.40123 11.2519 9.47063 11.7608 9.90243 12.0461C10.0644 12.154 10.0798 12.2697 10.0798 12.4316C10.0798 12.9868 10.0721 13.5343 10.0798 14.0894C10.0875 14.8065 10.3882 15.1227 11.0976 15.1535C11.5834 15.1767 11.7145 15.3077 11.7145 15.7781C11.7145 16.9502 11.7068 18.1145 11.7222 19.2865C11.7222 19.5179 11.6913 19.5795 11.4292 19.541C10.5116 19.4022 10.5039 19.4176 10.5039 18.5077C10.5039 18.1222 10.5116 17.7367 10.5039 17.3511C10.4885 16.8036 10.126 16.4412 9.57858 16.4412C8.69183 16.4335 7.80509 16.4335 6.91835 16.4412C6.71016 16.4412 6.59449 16.3796 6.48654 16.2022C6.21666 15.7318 6.00076 15.2461 5.8157 14.7371C5.73859 14.5135 5.76173 14.4056 6.0316 14.4133C6.30148 14.421 6.5251 14.4056 6.71787 14.6909C6.97232 15.0687 7.50437 15.0687 7.83593 14.7449C8.15208 14.4364 8.15979 13.9584 7.85135 13.6422C7.55063 13.3261 6.98003 13.3106 6.73329 13.6808C6.44799 14.0972 6.07016 13.9044 5.73088 13.9352C5.60751 13.9429 5.58438 13.8041 5.56896 13.7039C5.51498 13.249 5.45329 12.7863 5.46871 12.3237C5.47643 12.1463 5.55353 12.1155 5.70775 12.1155C6.57136 12.1232 7.42726 12.1155 8.29087 12.1155C8.56846 12.1155 8.72268 12.2697 8.72268 12.5473C8.73039 13.141 8.72268 13.727 8.73039 14.3208C8.73039 14.4827 8.63015 14.5367 8.52991 14.6215C8.15208 14.9453 8.12123 15.4851 8.46051 15.809C8.78436 16.1174 9.30099 16.0865 9.58629 15.7473C9.91014 15.3694 9.84074 14.8759 9.39352 14.5906C9.21617 14.475 9.19304 14.3593 9.19304 14.182C9.20075 13.6576 9.20075 13.1256 9.19304 12.6013C9.18533 11.9921 8.84605 11.6451 8.2369 11.6374C7.44268 11.6297 6.64076 11.6297 5.84654 11.6374C5.62293 11.6374 5.50727 11.5988 5.56124 11.3367C6.13956 8.55308 7.75883 6.69477 10.4422 5.73863C10.8046 5.60755 10.8894 5.70779 10.8509 6.05477C10.8277 6.2861 10.8354 6.51742 10.8509 6.74875C10.8663 7.09573 10.8586 7.38874 10.5039 7.62778C10.1492 7.86681 10.2032 8.41428 10.5193 8.715C10.8354 9.01573 11.3212 9.0003 11.6219 8.68416C11.915 8.36802 11.9304 7.84368 11.5834 7.58923C11.3444 7.41188 11.3058 7.22682 11.3135 6.97236C11.3212 6.5714 11.3212 6.17815 11.3135 5.77718C11.3058 5.59213 11.3675 5.50731 11.568 5.48417C12.4933 5.37622 12.4933 5.36851 12.4933 6.30923C12.4933 7.27308 12.4856 8.23693 12.501 9.20079C12.501 9.43211 12.447 9.50922 12.2003 9.50922C11.2904 9.4938 10.3728 9.50151 9.46291 9.50922C9.3087 9.50922 9.21617 9.46295 9.11593 9.33187C8.79207 8.90006 8.32171 8.8538 7.95931 9.19307C7.61232 9.52464 7.61232 10.0336 7.96702 10.342C8.32171 10.6504 8.85376 10.5887 9.13135 10.1646C9.24701 9.98729 9.37038 9.96416 9.54002 9.96416C10.4113 9.97187 11.2904 9.97958 12.1617 9.95644C12.4393 9.94873 12.501 10.0413 12.501 10.3034C12.4856 11.7993 12.4933 13.2875 12.4933 14.7757Z" fill="#33B8A4" />
+                    <path d="M25.2311 10.5809C26.3492 10.5809 27.4672 10.5809 28.5853 10.5809C28.7626 10.5809 28.9169 10.5886 29.0634 10.4267C29.2484 10.2185 29.5029 10.2185 29.7111 10.4344C29.8961 10.6272 29.8961 10.8662 29.7419 11.0667C29.5646 11.2903 29.3024 11.298 29.0942 11.1206C28.9323 10.9818 28.7781 10.9818 28.6007 10.9818C26.2489 10.9818 23.8971 10.9818 21.553 10.9973C21.26 10.9973 21.1444 10.9356 21.0595 10.6349C20.1651 7.43488 18.06 5.50717 14.8446 4.75922C14.4051 4.65898 13.9579 4.62814 13.5107 4.63585C13.2716 4.64356 13.1714 4.58959 13.1714 4.31971C13.1868 3.032 13.1791 1.75201 13.1714 0.464304C13.1714 0.263823 13.2022 0.163582 13.4413 0.171293C16.302 0.271533 18.9622 0.957795 21.2061 2.83923C21.9232 3.44068 22.4783 4.1732 22.9101 5.00597C22.995 5.17561 23.0875 5.32211 23.2803 5.42235C23.5193 5.53802 23.581 5.76934 23.4653 6.01609C23.3497 6.26283 23.126 6.33994 22.8793 6.25512C22.6326 6.1703 22.4938 5.93898 22.594 5.69994C22.7019 5.44549 22.594 5.28356 22.4938 5.09079C21.3834 3.09369 19.6253 1.93707 17.4894 1.26623C16.3405 0.90382 15.1685 0.649363 13.9579 0.564544C13.6649 0.541412 13.5261 0.603098 13.5569 0.934663C13.5801 1.22767 13.5801 1.5284 13.5569 1.82141C13.5415 2.08357 13.634 2.15297 13.8962 2.19152C16.0167 2.48454 18.0292 3.07056 19.7333 4.44308C20.9439 5.41464 21.8923 6.5944 22.4938 8.03632C22.6248 8.35246 22.7868 8.44499 23.1106 8.42957C23.8431 8.40644 24.5757 8.42186 25.3082 8.42186C25.5935 8.42186 25.8788 8.4527 26.141 8.24451C26.3337 8.09029 26.5651 8.19825 26.7116 8.39102C26.8658 8.5915 26.8349 8.8074 26.6653 8.98475C26.4725 9.17752 26.2181 9.20836 26.0484 9.01559C25.8634 8.81511 25.6552 8.81511 25.4239 8.81511C24.4986 8.81511 23.5733 8.79969 22.648 8.81511C22.4321 8.81511 22.3395 8.738 22.2624 8.54523C21.0673 5.57657 18.862 3.76453 15.7931 2.99345C15.1685 2.83923 14.5439 2.63104 13.8885 2.59249C13.6032 2.57707 13.5569 2.65417 13.5646 2.89321C13.5723 3.18622 13.5955 3.48694 13.5569 3.77995C13.5107 4.15778 13.6957 4.23489 14.0119 4.25031C14.8523 4.28115 15.662 4.48164 16.4331 4.79778C18.9237 5.82332 20.5661 7.62765 21.3526 10.2031C21.4451 10.4961 21.5607 10.5963 21.8769 10.5886C22.995 10.5655 24.113 10.5809 25.2311 10.5809Z" fill="#33B8A4" />
+                    <path d="M24.0671 12.4312C24.7765 12.4312 25.4782 12.4312 26.1876 12.4312C26.4729 12.4312 26.7582 12.4543 27.0203 12.2538C27.2208 12.1073 27.4753 12.169 27.6218 12.3926C27.7606 12.5931 27.7374 12.8244 27.5601 12.9941C27.375 13.1714 27.1206 13.2177 26.9355 13.0326C26.735 12.8399 26.5114 12.8167 26.2647 12.8167C24.8382 12.8167 23.4117 12.8244 21.9852 12.809C21.7153 12.809 21.669 12.9247 21.6536 13.1483C21.4608 16.4948 19.1013 19.4712 15.8628 20.4659C15.1842 20.674 14.498 20.8205 13.7886 20.8283C13.6112 20.8283 13.5341 20.8745 13.5418 21.0673C13.5495 21.476 13.5495 21.8924 13.5418 22.301C13.5418 22.5015 13.6421 22.5324 13.8117 22.5092C14.3052 22.4321 14.791 22.3396 15.2768 22.2239C15.9862 22.0466 16.6956 21.9001 17.3664 21.6071C19.7259 20.5815 21.4069 18.9006 22.363 16.4948C22.5866 15.9396 22.7562 15.369 22.9644 14.8138C23.0415 14.6133 23.1264 14.5671 23.3191 14.5748C23.643 14.5902 23.9591 14.5748 24.283 14.5671C24.5374 14.5671 24.7688 14.5825 24.977 14.3589C25.1466 14.1738 25.4088 14.2278 25.5938 14.4283C25.7635 14.6133 25.7712 14.8293 25.6092 15.022C25.4396 15.2148 25.2237 15.2765 24.9924 15.13C24.4912 14.8138 23.9437 15.0143 23.4271 14.9989C23.2652 14.9912 23.2497 15.2842 23.2035 15.4461C22.7177 17.0345 21.9929 18.4842 20.844 19.6948C19.4714 21.1521 17.7982 22.0851 15.8397 22.5401C15.1534 22.6943 14.4748 22.8948 13.7654 22.9256C13.565 22.9333 13.5418 23.049 13.5418 23.2032C13.5495 23.5502 13.5573 23.8972 13.5341 24.2442C13.5187 24.4909 13.6112 24.5526 13.8426 24.5372C14.8295 24.4832 15.8011 24.329 16.7572 24.0668C18.2146 23.6658 19.6025 23.1338 20.7823 22.1468C21.5534 21.5068 22.1625 20.7357 22.6406 19.8567C22.71 19.7256 22.7331 19.61 22.6714 19.4634C22.5635 19.2013 22.656 18.9622 22.9182 18.8543C23.1726 18.7541 23.4117 18.8312 23.5273 19.0933C23.643 19.3555 23.5427 19.5714 23.296 19.7025C23.1881 19.7565 23.1109 19.8181 23.0493 19.9261C21.8618 22.2702 19.8493 23.5579 17.4127 24.2904C16.1327 24.6682 14.8295 24.9381 13.4879 24.9227C13.2103 24.9227 13.1486 24.8456 13.1486 24.5757C13.1563 23.3034 13.1563 22.0311 13.1409 20.7589C13.1409 20.5198 13.1948 20.435 13.457 20.4273C17.2739 20.3502 20.4199 17.7131 21.1524 13.9811C21.2372 13.5647 21.2912 13.1483 21.2526 12.7242C21.2295 12.4929 21.3066 12.4158 21.5457 12.4158C22.3938 12.4389 23.2343 12.4312 24.0671 12.4312Z" fill="#33B8A4" />
+                    <path d="M15.6007 12.7549C16.1404 12.7549 16.6802 12.7626 17.2199 12.7472C17.4358 12.7395 17.4975 12.8243 17.4744 13.017C17.3819 13.8267 17.2353 14.6209 16.9192 15.3765C16.8729 15.4922 16.8344 15.577 16.6416 15.5076C15.8166 15.2146 14.9684 14.9833 14.0739 15.0296C13.8426 15.045 13.7038 14.9447 13.7115 14.6672C13.7346 14.112 13.7269 13.5645 13.7115 13.0093C13.7038 12.8088 13.7732 12.7395 13.9737 12.7472C14.5211 12.7626 15.0609 12.7549 15.6007 12.7549Z" fill="#33B8A4" />
+                    <path d="M15.5851 12.1844C15.0454 12.1844 14.5056 12.1767 13.9736 12.1844C13.7962 12.1844 13.7268 12.1381 13.7268 11.9454C13.7345 11.3285 13.7345 10.7193 13.7268 10.1025C13.7268 9.92513 13.8116 9.87115 13.9581 9.90199C14.8372 10.0948 15.7008 9.90199 16.549 9.72464C16.8574 9.65525 16.9191 9.77091 17.0039 9.99452C17.2506 10.6345 17.3509 11.3131 17.4588 11.9839C17.4897 12.1844 17.3663 12.1844 17.2275 12.1767C16.6878 12.1844 16.1326 12.1844 15.5851 12.1844Z" fill="#33B8A4" />
+                    <path d="M20.0574 12.8556C19.9957 14.1818 19.5331 15.3384 18.7774 16.3948C18.6618 16.549 18.5615 16.5953 18.3842 16.4411C18.1683 16.2483 17.9061 16.1095 17.6517 15.9707C17.4743 15.8782 17.4203 15.8088 17.5051 15.6006C17.8059 14.8449 18.0449 14.0816 18.0526 13.2488C18.0526 12.9481 18.1374 12.7013 18.5538 12.7476C18.9856 12.7939 19.4251 12.7553 19.8569 12.763C19.9418 12.7553 20.0651 12.7091 20.0574 12.8556Z" fill="#33B8A4" />
+                    <path d="M19.1087 12.1618C18.7771 12.1618 18.3607 12.2852 18.1371 12.1309C17.9058 11.969 18.0369 11.5141 17.9752 11.1979C17.8749 10.6967 17.7516 10.2032 17.5742 9.73288C17.4971 9.5324 17.5048 9.44758 17.713 9.36277C18.0677 9.21626 18.407 9.03891 18.7385 8.85385C18.8928 8.76132 18.9467 8.79988 19.0315 8.93867C19.633 9.87939 19.9646 10.9126 20.0725 12.0153C20.0879 12.1849 20.0108 12.2081 19.8797 12.2003C19.6253 12.1926 19.3631 12.2003 19.1087 12.2003C19.1087 12.1772 19.1087 12.1695 19.1087 12.1618Z" fill="#33B8A4" />
+                    <path d="M13.7268 18.9162C13.7268 17.8367 13.7268 16.8189 13.7268 15.7933C13.7268 15.6314 13.8039 15.5929 13.9427 15.6083C14.7755 15.6777 15.6005 15.7856 16.3947 16.0786C16.495 16.1172 16.5798 16.1558 16.495 16.2945C15.8164 17.4126 14.9374 18.2916 13.7268 18.9162Z" fill="#33B8A4" />
+                    <path d="M16.5719 9.06964C15.7623 9.30868 14.9449 9.36265 14.1199 9.33181C13.8731 9.3241 13.7035 9.24699 13.7112 8.92314C13.7343 8.05181 13.7189 7.1882 13.7189 6.2552C15.0066 6.91061 15.9088 7.85904 16.5719 9.06964Z" fill="#33B8A4" />
+                    <path d="M10.0176 19.1627C8.79157 18.6924 7.82001 17.9598 6.96411 16.9034C7.58098 16.9034 8.12073 16.9034 8.66049 16.9034C8.9535 16.9034 9.25422 16.8957 9.54723 16.9034C9.80169 16.9112 10.0099 17.0268 10.0176 17.3121C10.0253 17.9136 10.0176 18.5073 10.0176 19.1627Z" fill="#33B8A4" />
+                    <path d="M14.6753 6.03119C15.8319 6.27794 16.8343 6.70974 17.6825 7.45769C17.9293 7.6736 18.2223 7.84323 18.3919 8.14395C18.469 8.27504 18.4459 8.3213 18.3302 8.36757C18.2917 8.38299 18.2608 8.39841 18.23 8.41383C17.9215 8.56034 17.6054 8.83793 17.3047 8.82251C16.9731 8.79937 16.9114 8.3213 16.7109 8.05142C16.2175 7.39601 15.6931 6.77914 15.0069 6.30878C14.9066 6.23938 14.8141 6.14685 14.6753 6.03119Z" fill="#33B8A4" />
+                    <path d="M15.1453 18.8082C15.9086 18.145 16.5409 17.4048 17.0421 16.5412C17.1115 16.4178 17.1886 16.4255 17.2966 16.4795C17.3891 16.5335 17.4739 16.5797 17.5587 16.6337C18.353 17.1503 18.3298 16.9961 17.6359 17.5976C16.9187 18.2067 16.0937 18.6308 15.1453 18.8082Z" fill="#33B8A4" />
+                </svg>
+                <p>Thing</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.thing2)}>
+                <FontAwesomeIcon icon={faQuestion} className={styles.icon} />
+                <p>Thing</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.thingweb)}>
+                <svg width="auto" height="auto" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.icon, styles.thingwebLogo)}>
+                    <path d="M11.2439 25C11.2362 24.4834 11.0511 24.0053 10.9509 23.5041C10.92 23.3653 10.8275 23.3268 10.7041 23.3113C10.4111 23.2651 10.1104 23.2496 9.84052 23.1417C9.42414 22.9721 9.1851 23.1186 8.96149 23.4655C8.76872 23.7663 8.60679 24.1904 8.29065 24.2752C7.9745 24.36 7.64294 24.0361 7.31909 23.8896C6.94126 23.7277 6.57885 23.5427 6.20102 23.373C6.01596 23.2959 5.95427 23.188 6.01596 22.9875C6.10849 22.6713 6.14704 22.3321 6.24728 22.0236C6.33981 21.746 6.28584 21.5687 6.03909 21.4145C5.77692 21.2525 5.53018 21.0598 5.31427 20.8439C5.10608 20.6434 4.92873 20.6434 4.70512 20.7899C4.69741 20.7976 4.68199 20.8053 4.67428 20.8053C4.28874 20.9672 3.89549 21.3991 3.55621 21.2911C3.21693 21.1831 2.99332 20.6897 2.73115 20.3658C2.50754 20.0959 2.29935 19.8183 2.07573 19.5562C1.95236 19.4097 1.95236 19.3017 2.07573 19.1552C2.28393 18.9239 2.44585 18.6617 2.66947 18.4458C2.92392 18.1991 2.9779 17.9677 2.74658 17.6824C2.68489 17.6053 2.6232 17.5128 2.60007 17.4126C2.45356 16.6646 1.96778 16.5181 1.2661 16.5952C0.595259 16.6646 0.587548 16.6106 0.425621 15.9398C0.302248 15.4155 0.194297 14.8911 0.0477916 14.3745C-0.0138949 14.1586 0.0477916 14.0815 0.22514 14.0044C0.564416 13.8579 0.895981 13.6805 1.23526 13.534C1.39718 13.4646 1.46658 13.3721 1.45887 13.187C1.43574 12.7861 1.44345 12.3928 1.45887 11.9919C1.46658 11.8068 1.40489 11.7143 1.23526 11.6526C0.88827 11.5138 0.556705 11.3442 0.217429 11.1976C0.0400808 11.1205 -0.0370273 11.028 0.0169484 10.8198C0.178875 10.1644 0.31767 9.50127 0.456465 8.83814C0.495019 8.64537 0.587548 8.56055 0.79574 8.56826C1.15815 8.58368 1.51285 8.56055 1.87525 8.57597C2.09116 8.58368 2.19911 8.51429 2.27622 8.31381C2.42272 7.95911 2.59236 7.61212 2.762 7.27285C2.84682 7.11092 2.84682 7.00297 2.71573 6.86417C2.46128 6.58658 2.25308 6.27815 1.99863 6.00827C1.8367 5.83863 1.85212 5.73068 1.99092 5.56105C2.42272 5.03671 2.84682 4.50466 3.2632 3.96491C3.38657 3.80298 3.49452 3.76443 3.67958 3.87238C4.00344 4.04973 4.35042 4.19623 4.67428 4.37358C4.8362 4.4584 4.94416 4.45069 5.08295 4.32732C5.37596 4.07286 5.66897 3.82611 5.98512 3.61021C6.17018 3.47913 6.19331 3.34033 6.13933 3.14756C6.0468 2.80058 5.96198 2.45359 5.86174 2.1066C5.80777 1.92154 5.85403 1.79817 6.0468 1.71335C6.67138 1.42034 7.29595 1.11962 7.91282 0.811187C8.06703 0.734078 8.19812 0.718657 8.29065 0.896005C8.29836 0.903716 8.30607 0.919138 8.31378 0.926849C8.60679 1.26612 8.78414 1.80588 9.17739 1.92154C9.54751 2.02949 10.0102 1.77504 10.442 1.69793C10.6887 1.65938 10.8198 1.54371 10.8506 1.28926C10.9046 0.949981 10.9894 0.610705 11.0511 0.27143C11.082 0.0863704 11.1591 -0.0138702 11.375 0.00155142C11.7065 0.0246839 12.0458 0.016973 12.3774 0.00155142C12.5701 -0.00615939 12.6473 0.0478163 12.6473 0.256008C12.6395 1.58227 12.6395 2.90082 12.6473 4.22708C12.6473 4.48153 12.5162 4.47382 12.3388 4.48153C8.81498 4.61262 6.3321 6.33213 4.98271 9.55525C3.10898 14.0506 5.90801 19.2554 10.6579 20.2887C11.213 20.4121 11.7682 20.4738 12.3388 20.466C12.5393 20.466 12.6395 20.4969 12.6395 20.7359C12.6318 22.0622 12.6318 23.3807 12.6395 24.707C12.6395 24.8149 12.6087 24.9075 12.5547 24.9923C12.1152 25 11.6834 25 11.2439 25Z" fill="#33B8A4" />
+                    <path d="M12.4933 14.7757C12.4933 16.2253 12.4933 17.6827 12.4933 19.1323C12.4933 19.2094 12.4933 19.2865 12.4933 19.3636C12.4856 19.4716 12.5241 19.6027 12.339 19.6104C12.154 19.6181 12.1771 19.4947 12.1771 19.3791C12.1771 19.1092 12.1771 18.8393 12.1771 18.5694C12.1771 17.621 12.1771 16.6649 12.1771 15.7164C12.1771 15.0687 11.7993 14.6909 11.1593 14.6678C10.6427 14.6523 10.5578 14.5675 10.5578 14.0586C10.5578 13.5034 10.5656 12.956 10.5578 12.4008C10.5578 12.2311 10.5964 12.1309 10.7429 12.0229C11.167 11.6991 11.2056 11.2056 10.8663 10.8509C10.5501 10.5193 10.0181 10.5348 9.70966 10.8895C9.40123 11.2519 9.47063 11.7608 9.90243 12.0461C10.0644 12.154 10.0798 12.2697 10.0798 12.4316C10.0798 12.9868 10.0721 13.5343 10.0798 14.0894C10.0875 14.8065 10.3882 15.1227 11.0976 15.1535C11.5834 15.1767 11.7145 15.3077 11.7145 15.7781C11.7145 16.9502 11.7068 18.1145 11.7222 19.2865C11.7222 19.5179 11.6913 19.5795 11.4292 19.541C10.5116 19.4022 10.5039 19.4176 10.5039 18.5077C10.5039 18.1222 10.5116 17.7367 10.5039 17.3511C10.4885 16.8036 10.126 16.4412 9.57858 16.4412C8.69183 16.4335 7.80509 16.4335 6.91835 16.4412C6.71016 16.4412 6.59449 16.3796 6.48654 16.2022C6.21666 15.7318 6.00076 15.2461 5.8157 14.7371C5.73859 14.5135 5.76173 14.4056 6.0316 14.4133C6.30148 14.421 6.5251 14.4056 6.71787 14.6909C6.97232 15.0687 7.50437 15.0687 7.83593 14.7449C8.15208 14.4364 8.15979 13.9584 7.85135 13.6422C7.55063 13.3261 6.98003 13.3106 6.73329 13.6808C6.44799 14.0972 6.07016 13.9044 5.73088 13.9352C5.60751 13.9429 5.58438 13.8041 5.56896 13.7039C5.51498 13.249 5.45329 12.7863 5.46871 12.3237C5.47643 12.1463 5.55353 12.1155 5.70775 12.1155C6.57136 12.1232 7.42726 12.1155 8.29087 12.1155C8.56846 12.1155 8.72268 12.2697 8.72268 12.5473C8.73039 13.141 8.72268 13.727 8.73039 14.3208C8.73039 14.4827 8.63015 14.5367 8.52991 14.6215C8.15208 14.9453 8.12123 15.4851 8.46051 15.809C8.78436 16.1174 9.30099 16.0865 9.58629 15.7473C9.91014 15.3694 9.84074 14.8759 9.39352 14.5906C9.21617 14.475 9.19304 14.3593 9.19304 14.182C9.20075 13.6576 9.20075 13.1256 9.19304 12.6013C9.18533 11.9921 8.84605 11.6451 8.2369 11.6374C7.44268 11.6297 6.64076 11.6297 5.84654 11.6374C5.62293 11.6374 5.50727 11.5988 5.56124 11.3367C6.13956 8.55308 7.75883 6.69477 10.4422 5.73863C10.8046 5.60755 10.8894 5.70779 10.8509 6.05477C10.8277 6.2861 10.8354 6.51742 10.8509 6.74875C10.8663 7.09573 10.8586 7.38874 10.5039 7.62778C10.1492 7.86681 10.2032 8.41428 10.5193 8.715C10.8354 9.01573 11.3212 9.0003 11.6219 8.68416C11.915 8.36802 11.9304 7.84368 11.5834 7.58923C11.3444 7.41188 11.3058 7.22682 11.3135 6.97236C11.3212 6.5714 11.3212 6.17815 11.3135 5.77718C11.3058 5.59213 11.3675 5.50731 11.568 5.48417C12.4933 5.37622 12.4933 5.36851 12.4933 6.30923C12.4933 7.27308 12.4856 8.23693 12.501 9.20079C12.501 9.43211 12.447 9.50922 12.2003 9.50922C11.2904 9.4938 10.3728 9.50151 9.46291 9.50922C9.3087 9.50922 9.21617 9.46295 9.11593 9.33187C8.79207 8.90006 8.32171 8.8538 7.95931 9.19307C7.61232 9.52464 7.61232 10.0336 7.96702 10.342C8.32171 10.6504 8.85376 10.5887 9.13135 10.1646C9.24701 9.98729 9.37038 9.96416 9.54002 9.96416C10.4113 9.97187 11.2904 9.97958 12.1617 9.95644C12.4393 9.94873 12.501 10.0413 12.501 10.3034C12.4856 11.7993 12.4933 13.2875 12.4933 14.7757Z" fill="#33B8A4" />
+                    <path d="M25.2311 10.5809C26.3492 10.5809 27.4672 10.5809 28.5853 10.5809C28.7626 10.5809 28.9169 10.5886 29.0634 10.4267C29.2484 10.2185 29.5029 10.2185 29.7111 10.4344C29.8961 10.6272 29.8961 10.8662 29.7419 11.0667C29.5646 11.2903 29.3024 11.298 29.0942 11.1206C28.9323 10.9818 28.7781 10.9818 28.6007 10.9818C26.2489 10.9818 23.8971 10.9818 21.553 10.9973C21.26 10.9973 21.1444 10.9356 21.0595 10.6349C20.1651 7.43488 18.06 5.50717 14.8446 4.75922C14.4051 4.65898 13.9579 4.62814 13.5107 4.63585C13.2716 4.64356 13.1714 4.58959 13.1714 4.31971C13.1868 3.032 13.1791 1.75201 13.1714 0.464304C13.1714 0.263823 13.2022 0.163582 13.4413 0.171293C16.302 0.271533 18.9622 0.957795 21.2061 2.83923C21.9232 3.44068 22.4783 4.1732 22.9101 5.00597C22.995 5.17561 23.0875 5.32211 23.2803 5.42235C23.5193 5.53802 23.581 5.76934 23.4653 6.01609C23.3497 6.26283 23.126 6.33994 22.8793 6.25512C22.6326 6.1703 22.4938 5.93898 22.594 5.69994C22.7019 5.44549 22.594 5.28356 22.4938 5.09079C21.3834 3.09369 19.6253 1.93707 17.4894 1.26623C16.3405 0.90382 15.1685 0.649363 13.9579 0.564544C13.6649 0.541412 13.5261 0.603098 13.5569 0.934663C13.5801 1.22767 13.5801 1.5284 13.5569 1.82141C13.5415 2.08357 13.634 2.15297 13.8962 2.19152C16.0167 2.48454 18.0292 3.07056 19.7333 4.44308C20.9439 5.41464 21.8923 6.5944 22.4938 8.03632C22.6248 8.35246 22.7868 8.44499 23.1106 8.42957C23.8431 8.40644 24.5757 8.42186 25.3082 8.42186C25.5935 8.42186 25.8788 8.4527 26.141 8.24451C26.3337 8.09029 26.5651 8.19825 26.7116 8.39102C26.8658 8.5915 26.8349 8.8074 26.6653 8.98475C26.4725 9.17752 26.2181 9.20836 26.0484 9.01559C25.8634 8.81511 25.6552 8.81511 25.4239 8.81511C24.4986 8.81511 23.5733 8.79969 22.648 8.81511C22.4321 8.81511 22.3395 8.738 22.2624 8.54523C21.0673 5.57657 18.862 3.76453 15.7931 2.99345C15.1685 2.83923 14.5439 2.63104 13.8885 2.59249C13.6032 2.57707 13.5569 2.65417 13.5646 2.89321C13.5723 3.18622 13.5955 3.48694 13.5569 3.77995C13.5107 4.15778 13.6957 4.23489 14.0119 4.25031C14.8523 4.28115 15.662 4.48164 16.4331 4.79778C18.9237 5.82332 20.5661 7.62765 21.3526 10.2031C21.4451 10.4961 21.5607 10.5963 21.8769 10.5886C22.995 10.5655 24.113 10.5809 25.2311 10.5809Z" fill="#33B8A4" />
+                    <path d="M24.0671 12.4312C24.7765 12.4312 25.4782 12.4312 26.1876 12.4312C26.4729 12.4312 26.7582 12.4543 27.0203 12.2538C27.2208 12.1073 27.4753 12.169 27.6218 12.3926C27.7606 12.5931 27.7374 12.8244 27.5601 12.9941C27.375 13.1714 27.1206 13.2177 26.9355 13.0326C26.735 12.8399 26.5114 12.8167 26.2647 12.8167C24.8382 12.8167 23.4117 12.8244 21.9852 12.809C21.7153 12.809 21.669 12.9247 21.6536 13.1483C21.4608 16.4948 19.1013 19.4712 15.8628 20.4659C15.1842 20.674 14.498 20.8205 13.7886 20.8283C13.6112 20.8283 13.5341 20.8745 13.5418 21.0673C13.5495 21.476 13.5495 21.8924 13.5418 22.301C13.5418 22.5015 13.6421 22.5324 13.8117 22.5092C14.3052 22.4321 14.791 22.3396 15.2768 22.2239C15.9862 22.0466 16.6956 21.9001 17.3664 21.6071C19.7259 20.5815 21.4069 18.9006 22.363 16.4948C22.5866 15.9396 22.7562 15.369 22.9644 14.8138C23.0415 14.6133 23.1264 14.5671 23.3191 14.5748C23.643 14.5902 23.9591 14.5748 24.283 14.5671C24.5374 14.5671 24.7688 14.5825 24.977 14.3589C25.1466 14.1738 25.4088 14.2278 25.5938 14.4283C25.7635 14.6133 25.7712 14.8293 25.6092 15.022C25.4396 15.2148 25.2237 15.2765 24.9924 15.13C24.4912 14.8138 23.9437 15.0143 23.4271 14.9989C23.2652 14.9912 23.2497 15.2842 23.2035 15.4461C22.7177 17.0345 21.9929 18.4842 20.844 19.6948C19.4714 21.1521 17.7982 22.0851 15.8397 22.5401C15.1534 22.6943 14.4748 22.8948 13.7654 22.9256C13.565 22.9333 13.5418 23.049 13.5418 23.2032C13.5495 23.5502 13.5573 23.8972 13.5341 24.2442C13.5187 24.4909 13.6112 24.5526 13.8426 24.5372C14.8295 24.4832 15.8011 24.329 16.7572 24.0668C18.2146 23.6658 19.6025 23.1338 20.7823 22.1468C21.5534 21.5068 22.1625 20.7357 22.6406 19.8567C22.71 19.7256 22.7331 19.61 22.6714 19.4634C22.5635 19.2013 22.656 18.9622 22.9182 18.8543C23.1726 18.7541 23.4117 18.8312 23.5273 19.0933C23.643 19.3555 23.5427 19.5714 23.296 19.7025C23.1881 19.7565 23.1109 19.8181 23.0493 19.9261C21.8618 22.2702 19.8493 23.5579 17.4127 24.2904C16.1327 24.6682 14.8295 24.9381 13.4879 24.9227C13.2103 24.9227 13.1486 24.8456 13.1486 24.5757C13.1563 23.3034 13.1563 22.0311 13.1409 20.7589C13.1409 20.5198 13.1948 20.435 13.457 20.4273C17.2739 20.3502 20.4199 17.7131 21.1524 13.9811C21.2372 13.5647 21.2912 13.1483 21.2526 12.7242C21.2295 12.4929 21.3066 12.4158 21.5457 12.4158C22.3938 12.4389 23.2343 12.4312 24.0671 12.4312Z" fill="#33B8A4" />
+                    <path d="M15.6007 12.7549C16.1404 12.7549 16.6802 12.7626 17.2199 12.7472C17.4358 12.7395 17.4975 12.8243 17.4744 13.017C17.3819 13.8267 17.2353 14.6209 16.9192 15.3765C16.8729 15.4922 16.8344 15.577 16.6416 15.5076C15.8166 15.2146 14.9684 14.9833 14.0739 15.0296C13.8426 15.045 13.7038 14.9447 13.7115 14.6672C13.7346 14.112 13.7269 13.5645 13.7115 13.0093C13.7038 12.8088 13.7732 12.7395 13.9737 12.7472C14.5211 12.7626 15.0609 12.7549 15.6007 12.7549Z" fill="#33B8A4" />
+                    <path d="M15.5851 12.1844C15.0454 12.1844 14.5056 12.1767 13.9736 12.1844C13.7962 12.1844 13.7268 12.1381 13.7268 11.9454C13.7345 11.3285 13.7345 10.7193 13.7268 10.1025C13.7268 9.92513 13.8116 9.87115 13.9581 9.90199C14.8372 10.0948 15.7008 9.90199 16.549 9.72464C16.8574 9.65525 16.9191 9.77091 17.0039 9.99452C17.2506 10.6345 17.3509 11.3131 17.4588 11.9839C17.4897 12.1844 17.3663 12.1844 17.2275 12.1767C16.6878 12.1844 16.1326 12.1844 15.5851 12.1844Z" fill="#33B8A4" />
+                    <path d="M20.0574 12.8556C19.9957 14.1818 19.5331 15.3384 18.7774 16.3948C18.6618 16.549 18.5615 16.5953 18.3842 16.4411C18.1683 16.2483 17.9061 16.1095 17.6517 15.9707C17.4743 15.8782 17.4203 15.8088 17.5051 15.6006C17.8059 14.8449 18.0449 14.0816 18.0526 13.2488C18.0526 12.9481 18.1374 12.7013 18.5538 12.7476C18.9856 12.7939 19.4251 12.7553 19.8569 12.763C19.9418 12.7553 20.0651 12.7091 20.0574 12.8556Z" fill="#33B8A4" />
+                    <path d="M19.1087 12.1618C18.7771 12.1618 18.3607 12.2852 18.1371 12.1309C17.9058 11.969 18.0369 11.5141 17.9752 11.1979C17.8749 10.6967 17.7516 10.2032 17.5742 9.73288C17.4971 9.5324 17.5048 9.44758 17.713 9.36277C18.0677 9.21626 18.407 9.03891 18.7385 8.85385C18.8928 8.76132 18.9467 8.79988 19.0315 8.93867C19.633 9.87939 19.9646 10.9126 20.0725 12.0153C20.0879 12.1849 20.0108 12.2081 19.8797 12.2003C19.6253 12.1926 19.3631 12.2003 19.1087 12.2003C19.1087 12.1772 19.1087 12.1695 19.1087 12.1618Z" fill="#33B8A4" />
+                    <path d="M13.7268 18.9162C13.7268 17.8367 13.7268 16.8189 13.7268 15.7933C13.7268 15.6314 13.8039 15.5929 13.9427 15.6083C14.7755 15.6777 15.6005 15.7856 16.3947 16.0786C16.495 16.1172 16.5798 16.1558 16.495 16.2945C15.8164 17.4126 14.9374 18.2916 13.7268 18.9162Z" fill="#33B8A4" />
+                    <path d="M16.5719 9.06964C15.7623 9.30868 14.9449 9.36265 14.1199 9.33181C13.8731 9.3241 13.7035 9.24699 13.7112 8.92314C13.7343 8.05181 13.7189 7.1882 13.7189 6.2552C15.0066 6.91061 15.9088 7.85904 16.5719 9.06964Z" fill="#33B8A4" />
+                    <path d="M10.0176 19.1627C8.79157 18.6924 7.82001 17.9598 6.96411 16.9034C7.58098 16.9034 8.12073 16.9034 8.66049 16.9034C8.9535 16.9034 9.25422 16.8957 9.54723 16.9034C9.80169 16.9112 10.0099 17.0268 10.0176 17.3121C10.0253 17.9136 10.0176 18.5073 10.0176 19.1627Z" fill="#33B8A4" />
+                    <path d="M14.6753 6.03119C15.8319 6.27794 16.8343 6.70974 17.6825 7.45769C17.9293 7.6736 18.2223 7.84323 18.3919 8.14395C18.469 8.27504 18.4459 8.3213 18.3302 8.36757C18.2917 8.38299 18.2608 8.39841 18.23 8.41383C17.9215 8.56034 17.6054 8.83793 17.3047 8.82251C16.9731 8.79937 16.9114 8.3213 16.7109 8.05142C16.2175 7.39601 15.6931 6.77914 15.0069 6.30878C14.9066 6.23938 14.8141 6.14685 14.6753 6.03119Z" fill="#33B8A4" />
+                    <path d="M15.1453 18.8082C15.9086 18.145 16.5409 17.4048 17.0421 16.5412C17.1115 16.4178 17.1886 16.4255 17.2966 16.4795C17.3891 16.5335 17.4739 16.5797 17.5587 16.6337C18.353 17.1503 18.3298 16.9961 17.6359 17.5976C16.9187 18.2067 16.0937 18.6308 15.1453 18.8082Z" fill="#33B8A4" />
+                </svg>
+                <p className={styles.itemName}>Thingweb</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.td)}>
+                <FontAwesomeIcon icon={faFile} className={styles.icon} />
+                <p className={styles.itemName}>TD</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.tm)}>
+                <FontAwesomeIcon icon={faFile} className={styles.icon} />
+                <p className={styles.itemName}>TM</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.domus)}>
+                <FontAwesomeIcon icon={faHouse} className={styles.icon} />
+                <p className={styles.itemName}>Domus TDD</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.tools)}>
+                <FontAwesomeIcon icon={faScrewdriverWrench} className={styles.icon} />
+                <p className={styles.itemName}>TD Tools</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.playground)}>
+                <FontAwesomeIcon icon={faLaptopCode} className={styles.icon} />
+                <p className={styles.itemName}>Playground</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.nodeWot)}>
+                <FontAwesomeIcon icon={faDisplay} className={styles.icon} />
+                <p className={styles.itemName}>node-wot</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.dartWot)}>
+                <FontAwesomeIcon icon={faMobile} className={styles.icon} />
+                <p className={styles.itemName}>dart_wot</p>
+            </div>
+            <div className={clsx(styles.PlatformWorkflow__item, styles.nodeRed)}>
+                <FontAwesomeIcon icon={faCubes} className={styles.icon} />
+                <p className={styles.itemName}>Node-RED</p>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/PlatformWorkflow/styles.module.scss b/src/components/PlatformWorkflow/styles.module.scss
new file mode 100644
index 0000000..9f7430b
--- /dev/null
+++ b/src/components/PlatformWorkflow/styles.module.scss
@@ -0,0 +1,583 @@
+.PlatformWorkflow {
+    position: relative;
+    padding: 1rem;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid: repeat(5, 1fr);
+    gap: .5rem;
+    grid-template-areas:
+        ". td . nodeWot ."
+        "thing1 . . . tools"
+        "tm . thingweb . playground"
+        "domus . . . nodeRed"
+        ". thing2 . dartWot .";
+
+    --_item-width: clamp(2.5rem, 1.7857142857142858rem + 3.571428571428571vw, 5rem);
+    --_item-gap: clamp(0.25rem, 0.17857142857142858rem + 0.35714285714285715vw, 0.5rem);
+    --_item-font-size: clamp(0.35rem, 0.25rem + 0.49999999999999994vw, 0.7rem);
+    --_item-inactive-icon: clamp(1.25rem, 0.9642857142857143rem + 1.4285714285714286vw, 2.25rem);
+    --_item-active-icon: clamp(1rem, 0.7857142857142857rem + 1.0714285714285714vw, 1.75rem);
+    --_thingweb-inactive-icon: clamp(1.4rem, 1.0857142857142856rem + 1.5714285714285716vw, 2.5rem);
+    --_thingweb-active-icon: clamp(1.2rem, 1.0428571428571427rem + 0.7857142857142858vw, 1.75rem);
+    --_item-translate-icon: clamp(0.2rem, 0.14285714285714288rem + 0.2857142857142857vw, 0.4rem);
+
+    &__line {
+        position: absolute;
+    }
+
+    .line1 {
+        top: clamp(2.25rem, 1.9642857142857144rem + 1.4285714285714286vw, 3.25rem);
+        left: clamp(6.5rem, 5.214285714285714rem + 6.428571428571428vw, 11rem);
+        width: clamp(1.5rem, 1.1428571428571428rem + 1.7857142857142856vw, 2.75rem);
+        height: auto;
+        stroke-dasharray: 10rem;
+        stroke-dashoffset: 10rem;
+        animation: animateLine1 10s ease-in-out infinite 250ms;
+    }
+    .line2 {
+        top: clamp(2.25rem, 1.9642857142857144rem + 1.4285714285714286vw, 3.25rem);
+        left: clamp(8.5rem, 6.642857142857142rem + 9.285714285714286vw, 15rem);
+        width: clamp(1.5rem, 1.1428571428571428rem + 1.7857142857142856vw, 2.75rem);
+        height: auto;
+        stroke-dasharray: 10rem;
+        stroke-dashoffset: 10rem;
+        animation: animateLine1 10s ease-in-out infinite 250ms;
+    }
+    .line6 {
+        top: clamp(9.5rem, 7.428571428571429rem + 10.357142857142856vw, 16.75rem);
+        left: clamp(8.5rem, 6.642857142857142rem + 9.285714285714286vw, 15rem);
+        width: clamp(1.5rem, 1.1428571428571428rem + 1.7857142857142856vw, 2.75rem);
+        height: auto;
+        stroke-dasharray: 10rem;
+        stroke-dashoffset: 10rem;
+        animation: animateLine1 10s ease-in-out infinite 250ms;
+    }
+    .line7 {
+        top: clamp(9.4rem, 7.300000000000001rem + 10.5vw, 16.75rem);
+        left: clamp(6.4rem, 5.1571428571428575rem + 6.2142857142857135vw, 10.75rem);
+        width: clamp(1.65rem, 1.2642857142857142rem + 1.9285714285714288vw, 3rem);
+        height: auto;
+        stroke-dasharray: 10rem;
+        stroke-dashoffset: 10rem;
+        animation: animateLine1 10s ease-in-out infinite 250ms;
+    }
+
+    .line3 {
+        top: clamp(5.25rem, 4.178571428571429rem + 5.357142857142857vw, 9rem);
+        left: clamp(9.5rem, 7.357142857142858rem + 10.714285714285714vw, 17rem);
+        width: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        height: auto;
+        stroke-dasharray: 10rem;
+        stroke-dashoffset: 10rem;
+        animation: animateLine1 10s ease-in-out infinite 250ms;
+    }
+
+    .line5 {
+        top: clamp(8.75rem, 6.821428571428571rem + 9.642857142857142vw, 15.5rem);
+        left: clamp(9.5rem, 7.357142857142858rem + 10.714285714285714vw, 17rem);
+        width: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        height: auto;
+        stroke-dasharray: 10rem;
+        stroke-dashoffset: 10rem;
+        animation: animateLine1 10s ease-in-out infinite 250ms;
+    }
+
+    .line8 {
+        top: clamp(8.75rem, 6.821428571428571rem + 9.642857142857142vw, 15.5rem);
+        left: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        width: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        height: auto;
+        stroke-dasharray: 10rem;
+        stroke-dashoffset: 10rem;
+        animation: animateLine1 10s ease-in-out infinite 250ms;
+    }
+
+    .line10 {
+        top: clamp(5.25rem, 4.035714285714286rem + 6.071428571428571vw, 9.5rem);
+        left: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        width: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        height: auto;
+        stroke-dasharray: 10rem;
+        stroke-dashoffset: 10rem;
+        animation: animateLine1 10s ease-in-out infinite 250ms;
+    }
+
+    .line4 {
+        top: clamp(8.25rem, 6.464285714285714rem + 8.928571428571429vw, 14.5rem);
+        left: clamp(9.5rem, 7.357142857142858rem + 10.714285714285714vw, 17rem);
+        width: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        height: auto;
+        stroke-dasharray: 6rem;
+        stroke-dashoffset: 6rem;
+        animation: animateLine2 10s ease-in-out infinite 250ms;
+        transform: rotate(180deg);
+    }
+
+    .line9 {
+        top: clamp(8.25rem, 6.464285714285714rem + 8.928571428571429vw, 14.5rem);
+        left: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        width: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        height: auto;
+        stroke-dasharray: 6rem;
+        stroke-dashoffset: 6rem;
+        animation: animateLine2 10s ease-in-out infinite 250ms;
+    }
+
+
+    .thing1 {
+        grid-area: thing1;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showThingwebSvg 10s ease-in-out infinite;
+            path {
+                animation: showThingwebPath 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .thing2 {
+        grid-area: thing2;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showItemIconSvg 10s ease-in-out infinite;
+            path {
+                animation: showItemIconPathSecondary 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .td {
+        grid-area: td;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showItemIconSvg 10s ease-in-out infinite;
+            path {
+                animation: showItemIconPathSecondary 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .tm {
+        grid-area: tm;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showItemIconSvg 10s ease-in-out infinite;
+            path {
+                animation: showItemIconPathSecondary 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .nodeWot {
+        grid-area: nodeWot;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showItemIconSvg 10s ease-in-out infinite;
+            path {
+                animation: showItemIconPathPrimary 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .dartWot {
+        grid-area: dartWot;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showItemIconSvg 10s ease-in-out infinite;
+            path {
+                animation: showItemIconPathPrimary 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .nodeRed {
+        grid-area: nodeRed;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showItemIconSvg 10s ease-in-out infinite;
+            path {
+                animation: showItemIconPathSecondary 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .domus {
+        grid-area: domus;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showItemIconSvg 10s ease-in-out infinite;
+            path {
+                animation: showItemIconPathPrimary 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .tools {
+        grid-area: tools;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showItemIconSvg 10s ease-in-out infinite;
+            path {
+                animation: showItemIconPathSecondary 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .playground {
+        grid-area: playground;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showItemIconSvg 10s ease-in-out infinite;
+            path {
+                animation: showItemIconPathPrimary 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    .thingweb {
+        grid-area: thingweb;
+        animation: showItemBox 10s ease-in-out infinite;
+        .icon {
+            animation: showThingwebSvg 10s ease-in-out infinite;
+            path {
+                animation: showThingwebPath 10s ease-in-out infinite;
+            }
+        }
+        p {
+            animation: showItemText 10s ease-in-out infinite;
+        }
+    }
+
+    &__item {
+        aspect-ratio: 1/1;
+        min-width: var(--_item-width);
+        background-color: var(--neutral-clr-75);
+        border-radius: 5px;
+        border: 1px solid var(--neutral-clr-300);
+        transition: all 350ms ease-in-out;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        gap: 0;
+
+        p {
+            font-size: 0.35rem;
+            font-size: var(--_item-font-size);
+            line-height: normal;
+            font-weight: var(--fw-bold);
+            font-family: var(--ff-primary);
+            opacity: 0;
+            transform: translateY(.9rem);
+        }
+
+        .icon {
+            transform: translateY(var(--_item-translate-icon));
+            font-size: 1.25rem;
+            font-size: var(--_item-inactive-icon);
+
+            path {
+                stroke: var(--neutral-clr-300);
+                stroke-width: 20px;
+                fill: var(--neutral-clr-75);
+            }
+
+            &.thingwebLogo {
+                height: var(--_thingweb-inactive-icon);
+
+                path {
+                    stroke-width: .75px;
+                }
+            }
+        }
+    }
+}
+
+@keyframes showItemBox {
+    0% {
+        border-color: var(--neutral-clr-300);
+        background-color: var(--neutral-clr-75);
+        transform: scale(1);
+        box-shadow: 0 0 0 var(--box-shadow-clr);
+        gap: 0;
+    }
+
+    4% {
+        border-color: var(--neutral-clr-75);
+        background-color: var(--neutral-clr-50);
+        transform: scale(1.05);
+        box-shadow: 3px 3px 10px var(--box-shadow-clr);
+        gap: 0.25rem;
+        gap: var(--_item-gap);
+    }
+
+    50% {
+        border-color: var(--neutral-clr-75);
+        background-color: var(--neutral-clr-50);
+        transform: scale(1.05);
+        box-shadow: 3px 3px 10px var(--box-shadow-clr);
+        gap: 0.25rem;
+        gap: var(--_item-gap);
+    }
+
+    58% {
+        border-color: var(--neutral-clr-300);
+        background-color: var(--neutral-clr-75);
+        transform: scale(1);
+        box-shadow: 0 0 0 var(--box-shadow-clr);
+        gap: 0;
+    }
+
+    100% {
+        border-color: var(--neutral-clr-300);
+        background-color: var(--neutral-clr-75);
+        transform: scale(1);
+        box-shadow: 0 0 0 var(--box-shadow-clr);
+        gap: 0;
+    }
+}
+
+@keyframes showItemIconSvg {
+    0% {
+        transform: translateY(var(--_item-translate-icon));
+        font-size: 1.25rem;
+        font-size: var(--_item-inactive-icon);
+    }
+
+    6% {
+        transform: translateY(0);
+        font-size: 1rem;
+        font-size: var(--_item-active-icon);
+    }
+
+    50% {
+        transform: translateY(0);
+        font-size: 1rem;
+        font-size: var(--_item-active-icon);
+    }
+
+    58% {
+        transform: translateY(var(--_item-translate-icon));
+        font-size: 1.25rem;
+        font-size: var(--_item-inactive-icon);
+    }
+
+    100% {
+        transform: translateY(var(--_item-translate-icon));
+        font-size: 1.25rem;
+        font-size: var(--_item-inactive-icon);
+    }
+}
+
+@keyframes showThingwebSvg {
+    0% {
+        transform: translateY(var(--_item-translate-icon));
+        height: var(--_thingweb-inactive-icon);
+    }
+
+    6% {
+        transform: translateY(0);
+        height: var(--_thingweb-active-icon);
+    }
+
+    50% {
+        transform: translateY(0);
+        height: var(--_thingweb-active-icon);
+    }
+
+    58% {
+        transform: translateY(var(--_item-translate-icon));
+        height: var(--_thingweb-inactive-icon);
+
+    }
+
+    100% {
+        transform: translateY(var(--_item-translate-icon));
+        height: var(--_thingweb-inactive-icon);
+
+    }
+}
+
+@keyframes showThingwebPath {
+    0% {
+        stroke-width: .75px;
+        fill: var(--neutral-clr-75);
+    }
+
+    4% {
+        stroke-width: 0;
+        fill: var(--ifm-color-primary);
+    }
+
+    50% {
+        stroke-width: 0;
+        fill: var(--ifm-color-primary);
+    }
+
+    58% {
+        stroke-width: .75px;
+        fill: var(--neutral-clr-75);
+    }
+
+    100% {
+        stroke-width: .75px;
+        fill: var(--neutral-clr-75);
+    }
+}
+
+@keyframes showItemIconPathPrimary {
+    0% {
+        stroke-width: 20px;
+        fill: var(--neutral-clr-75);
+    }
+
+    4% {
+        stroke-width: 0;
+        fill: var(--ifm-color-primary);
+    }
+
+    50% {
+        stroke-width: 0;
+        fill: var(--ifm-color-primary);
+    }
+
+    58% {
+        stroke-width: 20px;
+        fill: var(--neutral-clr-75);
+    }
+
+    100% {
+        stroke-width: 20px;
+        fill: var(--neutral-clr-75);
+    }
+}
+
+@keyframes showItemIconPathSecondary {
+    0% {
+        stroke-width: 20px;
+        fill: var(--neutral-clr-75);
+    }
+
+    4% {
+        stroke-width: 0;
+        fill: var(--ifm-color-secondary);
+    }
+
+    50% {
+        stroke-width: 0;
+        fill: var(--ifm-color-secondary);
+    }
+
+    58% {
+        stroke-width: 20px;
+        fill: var(--neutral-clr-75);
+    }
+
+    100% {
+        stroke-width: 20px;
+        fill: var(--neutral-clr-75);
+    }
+}
+
+@keyframes showItemText {
+    0% {
+        transform: translateY(.9rem);
+        opacity: 0;
+    }
+
+    4% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+
+    50% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+
+    58% {
+        transform: translateY(.9rem);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(.9rem);
+        opacity: 0;
+    }
+}
+
+@keyframes animateLine1 {
+    0% {
+        stroke-dashoffset: 10rem;
+    }
+
+    4% {
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dashoffset: 0;
+    }
+
+    58% {
+        stroke-dashoffset: -10rem;
+    }
+
+    100% {
+        stroke-dashoffset: -10rem;
+    }
+}
+
+@keyframes animateLine2 {
+    0% {
+        stroke-dashoffset: 6rem;
+    }
+
+    4% {
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dashoffset: 0;
+    }
+
+    58% {
+        stroke-dashoffset: -6rem;
+    }
+
+    100% {
+        stroke-dashoffset: -6rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/SDKWorkflow/index.js b/src/components/SDKWorkflow/index.js
index 941c073..b76c660 100644
--- a/src/components/SDKWorkflow/index.js
+++ b/src/components/SDKWorkflow/index.js
@@ -1,18 +1,102 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faLightbulb, faTemperatureHalf, faFile, faLaptopCode, faDisplay, faMobile, faCubes, faTablet } from '@fortawesome/free-solid-svg-icons'
+import { faFile, faLaptopCode, faDisplay, faMobile, faTablet } from '@fortawesome/free-solid-svg-icons'
 
 export default function SDKWorkflow() {
     return (
         <div className={styles.SDKWorkflow}>
+            <svg width="auto" height="auto" viewBox="0 0 84 2" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.SDKWorkflow__line, styles.line1)}>
+                <path d="M0 1H84" stroke="url(#paint0_linear_4_66)" />
+                <defs>
+                    <linearGradient id="paint0_linear_4_66" x1="0" y1="1" x2="15.6806" y2="34.2344" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                        <stop offset="1" stop-color="#D65CAB" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.SDKWorkflow__line, styles.line2)}>
+                <path d="M0 46H37C42.5228 46 47 41.5228 47 36V0" stroke="url(#paint0_linear_4_82)" />
+                <defs>
+                    <linearGradient id="paint0_linear_4_82" x1="47" y1="0" x2="-6.50196" y2="36.4585" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                        <stop offset="1" stop-color="#D65CAB" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 85 2" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.SDKWorkflow__line, styles.line3)}>
+                <path d="M0 1L85 1" stroke="url(#paint0_linear_4_67)" />
+                <defs>
+                    <linearGradient id="paint0_linear_4_67" x1="0" y1="1" x2="15.5624" y2="34.3765" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                        <stop offset="1" stop-color="#D65CAB" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 135 41" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.SDKWorkflow__line, styles.line4)}>
+                <path d="M1 41V11C1 5.47715 5.47715 1 11 1H135" stroke="url(#paint0_linear_21_61)" />
+                <defs>
+                    <linearGradient id="paint0_linear_21_61" x1="135" y1="1" x2="97.7215" y2="84.2901" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                        <stop offset="1" stop-color="#D65CAB" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 207 47" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.SDKWorkflow__line, styles.line5)}>
+                <path d="M1 0V36C1 41.5228 5.47715 46 11 46H207" stroke="url(#paint0_linear_21_45)" />
+                <defs>
+                    <linearGradient id="paint0_linear_21_45" x1="1" y1="0" x2="209.535" y2="23.5632" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                        <stop offset="1" stop-color="#D65CAB" />
+                    </linearGradient>
+                </defs>
+            </svg>
+            <svg width="auto" height="auto" viewBox="0 0 53 46" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.SDKWorkflow__line, styles.line6)}>
+                <path d="M0 45H42C47.5228 45 52 40.5228 52 35V0" stroke="url(#paint0_linear_21_60)" />
+                <defs>
+                    <linearGradient id="paint0_linear_21_60" x1="52" y1="0" x2="-2.38081" y2="41.9108" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#33B8A4" />
+                        <stop offset="1" stop-color="#D65CAB" />
+                    </linearGradient>
+                </defs>
+            </svg>
+
+
             <div className={clsx(styles.SDKWorkflow__item, styles.thing1)}>
-                <FontAwesomeIcon icon={faLightbulb} className={styles.icon} />
+                <svg width="auto" height="auto" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.icon, styles.thingwebLogo)}>
+                    <path d="M11.2439 25C11.2362 24.4834 11.0511 24.0053 10.9509 23.5041C10.92 23.3653 10.8275 23.3268 10.7041 23.3113C10.4111 23.2651 10.1104 23.2496 9.84052 23.1417C9.42414 22.9721 9.1851 23.1186 8.96149 23.4655C8.76872 23.7663 8.60679 24.1904 8.29065 24.2752C7.9745 24.36 7.64294 24.0361 7.31909 23.8896C6.94126 23.7277 6.57885 23.5427 6.20102 23.373C6.01596 23.2959 5.95427 23.188 6.01596 22.9875C6.10849 22.6713 6.14704 22.3321 6.24728 22.0236C6.33981 21.746 6.28584 21.5687 6.03909 21.4145C5.77692 21.2525 5.53018 21.0598 5.31427 20.8439C5.10608 20.6434 4.92873 20.6434 4.70512 20.7899C4.69741 20.7976 4.68199 20.8053 4.67428 20.8053C4.28874 20.9672 3.89549 21.3991 3.55621 21.2911C3.21693 21.1831 2.99332 20.6897 2.73115 20.3658C2.50754 20.0959 2.29935 19.8183 2.07573 19.5562C1.95236 19.4097 1.95236 19.3017 2.07573 19.1552C2.28393 18.9239 2.44585 18.6617 2.66947 18.4458C2.92392 18.1991 2.9779 17.9677 2.74658 17.6824C2.68489 17.6053 2.6232 17.5128 2.60007 17.4126C2.45356 16.6646 1.96778 16.5181 1.2661 16.5952C0.595259 16.6646 0.587548 16.6106 0.425621 15.9398C0.302248 15.4155 0.194297 14.8911 0.0477916 14.3745C-0.0138949 14.1586 0.0477916 14.0815 0.22514 14.0044C0.564416 13.8579 0.895981 13.6805 1.23526 13.534C1.39718 13.4646 1.46658 13.3721 1.45887 13.187C1.43574 12.7861 1.44345 12.3928 1.45887 11.9919C1.46658 11.8068 1.40489 11.7143 1.23526 11.6526C0.88827 11.5138 0.556705 11.3442 0.217429 11.1976C0.0400808 11.1205 -0.0370273 11.028 0.0169484 10.8198C0.178875 10.1644 0.31767 9.50127 0.456465 8.83814C0.495019 8.64537 0.587548 8.56055 0.79574 8.56826C1.15815 8.58368 1.51285 8.56055 1.87525 8.57597C2.09116 8.58368 2.19911 8.51429 2.27622 8.31381C2.42272 7.95911 2.59236 7.61212 2.762 7.27285C2.84682 7.11092 2.84682 7.00297 2.71573 6.86417C2.46128 6.58658 2.25308 6.27815 1.99863 6.00827C1.8367 5.83863 1.85212 5.73068 1.99092 5.56105C2.42272 5.03671 2.84682 4.50466 3.2632 3.96491C3.38657 3.80298 3.49452 3.76443 3.67958 3.87238C4.00344 4.04973 4.35042 4.19623 4.67428 4.37358C4.8362 4.4584 4.94416 4.45069 5.08295 4.32732C5.37596 4.07286 5.66897 3.82611 5.98512 3.61021C6.17018 3.47913 6.19331 3.34033 6.13933 3.14756C6.0468 2.80058 5.96198 2.45359 5.86174 2.1066C5.80777 1.92154 5.85403 1.79817 6.0468 1.71335C6.67138 1.42034 7.29595 1.11962 7.91282 0.811187C8.06703 0.734078 8.19812 0.718657 8.29065 0.896005C8.29836 0.903716 8.30607 0.919138 8.31378 0.926849C8.60679 1.26612 8.78414 1.80588 9.17739 1.92154C9.54751 2.02949 10.0102 1.77504 10.442 1.69793C10.6887 1.65938 10.8198 1.54371 10.8506 1.28926C10.9046 0.949981 10.9894 0.610705 11.0511 0.27143C11.082 0.0863704 11.1591 -0.0138702 11.375 0.00155142C11.7065 0.0246839 12.0458 0.016973 12.3774 0.00155142C12.5701 -0.00615939 12.6473 0.0478163 12.6473 0.256008C12.6395 1.58227 12.6395 2.90082 12.6473 4.22708C12.6473 4.48153 12.5162 4.47382 12.3388 4.48153C8.81498 4.61262 6.3321 6.33213 4.98271 9.55525C3.10898 14.0506 5.90801 19.2554 10.6579 20.2887C11.213 20.4121 11.7682 20.4738 12.3388 20.466C12.5393 20.466 12.6395 20.4969 12.6395 20.7359C12.6318 22.0622 12.6318 23.3807 12.6395 24.707C12.6395 24.8149 12.6087 24.9075 12.5547 24.9923C12.1152 25 11.6834 25 11.2439 25Z" fill="#33B8A4" />
+                    <path d="M12.4933 14.7757C12.4933 16.2253 12.4933 17.6827 12.4933 19.1323C12.4933 19.2094 12.4933 19.2865 12.4933 19.3636C12.4856 19.4716 12.5241 19.6027 12.339 19.6104C12.154 19.6181 12.1771 19.4947 12.1771 19.3791C12.1771 19.1092 12.1771 18.8393 12.1771 18.5694C12.1771 17.621 12.1771 16.6649 12.1771 15.7164C12.1771 15.0687 11.7993 14.6909 11.1593 14.6678C10.6427 14.6523 10.5578 14.5675 10.5578 14.0586C10.5578 13.5034 10.5656 12.956 10.5578 12.4008C10.5578 12.2311 10.5964 12.1309 10.7429 12.0229C11.167 11.6991 11.2056 11.2056 10.8663 10.8509C10.5501 10.5193 10.0181 10.5348 9.70966 10.8895C9.40123 11.2519 9.47063 11.7608 9.90243 12.0461C10.0644 12.154 10.0798 12.2697 10.0798 12.4316C10.0798 12.9868 10.0721 13.5343 10.0798 14.0894C10.0875 14.8065 10.3882 15.1227 11.0976 15.1535C11.5834 15.1767 11.7145 15.3077 11.7145 15.7781C11.7145 16.9502 11.7068 18.1145 11.7222 19.2865C11.7222 19.5179 11.6913 19.5795 11.4292 19.541C10.5116 19.4022 10.5039 19.4176 10.5039 18.5077C10.5039 18.1222 10.5116 17.7367 10.5039 17.3511C10.4885 16.8036 10.126 16.4412 9.57858 16.4412C8.69183 16.4335 7.80509 16.4335 6.91835 16.4412C6.71016 16.4412 6.59449 16.3796 6.48654 16.2022C6.21666 15.7318 6.00076 15.2461 5.8157 14.7371C5.73859 14.5135 5.76173 14.4056 6.0316 14.4133C6.30148 14.421 6.5251 14.4056 6.71787 14.6909C6.97232 15.0687 7.50437 15.0687 7.83593 14.7449C8.15208 14.4364 8.15979 13.9584 7.85135 13.6422C7.55063 13.3261 6.98003 13.3106 6.73329 13.6808C6.44799 14.0972 6.07016 13.9044 5.73088 13.9352C5.60751 13.9429 5.58438 13.8041 5.56896 13.7039C5.51498 13.249 5.45329 12.7863 5.46871 12.3237C5.47643 12.1463 5.55353 12.1155 5.70775 12.1155C6.57136 12.1232 7.42726 12.1155 8.29087 12.1155C8.56846 12.1155 8.72268 12.2697 8.72268 12.5473C8.73039 13.141 8.72268 13.727 8.73039 14.3208C8.73039 14.4827 8.63015 14.5367 8.52991 14.6215C8.15208 14.9453 8.12123 15.4851 8.46051 15.809C8.78436 16.1174 9.30099 16.0865 9.58629 15.7473C9.91014 15.3694 9.84074 14.8759 9.39352 14.5906C9.21617 14.475 9.19304 14.3593 9.19304 14.182C9.20075 13.6576 9.20075 13.1256 9.19304 12.6013C9.18533 11.9921 8.84605 11.6451 8.2369 11.6374C7.44268 11.6297 6.64076 11.6297 5.84654 11.6374C5.62293 11.6374 5.50727 11.5988 5.56124 11.3367C6.13956 8.55308 7.75883 6.69477 10.4422 5.73863C10.8046 5.60755 10.8894 5.70779 10.8509 6.05477C10.8277 6.2861 10.8354 6.51742 10.8509 6.74875C10.8663 7.09573 10.8586 7.38874 10.5039 7.62778C10.1492 7.86681 10.2032 8.41428 10.5193 8.715C10.8354 9.01573 11.3212 9.0003 11.6219 8.68416C11.915 8.36802 11.9304 7.84368 11.5834 7.58923C11.3444 7.41188 11.3058 7.22682 11.3135 6.97236C11.3212 6.5714 11.3212 6.17815 11.3135 5.77718C11.3058 5.59213 11.3675 5.50731 11.568 5.48417C12.4933 5.37622 12.4933 5.36851 12.4933 6.30923C12.4933 7.27308 12.4856 8.23693 12.501 9.20079C12.501 9.43211 12.447 9.50922 12.2003 9.50922C11.2904 9.4938 10.3728 9.50151 9.46291 9.50922C9.3087 9.50922 9.21617 9.46295 9.11593 9.33187C8.79207 8.90006 8.32171 8.8538 7.95931 9.19307C7.61232 9.52464 7.61232 10.0336 7.96702 10.342C8.32171 10.6504 8.85376 10.5887 9.13135 10.1646C9.24701 9.98729 9.37038 9.96416 9.54002 9.96416C10.4113 9.97187 11.2904 9.97958 12.1617 9.95644C12.4393 9.94873 12.501 10.0413 12.501 10.3034C12.4856 11.7993 12.4933 13.2875 12.4933 14.7757Z" fill="#33B8A4" />
+                    <path d="M25.2311 10.5809C26.3492 10.5809 27.4672 10.5809 28.5853 10.5809C28.7626 10.5809 28.9169 10.5886 29.0634 10.4267C29.2484 10.2185 29.5029 10.2185 29.7111 10.4344C29.8961 10.6272 29.8961 10.8662 29.7419 11.0667C29.5646 11.2903 29.3024 11.298 29.0942 11.1206C28.9323 10.9818 28.7781 10.9818 28.6007 10.9818C26.2489 10.9818 23.8971 10.9818 21.553 10.9973C21.26 10.9973 21.1444 10.9356 21.0595 10.6349C20.1651 7.43488 18.06 5.50717 14.8446 4.75922C14.4051 4.65898 13.9579 4.62814 13.5107 4.63585C13.2716 4.64356 13.1714 4.58959 13.1714 4.31971C13.1868 3.032 13.1791 1.75201 13.1714 0.464304C13.1714 0.263823 13.2022 0.163582 13.4413 0.171293C16.302 0.271533 18.9622 0.957795 21.2061 2.83923C21.9232 3.44068 22.4783 4.1732 22.9101 5.00597C22.995 5.17561 23.0875 5.32211 23.2803 5.42235C23.5193 5.53802 23.581 5.76934 23.4653 6.01609C23.3497 6.26283 23.126 6.33994 22.8793 6.25512C22.6326 6.1703 22.4938 5.93898 22.594 5.69994C22.7019 5.44549 22.594 5.28356 22.4938 5.09079C21.3834 3.09369 19.6253 1.93707 17.4894 1.26623C16.3405 0.90382 15.1685 0.649363 13.9579 0.564544C13.6649 0.541412 13.5261 0.603098 13.5569 0.934663C13.5801 1.22767 13.5801 1.5284 13.5569 1.82141C13.5415 2.08357 13.634 2.15297 13.8962 2.19152C16.0167 2.48454 18.0292 3.07056 19.7333 4.44308C20.9439 5.41464 21.8923 6.5944 22.4938 8.03632C22.6248 8.35246 22.7868 8.44499 23.1106 8.42957C23.8431 8.40644 24.5757 8.42186 25.3082 8.42186C25.5935 8.42186 25.8788 8.4527 26.141 8.24451C26.3337 8.09029 26.5651 8.19825 26.7116 8.39102C26.8658 8.5915 26.8349 8.8074 26.6653 8.98475C26.4725 9.17752 26.2181 9.20836 26.0484 9.01559C25.8634 8.81511 25.6552 8.81511 25.4239 8.81511C24.4986 8.81511 23.5733 8.79969 22.648 8.81511C22.4321 8.81511 22.3395 8.738 22.2624 8.54523C21.0673 5.57657 18.862 3.76453 15.7931 2.99345C15.1685 2.83923 14.5439 2.63104 13.8885 2.59249C13.6032 2.57707 13.5569 2.65417 13.5646 2.89321C13.5723 3.18622 13.5955 3.48694 13.5569 3.77995C13.5107 4.15778 13.6957 4.23489 14.0119 4.25031C14.8523 4.28115 15.662 4.48164 16.4331 4.79778C18.9237 5.82332 20.5661 7.62765 21.3526 10.2031C21.4451 10.4961 21.5607 10.5963 21.8769 10.5886C22.995 10.5655 24.113 10.5809 25.2311 10.5809Z" fill="#33B8A4" />
+                    <path d="M24.0671 12.4312C24.7765 12.4312 25.4782 12.4312 26.1876 12.4312C26.4729 12.4312 26.7582 12.4543 27.0203 12.2538C27.2208 12.1073 27.4753 12.169 27.6218 12.3926C27.7606 12.5931 27.7374 12.8244 27.5601 12.9941C27.375 13.1714 27.1206 13.2177 26.9355 13.0326C26.735 12.8399 26.5114 12.8167 26.2647 12.8167C24.8382 12.8167 23.4117 12.8244 21.9852 12.809C21.7153 12.809 21.669 12.9247 21.6536 13.1483C21.4608 16.4948 19.1013 19.4712 15.8628 20.4659C15.1842 20.674 14.498 20.8205 13.7886 20.8283C13.6112 20.8283 13.5341 20.8745 13.5418 21.0673C13.5495 21.476 13.5495 21.8924 13.5418 22.301C13.5418 22.5015 13.6421 22.5324 13.8117 22.5092C14.3052 22.4321 14.791 22.3396 15.2768 22.2239C15.9862 22.0466 16.6956 21.9001 17.3664 21.6071C19.7259 20.5815 21.4069 18.9006 22.363 16.4948C22.5866 15.9396 22.7562 15.369 22.9644 14.8138C23.0415 14.6133 23.1264 14.5671 23.3191 14.5748C23.643 14.5902 23.9591 14.5748 24.283 14.5671C24.5374 14.5671 24.7688 14.5825 24.977 14.3589C25.1466 14.1738 25.4088 14.2278 25.5938 14.4283C25.7635 14.6133 25.7712 14.8293 25.6092 15.022C25.4396 15.2148 25.2237 15.2765 24.9924 15.13C24.4912 14.8138 23.9437 15.0143 23.4271 14.9989C23.2652 14.9912 23.2497 15.2842 23.2035 15.4461C22.7177 17.0345 21.9929 18.4842 20.844 19.6948C19.4714 21.1521 17.7982 22.0851 15.8397 22.5401C15.1534 22.6943 14.4748 22.8948 13.7654 22.9256C13.565 22.9333 13.5418 23.049 13.5418 23.2032C13.5495 23.5502 13.5573 23.8972 13.5341 24.2442C13.5187 24.4909 13.6112 24.5526 13.8426 24.5372C14.8295 24.4832 15.8011 24.329 16.7572 24.0668C18.2146 23.6658 19.6025 23.1338 20.7823 22.1468C21.5534 21.5068 22.1625 20.7357 22.6406 19.8567C22.71 19.7256 22.7331 19.61 22.6714 19.4634C22.5635 19.2013 22.656 18.9622 22.9182 18.8543C23.1726 18.7541 23.4117 18.8312 23.5273 19.0933C23.643 19.3555 23.5427 19.5714 23.296 19.7025C23.1881 19.7565 23.1109 19.8181 23.0493 19.9261C21.8618 22.2702 19.8493 23.5579 17.4127 24.2904C16.1327 24.6682 14.8295 24.9381 13.4879 24.9227C13.2103 24.9227 13.1486 24.8456 13.1486 24.5757C13.1563 23.3034 13.1563 22.0311 13.1409 20.7589C13.1409 20.5198 13.1948 20.435 13.457 20.4273C17.2739 20.3502 20.4199 17.7131 21.1524 13.9811C21.2372 13.5647 21.2912 13.1483 21.2526 12.7242C21.2295 12.4929 21.3066 12.4158 21.5457 12.4158C22.3938 12.4389 23.2343 12.4312 24.0671 12.4312Z" fill="#33B8A4" />
+                    <path d="M15.6007 12.7549C16.1404 12.7549 16.6802 12.7626 17.2199 12.7472C17.4358 12.7395 17.4975 12.8243 17.4744 13.017C17.3819 13.8267 17.2353 14.6209 16.9192 15.3765C16.8729 15.4922 16.8344 15.577 16.6416 15.5076C15.8166 15.2146 14.9684 14.9833 14.0739 15.0296C13.8426 15.045 13.7038 14.9447 13.7115 14.6672C13.7346 14.112 13.7269 13.5645 13.7115 13.0093C13.7038 12.8088 13.7732 12.7395 13.9737 12.7472C14.5211 12.7626 15.0609 12.7549 15.6007 12.7549Z" fill="#33B8A4" />
+                    <path d="M15.5851 12.1844C15.0454 12.1844 14.5056 12.1767 13.9736 12.1844C13.7962 12.1844 13.7268 12.1381 13.7268 11.9454C13.7345 11.3285 13.7345 10.7193 13.7268 10.1025C13.7268 9.92513 13.8116 9.87115 13.9581 9.90199C14.8372 10.0948 15.7008 9.90199 16.549 9.72464C16.8574 9.65525 16.9191 9.77091 17.0039 9.99452C17.2506 10.6345 17.3509 11.3131 17.4588 11.9839C17.4897 12.1844 17.3663 12.1844 17.2275 12.1767C16.6878 12.1844 16.1326 12.1844 15.5851 12.1844Z" fill="#33B8A4" />
+                    <path d="M20.0574 12.8556C19.9957 14.1818 19.5331 15.3384 18.7774 16.3948C18.6618 16.549 18.5615 16.5953 18.3842 16.4411C18.1683 16.2483 17.9061 16.1095 17.6517 15.9707C17.4743 15.8782 17.4203 15.8088 17.5051 15.6006C17.8059 14.8449 18.0449 14.0816 18.0526 13.2488C18.0526 12.9481 18.1374 12.7013 18.5538 12.7476C18.9856 12.7939 19.4251 12.7553 19.8569 12.763C19.9418 12.7553 20.0651 12.7091 20.0574 12.8556Z" fill="#33B8A4" />
+                    <path d="M19.1087 12.1618C18.7771 12.1618 18.3607 12.2852 18.1371 12.1309C17.9058 11.969 18.0369 11.5141 17.9752 11.1979C17.8749 10.6967 17.7516 10.2032 17.5742 9.73288C17.4971 9.5324 17.5048 9.44758 17.713 9.36277C18.0677 9.21626 18.407 9.03891 18.7385 8.85385C18.8928 8.76132 18.9467 8.79988 19.0315 8.93867C19.633 9.87939 19.9646 10.9126 20.0725 12.0153C20.0879 12.1849 20.0108 12.2081 19.8797 12.2003C19.6253 12.1926 19.3631 12.2003 19.1087 12.2003C19.1087 12.1772 19.1087 12.1695 19.1087 12.1618Z" fill="#33B8A4" />
+                    <path d="M13.7268 18.9162C13.7268 17.8367 13.7268 16.8189 13.7268 15.7933C13.7268 15.6314 13.8039 15.5929 13.9427 15.6083C14.7755 15.6777 15.6005 15.7856 16.3947 16.0786C16.495 16.1172 16.5798 16.1558 16.495 16.2945C15.8164 17.4126 14.9374 18.2916 13.7268 18.9162Z" fill="#33B8A4" />
+                    <path d="M16.5719 9.06964C15.7623 9.30868 14.9449 9.36265 14.1199 9.33181C13.8731 9.3241 13.7035 9.24699 13.7112 8.92314C13.7343 8.05181 13.7189 7.1882 13.7189 6.2552C15.0066 6.91061 15.9088 7.85904 16.5719 9.06964Z" fill="#33B8A4" />
+                    <path d="M10.0176 19.1627C8.79157 18.6924 7.82001 17.9598 6.96411 16.9034C7.58098 16.9034 8.12073 16.9034 8.66049 16.9034C8.9535 16.9034 9.25422 16.8957 9.54723 16.9034C9.80169 16.9112 10.0099 17.0268 10.0176 17.3121C10.0253 17.9136 10.0176 18.5073 10.0176 19.1627Z" fill="#33B8A4" />
+                    <path d="M14.6753 6.03119C15.8319 6.27794 16.8343 6.70974 17.6825 7.45769C17.9293 7.6736 18.2223 7.84323 18.3919 8.14395C18.469 8.27504 18.4459 8.3213 18.3302 8.36757C18.2917 8.38299 18.2608 8.39841 18.23 8.41383C17.9215 8.56034 17.6054 8.83793 17.3047 8.82251C16.9731 8.79937 16.9114 8.3213 16.7109 8.05142C16.2175 7.39601 15.6931 6.77914 15.0069 6.30878C14.9066 6.23938 14.8141 6.14685 14.6753 6.03119Z" fill="#33B8A4" />
+                    <path d="M15.1453 18.8082C15.9086 18.145 16.5409 17.4048 17.0421 16.5412C17.1115 16.4178 17.1886 16.4255 17.2966 16.4795C17.3891 16.5335 17.4739 16.5797 17.5587 16.6337C18.353 17.1503 18.3298 16.9961 17.6359 17.5976C16.9187 18.2067 16.0937 18.6308 15.1453 18.8082Z" fill="#33B8A4" />
+                </svg>
                 <p>Thing</p>
             </div>
             <div className={clsx(styles.SDKWorkflow__item, styles.thing2)}>
-                <FontAwesomeIcon icon={faTemperatureHalf} className={styles.icon} />
+                <svg width="auto" height="auto" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" className={clsx(styles.icon, styles.thingwebLogo)}>
+                    <path d="M11.2439 25C11.2362 24.4834 11.0511 24.0053 10.9509 23.5041C10.92 23.3653 10.8275 23.3268 10.7041 23.3113C10.4111 23.2651 10.1104 23.2496 9.84052 23.1417C9.42414 22.9721 9.1851 23.1186 8.96149 23.4655C8.76872 23.7663 8.60679 24.1904 8.29065 24.2752C7.9745 24.36 7.64294 24.0361 7.31909 23.8896C6.94126 23.7277 6.57885 23.5427 6.20102 23.373C6.01596 23.2959 5.95427 23.188 6.01596 22.9875C6.10849 22.6713 6.14704 22.3321 6.24728 22.0236C6.33981 21.746 6.28584 21.5687 6.03909 21.4145C5.77692 21.2525 5.53018 21.0598 5.31427 20.8439C5.10608 20.6434 4.92873 20.6434 4.70512 20.7899C4.69741 20.7976 4.68199 20.8053 4.67428 20.8053C4.28874 20.9672 3.89549 21.3991 3.55621 21.2911C3.21693 21.1831 2.99332 20.6897 2.73115 20.3658C2.50754 20.0959 2.29935 19.8183 2.07573 19.5562C1.95236 19.4097 1.95236 19.3017 2.07573 19.1552C2.28393 18.9239 2.44585 18.6617 2.66947 18.4458C2.92392 18.1991 2.9779 17.9677 2.74658 17.6824C2.68489 17.6053 2.6232 17.5128 2.60007 17.4126C2.45356 16.6646 1.96778 16.5181 1.2661 16.5952C0.595259 16.6646 0.587548 16.6106 0.425621 15.9398C0.302248 15.4155 0.194297 14.8911 0.0477916 14.3745C-0.0138949 14.1586 0.0477916 14.0815 0.22514 14.0044C0.564416 13.8579 0.895981 13.6805 1.23526 13.534C1.39718 13.4646 1.46658 13.3721 1.45887 13.187C1.43574 12.7861 1.44345 12.3928 1.45887 11.9919C1.46658 11.8068 1.40489 11.7143 1.23526 11.6526C0.88827 11.5138 0.556705 11.3442 0.217429 11.1976C0.0400808 11.1205 -0.0370273 11.028 0.0169484 10.8198C0.178875 10.1644 0.31767 9.50127 0.456465 8.83814C0.495019 8.64537 0.587548 8.56055 0.79574 8.56826C1.15815 8.58368 1.51285 8.56055 1.87525 8.57597C2.09116 8.58368 2.19911 8.51429 2.27622 8.31381C2.42272 7.95911 2.59236 7.61212 2.762 7.27285C2.84682 7.11092 2.84682 7.00297 2.71573 6.86417C2.46128 6.58658 2.25308 6.27815 1.99863 6.00827C1.8367 5.83863 1.85212 5.73068 1.99092 5.56105C2.42272 5.03671 2.84682 4.50466 3.2632 3.96491C3.38657 3.80298 3.49452 3.76443 3.67958 3.87238C4.00344 4.04973 4.35042 4.19623 4.67428 4.37358C4.8362 4.4584 4.94416 4.45069 5.08295 4.32732C5.37596 4.07286 5.66897 3.82611 5.98512 3.61021C6.17018 3.47913 6.19331 3.34033 6.13933 3.14756C6.0468 2.80058 5.96198 2.45359 5.86174 2.1066C5.80777 1.92154 5.85403 1.79817 6.0468 1.71335C6.67138 1.42034 7.29595 1.11962 7.91282 0.811187C8.06703 0.734078 8.19812 0.718657 8.29065 0.896005C8.29836 0.903716 8.30607 0.919138 8.31378 0.926849C8.60679 1.26612 8.78414 1.80588 9.17739 1.92154C9.54751 2.02949 10.0102 1.77504 10.442 1.69793C10.6887 1.65938 10.8198 1.54371 10.8506 1.28926C10.9046 0.949981 10.9894 0.610705 11.0511 0.27143C11.082 0.0863704 11.1591 -0.0138702 11.375 0.00155142C11.7065 0.0246839 12.0458 0.016973 12.3774 0.00155142C12.5701 -0.00615939 12.6473 0.0478163 12.6473 0.256008C12.6395 1.58227 12.6395 2.90082 12.6473 4.22708C12.6473 4.48153 12.5162 4.47382 12.3388 4.48153C8.81498 4.61262 6.3321 6.33213 4.98271 9.55525C3.10898 14.0506 5.90801 19.2554 10.6579 20.2887C11.213 20.4121 11.7682 20.4738 12.3388 20.466C12.5393 20.466 12.6395 20.4969 12.6395 20.7359C12.6318 22.0622 12.6318 23.3807 12.6395 24.707C12.6395 24.8149 12.6087 24.9075 12.5547 24.9923C12.1152 25 11.6834 25 11.2439 25Z" fill="#33B8A4" />
+                    <path d="M12.4933 14.7757C12.4933 16.2253 12.4933 17.6827 12.4933 19.1323C12.4933 19.2094 12.4933 19.2865 12.4933 19.3636C12.4856 19.4716 12.5241 19.6027 12.339 19.6104C12.154 19.6181 12.1771 19.4947 12.1771 19.3791C12.1771 19.1092 12.1771 18.8393 12.1771 18.5694C12.1771 17.621 12.1771 16.6649 12.1771 15.7164C12.1771 15.0687 11.7993 14.6909 11.1593 14.6678C10.6427 14.6523 10.5578 14.5675 10.5578 14.0586C10.5578 13.5034 10.5656 12.956 10.5578 12.4008C10.5578 12.2311 10.5964 12.1309 10.7429 12.0229C11.167 11.6991 11.2056 11.2056 10.8663 10.8509C10.5501 10.5193 10.0181 10.5348 9.70966 10.8895C9.40123 11.2519 9.47063 11.7608 9.90243 12.0461C10.0644 12.154 10.0798 12.2697 10.0798 12.4316C10.0798 12.9868 10.0721 13.5343 10.0798 14.0894C10.0875 14.8065 10.3882 15.1227 11.0976 15.1535C11.5834 15.1767 11.7145 15.3077 11.7145 15.7781C11.7145 16.9502 11.7068 18.1145 11.7222 19.2865C11.7222 19.5179 11.6913 19.5795 11.4292 19.541C10.5116 19.4022 10.5039 19.4176 10.5039 18.5077C10.5039 18.1222 10.5116 17.7367 10.5039 17.3511C10.4885 16.8036 10.126 16.4412 9.57858 16.4412C8.69183 16.4335 7.80509 16.4335 6.91835 16.4412C6.71016 16.4412 6.59449 16.3796 6.48654 16.2022C6.21666 15.7318 6.00076 15.2461 5.8157 14.7371C5.73859 14.5135 5.76173 14.4056 6.0316 14.4133C6.30148 14.421 6.5251 14.4056 6.71787 14.6909C6.97232 15.0687 7.50437 15.0687 7.83593 14.7449C8.15208 14.4364 8.15979 13.9584 7.85135 13.6422C7.55063 13.3261 6.98003 13.3106 6.73329 13.6808C6.44799 14.0972 6.07016 13.9044 5.73088 13.9352C5.60751 13.9429 5.58438 13.8041 5.56896 13.7039C5.51498 13.249 5.45329 12.7863 5.46871 12.3237C5.47643 12.1463 5.55353 12.1155 5.70775 12.1155C6.57136 12.1232 7.42726 12.1155 8.29087 12.1155C8.56846 12.1155 8.72268 12.2697 8.72268 12.5473C8.73039 13.141 8.72268 13.727 8.73039 14.3208C8.73039 14.4827 8.63015 14.5367 8.52991 14.6215C8.15208 14.9453 8.12123 15.4851 8.46051 15.809C8.78436 16.1174 9.30099 16.0865 9.58629 15.7473C9.91014 15.3694 9.84074 14.8759 9.39352 14.5906C9.21617 14.475 9.19304 14.3593 9.19304 14.182C9.20075 13.6576 9.20075 13.1256 9.19304 12.6013C9.18533 11.9921 8.84605 11.6451 8.2369 11.6374C7.44268 11.6297 6.64076 11.6297 5.84654 11.6374C5.62293 11.6374 5.50727 11.5988 5.56124 11.3367C6.13956 8.55308 7.75883 6.69477 10.4422 5.73863C10.8046 5.60755 10.8894 5.70779 10.8509 6.05477C10.8277 6.2861 10.8354 6.51742 10.8509 6.74875C10.8663 7.09573 10.8586 7.38874 10.5039 7.62778C10.1492 7.86681 10.2032 8.41428 10.5193 8.715C10.8354 9.01573 11.3212 9.0003 11.6219 8.68416C11.915 8.36802 11.9304 7.84368 11.5834 7.58923C11.3444 7.41188 11.3058 7.22682 11.3135 6.97236C11.3212 6.5714 11.3212 6.17815 11.3135 5.77718C11.3058 5.59213 11.3675 5.50731 11.568 5.48417C12.4933 5.37622 12.4933 5.36851 12.4933 6.30923C12.4933 7.27308 12.4856 8.23693 12.501 9.20079C12.501 9.43211 12.447 9.50922 12.2003 9.50922C11.2904 9.4938 10.3728 9.50151 9.46291 9.50922C9.3087 9.50922 9.21617 9.46295 9.11593 9.33187C8.79207 8.90006 8.32171 8.8538 7.95931 9.19307C7.61232 9.52464 7.61232 10.0336 7.96702 10.342C8.32171 10.6504 8.85376 10.5887 9.13135 10.1646C9.24701 9.98729 9.37038 9.96416 9.54002 9.96416C10.4113 9.97187 11.2904 9.97958 12.1617 9.95644C12.4393 9.94873 12.501 10.0413 12.501 10.3034C12.4856 11.7993 12.4933 13.2875 12.4933 14.7757Z" fill="#33B8A4" />
+                    <path d="M25.2311 10.5809C26.3492 10.5809 27.4672 10.5809 28.5853 10.5809C28.7626 10.5809 28.9169 10.5886 29.0634 10.4267C29.2484 10.2185 29.5029 10.2185 29.7111 10.4344C29.8961 10.6272 29.8961 10.8662 29.7419 11.0667C29.5646 11.2903 29.3024 11.298 29.0942 11.1206C28.9323 10.9818 28.7781 10.9818 28.6007 10.9818C26.2489 10.9818 23.8971 10.9818 21.553 10.9973C21.26 10.9973 21.1444 10.9356 21.0595 10.6349C20.1651 7.43488 18.06 5.50717 14.8446 4.75922C14.4051 4.65898 13.9579 4.62814 13.5107 4.63585C13.2716 4.64356 13.1714 4.58959 13.1714 4.31971C13.1868 3.032 13.1791 1.75201 13.1714 0.464304C13.1714 0.263823 13.2022 0.163582 13.4413 0.171293C16.302 0.271533 18.9622 0.957795 21.2061 2.83923C21.9232 3.44068 22.4783 4.1732 22.9101 5.00597C22.995 5.17561 23.0875 5.32211 23.2803 5.42235C23.5193 5.53802 23.581 5.76934 23.4653 6.01609C23.3497 6.26283 23.126 6.33994 22.8793 6.25512C22.6326 6.1703 22.4938 5.93898 22.594 5.69994C22.7019 5.44549 22.594 5.28356 22.4938 5.09079C21.3834 3.09369 19.6253 1.93707 17.4894 1.26623C16.3405 0.90382 15.1685 0.649363 13.9579 0.564544C13.6649 0.541412 13.5261 0.603098 13.5569 0.934663C13.5801 1.22767 13.5801 1.5284 13.5569 1.82141C13.5415 2.08357 13.634 2.15297 13.8962 2.19152C16.0167 2.48454 18.0292 3.07056 19.7333 4.44308C20.9439 5.41464 21.8923 6.5944 22.4938 8.03632C22.6248 8.35246 22.7868 8.44499 23.1106 8.42957C23.8431 8.40644 24.5757 8.42186 25.3082 8.42186C25.5935 8.42186 25.8788 8.4527 26.141 8.24451C26.3337 8.09029 26.5651 8.19825 26.7116 8.39102C26.8658 8.5915 26.8349 8.8074 26.6653 8.98475C26.4725 9.17752 26.2181 9.20836 26.0484 9.01559C25.8634 8.81511 25.6552 8.81511 25.4239 8.81511C24.4986 8.81511 23.5733 8.79969 22.648 8.81511C22.4321 8.81511 22.3395 8.738 22.2624 8.54523C21.0673 5.57657 18.862 3.76453 15.7931 2.99345C15.1685 2.83923 14.5439 2.63104 13.8885 2.59249C13.6032 2.57707 13.5569 2.65417 13.5646 2.89321C13.5723 3.18622 13.5955 3.48694 13.5569 3.77995C13.5107 4.15778 13.6957 4.23489 14.0119 4.25031C14.8523 4.28115 15.662 4.48164 16.4331 4.79778C18.9237 5.82332 20.5661 7.62765 21.3526 10.2031C21.4451 10.4961 21.5607 10.5963 21.8769 10.5886C22.995 10.5655 24.113 10.5809 25.2311 10.5809Z" fill="#33B8A4" />
+                    <path d="M24.0671 12.4312C24.7765 12.4312 25.4782 12.4312 26.1876 12.4312C26.4729 12.4312 26.7582 12.4543 27.0203 12.2538C27.2208 12.1073 27.4753 12.169 27.6218 12.3926C27.7606 12.5931 27.7374 12.8244 27.5601 12.9941C27.375 13.1714 27.1206 13.2177 26.9355 13.0326C26.735 12.8399 26.5114 12.8167 26.2647 12.8167C24.8382 12.8167 23.4117 12.8244 21.9852 12.809C21.7153 12.809 21.669 12.9247 21.6536 13.1483C21.4608 16.4948 19.1013 19.4712 15.8628 20.4659C15.1842 20.674 14.498 20.8205 13.7886 20.8283C13.6112 20.8283 13.5341 20.8745 13.5418 21.0673C13.5495 21.476 13.5495 21.8924 13.5418 22.301C13.5418 22.5015 13.6421 22.5324 13.8117 22.5092C14.3052 22.4321 14.791 22.3396 15.2768 22.2239C15.9862 22.0466 16.6956 21.9001 17.3664 21.6071C19.7259 20.5815 21.4069 18.9006 22.363 16.4948C22.5866 15.9396 22.7562 15.369 22.9644 14.8138C23.0415 14.6133 23.1264 14.5671 23.3191 14.5748C23.643 14.5902 23.9591 14.5748 24.283 14.5671C24.5374 14.5671 24.7688 14.5825 24.977 14.3589C25.1466 14.1738 25.4088 14.2278 25.5938 14.4283C25.7635 14.6133 25.7712 14.8293 25.6092 15.022C25.4396 15.2148 25.2237 15.2765 24.9924 15.13C24.4912 14.8138 23.9437 15.0143 23.4271 14.9989C23.2652 14.9912 23.2497 15.2842 23.2035 15.4461C22.7177 17.0345 21.9929 18.4842 20.844 19.6948C19.4714 21.1521 17.7982 22.0851 15.8397 22.5401C15.1534 22.6943 14.4748 22.8948 13.7654 22.9256C13.565 22.9333 13.5418 23.049 13.5418 23.2032C13.5495 23.5502 13.5573 23.8972 13.5341 24.2442C13.5187 24.4909 13.6112 24.5526 13.8426 24.5372C14.8295 24.4832 15.8011 24.329 16.7572 24.0668C18.2146 23.6658 19.6025 23.1338 20.7823 22.1468C21.5534 21.5068 22.1625 20.7357 22.6406 19.8567C22.71 19.7256 22.7331 19.61 22.6714 19.4634C22.5635 19.2013 22.656 18.9622 22.9182 18.8543C23.1726 18.7541 23.4117 18.8312 23.5273 19.0933C23.643 19.3555 23.5427 19.5714 23.296 19.7025C23.1881 19.7565 23.1109 19.8181 23.0493 19.9261C21.8618 22.2702 19.8493 23.5579 17.4127 24.2904C16.1327 24.6682 14.8295 24.9381 13.4879 24.9227C13.2103 24.9227 13.1486 24.8456 13.1486 24.5757C13.1563 23.3034 13.1563 22.0311 13.1409 20.7589C13.1409 20.5198 13.1948 20.435 13.457 20.4273C17.2739 20.3502 20.4199 17.7131 21.1524 13.9811C21.2372 13.5647 21.2912 13.1483 21.2526 12.7242C21.2295 12.4929 21.3066 12.4158 21.5457 12.4158C22.3938 12.4389 23.2343 12.4312 24.0671 12.4312Z" fill="#33B8A4" />
+                    <path d="M15.6007 12.7549C16.1404 12.7549 16.6802 12.7626 17.2199 12.7472C17.4358 12.7395 17.4975 12.8243 17.4744 13.017C17.3819 13.8267 17.2353 14.6209 16.9192 15.3765C16.8729 15.4922 16.8344 15.577 16.6416 15.5076C15.8166 15.2146 14.9684 14.9833 14.0739 15.0296C13.8426 15.045 13.7038 14.9447 13.7115 14.6672C13.7346 14.112 13.7269 13.5645 13.7115 13.0093C13.7038 12.8088 13.7732 12.7395 13.9737 12.7472C14.5211 12.7626 15.0609 12.7549 15.6007 12.7549Z" fill="#33B8A4" />
+                    <path d="M15.5851 12.1844C15.0454 12.1844 14.5056 12.1767 13.9736 12.1844C13.7962 12.1844 13.7268 12.1381 13.7268 11.9454C13.7345 11.3285 13.7345 10.7193 13.7268 10.1025C13.7268 9.92513 13.8116 9.87115 13.9581 9.90199C14.8372 10.0948 15.7008 9.90199 16.549 9.72464C16.8574 9.65525 16.9191 9.77091 17.0039 9.99452C17.2506 10.6345 17.3509 11.3131 17.4588 11.9839C17.4897 12.1844 17.3663 12.1844 17.2275 12.1767C16.6878 12.1844 16.1326 12.1844 15.5851 12.1844Z" fill="#33B8A4" />
+                    <path d="M20.0574 12.8556C19.9957 14.1818 19.5331 15.3384 18.7774 16.3948C18.6618 16.549 18.5615 16.5953 18.3842 16.4411C18.1683 16.2483 17.9061 16.1095 17.6517 15.9707C17.4743 15.8782 17.4203 15.8088 17.5051 15.6006C17.8059 14.8449 18.0449 14.0816 18.0526 13.2488C18.0526 12.9481 18.1374 12.7013 18.5538 12.7476C18.9856 12.7939 19.4251 12.7553 19.8569 12.763C19.9418 12.7553 20.0651 12.7091 20.0574 12.8556Z" fill="#33B8A4" />
+                    <path d="M19.1087 12.1618C18.7771 12.1618 18.3607 12.2852 18.1371 12.1309C17.9058 11.969 18.0369 11.5141 17.9752 11.1979C17.8749 10.6967 17.7516 10.2032 17.5742 9.73288C17.4971 9.5324 17.5048 9.44758 17.713 9.36277C18.0677 9.21626 18.407 9.03891 18.7385 8.85385C18.8928 8.76132 18.9467 8.79988 19.0315 8.93867C19.633 9.87939 19.9646 10.9126 20.0725 12.0153C20.0879 12.1849 20.0108 12.2081 19.8797 12.2003C19.6253 12.1926 19.3631 12.2003 19.1087 12.2003C19.1087 12.1772 19.1087 12.1695 19.1087 12.1618Z" fill="#33B8A4" />
+                    <path d="M13.7268 18.9162C13.7268 17.8367 13.7268 16.8189 13.7268 15.7933C13.7268 15.6314 13.8039 15.5929 13.9427 15.6083C14.7755 15.6777 15.6005 15.7856 16.3947 16.0786C16.495 16.1172 16.5798 16.1558 16.495 16.2945C15.8164 17.4126 14.9374 18.2916 13.7268 18.9162Z" fill="#33B8A4" />
+                    <path d="M16.5719 9.06964C15.7623 9.30868 14.9449 9.36265 14.1199 9.33181C13.8731 9.3241 13.7035 9.24699 13.7112 8.92314C13.7343 8.05181 13.7189 7.1882 13.7189 6.2552C15.0066 6.91061 15.9088 7.85904 16.5719 9.06964Z" fill="#33B8A4" />
+                    <path d="M10.0176 19.1627C8.79157 18.6924 7.82001 17.9598 6.96411 16.9034C7.58098 16.9034 8.12073 16.9034 8.66049 16.9034C8.9535 16.9034 9.25422 16.8957 9.54723 16.9034C9.80169 16.9112 10.0099 17.0268 10.0176 17.3121C10.0253 17.9136 10.0176 18.5073 10.0176 19.1627Z" fill="#33B8A4" />
+                    <path d="M14.6753 6.03119C15.8319 6.27794 16.8343 6.70974 17.6825 7.45769C17.9293 7.6736 18.2223 7.84323 18.3919 8.14395C18.469 8.27504 18.4459 8.3213 18.3302 8.36757C18.2917 8.38299 18.2608 8.39841 18.23 8.41383C17.9215 8.56034 17.6054 8.83793 17.3047 8.82251C16.9731 8.79937 16.9114 8.3213 16.7109 8.05142C16.2175 7.39601 15.6931 6.77914 15.0069 6.30878C14.9066 6.23938 14.8141 6.14685 14.6753 6.03119Z" fill="#33B8A4" />
+                    <path d="M15.1453 18.8082C15.9086 18.145 16.5409 17.4048 17.0421 16.5412C17.1115 16.4178 17.1886 16.4255 17.2966 16.4795C17.3891 16.5335 17.4739 16.5797 17.5587 16.6337C18.353 17.1503 18.3298 16.9961 17.6359 17.5976C16.9187 18.2067 16.0937 18.6308 15.1453 18.8082Z" fill="#33B8A4" />
+                </svg>
                 <p>Thing</p>
             </div>
             <div className={clsx(styles.SDKWorkflow__item, styles.td)}>
diff --git a/src/components/SDKWorkflow/styles.module.scss b/src/components/SDKWorkflow/styles.module.scss
index c0647cc..98f4269 100644
--- a/src/components/SDKWorkflow/styles.module.scss
+++ b/src/components/SDKWorkflow/styles.module.scss
@@ -4,19 +4,87 @@
     width: 100%;
     height: 100%;
     display: grid;
-    grid: repeat(6, 1fr) / repeat(5, 1fr);
+    grid: repeat(5, 1fr);
     gap: .5rem;
     grid-template-areas:
-        ". . td . ."
-        ". . . . desktop"
-        "thing1 . . nodeWot ."
+        ". . td desktop ."
+        "thing1 . nodeWot . ."
         ". tm . . phone"
         "thing2 . dartWot . tablet"
         ". . . nodeRed .";
 
-    // &__line {
-    //     position: absolute;
-    // }
+    --_item-width: clamp(2.5rem, 1.7857142857142858rem + 3.571428571428571vw, 5rem);
+    --_item-gap: clamp(0.25rem, 0.17857142857142858rem + 0.35714285714285715vw, 0.5rem);
+    --_item-font-size: clamp(0.35rem, 0.25rem + 0.49999999999999994vw, 0.7rem);
+    --_item-inactive-icon: clamp(1.25rem, 0.9642857142857143rem + 1.4285714285714286vw, 2.25rem);
+    --_item-active-icon: clamp(1rem, 0.7857142857142857rem + 1.0714285714285714vw, 1.75rem);
+    --_thingweb-inactive-icon: clamp(1.4rem, 1.0857142857142856rem + 1.5714285714285716vw, 2.5rem);
+    --_thingweb-active-icon: clamp(1.2rem, 1.0428571428571427rem + 0.7857142857142858vw, 1.75rem);
+    --_item-translate-icon: clamp(0.2rem, 0.14285714285714288rem + 0.2857142857142857vw, 0.4rem);
+
+    &__line {
+        position: absolute;
+    }
+
+    .line1 {
+        top: clamp(5.25rem, 4.178571428571429rem + 5.357142857142857vw, 9rem);
+        left: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        width: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        height: auto;
+        stroke-dasharray: 8rem;
+        stroke-dashoffset: 8rem;
+        animation: animateLine1 10s ease-in-out infinite 250ms;
+    }
+
+    .line2 {
+        top: clamp(3.35rem, 2.6642857142857146rem + 3.428571428571428vw, 5.75rem);
+        left: clamp(9.35rem, 7.235714285714286rem + 10.571428571428571vw, 16.75rem);
+        width: clamp(2rem, 1.5714285714285714rem + 2.142857142857143vw, 3.5rem);
+        height: auto;
+        stroke-dasharray: 6rem;
+        stroke-dashoffset: 6rem;
+        animation: animateLine2 10s ease-in-out infinite 250ms;
+    }
+
+    .line3 {
+        top: clamp(11.25rem, 8.75rem + 12.5vw, 20rem);
+        left: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        width: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
+        height: auto;
+        stroke-dasharray: 8rem;
+        stroke-dashoffset: 8rem;
+        animation: animateLine3 10s ease-in-out infinite 5.25s;
+    }
+
+    .line4 {
+        top: clamp(8.25rem, 6.392857142857142rem + 9.285714285714286vw, 14.75rem);
+        left: clamp(8.25rem, 6.535714285714286rem + 8.571428571428571vw, 14.25rem);
+        width: clamp(5.75rem, 4.821428571428571rem + 4.642857142857143vw, 9rem);
+        height: auto;
+        stroke-dasharray: 11rem;
+        stroke-dashoffset: 11rem;
+        animation: animateLine4 10s ease-in-out infinite 5.25s;
+    }
+
+    .line5 {
+        top: clamp(12.5rem, 9.642857142857142rem + 14.285714285714285vw, 22.5rem);
+        left: clamp(2.25rem, 2.0357142857142856rem + 1.0714285714285714vw, 3rem);
+        width: clamp(8rem, 6rem + 10vw, 15rem);
+        height: auto;
+        stroke-dasharray: 17rem;
+        stroke-dashoffset: 17rem;
+        animation: animateLine5 10s ease-in-out infinite 5.25s;
+    }
+
+    .line6 {
+        top: clamp(12.5rem, 9.642857142857142rem + 14.285714285714285vw, 22.5rem);
+        left: clamp(12.25rem, 9.464285714285715rem + 13.928571428571429vw, 22rem);
+        width: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
+        height: auto;
+        stroke-dasharray: 6rem;
+        stroke-dashoffset: 6rem;
+        animation: animateLine6 10s ease-in-out infinite 5.25s;
+    }
 
 
     .thing1 {
@@ -24,10 +92,10 @@
         animation: showItemBox 10s ease-in-out infinite;
 
         .icon {
-            animation: showItemIconSvg 10s ease-in-out infinite;
+            animation: showThingwebSvg 10s ease-in-out infinite;
 
             path {
-                animation: showItemIconPathPrimary 10s ease-in-out infinite;
+                animation: showThingwebPath 10s ease-in-out infinite;
             }
         }
 
@@ -41,10 +109,10 @@
         animation: showItemBox 10s ease-in-out infinite 5s;
 
         .icon {
-            animation: showItemIconSvg 10s ease-in-out infinite 5s;
+            animation: showThingwebSvg 10s ease-in-out infinite 5s;
 
             path {
-                animation: showItemIconPathPrimary 10s ease-in-out infinite 5s;
+                animation: showThingwebPath 10s ease-in-out infinite 5s;
             }
         }
 
@@ -59,19 +127,6 @@
 
     .tm {
         grid-area: tm;
-        // animation: showItemBox 10s ease-in-out infinite 5s;
-
-        // .icon {
-        //     animation: showItemIconSvg 10s ease-in-out infinite 5s;
-
-        //     path {
-        //         animation: showItemIconPathSecondary 10s ease-in-out infinite 5s;
-        //     }
-        // }
-
-        // p {
-        //     animation: showItemText 10s ease-in-out infinite 5s;
-        // }
     }
 
     .nodeWot {
@@ -178,7 +233,7 @@
 
     &__item {
         aspect-ratio: 1/1;
-        min-width: clamp(4rem, 2.857142857142857rem + 2.380952380952381vw, 5rem);
+        min-width: var(--_item-width);
         background-color: var(--neutral-clr-75);
         border-radius: 5px;
         border: 1px solid var(--neutral-clr-300);
@@ -191,28 +246,33 @@
         gap: 0;
 
         p {
-            font-size: 0.6rem;
-            font-size: clamp(0.6rem, 0.4857142857142857rem + 0.23809523809523803vw, 0.7rem);
+            font-size: 0.35rem;
+            font-size: var(--_item-font-size);
             line-height: normal;
             font-weight: var(--fw-bold);
             font-family: var(--ff-primary);
             opacity: 0;
             transform: translateY(.9rem);
-            transition: all 350ms ease-in-out;
         }
 
         .icon {
-            transform: translateY(.4rem);
-            font-size: 1.75rem;
-            font-size: clamp(1.75rem, 1.1785714285714286rem + 1.1904761904761905vw, 2.25rem);
-            transition: all 350ms ease-in-out;
+            transform: translateY(var(--_item-translate-icon));
+            font-size: 1.25rem;
+            font-size: var(--_item-inactive-icon);
 
             path {
-                transition: all 350ms ease-in-out;
                 stroke: var(--neutral-clr-300);
                 stroke-width: 20px;
                 fill: var(--neutral-clr-75);
             }
+
+            &.thingwebLogo {
+                height: var(--_thingweb-inactive-icon);
+
+                path {
+                    stroke-width: .75px;
+                }
+            }
         }
     }
 }
@@ -231,7 +291,8 @@
         background-color: var(--neutral-clr-50);
         transform: scale(1.05);
         box-shadow: 3px 3px 10px var(--box-shadow-clr);
-        gap: .5rem;
+        gap: 0.25rem;
+        gap: var(--_item-gap);
     }
 
     30% {
@@ -239,7 +300,8 @@
         background-color: var(--neutral-clr-50);
         transform: scale(1.05);
         box-shadow: 3px 3px 10px var(--box-shadow-clr);
-        gap: .5rem;
+        gap: 0.25rem;
+        gap: var(--_item-gap);
     }
 
     38% {
@@ -261,33 +323,89 @@
 
 @keyframes showItemIconSvg {
     0% {
-        transform: translateY(.4rem);
-        font-size: 1.75rem;
-        font-size: clamp(1.75rem, 1.1785714285714286rem + 1.1904761904761905vw, 2.25rem);
+        transform: translateY(var(--_item-translate-icon));
+        font-size: 1.25rem;
+        font-size: var(--_item-inactive-icon);
+    }
+
+    6% {
+        transform: translateY(0);
+        font-size: 1rem;
+        font-size: var(--_item-active-icon);
+    }
+
+    30% {
+        transform: translateY(0);
+        font-size: 1rem;
+        font-size: var(--_item-active-icon);
+    }
+
+    38% {
+        transform: translateY(var(--_item-translate-icon));
+        font-size: 1.25rem;
+        font-size: var(--_item-inactive-icon);
+    }
+
+    100% {
+        transform: translateY(var(--_item-translate-icon));
+        font-size: 1.25rem;
+        font-size: var(--_item-inactive-icon);
+    }
+}
+
+@keyframes showThingwebSvg {
+    0% {
+        transform: translateY(var(--_item-translate-icon));
+        height: var(--_thingweb-inactive-icon);
     }
 
     6% {
         transform: translateY(0);
-        font-size: 1.5rem;
-        font-size: clamp(1.5rem, 1.2142857142857144rem + 0.5952380952380952vw, 1.75rem);
+        height: var(--_thingweb-active-icon);
     }
 
     30% {
         transform: translateY(0);
-        font-size: 1.5rem;
-        font-size: clamp(1.5rem, 1.2142857142857144rem + 0.5952380952380952vw, 1.75rem);
+        height: var(--_thingweb-active-icon);
     }
 
     38% {
-        transform: translateY(.4rem);
-        font-size: 1.75rem;
-        font-size: clamp(1.75rem, 1.1785714285714286rem + 1.1904761904761905vw, 2.25rem);
+        transform: translateY(var(--_item-translate-icon));
+        height: var(--_thingweb-inactive-icon);
+
     }
 
     100% {
-        transform: translateY(.4rem);
-        font-size: 1.75rem;
-        font-size: clamp(1.75rem, 1.1785714285714286rem + 1.1904761904761905vw, 2.25rem);
+        transform: translateY(var(--_item-translate-icon));
+        height: var(--_thingweb-inactive-icon);
+
+    }
+}
+
+@keyframes showThingwebPath {
+    0% {
+        stroke-width: .75px;
+        fill: var(--neutral-clr-75);
+    }
+
+    4% {
+        stroke-width: 0;
+        fill: var(--ifm-color-primary);
+    }
+
+    30% {
+        stroke-width: 0;
+        fill: var(--ifm-color-primary);
+    }
+
+    38% {
+        stroke-width: .75px;
+        fill: var(--neutral-clr-75);
+    }
+
+    100% {
+        stroke-width: .75px;
+        fill: var(--neutral-clr-75);
     }
 }
 
@@ -370,4 +488,136 @@
         transform: translateY(.9rem);
         opacity: 0;
     }
+}
+
+@keyframes animateLine1 {
+    0% {
+        stroke-dashoffset: 8rem;
+    }
+
+    4% {
+        stroke-dashoffset: 0;
+    }
+
+    30% {
+        stroke-dashoffset: 0;
+    }
+
+    38% {
+        stroke-dashoffset: -8rem;
+    }
+
+    100% {
+        stroke-dashoffset: -8rem;
+    }
+}
+
+@keyframes animateLine2 {
+    0% {
+        stroke-dashoffset: 6rem;
+    }
+
+    4% {
+        stroke-dashoffset: 0;
+    }
+
+    30% {
+        stroke-dashoffset: 0;
+    }
+
+    38% {
+        stroke-dashoffset: -6rem;
+    }
+
+    100% {
+        stroke-dashoffset: -6rem;
+    }
+}
+
+@keyframes animateLine3 {
+    0% {
+        stroke-dashoffset: 8rem;
+    }
+
+    4% {
+        stroke-dashoffset: 0;
+    }
+
+    30% {
+        stroke-dashoffset: 0;
+    }
+
+    38% {
+        stroke-dashoffset: -8rem;
+    }
+
+    100% {
+        stroke-dashoffset: -8rem;
+    }
+}
+
+@keyframes animateLine4 {
+    0% {
+        stroke-dashoffset: 11rem;
+    }
+
+    4% {
+        stroke-dashoffset: 0;
+    }
+
+    30% {
+        stroke-dashoffset: 0;
+    }
+
+    38% {
+        stroke-dashoffset: -11rem;
+    }
+
+    100% {
+        stroke-dashoffset: -11rem;
+    }
+}
+
+@keyframes animateLine5 {
+    0% {
+        stroke-dashoffset: 17rem;
+    }
+
+    4% {
+        stroke-dashoffset: 0;
+    }
+
+    30% {
+        stroke-dashoffset: 0;
+    }
+
+    38% {
+        stroke-dashoffset: -17rem;
+    }
+
+    100% {
+        stroke-dashoffset: -17rem;
+    }
+}
+
+@keyframes animateLine6 {
+    0% {
+        stroke-dashoffset: 6rem;
+    }
+
+    4% {
+        stroke-dashoffset: 0;
+    }
+
+    30% {
+        stroke-dashoffset: 0;
+    }
+
+    38% {
+        stroke-dashoffset: -6rem;
+    }
+
+    100% {
+        stroke-dashoffset: -6rem;
+    }
 }
\ No newline at end of file
diff --git a/src/components/ServicesSection/styles.module.scss b/src/components/ServicesSection/styles.module.scss
index 320d997..4e3512a 100644
--- a/src/components/ServicesSection/styles.module.scss
+++ b/src/components/ServicesSection/styles.module.scss
@@ -17,8 +17,8 @@
 
   .thing,
   .protocol {
-    width: 19rem;
-    height: 19rem;
+    width: 18rem;
+    height: 18rem;
     padding: 1rem;
     border-radius: 1rem;
     box-shadow: 1px 1px 10px var(--box-shadow-clr), inset 0px 0px 5px var(--box-shadow-clr);
@@ -62,6 +62,7 @@
     &__description {
       font-size: var(--fs-body-sm);
       color: var(--neutral-clr-600);
+      direction: ltr;
     }
 
     &__tags {
@@ -97,7 +98,6 @@
 
 @media screen and (min-width: 768px) {
   .servicesSection {
-
     .thing,
     .protocol {
       height: 16rem;
diff --git a/src/components/WorkflowsSection/index.js b/src/components/WorkflowsSection/index.js
index cedab76..40f97c8 100644
--- a/src/components/WorkflowsSection/index.js
+++ b/src/components/WorkflowsSection/index.js
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faThumbsUp } from '@fortawesome/free-solid-svg-icons'
 import ClientOnlyWorkflow from '@site/src/components/ClientOnlyWorkflow';
 import SDKWorkflow from '@site/src/components/SDKWorkflow';
+import PlatformWorkflow from '@site/src/components/PlatformWorkflow';
 
 export default function WorkflowsSection() {
 
@@ -49,7 +50,7 @@ export default function WorkflowsSection() {
         <section className={styles.workflowsSection}>
             <div className={clsx('container', 'section-wrapper')}>
                 <div className={styles.workflowsSection__buttons}>
-                    <input type="radio" id="sw-btn" className={styles.workflowBtn} name="workflow-btn" value="sw" defaultChecked />
+                    <input type="radio" id="sw-btn" className={styles.workflowBtn} name="workflow-btn" value="sw" defaultChecked/>
                     <div className={clsx(styles.progressBar, styles.barLeft)} data-show="false" id='progress-bar-left'></div>
                     <input type="radio" id="hw-btn" className={styles.workflowBtn} name="workflow-btn" value="hw" />
                     <div className={clsx(styles.progressBar, styles.barRight)} data-show="false" id='progress-bar-right'></div>
@@ -91,7 +92,7 @@ export default function WorkflowsSection() {
 
                         <div className={clsx(styles.workflow, styles.professionalW)} id='workflow' data-workflow="simple">
                             <div className={styles.workflow__illustration}>
-
+                                <PlatformWorkflow />
                             </div>
                             <div className={styles.workflow__content}>
                                 <h1 className={styles.title}>Platform</h1>
diff --git a/src/components/WorkflowsSection/styles.module.scss b/src/components/WorkflowsSection/styles.module.scss
index c1c50db..a6217ee 100644
--- a/src/components/WorkflowsSection/styles.module.scss
+++ b/src/components/WorkflowsSection/styles.module.scss
@@ -39,18 +39,10 @@
             gap: 2rem;
             transition: transform 500ms ease-in-out;
 
-            &[data-workflow="simple"] {
+            &[data-workflow="simple"], &[data-workflow="homogeneous"], &[data-workflow="professional"] {
                 transform: translateX(0);
             }
 
-            &[data-workflow="homogeneous"] {
-                transform: translateX(-100%);
-            }
-
-            &[data-workflow="professional"] {
-                transform: translateX(-200%);
-            }
-
             &__illustration {
                 order: 2;
                 width: 100%;
@@ -75,11 +67,12 @@
                 }
 
                 .description {
-                   font-size: var(--fs-body-lg);
-                   margin-bottom: 2rem;
+                    font-size: var(--fs-body-lg);
+                    margin-bottom: 2rem;
                 }
 
-                .description, .benefit {
+                .description,
+                .benefit {
                     color: var(--neutral-clr-600);
                 }
 
@@ -88,7 +81,7 @@
                     &:not(:last-child) {
                         margin-bottom: 1rem;
                     }
-                    
+
                     .icon {
                         margin-right: 1rem;
                         color: var(--ifm-color-primary);
@@ -193,6 +186,19 @@
                 flex-direction: row;
                 gap: 8rem;
 
+                &[data-workflow="simple"] {
+                    transform: translateX(0);
+                }
+
+                &[data-workflow="homogeneous"] {
+                    transform: translateX(-100%);
+                }
+
+                &[data-workflow="professional"] {
+                    transform: translateX(-200%);
+                }
+
+
                 &__illustration {
                     order: 1;
                     width: 50%;