refactor(SplashViz): migrate from SCSS to Tailwind CSS

Author: mr-baraiya

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