@carbon-labs/react-animated-header 0.29.0 → 0.31.0

package/assets/index.js

@@ -6,26 +6,56 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import dataFabricAnimatedLight from './animated/header_1312x738_data_fabric_light_03.json';
-import dataFabricAnimatedDark from './animated/header_1312x738_data_fabric_dark_06.json';
-import dataFabricStaticLight from './static/illustration_data_fabric_light_04.svg';
-import dataFabricStaticDark from './static/illustration_data_fabric_dark_05.svg';
-import watsonXAnimatedLight from './animated/header_1312x738_watsonx_data_light_03.json';
-import watsonXAnimatedDark from './animated/header_1312x738_watsonx_data_dark_02.json';
-import watsonXStaticLight from './static/illustration_watson_x_data_light_03.svg';
-import watsonXStaticDark from './static/illustration_watson_x_data_dark_03.svg';
-import wxbiaAnimatedLight from './animated/header_illustration_container_wxbia_light_08.json';
-import wxbiaAnimatedDark from './animated/header_illustration_container_wxbia_dark_05.json';
+
+// ------------ Static (SVG) ------------
+import dataFabricStaticLight from './static/header_static_data_fabric_light_06.svg';
+import dataFabricStaticDark from './static/header_static_data_fabric_dark_06.svg';
+
+import db2StaticLight from './static/header_static_db2_light_02.svg';
+import db2StaticDark from './static/header_static_db2_dark_02.svg';
+
+import watsonXStaticLight from './static/header_static_watsonx_data_light_06.svg';
+import watsonXStaticDark from './static/header_static_watsonx_data_dark_05.svg';
+
+import watsonXAStaticLight from './static/header_static_watsonx_a_light_01.svg';
+import watsonXAStaticDark from './static/header_static_watsonx_a_dark_01.svg';
+
+import wxbiaStaticLight from './static/header_static_wxbia_light_01.svg';
+import wxbiaStaticDark from './static/header_static_wxbia_dark_01.svg';
+
+// ------------ Animated (JSON/Lottie) ------------
+import dataFabricAnimatedLight from './animated/header_animated_data_fabric_light_03.json';
+import dataFabricAnimatedDark from './animated/header_animated_data_fabric_dark_06.json';
+
+import watsonXAnimatedLight from './animated/header_animated_watsonx_data_light_04.json';
+import watsonXAnimatedDark from './animated/header_animated_watsonx_data_dark_03.json';
+
+import watsonXAAnimatedLight from './animated/header_animated_watsonx_a_light_06.json';
+import watsonXAAnimatedDark from './animated/header_animated_watsonx_a_dark_06.json';
+
+import wxbiaAnimatedLight from './animated/header_animated_wxbia_light_09.json';
+import wxbiaAnimatedDark from './animated/header_animated_wxbia_dark_06.json';
 
 export {
+  // Animated
   dataFabricAnimatedLight,
   dataFabricAnimatedDark,
-  dataFabricStaticLight,
-  dataFabricStaticDark,
   watsonXAnimatedLight,
   watsonXAnimatedDark,
-  watsonXStaticLight,
-  watsonXStaticDark,
+  watsonXAAnimatedLight,
+  watsonXAAnimatedDark,
   wxbiaAnimatedLight,
   wxbiaAnimatedDark,
+
+  // Static
+  dataFabricStaticLight,
+  dataFabricStaticDark,
+  db2StaticLight,
+  db2StaticDark,
+  watsonXStaticLight,
+  watsonXStaticDark,
+  watsonXAStaticLight,
+  watsonXAStaticDark,
+  wxbiaStaticLight,
+  wxbiaStaticDark,
 };

package/assets/static/{illustration_data_fabric_dark_05.svg → header_static_data_fabric_dark_06.svg}

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="illustrations" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1312 738">
-  <!-- Generator: Adobe Illustrator 29.2.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 116)  -->
+  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
   <defs>
     <style>
       .st0, .st1 {
@@ -25,9 +25,9 @@
       <rect class="st0" width="1312" height="738"/>
     </clipPath>
   </defs>
-  <g id="data_fabric_-_light">
+  <g id="data_fabric_-_dark">
     <g class="st3">
-      <g id="data_fabric_-_light1">
+      <g id="uuid-3c823569-064a-40eb-a878-8af5ce6d38311">
         <g>
           <path class="st1" d="M0,162.6h824"/>
           <path class="st1" d="M0,217.7h823.8"/>

package/assets/static/{illustration_data_fabric_light_04.svg → header_static_data_fabric_light_06.svg}

@@ -1,27 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="illustrations" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1312 738">
-  <!-- Generator: Adobe Illustrator 29.2.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 116)  -->
+  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
   <defs>
     <style>
       .st0, .st1 {
         fill: none;
       }
 
-      .st1 {
-        stroke: #82cfff;
-        stroke-miterlimit: 10;
-      }
-
-      .st2, .st3 {
+      .st2 {
         fill: #d9fbfb;
         stroke: #03ddbd;
       }
 
-      .st3 {
-        stroke-width: 1px;
+      .st1 {
+        stroke: #adbeaf;
+        stroke-miterlimit: 10;
       }
 
-      .st4 {
+      .st3 {
         clip-path: url(#clippath);
       }
     </style>
@@ -30,8 +26,8 @@
     </clipPath>
   </defs>
   <g id="data_fabric_-_light">
-    <g class="st4">
-      <g id="data_fabric_-_light1">
+    <g class="st3">
+      <g id="uuid-3c823569-064a-40eb-a878-8af5ce6d3831">
         <g>
           <path class="st1" d="M0,162.6h824"/>
           <path class="st1" d="M0,217.7h823.8"/>
@@ -59,7 +55,7 @@
           <path class="st1" d="M1247.4,162.4c-84.3,163.6-242.7,275-423.6,275"/>
           <path class="st1" d="M1247.4,162.4c-84.3,130.8-242.8,220.1-423.6,220.1"/>
         </g>
-        <path class="st3" d="M1254.4,162.5c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+        <path class="st2" d="M1254.4,162.5c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
         <path class="st2" d="M464.1,107.8c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
         <path class="st2" d="M647.5,107.8c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
         <path class="st2" d="M464.1,162.6c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>

package/assets/static/header_static_db2_dark_02.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1312 738">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke: #003a6d;
+      }
+
+      .cls-1, .cls-2 {
+        fill: none;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-3 {
+        fill: #e0e0e0;
+      }
+
+      .cls-4 {
+        fill: #161616;
+        stroke: #007d79;
+      }
+
+      .cls-5 {
+        fill: #d9fbfb;
+        stroke: #03ddbd;
+      }
+
+      .cls-2 {
+        stroke: #a6c8ff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-2" d="M-2148.3,0v171.3s0,72,72.4,72h583.6"/>
+      <path class="cls-2" d="M-2804.3,98.9h1016.5s72.5,1,72.5-73V0"/>
+      <path class="cls-2" d="M-2805,315.2h1162s81.3.3,81.3-71.9v-45.9"/>
+      <path class="cls-2" d="M-2804.3,171.3h1016.5s144.4.5,144.4-145.3V0"/>
+      <path class="cls-2" d="M-2804.3,26h1160.3s82.3,0,82.3,80.9v631.1"/>
+      <path class="cls-5" d="M-1556.6,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <line class="cls-2" x1="-1859.7" x2="-1859.7" y2="738"/>
+      <line class="cls-2" x1="-2004" x2="-2004" y2="738"/>
+      <line class="cls-2" x1="-2075.9" x2="-2075.9" y2="738"/>
+      <line class="cls-2" x1="-1931.9" x2="-1931.9" y2="738"/>
+      <line class="cls-2" x1="-1787.8" x2="-1787.8" y2="738"/>
+      <path class="cls-5" d="M-1782.6,20.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-5" d="M-1638.3,20.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-5" d="M-1926.7,93.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-5" d="M-1854.6,166.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-5" d="M-1854.6,310c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-5" d="M-1926.7,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-5" d="M-1996.9,25.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-5" d="M-2068.8,98.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-5" d="M-2068.8,171.3c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-5" d="M-1780.7,171.3c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-5" d="M-1782.6,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <g>
+        <rect class="cls-3" x="-2466.1" y="121.6" width="223.5" height="176.1"/>
+        <rect class="cls-3" x="-2225.6" y="121.6" width="223.5" height="176.1"/>
+        <rect class="cls-3" x="-1986.4" y="121.6" width="223.5" height="176.1"/>
+        <rect class="cls-3" x="-1746.1" y="121.6" width="223.5" height="176.1"/>
+      </g>
+      <path class="cls-1" d="M656.3-.3v171.3s0,72,72.4,72h583.6"/>
+      <path class="cls-1" d="M.3,98.6h1016.5s72.5,1,72.5-73V-.3"/>
+      <path class="cls-1" d="M-.3,314.8h1162s81.3.3,81.3-71.9v-45.9"/>
+      <path class="cls-1" d="M.3,170.9h1016.5s144.4.5,144.4-145.3V-.3"/>
+      <path class="cls-1" d="M.3,25.7h1160.3s82.3,0,82.3,80.9v631.1"/>
+      <path class="cls-4" d="M1248.1,237.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <line class="cls-1" x1="944.9" y1="-.3" x2="944.9" y2="737.7"/>
+      <line class="cls-1" x1="800.6" y1="-.3" x2="800.6" y2="737.7"/>
+      <line class="cls-1" x1="728.7" y1="-.3" x2="728.7" y2="737.7"/>
+      <line class="cls-1" x1="872.8" y1="-.3" x2="872.8" y2="737.7"/>
+      <line class="cls-1" x1="1016.9" y1="-.3" x2="1016.9" y2="737.7"/>
+      <path class="cls-4" d="M1022,20.5c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-4" d="M1166.4,20.5c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-4" d="M877.9,93.4c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-4" d="M950.1,165.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-4" d="M950.1,309.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-4" d="M877.9,237.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-4" d="M807.7,25.6c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-4" d="M735.8,98.6c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-4" d="M735.8,170.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-4" d="M1024,170.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-4" d="M1022,237.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+    </g>
+  </g>
+</svg>

package/assets/static/header_static_db2_light_02.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1312 738">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #d9fbfb;
+        stroke: #03ddbd;
+      }
+
+      .cls-2 {
+        fill: none;
+        stroke: #a6c8ff;
+        stroke-miterlimit: 10;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-2" d="M656,0v171.3s0,72,72.4,72h583.6"/>
+      <path class="cls-2" d="M0,98.9h1016.5s72.5,1,72.5-73V0"/>
+      <path class="cls-2" d="M-.6,315.2h1162s81.3.3,81.3-71.9v-45.9"/>
+      <path class="cls-2" d="M0,171.3h1016.5s144.4.5,144.4-145.3V0"/>
+      <path class="cls-2" d="M0,26h1160.3s82.3,0,82.3,80.9v631.1"/>
+      <path class="cls-1" d="M1247.8,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <line class="cls-2" x1="944.6" x2="944.6" y2="738"/>
+      <line class="cls-2" x1="800.3" x2="800.3" y2="738"/>
+      <line class="cls-2" x1="728.4" x2="728.4" y2="738"/>
+      <line class="cls-2" x1="872.5" x2="872.5" y2="738"/>
+      <line class="cls-2" x1="1016.5" x2="1016.5" y2="738"/>
+      <path class="cls-1" d="M1021.7,20.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-1" d="M1166.1,20.8c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-1" d="M877.6,93.7c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-1" d="M949.8,166.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-1" d="M949.8,310c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-1" d="M877.6,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+      <path class="cls-1" d="M807.4,25.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-1" d="M735.5,98.9c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-1" d="M735.5,171.3c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-1" d="M1023.6,171.3c0,3.9-3.2,7.1-7.1,7.1s-7.1-3.2-7.1-7.1,3.2-7.1,7.1-7.1,7.1,3.2,7.1,7.1Z"/>
+      <path class="cls-1" d="M1021.7,238.1c5.9,7.5-2.9,16.2-10.3,10.3-5.9-7.5,2.9-16.2,10.3-10.3Z"/>
+    </g>
+  </g>
+</svg>

package/assets/static/header_static_watsonx_a_dark_01.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="illustrations" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1312 738">
+  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
+  <defs>
+    <style>
+      .st0 {
+        stroke: url(#linear-gradient1);
+      }
+
+      .st0, .st1, .st2, .st3, .st4, .st5, .st6 {
+        fill: none;
+      }
+
+      .st0, .st1, .st4, .st5, .st6 {
+        stroke-miterlimit: 10;
+        stroke-width: 2px;
+      }
+
+      .st1 {
+        stroke: url(#linear-gradient3);
+      }
+
+      .st2 {
+        stroke: url(#linear-gradient6);
+      }
+
+      .st2, .st3 {
+        stroke-miterlimit: 10;
+        stroke-width: 2px;
+      }
+
+      .st3 {
+        stroke: url(#linear-gradient2);
+      }
+
+      .st3, .st4, .st5 {
+        display: none;
+      }
+
+      .st4 {
+        stroke: url(#linear-gradient5);
+      }
+
+      .st5 {
+        stroke: url(#linear-gradient4);
+      }
+
+      .st6 {
+        stroke: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="221.3" y1="-12.1" x2="929.8" y2="696.5" gradientTransform="translate(157 11) rotate(-45)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient1" x1="430" y1="7" x2="1182" y2="7" gradientTransform="translate(0 -286)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient2" x1="731.8" y1="-44.8" x2="1233.8" y2="-44.8" gradientTransform="translate(256.2 -994) rotate(45)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient3" x1="169" y1="527.7" x2="671" y2="527.7" gradientTransform="translate(-41 -53.4) rotate(-45)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient4" x1="305" y1="132" x2="557" y2="132" gradientTransform="translate(0 -286)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient5" x1="1055" y1="132" x2="1307" y2="132" gradientTransform="translate(0 -286)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient6" x1="-301" y1="213.8" x2="451" y2="213.8" gradientTransform="translate(707.8 175.2) rotate(-135)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+  </defs>
+  <g id="watsonx_a_-_dark">
+    <g id="Layer_11">
+      <circle class="st6" cx="806" cy="-154" r="500"/>
+      <circle class="st0" cx="806" cy="-279" r="375"/>
+      <circle class="st3" cx="982.8" cy="-330.8" r="250" transform="translate(521.7 598.1) rotate(-45)"/>
+      <circle class="st1" cx="629.2" cy="22.8" r="250"/>
+      <circle class="st5" cx="431" cy="-154" r="125"/>
+      <circle class="st4" cx="1181" cy="-154" r="125"/>
+      <circle class="st2" cx="806" cy="-29" r="375"/>
+    </g>
+  </g>
+</svg>

package/assets/static/header_static_watsonx_a_light_01.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="illustrations" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1312 738">
+  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
+  <defs>
+    <style>
+      .st0 {
+        stroke: url(#linear-gradient1);
+      }
+
+      .st0, .st1, .st2, .st3, .st4, .st5, .st6 {
+        fill: none;
+      }
+
+      .st0, .st1, .st4, .st5, .st6 {
+        stroke-miterlimit: 10;
+        stroke-width: 2px;
+      }
+
+      .st1 {
+        stroke: url(#linear-gradient3);
+      }
+
+      .st2 {
+        stroke: url(#linear-gradient6);
+      }
+
+      .st2, .st3 {
+        stroke-miterlimit: 10;
+        stroke-width: 2px;
+      }
+
+      .st3 {
+        stroke: url(#linear-gradient2);
+      }
+
+      .st3, .st4, .st5 {
+        display: none;
+      }
+
+      .st4 {
+        stroke: url(#linear-gradient5);
+      }
+
+      .st5 {
+        stroke: url(#linear-gradient4);
+      }
+
+      .st6 {
+        stroke: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="221.3" y1="-12.1" x2="929.8" y2="696.5" gradientTransform="translate(157 11) rotate(-45)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e8daff"/>
+      <stop offset=".8" stop-color="#bae6ff"/>
+      <stop offset="1" stop-color="#f4f4f4"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient1" x1="430" y1="7" x2="1182" y2="7" gradientTransform="translate(0 -286)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e8daff"/>
+      <stop offset=".8" stop-color="#bae6ff"/>
+      <stop offset="1" stop-color="#f4f4f4"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient2" x1="731.8" y1="-44.8" x2="1233.8" y2="-44.8" gradientTransform="translate(256.2 -994) rotate(45)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient3" x1="169" y1="527.7" x2="671" y2="527.7" gradientTransform="translate(-41 -53.4) rotate(-45)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e8daff"/>
+      <stop offset=".8" stop-color="#bae6ff"/>
+      <stop offset="1" stop-color="#f4f4f4"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient4" x1="305" y1="132" x2="557" y2="132" gradientTransform="translate(0 -286)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient5" x1="1055" y1="132" x2="1307" y2="132" gradientTransform="translate(0 -286)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#31135e"/>
+      <stop offset=".8" stop-color="#012749"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient6" x1="-301" y1="213.8" x2="451" y2="213.8" gradientTransform="translate(707.8 175.2) rotate(-135)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e8daff"/>
+      <stop offset=".8" stop-color="#bae6ff"/>
+      <stop offset="1" stop-color="#f4f4f4"/>
+    </linearGradient>
+  </defs>
+  <g id="watsonx_a_-_light">
+    <g id="Layer_1">
+      <circle class="st6" cx="806" cy="-154" r="500"/>
+      <circle class="st0" cx="806" cy="-279" r="375"/>
+      <circle class="st3" cx="982.8" cy="-330.8" r="250" transform="translate(521.7 598.1) rotate(-45)"/>
+      <circle class="st1" cx="629.2" cy="22.8" r="250"/>
+      <circle class="st5" cx="431" cy="-154" r="125"/>
+      <circle class="st4" cx="1181" cy="-154" r="125"/>
+      <circle class="st2" cx="806" cy="-29" r="375"/>
+    </g>
+  </g>
+</svg>

package/assets/static/header_static_watsonx_data_dark_05.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="illustrations" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1312 738">
+  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: none;
+        stroke: #003a6d;
+        stroke-miterlimit: 10;
+      }
+
+      .st1 {
+        fill: #1c0f30;
+        stroke: #491d8b;
+      }
+    </style>
+  </defs>
+  <g id="watsonx.data_-_dark">
+    <path class="st0" d="M843.1.4v737.6"/>
+    <path class="st0" d="M780.1.4v737.6"/>
+    <path class="st0" d="M717.2.4v737.6"/>
+    <path class="st0" d="M654.2.4v737.6"/>
+    <path class="st0" d="M717.2,62.8H0"/>
+    <path class="st0" d="M717.3,311.7H0"/>
+    <path class="st0" d="M843.1,62.8h-63.2"/>
+    <path class="st0" d="M843.1,125.8H0"/>
+    <path class="st0" d="M843.1,188.7H0"/>
+    <path class="st0" d="M843.1,251.6H0"/>
+    <path class="st1" d="M677.7,94.3c0,4.4,3.5,8,8,8s8-3.6,8-8-3.5-8-8-8-8,3.6-8,8Z"/>
+    <path class="st1" d="M677.7,157.2c0,4.4,3.5,8,8,8s8-3.6,8-8-3.5-8-8-8-8,3.6-8,8Z"/>
+    <path class="st1" d="M677.7,220.1c0,4.4,3.5,8.1,8,8.1s8-3.6,8-8.1-3.5-7.9-8-7.9-8,3.6-8,7.9Z"/>
+    <path class="st1" d="M878.1,153.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <path class="st1" d="M913.1,118.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <path class="st1" d="M948.1,83.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <path class="st1" d="M981.1,48.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <path class="st1" d="M1018.1,13.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <circle id="circle5" class="st0" cx="878.1" cy="188.7" r="35"/>
+    <circle id="circle11" class="st0" cx="913.1" cy="188.7" r="70"/>
+    <circle id="circle21" class="st0" cx="948.1" cy="188.7" r="105"/>
+    <circle id="circle31" class="st0" cx="983.1" cy="188.7" r="140"/>
+    <circle id="circle41" class="st0" cx="1018.1" cy="188.7" r="175"/>
+  </g>
+</svg>

package/assets/static/header_static_watsonx_data_light_06.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="illustrations" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1312 738">
+  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #f6f2ff;
+        stroke: #d4bbff;
+      }
+
+      .st0, .st1 {
+        stroke-miterlimit: 10;
+      }
+
+      .st1 {
+        fill: none;
+        stroke: #a6c8ff;
+      }
+    </style>
+  </defs>
+  <g id="watsonx.data_-_light">
+    <path class="st1" d="M843.1.4v737.6"/>
+    <path class="st1" d="M780.1.4v737.6"/>
+    <path class="st1" d="M717.2.4v737.6"/>
+    <path class="st1" d="M654.2.4v737.6"/>
+    <path class="st1" d="M717.2,62.8H0"/>
+    <path class="st1" d="M717.3,311.7H0"/>
+    <path class="st1" d="M843.1,62.8h-63.2"/>
+    <path class="st1" d="M843.1,125.8H0"/>
+    <path class="st1" d="M843.1,188.7H0"/>
+    <path class="st1" d="M843.1,251.6H0"/>
+    <path class="st0" d="M677.7,94.3c0,4.4,3.5,8,8,8s8-3.6,8-8-3.5-8-8-8-8,3.6-8,8Z"/>
+    <path class="st0" d="M677.7,157.2c0,4.4,3.5,8,8,8s8-3.6,8-8-3.5-8-8-8-8,3.6-8,8Z"/>
+    <path class="st0" d="M677.7,220.1c0,4.4,3.5,8.1,8,8.1s8-3.6,8-8.1-3.5-7.9-8-7.9-8,3.6-8,7.9Z"/>
+    <path class="st0" d="M878.1,153.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <path class="st0" d="M913.1,118.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <path class="st0" d="M948.1,83.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <path class="st0" d="M981.1,48.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <path class="st0" d="M1018.1,13.7c-5,0-9,4-9,9s4.1,9,9,9,9-4,9-9-4.1-9-9-9Z"/>
+    <circle id="circle" class="st1" cx="878.1" cy="188.7" r="35"/>
+    <circle id="circle1" class="st1" cx="913.1" cy="188.7" r="70"/>
+    <circle id="circle2" class="st1" cx="948.1" cy="188.7" r="105"/>
+    <circle id="circle3" class="st1" cx="983.1" cy="188.7" r="140"/>
+    <circle id="circle4" class="st1" cx="1018.1" cy="188.7" r="175"/>
+  </g>
+</svg>

package/assets/static/header_static_wxbia_dark_01.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="illustrations" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1312 738">
+  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: url(#linear-gradient2);
+      }
+
+      .st1 {
+        fill: url(#linear-gradient1);
+      }
+
+      .st2 {
+        fill: url(#linear-gradient3);
+      }
+
+      .st3 {
+        fill: url(#linear-gradient5);
+      }
+
+      .st4 {
+        fill: url(#linear-gradient4);
+      }
+
+      .st5 {
+        fill: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="-53.3" y1="656.5" x2="596.6" y2="656.5" gradientTransform="translate(0 740) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#491d8b"/>
+      <stop offset=".8" stop-color="#003a6d"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient1" x1="-70.7" y1="414.7" x2="431.3" y2="414.7" gradientTransform="translate(0 740) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#491d8b"/>
+      <stop offset=".8" stop-color="#003a6d"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient2" x1="439" y1="418" x2="989.1" y2="418" gradientTransform="translate(0 740) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#491d8b"/>
+      <stop offset=".8" stop-color="#003a6d"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient3" x1="603.4" y1="418" x2="968.3" y2="418" gradientTransform="translate(0 740) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#491d8b"/>
+      <stop offset=".8" stop-color="#003a6d"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient4" x1="937" y1="998" x2="937" y2="258" gradientTransform="translate(0 740) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#491d8b"/>
+      <stop offset=".8" stop-color="#003a6d"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient5" x1="937" y1="838.3" x2="937" y2="313.7" gradientTransform="translate(0 740) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#491d8b"/>
+      <stop offset=".8" stop-color="#003a6d"/>
+      <stop offset="1" stop-color="#161616"/>
+    </linearGradient>
+  </defs>
+  <g id="wxbia_-_dark__x28_outlined_x29_">
+    <rect class="st5" y="82.5" width="607.1" height="2"/>
+    <rect class="st1" y="324.3" width="439.9" height="2"/>
+    <path class="st0" d="M690,573c-67,0-130.1-26.1-177.5-73.5s-73.5-110.4-73.5-177.5,26.1-130.1,73.5-177.5c47.4-47.4,110.4-73.5,177.5-73.5s130.1,26.1,177.5,73.5c47.4,47.4,73.5,110.4,73.5,177.5s-26.1,130.1-73.5,177.5c-47.4,47.4-110.4,73.5-177.5,73.5ZM690,73c-66.5,0-129,25.9-176.1,72.9-47,47-72.9,109.6-72.9,176.1s25.9,129,72.9,176.1c47,47,109.6,72.9,176.1,72.9s129-25.9,176.1-72.9c47-47,72.9-109.6,72.9-176.1s-25.9-129-72.9-176.1c-47-47-109.6-72.9-176.1-72.9Z"/>
+    <path class="st2" d="M773,489c-92.1,0-167-74.9-167-167s74.9-167,167-167,167,74.9,167,167-74.9,167-167,167ZM773,157c-91,0-165,74-165,165s74,165,165,165,165-74,165-165-74-165-165-165Z"/>
+    <path class="st4" d="M937,404c-88.4,0-171.5-34.4-234.1-96.9-62.5-62.5-96.9-145.6-96.9-234.1s34.4-171.5,96.9-234.1c62.5-62.5,145.6-96.9,234.1-96.9s171.5,34.4,234.1,96.9c62.5,62.5,96.9,145.6,96.9,234.1s-34.4,171.5-96.9,234.1c-62.5,62.5-145.6,96.9-234.1,96.9ZM937-256c-87.9,0-170.5,34.2-232.6,96.4s-96.4,144.8-96.4,232.6,34.2,170.5,96.4,232.6,144.8,96.4,232.6,96.4,170.5-34.2,232.6-96.4c62.1-62.1,96.4-144.8,96.4-232.6s-34.2-170.5-96.4-232.6c-62.1-62.1-144.8-96.4-232.6-96.4Z"/>
+    <path class="st3" d="M937,403c-67,0-130.1-26.1-177.5-73.5s-73.5-110.4-73.5-177.5,26.1-130.1,73.5-177.5c47.4-47.4,110.4-73.5,177.5-73.5s130.1,26.1,177.5,73.5,73.5,110.4,73.5,177.5-26.1,130.1-73.5,177.5-110.4,73.5-177.5,73.5ZM937-97c-66.5,0-129,25.9-176.1,72.9-47,47-72.9,109.6-72.9,176.1s25.9,129,72.9,176.1c47,47,109.6,72.9,176.1,72.9s129-25.9,176.1-72.9c47-47,72.9-109.6,72.9-176.1s-25.9-129-72.9-176.1c-47-47-109.6-72.9-176.1-72.9Z"/>
+  </g>
+</svg>