librodrome/app/pages/economique/commande.vue

<template>
  <div class="oiseaux-scene relative overflow-hidden section-padding">
    <div class="container-content">
      <div class="mx-auto max-w-2xl">
        <div class="section-icon relative mx-auto mb-6">
          <div class="i-lucide-shopping-bag h-12 w-12" />
        </div>

        <p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
          <!-- Phone: the title fills the width; the bird stands at the end of this line, on its baseline -->
          {{ content?.kicker }}<UiOiseauPose nom="lectrice" pose="perche" bout :w="84" retourne mobile-seul />
        </p>

        <h1 class="relative font-display text-3xl font-bold mb-4 text-center" style="color: hsl(var(--color-text))">
          {{ content?.title }}
        </h1>

        <p class="text-lg leading-relaxed mb-10 text-center" style="color: hsl(var(--color-text-muted))">
          {{ content?.description }}
        </p>

        <!-- Bookelis CTA -->
        <div class="cta-block mb-8">
          <UiOiseauPose nom="cycliste-livreur" pose="marge-g" ecart="54px" :w="150" />
          <!-- The reader in the right margin, feet on the card's top edge: on the bag, under the
               sticky header, she had 22 px of void above her (rule f, DA 03/11 after 17h35) -->
          <UiOiseauPose nom="lectrice" pose="marge-d" ecart="24px" bottom="100%" :w="84" retourne />
          <div class="cta-icon">
            <div class="i-lucide-globe h-5 w-5" />
          </div>
          <div class="flex-1">
            <h2 class="font-display text-lg font-semibold mb-1" style="color: hsl(var(--color-text))">
              Commander en ligne
            </h2>
            <p class="text-sm mb-3" style="color: hsl(var(--color-text-muted))">
              Impression à la demande, livraison chez vous.
            </p>
            <a
              :href="content?.bookelis?.url"
              target="_blank"
              rel="noopener"
              class="order-btn"
            >
              <div class="i-lucide-external-link h-4 w-4" />
              {{ content?.bookelis?.label }}
            </a>
          </div>
        </div>

        <!-- Librairie -->
        <div class="cta-block mb-10">
          <UiOiseauPose nom="libraire" pose="derriere" left="calc(100% - 96px)" bottom="-36px" :w="214" retourne />
          <div class="cta-icon cta-icon--accent">
            <div class="i-lucide-store h-5 w-5" />
          </div>
          <div class="flex-1">
            <h2 class="font-display text-lg font-semibold mb-2" style="color: hsl(var(--color-text))">
              {{ content?.librairie?.title }}
            </h2>
            <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
              {{ content?.librairie?.text }}
            </p>
          </div>
        </div>

        <div class="text-center">
          <UiBaseButton variant="ghost" to="/economique">
            <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
            Autonomie économique
          </UiBaseButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { data: content } = await usePageContent('economique/commande')

useSeoPage({
  title: content.value?.meta?.title ?? 'Commander le livre — Une économie du don',
  description: 'Commander l\'édition papier du livre « Une économie du don — enfin concevable » d\'Yvv.',
  image: '/images/Couv-Economie-du-don.jpg',
})
</script>

<style scoped>
.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: hsl(var(--color-primary) / 0.1);
  border: 1px solid hsl(var(--color-primary) / 0.2);
  color: hsl(var(--color-primary));
}

.cta-block {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--color-text) / 0.08);
  background: hsl(var(--color-surface));
}

.cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-primary) / 0.12);
  color: hsl(var(--color-primary));
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.cta-icon--accent {
  background: hsl(var(--color-accent) / 0.12);
  color: hsl(var(--color-accent));
}

.order-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  background: hsl(var(--color-primary));
  color: white;
  transition: all 0.2s;
}

.order-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px hsl(var(--color-primary) / 0.3);
}
</style>