You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.2 KiB
45 lines
1.2 KiB
<script setup lang="ts">
|
|
import { ShoppingBag } from 'lucide-vue-next'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
interface Props {
|
|
/**
|
|
* Additional CSS classes
|
|
*/
|
|
class?: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
</script>
|
|
|
|
<template>
|
|
<Card :class="cn('', props.class)">
|
|
<div class="flex flex-col items-center justify-center py-16 px-6 text-center space-y-6">
|
|
<!-- Shopping Bag Icon -->
|
|
<div
|
|
class="flex items-center justify-center w-24 h-24 rounded-full bg-white/5 border-2 border-white/20"
|
|
>
|
|
<ShoppingBag class="w-12 h-12 text-white/60" stroke-width="1.5" />
|
|
</div>
|
|
|
|
<!-- Text Content -->
|
|
<div class="space-y-2">
|
|
<h2 class="text-2xl font-bold text-white">Dein Warenkorb ist leer</h2>
|
|
<p class="text-white/70 max-w-md">
|
|
Entdecke unsere Produkte und füge deine Favoriten zum Warenkorb hinzu.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- CTA Button -->
|
|
<Button
|
|
as-child
|
|
class="mt-4 bg-gradient-button bg-size-300 bg-left hover:bg-right transition-all duration-300 font-bold text-white shadow-lg hover:shadow-2xl"
|
|
size="lg"
|
|
>
|
|
<NuxtLink to="/products">
|
|
Produkte entdecken
|
|
</NuxtLink>
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|