Feat: Home récupère subtitle et CTA depuis les données Kirby
- Renommage des champs blueprint : cta_text → ctaText, cta_link → ctaLink - Template home.json.php : expose ctaText et ctaPath (id de page Kirby) - Home.svelte : suppression des traductions en dur, lecture de data.hero Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
51eee10c5a
commit
50f81269ac
3 changed files with 8 additions and 23 deletions
|
|
@ -23,13 +23,13 @@ tabs:
|
||||||
type: writer
|
type: writer
|
||||||
marks: false
|
marks: false
|
||||||
nodes: false
|
nodes: false
|
||||||
cta_text:
|
ctaText:
|
||||||
width: 1/2
|
width: 1/2
|
||||||
label: Texte du bouton CTA
|
label: Texte du bouton CTA
|
||||||
help: CTA pour call to action
|
help: CTA pour call to action
|
||||||
type: text
|
type: text
|
||||||
default: Explorer
|
default: Explorer
|
||||||
cta_link:
|
ctaLink:
|
||||||
width: 1/2
|
width: 1/2
|
||||||
label: Lien du bouton CTA
|
label: Lien du bouton CTA
|
||||||
help: CTA pour call to action
|
help: CTA pour call to action
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ $specificData = [
|
||||||
'title' => $page->hero_title()->value(),
|
'title' => $page->hero_title()->value(),
|
||||||
'title_highlight' => $page->hero_title_highlight()->value(),
|
'title_highlight' => $page->hero_title_highlight()->value(),
|
||||||
'subtitle' => $page->hero_subtitle()->value(),
|
'subtitle' => $page->hero_subtitle()->value(),
|
||||||
'cta_text' => $page->hero_cta_text()->value(),
|
'ctaText' => $page->ctaText()->value(),
|
||||||
'cta_link' => $page->hero_cta_link()->toPage()?->url() ?? '#',
|
'ctaPath' => $page->ctaLink()->toPage()?->id() ?? '#',
|
||||||
'image' => $page->hero_image()->toFile()?->url()
|
'image' => $page->hero_image()->toFile()?->url()
|
||||||
],
|
],
|
||||||
'background_video' => $page->background_video()->toFile()?->url(),
|
'background_video' => $page->background_video()->toFile()?->url(),
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
import { locale } from '@state/locale.svelte'
|
import { locale } from '@state/locale.svelte'
|
||||||
import { navigateTo } from '@state/router'
|
import { navigateTo } from '@router'
|
||||||
|
|
||||||
let { data } = $props()
|
let { data } = $props()
|
||||||
|
|
||||||
const currentLang = $derived(locale.current)
|
const currentLang = $derived(locale.current)
|
||||||
|
|
||||||
const translations = {
|
|
||||||
homeText: {
|
|
||||||
fr: "World Game crée des expériences gamifiées qui transforment l'engagement en résultats mesurables",
|
|
||||||
en: "World Game creates gamified experiences that transform engagement into measurable results"
|
|
||||||
},
|
|
||||||
explore: {
|
|
||||||
fr: "EXPLORER",
|
|
||||||
en: "EXPLORE"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function t(key) {
|
|
||||||
return translations[key]?.[currentLang] || translations[key]?.fr || ''
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const playVideo = async (videoId) => {
|
const playVideo = async (videoId) => {
|
||||||
const video = document.getElementById(videoId)
|
const video = document.getElementById(videoId)
|
||||||
|
|
@ -55,7 +40,7 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
function handleExplore() {
|
function handleExplore() {
|
||||||
navigateTo('/portfolio')
|
navigateTo('/' + data.hero.ctaPath)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -125,7 +110,7 @@
|
||||||
style="z-index: 5; justify-self: center; margin-top: 6vmax;"
|
style="z-index: 5; justify-self: center; margin-top: 6vmax;"
|
||||||
>
|
>
|
||||||
<h2 class="font-face-danzza-light home-subtitle">
|
<h2 class="font-face-danzza-light home-subtitle">
|
||||||
{t('homeText')}
|
{data.hero.subtitle}
|
||||||
</h2>
|
</h2>
|
||||||
<div
|
<div
|
||||||
class="clickable button"
|
class="clickable button"
|
||||||
|
|
@ -137,7 +122,7 @@
|
||||||
>
|
>
|
||||||
<div class="earth-icon clickable-filter-black"></div>
|
<div class="earth-icon clickable-filter-black"></div>
|
||||||
<p class="clickable" style="font-family: Terminal; font-size: 1.2em;">
|
<p class="clickable" style="font-family: Terminal; font-size: 1.2em;">
|
||||||
{t('explore')}
|
{data.hero.ctaText}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue