{{ define "main" }}
<div class="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
  <!-- Navigation -->
  {{ partial "nav.html" . }}

  <!-- Header -->
  <header class="pt-24 pb-12 text-center text-white">
    <h1 class="text-4xl font-bold mb-4">{{ .Title }}</h1>
    <div class="max-w-2xl mx-auto text-gray-300 px-4">
      {{ .Content }}
    </div>
  </header>

  <!-- Portfolio Grid -->
  <div class="container mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {{ range .Pages.ByDate.Reverse }}
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-xl transform hover:scale-105 transition-transform duration-300 flex flex-col">
          {{ with .Params.featured_image }}
            <div class="aspect-w-16 aspect-h-9 bg-gray-700">
              <img src="{{ . }}" alt="{{ $.Title }}" class="object-cover w-full h-full">
            </div>
          {{ end }}
          <div class="p-6 flex-1 flex flex-col justify-between">
            <div>
              <h3 class="text-xl font-bold text-white mb-2">{{ .Title }}</h3>
              <p class="text-gray-400 mb-4">{{ .Params.description }}</p>
            </div>
            <a href="{{ .RelPermalink }}" class="inline-block mt-auto px-6 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors">View Post</a>
          </div>
        </div>
      {{ end }}
    </div>
  </div>
</div>
<!-- Add Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
{{ end }}