ShowcaseDefault

代码示例

<template>
  <section class="py-20 mt-16 bg-gray-900" id="showcase">
    <div class="max-w-7xl mx-auto px-4">
      <div class="relative text-center mb-12">
        <h2 class="text-3xl font-bold text-white">{{ $t('home.showcase.title') }}</h2>
      </div>
      <div ref="showcaseContainer" class="flex overflow-x-auto gap-8 pb-4 hide-scrollbar">
        <!-- Example Showcase Item 1 -->
        <a href="https://nuxtpro.com" target="_blank" rel="noopener noreferrer" class="flex-shrink-0 w-80 md:w-96 bg-gray-800 rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
          <img src="xxxx.png" alt="Project 1" class="w-full h-48 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2 text-white">{{ $t('home.showcase.project1.title') }}</h3>
            <p class="text-gray-400 mb-4">{{ $t('home.showcase.project1.description') }}</p>
          </div>
        </a>
        <!-- Example Showcase Item 2 -->
        <a href="#" target="_blank" rel="noopener noreferrer" class="flex-shrink-0 w-80 md:w-96 bg-gray-800 rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
          <img src="xxxxx.png" alt="Project 2" class="w-full h-48 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2 text-white">{{ $t('home.showcase.project2.title') }}</h3>
            <p class="text-gray-400 mb-4">{{ $t('home.showcase.project2.description') }}</p>
          </div>
        </a>
        <!-- Example Showcase Item 3 -->
        <a href="https://github.com/PennyJoly/linktre-tools" target="_blank" rel="noopener noreferrer" class="flex-shrink-0 w-80 md:w-96 bg-gray-800 rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
          <img src="xxxxx.png" alt="Project 3" class="w-full h-48 object-cover">
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2 text-white">{{ $t('home.showcase.project3.title') }}</h3>
            <p class="text-gray-400 mb-4">{{ $t('home.showcase.project3.description') }}</p>
          </div>
        </a>
      </div>
    </div>
  </section>
</template>