Depth Parallax Words

"use client";

import Component from "@/components/ui/depth-parallax-words";

export default function DemoOne() {
  return (
    <div className="flex min-h-[700px] w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-xl rounded-3xl border bg-card p-12 shadow-sm">
        <p className="font-medium text-muted-foreground text-xs uppercase tracking-[0.18em]">
          Depth Parallax Words
        </p>

        <h2 className="mt-8 font-semibold text-4xl text-foreground leading-[1.12] tracking-tight">
          <Component>Words arrive at different depths</Component>
        </h2>

        <p className="mt-6 text-lg text-muted-foreground leading-relaxed">
          <Component delay={220}>Each word comes forward from its own distance, never a flat line.</Component>
        </p>

        <dl className="mt-10 divide-y border-t">
          <div className="flex items-baseline justify-between gap-6 py-4">
            <dt className="text-muted-foreground text-sm">duration</dt>
            <dd className="font-semibold text-foreground text-xl tracking-tight">
              <Component delay={440}>0.70s</Component>
            </dd>
          </div>
          <div className="flex items-baseline justify-between gap-6 py-4">
            <dt className="text-muted-foreground text-sm">word stagger</dt>
            <dd className="font-semibold text-foreground text-xl tracking-tight">
              <Component delay={560}>70ms</Component>
            </dd>
          </div>
          <div className="flex items-baseline justify-between gap-6 py-4">
            <dt className="text-muted-foreground text-sm">perspective</dt>
            <dd className="font-semibold text-foreground text-xl tracking-tight">
              <Component delay={680}>z depth</Component>
            </dd>
          </div>
        </dl>
      </div>
    </div>
  );
}