Reveal

import { Reveal } from '@/components/site/Reveal'

<Reveal key={s.title} delay={0.1 + i * 0.05}>
  <div className="h-full overflow-hidden rounded-lg border border-[var(--border-strong)] bg-[var(--surface)] shadow-lift">
    <div className="flex items-center justify-between border-b border-[var(--border)] bg-[var(--surface-2)] px-4 py-2.5">
      <span className="mono text-caption uppercase tracking-label text-[var(--fg-dim)]">
        {s.title}
      </span>
      <CopyChip text={s.commands.join('\n')} />
    </div>
    <div className="mono space-y-3 px-5 py-5 text-ui leading-copy">
      {s.commands.map((c) => (
        <div key={c}>
          <span className="text-[var(--accent)]">$</span>{' '}
          <span className="text-[var(--foreground)]">{c}</span>
        </div>
      ))}
      <p className="pt-1 font-sans text-ui leading-copy text-[var(--fg-muted)]">{s.note}</p>
    </div>
  </div>
</Reveal>