No products empty state with stacked cards and blur effect

<script setup lang="ts">
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
</script>

<template>
  <div class="flex items-center justify-center p-4">
    <Empty class="py-12">
      <EmptyHeader>
        <EmptyMedia>
          <div class="relative h-24 w-52" aria-hidden="true">
            <div class="bg-muted/60 dark:bg-muted/30 border-border/50 absolute inset-x-6 top-0 h-6 rounded-t-lg border" />
            <div class="bg-muted/80 dark:bg-muted/50 border-border/60 absolute inset-x-3 top-3 h-6 rounded-t-lg border" />
            <div class="bg-background border-border absolute inset-x-0 top-6 flex h-16 items-center gap-3 rounded-lg border px-4 shadow-sm">
              <div class="bg-muted size-8 shrink-0 rounded" />
              <div class="flex flex-1 flex-col gap-1.5">
                <div class="bg-muted h-2.5 w-3/4 rounded" />
                <div class="bg-muted/60 h-2 w-1/2 rounded" />
              </div>
            </div>
            <div class="from-background/0 via-background/60 to-background pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-linear-to-b" />
          </div>
        </EmptyMedia>
        <EmptyTitle>No products</EmptyTitle>
        <EmptyDescription>
          No data here yet. We will notify you when there's an update.
        </EmptyDescription>
      </EmptyHeader>
    </Empty>
  </div>
</template>