<template>
    <div class="min-h-screen bg-gray-100 p-6">
      <h1 class="text-3xl font-bold text-gray-800 mb-6">Welcome to Your Dashboard</h1>
  
      <div class="flex flex-wrap gap-6">
        <!-- Card 1 -->
        <div class="flex-1 min-w-[250px] bg-white p-6 rounded-2xl shadow hover:shadow-md transition">
          <h2 class="text-xl font-semibold text-gray-700 mb-2">Profile</h2>
          <p class="text-gray-500">View and edit your profile info.</p>
        </div>
  
        <!-- Card 2 -->
        <div class="flex-1 min-w-[250px] bg-white p-6 rounded-2xl shadow hover:shadow-md transition">
          <h2 class="text-xl font-semibold text-gray-700 mb-2">Notifications</h2>
          <p class="text-gray-500">Check latest alerts and messages.</p>
        </div>
  
        <!-- Card 3 -->
        <div class="flex-1 min-w-[250px] bg-white p-6 rounded-2xl shadow hover:shadow-md transition">
          <h2 class="text-xl font-semibold text-gray-700 mb-2">Settings</h2>
          <p class="text-gray-500">Manage account preferences.</p>
        </div>
  
        <!-- Card 4 -->
        <div class="flex-1 min-w-[250px] bg-white p-6 rounded-2xl shadow hover:shadow-md transition">
          <h2 class="text-xl font-semibold text-gray-700 mb-2">Analytics</h2>
          <p class="text-gray-500">Track your app usage stats.</p>
        </div>
      </div>
    </div>
  </template>
  

  