<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">
        <!-- Profile Card -->
        <NuxtLink
          to="/students/profile?id=1"
          class="flex-1 min-w-[250px] bg-white p-6 rounded-2xl shadow hover:shadow-md transition cursor-pointer hover:bg-blue-50"
        >
          <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>
        </NuxtLink>
  
        <!-- Notifications Card -->
        <NuxtLink
          to="/notifications"
          class="flex-1 min-w-[250px] bg-white p-6 rounded-2xl shadow hover:shadow-md transition cursor-pointer hover:bg-blue-50"
        >
          <h2 class="text-xl font-semibold text-gray-700 mb-2">🔔 Notifications</h2>
          <p class="text-gray-500">Check latest alerts and messages.</p>
        </NuxtLink>
  
        <!-- Settings Card -->
        <NuxtLink
          to="/students/settings"
          class="flex-1 min-w-[250px] bg-white p-6 rounded-2xl shadow hover:shadow-md transition cursor-pointer hover:bg-blue-50"
        >
          <h2 class="text-xl font-semibold text-gray-700 mb-2">⚙️ Settings</h2>
          <p class="text-gray-500">Manage student-related preferences.</p>
        </NuxtLink>
  
        <!-- Student List Card -->
        <NuxtLink
          to="/students"
          class="flex-1 min-w-[250px] bg-white p-6 rounded-2xl shadow hover:shadow-md transition cursor-pointer hover:bg-blue-50"
        >
          <h2 class="text-xl font-semibold text-gray-700 mb-2">🎓 Students</h2>
          <p class="text-gray-500">Manage student records and attendance.</p>
        </NuxtLink>
      </div>
    </div>
  </template>
  