feat(header): add temporary header until designers release figma

.prettierrc.mjs

@@ -0,0 +1,14 @@
+// .prettierrc.mjs
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  printWidth: 80,
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

biome.json

@@ -1,34 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "vcs": {
-    "enabled": false,
-    "clientKind": "git",
-    "useIgnoreFile": false,
-    "defaultBranch": "main"
-  },
-  "files": {
-    "ignoreUnknown": false,
-    "ignore": []
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space"
-  },
-  "organizeImports": {
-    "enabled": true
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true,
-      "nursery": {
-        "useSortedClasses": "info"
-      }
-    }
-  },
-  "javascript": {
-    "formatter": {
-      "quoteStyle": "double"
-    }
-  }
-}

package.json

@@ -8,10 +8,8 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "format:write": "biome format --write ./src",
+    "format:write": "prettier --write ./src",
-    "format": "biome format ./src",
+    "format": "prettier --check ./src"
-    "lint": "biome check ./src",
-    "lint:write": "biome check --fix ./src"
   },
   "devDependencies": {
     "@astrojs/tailwind": "3.1.1",
@@ -20,6 +18,7 @@
     "postcss": "8.4.21",
     "postcss-import": "^16.1.0",
     "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "3.2.7"
   },

pnpm-lock.yaml

@@ -33,9 +33,12 @@ importers:
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
+      prettier-plugin-astro:
+        specifier: ^0.14.1
+        version: 0.14.1
       prettier-plugin-tailwindcss:
         specifier: ^0.6.8
-        version: 0.6.8(prettier-plugin-astro@0.7.2)(prettier@3.3.3)
+        version: 0.6.8(prettier-plugin-astro@0.14.1)(prettier@3.3.3)
       tailwindcss:
         specifier: 3.2.7
         version: 3.2.7(postcss@8.4.21)
@@ -52,6 +55,9 @@ packages:
   '@astrojs/compiler@1.8.2':
     resolution: {integrity: sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==}
 
+  '@astrojs/compiler@2.10.3':
+    resolution: {integrity: sha512-bL/O7YBxsFt55YHU021oL+xz+B/9HvGNId3F9xURN16aeqDK9juHGktdkCSXz+U4nqFACq6ZFvWomOzhV+zfPw==}
+
   '@astrojs/language-server@0.28.3':
     resolution: {integrity: sha512-fPovAX/X46eE2w03jNRMpQ7W9m2mAvNt4Ay65lD9wl1Z5vIQYxlg7Enp9qP225muTr4jSVB5QiLumFJmZMAaVA==}
     hasBin: true
@@ -1277,6 +1283,10 @@ packages:
     resolution: {integrity: sha512-lEHd+yEm22jXdCphDrkvIJQU66EuLojPPtvZkpKIkiD+l0DMThF/niqZKJSoU8Vl7iuvtmzyMhir9LdVy5WMnA==}
     engines: {node: '>=10'}
 
+  prettier-plugin-astro@0.14.1:
+    resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
+    engines: {node: ^14.15.0 || >=16.0.0}
+
   prettier-plugin-astro@0.7.2:
     resolution: {integrity: sha512-mmifnkG160BtC727gqoimoxnZT/dwr8ASxpoGGl6EHevhfblSOeu+pwH1LAm5Qu1MynizktztFujHHaijLCkww==}
     engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
@@ -1819,6 +1829,8 @@ snapshots:
 
   '@astrojs/compiler@1.8.2': {}
 
+  '@astrojs/compiler@2.10.3': {}
+
   '@astrojs/language-server@0.28.3':
     dependencies:
       '@vscode/emmet-helper': 2.9.3
@@ -3231,6 +3243,12 @@ snapshots:
       path-exists: 4.0.0
       which-pm: 2.2.0
 
+  prettier-plugin-astro@0.14.1:
+    dependencies:
+      '@astrojs/compiler': 2.10.3
+      prettier: 3.3.3
+      sass-formatter: 0.7.9
+
   prettier-plugin-astro@0.7.2:
     dependencies:
       '@astrojs/compiler': 0.31.4
@@ -3238,11 +3256,11 @@ snapshots:
       sass-formatter: 0.7.9
       synckit: 0.8.8
 
-  prettier-plugin-tailwindcss@0.6.8(prettier-plugin-astro@0.7.2)(prettier@3.3.3):
+  prettier-plugin-tailwindcss@0.6.8(prettier-plugin-astro@0.14.1)(prettier@3.3.3):
     dependencies:
       prettier: 3.3.3
     optionalDependencies:
-      prettier-plugin-astro: 0.7.2
+      prettier-plugin-astro: 0.14.1
 
   prettier@2.8.8: {}
 

src/components/circle-effect.astro

@@ -1,16 +1,52 @@
-      <svg
+<svg
-        class="absolute top-0 right-0 w-full h-full -z-10"
+  class="absolute top-0 right-0 -z-10 h-full w-full"
-        viewBox="0 0 2000 2000"
+  viewBox="0 0 2000 2000"
-        preserveAspectRatio="xMaxYMid slice"
+  preserveAspectRatio="xMaxYMid slice"
-      >
+>
-        <circle cx="2000" cy="1000" r="200" fill="none" stroke="rgba(147, 51, 234, 0.5)" stroke-width="1" />
+  <circle
-        <circle cx="2000" cy="1000" r="400" fill="none" stroke="rgba(147, 51, 234, 0.4)" stroke-width="1" />
+    cx="2000"
-        <circle cx="2000" cy="1000" r="600" fill="none" stroke="rgba(147, 51, 234, 0.3)" stroke-width="1" />
+    cy="1000"
-        <circle cx="2000" cy="1000" r="800" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" />
+    r="200"
-        <circle cx="2000" cy="1000" r="1000" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" />
+    fill="none"
-        <circle cx="2000" cy="1000" r="1200" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" />
+    stroke="rgba(147, 51, 234, 0.5)"
-        <!-- <circle cx="2000" cy="1000" r="1400" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
+    stroke-width="1"></circle>
-        <!-- <circle cx="2000" cy="1000" r="1600" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
+  <circle
-        <!-- <circle cx="2000" cy="1000" r="1800" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
+    cx="2000"
-        <!-- <circle cx="2000" cy="1000" r="2000" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
+    cy="1000"
-      </svg>
+    r="400"
+    fill="none"
+    stroke="rgba(147, 51, 234, 0.4)"
+    stroke-width="1"></circle>
+  <circle
+    cx="2000"
+    cy="1000"
+    r="600"
+    fill="none"
+    stroke="rgba(147, 51, 234, 0.3)"
+    stroke-width="1"></circle>
+  <circle
+    cx="2000"
+    cy="1000"
+    r="800"
+    fill="none"
+    stroke="rgba(147, 51, 234, 0.2)"
+    stroke-width="1"></circle>
+  <circle
+    cx="2000"
+    cy="1000"
+    r="1000"
+    fill="none"
+    stroke="rgba(147, 51, 234, 0.2)"
+    stroke-width="1"></circle>
+  <circle
+    cx="2000"
+    cy="1000"
+    r="1200"
+    fill="none"
+    stroke="rgba(147, 51, 234, 0.2)"
+    stroke-width="1"></circle>
+  <!-- <circle cx="2000" cy="1000" r="1400" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
+  <!-- <circle cx="2000" cy="1000" r="1600" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
+  <!-- <circle cx="2000" cy="1000" r="1800" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
+  <!-- <circle cx="2000" cy="1000" r="2000" fill="none" stroke="rgba(147, 51, 234, 0.2)" stroke-width="1" /> -->
+</svg>

src/components/header.astro

@@ -1,20 +1,25 @@
 ---
+import LanguageIcon from "./icons/language-icon.astro";
 import Navbar from "./navbar.astro";
 ---
 
 <header>
-  <img
-    alt="Zen Logo"
-    loading="lazy"
-    width="40"
-    height="40"
-    decoding="async"
-    data-nimg="1"
-    class="transition-all duration-300 hover:scale-110 mr-2"
-    style="color:transparent"
-    srcset="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 1x, https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 2x"
-    src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg"
-  />
   <Navbar />
-  <p>Download button gonna be here</p>
+  <section>
+    <LanguageIcon class="h-6 w-6 text-primary" />
+    <a href="/download" class="btn-base py-2 px-4">Download Zen</a>
+  </section>
 </header>
+
+<style>
+  @tailwind base;
+  @layer base {
+    header {
+      @apply flex w-full items-center justify-between pt-lg;
+    }
+
+    section {
+      @apply flex items-center gap-4;
+    }
+  }
+</style>

src/components/hero.astro

@@ -9,10 +9,11 @@ import DownloadIcon from "./icons/download-icon.astro";
     care about your experience, not your data.
   </p>
   <div class="center flex flex-col gap-sm">
-    <a href="/download" class="btn-base">
+    <a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
-      <DownloadIcon /> Download Zen</a>
     <p class="text-sm text-muted/95">Available on Windows, Mac, and Linux</p>
-  </div> 
+  </div>
-  <img src="https://media.discordapp.net/attachments/1302453497651925082/1302664349655240825/nI0zVqK.png?ex=6728f037&is=67279eb7&hm=a307a77de19d56eb9165f3333a22ba5ea40e0ebb43fa1f03ecb11204ddc7e218&=&format=webp&quality=lossless&width=809&height=698" alt="Zen Logo"  />
+  <img
-</section> 
+    src="https://media.discordapp.net/attachments/1302453497651925082/1302664349655240825/nI0zVqK.png?ex=6728f037&is=67279eb7&hm=a307a77de19d56eb9165f3333a22ba5ea40e0ebb43fa1f03ecb11204ddc7e218&=&format=webp&quality=lossless&width=809&height=698"
-    
+    alt="Zen Logo"
+  />
+</section>

src/components/icons/download-icon.astro

@@ -3,7 +3,17 @@ import { ny } from "../../lib/utils";
 const { class: className } = Astro.props;
 ---
 
-
+<svg
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={ny("w-5 h-5", className)}>
+  xmlns="http://www.w3.org/2000/svg"
-  <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class={ny("w-5 h-5", className)}
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+  ></path>
 </svg>

src/components/icons/language-icon.astro

@@ -0,0 +1,19 @@
+---
+import { ny } from "../../lib/utils";
+const { class: className } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class={ny("w-5 h-5", className)}
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"
+  ></path>
+</svg>

src/components/navbar.astro

@@ -1 +1,34 @@
-<nav></nav>
+<nav>
+  <img
+    alt="Zen Logo"
+    loading="lazy"
+    width="40"
+    height="40"
+    decoding="async"
+    data-nimg="1"
+    class="mr-2 transition-all duration-300 hover:scale-110"
+    style="color:transparent"
+    srcset="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 1x, https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg 2x"
+    src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-black.svg"
+  />
+  <ul>
+    <li><a href="/">Browser</a></li>
+    <li><a href="/resources">Resources</a></li>
+    <li><a href="/mods">Mods</a></li>
+    <li>
+      <a href="/donate">Donate</a>
+    </li>
+  </ul>
+</nav>
+
+<style>
+  @tailwind base;
+  @layer base {
+    nav {
+      @apply flex justify-center text-primary;
+    }
+    ul {
+      @apply hidden justify-center gap-4 p-4 md:flex;
+    }
+  }
+</style>

src/layouts/main.astro

@@ -11,24 +11,31 @@ const { title } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <!-- no search xP -->
-    <meta name="robots" content="noindex, nofollow, noarchive, nocache, nosnippet, noimageindex">
+    <meta
+      name="robots"
+      content="noindex, nofollow, noarchive, nocache, nosnippet, noimageindex"
+    />
     <meta name="robots" content="noindex" />
     <title>{title}</title>
   </head>
   <body>
-    <div class="flex flex-col min-h-screen gap-4 items-center">
+    <div class="container flex min-h-screen flex-col items-center gap-4xl">
       <CircleEffect />
       <Header />
-      <main class="container py-4xl flex flex-col gap-4"><slot /></main>
+      <main class="flex flex-col gap-4"><slot /></main>
     </div>
   </body>
 </html>
 
 <style>
-body {
+  body {
-  background: linear-gradient(to bottom, rgba(147, 51, 234, 0.1), transparent 70%),
+    background: linear-gradient(
-              linear-gradient(to bottom, rgba(147, 51, 234, 0.05), transparent 50%),
+        to bottom,
-              linear-gradient(to bottom, rgba(147, 51, 234, 0.03), transparent 30%);
+        rgba(147, 51, 234, 0.1),
-  background-size: cover;
+        transparent 70%
-}
+      ),
+      linear-gradient(to bottom, rgba(147, 51, 234, 0.05), transparent 50%),
+      linear-gradient(to bottom, rgba(147, 51, 234, 0.03), transparent 30%);
+    background-size: cover;
+  }
 </style>

tailwind.config.cjs

@@ -4,6 +4,7 @@ module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     container: {
+      center: true,
       padding: {
         DEFAULT: "1rem",
         xs: "0.5rem",
@@ -13,6 +14,7 @@ module.exports = {
         "2xl": "6rem",
       },
     },
+
     extend: {
       colors: {
         primary: "hsl(258, 48%, 23%)",