fix(SplashViz): fine-tune section height and spacing to match original layout

Author: mr-baraiya

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