Card

<x-ui.card class="space-y-6">
    <x-ui.card.header class="aspect-video border border-border-strong border-dashed inner-radius" />
    <x-ui.card.content>
        <x-ui.card.title> Card Title</x-ui.card.title>
        <x-ui.card.description>Lorem ipsum dolor sit amet consectetur adipisicing elit.</x-ui.card.description>
    </x-ui.card.content>
</x-ui.card>

<x-ui.card class="space-y-6">
    <div class="size-12 border border-border-strong border-dashed rounded d-flex-place-center">
        <span class="iconify ph--acorn text-xl"></span>
    </div>
    <x-ui.card.content>
        <x-ui.card.title> Card Title</x-ui.card.title>
        <x-ui.card.description>Lorem ipsum dolor sit amet consectetur adipisicing elit.</x-ui.card.description>
    </x-ui.card.content>
</x-ui.card>

<x-ui.card fill="gray" size="xs" class="space-y-3 mx-auto max-w-sm">
    <div class="px-4 pt-2">
        <span class="text-fg-subtitle text-sm">
            Top Seller
        </span>
    </div>
    <img src="/images/sports-shoe.webp" alt="Sport Shoe" class="w-full h-auto rounded-md">
    <x-ui.card.content gap="2" class="px-4 pb-2 text-sm">
        <div class="flex justify-between items-start gap-2">
            <x-ui.card.title size="none" class="flex-1 text-fg-title font-medium" text="Air Nike" />
            <span class="text-fg-subtitle">12$</span>
        </div>
        <div class="flex justify-between items-start gap-2 text-sm">
            <x-ui.card.description class="flex-1" text="Colored" />
            <x-ui.button size="xs" intent="neutral">
                Add to card
            </x-ui.button>
        </div>
    </x-ui.card.content>
</x-ui.card>

<x-ui.card fill="gray" size="sm" class="max-w-sm mx-auto">
    <div class="relative">
        <div class="absolute inset-x-1 top-1 flex justify-between items-center  text-white text-xs">
            <span class="bg-gray-900/80 px-2 py-px rounded-full">
                -40%
            </span>
            <button aria-label="add to favorite"
                class="p-1.5 bg-gray-900/80 backdrop-filter backdrop-blur-sm rounded-full">
                <span aria-hidden="true" class="flex iconify ph--heart"></span>
            </button>
        </div>
        <img src="/images/bottes-cuir.webp" alt="bottes cuir" class="w-full h-auto rounded-md">
    </div>
    <div class="flex justify-between items-start gap-2 px-4 pt-3 pb-2 text-sm">
        <x-ui.card.title weight="medium" size="none" class="flex-1" text="Air Nike"/>
        <span class="text-fg-subtitle">12$</span>
    </div>
</x-ui.card>

@php
$features = [
    'Advanced Analytics',
    'Custom Branding',
    'Priority Support',
    'API Integration',
    'Team Collaboration',
];
@endphp

<x-ui.card class="md:[--card-padding:--spacing(8)] max-w-sm">
    <span class="text-fg-title font-bold text-xl">Enterprise Plan</span>
    <p class="text-fg my-6">
        Perfect for growing businesses that need powerful features and dedicated support.
    </p>
    <div class="flex items-end gap-4 py-4 border-y border-border-strong/50">
        <span
            class="bg-clip-text text-transparent bg-gradient-to-br from-primary-500 to-accent-400 font-bold text-4xl">
            $999
        </span>
        <x-ui.badge variant="soft" intent="primary">
            annual
        </x-ui.badge>
    </div>
    <ul class="flex flex-col gap-y-3 *:flex *:items-center *:gap-x-4 py-8">
        @foreach ($features as $feature)
            <li>
                <span aria-hidden="true" class="flex iconify ph--folder-open text-primary size-4"></span>
                {{ $feature }}
            </li>
        @endforeach
    </ul>
    <x-ui.button href="#pricing" class="w-full justify-center">
        Start Free Trial
    </x-ui.button>
</x-ui.card>