Verbatim content mirror of the Wix site (one commit per editorial choice) #3

Open
padreug wants to merge 11 commits from feat/content/wix-verbatim-mirror into main
Showing only changes of commit aef2df2a21 - Show all commits

feat(vision): restyle Our Values as an exclusive-open accordion

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
Padreug 2026-08-16 17:39:54 +02:00

View file

@ -48,24 +48,29 @@ const team = ['patrick', 'coco', 'charlie'] as const
</p> </p>
</PageSection> </PageSection>
<!-- Philosophy --> <!-- Values: accordion (exclusive-open) -->
<PageSection> <PageSection width="narrow">
<div class="max-w-3xl">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl"> <h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
{{ t('vision.philosophyTitle') }} {{ t('vision.philosophyTitle') }}
</h2> </h2>
<p class="mt-3 text-foreground/80">{{ t('vision.philosophySubtitle') }}</p> <div class="mt-8 divide-y divide-border overflow-hidden rounded-lg border border-border">
</div> <details v-for="(p, i) in philosophy" :key="p" name="values" class="group">
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-5"> <summary
<Card v-for="(p, i) in philosophy" :key="p" class="bg-background p-5"> 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"
<div class="font-display text-2xl text-accent">{{ i + 1 }}</div> >
<h3 class="mt-2 font-display text-lg uppercase tracking-wider"> <span>
{{ t(`vision.philosophy.${p}Title`) }} <span class="text-accent">{{ i + 1 }}.</span> {{ t(`vision.philosophy.${p}Title`) }}
</h3> </span>
<p class="mt-2 text-sm leading-relaxed text-foreground/85"> <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`) }} {{ t(`vision.philosophy.${p}Body`) }}
</p> </p>
</Card> </details>
</div> </div>
</PageSection> </PageSection>