skycel
dc3456bb1b
Landing page with animated tagline, dual CTA (adventure/express), and HeroSelector component (3 heroes: Recruiter, Client, Developer) with full keyboard accessibility (radiogroup, arrow nav, Enter confirm). Staggered CSS animations respecting prefers-reduced-motion. Bilingual FR/EN. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<template>
|
|
<div class="hero-selector">
|
|
<h2 class="text-2xl md:text-3xl font-narrative text-sky-text text-center mb-8">
|
|
{{ $t('hero.question') }}
|
|
</h2>
|
|
|
|
<div
|
|
role="radiogroup"
|
|
:aria-label="$t('hero.select_label')"
|
|
class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl mx-auto"
|
|
@keydown="handleKeydown"
|
|
>
|
|
<button
|
|
v-for="(hero, index) in heroes"
|
|
:key="hero.id"
|
|
:ref="el => { if (el) cardRefs[index] = el as HTMLElement }"
|
|
role="radio"
|
|
:aria-checked="modelValue === hero.id"
|
|
:tabindex="modelValue === hero.id || (!modelValue && index === 0) ? 0 : -1"
|
|
:class="[
|
|
'p-6 rounded-xl border-2 transition-all duration-200 text-left',
|
|
'focus:outline-none focus:ring-2 focus:ring-sky-accent focus:ring-offset-2 focus:ring-offset-sky-dark',
|
|
modelValue === hero.id
|
|
? 'border-sky-accent bg-sky-accent/5 scale-105'
|
|
: 'border-sky-text/20 hover:border-sky-text/40',
|
|
]"
|
|
@click="selectHero(hero.id)"
|
|
>
|
|
<div class="text-4xl mb-4">{{ hero.icon }}</div>
|
|
<h3 class="text-xl font-ui font-semibold text-sky-text mb-2">
|
|
{{ $t(hero.nameKey) }}
|
|
</h3>
|
|
<p class="text-sky-text/70 font-narrative text-sm">
|
|
{{ $t(hero.descriptionKey) }}
|
|
</p>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex justify-center gap-4 mt-8">
|
|
<button
|
|
class="px-6 py-2 text-sky-text/70 hover:text-sky-text font-ui transition-colors"
|
|
@click="$emit('back')"
|
|
>
|
|
{{ $t('common.back') }}
|
|
</button>
|
|
<button
|
|
:disabled="!modelValue"
|
|
:class="[
|
|
'px-8 py-3 rounded-lg font-ui font-semibold transition-all',
|
|
modelValue
|
|
? 'bg-sky-accent text-sky-dark hover:opacity-90'
|
|
: 'bg-sky-text/20 text-sky-text/50 cursor-not-allowed',
|
|
]"
|
|
@click="confirmSelection"
|
|
>
|
|
{{ $t('common.continue') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
export type HeroType = 'recruteur' | 'client' | 'dev'
|
|
|
|
interface Hero {
|
|
id: HeroType
|
|
nameKey: string
|
|
descriptionKey: string
|
|
icon: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
modelValue: HeroType | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: HeroType]
|
|
'confirm': []
|
|
'back': []
|
|
}>()
|
|
|
|
const cardRefs = ref<HTMLElement[]>([])
|
|
|
|
const heroes: Hero[] = [
|
|
{ id: 'recruteur', nameKey: 'hero.recruteur.name', descriptionKey: 'hero.recruteur.description', icon: '👔' },
|
|
{ id: 'client', nameKey: 'hero.client.name', descriptionKey: 'hero.client.description', icon: '💼' },
|
|
{ id: 'dev', nameKey: 'hero.dev.name', descriptionKey: 'hero.dev.description', icon: '💻' },
|
|
]
|
|
|
|
const selectHero = (id: HeroType) => {
|
|
emit('update:modelValue', id)
|
|
}
|
|
|
|
const confirmSelection = () => {
|
|
if (props.modelValue) {
|
|
emit('confirm')
|
|
}
|
|
}
|
|
|
|
const handleKeydown = (e: KeyboardEvent) => {
|
|
const currentIndex = heroes.findIndex(h => h.id === props.modelValue)
|
|
let newIndex = currentIndex
|
|
|
|
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
|
e.preventDefault()
|
|
newIndex = (currentIndex + 1) % heroes.length
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
|
e.preventDefault()
|
|
newIndex = (currentIndex - 1 + heroes.length) % heroes.length
|
|
} else if (e.key === 'Enter') {
|
|
confirmSelection()
|
|
return
|
|
}
|
|
|
|
if (newIndex !== currentIndex) {
|
|
emit('update:modelValue', heroes[newIndex].id)
|
|
nextTick(() => cardRefs.value[newIndex]?.focus())
|
|
}
|
|
}
|
|
</script>
|