From 63c342dad300536990a7cbd607655b2f5652752d Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 07:23:10 +0700
Subject: [PATCH 01/23] feat(dakota): move Dakota ver fetch to composables

Hoist fetch promise from dakota-versions.json into composables.
Beneficial since I split the version labelling within the existing
version badges and DakotaVersionCard component (styled like the variant
card in homepage). With module-scope fetch, network request can be done
effectively

Assisted-by: MiMo V2.5 & Deepseek V4 Flash in OpenCode
https://opncd.ai/share/AOUIIElO
---
 src/components/dakota/DakotaVersionChips.vue | 12 +++++----
 src/composables.ts                           | 27 ++++++++++++++++++++
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/dakota/DakotaVersionChips.vue b/src/components/dakota/DakotaVersionChips.vue
index 8b9ad6f4..0e5a6dfb 100644
--- a/src/components/dakota/DakotaVersionChips.vue
+++ b/src/components/dakota/DakotaVersionChips.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { getDakotaVersions } from '../../composables'
+
+const props = defineProps<{
+  keys?: string[]
+}>()
 
 interface DakotaVersions {
   generatedAt: string
@@ -26,11 +31,7 @@ const versions = ref<DakotaVersions | null>(null)
 
 onMounted(async () => {
   try {
-    const res = await fetch('/dakota-versions.json')
-    if (!res.ok) {
-      throw new Error(`HTTP ${res.status}`)
-    }
-    versions.value = await res.json()
+    versions.value = await getDakotaVersions()
   }
   catch (e) {
     if (import.meta.env.DEV) {
@@ -44,6 +45,7 @@ const chips = computed(() => {
     return []
   }
   return Object.entries(versions.value.packages)
+    .filter(([key]) => !props.keys || props.keys.includes(key))
     .filter(([, v]) => v)
     .map(([key, value]) => ({ label: LABELS[key] ?? key, value, isFeature: FEATURE_KEYS.has(key) }))
 })
diff --git a/src/composables.ts b/src/composables.ts
index e707c220..3cc312d3 100644
--- a/src/composables.ts
+++ b/src/composables.ts
@@ -10,6 +10,33 @@ export const IS_TABLET = computed(() => {
   return width.value <= 956
 })
 
+interface DakotaVersions {
+  generatedAt: string
+  packages: Record<string, string>
+}
+
+let versionsPromise: Promise<DakotaVersions> | null = null
+
+function fetchVersionsOnce(): Promise<DakotaVersions> {
+  if (!versionsPromise) {
+    versionsPromise = (async () => {
+      const res = await fetch(`${import.meta.env.BASE_URL}dakota-versions.json`)
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`)
+      }
+      return res.json()
+    })()
+  }
+  return versionsPromise
+}
+
+/**
+ * Fetches dakota-versions.json once and caches the result.
+ */
+export async function getDakotaVersions(): Promise<DakotaVersions> {
+  return fetchVersionsOnce()
+}
+
 /**
  * Fades in + slides up 150ms after mount. Used by KnuckleTitle and KnuckleDesc.
  */

From 0fc2bc059f313bc8bc9665e6d63f00504a2acdb8 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 07:23:47 +0700
Subject: [PATCH 02/23] fix(dakota): add blur backdrop to version badges

since I moved it outside the cards
---
 src/components/dakota/DakotaVersionChips.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/dakota/DakotaVersionChips.vue b/src/components/dakota/DakotaVersionChips.vue
index 0e5a6dfb..2e9fafeb 100644
--- a/src/components/dakota/DakotaVersionChips.vue
+++ b/src/components/dakota/DakotaVersionChips.vue
@@ -82,6 +82,8 @@ const chips = computed(() => {
   overflow: hidden;
   font-size: 1.2rem;
   line-height: 1;
+  background: rgba(var(--color-bg-rgb), 0.45);
+  backdrop-filter: blur(8px);
 
   &.chip-feature {
     border-color: rgba(var(--color-green-rgb, 80, 200, 120), 0.5);

From 59a5cdf7dace8c9a312299b6efa711862f2f2c90 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 07:25:20 +0700
Subject: [PATCH 03/23] fix(dakota): remove hero tagline from DakotaScene

imo it'd fit into DakotaVersionCard better
---
 src/components/dakota/DakotaScene.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/components/dakota/DakotaScene.vue b/src/components/dakota/DakotaScene.vue
index f60c0cd2..fb763762 100644
--- a/src/components/dakota/DakotaScene.vue
+++ b/src/components/dakota/DakotaScene.vue
@@ -19,10 +19,6 @@ onMounted(() => {
       Dakota
     </h1>
 
-    <p class="hero-tagline">
-      The Final Form. Bluefin Perfected.
-    </p>
-
     <p class="hero-desc">
       Dakota is a <a href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop.org</a> and <a href="https://os.gnome.org" target="_blank" rel="noopener noreferrer">GNOME OS</a> image designed from the ground up to be the most modern raptor in the pack. The familiar Bluefin desktop and developer experience, in a whole new streamlined package. Built from the best OS tech from the <a href="https://cncf.io" target="_blank" rel="noopener noreferrer">CNCF</a>, <a href="https://www.apache.org" target="_blank" rel="noopener noreferrer">Apache Foundation</a>, and the <a href="https://uapi-group.org" target="_blank" rel="noopener noreferrer">UAPI Group</a>. Do not run, you'll only die tired.
     </p>
@@ -93,14 +89,6 @@ onMounted(() => {
   padding-left: 0;
 }
 
-.hero-tagline {
-  font-size: 1.6rem;
-  font-weight: 400;
-  color: var(--color-text-light);
-  margin: 0 0 12px 0;
-  line-height: 1.6;
-}
-
 .hero-desc {
   font-size: 1.6rem;
   line-height: 1.6;

From 9cad54e587eb4f13ee224d717472d392026ba242 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 08:20:26 +0700
Subject: [PATCH 04/23] feat(dakota): add DakotaVersionCard, edit columns

- Bring the version + download card from homepage with Dakotaraptor as
the character image
- Move version badges & Alpha badge out of DakotaScene
- Refactor column system: Put DakotaScene & DakotaHighlight on left,
alpha badge + DakotaVersionCard + View on GitHub btn in right
- Set mobile breakpoint to 840px
- Capitalize NVIDIA

Assisted-by: Deepseek V4 Flash & MiMo V2.5 in OpenCode
https://opncd.ai/share/AOUIIElO
---
 src/DakotaApp.vue                            | 177 +++----
 src/components/dakota/DakotaScene.vue        |   4 -
 src/components/dakota/DakotaVersionCard.vue  | 457 +++++++++++++++++++
 src/components/dakota/DakotaVersionChips.vue |   2 +-
 4 files changed, 552 insertions(+), 88 deletions(-)
 create mode 100644 src/components/dakota/DakotaVersionCard.vue

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index 2fc83177..de94625f 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { onBeforeMount, provide, ref } from 'vue'
-import DakotaDownloadCard from './components/dakota/DakotaDownloadCard.vue'
 import DakotaHighlights from './components/dakota/DakotaHighlights.vue'
 import DakotaScene from './components/dakota/DakotaScene.vue'
-import DakotaVersionChips from './components/dakota/DakotaVersionChips.vue'
+import DakotaVersionCard from './components/dakota/DakotaVersionCard.vue'
 import PageLoading from './components/PageLoading.vue'
 import TopNavbar from './components/TopNavbar.vue'
 import { setLocale } from './composables/useLocale'
@@ -37,23 +36,31 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
     <TopNavbar v-show="!isLoading" />
 
     <div v-show="!isLoading" class="dakota-layout">
-      <!-- Left: text on top, raptor below -->
+      <!-- Left: text, highlights -->
       <div class="col-left">
-        <DakotaScene>
-          <DakotaVersionChips />
-        </DakotaScene>
-        <img
-          class="raptor"
-          src="/characters/dakota.webp"
-          alt="Dakotaraptor"
-          fetchpriority="high"
-        >
+        <DakotaScene />
+        <DakotaHighlights />
       </div>
 
-      <!-- Right: features + download -->
-      <div class="col-features">
-        <DakotaHighlights />
-        <DakotaDownloadCard />
+      <!-- Right: version card + secondary chips -->
+      <div class="col-right">
+        <div class="col-right-sticky">
+          <div class="alpha-badge-row">
+            <div class="alpha-badge">
+              ⚠️ <strong>Alpha software.</strong> Take appropriate precautions.
+            </div>
+          </div>
+          <DakotaVersionCard />
+          <a
+            class="github-btn"
+            href="https://github.com/projectbluefin/dakota"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.167 6.839 9.49.5.09.682-.217.682-.482 0-.237-.009-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.577.688.48C19.138 20.161 22 16.418 22 12c0-5.523-4.477-10-10-10z" /></svg>
+            View on GitHub
+          </a>
+        </div>
       </div>
     </div>
   </main>
@@ -61,8 +68,6 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
 
 <style scoped lang="scss">
 .dakota-page {
-  min-height: 100vh;
-  overflow-y: auto;
   background-image: url('/evening/night-sky.webp');
   background-size: cover;
   background-position: center top;
@@ -71,93 +76,99 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
 
 .dakota-layout {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: stretch;
   box-sizing: border-box;
-  padding: 48px 60px 40px;
-  gap: 40px;
+  padding: 32px 32px 48px;
+  gap: 32px;
 
-  // Keep the fullscreen feel on wide landscape without clipping tall content
-  @media (min-aspect-ratio: 16/10) and (min-width: 1024px) {
-    min-height: calc(100vh - 60px);
-  }
-
-  // Tablet portrait / narrow desktop: stack columns
-  @media (max-aspect-ratio: 16/10), (max-width: 1023px) {
-    flex-direction: column;
-    padding: 32px 32px 48px;
-    gap: 32px;
+  @media (min-width: 840px) {
+    flex-direction: row;
+    padding: 60px 60px 40px;
+    gap: 40px;
   }
 
-  // Phone
   @media (max-width: 600px) {
     padding: 24px 16px 48px;
     gap: 24px;
   }
 }
 
-.col-left {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1;
+.col-right {
   min-width: 0;
 
-  // Medium: text box and raptor side by side
-  @media (min-width: 640px) and ((max-aspect-ratio: 16/10) or (max-width: 1023px)) {
-    flex-direction: row;
-    align-items: flex-end;
-    gap: 32px;
+  @media (min-width: 840px) {
+    width: 38%;
+    flex: none;
   }
+}
 
-  .raptor {
-    height: 30vh;
-    width: auto;
-    transform: scaleX(-1);
-    filter: drop-shadow(0 20px 60px rgba(var(--color-blue-rgb), 0.2));
-    margin-top: 24px;
-
-    // Medium: no top margin, sits beside text
-    @media (min-width: 640px) and ((max-aspect-ratio: 16/10) or (max-width: 1023px)) {
-      margin-top: 0;
-      flex-shrink: 0;
-    }
-
-    @media (max-aspect-ratio: 16/10), (max-width: 1023px) {
-      height: 20vh;
-      align-self: center;
-    }
-
-    @media (max-width: 600px) {
-      height: 15vh;
-    }
+.col-right-sticky {
+  @media (min-width: 840px) {
+    position: sticky;
+    top: calc(50vh - 250px);
   }
 }
 
-.col-features {
+.alpha-badge-row {
   display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  overflow: visible;
-  background: rgba(var(--color-bg-rgb), 0.55);
-  backdrop-filter: blur(8px);
-  border-radius: 12px;
-  padding: 28px 32px;
-
-  @media (max-aspect-ratio: 16/10), (max-width: 1023px) {
-    width: 100%;
-    box-sizing: border-box;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.alpha-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 1.2rem;
+  color: var(--color-text-light);
+  background: rgba(var(--color-bg-rgb), 0.5);
+  border: 1px solid var(--color-border-light);
+  border-radius: 6px;
+  padding: 7px 10px;
+
+  strong {
+    font-weight: 600;
   }
+}
 
-  @media (max-width: 600px) {
-    padding: 20px 20px;
+.github-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 20px;
+  margin: 16px 64px 0;
+  border-radius: 18px;
+  font-size: 1.4rem;
+  font-weight: 700;
+  background: var(--color-bg);
+  color: var(--color-text-light);
+  border: 2px solid var(--color-bg);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
   }
 
-  @media (max-width: 500px) {
-    padding: 20px 16px;
+  &:hover {
+    background: var(--color-blue);
+    border-color: var(--color-blue);
   }
 }
+
+.col-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  min-width: 0;
+}
 </style>
diff --git a/src/components/dakota/DakotaScene.vue b/src/components/dakota/DakotaScene.vue
index fb763762..e3abe984 100644
--- a/src/components/dakota/DakotaScene.vue
+++ b/src/components/dakota/DakotaScene.vue
@@ -23,10 +23,6 @@ onMounted(() => {
       Dakota is a <a href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop.org</a> and <a href="https://os.gnome.org" target="_blank" rel="noopener noreferrer">GNOME OS</a> image designed from the ground up to be the most modern raptor in the pack. The familiar Bluefin desktop and developer experience, in a whole new streamlined package. Built from the best OS tech from the <a href="https://cncf.io" target="_blank" rel="noopener noreferrer">CNCF</a>, <a href="https://www.apache.org" target="_blank" rel="noopener noreferrer">Apache Foundation</a>, and the <a href="https://uapi-group.org" target="_blank" rel="noopener noreferrer">UAPI Group</a>. Do not run, you'll only die tired.
     </p>
 
-    <div class="alpha-badge">
-      ⚠️ Alpha software — take appropriate precautions
-    </div>
-
     <div class="release-links">
       <a
         href="https://docs.projectbluefin.io/blog/making-our-own-fate/"
diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
new file mode 100644
index 00000000..694ba3e3
--- /dev/null
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -0,0 +1,457 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import {
+  IconCheckCircleOutline,
+  IconDownload,
+  IconGithubCircle,
+} from '@iconify-prerendered/vue-mdi'
+import { getDakotaVersions } from '../../composables'
+import DakotaVersionChips from './DakotaVersionChips.vue'
+
+interface DakotaVersions {
+  generatedAt: string
+  packages: Record<string, string>
+}
+
+interface DownloadEntry {
+  label: string
+  isoUrl: string
+  isoFilename: string
+  checksumUrl: string
+}
+
+const BASE = 'https://projectbluefin.dev'
+
+const versions = ref<DakotaVersions | null>(null)
+const showDownloads = ref(false)
+
+const cardImageStyle = computed(() => ({
+  backgroundImage: `url(${import.meta.env.BASE_URL}characters/dakota.webp)`,
+}))
+
+const entries: DownloadEntry[] = [
+  {
+    label: 'AMD / Intel',
+    isoUrl: `${BASE}/dakota-live-alpha2.iso`,
+    isoFilename: 'dakota-live-alpha2.iso',
+    checksumUrl: `${BASE}/dakota-live-alpha2.iso-CHECKSUM`,
+  },
+  {
+    label: 'NVIDIA',
+    isoUrl: `${BASE}/dakota-nvidia-live-alpha2.iso`,
+    isoFilename: 'dakota-nvidia-live-alpha2.iso',
+    checksumUrl: `${BASE}/dakota-nvidia-live-alpha2.iso-CHECKSUM`,
+  },
+]
+
+const VERSION_LABELS: Record<string, string> = {
+  'kernel': 'Kernel',
+  'gnome': 'GNOME',
+  'mesa': 'Mesa',
+  'nvidia': 'NVIDIA',
+  'freedesktop-sdk': 'Freedesktop SDK',
+  'bootc': 'bootc',
+}
+
+const versionRows = computed(() => {
+  if (!versions.value) {
+    return []
+  }
+  return Object.entries(versions.value.packages)
+    .filter(([key]) => key in VERSION_LABELS)
+    .map(([key, value]) => ({
+      label: VERSION_LABELS[key],
+      value,
+    }))
+})
+
+onMounted(async () => {
+  try {
+    versions.value = await getDakotaVersions()
+  }
+  catch (e) {
+    if (import.meta.env.DEV) {
+      console.warn('[DakotaVersionCard] failed to load versions', e)
+    }
+  }
+})
+
+function openDownloads() {
+  showDownloads.value = true
+}
+
+function backToCard() {
+  showDownloads.value = false
+}
+</script>
+
+<template>
+  <div class="dakota-version-card">
+    <!-- Card view (character art + version info) -->
+    <div
+      v-if="!showDownloads"
+      class="card-box"
+      @click="openDownloads"
+    >
+      <div
+        class="card-image"
+        :style="cardImageStyle"
+      >
+        <div class="card-overlay">
+          <div class="card-header">
+            <h3 class="card-title">Dakota</h3>
+            <span class="card-subtitle">For the brave soul</span>
+          </div>
+
+          <p class="card-description">
+            The Final Form. Bluefin Perfected.
+          </p>
+
+          <!-- Version Information -->
+          <div v-if="versionRows.length" class="version-info">
+            <div
+              v-for="row in versionRows"
+              :key="row.label"
+              class="version-row"
+            >
+              <span class="version-label">{{ row.label }}</span>
+              <span class="version-value">{{ row.value }}</span>
+            </div>
+          </div>
+
+          <div class="click-hint">
+            Click to download ↓
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Download view -->
+    <div v-else class="download-view">
+      <div class="entries-wrapper">
+        <DakotaVersionChips
+          class="secondary-chips"
+          :keys="['systemd', 'podman', 'pipewire', 'flatpak', 'baseline']"
+        />
+        <div class="download-entries">
+          <div
+            v-for="entry in entries"
+            :key="entry.label"
+            class="download-entry"
+          >
+            <div class="entry-header">
+              <span class="entry-label">{{ entry.label }}</span>
+              <span class="entry-filename">{{ entry.isoFilename }}</span>
+            </div>
+            <div class="entry-buttons">
+              <a
+                class="btn filled entry-dl"
+                :href="entry.isoUrl"
+                :download="entry.isoFilename"
+              >
+                <IconDownload />
+                Download ISO
+              </a>
+              <a
+                class="btn entry-checksum"
+                :href="entry.checksumUrl"
+                title="Verify checksum"
+              >
+                <IconCheckCircleOutline />
+                Verify
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button class="back-button" @click="backToCard">
+        ← Back
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.dakota-version-card {
+  width: 100%;
+}
+
+/* ── Card View ── */
+
+.card-box {
+  position: relative;
+  height: 400px;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  border: 2px solid rgba(79, 156, 249, 0.25);
+  background: #1f2937;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    border-color: rgba(79, 156, 249, 0.5);
+  }
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.card-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.15) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 0.92) 100%
+  );
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1.5rem;
+  color: white;
+  border-radius: 12px;
+}
+
+.card-header {
+  margin-bottom: 0.5rem;
+}
+
+.card-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem 0;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.card-subtitle {
+  font-size: 1.5rem;
+  opacity: 0.9;
+  display: block;
+  margin-bottom: 0.5rem;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.card-description {
+  font-size: 1.5rem;
+  line-height: 1.4;
+  opacity: 0.85;
+  margin: 0 0 0.75rem 0;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+  text-align: center;
+}
+
+/* Version rows */
+.version-info {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.version-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.4rem;
+  font-size: 1.55rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.version-label {
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.8);
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.version-value {
+  font-family: 'Courier New', monospace;
+  color: #93c5fd;
+  font-weight: 500;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  font-size: 1.55rem;
+}
+
+.click-hint {
+  margin-top: 0.75rem;
+  font-size: 1.3rem;
+  font-weight: 600;
+  text-align: center;
+  color: rgba(147, 197, 253, 0.8);
+  animation: pulse-hint 2s ease-in-out infinite;
+}
+
+@keyframes pulse-hint {
+  0%, 100% { opacity: 0.7; }
+  50% { opacity: 1; }
+}
+
+/* ── Download View ── */
+
+.download-view {
+  height: 400px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: rgba(31, 41, 55, 0.6);
+  backdrop-filter: blur(8px);
+  border: 2px solid rgba(79, 156, 249, 0.25);
+  border-radius: 12px;
+  padding: 1.5rem;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.entries-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.secondary-chips {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.download-entries {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  padding: 0 16px;
+}
+
+.download-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 0;
+}
+
+.download-entry + .download-entry {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 16px;
+}
+
+.entry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.entry-label {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--color-text-light);
+}
+
+.entry-filename {
+  font-size: 1.1rem;
+  font-family: 'Courier New', monospace;
+  color: var(--color-text);
+}
+
+.entry-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  width: 100%;
+}
+
+.entry-dl {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 1.3rem;
+  flex: 1;
+}
+
+.entry-checksum {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 1.3rem;
+}
+
+.back-button {
+  display: block;
+  margin-top: auto;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: rgba(147, 197, 253, 0.8);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: rgba(147, 197, 253, 1);
+  }
+}
+
+/* ── Responsive ── */
+
+@media (max-width: 700px) {
+  .card-box {
+    height: 350px;
+  }
+}
+
+@media (max-width: 500px) {
+  .card-box {
+    height: 300px;
+  }
+
+  .card-title {
+    font-size: 1.7rem;
+  }
+
+  .card-subtitle {
+    font-size: 1.3rem;
+  }
+
+  .card-description {
+    font-size: 1.3rem;
+  }
+
+  .version-row {
+    font-size: 1.35rem;
+  }
+
+  .version-value {
+    font-size: 1.35rem;
+  }
+
+  .download-view {
+    padding: 1rem;
+  }
+}
+</style>
diff --git a/src/components/dakota/DakotaVersionChips.vue b/src/components/dakota/DakotaVersionChips.vue
index 2e9fafeb..8478de6d 100644
--- a/src/components/dakota/DakotaVersionChips.vue
+++ b/src/components/dakota/DakotaVersionChips.vue
@@ -17,7 +17,7 @@ const LABELS: Record<string, string> = {
   'freedesktop-sdk': 'Freedesktop SDK',
   'mesa': 'Mesa',
   'bootc': 'bootc',
-  'nvidia': 'Nvidia',
+  'nvidia': 'NVIDIA',
   'systemd': 'systemd',
   'podman': 'Podman',
   'pipewire': 'PipeWire',

From 2dc1643b294021d56a17ec92d990f0654bdc81cc Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 08:33:40 +0700
Subject: [PATCH 05/23] fix(dakota): adjust DakotaHighlights styling

Add back blur backdrop bg, remove excess border, adjust gap between
components + inner padding

Assisted-by: Deepseek V4 Flash in OpenCode
https://opncd.ai/share/AOUIIElO
---
 src/DakotaApp.vue                          |  3 ++-
 src/components/dakota/DakotaHighlights.vue | 17 +++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index de94625f..89fc6e22 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -47,7 +47,7 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
         <div class="col-right-sticky">
           <div class="alpha-badge-row">
             <div class="alpha-badge">
-              ⚠️ <strong>Alpha software.</strong> Take appropriate precautions.
+              ⚠️ <strong>Alpha.</strong>Take appropriate precautions.
             </div>
           </div>
           <DakotaVersionCard />
@@ -168,6 +168,7 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  gap: 24px;
   flex: 1;
   min-width: 0;
 }
diff --git a/src/components/dakota/DakotaHighlights.vue b/src/components/dakota/DakotaHighlights.vue
index d7d4a935..08c27b9e 100644
--- a/src/components/dakota/DakotaHighlights.vue
+++ b/src/components/dakota/DakotaHighlights.vue
@@ -84,7 +84,14 @@ import {
 <style scoped lang="scss">
 .dakota-highlights {
   min-height: auto;
-  padding: 0;
+  padding: 24px;
+  background: rgba(var(--color-bg-rgb), 0.55);
+  backdrop-filter: blur(8px);
+  border-radius: 12px;
+
+  :deep(.container) {
+    padding: 0;
+  }
 
   .icon-wrap {
     svg {
@@ -97,6 +104,11 @@ import {
 
   :deep(.brand-item) {
     padding: 14px 20px;
+    border-right: none;
+
+    &:nth-child(odd) {
+      border-right: none;
+    }
   }
 
   :deep(.brand-gnome) {
@@ -163,9 +175,6 @@ import {
     :deep(.brand-grid) {
       grid-template-columns: 1fr !important;
     }
-    :deep(.brand-item:nth-child(odd)) {
-      border-right: none !important;
-    }
   }
 }
 </style>

From f82d09976dca4ec1dd61f6caee91dbbc7f20b644 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 09:01:48 +0700
Subject: [PATCH 06/23] feat(dakota): embed "Bluefin Perfected." yt video

Assisted-by: Deepseek V4 Flash in OpenCode
https://opncd.ai/share/AOUIIElO
---
 src/DakotaApp.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index 89fc6e22..f365474d 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -36,9 +36,31 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
     <TopNavbar v-show="!isLoading" />
 
     <div v-show="!isLoading" class="dakota-layout">
-      <!-- Left: text, highlights -->
+      <!-- Left: text, video, highlights -->
       <div class="col-left">
         <DakotaScene />
+        <div class="video-wrap">
+          <iframe
+            src="https://www.youtube.com/embed/v18c8ipK02A"
+            title="Dakota"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          />
+        </div>
+        <div class="release-links">
+          <span>Read the announcements:</span>
+          <a
+            href="https://docs.projectbluefin.io/blog/making-our-own-fate/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >Alpha 2 Release →</a>
+          <a
+            href="https://docs.projectbluefin.io/blog/dakota-alpha-1/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >Alpha 1 Release →</a>
+        </div>
         <DakotaHighlights />
       </div>
 

From 87d6f33bde220a704822edbbbb126bee1094a2fc Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 09:02:17 +0700
Subject: [PATCH 07/23] fix(dakota): adjusted right column styling

---
 src/DakotaApp.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index f365474d..1742c450 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -120,7 +120,7 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
   min-width: 0;
 
   @media (min-width: 840px) {
-    width: 38%;
+    width: 35%;
     flex: none;
   }
 }
@@ -128,7 +128,7 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
 .col-right-sticky {
   @media (min-width: 840px) {
     position: sticky;
-    top: calc(50vh - 250px);
+    top: calc(18vh);
   }
 }
 

From 8462bdf072016145826179ea2e6e3e8639735461 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 09:02:53 +0700
Subject: [PATCH 08/23] fix(dakota): add styling for video-wrap

---
 src/DakotaApp.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index 1742c450..1c82337b 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -194,4 +194,16 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
   flex: 1;
   min-width: 0;
 }
+
+.video-wrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 12px;
+  overflow: hidden;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

From 2e734b0f6edfe1ae9fa53a537dcc259300e3ddae Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 09:07:13 +0700
Subject: [PATCH 09/23] feat(dakota): move announcement posts below video

move .release-links CSS to DakotaApp and remove excess stylings in
DakotaScene
---
 src/DakotaApp.vue                     | 31 ++++++++++++++
 src/components/dakota/DakotaScene.vue | 61 ---------------------------
 2 files changed, 31 insertions(+), 61 deletions(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index 1c82337b..93f194c3 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -132,6 +132,37 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
   }
 }
 
+.release-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 12px 20px;
+  font-size: 1.3rem;
+
+  span {
+    color: var(--color-text-light);
+  }
+
+  a {
+    font-weight: 600;
+    text-decoration: none;
+    background: var(--color-blue-light);
+    color: var(--color-text-light);
+    height: 36px;
+    line-height: 36px;
+    padding: 0 20px 0 20px;
+    border-radius: 18px;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+      text-decoration: underline;
+    }
+  }
+}
+
 .alpha-badge-row {
   display: flex;
   justify-content: center;
diff --git a/src/components/dakota/DakotaScene.vue b/src/components/dakota/DakotaScene.vue
index e3abe984..25e1fcf7 100644
--- a/src/components/dakota/DakotaScene.vue
+++ b/src/components/dakota/DakotaScene.vue
@@ -22,21 +22,6 @@ onMounted(() => {
     <p class="hero-desc">
       Dakota is a <a href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop.org</a> and <a href="https://os.gnome.org" target="_blank" rel="noopener noreferrer">GNOME OS</a> image designed from the ground up to be the most modern raptor in the pack. The familiar Bluefin desktop and developer experience, in a whole new streamlined package. Built from the best OS tech from the <a href="https://cncf.io" target="_blank" rel="noopener noreferrer">CNCF</a>, <a href="https://www.apache.org" target="_blank" rel="noopener noreferrer">Apache Foundation</a>, and the <a href="https://uapi-group.org" target="_blank" rel="noopener noreferrer">UAPI Group</a>. Do not run, you'll only die tired.
     </p>
-
-    <div class="release-links">
-      <a
-        href="https://docs.projectbluefin.io/blog/making-our-own-fate/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >Alpha 2 Announcement →</a>
-      <a
-        href="https://docs.projectbluefin.io/blog/dakota-alpha-1/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >Alpha 1 Announcement →</a>
-    </div>
-
-    <slot />
   </div>
 </template>
 
@@ -101,50 +86,4 @@ onMounted(() => {
     }
   }
 }
-
-.alpha-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 1.3rem;
-  font-weight: 600;
-  color: var(--color-text-light);
-  background: rgba(var(--color-bg-rgb), 0.5);
-  border: 1px solid var(--color-border-light);
-  border-radius: 6px;
-  padding: 8px 16px;
-  margin-bottom: 0;
-}
-
-.release-links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px 20px;
-  margin-top: 10px;
-
-  a {
-    color: var(--color-blue-light);
-    font-size: 1.3rem;
-    font-weight: 600;
-    text-decoration: none;
-    opacity: 0.85;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 1;
-      text-decoration: underline;
-    }
-  }
-}
-
-@media (max-width: 500px) {
-  .alpha-badge {
-    font-size: 1.1rem;
-    padding: 6px 12px;
-  }
-
-  .hero-title {
-    font-size: 4.5rem;
-  }
-}
 </style>

From 4dafea1ccd78ecb3480e408a2a7ca582400d0fbe Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 09:40:34 +0700
Subject: [PATCH 10/23] fix(dakota): nest links into .release-link-item

to make both links wraps gracefully into a new line in mobile view
(instead of only getting individual links wrap)
---
 src/DakotaApp.vue | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index 93f194c3..ec6eaef4 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -50,16 +50,18 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
         </div>
         <div class="release-links">
           <span>Read the announcements:</span>
-          <a
-            href="https://docs.projectbluefin.io/blog/making-our-own-fate/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Alpha 2 Release →</a>
-          <a
-            href="https://docs.projectbluefin.io/blog/dakota-alpha-1/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Alpha 1 Release →</a>
+          <div class="release-link-item">
+	        <a
+	          href="https://docs.projectbluefin.io/blog/making-our-own-fate/"
+	          target="_blank"
+	          rel="noopener noreferrer"
+	        >Alpha 2 Release →</a>
+	        <a
+	          href="https://docs.projectbluefin.io/blog/dakota-alpha-1/"
+	          target="_blank"
+	          rel="noopener noreferrer"
+	        >Alpha 1 Release →</a>
+	      </div>
         </div>
         <DakotaHighlights />
       </div>
@@ -145,21 +147,22 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
     color: var(--color-text-light);
   }
 
+.release-link-item {
   a {
     font-weight: 600;
     text-decoration: none;
-    background: var(--color-blue-light);
+    background: rgb(var(--color-bg-rgb), 0.5);
     color: var(--color-text-light);
     height: 36px;
     line-height: 36px;
-    padding: 0 20px 0 20px;
+    padding: 8px 18px;
     border-radius: 18px;
-    transition: opacity 0.2s;
+    margin: 0 4px 0 4px;
+    transition: background 0.2s;
 
-    &:hover {
-      opacity: 1;
-      text-decoration: underline;
-    }
+	&:hover {
+	  background: var(--color-blue);
+	}
   }
 }
 

From 60037ad6620a32963b891b17bd80330e72b13f87 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 09:41:23 +0700
Subject: [PATCH 11/23] fix(dakota): make "Read the announcements" bold

---
 src/DakotaApp.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index ec6eaef4..3b5fe34f 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -140,12 +140,14 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
   justify-content: center;
   width: 100%;
   flex-wrap: wrap;
-  gap: 12px 20px;
-  font-size: 1.3rem;
+  gap: 12px;
+  font-size: 1.4rem;
+  font-weight: 600;
 
   span {
     color: var(--color-text-light);
   }
+}
 
 .release-link-item {
   a {

From d463d804e83dead8aa3289b4d302162a2d738577 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 09:42:38 +0700
Subject: [PATCH 12/23] fix(dakota): increase grid breakpoint to 840px

and remove extra margin-top on .brand-grid (inherited from global style)
---
 src/components/dakota/DakotaHighlights.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/dakota/DakotaHighlights.vue b/src/components/dakota/DakotaHighlights.vue
index 08c27b9e..0c35fac2 100644
--- a/src/components/dakota/DakotaHighlights.vue
+++ b/src/components/dakota/DakotaHighlights.vue
@@ -170,11 +170,17 @@ import {
   }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 840px) {
   .dakota-highlights {
     :deep(.brand-grid) {
       grid-template-columns: 1fr !important;
     }
   }
 }
+
+@media only screen and (max-width: 956px) {
+  .brand-grid {
+     margin-top: 0px;
+  }
+}
 </style>

From dad4763ce6f48d8e64541c71cd1fe2c205533572 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 09:48:02 +0700
Subject: [PATCH 13/23] fix(dakota): adjust styling for View on GitHub btn

add border to make it slightly more legible, then adjust margin + add
min-width to keep the text within one line responsively
---
 src/DakotaApp.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index 3b5fe34f..989333b2 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -197,15 +197,16 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
   justify-content: center;
   gap: 8px;
   height: 36px;
+  min-width: 180px;
   line-height: 36px;
   padding: 0 20px;
-  margin: 16px 64px 0;
+  margin: 16px;
   border-radius: 18px;
   font-size: 1.4rem;
   font-weight: 700;
   background: var(--color-bg);
   color: var(--color-text-light);
-  border: 2px solid var(--color-bg);
+  border: 1px solid rgb(var(--color-blue-rgb), 0.3);
   text-decoration: none;
   cursor: pointer;
   transition: all 0.15s ease;

From 7e5dd28ec081ea5d6ce2fcd2afacbfde17ab8897 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 10:08:09 +0700
Subject: [PATCH 14/23] feat(dakota): use gradient page bg to highlight H1

Swap blur background on DakotaScene div with an :after pseudo-element
above the background in DakotaApp directly to highlight the hero section
better. Also add text-shadow for hero title, description, and release
announcement text

Assisted-by: Deepseek V4 Flash in OpenCode
https://opncd.ai/share/eX1mPPPt
---
 src/DakotaApp.vue                     | 17 ++++++++++++++++-
 src/components/dakota/DakotaScene.vue | 11 ++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index 989333b2..fd36da7c 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -92,13 +92,28 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
 
 <style scoped lang="scss">
 .dakota-page {
+  position: relative;
   background-image: url('/evening/night-sky.webp');
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 600px;
+    background: linear-gradient(to bottom, rgba(var(--color-bg-rgb), 0.7), transparent);
+    z-index: 0;
+    pointer-events: none;
+  }
 }
 
 .dakota-layout {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -143,9 +158,9 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
   gap: 12px;
   font-size: 1.4rem;
   font-weight: 600;
-
   span {
     color: var(--color-text-light);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   }
 }
 
diff --git a/src/components/dakota/DakotaScene.vue b/src/components/dakota/DakotaScene.vue
index 25e1fcf7..dbdcd2f7 100644
--- a/src/components/dakota/DakotaScene.vue
+++ b/src/components/dakota/DakotaScene.vue
@@ -20,7 +20,7 @@ onMounted(() => {
     </h1>
 
     <p class="hero-desc">
-      Dakota is a <a href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop.org</a> and <a href="https://os.gnome.org" target="_blank" rel="noopener noreferrer">GNOME OS</a> image designed from the ground up to be the most modern raptor in the pack. The familiar Bluefin desktop and developer experience, in a whole new streamlined package. Built from the best OS tech from the <a href="https://cncf.io" target="_blank" rel="noopener noreferrer">CNCF</a>, <a href="https://www.apache.org" target="_blank" rel="noopener noreferrer">Apache Foundation</a>, and the <a href="https://uapi-group.org" target="_blank" rel="noopener noreferrer">UAPI Group</a>. Do not run, you'll only die tired.
+      A <a href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop.org</a> and <a href="https://os.gnome.org" target="_blank" rel="noopener noreferrer">GNOME OS</a> image, designed from the ground up to be the most modern raptor in the pack. The familiar Bluefin desktop and developer experience, in a whole new streamlined package. Built from the best OS tech from the <a href="https://cncf.io" target="_blank" rel="noopener noreferrer">CNCF</a>, <a href="https://www.apache.org" target="_blank" rel="noopener noreferrer">Apache Foundation</a>, and the <a href="https://uapi-group.org" target="_blank" rel="noopener noreferrer">UAPI Group</a>. Do not run, you'll only die tired.
     </p>
   </div>
 </template>
@@ -32,10 +32,6 @@ onMounted(() => {
   transition:
     opacity 0.6s ease,
     transform 0.6s ease;
-  background: rgba(var(--color-bg-rgb), 0.55);
-  backdrop-filter: blur(8px);
-  border-radius: 12px;
-  padding: 28px 32px;
   width: 100%;
   box-sizing: border-box;
 
@@ -63,18 +59,19 @@ onMounted(() => {
   font-weight: 700;
   font-size: 6rem;
   text-transform: uppercase;
-  color: var(--color-text-light);
+  color: var(--color-blue-light);
   margin: 0 0 24px 0;
   line-height: 1;
   padding-top: 0;
   padding-left: 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
 .hero-desc {
   font-size: 1.6rem;
   line-height: 1.6;
   color: var(--color-text-light);
-  margin: 0 0 20px 0;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
 
   a {
     color: var(--color-blue-light);

From c7cc04fe7f1f4f102ee64e5f6f98baa7546ce0dc Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 11:01:14 +0700
Subject: [PATCH 15/23] fix(dakota): move Alpha badge inside version card

- Move "Alpha" badge in top right side of DakotaVersionCard
- Import IconGithubCircle from Material Design Icons by Iconify
- Clean up CSS and make sure the badge wraps properly when needed

Assisted-by: Deepseek V4 Flash in OpenCode
https://opncd.ai/share/TCRveZsB
---
 src/DakotaApp.vue                           | 33 ++---------------
 src/components/dakota/DakotaVersionCard.vue | 40 +++++++++++++++++++--
 2 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index fd36da7c..d2fb0607 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onBeforeMount, provide, ref } from 'vue'
+import { IconGithubCircle } from '@iconify-prerendered/vue-mdi'
 import DakotaHighlights from './components/dakota/DakotaHighlights.vue'
 import DakotaScene from './components/dakota/DakotaScene.vue'
 import DakotaVersionCard from './components/dakota/DakotaVersionCard.vue'
@@ -69,11 +70,6 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
       <!-- Right: version card + secondary chips -->
       <div class="col-right">
         <div class="col-right-sticky">
-          <div class="alpha-badge-row">
-            <div class="alpha-badge">
-              ⚠️ <strong>Alpha.</strong>Take appropriate precautions.
-            </div>
-          </div>
           <DakotaVersionCard />
           <a
             class="github-btn"
@@ -81,7 +77,7 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.167 6.839 9.49.5.09.682-.217.682-.482 0-.237-.009-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.577.688.48C19.138 20.161 22 16.418 22 12c0-5.523-4.477-10-10-10z" /></svg>
+            <IconGithubCircle />
             View on GitHub
           </a>
         </div>
@@ -145,7 +141,7 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
 .col-right-sticky {
   @media (min-width: 840px) {
     position: sticky;
-    top: calc(18vh);
+    top: calc(22vh);
   }
 }
 
@@ -183,29 +179,6 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
   }
 }
 
-.alpha-badge-row {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 16px;
-}
-
-.alpha-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  font-size: 1.2rem;
-  color: var(--color-text-light);
-  background: rgba(var(--color-bg-rgb), 0.5);
-  border: 1px solid var(--color-border-light);
-  border-radius: 6px;
-  padding: 7px 10px;
-
-  strong {
-    font-weight: 600;
-  }
-}
-
 .github-btn {
   display: flex;
   align-items: center;
diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
index 694ba3e3..07b3d893 100644
--- a/src/components/dakota/DakotaVersionCard.vue
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -3,7 +3,6 @@ import { computed, onMounted, ref } from 'vue'
 import {
   IconCheckCircleOutline,
   IconDownload,
-  IconGithubCircle,
 } from '@iconify-prerendered/vue-mdi'
 import { getDakotaVersions } from '../../composables'
 import DakotaVersionChips from './DakotaVersionChips.vue'
@@ -93,6 +92,10 @@ function backToCard() {
       class="card-box"
       @click="openDownloads"
     >
+      <div class="alpha-badge">
+        <span class="alpha-badge-title">⚠️ Alpha.</span>
+        <span class="alpha-badge-sub">Take appropriate precautions.</span>
+      </div>
       <div
         class="card-image"
         :style="cardImageStyle"
@@ -263,7 +266,7 @@ function backToCard() {
 .version-row {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-end;
   margin-bottom: 0.4rem;
   font-size: 1.55rem;
 
@@ -288,6 +291,39 @@ function backToCard() {
   font-size: 1.55rem;
 }
 
+.alpha-badge {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 10;
+  width: max-content;
+  max-width: calc(100% - 24px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: baseline;
+  column-gap: 0.3em;
+  white-space: normal;
+  font-size: 1.2rem;
+  line-height: 1.3;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  padding: 5px 10px;
+  pointer-events: none;
+  text-align: right;
+
+  .alpha-badge-title {
+    font-weight: 600;
+  }
+
+  .alpha-badge-sub {
+    opacity: 0.9;
+  }
+}
+
 .click-hint {
   margin-top: 0.75rem;
   font-size: 1.3rem;

From 4cedb9d0af2ec0459229e70029240664e733b7c8 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 11:28:59 +0700
Subject: [PATCH 16/23] fix(dakota): tidy up Highlights section + mobile

- Move Freedesktop SDK as second highlight
- Clean up borders, use uniform font & icon size
- Make download view div match version card height value on mobile
breakpoints
- Add underline effect when hovering Download ISO button

Assisted-by: Deepseek V4 Flash in OpenCode
https://opncd.ai/share/8UqM3fWo
---
 src/components/dakota/DakotaHighlights.vue  | 71 ++++++++++++++-------
 src/components/dakota/DakotaVersionCard.vue | 10 ++-
 2 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/src/components/dakota/DakotaHighlights.vue b/src/components/dakota/DakotaHighlights.vue
index 0c35fac2..8821175d 100644
--- a/src/components/dakota/DakotaHighlights.vue
+++ b/src/components/dakota/DakotaHighlights.vue
@@ -26,26 +26,26 @@ import {
                 <p>The latest stable release of GNOME, no delays</p>
               </div>
 
-              <!-- Right: uutils-coreutils + sudo-rs -->
-              <div class="brand-item">
+              <!-- Left: primary — freedesktop-sdk -->
+              <div class="brand-item brand-primary">
                 <div>
                   <div class="icon-wrap">
-                    <IconShieldCheck />
+                    <IconLayers />
                   </div>
-                  <a class="brand-title" href="https://github.com/uutils/coreutils" target="_blank" rel="noopener noreferrer">Modern Userspace</a>
+                  <a class="brand-title" href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop SDK</a>
                 </div>
-                <p>bootc, brew, uutils, systemd-boot, container first, and legacy-free</p>
+                <p>Same battle tested libraries as Flathub. Continuously upgraded, always up to date.</p>
               </div>
 
-              <!-- Left: primary — freedesktop-sdk -->
-              <div class="brand-item brand-primary">
+              <!-- Right: uutils-coreutils + sudo-rs -->
+              <div class="brand-item">
                 <div>
                   <div class="icon-wrap">
-                    <IconLayers />
+                    <IconShieldCheck />
                   </div>
-                  <a class="brand-title" href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop SDK</a>
+                  <a class="brand-title" href="https://github.com/uutils/coreutils" target="_blank" rel="noopener noreferrer">Modern Userspace</a>
                 </div>
-                <p>Same battle tested libraries as Flathub. Continuously upgraded, always up to date.</p>
+                <p>bootc, brew, uutils, systemd-boot, container first, and legacy-free</p>
               </div>
 
               <!-- Left: Designed for Contributors -->
@@ -96,8 +96,8 @@ import {
   .icon-wrap {
     svg {
       display: block;
-      height: 24px;
-      width: 24px;
+      height: 32px;
+      width: 32px;
       color: var(--color-text-light);
     }
   }
@@ -121,22 +121,11 @@ import {
     }
 
     p {
-      font-size: 2rem !important;
       font-weight: 400;
     }
   }
 
   :deep(.brand-primary) {
-    .icon-wrap svg {
-      height: 36px;
-      width: 36px;
-    }
-
-    .brand-title,
-    p {
-      font-size: 1.6rem !important;
-    }
-
     p {
       font-weight: 400;
     }
@@ -170,11 +159,45 @@ import {
   }
 }
 
-@media (max-width: 840px) {
+@media (min-width: 957px) {
+  .dakota-highlights {
+    :deep(.brand-gnome) {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      & > div {
+        margin-bottom: 0;
+        flex-shrink: 0;
+      }
+
+      p {
+        margin-left: auto;
+        text-align: right;
+        padding-left: 40px;
+        font-size: 1.6rem !important;
+      }
+    }
+  }
+}
+
+@media (max-width: 956px) {
   .dakota-highlights {
     :deep(.brand-grid) {
       grid-template-columns: 1fr !important;
     }
+
+    :deep(.brand-gnome) {
+      p {
+        font-size: 1.6rem !important;
+      }
+    }
+
+    :deep(.brand-item) {
+      &:nth-last-child(2) {
+        border-bottom: 1px solid var(--color-border-light);
+      }
+    }
   }
 }
 
diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
index 07b3d893..fe96f98a 100644
--- a/src/components/dakota/DakotaVersionCard.vue
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -423,6 +423,10 @@ function backToCard() {
   gap: 6px;
   font-size: 1.3rem;
   flex: 1;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .entry-checksum {
@@ -456,13 +460,15 @@ function backToCard() {
 /* ── Responsive ── */
 
 @media (max-width: 700px) {
-  .card-box {
+  .card-box,
+  .download-view {
     height: 350px;
   }
 }
 
 @media (max-width: 500px) {
-  .card-box {
+  .card-box,
+  .download-view {
     height: 300px;
   }
 

From 98192a84e248c937301c2af97db537d0e6525acc Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 11:59:29 +0700
Subject: [PATCH 17/23] fix(dakota): reduce Verify button width

and make height of card-box + download-view the same

Assisted-by: Deepseek V4 Flash in OpenCode
https://opncd.ai/share/faq6pdba
---
 src/components/dakota/DakotaVersionCard.vue | 23 +++++++--------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
index fe96f98a..eebe73cf 100644
--- a/src/components/dakota/DakotaVersionCard.vue
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -341,7 +341,7 @@ function backToCard() {
 /* ── Download View ── */
 
 .download-view {
-  height: 400px;
+  min-height: 400px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -349,7 +349,7 @@ function backToCard() {
   backdrop-filter: blur(8px);
   border: 2px solid rgba(79, 156, 249, 0.25);
   border-radius: 12px;
-  padding: 1.5rem;
+  padding: 1.25rem;
   transition:
     transform 0.3s ease,
     box-shadow 0.3s ease;
@@ -375,7 +375,7 @@ function backToCard() {
   flex-direction: column;
   gap: 0;
   width: 100%;
-  padding: 0 16px;
+  padding: 0 8px;
 }
 
 .download-entry {
@@ -422,7 +422,8 @@ function backToCard() {
   justify-content: center;
   gap: 6px;
   font-size: 1.3rem;
-  flex: 1;
+  flex: 1 1 0%;
+  white-space: nowrap;
 
   &:hover {
     text-decoration: underline;
@@ -435,6 +436,8 @@ function backToCard() {
   justify-content: center;
   gap: 6px;
   font-size: 1.3rem;
+  flex: 0 1 auto;
+  max-width: 160px;
 }
 
 .back-button {
@@ -459,19 +462,7 @@ function backToCard() {
 
 /* ── Responsive ── */
 
-@media (max-width: 700px) {
-  .card-box,
-  .download-view {
-    height: 350px;
-  }
-}
-
 @media (max-width: 500px) {
-  .card-box,
-  .download-view {
-    height: 300px;
-  }
-
   .card-title {
     font-size: 1.7rem;
   }

From 4da32b54565beb69bc238239f1cb368de03899e1 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 12:06:36 +0700
Subject: [PATCH 18/23] fix(dakota): use color variables over raw hex

Assisted-by: Deepseek V4 Flash in OpenCode
https://opncd.ai/share/Eh5FmK6P
---
 src/components/dakota/DakotaVersionCard.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
index eebe73cf..9bbdd758 100644
--- a/src/components/dakota/DakotaVersionCard.vue
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -191,14 +191,14 @@ function backToCard() {
   transition:
     transform 0.3s ease,
     box-shadow 0.3s ease;
-  border: 2px solid rgba(79, 156, 249, 0.25);
+  border: 2px solid rgba(var(--color-blue-rgb), 0.25);
   background: #1f2937;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
   &:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
-    border-color: rgba(79, 156, 249, 0.5);
+    border-color: rgba(var(--color-blue-rgb), 0.5);
   }
 }
 
@@ -224,7 +224,7 @@ function backToCard() {
   flex-direction: column;
   justify-content: flex-end;
   padding: 1.5rem;
-  color: white;
+  color: var(--color-text-light);
   border-radius: 12px;
 }
 
@@ -307,7 +307,7 @@ function backToCard() {
   white-space: normal;
   font-size: 1.2rem;
   line-height: 1.3;
-  color: #fff;
+  color: var(--color-text-light);
   background: rgba(0, 0, 0, 0.55);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 6px;
@@ -347,7 +347,7 @@ function backToCard() {
   flex-direction: column;
   background: rgba(31, 41, 55, 0.6);
   backdrop-filter: blur(8px);
-  border: 2px solid rgba(79, 156, 249, 0.25);
+  border: 2px solid rgba(var(--color-blue-rgb), 0.25);
   border-radius: 12px;
   padding: 1.25rem;
   transition:

From fc44be71ef7975a9cd0052613627b44f34437b3e Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 12:09:33 +0700
Subject: [PATCH 19/23] fix(dakota): format code, remove excess texts

including unused .brand-grid margin code & misleading
`:download="entry.isoFilename"` attribute from the cross-origin download
link

Assisted-by: Deepseek V4 Flash in OpenCode
https://opncd.ai/share/Eh5FmK6P
---
 src/DakotaApp.vue                           | 32 ++++++++++-----------
 src/components/dakota/DakotaHighlights.vue  |  6 ----
 src/components/dakota/DakotaVersionCard.vue | 23 ++++++++-------
 3 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index d2fb0607..bdf5a1af 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onBeforeMount, provide, ref } from 'vue'
 import { IconGithubCircle } from '@iconify-prerendered/vue-mdi'
+import { onBeforeMount, provide, ref } from 'vue'
 import DakotaHighlights from './components/dakota/DakotaHighlights.vue'
 import DakotaScene from './components/dakota/DakotaScene.vue'
 import DakotaVersionCard from './components/dakota/DakotaVersionCard.vue'
@@ -52,17 +52,17 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
         <div class="release-links">
           <span>Read the announcements:</span>
           <div class="release-link-item">
-	        <a
-	          href="https://docs.projectbluefin.io/blog/making-our-own-fate/"
-	          target="_blank"
-	          rel="noopener noreferrer"
-	        >Alpha 2 Release →</a>
-	        <a
-	          href="https://docs.projectbluefin.io/blog/dakota-alpha-1/"
-	          target="_blank"
-	          rel="noopener noreferrer"
-	        >Alpha 1 Release →</a>
-	      </div>
+            <a
+              href="https://docs.projectbluefin.io/blog/making-our-own-fate/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >Alpha 2 Release →</a>
+            <a
+              href="https://docs.projectbluefin.io/blog/dakota-alpha-1/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >Alpha 1 Release →</a>
+          </div>
         </div>
         <DakotaHighlights />
       </div>
@@ -141,7 +141,7 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
 .col-right-sticky {
   @media (min-width: 840px) {
     position: sticky;
-    top: calc(22vh);
+    top: 22vh;
   }
 }
 
@@ -173,9 +173,9 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
     margin: 0 4px 0 4px;
     transition: background 0.2s;
 
-	&:hover {
-	  background: var(--color-blue);
-	}
+    &:hover {
+      background: var(--color-blue);
+    }
   }
 }
 
diff --git a/src/components/dakota/DakotaHighlights.vue b/src/components/dakota/DakotaHighlights.vue
index 8821175d..1dee0225 100644
--- a/src/components/dakota/DakotaHighlights.vue
+++ b/src/components/dakota/DakotaHighlights.vue
@@ -200,10 +200,4 @@ import {
     }
   }
 }
-
-@media only screen and (max-width: 956px) {
-  .brand-grid {
-     margin-top: 0px;
-  }
-}
 </style>
diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
index 9bbdd758..e91de9d0 100644
--- a/src/components/dakota/DakotaVersionCard.vue
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
 import {
   IconCheckCircleOutline,
   IconDownload,
 } from '@iconify-prerendered/vue-mdi'
+import { computed, onMounted, ref } from 'vue'
 import { getDakotaVersions } from '../../composables'
 import DakotaVersionChips from './DakotaVersionChips.vue'
 
@@ -102,7 +102,9 @@ function backToCard() {
       >
         <div class="card-overlay">
           <div class="card-header">
-            <h3 class="card-title">Dakota</h3>
+            <h3 class="card-title">
+              Dakota
+            </h3>
             <span class="card-subtitle">For the brave soul</span>
           </div>
 
@@ -150,7 +152,6 @@ function backToCard() {
               <a
                 class="btn filled entry-dl"
                 :href="entry.isoUrl"
-                :download="entry.isoFilename"
               >
                 <IconDownload />
                 Download ISO
@@ -214,12 +215,7 @@ function backToCard() {
 .card-overlay {
   position: absolute;
   inset: 0;
-  background: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0.15) 0%,
-    rgba(0, 0, 0, 0.4) 30%,
-    rgba(0, 0, 0, 0.92) 100%
-  );
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.92) 100%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -334,8 +330,13 @@ function backToCard() {
 }
 
 @keyframes pulse-hint {
-  0%, 100% { opacity: 0.7; }
-  50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
 /* ── Download View ── */

From 0a4f150542035cc17e31482b17ae5d48fba15eea Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 12:22:12 +0700
Subject: [PATCH 20/23] fix(dakota): unify breakpoint, fix cramp div issue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Aligned breakpoints: min-width: 957px → 840px, max-width: 956px →
839px in DakotaHighlights
- Re-added .brand-grid { margin-top: 0 } inside the 839px block in
DakotaHighlights
- Added container-type: inline-size + @container (max-width: 380px) to
hide "Verify" label (DakotaVersionCard) and stack entry headers
vertically when cramped

Assisted-by: Deepseek V4 Flash in OpenCode
https://opncd.ai/share/Eh5FmK6P
---
 src/components/dakota/DakotaHighlights.vue  |  8 ++++++--
 src/components/dakota/DakotaVersionCard.vue | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/dakota/DakotaHighlights.vue b/src/components/dakota/DakotaHighlights.vue
index 1dee0225..68f9e201 100644
--- a/src/components/dakota/DakotaHighlights.vue
+++ b/src/components/dakota/DakotaHighlights.vue
@@ -159,7 +159,7 @@ import {
   }
 }
 
-@media (min-width: 957px) {
+@media (min-width: 840px) {
   .dakota-highlights {
     :deep(.brand-gnome) {
       display: flex;
@@ -181,7 +181,11 @@ import {
   }
 }
 
-@media (max-width: 956px) {
+@media (max-width: 839px) {
+  .brand-grid {
+    margin-top: 0;
+  }
+
   .dakota-highlights {
     :deep(.brand-grid) {
       grid-template-columns: 1fr !important;
diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
index e91de9d0..fb02b43c 100644
--- a/src/components/dakota/DakotaVersionCard.vue
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -162,7 +162,7 @@ function backToCard() {
                 title="Verify checksum"
               >
                 <IconCheckCircleOutline />
-                Verify
+                <span class="btn-label">Verify</span>
               </a>
             </div>
           </div>
@@ -342,6 +342,7 @@ function backToCard() {
 /* ── Download View ── */
 
 .download-view {
+  container-type: inline-size;
   min-height: 400px;
   box-sizing: border-box;
   display: flex;
@@ -356,6 +357,18 @@ function backToCard() {
     box-shadow 0.3s ease;
 }
 
+@container (max-width: 380px) {
+  .btn-label {
+    display: none;
+  }
+
+  .entry-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+  }
+}
+
 .entries-wrapper {
   flex: 1;
   display: flex;

From f8aefeb480ee194f8615087e7d807bbab4058c85 Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 12:53:56 +0700
Subject: [PATCH 21/23] fix(dakota): make version card keyboard-accessible

add keydown prevent to Enter and Space press

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/components/dakota/DakotaVersionCard.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
index fb02b43c..55d3af2b 100644
--- a/src/components/dakota/DakotaVersionCard.vue
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -90,7 +90,11 @@ function backToCard() {
     <div
       v-if="!showDownloads"
       class="card-box"
-      @click="openDownloads"
+      role="button"
+      tabindex="0"
+      `@click`="openDownloads"
+      `@keydown.enter.prevent`="openDownloads"
+      `@keydown.space.prevent`="openDownloads"
     >
       <div class="alpha-badge">
         <span class="alpha-badge-title">⚠️ Alpha.</span>

From ef7ca01c4a7c740018912c67f8d14086663a4e8b Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 12:59:44 +0700
Subject: [PATCH 22/23] fix(dakota): unify DakotaVersions type in composables

- src/composables.ts: Added export to interface DakotaVersions
- src/components/dakota/DakotaVersionChips.vue: Removed local duplicate
interface, now imports type { DakotaVersions } from ../../composables
(lint fix auto-split the type import)

Assisted-by: Deepseek V4 Flash in OpenCode
---
 src/components/dakota/DakotaVersionChips.vue | 6 +-----
 src/composables.ts                           | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/dakota/DakotaVersionChips.vue b/src/components/dakota/DakotaVersionChips.vue
index 8478de6d..52d67dd5 100644
--- a/src/components/dakota/DakotaVersionChips.vue
+++ b/src/components/dakota/DakotaVersionChips.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { DakotaVersions } from '../../composables'
 import { computed, onMounted, ref } from 'vue'
 import { getDakotaVersions } from '../../composables'
 
@@ -6,11 +7,6 @@ const props = defineProps<{
   keys?: string[]
 }>()
 
-interface DakotaVersions {
-  generatedAt: string
-  packages: Record<string, string>
-}
-
 const LABELS: Record<string, string> = {
   'kernel': 'Kernel',
   'gnome': 'GNOME',
diff --git a/src/composables.ts b/src/composables.ts
index 3cc312d3..1fd882a2 100644
--- a/src/composables.ts
+++ b/src/composables.ts
@@ -10,7 +10,7 @@ export const IS_TABLET = computed(() => {
   return width.value <= 956
 })
 
-interface DakotaVersions {
+export interface DakotaVersions {
   generatedAt: string
   packages: Record<string, string>
 }

From a6d910124a6c9b97b28b1a4e9405f6063ca8a7eb Mon Sep 17 00:00:00 2001
From: KiKaraage <kikaraage@tuta.io>
Date: Mon, 1 Jun 2026 13:00:51 +0700
Subject: [PATCH 23/23] fix(dakota): use plain Vue template attribute
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed backticks from @click, @keydown.enter.prevent,
@keydown.space.prevent (lines 95-97) — Vue template attributes must be
plain, not backtick-quoted
- openDownloads is now recognized as used by the template, fixing the
unused-vars error

Assisted-by: Deepseek V4 Flash in OpenCode
---
 src/components/dakota/DakotaVersionCard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
index 55d3af2b..1b2f3e37 100644
--- a/src/components/dakota/DakotaVersionCard.vue
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -92,9 +92,9 @@ function backToCard() {
       class="card-box"
       role="button"
       tabindex="0"
-      `@click`="openDownloads"
-      `@keydown.enter.prevent`="openDownloads"
-      `@keydown.space.prevent`="openDownloads"
+      @click="openDownloads"
+      @keydown.enter.prevent="openDownloads"
+      @keydown.space.prevent="openDownloads"
     >
       <div class="alpha-badge">
         <span class="alpha-badge-title">⚠️ Alpha.</span>