<template>
  <section class="bg-white dark:bg-gray-900 py-24 sm:py-32">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl text-center">
        <h2
          class="text-3xl font-bold text-gray-900 dark:text-gray-100 sm:text-4xl"
        >
          지난 프로그램 또는 후기
        </h2>
        <p class="mt-2 text-lg/8 text-gray-600 dark:text-gray-400">
          Learn how to grow your business with our expert advice.
        </p>
      </div>
      <div
        class="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3"
      >
        <article
          v-for="post in posts"
          :key="post.id"
          class="relative flex flex-col justify-end overflow-hidden rounded-2xl"
        >
          <!-- Background image -->
          <img
            :src="post.imageUrl"
            alt=""
            class="absolute inset-0 w-full h-full object-cover z-0"
          />
          <!-- 20% black overlay in light, 50% in dark -->
          <div class="absolute inset-0 bg-black/20 dark:bg-black/50 z-10"></div>
          <!-- Gradient on top of overlay -->
          <div
            class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent z-20"
          ></div>
          <!-- Content -->
          <div class="relative z-30 px-8 pb-8 pt-48 sm:pt-32 lg:pt-48">
            <div
              class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300"
            >
              <time :datetime="post.datetime" class="mr-8">{{
                post.date
              }}</time>
              <div class="-ml-4 flex items-center gap-x-4">
                <svg
                  viewBox="0 0 2 2"
                  class="-ml-0.5 h-2 w-2 flex-none fill-white/50"
                >
                  <circle cx="1" cy="1" r="1" />
                </svg>
              </div>
            </div>
            <h3 class="mt-3 text-lg/6 font-semibold text-white">
              <a :href="post.href" class="relative block">
                <span class="absolute inset-0" />
                {{ post.title }}
              </a>
            </h3>
            <p
              class="mt-2 text-sm text-gray-200 dark:text-gray-300 line-clamp-2"
            >
              {{ post.description }}
            </p>
          </div>
        </article>
      </div>
    </div>
  </section>
</template>

<script setup>
const posts = [
  {
    id: 1,
    title: '와디즈',
    href: '#',
    description:
      'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.',
    imageUrl:
      'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
    date: 'Mar 16, 2020',
    datetime: '2020-03-16',
    author: {
      name: 'Michael Foster',
      imageUrl:
        'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
];
</script>

<style scoped>
/* 
 Ensure you have the Tailwind line-clamp plugin enabled for “line-clamp-2”.
 */
</style>
