webapp/app/pages/index.vue

<template>
  <div class="space-y-16 pb-16">
    <!-- How it works - Photo Glass Cards -->
    <section class="container mx-auto px-4">
      <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-base-content">
        {{ $t('howto.title') }}
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Step 1: Search -->
        <div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
          <img
            src="/images/promo/search.jpg"
            alt=""
            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
          <div class="absolute inset-0 p-6 flex flex-col justify-end">
            <div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
              <Icon name="lucide:search" size="24" class="text-white" />
            </div>
            <h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step1.title') }}</h3>
            <p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step1.description') }}</p>
          </div>
        </div>

        <!-- Step 2: Compare -->
        <div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
          <img
            src="/images/promo/compare.jpg"
            alt=""
            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
          <div class="absolute inset-0 p-6 flex flex-col justify-end">
            <div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
              <Icon name="lucide:git-compare" size="24" class="text-white" />
            </div>
            <h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step2.title') }}</h3>
            <p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step2.description') }}</p>
          </div>
        </div>

        <!-- Step 3: Services -->
        <div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
          <img
            src="/images/promo/services.jpg"
            alt=""
            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
          <div class="absolute inset-0 p-6 flex flex-col justify-end">
            <div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
              <Icon name="lucide:sparkles" size="24" class="text-white" />
            </div>
            <h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step3.title') }}</h3>
            <p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step3.description') }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Who it's for - Photo Glass Cards with CTA -->
    <section class="container mx-auto px-4">
      <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-base-content">
        {{ $t('roles.title') }}
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Producers -->
        <div class="relative overflow-hidden rounded-2xl h-96 group">
          <img
            src="/images/promo/producer.jpg"
            alt=""
            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
          <div class="absolute inset-0 p-6 flex flex-col justify-end">
            <div class="w-12 h-12 rounded-xl bg-violet-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
              <Icon name="lucide:factory" size="24" class="text-violet-200" />
            </div>
            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.producers.title') }}</h3>
            <p class="text-white/70 text-sm mb-4">{{ $t('roles.producers.description') }}</p>
            <ul class="space-y-1 mb-4 text-sm">
              <li class="flex items-center gap-2 text-white/80">
                <Icon name="lucide:check" size="14" class="text-violet-400" />
                {{ $t('roles.producers.benefit1') }}
              </li>
              <li class="flex items-center gap-2 text-white/80">
                <Icon name="lucide:check" size="14" class="text-violet-400" />
                {{ $t('roles.producers.benefit2') }}
              </li>
            </ul>
            <button class="btn btn-sm bg-violet-500 hover:bg-violet-600 border-0 text-white">
              {{ $t('roles.producers.cta') }}
            </button>
          </div>
        </div>

        <!-- Buyers -->
        <div class="relative overflow-hidden rounded-2xl h-96 group">
          <img
            src="/images/promo/buyer.jpg"
            alt=""
            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
          <div class="absolute inset-0 p-6 flex flex-col justify-end">
            <div class="w-12 h-12 rounded-xl bg-cyan-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
              <Icon name="lucide:building-2" size="24" class="text-cyan-200" />
            </div>
            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.buyers.title') }}</h3>
            <p class="text-white/70 text-sm mb-4">{{ $t('roles.buyers.description') }}</p>
            <ul class="space-y-1 mb-4 text-sm">
              <li class="flex items-center gap-2 text-white/80">
                <Icon name="lucide:check" size="14" class="text-cyan-400" />
                {{ $t('roles.buyers.benefit1') }}
              </li>
              <li class="flex items-center gap-2 text-white/80">
                <Icon name="lucide:check" size="14" class="text-cyan-400" />
                {{ $t('roles.buyers.benefit2') }}
              </li>
            </ul>
            <button class="btn btn-sm bg-cyan-500 hover:bg-cyan-600 border-0 text-white">
              {{ $t('roles.buyers.cta') }}
            </button>
          </div>
        </div>

        <!-- Services -->
        <div class="relative overflow-hidden rounded-2xl h-96 group">
          <img
            src="/images/promo/partner.jpg"
            alt=""
            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
          <div class="absolute inset-0 p-6 flex flex-col justify-end">
            <div class="w-12 h-12 rounded-xl bg-rose-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
              <Icon name="lucide:handshake" size="24" class="text-rose-200" />
            </div>
            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.services.title') }}</h3>
            <p class="text-white/70 text-sm mb-4">{{ $t('roles.services.description') }}</p>
            <ul class="space-y-1 mb-4 text-sm">
              <li class="flex items-center gap-2 text-white/80">
                <Icon name="lucide:check" size="14" class="text-rose-400" />
                {{ $t('roles.services.benefit1') }}
              </li>
              <li class="flex items-center gap-2 text-white/80">
                <Icon name="lucide:check" size="14" class="text-rose-400" />
                {{ $t('roles.services.benefit2') }}
              </li>
            </ul>
            <button class="btn btn-sm bg-rose-500 hover:bg-rose-600 border-0 text-white">
              {{ $t('roles.services.cta') }}
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav'
})
</script>