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 GrateWizard -->
      <UiScrollReveal v-if="gw" :delay="250">
        <button class="gw-block" @click="launchGW">
          <div class="gw-icon">
            <div class="i-lucide-sparkles h-7 w-7" />
          </div>
          <div class="gw-text">
            <h2 class="font-display text-xl font-bold text-white sm:text-2xl">
              {{ gw.title }}
            </h2>
            <p class="text-white/55 text-sm sm:text-base mt-0.5">
              {{ gw.subtitle }}
            </p>
          </div>
          <div class="gw-arrow">
            <div class="i-lucide-arrow-up-right h-5 w-5" />
          </div>
        </button>
      </UiScrollReveal>

      <!-- Bloc Événement -->
      <UiScrollReveal v-if="evenement" :delay="350">
        <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 gw = computed(() => (content.value as any)?.gratewizard)
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;
}

/* GrateWizard block */
.gw-block {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.75rem 2rem;
  border-radius: 1rem;
  border: none;
  background: linear-gradient(135deg, hsl(280 50% 20% / 0.35), hsl(260 40% 15% / 0.25));
  box-shadow: 0 0 40px hsl(280 60% 50% / 0.06), inset 0 1px 0 hsl(280 60% 70% / 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  color: inherit;
}

.gw-block:hover {
  background: linear-gradient(135deg, hsl(280 50% 24% / 0.45), hsl(260 40% 18% / 0.35));
  box-shadow: 0 0 60px hsl(280 60% 50% / 0.12), inset 0 1px 0 hsl(280 60% 70% / 0.12);
  transform: translateY(-2px);
}

.gw-block:active {
  transform: translateY(0);
}

.gw-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.875rem;
  background: hsl(280 60% 55% / 0.18);
  color: hsl(280 60% 72%);
  flex-shrink: 0;
  box-shadow: 0 0 20px hsl(280 60% 50% / 0.15);
}

.gw-text {
  flex: 1;
  min-width: 0;
}

.gw-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: hsl(280 60% 55% / 0.1);
  color: hsl(280 60% 65%);
  flex-shrink: 0;
  transition: all 0.2s;
}

.gw-block:hover .gw-arrow {
  background: hsl(280 60% 55% / 0.2);
  color: hsl(280 60% 80%);
  transform: translate(2px, -2px);
}

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

  .gw-block {
    padding: 1.25rem;
    gap: 1rem;
  }

  .gw-arrow {
    display: none;
  }
}
</style>