librodrome/app/pages/economique/index.vue

<template>
  <div class="axis-scope axis-scope--eco oiseaux-scene relative overflow-hidden section-padding">
    <div class="container-content">
      <!-- Header -->
      <header class="mb-12 text-center">
        <p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase">
          <!-- Phone: the title fills the width; the bird stands at the end of this line, on its baseline.
               A flat bird (37-44 px tall at 72 px wide): 93 px separate this baseline from the sticky
               header, and a perched bird keeps a void of its own height above it (rule f) -->
          {{ content?.kicker }}<UiOiseauPose nom="maraichere" pose="perche" bout :w="72" retourne mobile-seul />
        </p>
        <h1 class="page-title font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
          {{ content?.title }}
        </h1>
        <p class="mt-4 mx-auto max-w-2xl leading-relaxed" style="color: hsl(var(--color-text-muted))">
          {{ content?.description }}
        </p>
      </header>

      <div class="mx-auto max-w-3xl flex flex-col gap-8">
        <!-- Monnaie libre — the card clips its Ğ1 watermark, so the bird stands on a wrapper -->
        <div class="relative">
        <UiOiseauPose nom="pompeur-de-g1" pose="marge-d" ecart="34px" :w="126" retourne />
        <NuxtLink to="/economique/monnaie-libre" class="item-card g1-card group">
          <span class="g1-watermark" aria-hidden="true">Ğ1</span>
          <div class="item-header">
            <div class="item-icon">
              <span class="g1-icon">Ğ1</span>
            </div>
            <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
              Monnaie libre
            </h2>
            <UiStatusBadge class="ml-auto" v-bind="statusOf('monnaie-libre')" />
          </div>
          <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
            La Ğ1 (June) : une monnaie co-créée par ses membres, sans dette ni intérêt. Le dividende universel comme base.
          </p>
          <div class="mt-3 inline-flex items-center gap-1 text-sm text-primary group-hover:text-primary/80 transition-colors">
            En savoir plus
            <div class="i-lucide-arrow-right h-3.5 w-3.5" />
          </div>
        </NuxtLink>
        </div>

        <!-- Modèle économique — bloc livre -->
        <div class="book-block">
          <!-- The balance (the measure of the gift) peeks out from behind the book, on the left and
               halfway up: the market gardener stands low on the right, never at its height, and the
               four birds of the page do not alternate at an even step -->
          <UiOiseauPose nom="la-balance" pose="derriere" left="-150px" bottom="calc(100% - 240px)" :w="240" />
          <!-- Not by the Productions card: with the beekeeper, a pair at the same height -->
          <UiOiseauPose nom="maraichere" pose="marge-d" ecart="46px" :w="108" retourne />
          <HomeBookSection
            compact
            @open-player="showBookPlayer = true"
            @open-pdf="showPdfReader = true"
          />
        </div>

        <!-- Productions collectives -->
        <NuxtLink to="/economique/productions-collectives" class="item-card group">
          <UiOiseauPose nom="apicultrice" pose="marge-g" ecart="52px" :w="124" />
          <div class="item-header">
            <div class="item-icon">
              <div class="i-lucide-users h-5 w-5" />
            </div>
            <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
              Productions collectives
            </h2>
            <UiStatusBadge class="ml-auto" v-bind="statusOf('productions-collectives')" />
          </div>
          <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
            Une plateforme pour faciliter la création d'équipes et la réalisation de productions à l'échelle des bassins de vie. Passer la seconde.
          </p>
          <div class="mt-3 inline-flex items-center gap-1 text-sm text-primary group-hover:text-primary/80 transition-colors">
            En savoir plus
            <div class="i-lucide-arrow-right h-3.5 w-3.5" />
          </div>
        </NuxtLink>
      </div>
    </div>

    <BookPlayer v-model="showBookPlayer" />
    <BookPdfReader v-model="showPdfReader" />
  </div>
</template>

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

const { data: content } = await usePageContent('economique')
const statusOf = (id: string) => {
  const item = ((content.value as any)?.items ?? []).find((i: any) => i.id === id) ?? {}
  return { status: item.status, since: item.since, gestation: item.gestation }
}

useSeoPage({
  title: content.value?.meta?.title ?? 'Autonomie économique',
  description: (content.value as Record<string, unknown> | null)?.description as string ?? 'Comprendre et expérimenter une économie fondée sur le don, la monnaie libre et la réciprocité.',
})

const showBookPlayer = ref(false)
const showPdfReader = ref(false)
</script>

<style scoped>
.page-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
}

.item-card {
  position: relative;
  display: block;
  padding: 1.5rem;
  border-radius: 16px;
  border: none;
  background: hsl(var(--color-surface));
  transition: border-color 0.2s, transform 0.12s ease;
  text-decoration: none;
}

.item-card:hover {
  border-color: hsl(var(--color-primary) / 0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px hsl(var(--color-primary) / 0.08);
}

.item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.g1-icon {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}

.item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-primary) / 0.15);
  color: hsl(var(--color-primary));
  box-shadow: 0 0 12px hsl(var(--color-primary) / 0.12);
  flex-shrink: 0;
}

.gestation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--color-accent) / 0.12);
  color: hsl(var(--color-accent));
  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--font-mono);
}

.book-block {
  position: relative;
  padding: 1.25rem;
  border-radius: 16px;
  border: none;
  background: hsl(var(--color-surface));
}

/* Monnaie libre card */
.g1-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    hsl(var(--color-surface)) 60%,
    hsl(var(--color-primary) / 0.06) 100%
  );
  border-color: hsl(var(--color-primary) / 0.14);
}

.g1-card:hover {
  border-color: hsl(var(--color-primary) / 0.3);
}

.g1-watermark {
  position: absolute;
  right: -0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5.5rem;
  line-height: 1;
  color: hsl(var(--color-primary) / 0.07);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}

.g1-card:hover .g1-watermark {
  color: hsl(var(--color-primary) / 0.11);
}
</style>