fix(SplashViz): align typography, font weight and spacing with webpack design

Author: mr-baraiya

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"