librodrome/app/components/home/HomeLanding.vue

<template>
  <div class="va">
    <!-- Hero : the headline, and the three cursors to push -->
    <section class="va-hero">
      <div class="container-content va-hero-grid">
        <div class="va-intro">
          <h1 class="va-h1">
            <span class="va-h1-a">{{ heading[0] }}</span>
            <span class="va-h1-b">{{ heading[1] }}</span>
          </h1>
          <p class="va-axes">
            <template v-for="(seg, i) in axesLine" :key="i">
              <span v-if="seg.hue" class="va-axes-word" :style="{ '--hue': `var(${seg.hue})` }">{{ seg.text }}</span>
              <template v-else>{{ seg.text }}</template>
            </template>
          </p>
          <p class="va-means">{{ heading[4] }}</p>
          <p v-if="hero.approach" class="va-approach">{{ hero.approach }}</p>
        </div>

        <div class="va-console">
          <p class="va-console-title">
            {{ heading[2] }}
            <!-- The DJ stands on the console board, looking at the faders -->
            <UiOiseauPose nom="dj" pose="perche" right="2rem" bottom="-0.75rem" :w="80" retourne ton="accent" mobile />
          </p>
          <HomeConsole
            v-model="active"
            :axes="axes"
            :prefix="consoleLabels?.prefix"
            :top-label="consoleLabels?.top"
            :bottom-label="consoleLabels?.bottom"
            :stacks="bouquet?.inService"
            :stacks-to="lpk?.to"
            :stacks-label="lpk ? `En service chez ${lpk.name} :` : 'En service :'"
          />
        </div>
      </div>
    </section>

    <!-- Pourquoi -->
    <section class="va-band">
      <div class="container-content">
        <HomeCitations :lines="hero.citations ?? []" />
      </div>
    </section>

    <!-- Le format -->
    <section class="va-section">
      <div class="container-content">
        <HomeFormat
          :format="format"
          :book="book"
          :evenement="evenement"
          :hero="hero"
          @open-player="$emit('open-player')"
          @open-pdf="$emit('open-pdf')"
        />
      </div>
    </section>

    <!-- La boîte à outils -->
    <section class="va-section va-section--tools">
      <div class="container-content">
        <h2 class="va-h2">{{ toolboxTitle }}</h2>
        <HomeToolbox
          :oiseaux="toolboxOiseaux"
          :axes="axes"
          :lpk="lpk"
          :bouquet="bouquet"
          :gratewizard="gratewizard"
          anchors
          @open-player="$emit('open-player')"
          @open-pdf="$emit('open-pdf')"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import type { AxisKey } from '~/composables/useHomeData'
import type { OiseauPlace } from '~/utils/oiseauPose'

defineEmits<{
  'open-player': []
  'open-pdf': []
}>()

const { hero, axes, lpk, bouquet, evenement, book, format, gratewizard, consoleLabels, toolboxTitle } = await useHomeData()
const heading = computed<string[]>(() => hero.value.heading ?? [])

// « Autonomie numérique, économique, citoyenne. » — each axis word in its own hue
const AXIS_WORDS: Record<string, string> = {
  numérique: '--axis-num',
  économique: '--axis-eco',
  citoyenne: '--axis-cit',
}
const axesLine = computed(() =>
  (heading.value[3] ?? '')
    .split(/(numérique|économique|citoyenne)/)
    .filter(Boolean)
    .map(text => ({ text, hue: AXIS_WORDS[text] })))
const active = ref<AxisKey>('numerique')

// The governance crew stands in the empty space under the citoyenne column of the toolbox
const toolboxOiseaux: Partial<Record<AxisKey, OiseauPlace[]>> = {
  politique: [
    { nom: 'capitaine', pose: 'libre', left: 'calc(34% - 75px)', bottom: '-190px', w: 150, op: 0.24 },
    { nom: 'matelot', pose: 'libre', left: 'calc(80% - 40px)', bottom: '-300px', w: 80, op: 0.26, retourne: true },
  ],
}
</script>

<style scoped>
.va-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) 1rem clamp(2.5rem, 5vw, 4rem);
}

.va-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .va-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.va-h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.va-h1-a {
  font-weight: 800;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  color: hsl(var(--color-text));
}

.va-h1-b {
  margin-top: 0.3rem;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.8vw, 2.7rem);
  letter-spacing: -0.025em;
  color: hsl(var(--color-text) / 0.55);
}

.va-axes {
  margin: 1.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: hsl(var(--color-text));
}

.va-axes-word {
  color: hsl(var(--hue));
}

.va-means {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: hsl(var(--color-text) / 0.6);
}

.va-approach {
  margin: 1.75rem 0 0;
  max-width: 26rem;
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(var(--color-text) / 0.8);
}

.va-approach::after {
  content: ' ↓';
  color: hsl(var(--color-primary));
}

@media (min-width: 1024px) {
  .va-approach::after { content: ' →'; }
}

.va-console-title {
  position: relative;
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: hsl(var(--color-accent));
}

.va-band {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
  background: hsl(var(--color-surface) / 0.55);
}

.va-section {
  padding: clamp(3rem, 7vw, 5.5rem) 1rem 0;
}

.va-h2 {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: hsl(var(--color-text));
}
</style>