fix(SplashViz): refine heading structure and spacing for improved readability

Author: mr-baraiya

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" }}