wip overlay

Author: valebearzotti

src/components/hero/index.tsx

@@ -11,9 +11,10 @@ import {
   Vec3
 } from "ogl";
 import { useEffect, useRef } from "react";
+import { Overlay } from "../overlay";
 
-const DESKTOP_HEIGHT = 240;
-const MOBILE_HEIGHT = 340;
+const DESKTOP_HEIGHT = 256;
+const MOBILE_HEIGHT = 356;
 
 export const HeroASCII = () => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -235,9 +236,12 @@ void main() {
   }, []);
 
   return (
-    <div
-      ref={containerRef}
-      className="w-[calc(100%-2rem)] mx-4 h-full overflow-clip"
-    ></div>
+    <div className="w-full h-full overflow-clip">
+      <div
+        ref={containerRef}
+        className="w-[calc(100%-2rem)] mx-4 h-full overflow-clip"
+      ></div>
+      <Overlay />
+    </div>
   );
 };

src/components/layout/footer.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 
 export const Footer = () => {
   return (
-    <div className="flex flex-col-reverse md:flex-row justify-between items-center m-4 mt-2 dashed-top dashed-bottom after:hidden md:after:block md:h-[84px]">
+    <div className="flex flex-col-reverse md:flex-row justify-between items-center m-4 dashed-top dashed-bottom after:hidden md:after:block md:h-[84px]">
       <div className="flex items-center gap-4 dashed-right after:hidden lg:after:block h-full pl-2 lg:px-10 py-8 pb-4 md:py-0">
         <span className="text-sm font-mono text-white">
           © {new Date().getFullYear()} All rights reserved.

src/components/overlay/index.tsx

@@ -0,0 +1,16 @@
+export const Overlay = () => {
+  return (
+    <div className="absolute inset-0 z-50 flex items-center justify-center">
+      <div className="w-full h-full relative">
+        <div className="absolute top-12 right-12 text-white bg-black w-[264px] text-right font-mono text-sm pl-4 py-2">
+          Vortex is a highly performant, extensible columnar data format
+        </div>
+
+        <div className="absolute bottom-1 left-14 text-white bg-black w-[324px] text-left font-mono text-sm px-4 py-2">
+          It&apos;s both a file format and a memory format, enabling compute
+          over compressed data
+        </div>
+      </div>
+    </div>
+  );
+};