chore: restyles start page (#114)

* restyles start page

* chore: start page style tweaks

* chore: adjust codeblock overflow

* chore: satisfies the design gods

src/app/(app)/globals.scss

@@ -1,37 +1,191 @@
-html,
-body {
-  font-family: 'Roboto', 'Inter', sans-serif;
+* {
+  box-sizing: border-box;
 }
 
-.container {
-  max-width: 37.5rem;
-  padding: 0 2rem;
-  margin-left: auto;
-  margin-right: auto;
+html {
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+}
+
+body {
+  color: #ffffff;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 0 20px;
+}
+
+main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  max-width: 800px;
+  margin: 0 auto;
+  padding-block: 80px;
+  border-inline-width: 1px;
+  border-inline-style: solid;
+  border-image: linear-gradient(180deg, #ffffff00, #ffffff00, #ffffff1a, #ffffff00) 1;
+
+  @media screen and (max-width: 600px) {
+    padding-block: 20px;
+  }
+}
+
+article {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 60px 80px;
+
+  @media screen and (max-width: 600px) {
+    padding: 40px 40px;
+  }
+}
+
+.badge {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #fff;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 300;
+  text-transform: uppercase;
+  letter-spacing: 2.6px;
 }
 
 h1 {
+  color: #ffffff;
   font-size: 4rem;
-}
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: -0.02rem;
+  margin: 0;
 
-.rainbow {
-  font-family: monospace;
-  letter-spacing: 5px;
-  background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  animation: rainbow_animation 6s ease-in-out infinite;
-  background-size: 400% 100%;
-}
-
-@keyframes rainbow_animation {
-  0%,
-  100% {
-    background-position: 0 0;
-  }
-
-  50% {
-    background-position: 100% 0;
+  @media screen and (max-width: 600px) {
+    font-size: 2rem;
+  }
+}
+
+p {
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 28px;
+  margin: 0;
+}
+
+a {
+  color: #ffffff;
+  text-decoration: underline;
+  transition: color 0.2s ease-out;
+
+  &:hover {
+    color: #ffffff80;
+  }
+}
+
+.codeBlock {
+  position: relative;
+  background-color: #00000066;
+  margin: 0;
+  padding: 0;
+
+  pre {
+    margin: 0;
+    padding: 60px 80px;
+    overflow-x: scroll;
+
+    @media screen and (max-width: 600px) {
+      padding: 40px 40px;
+    }
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: calc(50% - 50vw);
+      width: 100vw;
+      height: 1px;
+      background: linear-gradient(90deg, #ffffff00, #ffffff1a, #ffffff1a, #ffffff00);
+      z-index: 1;
+    }
+
+    &::after {
+      content: url('/crosshair.svg');
+      display: block;
+      height: 19px;
+      width: 19px;
+      position: absolute;
+      top: -9px;
+      left: -10px;
+    }
+  }
+
+  code {
+    font-size: 14px;
+    line-height: 2;
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: calc(50% - 50vw);
+    width: 100vw;
+    height: 1px;
+    background: linear-gradient(90deg, #ffffff00, #ffffff1a, #ffffff1a, #ffffff00);
+    z-index: 1;
+  }
+
+  &::after {
+    content: url('/crosshair.svg');
+    display: block;
+    height: 19px;
+    width: 19px;
+    position: absolute;
+    bottom: -9px;
+    right: -10px;
+  }
+}
+
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+
+  div.blur {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: url('/blur.png');
+    background-repeat: repeat;
+    background-size: 400px 400px;
+    background-blend-mode: soft-light, normal;
+    backdrop-filter: blur(60px);
+  }
+
+  div.gradient {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: url('/gradient.webp');
+    background-size: cover;
+    background-position: center;
+    z-index: -2;
   }
 }