dcf64cc924
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- PDF viewer : suppression animation/lock isAnimating, navigation stable - PDF reader : focus iframe au chargement → flèches actives immédiatement - BookSection : couverture via background-image (right center) — fiable - AxisBlock : boutons secondaires NuxtLink/button explicites (v-if/v-else) - modele-eco/[slug] : scroll top au changement de chapitre (SPA reuse) - router.options.ts : scrollBehavior global top/instant - PDF mis à jour (numéros de pages chapitres 7–11) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
127 lines
3.6 KiB
Vue
127 lines
3.6 KiB
Vue
<template>
|
|
<section :class="compact ? 'section-book-compact' : 'section-padding'">
|
|
<div class="container-content">
|
|
<div :class="['grid items-center', compact ? 'gap-5 md:grid-cols-[auto_1fr]' : 'gap-12 md:grid-cols-2']">
|
|
<!-- Book cover -->
|
|
<UiScrollReveal>
|
|
<div class="book-cover-wrapper relative">
|
|
<div
|
|
:class="['book-cover-3d', compact && 'book-cover-3d--compact']"
|
|
:style="{ backgroundImage: `url(${content?.book.coverImage})` }"
|
|
role="img"
|
|
:aria-label="content?.book.coverAlt"
|
|
/>
|
|
</div>
|
|
</UiScrollReveal>
|
|
|
|
<!-- Content + CTAs -->
|
|
<div>
|
|
<UiScrollReveal>
|
|
<p :class="['font-mono tracking-widest text-accent uppercase', compact ? 'text-xs mb-1' : 'text-sm mb-2']">
|
|
{{ content?.book.kicker }}
|
|
</p>
|
|
<h2 :class="['book-heading font-display font-bold tracking-tight text-white', compact && 'book-heading--compact']">
|
|
<template v-if="compact">
|
|
<span class="block">{{ titleLine1 }}</span>
|
|
<span class="block" style="color: hsl(var(--color-text) / 0.55)">{{ titleLine2 }}</span>
|
|
</template>
|
|
<template v-else>{{ content?.book.title }}</template>
|
|
</h2>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="100">
|
|
<p :class="['leading-relaxed', compact ? 'mt-2 text-sm' : 'mt-4 text-lg text-white/60']"
|
|
:style="compact ? 'color: hsl(var(--color-text-muted)); font-size: 0.85rem' : ''">
|
|
{{ content?.book.description }}
|
|
</p>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="200">
|
|
<BookActions
|
|
:show-chapters="showChapters"
|
|
@open-player="$emit('open-player')"
|
|
@open-pdf="$emit('open-pdf')"
|
|
/>
|
|
</UiScrollReveal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
showChapters?: boolean
|
|
compact?: boolean
|
|
}>(), {
|
|
showChapters: true,
|
|
compact: false,
|
|
})
|
|
|
|
defineEmits<{
|
|
'open-player': []
|
|
'open-pdf': []
|
|
}>()
|
|
|
|
const { data: content } = await usePageContent('home')
|
|
|
|
const titleParts = computed(() => {
|
|
const title = content.value?.book.title ?? ''
|
|
const idx = title.indexOf('—')
|
|
if (idx === -1) return [title, '']
|
|
return [title.slice(0, idx).trim(), '— ' + title.slice(idx + 1).trim()]
|
|
})
|
|
const titleLine1 = computed(() => titleParts.value[0])
|
|
const titleLine2 = computed(() => titleParts.value[1])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.section-book-compact {
|
|
padding: 0;
|
|
}
|
|
|
|
.book-cover-wrapper {
|
|
perspective: 800px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.book-cover-3d {
|
|
width: 100%;
|
|
max-width: 360px;
|
|
aspect-ratio: 3 / 4;
|
|
background-size: 200% auto;
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
border: 1px solid hsl(var(--color-text) / 0.1);
|
|
box-shadow:
|
|
0 12px 40px hsl(var(--color-text) / 0.15),
|
|
0 0 0 1px hsl(var(--color-text) / 0.08);
|
|
transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
box-shadow 0.5s ease;
|
|
}
|
|
|
|
.book-cover-3d--compact {
|
|
max-width: 120px;
|
|
}
|
|
|
|
.book-cover-3d:hover {
|
|
transform: rotateY(-8deg) rotateX(3deg) scale(1.02);
|
|
box-shadow:
|
|
12px 16px 48px hsl(var(--color-text) / 0.2),
|
|
0 0 0 1px hsl(var(--color-primary) / 0.2);
|
|
}
|
|
|
|
|
|
.book-heading {
|
|
font-size: clamp(1.625rem, 4vw, 2.125rem);
|
|
}
|
|
|
|
.book-heading--compact {
|
|
font-size: clamp(0.95rem, 2.5vw, 1.15rem);
|
|
line-height: 1.35;
|
|
}
|
|
</style>
|