deps: bump next, fix npm audit issues

Author: renbou

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

app/page.tsx

@@ -46,18 +46,18 @@ function Home() {
   const navShake = [useState(false), useState(false), useState(false)];
 
   return (
-    <div className="md:w-screen md:h-screen px-[4%] 2xl:px-[8%] py-8">
-      <header className="grid header-grid gap-x-8 gap-y-6">
+    <div className="px-[4%] py-8 md:h-screen md:w-screen 2xl:px-[8%]">
+      <header className="header-grid grid gap-x-8 gap-y-6">
         {/* Branding */}
         <h1
           // justify-self-center for centering the top horizontal NEPLOX text to the width of the logo,
           // which is bigger horizontally than it is vertically
-          className="row-start-1 col-start-2 text-theme text-brand font-horizon justify-self-center leading-none"
+          className="text-brand col-start-2 row-start-1 justify-self-center font-horizon leading-none text-theme"
         >
           NEPLOX
         </h1>
         <h1
-          className="row-start-2 col-start-1 text-theme text-brand font-horizon-outlined tracking-tighter leading-none"
+          className="text-brand col-start-1 row-start-2 font-horizon-outlined leading-none tracking-tighter text-theme"
           style={{
             writingMode: "vertical-lr",
             WebkitTextStrokeWidth: "0.025em",
@@ -67,37 +67,37 @@ function Home() {
         </h1>
         <Image
           // Extend vertically to the height of the sideways NEPLOX text, and automatically scale horizontally with the aspect ratio
-          className="row-start-2 col-start-2 lg:h-full max-w-60 md:max-w-full w-auto mx-auto select-none"
+          className="col-start-2 row-start-2 mx-auto w-auto max-w-60 select-none md:max-w-full lg:h-full"
           src="/icons/neplox.svg"
           alt="Neplox Logo"
           width={4122}
           height={3501}
         />
 
         {/* Signature */}
-        <div className="row-start-3 col-start-1 -col-end-1 md:col-start-2 md:col-end-auto">
-          <h3 className="font-sans font-light text-center lg:text-lg h-full w-0 min-w-full max-w-0">
-            <span className="align-baseline hyphens-manual">
+        <div className="col-start-1 -col-end-1 row-start-3 md:col-start-2 md:col-end-auto">
+          <h3 className="h-full w-0 min-w-full max-w-0 text-center font-sans font-light lg:text-lg">
+            <span className="hyphens-manual align-baseline">
               EST. 2024 BY CYBER&shy;SECURITY RESEARCHERS
             </span>
           </h3>
         </div>
 
         {/* Nav */}
-        <div className="row-start-4 col-start-1 -col-end-1 md:row-start-1 md:col-start-3 md:col-end-auto my-3 md:my-0">
-          <nav className="max-w-lg h-full flex gap-x-4 justify-between mx-auto">
+        <div className="col-start-1 -col-end-1 row-start-4 my-3 md:col-start-3 md:col-end-auto md:row-start-1 md:my-0">
+          <nav className="mx-auto flex h-full max-w-lg justify-between gap-x-4">
             {nav.map((text, index) => (
               <button
                 key={text}
                 className={`${canHover ? "hover:animate-shake" : ""} ${
-                  navShake[index][0] ? "animate-shake text-shadow" : ""
-                } font-sans font-normal text-xl text-nav lg:text-xl xl:text-2xl whitespace-nowrap cursor-not-allowed`}
+                  navShake[index][0] ? "text-shadow animate-shake" : ""
+                } text-nav cursor-not-allowed whitespace-nowrap font-sans text-xl font-normal lg:text-xl xl:text-2xl`}
                 // Avoid conflicting with the hover animation
                 onClick={() => !canHover && navShake[index][1](true)}
                 onAnimationEnd={() => navShake[index][1](false)}
               >
                 <span className="font-light">{"["}</span>
-                <BiSolidLock className="inline align-baseline mr-1 pt-1" />
+                <BiSolidLock className="mr-1 inline pt-1 align-baseline" />
                 {text.toUpperCase()}
                 <span className="font-light">{" ]"}</span>
               </button>
@@ -106,8 +106,8 @@ function Home() {
         </div>
 
         {/* About */}
-        <div className="row-start-5 col-start-1 -col-end-1 md:row-start-2 md:col-start-3 md:-col-end-1 min-h-0 flex flex-col justify-evenly gap-y-6 items-center">
-          <p className="font-normal font-serif lg:text-lg xl:text-xl text-justify leading-relaxed max-w-lg">
+        <div className="col-start-1 -col-end-1 row-start-5 flex min-h-0 flex-col items-center justify-evenly gap-y-6 md:col-start-3 md:-col-end-1 md:row-start-2">
+          <p className="max-w-lg text-justify font-serif font-normal leading-relaxed lg:text-lg xl:text-xl">
             Formed by like-minded, top-tier{" "}
             <b className="theme-highlight">
               &thinsp;security researchers&thinsp;
@@ -119,7 +119,7 @@ function Home() {
             <b className="theme-highlight">&thinsp;secure&thinsp;</b> modern
             systems.
           </p>
-          <p className="font-normal font-serif lg:text-lg xl:text-xl text-justify leading-relaxed max-w-lg">
+          <p className="max-w-lg text-justify font-serif font-normal leading-relaxed lg:text-lg xl:text-xl">
             From international CTF winners to hardened reverse engineers and bug
             bounty hunters, our unique skillsets come together to offer a{" "}
             <b className="theme-highlight">&thinsp;fresh perspective&thinsp;</b>{" "}
@@ -129,13 +129,13 @@ function Home() {
         </div>
 
         {/* Socials */}
-        <div className="row-start-2 col-start-3 md:row-start-3 md:col-start-3 md:col-end-auto lg:row-start-2 lg:col-start-4 flex flex-col md:flex-row lg:flex-col justify-evenly lg:justify-around items-center">
+        <div className="col-start-3 row-start-2 flex flex-col items-center justify-evenly md:col-start-3 md:col-end-auto md:row-start-3 md:flex-row lg:col-start-4 lg:row-start-2 lg:flex-col lg:justify-around">
           {socials.map((social) => (
             <a
               key={social.href}
               href={social.href}
               // w-8 here is important, it is equal to 2rem, which is also set as the font-size of the sideways NEPLOX text
-              className="inline-block w-8 xl:w-12 h-auto hover:scale-125 transition-transform duration-300"
+              className="inline-block h-auto w-8 transition-transform duration-300 hover:scale-125 xl:w-12"
             >
               <Image
                 src={social.src}