Analytics Widget

<section class="ws-analytics-widget bg-[var(--ws-analytics-widget-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-xs overflow-hidden rounded-2xl border border-[var(--ws-analytics-widget-border)] bg-[var(--ws-analytics-widget-bg)] shadow-md">
      <div class="px-6 pt-6 pb-4">
        <div class="flex items-center justify-between">
          <p class="text-sm font-medium text-[var(--ws-analytics-widget-text-soft)]">Visitors</p>
          <span class="text-xs text-[var(--ws-analytics-widget-text-muted)]">Last 7 days</span>
        </div>
        <div class="mt-3 flex items-baseline gap-3">
          <span class="text-3xl font-bold tracking-tight text-[var(--ws-analytics-widget-text)]">12,847</span>
          <span class="inline-flex items-center gap-0.5 rounded-full bg-[var(--ws-analytics-widget-positive)]/15 px-2 py-0.5 text-xs font-semibold text-[var(--ws-analytics-widget-positive)]">
            <span aria-hidden="true">&uarr;</span>
            18.2%
          </span>
        </div>
      </div>

      <div class="px-6 pb-2">
        <div class="flex h-24 items-end gap-1.5" role="img" aria-label="Daily visitor count for the last 7 days">
          <div class="flex flex-1 flex-col items-center gap-1">
            <div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 52%"></div>
            <span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Mon</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1">
            <div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 68%"></div>
            <span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Tue</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1">
            <div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 45%"></div>
            <span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Wed</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1">
            <div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 80%"></div>
            <span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Thu</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1">
            <div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 72%"></div>
            <span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Fri</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1">
            <div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent-soft)]" style="height: 58%"></div>
            <span class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">Sat</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1">
            <div class="w-full rounded-sm bg-[var(--ws-analytics-widget-accent)]" style="height: 92%"></div>
            <span class="text-[10px] font-medium text-[var(--ws-analytics-widget-text-soft)]">Sun</span>
          </div>
        </div>
      </div>

      <div class="px-6 pb-5 pt-2">
        <p class="text-xs text-[var(--ws-analytics-widget-text-muted)]">Avg 1,835/day</p>
      </div>
    </div>
  </div>
</section>