From 386bae398e5b328ea9ded6039077a19db9909088 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Sun, 22 Mar 2026 17:36:20 +0000
Subject: [PATCH 01/14] refactor(SplashViz): migrate from SCSS to Tailwind CSS

---
 src/components/SplashViz/SplashViz.jsx  | 14 +++--
 src/components/SplashViz/SplashViz.scss | 74 -------------------------
 2 files changed, 9 insertions(+), 79 deletions(-)
 delete mode 100644 src/components/SplashViz/SplashViz.scss

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 5427b5602f1b..4680de497c31 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -9,13 +9,16 @@ import TextRotator from "../TextRotater/TextRotater.jsx";
 import HomeSVG from "./SplashVizSVG.mjs";
 
 // Load Styling
-import "./SplashViz.scss";
+// Tailwind CSS is now used for styling. Custom SCSS removed.
 
 export default class SplashViz extends Component {
   render() {
     return (
-      <section className="splash-viz dark:bg-gray-900!">
-        <h1 className="splash-viz__heading">
+      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden pb-16 p-4 min-h-[40rem] h-[clamp(35rem,100vh-80px,45rem)] bg-[#2b3a42] dark:bg-gray-900 md:h-[clamp(30rem,100vh-80px,35rem)] sm:min-h-[clamp(40rem,100vh-80px,50rem)]">
+        <h1
+          className="text-white text-center font-light mt-20 text-4xl md:text-5xl"
+          style={{ gridRow: "1/2" }}
+        >
           <span> bundle your</span>
           <TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
             <span> assets </span>
@@ -25,11 +28,12 @@ export default class SplashViz extends Component {
           </TextRotator>
         </h1>
         <div
-          className="splash-viz__modules"
+          className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block"
+          style={{ gridRow: "2/3" }}
           dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
         ></div>
         <Cube
-          className="splash-viz__cube"
+          className="absolute left-0 right-0 top-0 bottom-0 m-auto z-10"
           depth={120}
           repeatDelay={5000}
           continuous
diff --git a/src/components/SplashViz/SplashViz.scss b/src/components/SplashViz/SplashViz.scss
deleted file mode 100644
index 2708b9605984..000000000000
--- a/src/components/SplashViz/SplashViz.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@use "../../styles/partials/functions" as *;
-@use "../../styles/partials/vars" as *;
-@use "../../styles/partials/mixins" as *;
-@use "sass:map";
-
-.splash-viz {
-  position: relative;
-  height: clamp(35rem, calc(100vh - 80px), 45rem);
-  background: getColor(elephant);
-  display: grid;
-  grid-template-rows: auto 1fr;
-  overflow: hidden;
-  padding-bottom: 4rem;
-  padding: 1rem;
-
-  &__heading {
-    color: getColor(white);
-    font-size: getFontSize(4);
-    text-align: center;
-    font-weight: 200;
-    margin-top: 80px;
-
-    grid-row: 1/2;
-    @include break {
-      font-size: getFontSize(5);
-      margin-top: 90px;
-    }
-  }
-
-  &__modules {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 60vw;
-    min-width: 550px;
-    max-width: map.get($screens, medium);
-    margin: 0 auto;
-    transform: translate(-50%, -50%);
-    display: none;
-    grid-row: 2/3;
-    @include break {
-      display: block;
-    }
-
-    img {
-      padding-top: 1rem;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__cube {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    z-index: 1;
-    grid-row: 2/3;
-  }
-}
-
-@media (max-width: 1024px) {
-  .splash-viz {
-    height: clamp(30rem, calc(100vh - 80px), 35rem);
-  }
-}
-
-@media (max-width: 425px) {
-  .splash-viz {
-    min-height: clamp(40rem, calc(100vh - 80px), 50rem);
-  }
-}

From 5a520490feece9430e82cae3915c1542944eb0f6 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Mon, 23 Mar 2026 13:51:49 +0000
Subject: [PATCH 02/14] fix(SplashViz): improve heading spacing by adjusting
 section padding

---
 src/components/SplashViz/SplashViz.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 4680de497c31..360ad99a32a0 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -14,7 +14,7 @@ import HomeSVG from "./SplashVizSVG.mjs";
 export default class SplashViz extends Component {
   render() {
     return (
-      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden pb-16 p-4 min-h-[40rem] h-[clamp(35rem,100vh-80px,45rem)] bg-[#2b3a42] dark:bg-gray-900 md:h-[clamp(30rem,100vh-80px,35rem)] sm:min-h-[clamp(40rem,100vh-80px,50rem)]">
+      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden pt-24 pb-16 px-4 min-h-[40rem] h-[clamp(35rem,100vh-80px,45rem)] bg-[#2b3a42] dark:bg-gray-900 md:h-[clamp(30rem,100vh-80px,35rem)] sm:min-h-[clamp(40rem,100vh-80px,50rem)]">
         <h1
           className="text-white text-center font-light mt-20 text-4xl md:text-5xl"
           style={{ gridRow: "1/2" }}

From be670674aaf1351d5b6629ed1948d8ff77efcdb5 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Mon, 23 Mar 2026 14:04:15 +0000
Subject: [PATCH 03/14] fix(SplashViz): adjust spacing from navbar using
 section padding

---
 src/components/SplashViz/SplashViz.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 360ad99a32a0..d6d5f28f05ab 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -14,9 +14,9 @@ import HomeSVG from "./SplashVizSVG.mjs";
 export default class SplashViz extends Component {
   render() {
     return (
-      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden pt-24 pb-16 px-4 min-h-[40rem] h-[clamp(35rem,100vh-80px,45rem)] bg-[#2b3a42] dark:bg-gray-900 md:h-[clamp(30rem,100vh-80px,35rem)] sm:min-h-[clamp(40rem,100vh-80px,50rem)]">
+      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden pt-32 pb-16 px-4 min-h-[40rem] h-[clamp(35rem,100vh-80px,45rem)] bg-[#2b3a42] dark:bg-gray-900 md:h-[clamp(30rem,100vh-80px,35rem)] sm:min-h-[clamp(40rem,100vh-80px,50rem)]">
         <h1
-          className="text-white text-center font-light mt-20 text-4xl md:text-5xl"
+          className="text-white text-center font-light text-4xl md:text-5xl"
           style={{ gridRow: "1/2" }}
         >
           <span> bundle your</span>
@@ -27,11 +27,13 @@ export default class SplashViz extends Component {
             <span> styles </span>
           </TextRotator>
         </h1>
+
         <div
           className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block"
           style={{ gridRow: "2/3" }}
           dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
         ></div>
+
         <Cube
           className="absolute left-0 right-0 top-0 bottom-0 m-auto z-10"
           depth={120}

From 7085d2f8cbc846d7f3e3d01287ae7aed775d7229 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Mon, 23 Mar 2026 14:33:19 +0000
Subject: [PATCH 04/14] fix(SplashViz): match original SCSS spacing using
 heading margin

---
 src/components/SplashViz/SplashViz.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index d6d5f28f05ab..9e07df93763a 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -14,9 +14,9 @@ import HomeSVG from "./SplashVizSVG.mjs";
 export default class SplashViz extends Component {
   render() {
     return (
-      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden pt-32 pb-16 px-4 min-h-[40rem] h-[clamp(35rem,100vh-80px,45rem)] bg-[#2b3a42] dark:bg-gray-900 md:h-[clamp(30rem,100vh-80px,35rem)] sm:min-h-[clamp(40rem,100vh-80px,50rem)]">
+      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
         <h1
-          className="text-white text-center font-light text-4xl md:text-5xl"
+          className="text-white text-center font-light text-3xl md:text-4xl mt-[80px] md:mt-[90px]"
           style={{ gridRow: "1/2" }}
         >
           <span> bundle your</span>

From 98371f381312b3e4b526eb7fe162915bf15a386b Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Mon, 23 Mar 2026 16:20:43 +0000
Subject: [PATCH 05/14] fix(SplashViz): match exact heading font size from
 original site

---
 src/components/SplashViz/SplashViz.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 9e07df93763a..cbc8bf3a5bc6 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -16,7 +16,7 @@ export default class SplashViz extends Component {
     return (
       <section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
         <h1
-          className="text-white text-center font-light text-3xl md:text-4xl mt-[80px] md:mt-[90px]"
+          className="text-white text-center font-light text-[30px] md:text-[40px] mt-[80px] md:mt-[90px]"
           style={{ gridRow: "1/2" }}
         >
           <span> bundle your</span>

From 7970f44bd78865041cbb068d7b2557f27b0d8456 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Wed, 25 Mar 2026 19:06:34 +0000
Subject: [PATCH 06/14] fix(SplashViz): refine heading structure and spacing
 for improved readability

---
 src/components/SplashViz/SplashViz.jsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index cbc8bf3a5bc6..79613d5663a2 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -15,19 +15,15 @@ export default class SplashViz extends Component {
   render() {
     return (
       <section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
-        <h1
-          className="text-white text-center font-light text-[30px] md:text-[40px] mt-[80px] md:mt-[90px]"
-          style={{ gridRow: "1/2" }}
-        >
-          <span> bundle your</span>
-          <TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
-            <span> assets </span>
-            <span> scripts </span>
-            <span> images </span>
-            <span> styles </span>
-          </TextRotator>
+        <h1 className="text-white text-center font-light font-sans text-[30px] md:text-[40px] mt-[80px] md:mt-[90px] leading-[36px] md:leading-[48px]">
+          <span> bundle your </span>
+          <TextRotater delay={2000}>
+            <span>assets</span>
+            <span>scripts</span>
+            <span>images</span>
+            <span>styles</span>
+          </TextRotater>
         </h1>
-
         <div
           className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block"
           style={{ gridRow: "2/3" }}

From 4fc44d03be70795f6d9ab161530e4725a6b1565c Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Thu, 26 Mar 2026 10:06:59 +0000
Subject: [PATCH 07/14] fix(SplashViz): align typography, font weight and
 spacing with webpack design

---
 src/components/SplashViz/SplashViz.jsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 79613d5663a2..9c9215a65931 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -1,11 +1,14 @@
 // Import External Dependencies
 import { Component } from "react";
 
+// Global styles / fonts
+import "@fontsource/source-sans-pro/300.css";
+
 // Load Images
 
 // Import Components
 import Cube from "../Cube/Cube.jsx";
-import TextRotator from "../TextRotater/TextRotater.jsx";
+import TextRotater from "../TextRotater/TextRotater.jsx";
 import HomeSVG from "./SplashVizSVG.mjs";
 
 // Load Styling
@@ -15,14 +18,16 @@ export default class SplashViz extends Component {
   render() {
     return (
       <section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
-        <h1 className="text-white text-center font-light font-sans text-[30px] md:text-[40px] mt-[80px] md:mt-[90px] leading-[36px] md:leading-[48px]">
-          <span> bundle your </span>
-          <TextRotater delay={2000}>
-            <span>assets</span>
-            <span>scripts</span>
-            <span>images</span>
-            <span>styles</span>
-          </TextRotater>
+        <h1 className="text-white text-center font-normal font-[Source_Sans_Pro] text-[30px] md:text-[40px] mt-[80px] md:mt-[90px] leading-[36px] md:leading-[48px] tracking-[0]">
+          <span>bundle your</span>
+          <span className="inline-block w-[120px] text-left">
+            <TextRotater delay={2000}>
+              <span>assets</span>
+              <span>scripts</span>
+              <span>images</span>
+              <span>styles</span>
+            </TextRotater>
+          </span>
         </h1>
         <div
           className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block"

From f4738ac96184bd323f8c405fd2d8f76054c5a183 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Thu, 26 Mar 2026 10:10:52 +0000
Subject: [PATCH 08/14] fix(SplashViz): remove unused font dependency and rely
 on existing font setup

---
 src/components/SplashViz/SplashViz.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 9c9215a65931..38c58ff63ec0 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -1,9 +1,6 @@
 // Import External Dependencies
 import { Component } from "react";
 
-// Global styles / fonts
-import "@fontsource/source-sans-pro/300.css";
-
 // Load Images
 
 // Import Components

From 176b7948704f0d7ca04034883bf27cdca1a6ca16 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Thu, 26 Mar 2026 14:35:24 +0000
Subject: [PATCH 09/14] refactor(SplashViz): use clsx for better class
 management and readability

---
 src/components/SplashViz/SplashViz.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 38c58ff63ec0..63429ffe4d05 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -1,5 +1,6 @@
 // Import External Dependencies
 import { Component } from "react";
+import clsx from "clsx";
 
 // Load Images
 
@@ -14,7 +15,15 @@ import HomeSVG from "./SplashVizSVG.mjs";
 export default class SplashViz extends Component {
   render() {
     return (
-      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
+      <section
+        className={clsx(
+          "relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16",
+          "bg-[#2b3a42] dark:bg-gray-900",
+          "h-[clamp(35rem,calc(100vh-80px),45rem)]",
+          "md:h-[clamp(30rem,calc(100vh-80px),35rem)]",
+          "sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]",
+        )}
+      >
         <h1 className="text-white text-center font-normal font-[Source_Sans_Pro] text-[30px] md:text-[40px] mt-[80px] md:mt-[90px] leading-[36px] md:leading-[48px] tracking-[0]">
           <span>bundle your</span>
           <span className="inline-block w-[120px] text-left">

From 655d10fbc851d050f21bdf241a050e6befd71c62 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Thu, 26 Mar 2026 14:38:05 +0000
Subject: [PATCH 10/14] fix(SplashViz): resolve import order and named import
 lint issues

---
 src/components/SplashViz/SplashViz.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 63429ffe4d05..5a9e3b78aaca 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -1,6 +1,6 @@
 // Import External Dependencies
+import { clsx } from "clsx";
 import { Component } from "react";
-import clsx from "clsx";
 
 // Load Images
 

From 884487fef7e392f23d6876a59a6ec660d099d54c Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Thu, 26 Mar 2026 16:04:31 +0000
Subject: [PATCH 11/14] refactor(SplashViz): remove clsx and revert to standard

---
 src/components/SplashViz/SplashViz.jsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 5a9e3b78aaca..38c58ff63ec0 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -1,5 +1,4 @@
 // Import External Dependencies
-import { clsx } from "clsx";
 import { Component } from "react";
 
 // Load Images
@@ -15,15 +14,7 @@ import HomeSVG from "./SplashVizSVG.mjs";
 export default class SplashViz extends Component {
   render() {
     return (
-      <section
-        className={clsx(
-          "relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16",
-          "bg-[#2b3a42] dark:bg-gray-900",
-          "h-[clamp(35rem,calc(100vh-80px),45rem)]",
-          "md:h-[clamp(30rem,calc(100vh-80px),35rem)]",
-          "sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]",
-        )}
-      >
+      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
         <h1 className="text-white text-center font-normal font-[Source_Sans_Pro] text-[30px] md:text-[40px] mt-[80px] md:mt-[90px] leading-[36px] md:leading-[48px] tracking-[0]">
           <span>bundle your</span>
           <span className="inline-block w-[120px] text-left">

From b8f43e4c7f65158d46319f102bba97576d048008 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Thu, 26 Mar 2026 17:10:16 +0000
Subject: [PATCH 12/14] fix(SplashViz): center cube relative to SVG container

---
 src/components/SplashViz/SplashViz.jsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 38c58ff63ec0..0502243b3b6b 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -26,18 +26,16 @@ export default class SplashViz extends Component {
             </TextRotater>
           </span>
         </h1>
-        <div
-          className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block"
-          style={{ gridRow: "2/3" }}
-          dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
-        ></div>
+        <div className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block">
+          <div dangerouslySetInnerHTML={{ __html: HomeSVG.body }} />
 
-        <Cube
-          className="absolute left-0 right-0 top-0 bottom-0 m-auto z-10"
-          depth={120}
-          repeatDelay={5000}
-          continuous
-        />
+          <Cube
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10"
+            depth={120}
+            repeatDelay={5000}
+            continuous
+          />
+        </div>
       </section>
     );
   }

From 59075010691eafb1215a9ccd7b97e08e30886297 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Thu, 26 Mar 2026 18:33:29 +0000
Subject: [PATCH 13/14] fix(SplashViz): fine-tune section height and spacing to
 match original layout

---
 src/components/SplashViz/SplashViz.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 0502243b3b6b..e0064a751b10 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -14,9 +14,10 @@ import HomeSVG from "./SplashVizSVG.mjs";
 export default class SplashViz extends Component {
   render() {
     return (
-      <section className="relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(35rem,calc(100vh-80px),45rem)] md:h-[clamp(30rem,calc(100vh-80px),35rem)] sm:min-h-[clamp(40rem,calc(100vh-80px),50rem)]">
-        <h1 className="text-white text-center font-normal font-[Source_Sans_Pro] text-[30px] md:text-[40px] mt-[80px] md:mt-[90px] leading-[36px] md:leading-[48px] tracking-[0]">
-          <span>bundle your</span>
+      <section className="relative overflow-hidden px-4 pb-16 pt-0 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(33rem,calc(100vh-80px),43rem)] md:h-[clamp(29rem,calc(100vh-80px),33rem)] sm:min-h-[clamp(37rem,calc(100vh-80px),45rem)]">
+        {/* TOP TEXT */}
+        <h1 className="text-white text-center font-normal font-[Source_Sans_Pro] text-[30px] md:text-[40px] pt-[100px] md:pt-[110px] mb-8 md:mb-10 leading-[36px] md:leading-[48px]">
+          <span> bundle your </span>
           <span className="inline-block w-[120px] text-left">
             <TextRotater delay={2000}>
               <span>assets</span>
@@ -26,7 +27,9 @@ export default class SplashViz extends Component {
             </TextRotater>
           </span>
         </h1>
-        <div className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block">
+
+        {/* CENTER GRAPHIC */}
+        <div className="absolute top-[60%] left-1/2 w-[60vw] min-w-[550px] max-w-[768px] -translate-x-1/2 -translate-y-1/2 hidden md:block">
           <div dangerouslySetInnerHTML={{ __html: HomeSVG.body }} />
 
           <Cube

From 78249d606c52247ee6846a3cf5407e86449594e7 Mon Sep 17 00:00:00 2001
From: Vishal Baraiya <142961593+mr-baraiya@users.noreply.github.com>
Date: Thu, 26 Mar 2026 18:40:32 +0000
Subject: [PATCH 14/14] fix(SplashViz): adjust text spacing to match original
 layout

---
 src/components/SplashViz/SplashViz.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index e0064a751b10..1fbd3d1c9063 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -17,7 +17,7 @@ export default class SplashViz extends Component {
       <section className="relative overflow-hidden px-4 pb-16 pt-0 bg-[#2b3a42] dark:bg-gray-900 h-[clamp(33rem,calc(100vh-80px),43rem)] md:h-[clamp(29rem,calc(100vh-80px),33rem)] sm:min-h-[clamp(37rem,calc(100vh-80px),45rem)]">
         {/* TOP TEXT */}
         <h1 className="text-white text-center font-normal font-[Source_Sans_Pro] text-[30px] md:text-[40px] pt-[100px] md:pt-[110px] mb-8 md:mb-10 leading-[36px] md:leading-[48px]">
-          <span> bundle your </span>
+          <span> bundle your</span>
           <span className="inline-block w-[120px] text-left">
             <TextRotater delay={2000}>
               <span>assets</span>