@props([
    'icon',
    'title',
    'description',
    'animationDelay' => 0
])

<div 
    class="flex flex-col items-center text-center p-6 rounded-lg border bg-white hover:shadow-md transition-all animate-fade-in-up"
    style="animation-delay: {{ $animationDelay }}s"
>
    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
        <x-ui.icon :name="$icon" class="h-10 w-10 text-primary" />
    </div>
    <h3 class="text-xl font-semibold mb-2">{{ $title }}</h3>
    <p class="text-muted-foreground">{{ $description }}</p>
</div>