<template>
  <div class="min-h-screen bg-gray-50">
    <nav class="bg-white shadow-md">
      <div class="container mx-auto px-6 py-3">
        <h1 class="text-xl font-bold text-gray-800">Dashboard</h1>
      </div>
    </nav>
    <main class="container mx-auto px-6 py-10">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h2 class="text-xl font-semibold text-gray-800 mb-4">Client Analytics</h2>
          <p class="text-gray-600">Total clients: 1,243</p>
          <p class="text-green-600 font-bold">+12% MoM</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h2 class="text-xl font-semibold text-gray-800 mb-4">Revenue</h2>
          <p class="text-gray-600">$42,890</p>
          <p class="text-green-600 font-bold">+18% MoM</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h2 class="text-xl font-semibold text-gray-800 mb-4">Tasks</h2>
          <p class="text-gray-600">14 open</p>
          <p class="text-red-600 font-bold">3 overdue</p>
        </div>
      </div>
    </main>
  </div>
</template>