1import ThreeDImagePageflip, { PageFlipLeaf } from "@/components/lightswind/3d-image-pageflip";
2
3const pages: PageFlipLeaf[] = [
4 {
5 frontImage: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80",
6 backImage: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=800&q=80",
7 frontTitle: "Villa Solarium",
8 frontSubtitle: "Horizon Pool & Architecture",
9 frontBadge: "Cover",
10 backTitle: "Minimal Horizon",
11 backSubtitle: "Geometric Water Pavilion",
12 backBadge: "Plate 01",
13 },
14 {
15 frontImage: "https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=800&q=80",
16 backImage: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80",
17 frontTitle: "Apex Structure",
18 frontSubtitle: "Parametric Glass Facade",
19 frontBadge: "Plate 02",
20 backTitle: "Glass Skyline",
21 backSubtitle: "Monolith Tower",
22 backBadge: "Plate 03",
23 },
24];
25
26export default function Example() {
27 return (
28 <div className="w-full min-h-[500px] flex items-center justify-center">
29 <ThreeDImagePageflip
30 pages={pages}
31 pageWidth={230}
32 pageHeight={330}
33 perspective={1300}
34 duration={0.65}
35 peekAngle={14}
36 spineShift={true}
37 showPageNumbers={true}
38 />
39 </div>
40 );
41}
