{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-carousel-8","type":"registry:block","title":"Carousel with images and overlays","description":"Carousel with images and overlays","dependencies":[],"registryDependencies":["card","carousel"],"files":[{"path":"c-carousel-8.tsx","type":"registry:block","content":"import { Card } from \"@/components/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport function Pattern() {\n  return (\n    <Carousel className=\"w-full max-w-md\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card className=\"group/card relative aspect-video overflow-hidden border-0 p-0\">\n                <img\n                  src={`https://picsum.photos/1000/800?grayscale&random=${index + 10}`}\n                  alt={`Slide ${index + 1}`}\n                  width={1000}\n                  height={800}\n                  className=\"absolute inset-0 size-full scale-100 object-cover transition-transform duration-500 ease-in-out group-hover/card:scale-105\"\n                />\n                {/* Background fade effects */}\n                <div className=\"absolute inset-x-0 bottom-0 h-1/2 bg-linear-to-t from-black/80 to-transparent\" />\n\n                {/* Content */}\n                <div className=\"relative flex h-full flex-col justify-end p-6\">\n                  <h3 className=\"text-xl font-bold text-white\">\n                    Slide {index + 1}\n                  </h3>\n                  <p className=\"text-sm text-white/90\">\n                    Beautiful landscape description for slide {index + 1}.\n                  </p>\n                </div>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}","target":"components/examples/c-carousel-8.tsx"}],"meta":{"order":8}}