demos

1import Image from "next/image";
2 
3import Image1 from "@/public/calvin-1.jpg";
4import Image21 from "@/public/calvin-couple-jeans.jpg";
5import Image22 from "@/public/calvin-couple-jeans-2.jpg";
6import Image31 from "@/public/denim-black.jpg";
7import Image32 from "@/public/calvin.jpg";
8import Image41 from "@/public/download.webp";
9import Image42 from "@/public/image-41.jpg";
10 
11import { ParallaxCards } from "./parallax-cards";
12export function ParallaxCardsDemo() {
13  return (
14    <ParallaxCards maxStackedCards={3} top="54px">
15      <PlaceholderCard
16      // index={0}
17      >
18        <Image src={Image1} alt="" fill className="object-cover object-top" />
19      </PlaceholderCard>
20      <PlaceholderCard>
21        <div className="grid size-full grid-cols-2">
22          <div className="relative w-full">
23            <Image
24              src={Image21}
25              alt=""
26              fill
27              className="object-cover object-bottom"
28            />
29          </div>
30          <div className="relative w-full">
31            <Image
32              src={Image22}
33              alt=""
34              fill
35              className="object-cover object-top"
36            />
37          </div>
38        </div>
39      </PlaceholderCard>
40      <PlaceholderCard>
41        <div className="grid size-full grid-cols-2">
42          <div className="relative w-full">
43            <Image
44              src={Image32}
45              alt=""
46              fill
47              className="object-cover object-bottom"
48            />
49          </div>
50          <div className="relative w-full">
51            <Image
52              src={Image31}
53              alt=""
54              fill
55              className="object-cover object-top"
56            />
57          </div>
58        </div>
59      </PlaceholderCard>
60      <PlaceholderCard>
61        <div className="grid size-full grid-cols-2">
62          <div className="relative w-full">
63            <Image
64              src={Image42}
65              alt=""
66              fill
67              className="object-cover object-bottom"
68            />
69          </div>
70          <div className="relative w-full">
71            <Image
72              src={Image41}
73              alt=""
74              fill
75              className="object-cover object-top"
76            />
77          </div>
78        </div>
79      </PlaceholderCard>
80    </ParallaxCards>
81  );
82}
83 
84function PlaceholderCard({
85  // index,
86  children,
87}: {
88  // index: number;
89  children: React.ReactNode;
90}) {
91// … truncated