Reveal Group

import { ScrollRevealGroup } from '@/components/ui/scroll-reveal-group'

import { ScrollRevealGroup } from '@/components/ui/scroll-reveal-group'

const CARDS = [
  {
    title: 'Policy-aware match',
    body: 'Tolerance bands and dual-approval thresholds travel with every line, not buried in a shared sheet.',
  },
  {
    title: 'Exception routing',
    body: 'Mismatches escalate to the right owner with source context attached. Resolve before the stand-up starts.',
  },
  {
    title: 'Sealed audit packs',
    body: 'Export a signed pack for any close window: decisions, overrides, and source hashes in one file.',
  },
] as const

export default function ScrollRevealGroupDemo() {
  return (
    <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 sm:py-24">
      <ScrollRevealGroup direction="up" distance={24} stagger={0.07}>
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Close operations
        </p>
        <h2 className="mt-4 max-w-xl text-3xl font-semibold tracking-tight text-balance text-foreground sm:text-4xl">
          One sequence. Every entrance inherits the library clock.
        </h2>
        <p className="mt-5 max-w-lg text-base leading-relaxed text-muted-foreground">
          Reveal Group is a transparent choreographer, no chrome of its own.
          Drop real composition in; children rise in reading order with the
          CleverUI motion contract baked in.
        </p>
        <div className="mt-10 grid gap-4 sm:grid-cols-3 sm:gap-5">
          {CARDS.map((card, i) => (
            <div
              key={card.title}
              className="relative overflow-hidden rounded-2xl border border-border/60 bg-card p-6"
            >
              {i === 0 && (
                <span
                  aria-hidden="true"
                  className="absolute inset-y-0 left-0 w-0.5 bg-primary"
                />
              )}
              <h3 className="text-lg font-medium tracking-tight text-card-foreground">
                {card.title}
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                {card.body}
              </p>
            </div>
          ))}
        </div>
      </ScrollRevealGroup>
    </div>
  )
}