feat: update integration landing page

_variables.scss

 $yellow: #f1c017;
+$dark-yellow: #b97715;
 $black: #121212;
 $elec-color: #d87b39;
 $gaz-color: #45d1b8;
@@ -6,10 +7,13 @@ $water-color: #3a98ec;
 $grey: #a0a0a0;
 $grey-blue: #454b4e;
 $green: #4dab9a;
+$light-green: #7fd771;
 $orange: #ffa344;
 $pink: #e255a1;
 $blue: #529cca;
+$light-blue: #61f0f2;
 $red: #ff7369;
+$red-alert: #ff0101;
 $purple: #9a6dd7;
 
 $small-device: 768px;

assets/fluid-icons-pipes.svg

+<svg width="723" height="357" viewBox="0 0 723 357" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 56C17 95.8333 17 58.3 17 79.5C17 106 18.5 164 101.5 164C184.5 164 228.5 164 251.5 164C274.5 164 341 159 341 235.5C341 296.7 341 333.333 341 344" stroke="#D87B39" stroke-width="2"/>
+<path d="M707 56C707 95.8333 707 58.3 707 79.5C707 106 705.5 164 622.5 164C539.5 164 503 164 480 164C457 164 390.5 159 390.5 235.5C390.5 296.7 390.5 333.333 390.5 344" stroke="#45D1B8" stroke-width="2"/>
+<path d="M25.5 55.1992C25.5 107 27 154.497 110 154.497C193 154.497 239 154.497 262 154.497C285 154.497 351.5 163.497 351.5 228.997C351.5 290.197 351.5 345.829 351.5 356.496" stroke="#D87B39" stroke-width="2"/>
+<path d="M699.5 56.5C699.5 96.3333 699.5 39.3006 699.5 60.5006C699.5 106.001 698 154.501 615 154.501C532 154.501 492.5 154.501 469.5 154.501C446.5 154.501 380 163.501 380 229.001C380 290.201 380 345.834 380 356.501" stroke="#45D1B8" stroke-width="2"/>
+<path d="M360 350V55" stroke="#3A98EC" stroke-width="2"/>
+<path d="M370 350V55" stroke="#3A98EC" stroke-width="2"/>
+<circle cx="22" cy="22" r="21" fill="#121212" stroke="#D87B39" stroke-width="2"/>
+<path d="M1 22.75L6 26.75L10 19.75L15 30.75L21 13.75L26 29.75L31 17.75L35.7501 28.6265L40 21.5149L43 25" stroke="#D87B39" stroke-width="2"/>
+<circle cx="365" cy="22" r="21" fill="#121212" stroke="#3A98EC" stroke-width="2"/>
+<path d="M345 28.4734C346.185 25.2134 350.157 18.6934 356.558 18.6934C364.56 18.6934 364.56 28.4734 372.562 28.4734C378.963 28.4734 381.453 21.3606 385.009 19.5825" stroke="#3A98EC" stroke-width="2"/>
+<circle cx="701" cy="22" r="21" fill="#121212" stroke="#45D1B8" stroke-width="2"/>
+<circle cx="694" cy="24" r="5" fill="#121212" stroke="#45D1B8" stroke-width="2"/>
+<circle cx="704" cy="32" r="3" fill="#121212" stroke="#45D1B8" stroke-width="2"/>
+<circle cx="703" cy="17" r="8" fill="#121212" stroke="#45D1B8" stroke-width="2"/>
+</svg>

assets/fluid-pipes-yellow.svg

+<svg width="692" height="366" viewBox="0 0 692 366" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 300.501C1 260.668 1 298.201 1 277.001C1 250.501 2.5 192.501 85.5 192.501C168.5 192.501 212.5 192.501 235.5 192.501C258.5 192.501 325 197.501 325 121.001C325 59.801 325 23.1676 325 12.501" stroke="#E3B82A" stroke-width="2"/>
+<path d="M691 300.501C691 260.668 691 298.201 691 277.001C691 250.501 689.5 192.501 606.5 192.501C523.5 192.501 487 192.501 464 192.501C441 192.501 374.5 197.501 374.5 121.001C374.5 59.801 374.5 23.1676 374.5 12.501" stroke="#E3B82A" stroke-width="2"/>
+<path d="M9.5 301.302C9.5 249.501 11 202.004 94 202.004C177 202.004 223 202.004 246 202.004C269 202.004 335.5 193.004 335.5 127.504C335.5 66.3043 335.5 10.6717 335.5 0.00506592" stroke="#E3B82A" stroke-width="2"/>
+<path d="M683.5 300.001C683.5 260.168 683.5 317.2 683.5 296C683.5 250.5 682 202 599 202C516 202 476.5 202 453.5 202C430.5 202 364 193 364 127.5C364 66.3003 364 10.667 364 0.000366211" stroke="#E3B82A" stroke-width="2"/>
+<path d="M344 6.00097V366.001" stroke="#E3B82A" stroke-width="2"/>
+<path d="M354 6.00097V366.001" stroke="#E3B82A" stroke-width="2"/>
+</svg>

assets/pattern-dot.svg

+<svg width="932" height="4" viewBox="0 0 932 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="69" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="113" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="157" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="201" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="245" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="289" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="333" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="377" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="421" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="465" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="509" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="553" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="597" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="641" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="685" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="729" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="773" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="817" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="861" cy="2" r="2" fill="#F4C93B"/>
+<circle cx="905" cy="2" r="2" fill="#F4C93B"/>
+</svg>