From aef2df2a21d23e07a1a9214fabf2c5a0d2fd7853 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sun, 16 Aug 2026 17:39:54 +0200
Subject: [PATCH] feat(vision): restyle Our Values as an exclusive-open
 accordion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the 5 numbered value cards with a native <details name=values>
accordion — click a value to expand its description; opening one closes
the others. No JS, keyboard-accessible, degrades gracefully.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Avi6sNfBVonnK33knbkFDD
---
 src/views/VisionValuesView.vue | 37 +++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/views/VisionValuesView.vue b/src/views/VisionValuesView.vue
index a871459..ae2f78d 100644
--- a/src/views/VisionValuesView.vue
+++ b/src/views/VisionValuesView.vue
@@ -48,24 +48,29 @@ const team = ['patrick', 'coco', 'charlie'] as const
       </p>
     </PageSection>
 
-    <!-- Philosophy -->
-    <PageSection>
-      <div class="max-w-3xl">
-        <h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
-          {{ t('vision.philosophyTitle') }}
-        </h2>
-        <p class="mt-3 text-foreground/80">{{ t('vision.philosophySubtitle') }}</p>
-      </div>
-      <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
-        <Card v-for="(p, i) in philosophy" :key="p" class="bg-background p-5">
-          <div class="font-display text-2xl text-accent">{{ i + 1 }}</div>
-          <h3 class="mt-2 font-display text-lg uppercase tracking-wider">
-            {{ t(`vision.philosophy.${p}Title`) }}
-          </h3>
-          <p class="mt-2 text-sm leading-relaxed text-foreground/85">
+    <!-- Values: accordion (exclusive-open) -->
+    <PageSection width="narrow">
+      <h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
+        {{ t('vision.philosophyTitle') }}
+      </h2>
+      <div class="mt-8 divide-y divide-border overflow-hidden rounded-lg border border-border">
+        <details v-for="(p, i) in philosophy" :key="p" name="values" class="group">
+          <summary
+            class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-display text-base uppercase tracking-wider transition-colors hover:bg-muted/40 [&::-webkit-details-marker]:hidden"
+          >
+            <span>
+              <span class="text-accent">{{ i + 1 }}.</span> {{ t(`vision.philosophy.${p}Title`) }}
+            </span>
+            <span
+              class="shrink-0 text-xl leading-none text-accent transition-transform duration-300 group-open:rotate-45"
+            >
+              +
+            </span>
+          </summary>
+          <p class="px-5 pb-5 text-sm leading-relaxed text-foreground/85">
             {{ t(`vision.philosophy.${p}Body`) }}
           </p>
-        </Card>
+        </details>
       </div>
     </PageSection>