initial page

pages/index.tsx

@@ -1,8 +1,53 @@
+import Link from "next/link";
 
 export default function Home() {
   return (
-    <div>
-      Peroxy
+    <div className="h-screen">
+      <nav className="p-4 mx-10 flex flex-row justify-between">
+        <div id="logo" className="flex flex-row gap-2 items-end">
+          <div className="text-action font-bold text-4xl font-mono">peroxy</div>
+          <span className="text-secondary font-mono font-bold">dev</span>
+        </div>
+        <div className="flex flex-row gap-10 items-center font-medium font-mono">
+          <Link href="/pidhsome">
+            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
+              link 1
+            </button>
+          </Link>
+          <Link href="/pidhsome">
+            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
+              link 2
+            </button>
+          </Link>
+          <Link href="/pidhsome">
+            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
+              link 3
+            </button>
+          </Link>
+        </div>
+      </nav>
+      <main className="mx-10">
+        <div className="grid grid-cols-2 xs:grid-cols-1 mt-20">
+          <div className="bg-primary-dark p-10 rounded-lg flex flex-col justify-between h-96 w-2/3 xs:w-full text-lg text-primary-text/90">
+            <div>
+              <span className="font-bold text-xl text-primary-text">
+                Lorem ipsum dolor{" "}
+              </span>{" "}
+              sit amet consectetur adipisicing elit. Laboriosam ab quia quae
+              reiciendis. Nostrum corrupti laboriosam quae vero repudiandae
+              dolorem quos dolores laborum recusandae atque itaque illo autem
+              neque odit, in soluta sit alias necessitatibus fugit veniam sunt
+              at.
+            </div>
+            <button className="px-4 py-2 rounded-lg bg-primary hover:bg-primary/50 transition-all ease-out duration-150 font-bold w-fit">
+              Action
+            </button>
+          </div>
+          <div id="showcase" className="w-full h-96 bg-primary-text">
+            <div className="text-primary-dark m-auto w-fit">showcase</div>
+          </div>
+        </div>
+      </main>
     </div>
-  )
+  );
 }