{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-gallery-polaroid-gallery","type":"registry:block","title":"Polaroid Gallery","files":[{"path":"components/blocks/marketing/gallery/polaroid-gallery.tsx","content":"import * as React from 'react';\nimport { Calendar, MapPin } from 'lucide-react';\n\ninterface PolaroidImage {\n  src: string;\n  alt: string;\n  width: number;\n  height: number;\n  location?: string;\n  date?: string;\n  rotation?: number;\n}\n\nexport default function PolaroidGallery() {\n  // Static images array wrapped in useMemo to maintain stable reference\n  const images = React.useMemo<PolaroidImage[]>(\n    () => [\n      {\n        src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?q=80&w=1473&auto=format&fit=crop',\n        alt: 'Paris with Eiffel Tower view',\n        width: 1473,\n        height: 982,\n        location: 'Paris, France',\n        date: 'June 2023',\n        rotation: -3,\n      },\n      {\n        src: 'https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?q=80&w=1470&auto=format&fit=crop',\n        alt: 'Beach sunset with palm tree silhouettes',\n        width: 1470,\n        height: 980,\n        location: 'Bali, Indonesia',\n        date: 'August 2023',\n        rotation: 2,\n      },\n      {\n        src: 'https://images.unsplash.com/photo-1517231925375-bf2cb42917a5?q=80&w=1471&auto=format&fit=crop',\n        alt: 'Espresso and pastry at a sidewalk cafe',\n        width: 1471,\n        height: 981,\n        location: 'Rome, Italy',\n        date: 'September 2023',\n        rotation: -2,\n      },\n      {\n        src: 'https://images.unsplash.com/photo-1551524559-8af4e6624178?q=80&w=1526&auto=format&fit=crop',\n        alt: 'Vintage car parked on colorful street',\n        width: 1526,\n        height: 1017,\n        location: 'Havana, Cuba',\n        date: 'May 2023',\n        rotation: 3,\n      },\n      {\n        src: 'https://images.unsplash.com/photo-1526498460520-4c246339dccb?q=80&w=1470&auto=format&fit=crop',\n        alt: 'Person hiking on mountain trail at sunrise',\n        width: 1470,\n        height: 980,\n        location: 'Swiss Alps',\n        date: 'July 2023',\n        rotation: -1,\n      },\n      {\n        src: 'https://images.unsplash.com/photo-1543158266-0066955047b1?q=80&w=1470&auto=format&fit=crop',\n        alt: 'Friends laughing together at outdoor party',\n        width: 1470,\n        height: 980,\n        location: 'Barcelona, Spain',\n        date: 'April 2023',\n        rotation: 1,\n      },\n      {\n        src: 'https://images.unsplash.com/photo-1551918120-9739cb430c6d?q=80&w=1374&auto=format&fit=crop',\n        alt: 'Desert landscape with red sand dunes',\n        width: 1374,\n        height: 916,\n        location: 'Marrakech, Morocco',\n        date: 'October 2023',\n        rotation: -2,\n      },\n      {\n        src: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1470&auto=format&fit=crop',\n        alt: 'Starry night sky over mountain peaks',\n        width: 1470,\n        height: 980,\n        location: 'Dolomites, Italy',\n        date: 'January 2023',\n        rotation: 2,\n      },\n      {\n        src: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop',\n        alt: 'Sunset over calm lake with mountain reflections',\n        width: 1470,\n        height: 980,\n        location: 'Lake Louise, Canada',\n        date: 'June 2023',\n        rotation: -1,\n      },\n    ],\n    []\n  );\n\n  // Calculate random stagger for first render only\n  const staggerOffsets = React.useMemo(\n    () => images.map(() => Math.floor(Math.random() * 20) - 10),\n    [images]\n  );\n\n  return (\n    <div className=\"w-full p-4 md:p-6\">\n      <div className=\"flex flex-wrap justify-center gap-6 md:gap-8\">\n        {images.map((image, index) => {\n          // Calculate polaroid dimensions - maintain image aspect ratio plus frame\n          const aspectRatio = image.width / image.height;\n          const polaroidWidth = 220; // fixed width for all polaroids\n          const imageHeight = polaroidWidth / aspectRatio;\n\n          return (\n            <div\n              key={index}\n              className=\"group relative\"\n              style={{\n                marginTop: `${staggerOffsets[index]}px`, // Random vertical stagger\n                transform: `rotate(${image.rotation || 0}deg)`,\n                transformOrigin: 'center',\n                transition: 'transform 0.3s ease, z-index 0.3s ease',\n                zIndex: 1,\n              }}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.zIndex = '10';\n                e.currentTarget.style.transform = `rotate(${image.rotation || 0}deg) scale(1.05)`;\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.zIndex = '1';\n                e.currentTarget.style.transform = `rotate(${image.rotation || 0}deg)`;\n              }}\n            >\n              {/* Polaroid frame */}\n              <div className=\"flex h-full w-full flex-col overflow-hidden rounded-md bg-white p-3 shadow-md\">\n                {/* Image */}\n                <div\n                  className=\"relative w-full grow overflow-hidden\"\n                  style={{\n                    height: `${imageHeight}px`,\n                  }}\n                >\n                  <img\n                    src={image.src}\n                    alt={image.alt}\n                    sizes={`${polaroidWidth}px`}\n                    className=\"w-full object-cover\"\n                  />\n                </div>\n\n                {/* Caption */}\n                <div className=\"mt-3 py-2\">\n                  <p className=\"font-handwriting mb-2 text-center text-sm font-medium\">\n                    {image.alt}\n                  </p>\n\n                  <div className=\"flex items-center justify-between text-xs text-gray-500\">\n                    {image.location && (\n                      <div className=\"flex items-center\">\n                        <MapPin className=\"mr-1 h-3 w-3\" />\n                        <span>{image.location}</span>\n                      </div>\n                    )}\n\n                    {image.date && (\n                      <div className=\"flex items-center\">\n                        <Calendar className=\"mr-1 h-3 w-3\" />\n                        <span>{image.date}</span>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {/* Tape effect */}\n              <div className=\"pointer-events-none absolute -top-3 left-1/2 h-6 w-16 -translate-x-1/2 rotate-3 bg-gray-100/80 shadow-sm\" />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/gallery/polaroid-gallery.tsx"}],"description":"A scattered set of polaroid style cards with captions and slight tilts. Great for adding a casual, personal feel to an about page or event recap.","dependencies":["lucide-react"]}