Carousel with images and overlays

<script setup lang="ts">
import { Card } from "@/components/ui/card"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"

const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
const slides = [0, 1, 2, 3, 4]
</script>

<template>
  <Carousel :opts="{ startIndex: 1, duration: 0 }" class="w-full max-w-md">
    <CarouselContent>
      <CarouselItem v-for="index in slides" :key="index">
        <div class="p-1">
          <Card class="group/card relative aspect-video overflow-hidden border-0 p-0">
            <img
              :src="PIXEL"
              :alt="`Slide ${index + 1}`"
              width="1000"
              height="800"
              class="absolute inset-0 size-full scale-100 object-cover transition-transform duration-500 ease-in-out group-hover/card:scale-105"
            />
            <div class="absolute inset-x-0 bottom-0 h-1/2 bg-linear-to-t from-black/80 to-transparent" />
            <div class="relative flex h-full flex-col justify-end p-6">
              <h3 class="text-xl font-bold text-white">{{ `Slide ${index + 1}` }}</h3>
              <p class="text-sm text-white/90">{{ `Beautiful landscape description for slide ${index + 1}.` }}</p>
            </div>
          </Card>
        </div>
      </CarouselItem>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</template>