demo-layouts-parallax-reveal-section

1import {
2  ParallaxRevealSection,
3  type ParallaxRevealSectionProps,
4} from '@/components/azemmur/layouts/parallax-reveal-section';
5 
6interface ParallaxRevealSectionDemoProps {
7  intent: ParallaxRevealSectionProps['intent'];
8  shape: ParallaxRevealSectionProps['shape'];
9}
10 
11export default function ParallaxRevealSectionDemo({
12  intent,
13  shape,
14}: ParallaxRevealSectionDemoProps) {
15  return (
16    <div className="relative h-[20rem] border border-border">
17      <ParallaxRevealSection
18        className="h-full"
19        intent={intent}
20        shape={shape}
21        hero={
22          <div className="flex flex-col items-center gap-4 p-8 py-24">
23            <h2 className="text-3xl font-bold">Hero Section</h2>
24            <p className="max-w-md text-center opacity-75">
25              The section fills this fixed-height parent and keeps the hero
26              pinned while content scrolls.
27            </p>
28          </div>
29        }
30      >
31        <ParallaxRevealSection
32          intent="success"
33          shape={shape}
34          hero={
35            <div className="flex flex-col items-center gap-4 p-8 py-24 bg-warning">
36              <h2 className="text-3xl font-bold">Nested Hero</h2>
37              <p className="max-w-md text-center opacity-75">
38                Nested sections inherit the same behavior with no refs or
39                runtime measurement.
40              </p>
41            </div>
42          }
43        >
44          <div className="flex flex-col items-center justify-center gap-4 p-8 py-24">
45            <h3 className="text-2xl font-bold">Reveal Section</h3>
46            <p className="max-w-md text-center opacity-75">
47              This panel overlaps the hero as the user scrolls, creating a
48              parallax depth effect.
49            </p>
50          </div>
51        </ParallaxRevealSection>
52      </ParallaxRevealSection>
53    </div>
54  );
55}