refresh banner

package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "packageManager": "[email protected]",
   "scripts": {
     "prepare": "effect-language-service patch",
     "docgen": "pnpm --recursive --filter @unionlabs/sdk --filter @unionlabs/sdk-evm --filter @unionlabs/sdk-cosmos exec docgen && node scripts/docs.mjs"

site/package.json

@@ -3,6 +3,9 @@
   "version": "0.0.1",
   "type": "module",
   "private": true,
+  "engines": {
+    "node": "22.x"
+  },
   "scripts": {
     "dev": "NODE_ENV='development' astro dev",
     "start": "astro dev",

site/site.nix

@@ -7,6 +7,13 @@ _: {
       buildPnpmPackage,
       ...
     }:
+    let
+      deps = with pkgs; [
+        python3
+        stdenv.cc
+        pkg-config
+      ];
+    in
     {
       packages = {
         site = mkCi false (buildPnpmPackage {
@@ -18,6 +25,8 @@ _: {
           pnpmWorkspaces = [
             "site"
           ];
+          buildInputs = deps;
+          nativeBuildInputs = deps;
           buildPhase = ''
             runHook preBuild
             export PUPPETEER_SKIP_DOWNLOAD=1;
@@ -39,13 +48,14 @@ _: {
           type = "app";
           program = pkgs.writeShellApplication {
             name = "site-dev-server";
+            runtimeInputs = deps;
             text = ''
               ${ensureAtRepositoryRoot}
               cd site/
 
               export PUPPETEER_SKIP_DOWNLOAD=1 
-              npm install
-              npm run dev -- --host
+              pnpm install
+              pnpm dev -- --host
             '';
           };
         };

site/src/components/brand/ColorPalette.astro

@@ -4,9 +4,11 @@ interface Props {
   colors: Array<string>
   class?: string
   vertical?: boolean
+  cols?: number
 }
 
-const { label, colors, class: className = "", vertical = false } = Astro.props
+const { label, colors, class: className = "", vertical = false, cols = 0 } = Astro.props
+const useGrid = cols > 0
 
 // Function to determine if text should be black or white based on background color
 function shouldUseBlackText(hexColor: string) {
@@ -33,29 +35,56 @@ function shouldUseBlackText(hexColor: string) {
       <div class="w-4 h-[1px] md:h-4 md:w-[1px] bg-accent-500"></div>
     </div>
   </div>
-  <div class="flex flex-col md:flex-row border border-white w-full h-72">
-    {
-      colors.map((color) => (
-        <button
-          class:list={[
-            "flex items-center justify-center p-4 w-full h-full cursor-pointer transition-all hover:opacity-90",
-            { "text-black": shouldUseBlackText(color) },
-            { "text-white": !shouldUseBlackText(color) },
-            { "md:[writing-mode:vertical-lr]": vertical },
-          ]}
-          style={`background-color: ${color}`}
-          data-color={color}
-        >
-          <span
-            data-copy
-            class="font-mono uppercase"
-          >
-            {color}
-          </span>
-        </button>
-      ))
-    }
-  </div>
+  {
+    useGrid && cols === 2 ? (
+      <div class="flex flex-row border border-white w-full h-72 gap-2">
+        {
+          colors.map((color) => (
+            <button
+              class:list={[
+                "flex items-center justify-center p-4 flex-1 h-full cursor-pointer transition-all hover:opacity-90 [writing-mode:vertical-lr]",
+                { "text-black": shouldUseBlackText(color) },
+                { "text-white": !shouldUseBlackText(color) },
+              ]}
+              style={`background-color: ${color}`}
+              data-color={color}
+            >
+              <span
+                data-copy
+                class="font-mono uppercase"
+              >
+                {color}
+              </span>
+            </button>
+          ))
+        }
+      </div>
+    ) : (
+      <div class="flex flex-col md:flex-row border border-white w-full h-72 gap-2">
+        {
+          colors.map((color) => (
+            <button
+              class:list={[
+                "flex items-center justify-center p-4 flex-1 h-full cursor-pointer transition-all hover:opacity-90",
+                { "text-black": shouldUseBlackText(color) },
+                { "text-white": !shouldUseBlackText(color) },
+                { "md:[writing-mode:vertical-lr]": vertical },
+              ]}
+              style={`background-color: ${color}`}
+              data-color={color}
+            >
+              <span
+                data-copy
+                class="font-mono uppercase"
+              >
+                {color}
+              </span>
+            </button>
+          ))
+        }
+      </div>
+    )
+  }
 </div>
 
 <script>

site/src/components/brand/RefreshDisplay.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+  class?: string
+}
+
+const { class: className = "" } = Astro.props
+const brandKitLink =
+  "https://drive.google.com/drive/folders/1KLOuxQi9nhqzeram8Ay3_sGPn97Q0XRj?usp=drive_link"
+---
+
+<div class="flex flex-col gap-4">
+  <div class={`w-full h-72 bg-[#FF6F00] flex flex-col items-center justify-center border border-gray-200 p-8 relative overflow-hidden ${className}`}>
+    <img
+      src="/pattern-refresh.svg"
+      alt="Pattern overlay"
+      class="absolute inset-0 w-full h-full object-cover opacity-40 pointer-events-none"
+    />
+    <div class="flex flex-col gap-4 text-center max-w-md relative z-10">
+      <h2 class="text-black font-geist text-3xl md:text-4xl font-bold">
+        Union Is Evolving.
+      </h2>
+      <p class="text-black text-sm md:text-base font-geist">
+        The Union website and brand is being updated, follow the provided link for the new Brand
+        Assets.
+      </p>
+      <a
+        href={brandKitLink}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-black font-semibold underline hover:opacity-80 transition-opacity duration-300 text-sm md:text-base"
+      >
+        2025 Union Brand Kit
+      </a>
+    </div>
+  </div>
+</div>

site/src/pages/brand-kit.astro

@@ -6,6 +6,7 @@ import ColorPalette from "../components/brand/ColorPalette.astro"
 import FontDisplay from "../components/brand/FontDisplay.astro"
 import LogoDisplay from "../components/brand/LogoDisplay.astro"
 import PdfDisplay from "../components/brand/PdfDisplay.astro"
+import RefreshDisplay from "../components/brand/RefreshDisplay.astro"
 import ContainedSection from "../components/ContainedSection.astro"
 import H1 from "../components/typography/h1.astro"
 import Layout from "../layouts/Layout.astro"
@@ -15,6 +16,16 @@ import Layout from "../layouts/Layout.astro"
   <ContainedSection className="py-16">
     <H1>Our <span class="text-accent-500">brand</span></H1>
 
+    <div class="flex flex-col gap-4 mt-8">
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 bg-accent-500"></div>
+          <p class="font-mono text-2xl">REFRESH</p>
+        </div>
+        <RefreshDisplay />
+      </div>
+    </div>
+
     <div class="flex flex-col gap-4 mt-8">
       <div class="flex flex-col gap-4">
         <div class="flex w-full justify-between items-center">
@@ -49,7 +60,7 @@ import Layout from "../layouts/Layout.astro"
           label="Secondary"
           colors={["#A0ECFD", "#030711", "#9CA3AF", "#111214"]}
           class="col-span-full md:col-span-2"
-          vertical
+          cols={2}
         />
       </div>
     </div>

site/src/styles/fonts.css

@@ -35,3 +35,19 @@
   font-display: swap;
   src: url("/fonts/JetBrainsMono-Italic[wght].woff2") format("woff2");
 }
+
+@font-face {
+  font-family: "Geist";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/Geist-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
+}

site/tailwind.config.ts

@@ -60,6 +60,8 @@ export default {
         ],
         mono: ["JetBrains Mono", ...defaultTheme.fontFamily.mono],
         jetbrains: ["JetBrains Mono", ...defaultTheme.fontFamily.mono],
+        geist: ["Geist", ...defaultTheme.fontFamily.sans],
+        geistMono: ["Geist Mono", ...defaultTheme.fontFamily.mono],
       },
     },
   },

vercel.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "pnpm --filter=site build",
+  "installCommand": "pnpm install --frozen-lockfile",
+  "outputDirectory": "site/.vercel/output"
+}