Verbatim content mirror of the Wix site (one commit per editorial choice) #3
1 changed files with 21 additions and 16 deletions
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
commit
aef2df2a21
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue