responsive fixes

Author: valebearzotti

src/components/hero-404/index.tsx

@@ -15,8 +15,8 @@ import {
 import { useEffect, useRef } from "react";
 import { Overlay404 } from "../overlay-404";
 
-const DESKTOP_HEIGHT = 256;
-const MOBILE_HEIGHT = 260;
+const DESKTOP_HEIGHT = 312;
+const MOBILE_HEIGHT = 214;
 
 const DESKTOP_CAMERA_POSITION = new Vec3(8, -4, 15);
 const MOBILE_CAMERA_POSITION = new Vec3(14, -10, 21);
@@ -282,10 +282,10 @@ void main() {
   }, []);
 
   return (
-    <div className="w-full overflow-clip h-[calc(100dvh-260px)] md:h-[calc(100dvh-256px)]">
+    <div className="w-full overflow-clip h-[calc(100dvh-214px)] md:h-[calc(100dvh-312px)]">
       <div
         ref={containerRef}
-        className="w-[calc(100%-2rem)] mx-4 h-full overflow-clip"
+        className="w-[calc(100%-2rem)] md:w-[calc(100%-5rem)] mx-4 md:mx-10 h-full overflow-clip"
       ></div>
       <Overlay404 />
     </div>

src/components/hero/index.tsx

@@ -15,8 +15,8 @@ import {
 import { useEffect, useRef } from "react";
 import { Overlay } from "../overlay";
 
-const DESKTOP_HEIGHT = 256;
-const MOBILE_HEIGHT = 260;
+const DESKTOP_HEIGHT = 312;
+const MOBILE_HEIGHT = 214;
 
 const DESKTOP_CAMERA_POSITION = new Vec3(5, -5, 10);
 const MOBILE_CAMERA_POSITION = new Vec3(7, -7, 12);
@@ -284,10 +284,10 @@ void main() {
   }, []);
 
   return (
-    <div className="w-full overflow-clip h-[calc(100dvh-260px)] md:h-[calc(100dvh-256px)]">
+    <div className="w-full overflow-clip h-[calc(100dvh-214px)] md:h-[calc(100dvh-312px)]">
       <div
         ref={containerRef}
-        className="w-[calc(100%-2rem)] mx-4 h-full overflow-clip"
+        className="w-[calc(100%-2rem)] md:w-[calc(100%-5rem)] mx-4 md:mx-10 h-full overflow-clip"
       ></div>
       <Overlay />
     </div>

src/components/layout/footer.tsx

@@ -4,7 +4,7 @@ import NextLink from "next/link";
 import { Link } from "../link";
 export const Footer = () => {
   return (
-    <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 flex-col-reverse md:flex-row justify-between items-center m-4 mt-2 md:mt-4 md:m-10 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 md:pl-2 lg:px-10 py-4 pb-4 md:py-0">
         <span className="text-sm font-mono text-white">
           © {new Date().getFullYear()} All rights reserved.
@@ -34,9 +34,6 @@ export const Footer = () => {
               .
             </span>
           </span>
-          <span className="text-white font-mono text-sm text-center md:text-left">
-            In collaboration with Creators United
-          </span>
         </div>
       </div>
     </div>

src/components/layout/header.tsx

@@ -5,7 +5,7 @@ import { Link } from "../link";
 
 export const Header = () => {
   return (
-    <div className="flex justify-between items-center m-4 mb-2 dashed-top dashed-bottom h-[72px] mx-2 md:h-[108px]">
+    <div className="flex justify-between items-center m-4 mb-2 md:m-10 md:mb-6 dashed-top dashed-bottom h-[72px] md:h-[108px]">
       <NextLink
         href="/"
         className="flex items-center gap-4 dashed-right h-full px-8"