<div class="max-w-7xl px-4 mx-auto">
    <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
        <x-ui.card>
            <div class="space-y-2">
                <p class="text-xs font-medium text-fg-muted uppercase tracking-wide">
                    Conversion Rate
                </p>
                <div class="flex items-center justify-between">
                    <span class="text-xl font-semibold text-fg">3.2%</span>
                    <div class="flex items-center space-x-1 text-xs font-medium text-green-600">
                        <span class="text-xs iconify ph--trend-up"></span>
                        <span>+0.5%</span>
                    </div>
                </div>
            </div>
        </x-ui.card>
        <x-ui.card >
            <div class="space-y-2">
                <p class="text-xs font-medium text-fg-muted uppercase tracking-wide">
                    Bounce Rate
                </p>
                <div class="flex items-center justify-between">
                    <span class="text-xl font-semibold text-fg">42.3%</span>
                    <div class="flex items-center space-x-1 text-xs font-medium text-danger">
                        <span class="text-xs iconify ph--trend-up"></span>
                        <span>-1.2%</span>
                    </div>
                </div>
            </div>
        </x-ui.card>
        <x-ui.card>
            <div class="space-y-2">
                <p class="text-xs font-medium text-fg-muted uppercase tracking-wide">
                    Session Duration
                </p>
                <div class="flex items-center justify-between">
                    <span class="text-xl font-semibold text-fg">4m 32s</span>
                    <div class="flex items-center space-x-1 text-xs font-medium text-success">
                        <span class="text-xs iconify ph--trend-up"></span>
                        <span>+12%</span>
                    </div>
                </div>
            </div>
        </x-ui.card>
        <x-ui.card>
            <div class="space-y-2">
                <p class="text-xs font-medium text-fg-muted uppercase tracking-wide">
                    New Visitors
                </p>
                <div class="flex items-center justify-between">
                    <span class="text-xl font-semibold text-fg">1,429 </span>
                    <div class="flex items-center space-x-1 text-xs font-medium text-success">
                        <span class="text-xs iconify ph--trend-up"></span>
                        <span>+23%</span>
                    </div>
                </div>
            </div>
        </x-ui.card>
    </div>
</div>