From 48a5712adff5520df33e2ecb150a0c45459739bd Mon Sep 17 00:00:00 2001
From: Ronggur Mangaraja Habibun <ronggur.mh@gmail.com>
Date: Thu, 26 Feb 2026 16:10:29 +0700
Subject: [PATCH 1/2] Feat: Download page

---
 .claude/MEMORY.md                         |  62 +++++
 .claude/rules/detailed-rules.md           | 148 ++++++++++++
 .claude/settings.local.json               |   5 +
 .markdownlint.json                        |   1 +
 .markdownlintignore                       |   3 +
 src/components/Icon.astro                 |  24 ++
 src/components/download/Download.astro    |  21 ++
 src/components/download/DownloadNav.astro | 115 ++++++++++
 src/content.config.ts                     |  16 ++
 src/content/download/datum-mcp.mdx        |  43 ++++
 src/content/download/datumctl.mdx         | 128 +++++++++++
 src/content/download/linux.mdx            |  50 ++++
 src/content/download/mac-os.mdx           |  32 +++
 src/content/download/windows.mdx          |  32 +++
 src/content/pages/download.mdx            |  10 +
 src/data/downloads.json                   |  67 ++++++
 src/pages/download/[slug].astro           |  76 +++++++
 src/pages/download/index.astro            |   4 +
 src/v1/assets/icons/apple.svg             |  10 +
 src/v1/assets/icons/go.svg                |  10 +
 src/v1/assets/icons/linux.svg             |   3 +
 src/v1/assets/icons/rust.svg              |   3 +
 src/v1/assets/icons/terminal.svg          |   3 +
 src/v1/assets/icons/ts.svg                |   3 +
 src/v1/assets/icons/windows.svg           |   6 +
 src/v1/assets/icons/workflow.svg          |   3 +
 src/v1/styles/color-theme.css             |   6 +-
 src/v1/styles/components-download.css     | 264 ++++++++++++++++++++++
 src/v1/styles/components.css              |  25 +-
 src/v1/styles/page-download.css           |   3 +
 src/v1/styles/utilities.css               |  15 +-
 31 files changed, 1185 insertions(+), 6 deletions(-)
 create mode 100644 .claude/MEMORY.md
 create mode 100644 .claude/rules/detailed-rules.md
 create mode 100644 .claude/settings.local.json
 create mode 100644 src/components/download/Download.astro
 create mode 100644 src/components/download/DownloadNav.astro
 create mode 100644 src/content/download/datum-mcp.mdx
 create mode 100644 src/content/download/datumctl.mdx
 create mode 100644 src/content/download/linux.mdx
 create mode 100644 src/content/download/mac-os.mdx
 create mode 100644 src/content/download/windows.mdx
 create mode 100644 src/content/pages/download.mdx
 create mode 100644 src/data/downloads.json
 create mode 100644 src/pages/download/[slug].astro
 create mode 100644 src/pages/download/index.astro
 create mode 100644 src/v1/assets/icons/apple.svg
 create mode 100644 src/v1/assets/icons/go.svg
 create mode 100644 src/v1/assets/icons/linux.svg
 create mode 100644 src/v1/assets/icons/rust.svg
 create mode 100644 src/v1/assets/icons/terminal.svg
 create mode 100644 src/v1/assets/icons/ts.svg
 create mode 100644 src/v1/assets/icons/windows.svg
 create mode 100644 src/v1/assets/icons/workflow.svg
 create mode 100644 src/v1/styles/components-download.css
 create mode 100644 src/v1/styles/page-download.css

diff --git a/.claude/MEMORY.md b/.claude/MEMORY.md
new file mode 100644
index 00000000..f81da343
--- /dev/null
+++ b/.claude/MEMORY.md
@@ -0,0 +1,62 @@
+# datum.net Project Rules
+
+## Stack
+- **Framework**: Astro 5.x + TypeScript strict mode
+- **Styling**: TailwindCSS v4 with CSS layers
+- **Interactivity**: Alpine.js
+- **Testing**: Playwright (E2E)
+
+## File Naming
+| Type | Convention | Example |
+|------|------------|---------|
+| Components | PascalCase | `BlogItem.astro`, `NavMenu.astro` |
+| Utils | camelCase + suffix | `dateUtils.ts`, `imageUtils.ts` |
+| Libs | camelCase | `string.ts`, `postgres.ts` |
+| Types | camelCase | `common.ts`, `navigation.ts` |
+| Pages | kebab-case | `request-access.astro` |
+| CSS | kebab-case + prefix | `components-blog.css`, `page-home.css` |
+
+## CSS Class Naming (BEM-like)
+- **Single dash (-)**: children/elements → `nav-menu-item`, `content-title`
+- **Double dash (--)**: variants/modifiers → `content-image--left`, `blog-featured--title`
+
+## Critical Rules
+1. **No inline styles** - All styles go in CSS files under `src/v1/styles/`
+2. **No inline Tailwind classes** - Put Tailwind in CSS with `@apply`
+3. **No arbitrary values** - Check `@theme` layer for variables
+4. **Start components with path comment** → `// src/components/Button.astro`
+5. **Use path aliases** → `@components/*`, `@utils/*`, `@libs/*`, `@types/*`, `@v1/*`
+
+## CSS Organization
+```
+src/v1/styles/
+  base.css          # Base styles
+  theme.css         # Theme variables
+  variables.css     # CSS custom properties
+  utilities.css     # Global utilities
+  components-*.css  # Component styles
+  page-*.css        # Page-specific styles
+```
+
+## Astro Patterns
+```astro
+---
+// src/components/Example.astro
+import type { ExampleProps } from '@types/common';
+
+const { class: className = '', prop1, prop2 = 'default' } = Astro.props as ExampleProps;
+---
+<div class:list={['base-class', condition && 'conditional-class']}></div>
+```
+
+## Import Order
+1. Astro imports
+2. Local imports
+3. Types (use `import type`)
+
+## Formatting
+- Single quotes, semicolons required
+- 2-space indent, 100 char width
+- Trailing commas (ES5)
+
+See [detailed-rules.md](./detailed-rules.md) for full conventions.
diff --git a/.claude/rules/detailed-rules.md b/.claude/rules/detailed-rules.md
new file mode 100644
index 00000000..14c4d796
--- /dev/null
+++ b/.claude/rules/detailed-rules.md
@@ -0,0 +1,148 @@
+# Detailed Project Rules for datum.net
+
+## TypeScript Conventions
+
+### Type Safety
+- Use `strict` TypeScript config (extends `astro/tsconfigs/strict`)
+- Prefer `@ts-expect-error` over `@ts-ignore`
+- Prefix unused variables with `_` (e.g., `_unusedParam`)
+- Use `const` assertions: `as const`
+- Explicit return types for public functions
+
+### JSDoc Pattern
+```typescript
+/**
+ * Brief description of function purpose
+ * @param paramName - Description of parameter
+ * @returns Description of return value
+ */
+export const functionName = (paramName: Type): ReturnType => {
+  // implementation
+};
+```
+
+### Path Aliases
+| Alias | Path |
+|-------|------|
+| `@/*` | root |
+| `@components/*` | `./src/components/*` |
+| `@utils/*` | `./src/utils/*` |
+| `@libs/*` | `./src/libs/*` |
+| `@types/*` | `./src/types/*` |
+| `@layouts/*` | `./src/layouts/*` |
+| `@v1/*` | `./src/v1/*` |
+| `@content/*` | `./src/content/*` |
+| `@data/*` | `./src/data/*` |
+| `@styles/*` | `./src/styles/*` |
+| `@assets/*` | `./src/assets/*` |
+
+## TailwindCSS v4 Rules
+
+### DO
+- Use `@layer components` for component styles
+- Use `@apply` directive for Tailwind utilities
+- Use nested SCSS format
+- Check `@theme` for existing variables before adding custom values
+
+### DON'T
+- No arbitrary values like `w-[123px]`
+- No inline Tailwind classes in components
+- No `<style>` tags in components
+
+### CSS File Pattern
+```css
+@layer components {
+  .component-name {
+    @apply flex items-center gap-4;
+
+    &--variant {
+      @apply bg-blue-500;
+    }
+
+    &-child {
+      @apply text-sm;
+    }
+  }
+}
+```
+
+## Astro Component Rules
+
+### Required Structure
+1. Start with path comment
+2. Imports in frontmatter
+3. Props interface with destructuring
+4. Clean template with `class:list`
+
+### Props Pattern
+```astro
+---
+// src/components/ComponentName.astro
+import type { ComponentProps } from '@types/common';
+import '@v1/styles/components-feature.css';
+
+const {
+  class: className = '',
+  requiredProp,
+  optionalProp = 'default',
+  ...restProps
+} = Astro.props as ComponentProps;
+---
+
+<div class:list={['component-name', className]} {...restProps}>
+  {/* content */}
+</div>
+```
+
+### Conditional Rendering
+```astro
+{condition && <Component />}
+{condition ? <ComponentA /> : <ComponentB />}
+```
+
+## Server Actions
+
+- Use `defineAction` from `astro:actions`
+- Validate with Zod
+- Return appropriate HTTP status codes
+- Handle errors with try/catch
+
+## Performance
+
+- Use `server:defer` for non-critical components
+- Use Astro's `Image` component for images
+- Add `data-astro-prefetch="hover"` for link prefetching
+- Prefer SSR over client-side JS
+
+## Figma Dev Mode
+
+- Use localhost source directly for images/SVGs from Figma MCP
+- Do NOT import new icon packages - use Figma assets
+- Do NOT create placeholders if localhost source provided
+
+## Project Structure
+```
+src/
+  components/      # PascalCase, grouped by feature
+    blog/
+    forms/
+    home/
+  pages/           # kebab-case routes
+  utils/           # camelCase + suffix
+  libs/            # camelCase, library code
+  types/           # TypeScript definitions
+  actions/         # Server actions
+  layouts/         # Layout components
+  content/         # MDX/MD collections
+  v1/
+    styles/        # All CSS files
+    assets/        # Images, SVGs, icons
+```
+
+## Code Quality Checklist
+- [ ] Comments describe purpose, not effect
+- [ ] No commented-out code
+- [ ] Type safety maintained
+- [ ] Semantic HTML used
+- [ ] Accessibility attributes included
+- [ ] ESLint/Prettier clean
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 00000000..f7d41e68
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,5 @@
+{
+  "permissions": {
+    "allow": ["WebFetch(domain:www.figma.com)", "mcp__claude_ai_Figma__get_design_context"]
+  }
+}
diff --git a/.markdownlint.json b/.markdownlint.json
index 5465ed8a..3bd3dbcd 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -1,5 +1,6 @@
 {
   "default": true,
+  "MD007": false,
   "MD013": false,
   "MD024": false,
   "MD033": false,
diff --git a/.markdownlintignore b/.markdownlintignore
index a477434f..69371c27 100644
--- a/.markdownlintignore
+++ b/.markdownlintignore
@@ -16,3 +16,6 @@ node_modules/
 
 # Logs
 *.log
+
+# Claude metadata (exclude from markdown lint)
+.claude/
diff --git a/src/components/Icon.astro b/src/components/Icon.astro
index b39ce231..04c13235 100644
--- a/src/components/Icon.astro
+++ b/src/components/Icon.astro
@@ -7,6 +7,14 @@ import LinkedinIcon from '@v1/assets/icons/linkedin.svg';
 import CloseIcon from '@v1/assets/icons/close.svg';
 import PlayIcon from '@v1/assets/icons/play.svg';
 import GithubIcon from '@v1/assets/icons/github.svg';
+import AppleIcon from '@v1/assets/icons/apple.svg';
+import WindowsIcon from '@v1/assets/icons/windows.svg';
+import LinuxIcon from '@v1/assets/icons/linux.svg';
+import GoIcon from '@v1/assets/icons/go.svg';
+import TsIcon from '@v1/assets/icons/ts.svg';
+import RustIcon from '@v1/assets/icons/rust.svg';
+import TerminaIcon from '@v1/assets/icons/terminal.svg';
+import WorkflowIcon from '@v1/assets/icons/workflow.svg';
 
 const { name, class: className = '', size = 'md' } = Astro.props;
 
@@ -42,6 +50,22 @@ const sizeClass = sizeClasses[size as keyof typeof sizeClasses] || sizeClasses.m
     <PlayIcon class={`${sizeClass} ${className}`} />
   ) : name === 'github' ? (
     <GithubIcon class={`${sizeClass} ${className}`} />
+  ) : name === 'apple' ? (
+    <AppleIcon class={`${sizeClass} ${className}`} />
+  ) : name === 'windows' ? (
+    <WindowsIcon class={`${sizeClass} ${className}`} />
+  ) : name === 'linux' ? (
+    <LinuxIcon class={`${sizeClass} ${className}`} />
+  ) : name === 'go' ? (
+    <GoIcon class={`${sizeClass} ${className}`} />
+  ) : name === 'ts' ? (
+    <TsIcon class={`${sizeClass} ${className}`} />
+  ) : name === 'rust' ? (
+    <RustIcon class={`${sizeClass} ${className}`} />
+  ) : name === 'terminal' ? (
+    <TerminaIcon class={`${sizeClass} ${className}`} />
+  ) : name === 'workflow' ? (
+    <WorkflowIcon class={`${sizeClass} ${className}`} />
   ) : IconComponent ? (
     <IconComponent class={`${sizeClass} ${className}`} />
   ) : (
diff --git a/src/components/download/Download.astro b/src/components/download/Download.astro
new file mode 100644
index 00000000..669066b7
--- /dev/null
+++ b/src/components/download/Download.astro
@@ -0,0 +1,21 @@
+---
+// src/components/download/Download.astro
+import '@v1/styles/page-download.css';
+import DownloadNav from '@components/download/DownloadNav.astro';
+
+type DownloadProps = {
+  activeId?: string;
+  class?: string;
+};
+
+const { activeId, class: className = '' } = Astro.props as DownloadProps;
+---
+
+<div class={`download-container ${className}`}>
+  <aside class="download-sidebar">
+    <DownloadNav activeId={activeId} />
+  </aside>
+  <main class="download-content">
+    <slot />
+  </main>
+</div>
diff --git a/src/components/download/DownloadNav.astro b/src/components/download/DownloadNav.astro
new file mode 100644
index 00000000..a361db41
--- /dev/null
+++ b/src/components/download/DownloadNav.astro
@@ -0,0 +1,115 @@
+---
+// src/components/download/DownloadNav.astro
+import Icon from '@components/Icon.astro';
+import downloadsData from '@data/downloads.json';
+
+type DownloadNavProps = {
+  activeId?: string;
+  class?: string;
+};
+
+const { activeId, class: className = '' } = Astro.props as DownloadNavProps;
+
+// Get current URL path for fallback active state detection
+const currentPath = Astro.url.pathname;
+
+// Helper to check if item is active
+function isActive(itemId: string, itemHref?: string): boolean {
+  if (activeId) return activeId === itemId;
+  if (!itemHref) return false;
+  return currentPath === itemHref || currentPath.startsWith(itemHref);
+}
+
+// Find the active item label for mobile dropdown display
+const allItems = downloadsData.sections.flatMap((s) => s.items);
+const activeItem = allItems.find((item) => isActive(item.id, item.href));
+const activeLabel = activeItem?.label ?? 'Select a platform';
+---
+
+<!-- Mobile dropdown (visible only on mobile) -->
+<div class="download-nav-mobile" x-data="{ open: false }">
+  <button
+    class="download-nav-mobile-trigger"
+    @click="open = !open"
+    :aria-expanded="open.toString()"
+    aria-haspopup="listbox"
+    type="button"
+  >
+    <span class="download-nav-mobile-label">Select a platform:</span>
+    <span class="download-nav-mobile-selected">{activeLabel}</span>
+    <span
+      class="download-nav-mobile-chevron"
+      :class="{ 'download-nav-mobile-chevron--open': open }"
+    >
+      <Icon name="chevron-down" size="sm" />
+    </span>
+  </button>
+  <div class="download-nav-mobile-dropdown" x-show="open" @click.outside="open = false" x-cloak>
+    {
+      downloadsData.sections.map((section) => (
+        <>
+          <p class="download-nav-mobile-section-title">{section.title}</p>
+          <ul class="download-nav-mobile-list">
+            {section.items.map((item) => {
+              const active = isActive(item.id, item.href);
+              return (
+                <li>
+                  <a
+                    href={item.href}
+                    class:list={[
+                      'download-nav-mobile-link',
+                      { 'download-nav-mobile-link--active': active },
+                    ]}
+                    data-astro-prefetch="hover"
+                  >
+                    {item.icon && (
+                      <Icon name={item.icon} size="sm" class="download-nav-mobile-icon" />
+                    )}
+                    <span>{item.label}</span>
+                    {item.badge && <span class="download-nav-badge">{item.badge}</span>}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      ))
+    }
+  </div>
+</div>
+
+<!-- Desktop nav (visible only on desktop) -->
+<nav class={`download-nav ${className}`}>
+  {
+    downloadsData.sections.map((section) => (
+      <>
+        <div class="download-nav-section">
+          <h3 class="download-nav-section-title">{section.title}</h3>
+          <ul class="download-nav-list">
+            {section.items.map((item) => {
+              const active = isActive(item.id, item.href);
+              return (
+                <li class="download-nav-item">
+                  <a
+                    href={item.href}
+                    class:list={['download-nav-link', { 'download-nav-link--active': active }]}
+                    data-astro-prefetch="hover"
+                  >
+                    {item.icon && (
+                      <div class="download-nav-icon">
+                        <Icon name={item.icon} size="md" />
+                      </div>
+                    )}
+                    <span class="download-nav-label">{item.label}</span>
+                    {item.badge && <span class="download-nav-badge">{item.badge}</span>}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <hr class="download-nav-divider" />
+      </>
+    ))
+  }
+</nav>
diff --git a/src/content.config.ts b/src/content.config.ts
index a5c4407b..7866c55b 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -283,6 +283,21 @@ const faq = defineCollection({
     }),
 });
 
+// Define download collections
+const download = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: './src/content/download' }),
+  schema: ({ image }) =>
+    z.object({
+      slug: z.string(),
+      title: z.string(),
+      description: z.string().optional(),
+      icon: z.string().optional(),
+      order: z.number().optional().default(0),
+      draft: z.boolean().optional().default(false),
+      meta: metaSchema(image),
+    }),
+});
+
 export const collections = {
   pages,
   about,
@@ -293,6 +308,7 @@ export const collections = {
   features,
   pricing,
   faq,
+  download,
   docs: defineCollection({
     loader: docsLoader(),
     schema: docsSchema({
diff --git a/src/content/download/datum-mcp.mdx b/src/content/download/datum-mcp.mdx
new file mode 100644
index 00000000..c6f77a17
--- /dev/null
+++ b/src/content/download/datum-mcp.mdx
@@ -0,0 +1,43 @@
+---
+slug: "datum-mcp"
+title: "Datum MCP"
+description: "Quickly and safely expose local environments to the internet, for free."
+icon: "workflow"
+meta:
+  title: "Datum MCP"
+  description: "Datum’s official MCP server"
+---
+
+import { Tabs, TabItem, Aside } from '@astrojs/starlight/components';
+
+Datum’s official [MCP server](https://github.com/datum-cloud/datum-mcp) helps builders connect AI tools to their Datum projects with a rapidly evolving open standard. Datum MCP gives AI tools secure access to your Datum resources so you can understand their current state, suggest and implement changes, and diagnose common configuration issues.
+
+<Tabs>
+  <TabItem label="Quick Install">
+  From the command line, this will install Datum MCP on your system
+
+  ```
+  curl -fsSL https://github.com/datum-cloud/datum-mcp/releases/latest/download/install.sh | sh
+  ```
+  </TabItem>
+
+  <TabItem label="Manual download">
+  The [latest release](https://github.com/datum-cloud/datum-mcp/releases/latest) is available at [https://github.com/datum-cloud/datum-mcp/releases/latest](https://github.com/datum-cloud/datum-mcp/releases/latest). Binaries are available for Linux, MacOS and Windows on x86 and arm64 versions.
+
+  Add this to your AI client config to run the server via stdio.
+
+  ```
+  {
+    "datum-mcp": {
+      "command": "datum-mcp",
+      "args": []
+    }
+  }
+  ```
+  </TabItem>
+
+  <TabItem label="Add to Cursor Locally">
+  To add the Datum MCP to Cursor, this one-click command will suffice:  [Add to Cursor](https://cursor.com/en-US/install-mcp?name=datum-mcp&config=eyJ0eXBlIjoic3RkaW8iLCJlbnYiOnt9LCJjb21tYW5kIjoiL3Vzci9sb2NhbC9iaW4vZGF0dW0tbWNwICJ9)
+  </TabItem>
+</Tabs>
+
diff --git a/src/content/download/datumctl.mdx b/src/content/download/datumctl.mdx
new file mode 100644
index 00000000..e35cfe6a
--- /dev/null
+++ b/src/content/download/datumctl.mdx
@@ -0,0 +1,128 @@
+---
+slug: "datumctl"
+title: "Datumctl"
+description: "Quickly and safely expose local environments to the internet, for free."
+icon: "terminal"
+order: 1
+meta:
+  title: "Download MacOS"
+  description: ""
+---
+
+import { Tabs, TabItem, Aside } from '@astrojs/starlight/components';
+
+## Installation
+
+<Tabs>
+  <TabItem label="Homebrew">
+  Install Datum via Homebrew with the following command:
+
+  ```
+  # Tap the Datum Cloud formula repository (only needs to be done once)
+  brew tap datum-cloud/homebrew-tap
+
+  # Install datumctl
+  brew install datumctl
+
+  # Upgrade datumctl
+  brew upgrade datumctl
+
+  ```
+  </TabItem>
+
+  <TabItem label="Pre-built binaries">
+  The easiest way to install datumctl is by downloading the pre-built binary for your operating system and architecture from the [GitHub Releases page](https://github.com/datum-cloud/datumctl/releases).
+
+  **Manual Download:**
+
+  1. Go to the [Latest Release](https://github.com/datum-cloud/datumctl/releases/latest).
+  2. Find the appropriate archive (.tar.gz or .zip) for your system (e.g., datumctl\_Linux\_x86\_64.tar.gz, datumctl\_Windows\_amd64.zip, datumctl\_Darwin\_arm64.tar.gz).
+  3. Download and extract the archive.
+  4. Move the datumctl (or datumctl.exe) binary to a directory in your system’s PATH (e.g., /usr/local/bin on Linux/macOS, or a custom directory you’ve added to the PATH on Windows).
+  5. Ensure the binary is executable (chmod \+x /path/to/datumctl on Linux/macOS).
+
+  **Using** curl (Example for Linux/macOS):
+
+  This example shows how to download and install a specific version. You must:
+
+  1. Replace **\<version\> with the desired release tag (e.g., v0.1.0).**
+  2. **Replace \<archive\_filename\> with the exact filename for your OS and architecture found on the releases page (e.g., datumctl\_Darwin\_arm64.tar.gz).**
+
+  ```
+  VERSION="<version>"
+  ARCHIVE="<archive_filename>"
+  curl -sSL "https://github.com/datum-cloud/datumctl/releases/download/${VERSION}/${ARCHIVE}" | tar xz
+  sudo mv datumctl /usr/local/bin/
+  ```
+
+  *\[\!NOTE\] The sudo mv command might require administrator privileges. Adjust the destination path /usr/local/bin/ if needed for your system.*
+
+  **nix (Linux and macOS)**
+
+  **datumctl ships with a flake.nix so you don’t have to install anything:**
+
+  ```
+
+  # Pick latest from git
+  nix run github:datum-cloud/datumctl
+
+
+  # Specify version
+  nix run github:datum-cloud/datumctl/b044455d877b800812e4fd78e42429c1617c011b
+
+
+  # Run from local git clone
+  nix run
+
+
+  # Start shell with all dependencies available
+  nix develop --command zsh
+
+
+  # Build locally
+  nix build
+
+
+  # ...or for specific platform
+  nix build .#packages.x86_64-linux.default
+  nix build .#packages.aarch64-linux.default
+  ```
+
+  You can, however, incorporate it into your home-manager build or other flake so that it’s always available in your profile.
+  </TabItem>
+
+  <TabItem label="Build from source">
+  If you prefer, you can build datumctl from source:
+
+  1\. Prerequisites:
+
+  - Go (Version 1.21 or later)
+  - Git
+
+  2\. Clone the repository:
+
+  ```
+  git clone https://github.com/datum-cloud/datumctl.git
+  cd datumctl
+  ```
+
+  1. Build the binary:
+
+  ```
+  go build -o datumctl .
+  ```
+
+  2. Install: Move the resulting datumctl binary to a directory in your PATH as described in the pre-built binaries section
+  3. Verification
+
+    To verify the installation, run:
+
+
+  ```
+  datumctl version
+  ```
+
+  This should output the installed version of datumctl.
+  </TabItem>
+</Tabs>
+
diff --git a/src/content/download/linux.mdx b/src/content/download/linux.mdx
new file mode 100644
index 00000000..da9fa5e9
--- /dev/null
+++ b/src/content/download/linux.mdx
@@ -0,0 +1,50 @@
+---
+slug: "linux"
+title: "Linux"
+description: "Quickly and safely expose local environments to the internet, for free."
+icon: "linux"
+order: 1
+meta:
+  title: "Download MacOS"
+  description: ""
+---
+
+import { Tabs, TabItem, Aside } from '@astrojs/starlight/components';
+
+<Aside type="note" title="note">
+  Quickly and safely expose local environments to the internet, for free.
+</Aside>
+
+## Installation
+
+<Tabs>
+  <TabItem label="Homebrew">
+  Install Datum via Homebrew with the following command:
+
+  ```bash
+  brew install datum-net/tap/galactic-vpc
+  ```
+
+  You can also download the latest version directly from our releases page.
+
+## Configure and run
+
+  1. Authenticate with your API token:
+  ```bash
+  galactic-vpc auth login --token <YOUR_API_TOKEN>
+  ```
+
+  2. Start a QUIC tunnel:
+  ```bash
+  galactic-vpc tunnel start --port 8080
+  ```
+
+  3. Your service is now reachable on the global edge.
+  [Run as a background service on macOS](#)
+
+  </TabItem>
+  <TabItem label="Direct download">
+  How to direct download datum in macos
+  </TabItem>
+</Tabs>
+
diff --git a/src/content/download/mac-os.mdx b/src/content/download/mac-os.mdx
new file mode 100644
index 00000000..8101a764
--- /dev/null
+++ b/src/content/download/mac-os.mdx
@@ -0,0 +1,32 @@
+---
+slug: "mac-os"
+title: "Mac OS"
+description: "Quickly and safely expose local environments to the internet, for free."
+icon: "apple"
+order: 1
+meta:
+  title: "Download MacOS"
+  description: "Quickly and safely expose local environments to the internet, for free. "
+---
+
+import { Tabs, TabItem, Aside } from '@astrojs/starlight/components';
+
+<Aside type="note" icon="approve-check-circle">
+  Quickly and safely expose local environments to the internet, for free.
+</Aside>
+
+## Installation
+
+<Tabs>
+  <TabItem label="Homebrew">
+  Install Datum via Homebrew with the following command:
+
+  ```bash
+  brew install datum-net/tap/galactic-vpc
+  ```
+  </TabItem>
+  <TabItem label="Direct download">
+  Alternatively, you can download the latest version of Datum directly from our [GitHub releases page](https://github.com/datum-cloud/app/tags).
+  </TabItem>
+</Tabs>
+
diff --git a/src/content/download/windows.mdx b/src/content/download/windows.mdx
new file mode 100644
index 00000000..0c290c3d
--- /dev/null
+++ b/src/content/download/windows.mdx
@@ -0,0 +1,32 @@
+---
+slug: "windows"
+title: "Windows"
+description: "Quickly and safely expose local environments to the internet, for free."
+icon: "windows"
+order: 1
+meta:
+  title: "Download Windows"
+  description: "Quickly and safely expose local environments to the internet, for free. "
+---
+
+import { Tabs, TabItem, Aside } from '@astrojs/starlight/components';
+
+<Aside type="note" title="note">
+  Quickly and safely expose local environments to the internet, for free.
+</Aside>
+
+## Installation
+
+<Tabs>
+  <TabItem label="Homebrew">
+  Install Datum via Homebrew with the following command:
+
+  ```bash
+  brew install datum-net/tap/galactic-vpc
+  ```
+  </TabItem>
+  <TabItem label="Direct download">
+  Alternatively, you can download the latest version of Datum directly from our [GitHub releases page](https://github.com/datum-cloud/app/tags).
+  </TabItem>
+</Tabs>
+
diff --git a/src/content/pages/download.mdx b/src/content/pages/download.mdx
new file mode 100644
index 00000000..1d2dca68
--- /dev/null
+++ b/src/content/pages/download.mdx
@@ -0,0 +1,10 @@
+---
+title: "QUIC, get to the choppa!"
+description: ""
+slug: download
+meta:
+  title: "QUIC, get to the choppa!"
+  description: ""
+---
+
+Grow your skills, your revenue, and your ecosystem advantage with Datum's open network cloud. If you're looking for help, please surf on over to our <a href="https://link.datum.net/discord" target="_blank">Discord channel</a> or submit a ticket to <a href="" class="open-beacon">our support team.</a>
diff --git a/src/data/downloads.json b/src/data/downloads.json
new file mode 100644
index 00000000..ae471b3d
--- /dev/null
+++ b/src/data/downloads.json
@@ -0,0 +1,67 @@
+{
+  "sections": [
+    {
+      "title": "Native apps",
+      "items": [
+        {
+          "id": "mac-os",
+          "label": "mac",
+          "href": "/download/mac-os/",
+          "icon": "apple"
+        },
+        {
+          "id": "windows",
+          "label": "Windows",
+          "href": "/download/windows/",
+          "icon": "windows"
+        },
+        {
+          "id": "linux",
+          "label": "Linux",
+          "icon": "linux",
+          "badge": "Coming"
+        }
+      ]
+    },
+    {
+      "title": "Dev tools",
+      "items": [
+        {
+          "id": "datumctl",
+          "label": "datumctl",
+          "href": "/download/datumctl/",
+          "icon": "terminal"
+        },
+        {
+          "id": "datum-mcp",
+          "label": "Datum MCP",
+          "href": "/download/datum-mcp/",
+          "icon": "workflow"
+        }
+      ]
+    },
+    {
+      "title": "SDKs",
+      "items": [
+        {
+          "id": "go",
+          "label": "Go",
+          "icon": "go",
+          "badge": "Coming"
+        },
+        {
+          "id": "typescript",
+          "label": "TypeScript",
+          "icon": "ts",
+          "badge": "Coming"
+        },
+        {
+          "id": "rust",
+          "label": "Rust",
+          "icon": "rust",
+          "badge": "Coming"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/pages/download/[slug].astro b/src/pages/download/[slug].astro
new file mode 100644
index 00000000..56175040
--- /dev/null
+++ b/src/pages/download/[slug].astro
@@ -0,0 +1,76 @@
+---
+// src/pages/download/[slug].astro
+import '@v1/styles/page-download.css';
+import Layout from '@layouts/Layout.astro';
+import Hero from '@components/Hero.astro';
+import Footer from '@components/Footer.astro';
+import Download from '@components/download/Download.astro';
+import Icon from '@components/Icon.astro';
+import { getCollection, render } from 'astro:content';
+import { getCollectionEntry } from '@utils/collectionUtils';
+
+const page = await getCollectionEntry('pages', 'download');
+
+export async function getStaticPaths() {
+  const downloadEntries = await getCollection('download', ({ data }) => {
+    return !data.draft;
+  });
+
+  return downloadEntries.map((entry) => ({
+    params: { slug: entry.data.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+
+const pageFm = page.data;
+
+// SEO
+const fm = entry.data;
+const meta = fm.meta || {};
+const title =
+  `${pageFm.title || ''}${pageFm.title && fm.title ? ' | ' : ''}${fm.title || ''}`.trim() ||
+  'Download';
+const description = fm.description || 'Download Datum';
+---
+
+<Layout title={title} description={description} bodyClass="page-download" meta={meta}>
+  <section
+    class="datum-container fade-in--pure"
+    data-reveal="fade-in--pure--visible"
+    data-reveal-delay="100"
+    data-reveal-immediate="true"
+  >
+    <Hero
+      class="light pb-0"
+      title={pageFm.title}
+      description={pageFm.description}
+      bodyClass={`page-brand page-brand--${page.id}`}
+      meta={meta}
+    />
+
+    <div class="section--block section--block--pad bg-glacier-mist-700 pt-0 pb-0">
+      <div class="max-width">
+        <Download activeId={entry.data.slug}>
+          <div class="download-content-frame">
+            <div class="download-content-header">
+              <div class="download-content-title">
+                <div>
+                  {fm.icon && <Icon name={fm.icon} size="xl" class="download-content-title-icon" />}
+                </div>
+                <h1 class="download-content-title-text">{fm.title}</h1>
+              </div>
+            </div>
+
+            <div class="download-section">
+              <Content />
+            </div>
+          </div>
+        </Download>
+      </div>
+    </div>
+    <Footer />
+  </section>
+</Layout>
diff --git a/src/pages/download/index.astro b/src/pages/download/index.astro
new file mode 100644
index 00000000..4fc32320
--- /dev/null
+++ b/src/pages/download/index.astro
@@ -0,0 +1,4 @@
+---
+// src/pages/download.astro
+return Astro.redirect('/download/mac-os/', 302);
+---
diff --git a/src/v1/assets/icons/apple.svg b/src/v1/assets/icons/apple.svg
new file mode 100644
index 00000000..c80615be
--- /dev/null
+++ b/src/v1/assets/icons/apple.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9893_82786)">
+<path d="M15.4909 6.70074C15.3769 6.78919 13.3641 7.92334 13.3641 10.4452C13.3641 13.3622 15.9253 14.3941 16.002 14.4197C15.9902 14.4826 15.5951 15.8329 14.6516 17.2088C13.8103 18.4197 12.9317 19.6285 11.5951 19.6285C10.2585 19.6285 9.9145 18.8521 8.3715 18.8521C6.86781 18.8521 6.33317 19.6541 5.11057 19.6541C3.88796 19.6541 3.03489 18.5337 2.05405 17.1577C0.917936 15.542 0 13.0319 0 10.6496C0 6.8285 2.48452 4.80197 4.92973 4.80197C6.22899 4.80197 7.31204 5.65504 8.12776 5.65504C8.90418 5.65504 10.115 4.75086 11.5931 4.75086C12.1533 4.75086 14.1661 4.80197 15.4909 6.70074ZM10.8914 3.13317C11.5027 2.40786 11.9351 1.40147 11.9351 0.395086C11.9351 0.255528 11.9233 0.114005 11.8978 0C10.9032 0.0373464 9.7199 0.662408 9.00639 1.48993C8.44619 2.12678 7.92334 3.13317 7.92334 4.15332C7.92334 4.30663 7.94889 4.45995 7.96069 4.50909C8.02359 4.52088 8.1258 4.53464 8.22801 4.53464C9.12039 4.53464 10.2428 3.9371 10.8914 3.13317Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_9893_82786">
+<rect width="16" height="19.656" fill="currentColor"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/v1/assets/icons/go.svg b/src/v1/assets/icons/go.svg
new file mode 100644
index 00000000..aa3abe32
--- /dev/null
+++ b/src/v1/assets/icons/go.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9893_82829)">
+<path d="M11.5033 7.67432C10.8808 7.8263 10.26 7.98464 9.64077 8.14932L9.62202 8.15557C9.47827 8.19307 9.45952 8.19932 9.32202 8.04307C9.15952 7.85557 9.03452 7.73682 8.80327 7.63057C8.48647 7.47386 8.13304 7.4062 7.78076 7.43483C7.42848 7.46345 7.09061 7.58728 6.80327 7.79307C6.44769 8.004 6.15554 8.30689 5.95756 8.66984C5.75958 9.0328 5.6631 9.44241 5.67827 9.85557C5.67618 10.2723 5.82609 10.6754 6.09991 10.9895C6.37373 11.3036 6.75268 11.5071 7.16577 11.5618C7.51365 11.6117 7.86849 11.5718 8.19664 11.446C8.52479 11.3202 8.81536 11.1127 9.04077 10.8431C9.12202 10.7556 9.19077 10.6618 9.26577 10.5556L9.34702 10.4431H7.20952C6.97827 10.4431 6.92827 10.2993 7.00327 10.1181C7.14702 9.78057 7.40952 9.21807 7.56577 8.93057C7.59702 8.86807 7.67827 8.76182 7.84077 8.76182H11.397C11.5595 8.26182 11.8158 7.79307 12.1595 7.34932C12.5293 6.85724 12.9933 6.44359 13.5244 6.13243C14.0555 5.82127 14.6432 5.61881 15.2533 5.53682C16.3783 5.33682 17.4408 5.44932 18.4033 6.08682C18.8267 6.35044 19.1865 6.70465 19.4567 7.12396C19.7268 7.54328 19.9007 8.01726 19.9658 8.51182C20.0707 9.18291 20.0094 9.86951 19.7871 10.5114C19.5648 11.1532 19.1883 11.7307 18.6908 12.1931C17.751 13.1317 16.4814 13.6655 15.1533 13.6806C14.171 13.6876 13.2175 13.3492 12.4595 12.7243C11.9288 12.2865 11.5431 11.6981 11.3533 11.0368C11.2283 11.2868 11.072 11.5368 10.8908 11.7681C10.5185 12.2733 10.0472 12.6973 9.50562 13.0143C8.96403 13.3313 8.36353 13.5346 7.74077 13.6118C7.22339 13.6953 6.69461 13.6753 6.18502 13.553C5.67543 13.4307 5.19516 13.2085 4.77202 12.8993C4.38019 12.6197 4.05221 12.26 3.80979 11.8441C3.56737 11.4282 3.41602 10.9656 3.36577 10.4868C3.22202 9.29932 3.57827 8.23682 4.30327 7.29932C5.05998 6.30219 6.16879 5.63154 7.40327 5.42432C8.44077 5.23682 9.43452 5.36182 10.3283 5.95557C10.9158 6.33682 11.3283 6.86182 11.6095 7.48682C11.672 7.58682 11.6345 7.64307 11.497 7.67432H11.5033ZM17.7845 9.29307L17.7783 9.17432L17.7533 8.93682C17.7104 8.68894 17.6165 8.45265 17.4776 8.24289C17.3387 8.03314 17.1578 7.85447 16.9464 7.7182C16.7349 7.58192 16.4975 7.491 16.2491 7.45117C16.0007 7.41135 15.7467 7.42348 15.5033 7.48682C15.0268 7.56981 14.5867 7.79516 14.2408 8.13321C13.895 8.47126 13.6596 8.90614 13.5658 9.38057C13.4672 9.78677 13.5146 10.2147 13.6997 10.5895C13.8848 10.9642 14.1958 11.262 14.5783 11.4306C15.1908 11.6931 15.797 11.6618 16.3783 11.3681C16.7828 11.1877 17.1289 10.8979 17.3774 10.5312C17.6259 10.1645 17.7669 9.73567 17.7845 9.29307ZM0.690767 10.6868L0.990767 10.1243C1.02827 10.0556 1.11577 9.98682 1.19702 9.98682H2.66577C2.75327 9.98682 2.79077 10.0493 2.79077 10.1431L2.82827 10.6618C2.82827 10.7368 2.74077 10.8181 2.67827 10.8181H0.759517C0.672017 10.8181 0.653267 10.7556 0.697017 10.6868H0.690767ZM1.37827 7.22432L1.81577 6.61807C1.85952 6.55557 1.96577 6.50557 2.05327 6.50557H4.08452C4.17202 6.50557 4.19077 6.56807 4.14702 6.64307L3.69077 7.21807C3.64077 7.28057 3.54702 7.34932 3.48452 7.34932H1.44077C1.35952 7.34932 1.33452 7.29307 1.37827 7.22432ZM0.159517 8.87432C0.103267 8.94932 0.115767 9.01182 0.197017 9.01182H2.74077C2.82202 9.01182 2.90327 8.96807 2.92827 8.87432L3.09702 8.33682C3.11577 8.26807 3.07202 8.19932 2.99077 8.19932H0.690767C0.603267 8.19932 0.503267 8.24307 0.459517 8.31182L0.153267 8.87432H0.159517Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_9893_82829">
+<rect width="20" height="20" fill="currentColor"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/v1/assets/icons/linux.svg b/src/v1/assets/icons/linux.svg
new file mode 100644
index 00000000..1bf67212
--- /dev/null
+++ b/src/v1/assets/icons/linux.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.78172 4.01251C6.81297 4.03126 6.84422 4.06876 6.88172 4.06876C6.91297 4.06876 6.96922 4.05626 6.97547 4.01876C6.97547 3.97501 6.91297 3.94376 6.86922 3.92501C6.841 3.91121 6.81001 3.90403 6.7786 3.90403C6.74718 3.90403 6.71619 3.91121 6.68797 3.92501C6.67547 3.92501 6.66297 3.94376 6.66922 3.95626C6.68172 4.00001 6.74422 3.99376 6.78172 4.01876V4.01251ZM6.06922 4.06876C6.10672 4.06876 6.13172 4.03126 6.16297 4.01251C6.20047 3.99376 6.26922 4.00001 6.28172 3.96251C6.28172 3.95001 6.27547 3.93126 6.26297 3.92501C6.20672 3.89376 6.13797 3.90626 6.07547 3.92501C6.03797 3.95001 5.96922 3.97501 5.97547 4.02501C5.97547 4.05626 6.03797 4.07501 6.06922 4.06876ZM13.2567 13.1438C13.1442 13.0188 13.088 12.7688 13.0255 12.5C12.963 12.2375 12.9005 11.9563 12.6817 11.775C12.6045 11.7057 12.5157 11.6507 12.4192 11.6125C12.7192 10.725 12.6067 9.83751 12.2942 9.03751C11.9287 8.15385 11.4198 7.33661 10.788 6.61876C10.2255 5.91876 9.68797 5.25626 9.70047 4.27501C9.71297 2.77501 9.86297 0.00625869 7.23172 8.68509e-06C3.90047 -0.00624131 4.73172 3.36251 4.69422 4.40001C4.66809 5.1597 4.41322 5.89381 3.96297 6.50626C3.14961 7.43542 2.50833 8.5021 2.06922 9.65626C1.86729 10.2096 1.79877 10.8027 1.86922 11.3875C1.65672 11.575 1.49422 11.8688 1.33172 12.0438C1.19422 12.1875 0.994221 12.2375 0.775471 12.3188C0.556721 12.3938 0.319221 12.5063 0.175471 12.7875C0.106721 12.9125 0.0817207 13.05 0.0817207 13.1938C0.0817207 13.3188 0.100471 13.4438 0.119221 13.575C0.162971 13.8375 0.200471 14.0875 0.150471 14.2563C-0.0245292 14.725 -0.0432791 15.05 0.0754709 15.2875C0.200471 15.525 0.450471 15.625 0.731721 15.6875C1.29422 15.8 2.05672 15.775 2.66297 16.0938C3.30672 16.4313 3.95672 16.55 4.47547 16.4313C4.85672 16.3438 5.16297 16.1188 5.32547 15.775C5.73172 15.775 6.18172 15.6 6.89422 15.5563C7.38172 15.5188 7.98797 15.7313 8.68797 15.6938C8.76682 15.9948 8.95054 16.2578 9.20606 16.4354C9.46157 16.613 9.7721 16.6935 10.0817 16.6625C10.7061 16.5812 11.2726 16.2552 11.6567 15.7563C12.0942 15.2188 12.8255 15 13.313 14.7063C13.5505 14.5563 13.7505 14.375 13.763 14.1125C13.7755 13.8438 13.6192 13.55 13.263 13.1438H13.2567ZM6.88172 2.84376C7.20047 2.11876 7.99422 2.13126 8.31922 2.83126C8.52547 3.29376 8.43172 3.83126 8.17547 4.14376C8.11922 4.11876 7.98172 4.05626 7.76297 3.98126C7.80047 3.94376 7.86297 3.89376 7.88797 3.83126C8.04422 3.45001 7.88797 2.95626 7.59422 2.94376C7.35672 2.93126 7.14422 3.30001 7.21297 3.69376C7.0763 3.63218 6.93396 3.58404 6.78797 3.55001C6.75672 3.32501 6.77547 3.07501 6.88172 2.84376ZM5.55672 2.46876C5.88797 2.46876 6.23172 2.93126 6.18172 3.55626C6.06297 3.58751 5.95047 3.63751 5.84422 3.70626C5.88797 3.41876 5.73797 3.05626 5.53172 3.06876C5.26297 3.09376 5.21922 3.75626 5.47547 3.98126C5.50672 4.01251 5.53797 3.98126 5.28797 4.16876C4.77547 3.68751 4.94422 2.46876 5.55672 2.46876ZM5.11922 4.44376L5.57547 4.10001C5.72547 3.95626 6.01297 3.63751 6.48172 3.63751C6.71297 3.63751 6.98797 3.71251 7.32547 3.93126C7.53172 4.05626 7.69422 4.07501 8.06297 4.23126C8.33172 4.34376 8.50047 4.54376 8.40047 4.82501C8.31922 5.05626 8.04422 5.29376 7.66297 5.41251C7.30047 5.53126 7.01922 5.93126 6.41922 5.90001C6.29422 5.89376 6.19422 5.86251 6.10672 5.83126C5.84422 5.71876 5.71297 5.49376 5.45672 5.34376C5.17547 5.18751 5.02547 5.00001 4.97547 4.84376C4.93172 4.68126 4.97547 4.55001 5.11297 4.44376H5.11922ZM5.21922 15.3188C5.13172 16.4563 3.79422 16.4313 2.76922 15.9C1.80047 15.3875 0.537971 15.6875 0.281721 15.1875C0.200471 15.0375 0.200471 14.775 0.362971 14.3313V14.3188C0.444221 14.0688 0.387971 13.8 0.344221 13.5438C0.306721 13.2938 0.281721 13.0563 0.375471 12.8938C0.487971 12.675 0.650471 12.5938 0.856721 12.525C1.19422 12.4 1.23797 12.4125 1.49422 12.2C1.67547 12.0125 1.80672 11.7813 1.96297 11.6188C2.12547 11.4375 2.28797 11.3563 2.53797 11.3938C2.80047 11.4313 3.02547 11.6125 3.25047 11.9125L3.88797 13.0688C4.20047 13.7188 5.28797 14.65 5.21922 15.3188ZM5.17547 14.4688C5.04422 14.2563 4.86297 14.0313 4.70672 13.8313C4.93797 13.8313 5.16922 13.7625 5.25047 13.5438C5.32547 13.3438 5.25047 13.0563 5.01297 12.7313C4.57547 12.1438 3.76297 11.675 3.76297 11.675C3.38439 11.4607 3.09919 11.1131 2.96297 10.7C2.85739 10.329 2.85092 9.93679 2.94422 9.56251C3.11297 8.81251 3.55047 8.09376 3.83172 7.63751C3.90672 7.57501 3.85672 7.73751 3.55047 8.31251C3.26922 8.83751 2.75672 10.05 3.46297 11C3.48844 10.3093 3.64098 9.62918 3.91297 8.99376C4.30672 8.10001 5.12547 6.55626 5.19422 5.32501C5.22547 5.35001 5.34422 5.43126 5.39422 5.45626C5.54422 5.54376 5.65672 5.67501 5.80672 5.79376C6.20672 6.11876 6.73172 6.09376 7.18172 5.83126C7.38797 5.71876 7.55047 5.58751 7.70047 5.53751C8.02547 5.43751 8.28172 5.26251 8.42547 5.05001C8.72492 6.12733 9.1311 7.17208 9.63797 8.16876C9.83797 8.53751 10.2317 9.32501 10.4067 10.2688C10.513 10.2688 10.638 10.2813 10.763 10.3125C11.213 9.15001 10.3817 7.90001 10.0005 7.55001C9.85047 7.40001 9.84422 7.33751 9.91922 7.33751C10.4751 7.85786 10.8718 8.52544 11.063 9.26251C11.1567 9.63751 11.1692 10.0313 11.0755 10.425C11.613 10.6438 12.2442 11.0063 12.0755 11.55H11.938C12.0442 11.225 11.813 10.9875 11.2005 10.7063C10.563 10.425 10.0255 10.425 9.95047 11.1125C9.55672 11.25 9.35672 11.5875 9.25672 12C9.16939 12.4281 9.12128 12.8632 9.11297 13.3C9.09422 13.55 8.99422 13.8875 8.88797 14.2375C7.84422 14.9875 6.38797 15.3125 5.16922 14.475L5.17547 14.4688ZM13.5505 14.0938C13.5255 14.6438 12.213 14.7438 11.4942 15.6125C11.1457 16.0636 10.634 16.3599 10.0692 16.4375C9.84409 16.4636 9.61651 16.417 9.41973 16.3046C9.22295 16.1921 9.06729 16.0197 8.97547 15.8125C8.81922 15.45 8.89422 15.0625 9.01297 14.6313C9.13172 14.1688 9.31297 13.6938 9.33172 13.3125C9.35672 12.8125 9.38797 12.3813 9.46922 12.05C9.55672 11.7125 9.68172 11.4875 9.91297 11.3625L9.95047 11.3438C9.97547 11.7813 10.188 12.2125 10.563 12.3063C10.9692 12.4125 11.563 12.0625 11.813 11.775C12.1005 11.7688 12.3192 11.75 12.5442 11.9438C12.8692 12.2188 12.7755 12.9313 13.1067 13.2938C13.4442 13.6688 13.5567 13.9313 13.5442 14.1L13.5505 14.0938ZM5.23797 4.84376C5.30047 4.90626 5.39422 4.98751 5.50047 5.06876C5.71922 5.23751 6.01297 5.41876 6.38797 5.41876C6.76297 5.41876 7.12547 5.22501 7.42547 5.06251C7.58172 4.98126 7.78172 4.83751 7.90672 4.72501C8.03172 4.61251 8.09422 4.51876 8.00672 4.51251C7.91922 4.50001 7.92547 4.59376 7.81297 4.67501C7.66922 4.78126 7.50047 4.91876 7.36297 4.99376C7.11922 5.13126 6.72547 5.33126 6.38797 5.33126C6.05047 5.33126 5.77547 5.17501 5.57547 5.01251C5.47547 4.93126 5.38797 4.85001 5.32547 4.78751C5.27547 4.74376 5.26297 4.63751 5.18797 4.63126C5.13797 4.62501 5.12547 4.75001 5.24422 4.83751L5.23797 4.84376Z" fill="currentColor"/>
+</svg>
diff --git a/src/v1/assets/icons/rust.svg b/src/v1/assets/icons/rust.svg
new file mode 100644
index 00000000..71b75a9c
--- /dev/null
+++ b/src/v1/assets/icons/rust.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6274 9.7808L17.8962 9.3308C17.8962 9.2558 17.8837 9.18705 17.8774 9.11205L18.5024 8.52455C18.534 8.49567 18.5577 8.45915 18.5711 8.4185C18.5845 8.37785 18.5873 8.33443 18.5792 8.2924C18.571 8.25037 18.5522 8.21114 18.5245 8.17847C18.4969 8.14579 18.4613 8.12077 18.4212 8.1058L17.6149 7.79955C17.5953 7.73044 17.5745 7.66168 17.5524 7.5933L18.0524 6.8933C18.0775 6.85874 18.0933 6.81833 18.0984 6.77591C18.1034 6.73349 18.0975 6.69049 18.0812 6.651C18.0649 6.61151 18.0388 6.57686 18.0053 6.55035C17.9718 6.52384 17.9321 6.50635 17.8899 6.49955L17.0399 6.36205L16.9399 6.1683L17.2962 5.3808C17.3226 5.32252 17.3256 5.25634 17.3047 5.19589C17.2837 5.13543 17.2404 5.08529 17.1837 5.0558C17.1454 5.03464 17.1023 5.02387 17.0587 5.02455L16.1962 5.0558C16.1515 5.00066 16.1056 4.94648 16.0587 4.8933L16.2524 4.04955C16.2643 4.00651 16.2645 3.96106 16.2529 3.91792C16.2413 3.87479 16.2184 3.83555 16.1865 3.80429C16.1546 3.77303 16.1149 3.75088 16.0715 3.74016C16.0281 3.72943 15.9827 3.73052 15.9399 3.7433L15.1024 3.9433L14.9399 3.8058L14.9712 2.9433C14.9737 2.89943 14.9646 2.85567 14.9449 2.81642C14.9251 2.77717 14.8953 2.74382 14.8586 2.71973C14.8218 2.69565 14.7794 2.68168 14.7355 2.67924C14.6916 2.67679 14.6479 2.68596 14.6087 2.7058L13.8274 3.06205L13.6399 2.96205L13.4962 2.1058C13.4894 2.06363 13.4719 2.0239 13.4454 1.99041C13.4189 1.95691 13.3842 1.93077 13.3447 1.91447C13.3052 1.89818 13.2622 1.89227 13.2198 1.89732C13.1774 1.90237 13.137 1.9182 13.1024 1.9433L12.4024 2.4433C12.332 2.4212 12.2611 2.40037 12.1899 2.3808L11.8899 1.57455C11.8749 1.53444 11.8499 1.49885 11.8172 1.47118C11.7846 1.44351 11.7453 1.4247 11.7033 1.41655C11.6613 1.40839 11.6179 1.41117 11.5772 1.42461C11.5366 1.43805 11.5 1.4617 11.4712 1.4933L10.8774 2.12455L10.6649 2.1058L10.2087 1.3683C10.1862 1.33213 10.155 1.30227 10.1178 1.28157C10.0806 1.26087 10.0387 1.25 9.99616 1.25C9.9536 1.25 9.91174 1.26087 9.87455 1.28157C9.83736 1.30227 9.80608 1.33213 9.78366 1.3683L9.32741 2.1058C9.25651 2.1113 9.18567 2.11755 9.11491 2.12455L8.52116 1.4933C8.49227 1.4617 8.45576 1.43805 8.41511 1.42461C8.37446 1.41117 8.33104 1.40839 8.28901 1.41655C8.24698 1.4247 8.20775 1.44351 8.17507 1.47118C8.1424 1.49885 8.11738 1.53444 8.10241 1.57455L7.80241 2.38705L7.58991 2.44955L6.88991 1.9433C6.85535 1.9182 6.81493 1.90237 6.77251 1.89732C6.73009 1.89227 6.68709 1.89818 6.6476 1.91447C6.60812 1.93077 6.57346 1.95691 6.54695 1.99041C6.52044 2.0239 6.50295 2.06363 6.49616 2.1058L6.35866 2.96205L6.17116 3.06205L5.38366 2.7058C5.34445 2.68596 5.3007 2.67679 5.25683 2.67924C5.21295 2.68168 5.17049 2.69565 5.13373 2.71973C5.09697 2.74382 5.06721 2.77717 5.04745 2.81642C5.02768 2.85567 5.01862 2.89943 5.02116 2.9433L5.05241 3.8058L4.88991 3.9433L4.05241 3.74955C4.01001 3.73818 3.96536 3.73816 3.92295 3.74952C3.88055 3.76087 3.84188 3.78319 3.81084 3.81424C3.7798 3.84528 3.75748 3.88395 3.74612 3.92635C3.73477 3.96876 3.73478 4.0134 3.74616 4.0558L3.94616 4.89955L3.80866 5.06205L2.94616 5.0308C2.90313 5.02885 2.86032 5.03805 2.82189 5.05751C2.78346 5.07697 2.75072 5.10603 2.72682 5.14187C2.70293 5.17771 2.6887 5.21912 2.68552 5.26208C2.68234 5.30503 2.69031 5.34808 2.70866 5.38705L3.06491 6.17455L2.96491 6.36205L2.11491 6.5058C2.0722 6.51169 2.03174 6.52852 1.99745 6.55466C1.96317 6.5808 1.93623 6.61536 1.91924 6.65498C1.90226 6.69461 1.89581 6.73796 1.90053 6.78081C1.90525 6.82366 1.92096 6.86457 1.94616 6.89955L2.44616 7.59955L2.38366 7.8058L1.58366 8.11205C1.54308 8.12632 1.50687 8.15082 1.47852 8.18318C1.45018 8.21554 1.43067 8.25466 1.42187 8.29676C1.41307 8.33887 1.41529 8.38253 1.4283 8.42353C1.44131 8.46453 1.46469 8.50148 1.49616 8.5308L2.12741 9.1183L2.10866 9.33705L1.37116 9.78705C1.33208 9.80867 1.29951 9.84037 1.27683 9.87883C1.25415 9.9173 1.24219 9.96115 1.24219 10.0058C1.24219 10.0505 1.25415 10.0943 1.27683 10.1328C1.29951 10.1712 1.33208 10.2029 1.37116 10.2246L2.10866 10.6746L2.12741 10.8871L1.50241 11.4746C1.46927 11.5032 1.44427 11.5401 1.4299 11.5816C1.41553 11.623 1.41229 11.6674 1.42052 11.7105C1.42875 11.7535 1.44816 11.7937 1.47679 11.8268C1.50542 11.86 1.54228 11.8851 1.58366 11.8996L2.38991 12.1996L2.45241 12.4121L1.95241 13.1058C1.92576 13.1404 1.90864 13.1814 1.90276 13.2246C1.89687 13.2679 1.90242 13.312 1.91886 13.3524C1.93529 13.3929 1.96204 13.4283 1.99644 13.4553C2.03084 13.4822 2.07168 13.4996 2.11491 13.5058L2.96491 13.6433L3.06491 13.8308L2.70866 14.6183C2.69031 14.6573 2.68234 14.7003 2.68552 14.7433C2.6887 14.7862 2.70293 14.8276 2.72682 14.8635C2.75072 14.8993 2.78346 14.9284 2.82189 14.9478C2.86032 14.9673 2.90313 14.9765 2.94616 14.9746L3.80866 14.9496L3.94616 15.1121L3.75241 15.9496C3.74282 15.9909 3.74392 16.034 3.7556 16.0748C3.76728 16.1156 3.78916 16.1528 3.81917 16.1828C3.84918 16.2128 3.88634 16.2347 3.92715 16.2464C3.96795 16.258 4.01106 16.2591 4.05241 16.2496L4.89616 16.0558L5.05866 16.1933L5.03366 17.0558C5.03171 17.0988 5.04091 17.1416 5.06037 17.1801C5.07983 17.2185 5.10888 17.2512 5.14473 17.2751C5.18057 17.299 5.22197 17.3133 5.26493 17.3164C5.30789 17.3196 5.35094 17.3117 5.38991 17.2933L6.17116 16.9371L6.35866 17.0371L6.50241 17.8871C6.50768 17.9308 6.52442 17.9724 6.55095 18.0076C6.57747 18.0428 6.61283 18.0704 6.65344 18.0875C6.69405 18.1046 6.73847 18.1107 6.78219 18.1052C6.82591 18.0996 6.86739 18.0826 6.90241 18.0558L7.59616 17.5558L7.80866 17.6183L8.10866 18.4183C8.12293 18.4589 8.14742 18.4951 8.17978 18.5234C8.21214 18.5518 8.25126 18.5713 8.29337 18.5801C8.33547 18.5889 8.37914 18.5867 8.42014 18.5737C8.46113 18.5606 8.49808 18.5373 8.52741 18.5058L9.12116 17.8746L9.33366 17.8933L9.78991 18.6308C9.81233 18.667 9.84361 18.6968 9.8808 18.7175C9.91799 18.7382 9.95984 18.7491 10.0024 18.7491C10.045 18.7491 10.0868 18.7382 10.124 18.7175C10.1612 18.6968 10.1925 18.667 10.2149 18.6308L10.6712 17.8933C10.7462 17.8933 10.8149 17.8808 10.8837 17.8746L11.4774 18.4996C11.5063 18.5312 11.5428 18.5548 11.5835 18.5682C11.6241 18.5817 11.6675 18.5845 11.7096 18.5763C11.7516 18.5682 11.7908 18.5493 11.8235 18.5217C11.8562 18.494 11.8812 18.4584 11.8962 18.4183L12.1962 17.6121L12.4087 17.5496L13.1087 18.0496C13.1432 18.0747 13.1836 18.0905 13.2261 18.0955C13.2685 18.1006 13.3115 18.0947 13.351 18.0784C13.3904 18.0621 13.4251 18.0359 13.4516 18.0024C13.4781 17.969 13.4956 17.9292 13.5024 17.8871L13.6399 17.0371L13.8274 16.9371L14.6149 17.2933C14.6541 17.3132 14.6979 17.3223 14.7417 17.3199C14.7856 17.3174 14.8281 17.3035 14.8648 17.2794C14.9016 17.2553 14.9314 17.2219 14.9511 17.1827C14.9709 17.1434 14.9799 17.0997 14.9774 17.0558L14.9462 16.1933L15.1087 16.0558L15.9524 16.2496C15.9938 16.2591 16.0369 16.258 16.0777 16.2464C16.1185 16.2347 16.1556 16.2128 16.1856 16.1828C16.2157 16.1528 16.2375 16.1156 16.2492 16.0748C16.2609 16.034 16.262 15.9909 16.2524 15.9496L16.0587 15.1058L16.1899 14.9433L17.0587 14.9683C17.1017 14.9703 17.1445 14.9611 17.1829 14.9416C17.2214 14.9221 17.2541 14.8931 17.278 14.8572C17.3019 14.8214 17.3161 14.78 17.3193 14.737C17.3225 14.6941 17.3145 14.651 17.2962 14.6121L16.9399 13.8308L17.0399 13.6433L17.8899 13.4996C17.9337 13.4943 17.9753 13.4775 18.0105 13.451C18.0457 13.4245 18.0732 13.3891 18.0904 13.3485C18.1075 13.3079 18.1136 13.2635 18.108 13.2198C18.1024 13.176 18.0854 13.1346 18.0587 13.0996L17.5587 12.4058L17.6212 12.1933L18.4212 11.8933C18.463 11.8796 18.5005 11.855 18.5298 11.8222C18.5591 11.7893 18.5792 11.7493 18.5881 11.7062C18.597 11.663 18.5943 11.6183 18.5804 11.5766C18.5664 11.5348 18.5417 11.4974 18.5087 11.4683L17.8774 10.8808L17.8962 10.6683L18.6337 10.2121C18.6713 10.19 18.7024 10.1585 18.7241 10.1207C18.7457 10.0828 18.7571 10.04 18.7571 9.99643C18.7571 9.95284 18.7457 9.91001 18.7241 9.87219C18.7024 9.83436 18.6713 9.80286 18.6337 9.7808H18.6274ZM13.7149 15.8746C13.6412 15.857 13.5723 15.8234 13.513 15.7764C13.4536 15.7293 13.4053 15.6698 13.3714 15.602C13.3375 15.5343 13.3189 15.4599 13.3168 15.3842C13.3147 15.3085 13.3293 15.2332 13.3594 15.1637C13.3895 15.0942 13.4345 15.0322 13.4912 14.9819C13.5478 14.9316 13.6148 14.8944 13.6874 14.8728C13.76 14.8512 13.8365 14.8457 13.9114 14.8568C13.9863 14.8679 14.0579 14.8953 14.1212 14.9371C14.2229 15.0042 14.2978 15.1051 14.3326 15.222C14.3674 15.3389 14.3598 15.4643 14.3114 15.5762C14.2629 15.6881 14.1765 15.7794 14.0674 15.8339C13.9583 15.8885 13.8335 15.9029 13.7149 15.8746ZM13.4649 14.1871C13.4038 14.1743 13.3407 14.1736 13.2793 14.1852C13.2179 14.1969 13.1594 14.2205 13.1072 14.2547C13.0549 14.289 13.0099 14.3332 12.9748 14.3849C12.9397 14.4365 12.9151 14.4946 12.9024 14.5558L12.6462 15.7683C11.8078 16.1509 10.8962 16.3469 9.97466 16.3426C9.05308 16.3383 8.14344 16.1338 7.30866 15.7433L7.05241 14.5308C7.03976 14.4696 7.01516 14.4115 6.98003 14.3599C6.94489 14.3082 6.89991 14.264 6.84766 14.2297C6.79541 14.1955 6.73692 14.1719 6.67553 14.1602C6.61414 14.1486 6.55106 14.1493 6.48991 14.1621L5.41491 14.3933C5.21491 14.1871 5.02741 13.9683 4.85241 13.7433H10.0837C10.1462 13.7433 10.1837 13.7308 10.1837 13.6808V11.8246C10.1837 11.7746 10.1462 11.7621 10.0837 11.7621H8.56491V10.5871H10.2149C10.3649 10.5871 11.0274 10.6308 11.2337 11.4683C11.2962 11.7308 11.4399 12.5683 11.5462 12.8371C11.6399 13.1371 12.0399 13.7433 12.4649 13.7433H15.0712L15.1649 13.7308C14.9837 13.9808 14.7899 14.2058 14.5712 14.4246L13.4712 14.1871H13.4649ZM6.23991 15.8496C6.17342 15.8651 6.10452 15.8675 6.03713 15.8565C5.96975 15.8454 5.90519 15.8212 5.84715 15.7852C5.78912 15.7493 5.73874 15.7022 5.69889 15.6467C5.65904 15.5913 5.6305 15.5285 5.61491 15.4621C5.59931 15.3956 5.59696 15.3267 5.608 15.2593C5.61903 15.1919 5.64323 15.1273 5.67921 15.0693C5.7152 15.0113 5.76226 14.9609 5.81771 14.921C5.87317 14.8812 5.93593 14.8526 6.00241 14.8371C6.13667 14.8056 6.27795 14.8287 6.39516 14.9014C6.51237 14.974 6.59591 15.0903 6.62741 15.2246C6.6589 15.3588 6.63577 15.5001 6.5631 15.6173C6.49043 15.7345 6.37417 15.8181 6.23991 15.8496ZM4.25241 7.81205C4.31208 7.93637 4.31992 8.07931 4.27421 8.20941C4.2285 8.33951 4.13298 8.44613 4.00866 8.5058C3.88434 8.56548 3.7414 8.57332 3.6113 8.52761C3.4812 8.4819 3.37458 8.38637 3.31491 8.26205C3.25523 8.13773 3.24739 7.9948 3.2931 7.8647C3.33881 7.73459 3.43434 7.62798 3.55866 7.5683C3.68298 7.50863 3.82591 7.50079 3.95601 7.5465C4.08612 7.59221 4.19273 7.68773 4.25241 7.81205ZM3.64616 9.24955L4.76491 8.7558C4.87888 8.70396 4.96777 8.60921 5.01224 8.49217C5.05672 8.37512 5.05318 8.24525 5.00241 8.1308L4.77741 7.61205H5.68366V11.6933H3.85241C3.6285 10.9015 3.55848 10.074 3.64616 9.2558V9.24955ZM8.55866 8.8558V7.6558H10.7149C10.8274 7.6558 11.5024 7.7808 11.5024 8.28705C11.5024 8.7058 10.9837 8.8558 10.5587 8.8558H8.55866ZM16.4024 9.9433L16.3837 10.4183H15.7274C15.6649 10.4183 15.6337 10.4621 15.6337 10.5246V10.8246C15.6337 11.5371 15.2337 11.6871 14.8837 11.7308C14.5524 11.7683 14.1774 11.5871 14.1337 11.3871C13.9399 10.2746 13.6087 10.0371 13.0899 9.63705C13.7337 9.22455 14.4024 8.6183 14.4024 7.81205C14.4024 6.9433 13.8087 6.3933 13.4024 6.12455C12.9905 5.85852 12.5169 5.70351 12.0274 5.67455H5.23991C6.17725 4.62693 7.43372 3.91742 8.81491 3.6558L9.61491 4.4933C9.65824 4.53873 9.71015 4.57511 9.76763 4.60035C9.82512 4.62559 9.88703 4.63918 9.9498 4.64034C10.0126 4.64151 10.0749 4.63022 10.1333 4.60712C10.1917 4.58403 10.2449 4.54959 10.2899 4.5058L11.1837 3.64955C12.0959 3.82194 12.9597 4.19074 13.7152 4.73036C14.4707 5.26999 15.0997 5.96752 15.5587 6.77455L14.9462 8.1558C14.8958 8.27103 14.8931 8.40153 14.9388 8.51869C14.9845 8.63585 15.0748 8.73011 15.1899 8.7808L16.3649 9.3058C16.3899 9.5183 16.3962 9.72455 16.3962 9.9433H16.4024ZM9.62116 2.93705C9.66906 2.88404 9.7274 2.84149 9.79252 2.81207C9.85764 2.78266 9.92813 2.76701 9.99958 2.76612C10.071 2.76523 10.1419 2.7791 10.2077 2.80688C10.2736 2.83466 10.3329 2.87574 10.3822 2.92754C10.4314 2.97934 10.4694 3.04076 10.4937 3.10793C10.5181 3.1751 10.5283 3.24658 10.5238 3.31789C10.5192 3.3892 10.5 3.4588 10.4673 3.52232C10.4345 3.58585 10.3891 3.64193 10.3337 3.68705C10.2323 3.76962 10.1035 3.81086 9.97301 3.80252C9.84253 3.79419 9.72002 3.7369 9.62997 3.64212C9.53993 3.54733 9.48899 3.42204 9.48736 3.29131C9.48572 3.16059 9.53351 3.03406 9.62116 2.93705ZM15.6962 7.8308C15.7335 7.74333 15.7941 7.6678 15.8714 7.61245C15.9487 7.55711 16.0398 7.52408 16.1346 7.51699C16.2294 7.50989 16.3244 7.529 16.4091 7.57222C16.4938 7.61544 16.565 7.68111 16.6149 7.76205C16.6612 7.83816 16.6871 7.92491 16.6902 8.01394C16.6932 8.10297 16.6733 8.19129 16.6323 8.27039C16.5913 8.34949 16.5307 8.41669 16.4562 8.46554C16.3817 8.51438 16.2958 8.54322 16.207 8.54926C16.1181 8.55531 16.0291 8.53836 15.9487 8.50006C15.8683 8.46175 15.7991 8.40338 15.7477 8.33057C15.6964 8.25775 15.6647 8.17294 15.6557 8.08432C15.6466 7.99569 15.6606 7.90623 15.6962 7.82455V7.8308Z" fill="currentColor"/>
+</svg>
diff --git a/src/v1/assets/icons/terminal.svg b/src/v1/assets/icons/terminal.svg
new file mode 100644
index 00000000..4b6ebece
--- /dev/null
+++ b/src/v1/assets/icons/terminal.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.83333 9.16667L7.5 7.5L5.83333 5.83333M9.16667 10.8333H12.5M4.16667 2.5H15.8333C16.7538 2.5 17.5 3.24619 17.5 4.16667V15.8333C17.5 16.7538 16.7538 17.5 15.8333 17.5H4.16667C3.24619 17.5 2.5 16.7538 2.5 15.8333V4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/v1/assets/icons/ts.svg b/src/v1/assets/icons/ts.svg
new file mode 100644
index 00000000..72efddea
--- /dev/null
+++ b/src/v1/assets/icons/ts.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4375 2C17.3004 2 18 2.69956 18 3.5625V16.4375C18 17.3004 17.3004 18 16.4375 18H3.5625C2.69956 18 2 17.3004 2 16.4375V3.5625C2 2.69956 2.69956 2 3.5625 2H16.4375ZM14.6289 9.4375C14.2572 9.4375 13.9048 9.47779 13.5723 9.55762C13.2397 9.63746 12.9471 9.76217 12.6943 9.93164C12.4417 10.1011 12.2414 10.3168 12.0947 10.5791C11.9481 10.8414 11.875 11.1556 11.875 11.5205C11.8751 11.9863 12.0095 12.3838 12.2783 12.7129C12.5473 13.042 12.9561 13.3207 13.5039 13.5488C13.719 13.6368 13.9197 13.7229 14.1055 13.8076C14.2913 13.8924 14.4517 13.981 14.5869 14.0723C14.7221 14.1635 14.829 14.2626 14.9072 14.3701C14.9855 14.4776 15.0244 14.6004 15.0244 14.7373C15.0244 14.8381 14.9999 14.9314 14.9512 15.0176C14.9023 15.104 14.828 15.1796 14.7285 15.2432C14.6292 15.3066 14.5054 15.3558 14.3574 15.3916C14.209 15.4275 14.0348 15.4453 13.8359 15.4453C13.4971 15.4453 13.1615 15.3864 12.8291 15.2676C12.4966 15.1487 12.1879 14.9703 11.9043 14.7324V16.2969C12.1586 16.4272 12.4595 16.5247 12.8066 16.5898C13.1538 16.655 13.5197 16.6875 13.9043 16.6875C14.2793 16.6875 14.6362 16.6518 14.9736 16.5801C15.311 16.5084 15.6071 16.3901 15.8613 16.2256C16.1155 16.061 16.3165 15.8456 16.4648 15.5801C16.6132 15.3145 16.6875 14.9858 16.6875 14.5947C16.6875 14.3114 16.6453 14.063 16.5605 13.8496C16.4758 13.6362 16.3531 13.4465 16.1934 13.2803C16.0337 13.1141 15.8423 12.965 15.6191 12.833C15.3958 12.701 15.1436 12.5763 14.8633 12.459C14.6579 12.3742 14.4736 12.2918 14.3105 12.2119C14.1475 12.132 14.0087 12.0509 13.8945 11.9678C13.7804 11.8847 13.6928 11.796 13.6309 11.7031C13.569 11.6103 13.5381 11.505 13.5381 11.3877C13.5382 11.2804 13.5658 11.1839 13.6211 11.0977C13.6765 11.0114 13.7546 10.9369 13.8555 10.875C13.9566 10.8131 14.0808 10.7647 14.2275 10.7305C14.3743 10.6963 14.5375 10.6797 14.7168 10.6797C14.8471 10.6797 14.9849 10.6895 15.1299 10.709C15.2749 10.7285 15.4207 10.7581 15.5674 10.7988C15.714 10.8396 15.8566 10.8913 15.9951 10.9531C16.1335 11.015 16.2616 11.0866 16.3789 11.168V9.70605C16.1411 9.61494 15.8813 9.54788 15.5996 9.50391C15.3177 9.45992 14.9939 9.43752 14.6289 9.4375ZM5.6875 10.8779H7.68457V16.5938H9.27441V10.8779H11.2812V9.59375H5.6875V10.8779Z" fill="currentColor"/>
+</svg>
diff --git a/src/v1/assets/icons/windows.svg b/src/v1/assets/icons/windows.svg
new file mode 100644
index 00000000..41849755
--- /dev/null
+++ b/src/v1/assets/icons/windows.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 4.57578L8.625 3.73828L8.63125 9.65078L2.50625 9.68828L2.5 4.57578Z" fill="currentColor"/>
+<path d="M9.375 3.625L17.5 2.4375V9.575L9.375 9.6375V3.63125V3.625Z" fill="currentColor"/>
+<path d="M8.62656 10.3305L8.63281 16.2492L2.50781 15.4055V10.293L8.63281 10.3305H8.62656Z" fill="currentColor"/>
+<path d="M17.5031 10.3875V17.4875L9.37812 16.3437L9.35938 10.375L17.5031 10.3875Z" fill="currentColor"/>
+</svg>
diff --git a/src/v1/assets/icons/workflow.svg b/src/v1/assets/icons/workflow.svg
new file mode 100644
index 00000000..17752c69
--- /dev/null
+++ b/src/v1/assets/icons/workflow.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.83333 9.16667V12.5C5.83333 12.942 6.00893 13.366 6.32149 13.6785C6.63405 13.9911 7.05797 14.1667 7.5 14.1667H10.8333M4.16667 2.5H7.5C8.42047 2.5 9.16667 3.24619 9.16667 4.16667V7.5C9.16667 8.42047 8.42047 9.16667 7.5 9.16667H4.16667C3.24619 9.16667 2.5 8.42047 2.5 7.5V4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5ZM12.5 10.8333H15.8333C16.7538 10.8333 17.5 11.5795 17.5 12.5V15.8333C17.5 16.7538 16.7538 17.5 15.8333 17.5H12.5C11.5795 17.5 10.8333 16.7538 10.8333 15.8333V12.5C10.8333 11.5795 11.5795 10.8333 12.5 10.8333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/v1/styles/color-theme.css b/src/v1/styles/color-theme.css
index 10720ab5..9c77a342 100644
--- a/src/v1/styles/color-theme.css
+++ b/src/v1/styles/color-theme.css
@@ -2,7 +2,7 @@
   :root {
     --color-borderpanel: var(--color-glacier-mist-900);
 
-    --ec-code-background: var(--color-white);
+    --ec-code-background: var(--glacier-mist-700);
     --ec-code-header-background: color-mix(in srgb, var(--color-glacier-mist-800) 40%, transparent);
 
     --prose-bullets: var(--shark-gray);
@@ -12,7 +12,7 @@
   [data-theme='light'] {
     --color-borderpanel: var(--color-glacier-mist-900);
 
-    --ec-code-background: var(--color-white);
+    --ec-code-background: var(--glacier-mist-700);
     --ec-code-header-background: color-mix(in srgb, var(--color-glacier-mist-800) 40%, transparent);
 
     --prose-bullets: var(--shark-gray);
@@ -22,7 +22,7 @@
   [data-theme='dark'] {
     --color-borderpanel: color-mix(in srgb, var(--color-glacier-mist-900) 10%, transparent);
 
-    --ec-code-background: color-mix(in srgb, var(--color-glacier-mist-700) 7%, transparent);
+    --ec-code-background: var(--glacier-mist-700);
     --ec-code-header-background: color-mix(in srgb, var(--color-glacier-mist-800) 3%, transparent);
 
     --prose-bullets: var(--color-glacier-mist-700);
diff --git a/src/v1/styles/components-download.css b/src/v1/styles/components-download.css
new file mode 100644
index 00000000..c6c9a856
--- /dev/null
+++ b/src/v1/styles/components-download.css
@@ -0,0 +1,264 @@
+/* Download Components */
+@layer components {
+  /* Download Container - Two Column Layout */
+  .download-container {
+    @apply grid gap-0;
+    @apply border-midnight-fjord border;
+    @apply grid-cols-1 md:grid-cols-[256px_1fr];
+  }
+
+  /* Download Sidebar */
+  .download-sidebar {
+    @apply border-midnight-fjord;
+    @apply border-b md:border-r md:border-b-0;
+  }
+
+  /* Download Navigation */
+  .download-nav {
+    @apply hidden;
+    @apply md:flex md:h-full md:flex-col;
+  }
+
+  .download-nav-section {
+    @apply flex flex-col;
+    @apply py-4;
+  }
+
+  .download-nav-section-title {
+    @apply px-3 pt-1.75 pb-1.75;
+    @apply datum-docs-sidebar-headings;
+    @apply text-app---dark---utility-4;
+  }
+
+  .download-nav-list {
+    @apply flex flex-col;
+  }
+
+  .download-nav-item {
+    @apply border-0;
+  }
+
+  .download-nav-link {
+    @apply flex items-center gap-2;
+    @apply px-3 py-3.5;
+    @apply datum-text-base;
+    @apply text-midnight-fjord/80;
+    @apply transition-colors duration-200;
+    @apply hover:text-midnight-fjord;
+  }
+
+  .download-nav-link--active {
+    @apply bg-midnight-fjord text-white;
+    @apply hover:text-white;
+
+    .download-nav-icon {
+      @apply text-white;
+    }
+  }
+
+  .download-nav-icon {
+    @apply flex h-5 w-5 items-center justify-center;
+    @apply text-app---dark---utility-3 shrink-0;
+  }
+
+  .download-nav-label {
+    @apply flex-1;
+  }
+
+  .download-nav-badge {
+    @apply rounded-[3px];
+    @apply bg-glacier-mist-800;
+    @apply px-1.25 py-0.25;
+    @apply datum-docs-sidebar-headings text-[9px];
+    @apply text-canyon-clay---links;
+  }
+
+  .download-nav-divider {
+    @apply border-midnight-fjord mx-0 my-0 border-0 border-t;
+  }
+
+  .download-nav-divider:last-child {
+    @apply hidden;
+  }
+
+  /* Download Content Area */
+  .download-content {
+    @apply bg-white;
+    @apply overflow-y-auto;
+  }
+
+  /* Download Content Frame */
+  .download-content-frame {
+    @apply flex flex-col gap-4;
+    @apply bg-white;
+    @apply px-4 py-8 md:p-12 lg:p-16;
+  }
+
+  .download-content-header {
+    @apply flex flex-col justify-center gap-4;
+  }
+
+  .download-content-title {
+    @apply flex flex-col items-start gap-2.5;
+  }
+
+  .download-content-title-icon {
+    @apply h-10 w-10;
+  }
+
+  .download-content-title-text {
+    @apply font-alliance text-4xl leading-[1.22] font-semibold tracking-[-0.008em];
+    @apply text-midnight-fjord;
+  }
+
+  .download-content-info {
+    @apply flex items-center gap-3;
+    @apply border-pale-yellow rounded border-l-4;
+    @apply bg-pale-yellow/30;
+    @apply p-5;
+  }
+
+  .download-content-info-icon {
+    @apply h-5 w-5 flex-shrink-0;
+    @apply text-pine-forge;
+  }
+
+  .download-content-info-text {
+    @apply text-sm leading-6;
+    @apply text-pine-forge;
+  }
+
+  /* Download Section */
+  .download-section {
+    @apply flow-root;
+    @apply datum-prose-docs-article-alt;
+
+    /* Starlight aside variables (only defined in starlight.css otherwise) */
+    --color-tip: var(--glacier-mist-800);
+    --color-note: var(--aurora-moss);
+    --color-caution: #e2e9e3;
+
+    .starlight-aside--note {
+      --sl-color-asides-border: var(--aurora-moss);
+      @apply bg-(--color-note)/30;
+    }
+
+    .starlight-aside--caution {
+      --sl-color-asides-border: color-mix(in srgb, var(--color-midnight-fjord) 10%, transparent);
+      @apply bg-(--color-caution);
+    }
+
+    .starlight-aside--tip {
+      --sl-color-asides-border: color-mix(in srgb, var(--color-midnight-fjord) 10%, transparent);
+      @apply bg-(--color-tip);
+    }
+
+    .starlight-aside__title {
+      @apply text-midnight-fjord text-lg font-semibold;
+      @apply mt-0 mb-0 flex items-center gap-0;
+    }
+
+    .starlight-aside {
+      @apply inline-flex w-full items-center gap-3;
+      @apply mb-6 p-5;
+      @apply border-l-5 border-(--sl-color-asides-border);
+      @apply [&>p:last-child]:mb-0;
+
+      .starlight-aside__title {
+        @apply text-pine-forge overflow-hidden -indent-[1000px];
+        svg {
+          @apply h-5.5! w-5.5!;
+        }
+      }
+      .starlight-aside__content {
+        @apply [&>p:last-child]:mb-0;
+        @apply datum-text-sm text-pine-forge;
+      }
+      a {
+        @apply text-(--color-canyon-clay---links);
+        @apply hover:text-(--color-canyon-clay---links)/80;
+      }
+    }
+  }
+
+  /* Mobile Navigation Dropdown */
+  .download-nav-mobile {
+    @apply relative block md:hidden;
+  }
+
+  .download-nav-mobile-trigger {
+    @apply flex w-full items-center gap-3 p-4;
+    @apply bg-midnight-fjord;
+    @apply cursor-pointer text-left;
+  }
+
+  .download-nav-mobile-label {
+    @apply flex-1;
+    @apply datum-text-base;
+    @apply text-app---dark---utility-5;
+  }
+
+  .download-nav-mobile-selected {
+    @apply shrink-0;
+    @apply datum-text-base font-semibold;
+    @apply text-white;
+  }
+
+  .download-nav-mobile-chevron {
+    @apply flex h-2.5 w-2.5 shrink-0 items-center justify-center;
+    @apply text-white;
+    @apply transition-transform duration-200;
+
+    &--open {
+      @apply rotate-180;
+    }
+  }
+
+  .download-nav-mobile-dropdown {
+    @apply absolute top-full right-0 left-0 z-50;
+    @apply bg-white;
+    @apply border-midnight-fjord border border-t-0;
+    @apply pb-2 shadow-lg;
+  }
+
+  .download-nav-mobile-section-title {
+    @apply px-3 pt-4 pb-1;
+    @apply datum-docs-sidebar-headings;
+    @apply text-app---dark---utility-4;
+  }
+
+  .download-nav-mobile-list {
+    @apply flex flex-col;
+
+    .download-nav-mobile-link--active {
+      @apply bg-midnight-fjord text-white;
+      @apply hover:text-white;
+
+      .download-nav-mobile-icon {
+        @apply text-white;
+      }
+    }
+  }
+
+  .download-nav-mobile-link {
+    @apply flex items-center gap-2;
+    @apply px-3 py-3.5;
+    @apply datum-text-base;
+    @apply text-midnight-fjord/80;
+    @apply transition-colors duration-200;
+    @apply hover:text-midnight-fjord;
+
+    &--active {
+      @apply bg-midnight-fjord text-white;
+      @apply hover:text-white;
+
+      .download-nav-mobile-icon {
+        @apply text-white;
+      }
+    }
+  }
+
+  .download-nav-mobile-icon {
+    @apply text-app---dark---utility-3 h-4 w-4 shrink-0;
+  }
+}
diff --git a/src/v1/styles/components.css b/src/v1/styles/components.css
index 3258a615..d3fb961f 100644
--- a/src/v1/styles/components.css
+++ b/src/v1/styles/components.css
@@ -513,9 +513,11 @@
     .frame {
       @apply shadow-none!;
 
+      --code-background: var(--ec-code-background);
+
       pre {
-        @apply bg-(--ec-code-background);
-        @apply border-(--color-borderpanel);
+        @apply bg-(--ec-code-background)!;
+        @apply border-(--color-borderpanel)!;
       }
 
       .header {
@@ -524,3 +526,22 @@
     }
   }
 }
+
+@layer starlight.components {
+  starlight-tabs {
+    .tablist-wrapper {
+      ul.astro-esqgolmp {
+        @apply mt-4;
+        @apply relative;
+        @apply border-glacier-mist-900 border-b-2;
+
+        .tab {
+          @apply mr-6 mb-0 pl-0;
+          a {
+            @apply mb-0 px-0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/v1/styles/page-download.css b/src/v1/styles/page-download.css
new file mode 100644
index 00000000..3e772818
--- /dev/null
+++ b/src/v1/styles/page-download.css
@@ -0,0 +1,3 @@
+@import './base.css';
+
+@import './components-download.css';
diff --git a/src/v1/styles/utilities.css b/src/v1/styles/utilities.css
index e17acd9a..dc04d12d 100644
--- a/src/v1/styles/utilities.css
+++ b/src/v1/styles/utilities.css
@@ -308,6 +308,19 @@
   @apply **:text-inherit;
 }
 
+@utility datum-prose-docs-article-alt {
+  @apply prose max-w-none;
+  @apply datum-docs-article-body;
+
+  @apply prose-p:mt-0 prose-p:mb-(--docs-article-body-paragraph-spacing);
+  @apply prose-li:mt-0 prose-li:mb-(--docs-article-body-list-spacing);
+  @apply prose-a:text-canyon-clay---links/70 prose-a:font-normal prose-a:hover:no-underline prose-a:hover:text-canyon-clay---links;
+  @apply prose-h2:datum-text-2xl prose-h3:datum-text-xl prose-h4:datum-text-lg prose-h5:datum-text-base prose-h6:datum-text-base;
+  @apply prose-headings:my-4 prose-headings:font-bold;
+  @apply prose-headings:pt-px prose-headings:inline-block;
+  @apply **:text-inherit;
+}
+
 @utility datum-prose-longform {
   @apply prose max-w-none;
   @apply datum-text-longform-body;
@@ -317,7 +330,7 @@
   @apply prose-a:text-canyon-clay---links/70 prose-a:font-normal prose-a:hover:no-underline prose-a:hover:text-canyon-clay---links;
   @apply prose-h2:datum-text-3xl prose-h3:datum-text-xl prose-h4:datum-text-lg prose-h5:datum-text-base prose-h6:datum-text-base;
   @apply prose-headings:font-semibold;
-  @apply prose-headings:mb-(--text-longform-body-paragraph-spacing);
+  @apply prose-headings:my-(--text-longform-body-paragraph-spacing);
   @apply prose-headings:mt-[1.5em];
   @apply **:text-inherit;
 

From d8203ea8c503739e5cf0fc6efb861f19f8b58194 Mon Sep 17 00:00:00 2001
From: Ronggur Mangaraja Habibun <ronggur.mh@gmail.com>
Date: Wed, 4 Mar 2026 12:42:20 +0700
Subject: [PATCH 2/2] Change /download/ to /downloads/

---
 src/data/downloads.json                        | 8 ++++----
 src/pages/download/index.astro                 | 4 ----
 src/pages/{download => downloads}/[slug].astro | 0
 src/pages/downloads/index.astro                | 4 ++++
 4 files changed, 8 insertions(+), 8 deletions(-)
 delete mode 100644 src/pages/download/index.astro
 rename src/pages/{download => downloads}/[slug].astro (100%)
 create mode 100644 src/pages/downloads/index.astro

diff --git a/src/data/downloads.json b/src/data/downloads.json
index ae471b3d..e7606d06 100644
--- a/src/data/downloads.json
+++ b/src/data/downloads.json
@@ -6,13 +6,13 @@
         {
           "id": "mac-os",
           "label": "mac",
-          "href": "/download/mac-os/",
+          "href": "/downloads/mac-os/",
           "icon": "apple"
         },
         {
           "id": "windows",
           "label": "Windows",
-          "href": "/download/windows/",
+          "href": "/downloads/windows/",
           "icon": "windows"
         },
         {
@@ -29,13 +29,13 @@
         {
           "id": "datumctl",
           "label": "datumctl",
-          "href": "/download/datumctl/",
+          "href": "/downloads/datumctl/",
           "icon": "terminal"
         },
         {
           "id": "datum-mcp",
           "label": "Datum MCP",
-          "href": "/download/datum-mcp/",
+          "href": "/downloads/datum-mcp/",
           "icon": "workflow"
         }
       ]
diff --git a/src/pages/download/index.astro b/src/pages/download/index.astro
deleted file mode 100644
index 4fc32320..00000000
--- a/src/pages/download/index.astro
+++ /dev/null
@@ -1,4 +0,0 @@
----
-// src/pages/download.astro
-return Astro.redirect('/download/mac-os/', 302);
----
diff --git a/src/pages/download/[slug].astro b/src/pages/downloads/[slug].astro
similarity index 100%
rename from src/pages/download/[slug].astro
rename to src/pages/downloads/[slug].astro
diff --git a/src/pages/downloads/index.astro b/src/pages/downloads/index.astro
new file mode 100644
index 00000000..ddc055e4
--- /dev/null
+++ b/src/pages/downloads/index.astro
@@ -0,0 +1,4 @@
+---
+// src/pages/download.astro
+return Astro.redirect('/downloads/mac-os/', 302);
+---