<div class="max-w-7xl px-4 mx-auto">
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <x-ui.card>
            <div class="flex items-center">
                <div class="size-8 text-white flex items-center justify-center rounded-full bg-accent" role="img"
                    aria-label="Total Users icon">
                    <x-ui.icon name="ph--users" />
                </div>
                <h3 class="flex-1 flex text-muted-foreground ml-3">Total Users</h3>
            </div>
            <div class="py-3 flex text-center justify-center font-semibold text-3xl text-foreground">12,543</div>
            <div class="flex justify-between items-center">
                <p class="text-xs text-muted-foreground flex-1 line-clamp-1">Total registered users</p>
                <div class="size-6 text-white text-sm rounded-full flex items-center justify-center bg-success"
                    role="img" aria-label="Trend indicator">
                    <x-ui.icon name="ph--trend-up" />
                </div>
            </div>
        </x-ui.card>
        <x-ui.card>
            <div class="flex items-center">
                <div class="size-8 text-white flex items-center justify-center rounded-full bg-primary" role="img"
                    aria-label="New Signups icon">
                    <x-ui.icon name="ph--user-plus" />
                </div>
                <h3 class="flex-1 flex text-muted-foreground ml-3">New Signups</h3>
            </div>
            <div class="py-3 flex text-center justify-center font-semibold text-3xl text-foreground">342</div>
            <div class="flex justify-between items-center">
                <p class="text-xs text-muted-foreground flex-1 line-clamp-1">New signups this month</p>
                <div class="size-6 text-white text-sm rounded-full flex items-center justify-center bg-success"
                    role="img" aria-label="Trend indicator">
                    <x-ui.icon name="ph--trend-up" />
                </div>
            </div>
        </x-ui.card>
        <x-ui.card>
            <div class="flex items-center">
                <div class="size-8 text-white flex items-center justify-center rounded-full bg-success" role="img"
                    aria-label="Active Users icon">
                    <x-ui.icon name="ph--users" />
                </div>
                <h3 class="flex-1 flex text-muted-foreground ml-3">Active Users</h3>
            </div>
            <div class="py-3 flex text-center justify-center font-semibold text-3xl text-foreground">8,921</div>
            <div class="flex justify-between items-center">
                <p class="text-xs text-muted-foreground flex-1 line-clamp-1">Currently active users</p>
                <div class="size-6 text-white text-sm rounded-full flex items-center justify-center bg-success"
                    role="img" aria-label="Trend indicator">
                    <x-ui.icon name="ph--trend-up" />
                </div>
            </div>
        </x-ui.card>
        <x-ui.card>
            <div class="flex items-center">
                <div class="size-8 text-white flex items-center justify-center rounded-full bg-warning" role="img"
                    aria-label="Churn Rate icon">
                    <x-ui.icon name="ph--chart-line-down" />
                </div>
                <h3 class="flex-1 flex text-muted-foreground ml-3">Churn Rate</h3>
            </div>
            <div class="py-3 flex text-center justify-center font-semibold text-3xl text-foreground">2.3%</div>
            <div class="flex justify-between items-center">
                <p class="text-xs text-muted-foreground flex-1 line-clamp-1">Monthly churn rate</p>
                <div class="size-6 text-white text-sm rounded-full flex items-center justify-center bg-danger"
                    role="img" aria-label="Trend indicator">
                    <x-ui.icon name="ph--trend-down" />
                </div>
            </div>
        </x-ui.card>
    </div>
</div>

<div class="max-w-7xl px-4 mx-auto">
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <x-ui.card class="flex flex-col">
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-muted-foreground">Monthly Recurring Revenue</span>
                <x-ui.icon name="ph--currency-circle-dollar" class="size-5 text-primary" />
            </div>
            <span class="text-3xl font-semibold text-foreground mt-3">$48.5K</span>
            <span class="w-max ui-soft ui-soft-success mt-4 inline-flex items-center gap-x-1.5 rounded-md px-2 py-1.5 text-xs font-medium">
                <x-ui.icon name="ph--trend-up" class="size-4" />
                +12.5% MoM
            </span>
        </x-ui.card>
        <x-ui.card class="flex flex-col">
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-muted-foreground">Active Subscriptions</span>
                <x-ui.icon name="ph--users-three" class="size-5 text-primary" />
            </div>
            <span class="text-3xl font-semibold text-foreground mt-3">1,247</span>
            <span class="w-max ui-soft ui-soft-success mt-4 inline-flex items-center gap-x-1.5 rounded-md px-2 py-1.5 text-xs font-medium">
                <x-ui.icon name="ph--trend-up" class="size-4" />
                +28 this month
            </span>
        </x-ui.card>
        <x-ui.card class="flex flex-col">
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-muted-foreground">Churn Rate</span>
                <x-ui.icon name="ph--chart-line-down" class="size-5 text-destructive" />
            </div>
            <span class="text-3xl font-semibold text-foreground mt-3">2.3%</span>
            <span class="w-max ui-soft ui-soft-destructive mt-4 inline-flex items-center gap-x-1.5 rounded-md px-2 py-1.5 text-xs font-medium">
                <x-ui.icon name="ph--trend-down" class="size-4" />
                Critical threshold: 3%
            </span>
        </x-ui.card>
        <x-ui.card class="flex flex-col">
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-muted-foreground">Customer Lifetime Value</span>
                <x-ui.icon name="ph--target" class="size-5 text-primary" />
            </div>
            <span class="text-3xl font-semibold text-foreground mt-3">$2,847</span>
            <span class="w-max ui-soft ui-soft-success mt-4 inline-flex items-center gap-x-1.5 rounded-md px-2 py-1.5 text-xs font-medium">
                <x-ui.icon name="ph--trend-up" class="size-4" />
                +18% YoY
            </span>
        </x-ui.card>
    </div>
</div>

<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-muted-foreground uppercase tracking-wide">
                    Conversion Rate
                </p>
                <div class="flex items-center justify-between">
                    <span class="text-xl font-semibold text-foreground">3.2%</span>
                    <div class="flex items-center space-x-1 text-xs font-medium text-green-600">
                        <x-ui.icon name="ph--trend-up" class="text-xs" />
                        <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-muted-foreground uppercase tracking-wide">
                    Bounce Rate
                </p>
                <div class="flex items-center justify-between">
                    <span class="text-xl font-semibold text-foreground">42.3%</span>
                    <div class="flex items-center space-x-1 text-xs font-medium text-destructive">
                        <x-ui.icon name="ph--trend-up" class="text-xs" />
                        <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-muted-foreground uppercase tracking-wide">
                    Session Duration
                </p>
                <div class="flex items-center justify-between">
                    <span class="text-xl font-semibold text-foreground">4m 32s</span>
                    <div class="flex items-center space-x-1 text-xs font-medium text-success">
                        <x-ui.icon name="ph--trend-up" class="text-xs" />
                        <span>+12%</span>
                    </div>
                </div>
            </div>
        </x-ui.card>
        <x-ui.card>
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                    New Visitors
                </p>
                <div class="flex items-center justify-between">
                    <span class="text-xl font-semibold text-foreground">1,429 </span>
                    <div class="flex items-center space-x-1 text-xs font-medium text-success">
                        <x-ui.icon name="ph--trend-up" class="text-xs" />
                        <span>+23%</span>
                    </div>
                </div>
            </div>
        </x-ui.card>
    </div>
</div>