Responsive intro page with nextjs/tailwind

@ClaudiuManuel Thanks for the input! Sometimes when I'm all wrapped up in making it look as close to the design as possible I forget to think about simple things like closing menus! I went back and fixed the things you suggested, and added some functions for closing menus when a user clicks outside the menu as well as when a user clicks on one of the menu options.

@sjohnston82 Perfecto, great work

@MaxiTeddy Weird, when I view the site on my PC, everything appears as normal, but when I view it on my phone, it does appear that all text using the 'almost-black' tailwind class isn't showing up unless its highlighted. I'll look into it, thanks for the heads up!

It should be fixed now, I guess I just didn't explicitly put a text color on those and it defaulted to white.

@ShyneADL Thank you! I appreciate it!

As for the mobile menu closing animation, it's all done just with tailwind.

Basically, the menu is three spans, and when clicked, one transforms 45 degrees, the middle goes to opacity-0, and the other one transforms -45 degrees. It looks pretty weird so you need to translate them so that cross right over eachother.

Here's the code I used for it:

const burgerBar =
    "h-[2px] bg-almost-black w-8 transition ease transform duration-300";
  return (
    <div
      className=" flex flex-col mr-2  gap-[6px] items-center z-50  justify-center  p-2 cursor-pointer"
      onClick={() => setNavOpen(!navOpen)}
    >
      <span
        className={cn(`${burgerBar}`, {
          "rotate-45 translate-y-[9px] w-8": navOpen,
        })}
      ></span>
      <span
        className={cn(`${burgerBar}`, {
          "opacity-0": navOpen,
        })}
      ></span>
      <span
        className={cn(`${burgerBar}`, {
          "-rotate-45 -translate-y-[7px] w-8": navOpen,
        })}
      ></span>
    </div>