Fix overlay for tests

Author: nyandika

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/types/routes.d.ts';
+import './.next/dev/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

src/components/HeroHeader/DesktopHero.tsx

@@ -10,7 +10,7 @@ export default function HeroHeader() {
       }}
     >
       {/* Translucent overlay to darken image while keeping it visible */}
-      <div className="absolute inset-0 bg-black/80" />
+      <div className="absolute inset-0 bg-black/80 pointer-events-none" />
 
       <div className="w-full flex py-20 flex-col items-center justify-center relative z-10">
         <h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-24">

src/components/HeroHeader/MobileHero.tsx

@@ -9,7 +9,7 @@ export default function MobileHero() {
       }}
     >
       {/* overlay for legibility using Tailwind */}
-      <div className="absolute inset-0 bg-black/50" />
+      <div className="absolute inset-0 bg-black/50 pointer-events-none" />
 
       <div className="relative z-10 pt-[20vh] h-full justify-end items-center pb-[5vh] flex-col p-6 rounded-md flex text-white mt-0">
         {/* Adds opacity to make text more legible */}

src/components/Navbar/Navbar.tsx

@@ -28,7 +28,7 @@ export default function Navbar() {
 
   if (!screenWidth) return null;
   return (
-    <header className="lg:pl-[49px] fixed top-0 backdrop-blur-md w-full bg-black text-white justify-between bg-opacity-50 z-10">
+    <header className="lg:pl-[49px] fixed top-0 backdrop-blur-md w-full bg-black text-white justify-between bg-opacity-50 z-20">
       <nav className="nav py-2 md:py-4  md:pl-5 flex flex-row justify-between md:justify-around px-4 items-center">
         <div className="">
           <Link href={HOME}>