Skip to content

Commit e73e4e7

Browse files
feat: add elections page (#873)
<img width="2560" height="2315" alt="image" src="https://github.com/user-attachments/assets/1b6ca0b5-33ba-4cc8-8e73-f881784bf60e" /> <img width="394" height="3000" alt="Capture d’écran 2026-01-15 à 14 28 01" src="https://github.com/user-attachments/assets/dc552a43-6f34-4383-a5a7-24de3c524308" /> --------- Co-authored-by: Nicolas KEMPF <[email protected]>
1 parent a047f62 commit e73e4e7

File tree

8 files changed

+247
-13
lines changed

8 files changed

+247
-13
lines changed
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<NuxtLink
3+
:to="to"
4+
class="flex flex-col md:flex-row gap-2.5 p-4 rounded-sm border border-gray-silver hover:border-gray-medium transition-colors bg-white bg-none"
5+
>
6+
<img
7+
:src="image"
8+
alt=""
9+
class="w-full md:w-[225px] md:h-[130px] object-cover object-left-bottom flex-shrink-0 border border-gray-default rounded-lg"
10+
>
11+
<div class="flex-1">
12+
<h3 class="font-bold text-base leading-normal mb-2">
13+
{{ title }}
14+
</h3>
15+
<p class="font-normal text-sm leading-normal">
16+
{{ description }}
17+
</p>
18+
</div>
19+
</NuxtLink>
20+
</template>
21+
22+
<script setup lang="ts">
23+
defineProps<{
24+
title: string
25+
description: string
26+
to: string
27+
image: string
28+
}>()
29+
</script>

components/Onboarding/OnboardingHero.vue

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,38 @@
33
class="py-16"
44
:class="bgColor"
55
>
6-
<div class="container max-w-3xl text-center text-white">
7-
<h1 class="text-white text-3xl md:text-4xl lg:text-4.5xl font-extrabold mb-4">
8-
<slot name="title" />
9-
</h1>
10-
<p
11-
v-if="$slots.subtitle"
12-
class="text-lg md:text-xl text-white/80 mb-8 italic font-spectral"
13-
>
14-
<slot name="subtitle" />
15-
</p>
6+
<div
7+
class="container text-white"
8+
:class="image ? 'flex flex-col md:flex-row items-center gap-12' : 'max-w-3xl text-center'"
9+
>
1610
<div
17-
v-if="$slots.actions"
18-
class="flex flex-wrap justify-center gap-4"
11+
v-if="image"
12+
class="flex-shrink-0"
1913
>
20-
<slot name="actions" />
14+
<img
15+
:src="image"
16+
:alt="imageAlt || ''"
17+
:aria-hidden="!imageAlt"
18+
class="w-80"
19+
>
20+
</div>
21+
<div :class="image ? 'flex-1' : ''">
22+
<h1 class="text-white text-3xl md:text-4xl lg:text-4.5xl font-extrabold mb-4">
23+
<slot name="title" />
24+
</h1>
25+
<p
26+
v-if="$slots.subtitle"
27+
class="font-spectral font-normal italic text-2xl leading-8 text-white/80 mb-8"
28+
>
29+
<slot name="subtitle" />
30+
</p>
31+
<div
32+
v-if="$slots.actions"
33+
class="flex flex-wrap gap-4"
34+
:class="{ 'justify-center': !image }"
35+
>
36+
<slot name="actions" />
37+
</div>
2138
</div>
2239
</div>
2340
</section>
@@ -26,6 +43,8 @@
2643
<script setup lang="ts">
2744
const props = defineProps<{
2845
color?: 'primary' | 'green' | 'brown' | 'dark'
46+
image?: string
47+
imageAlt?: string
2948
}>()
3049
3150
const bgColor = computed(() => ({

pages/elections.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<div>
3+
<OnboardingHero
4+
color="primary"
5+
image="/nuxt_images/elections.svg"
6+
:image-alt="$t('Illustration élections')"
7+
>
8+
<template #title>
9+
{{ $t('Les données relatives aux élections') }}
10+
</template>
11+
<template #subtitle>
12+
{{ $t('Cette rubrique rassemble les principaux jeux de données par type de scrutin : municipales, législatives, présidentielles, etc.') }}
13+
</template>
14+
</OnboardingHero>
15+
16+
<OnboardingSection>
17+
<div class="max-w-4xl mb-8">
18+
<p class="text-sm font-light leading-normal mb-4">
19+
{{ $t('Retrouvez l\'ensemble des données électorales publiées par l\'État et les organisations compétentes, pour vous permettre de :') }}
20+
</p>
21+
<ul class="list-disc pl-5 space-y-2 mb-8 text-sm font-light leading-normal">
22+
<li>
23+
<strong class="font-bold">{{ $t('Analyser les tendances par type d\'élection') }}</strong>{{ $t(', pour vos projets, articles ou recherches') }}
24+
</li>
25+
<li>
26+
<strong class="font-bold">{{ $t('Croiser les données électorales') }}</strong>{{ $t(' avec d\'autres jeux de données territoriales') }}
27+
</li>
28+
<li>
29+
<strong class="font-bold">{{ $t('Suggérer l\'ouverture de données') }}</strong>{{ $t(' associées à des thématiques') }}
30+
</li>
31+
</ul>
32+
33+
<p class="text-sm font-light leading-normal">
34+
{{ $t('Sélectionnez un scrutin pour accéder aux jeux de données disponibles.') }}
35+
</p>
36+
</div>
37+
38+
<div class="space-y-4">
39+
<ElectionCard
40+
v-for="election in elections"
41+
:key="election.slug"
42+
:title="election.title"
43+
:description="election.description"
44+
:to="election.to"
45+
:image="election.image"
46+
/>
47+
</div>
48+
</OnboardingSection>
49+
</div>
50+
</template>
51+
52+
<script setup lang="ts">
53+
import ElectionCard from '~/components/Elections/ElectionCard.vue'
54+
55+
const config = useRuntimeConfig()
56+
const { t } = useTranslation()
57+
58+
useSeoMeta({
59+
title: t('Données élections - {site}', { site: config.public.title }),
60+
robots: 'noindex, nofollow',
61+
})
62+
63+
const elections = [
64+
{
65+
slug: 'municipales',
66+
title: t('Données des élections municipales'),
67+
description: t('Cette page rassemble toutes les données relatives aux élections municipales : résultats par bureau de vote, informations sur les élus et toutes les données utiles permettant de comprendre les enjeux propres aux communes.'),
68+
to: '/posts/jeux-de-donnees-liees-aux-elections-municipales',
69+
image: '/nuxt_images/municipales.png',
70+
},
71+
{
72+
slug: 'legislatives',
73+
title: t('Données des élections législatives'),
74+
description: t('Cette page rassemble l\'ensemble des données relatives aux élections législatives : résultats par circonscription, nuances politiques et toutes les données permettant de saisir les enjeux propres à la représentation des territoires à l\'Assemblée nationale.'),
75+
to: '/posts/donnees-liees-aux-elections-legislatives',
76+
image: '/nuxt_images/legislative.png',
77+
},
78+
{
79+
slug: 'presidentielles',
80+
title: t('Données des élections présidentielles'),
81+
description: t('Cette page permet d\'accéder aux différentes données des élections présidentielles : résultats par tour, séries historiques, etc., ainsi que les données pertinentes pour analyser les dynamiques politiques à l\'échelle nationale.'),
82+
to: '/posts/donnees-liees-aux-elections-presidentielles',
83+
image: '/nuxt_images/presidentielles.png',
84+
},
85+
{
86+
slug: 'autres',
87+
title: t('Autres données des élections'),
88+
description: t('Cette page rassemble les résultats des autres scrutins (élections sénatoriales, élections européennes...).'),
89+
to: '/posts/autres-donnees-relatives-aux-elections',
90+
image: '/nuxt_images/autres.png',
91+
},
92+
]
93+
</script>

public/nuxt_images/autres.png

357 KB
Loading

0 commit comments

Comments
 (0)