site work (#3150)

Author: cor

site/package-lock.json

@@ -25,7 +25,9 @@
     "@netlify/functions": "^2.8.1",
     "@splinetool/runtime": "^1.9.27",
     "@splinetool/viewer": "^1.9.27",
-    "astro": "^5.0.0-beta.1",
+    "@types/gl-matrix": "^2.4.5",
+    "@types/webgl2": "^0.0.11",
+    "astro": "^5.0.0-beta.5",
     "astro-capo": "^0.0.1",
     "astro-font": "^0.1.81",
     "astro-seo": "^0.8.4",

site/package.json

@@ -7,7 +7,7 @@ const { className } = Astro.props
 ---
 
 <section class=`flex w-full justify-center items-center ${className}`>
-  <div class="max-w-[1200px] w-full z-10 px-4 overflow-hidden">
+  <div class="max-w-6xl w-full z-10 px-4 overflow-hidden">
     <slot />
   </div>
 </section>

site/src/components/ContainedSection.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  class: string
+}
+
+const { class: className } = Astro.props
+---
+
+<svg viewBox="0 0 24 24" class=`${className ? className : "size-4"}`>
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+</svg>

site/src/components/ExternalLinkIcon.astro

@@ -1,26 +1,36 @@
 ---
-import unionLogo from "#/assets/union-logo/logo.svg"
 import { Icon } from "astro-icon/components"
+import ExternalLinkIcon from "./ExternalLinkIcon.astro"
 const menuItems = [
   {
     url: "/learn",
     name: "learn",
-    highlight: false
-  },
-  {
-    url: "https://docs.union.build/",
-    name: "build",
-    highlight: false
+    highlight: false,
+    external: false
   },
   {
     url: "/ecosystem",
     name: "ecosystem",
-    highlight: false
+    highlight: false,
+    external: false
+  },
+  {
+    url: "/blog",
+    name: "blog",
+    highlight: false,
+    external: false
+  },
+  {
+    url: "https://docs.union.build/",
+    name: "docs",
+    highlight: false,
+    external: true
   },
   {
     url: "https://app.union.build",
     name: "testnet",
-    highlight: false
+    highlight: false,
+    external: true
   }
 ]
 ---
@@ -60,7 +70,7 @@ const menuItems = [
 <header
   class="z-[100] w-full flex justify-around"
 >
-  <div class="max-w-[1200px] flex flex-1 items-center px-4 sm:px-6 drop-shadow-2xl">
+  <div class="max-w-6xl min-h-[68px] flex flex-1 items-center px-4 sm:px-6 drop-shadow-2xl">
     <a
       href="/"
       id="union-logo"
@@ -98,11 +108,12 @@ const menuItems = [
                 <a
                     href={menuItem.url}
                     class:list={[
-                      "text-normal flex flex-col flex-1 uppercase font-mono font-bold",
+                      "text-normal flex items-center gap-1.5 flex-1 uppercase font-mono font-bold",
                       { "text-accent-500": menuItem.highlight },
                     ]}
                 >
                   {menuItem.name}
+                  {menuItem.external ? <ExternalLinkIcon class="-mt-0.5 size-4 text-neutral-500" /> : ""}
                 </a>
               </li>
           ))
@@ -113,7 +124,7 @@ const menuItems = [
             rel="noopener noreferrer"
             href="https://discord.union.build"
           >
-            <Icon name="tabler:brand-discord-filled" color="#fff" size="1.2rem" />
+            <Icon name="tabler:brand-discord-filled" color="#fff" size="20px" />
             <span class="sr-only">Discord</span>
           </a>
         </li>
@@ -123,7 +134,7 @@ const menuItems = [
             rel="noopener noreferrer"
             href="https://github.com/unionlabs/union"
           >
-            <Icon name="tabler:brand-github-filled" color="#fff" size="1.2rem" />
+            <Icon name="tabler:brand-github-filled" color="#fff" size="20px" />
             <span class="sr-only">GitHub</span>
           </a>
         </li>
@@ -133,7 +144,7 @@ const menuItems = [
             rel="noopener noreferrer"
             href="https://x.com/union_build"
           >
-            <Icon name="fa6-brands:x-twitter" color="#fff" size="1.1rem" />
+            <Icon name="fa6-brands:x-twitter" color="#fff" size="18px" />
             <span class="sr-only">X</span>
           </a>
         </li>
@@ -148,7 +159,7 @@ const menuItems = [
         title="Menu"
         class="bg-white h-[32px] w-[32px] flex items-center justify-center cursor-pointer !p-0"
       >
-        <Icon name="tabler:menu-2" color="#000000" size="1.2rem" />
+        <Icon name="tabler:menu-2" color="#000000" size="20px" />
       </button>
 
       <ul
@@ -158,8 +169,9 @@ const menuItems = [
         {
           menuItems.map(menuItem => (
             <li class="py-2 px-4">
-              <a href={menuItem.url} class="text-white text-shadow !text-lg text-normal flex flex-col flex-1 uppercase font-mono">
+              <a href={menuItem.url} class="text-white text-shadow !text-lg text-normal flex gap-1.5 items-center flex-1 uppercase font-mono">
                 {menuItem.name}
+                {menuItem.external ? <ExternalLinkIcon class="-mt-0.5 size-4 text-neutral-500" /> : ""}
               </a>
             </li>
           ))
@@ -172,7 +184,7 @@ const menuItems = [
             class="flex gap-2 text-lg px-4 py-2 uppercase"
           >
             <label>Discord</label>
-            <Icon name="tabler:brand-discord-filled" color="#fff" size="1rem" class="my-auto" />
+            <Icon name="tabler:brand-discord-filled" color="#fff" size="16px" class="my-auto" />
           </a>
         </li>
         <li class="">
@@ -183,7 +195,7 @@ const menuItems = [
             class="flex gap-2 text-lg px-4 py-2 uppercase"
           >
             <label>X.com</label>
-            <Icon name="fa6-brands:x-twitter" color="#fff" size="1.1rem" class="my-auto" />
+            <Icon name="fa6-brands:x-twitter" color="#fff" size="18px" class="my-auto" />
           </a>
         </li>
       </ul>

site/src/components/Header.astro

@@ -2,5 +2,6 @@
 // WaveCubes.astro
 ---
 <!-- inline style is to prevent white flash on slow internet !-->
-<canvas style="background-color: black;" class="matrix-cover w-full h-full block" id="waveCanvas" width="3840" height="2160"></canvas>
+<canvas style="background-color: black;" class="w-full h-full block rounded" id="waveCanvas" width="3840"
+        height="2160" transition:persist></canvas>
 <script src="../lib/matrix-cover.ts"/>

site/src/components/MatrixCover.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+  gapless?: boolean
+}
+
+const { gapless } = Astro.props
+---
+
+<main class:list={["flex flex-col relative", {"gap-8 md:gap-16 lg:gap-32 my-8 md:my-16 lg:my-32": !gapless}]}>
+	<slot />
+</main>

site/src/components/SectionsContainer.astro

@@ -0,0 +1,41 @@
+---
+import Card from "#/components/Card.astro"
+
+interface Props {
+  person: {
+    twitterHandle: string
+    name: string
+    profilePicture: unknown
+    title: string
+  }
+}
+
+const { person } = Astro.props
+---
+                        
+<Card class="border-none group">
+  <a
+          href={`https://x.com/${person.twitterHandle}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="gap-4 flex flex-col"
+  >
+    <div class="object-cover overflow-hidden">
+    <!-- We don't have a picture for every person !-->
+    {person?.profilePicture?.fields?.file?.url ? 
+      <img
+              class="w-full h-auto group-hover:scale-110 transition"
+              src={person?.profilePicture?.fields?.file?.url}
+              alt={`${person.name} - Union worker`}
+      />
+      :
+      <div class="bg-neutral-900 aspect-1 w-full"></div>
+      }
+    </div>
+    <div class="leading-tight uppercase font-mono">
+      <h1 class="text-2xl font-bold font-supermolot uppercase">{person.name}</h1>
+      <div class="text-gray-400 -mt-1 text-lg">{person.title}</div>
+      <div class="text-accent text-lg -mt-1 block">@{person.twitterHandle}</div>
+    </div>
+  </a>
+</Card>