refactor(all): rebranding and websire layout refactor

src/components/Footer.astro

@@ -0,0 +1,11 @@
+<footer
+  class="sticky bottom-0 motion-footer opacity-0 text-xs text-center text-white/60 sm:text-sm"
+>
+  <p>
+    &copy; {new Date().getFullYear()} • <a
+      href="https://z0x.ca?utm_source=z0x.ca"
+      class="transition hover:text-white/80">z0x</a
+    >
+  </p>
+  <p>All rights reserved.</p>
+</footer>

src/components/Head.astro

@@ -0,0 +1,24 @@
+---
+import "/src/css/app.css";
+---
+
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="icon" type="image/x-icon" href="/assets/favicon.webp" />
+<link rel="canonical" href="https://z0x.ca" />
+
+<title>z0x</title>
+<meta name="title" content="z0x" />
+<meta name="description" content="z0x" />
+
+<meta property="og:type" content="website" />
+<meta property="og:url" content="https://z0x.ca" />
+<meta property="og:title" content="z0x" />
+<meta property="og:description" content="z0x" />
+
+<meta property="twitter:url" content="https://z0x.ca" />
+<meta property="twitter:title" content="z0x" />
+<meta property="twitter:description" content="z0x" />
+
+<meta name="darkreader-lock" />
+<script src="/src/js/index.ts"></script>

src/components/Links.astro

@@ -0,0 +1,52 @@
+<ul class="flex gap-6">
+  <li class="opacity-0 motion-links group">
+    <a
+      aria-label="matrix"
+      href="https://matrix.to/#/@z0x:z0x.ca"
+      target="_blank"
+      class="flex relative justify-center items-center w-12 text-white transition aspect-square hover:text-white/60"
+    >
+      <div class="absolute inset-0 aspect-square h-12 bg-white/10 rounded-md">
+      </div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        class="relative w-8 aspect-square transition"
+      >
+        <path d="M4 3h-1v18h1"></path>
+        <path d="M20 21h1v-18h-1"></path>
+        <path d="M7 9v6"></path>
+        <path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5"></path>
+        <path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5"></path>
+      </svg>
+    </a>
+  </li>
+  <li class="opacity-0 motion-links group">
+    <a
+      aria-label="telegram"
+      href="https://t.me/zesfca"
+      target="_blank"
+      class="flex relative justify-center items-center w-12 text-white transition aspect-square hover:text-white/60"
+    >
+      <div class="absolute inset-0 aspect-square h-12 bg-white/10 rounded-md">
+      </div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        class="relative w-8 aspect-square transition"
+      >
+        <path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"></path>
+      </svg>
+    </a>
+  </li>
+</ul>

src/components/Logo.astro

@@ -0,0 +1,11 @@
+---
+import { Image } from "astro:assets";
+import logo from "/src/assets/logo.svg";
+---
+
+<Image
+  src={logo}
+  alt="logo"
+  loading="eager"
+  class="w-48 opacity-0 motion-logo"
+/>

src/components/NotFound.astro

@@ -0,0 +1,5 @@
+<p class="relative text-4xl font-semibold text-white">
+  <span class="absolute inset-0 opacity-0 blur-md motion-text bg-white/50"
+  ></span>
+  <span class="relative opacity-0 motion-text">404</span>
+</p>

src/components/Text.astro

@@ -0,0 +1,5 @@
+<p class="relative text-4xl font-semibold text-white">
+  <span class="absolute inset-0 opacity-0 blur-md motion-text bg-white/50"
+  ></span>
+  <span class="relative opacity-0 motion-text">z0x</span>
+</p>