tasks.component.html

<div class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
  <div class="text-center mb-12">
    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
      Your Magical Tasks
    </h2>
    <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
      Complete these tasks to bring your creative projects to life.
    </p>
  </div>

  <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
    <div *ngFor="let task of tasks" class="task-card rounded-lg p-6 shadow-md">
      <h3 class="text-lg font-medium text-gray-900 mb-2">{{ task.title }}</h3>
      <p class="text-gray-500 mb-4">{{ task.description }}</p>
      <button 
        [disabled]="!isLoggedIn" 
        (click)="completeTask(task.id)"
        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white"
        [ngClass]="{'bg-indigo-600 hover:bg-indigo-700': isLoggedIn, 'bg-gray-400 cursor-not-allowed': !isLoggedIn}"
      >
        {{ task.buttonText }}
      </button>
    </div>
  </div>
</div>