Parallax Strata

import { ScrollParallaxStrata } from '@/components/blocks/scroll-parallax-strata'

import { ScrollParallaxStrata } from '@/components/blocks/scroll-parallax-strata'

export default function ScrollParallaxStrataDemo() {
  return (
    <ScrollParallaxStrata
      eyebrow="Field survey · sheet 04"
      heading="Depth you can measure in single digits."
      body="Three strata drift at drafting-table rates, grid, contours, and copy, so the section gains space without photography or blur. Scroll once; the layers settle mid-frame under reduced motion."
      intensity={1}
      showContours
    >
      <div className="flex flex-wrap gap-3">
        {[
          { value: '−8%', label: 'grid drift' },
          { value: '−4%', label: 'contour drift' },
          { value: '+2%', label: 'content drift' },
        ].map((chip) => (
          <div
            key={chip.label}
            className="rounded-lg border border-border/60 bg-card px-4 py-3"
          >
            <p className="text-lg font-semibold tracking-tight tabular-nums text-foreground">
              {chip.value}
            </p>
            <p className="mt-1 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
              {chip.label}
            </p>
          </div>
        ))}
      </div>
    </ScrollParallaxStrata>
  )
}