home.component.html

<div class="ghibli-bg min-h-screen flex items-center justify-center bg-opacity-50">
  <div class="max-w-2xl mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
    <div class="text-center bg-white bg-opacity-90 p-8 rounded-lg shadow-lg">
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
        <span class="block">Welcome to</span>
        <span class="block text-indigo-600">Studio Tasks</span>
      </h1>
      <p class="mt-6 max-w-lg mx-auto text-xl text-gray-500">
        A magical place to organize your creative tasks, inspired by Studio Ghibli's whimsical worlds.
      </p>
      <div class="mt-10">
        <a href="/tasks" class="inline-block bg-indigo-600 py-3 px-8 border border-transparent rounded-md text-white hover:bg-indigo-700">
          Explore Tasks
        </a>
      </div>
    </div>
  </div>
</div>