librodrome/app/components/home/AxisGrid.vue

<template>
  <section class="section-padding">
    <div class="container-content flex flex-col gap-16">
      <UiScrollReveal>
        <div id="numerique">
          <HomeAxisBlock
            v-if="axes?.numerique"
            :title="axes.numerique.title"
            :icon="axes.numerique.icon"
            color="primary"
            :items="axes.numerique.items"
          />
        </div>
      </UiScrollReveal>

      <UiScrollReveal :delay="100">
        <div id="economique">
          <HomeAxisBlock
            v-if="axes?.economie"
            :title="axes.economie.title"
            :icon="axes.economie.icon"
            color="accent"
            :items="axes.economie.items"
            @open-player="$emit('open-player')"
            @open-pdf="$emit('open-pdf')"
            @launch-gratewizard="launchGW"
          />
        </div>
      </UiScrollReveal>

      <UiScrollReveal :delay="200">
        <div id="citoyenne">
          <HomeAxisBlock
            v-if="axes?.politique"
            :title="axes.politique.title"
            :icon="axes.politique.icon"
            color="primary"
            :items="axes.politique.items"
          />
        </div>
      </UiScrollReveal>

      <!-- Bloc Événement -->
      <UiScrollReveal v-if="evenement" :delay="300">
        <NuxtLink :to="evenement.to" class="event-block">
          <div class="event-content">
            <div class="event-icon">
              <div class="i-lucide-calendar-heart h-7 w-7" />
            </div>
            <div>
              <h2 class="font-display text-2xl font-bold text-white sm:text-3xl">
                {{ evenement.title }}
              </h2>
              <p class="font-display text-xl text-white/70 sm:text-2xl">
                {{ evenement.subtitle }}
              </p>
            </div>
          </div>
          <span v-if="evenement.gestation" class="event-badge">
            <div class="i-lucide-flask-conical h-3.5 w-3.5" />
            En gestation
          </span>
        </NuxtLink>
      </UiScrollReveal>
    </div>
  </section>
</template>

<script setup lang="ts">
defineEmits<{
  'open-player': []
  'open-pdf': []
}>()

const { data: content } = await usePageContent('home')
const { launch } = useGrateWizard()

const axes = computed(() => (content.value as any)?.axes)
const evenement = computed(() => (content.value as any)?.evenement)

function launchGW() {
  launch()
}
</script>

<style scoped>
.event-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 2.5rem;
  border-radius: 1rem;
  border: 2px solid hsl(var(--color-accent) / 0.25);
  background: linear-gradient(135deg, hsl(var(--color-accent) / 0.08), hsl(var(--color-primary) / 0.04));
  transition: border-color 0.3s, box-shadow 0.3s;
  text-decoration: none;
}

.event-block:hover {
  border-color: hsl(var(--color-accent) / 0.45);
  box-shadow: 0 0 40px hsl(var(--color-accent) / 0.08);
}

.event-content {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.event-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: hsl(var(--color-accent) / 0.15);
  color: hsl(var(--color-accent));
  flex-shrink: 0;
}

.event-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: hsl(var(--color-accent) / 0.12);
  color: hsl(var(--color-accent));
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .event-block {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }
}
</style>