diff --git a/public/img/formations-en-ligne/e1.png b/public/img/formations-en-ligne/e1.png new file mode 100644 index 000000000..05bb9e134 Binary files /dev/null and b/public/img/formations-en-ligne/e1.png differ diff --git a/public/img/formations-en-ligne/e2.png b/public/img/formations-en-ligne/e2.png new file mode 100644 index 000000000..8368adff0 Binary files /dev/null and b/public/img/formations-en-ligne/e2.png differ diff --git a/public/img/formations-en-ligne/e3.png b/public/img/formations-en-ligne/e3.png new file mode 100644 index 000000000..a0452f811 Binary files /dev/null and b/public/img/formations-en-ligne/e3.png differ diff --git a/public/img/formations-en-ligne/e4.png b/public/img/formations-en-ligne/e4.png new file mode 100644 index 000000000..392394034 Binary files /dev/null and b/public/img/formations-en-ligne/e4.png differ diff --git a/public/img/formations-en-ligne/e5.png b/public/img/formations-en-ligne/e5.png new file mode 100644 index 000000000..5dfd5823c Binary files /dev/null and b/public/img/formations-en-ligne/e5.png differ diff --git a/public/img/formations-en-ligne/e6.png b/public/img/formations-en-ligne/e6.png new file mode 100644 index 000000000..2056f95db Binary files /dev/null and b/public/img/formations-en-ligne/e6.png differ diff --git a/public/img/formations-en-ligne/e7.png b/public/img/formations-en-ligne/e7.png new file mode 100644 index 000000000..683eaac89 Binary files /dev/null and b/public/img/formations-en-ligne/e7.png differ diff --git a/src/app/communes/formation-en-ligne/page.tsx b/src/app/communes/formation-en-ligne/page.tsx index 0ffca2ca9..03cc1f6b2 100644 --- a/src/app/communes/formation-en-ligne/page.tsx +++ b/src/app/communes/formation-en-ligne/page.tsx @@ -1,64 +1,66 @@ import CardWrapper from '@/components/CardWrapper' import EventCard from '@/components/Events/EventCard' import Section from '@/components/Section' -import SectionTilesList from '@/components/SectionTilesList' +import VideoMiniature from '@/components/VideoMiniature' import { getBalEvents } from '@/lib/api-bal-admin' import { getUpcomingAndPassedEvents, mapEvents } from '@/utils/events' const videoFormations = [ { title: 'Épisode 1 : Introduction', - picto: '/img/picto-fr/video.svg', + image: '/img/formations-en-ligne/e1.png', link: { href: 'https://peertube.adresse.data.gouv.fr/w/toyKNe4rKyVD7mUovsWLKd', target: '_blank', }, - tags: ['Base adresse locale'], }, { title: 'Épisode 2 : Création', - picto: '/img/picto-fr/video.svg', + image: '/img/formations-en-ligne/e2.png', link: { href: 'https://peertube.adresse.data.gouv.fr/w/aNEtMh7fJCzsAPoGkwvFSg', target: '_blank', }, - tags: ['Base adresse locale'], }, { title: 'Épisode 3 : Voies', - picto: '/img/picto-fr/video.svg', + image: '/img/formations-en-ligne/e3.png', link: { href: 'https://peertube.adresse.data.gouv.fr/w/rgksUPigy8KWnmx8WFELDN', target: '_blank', }, - tags: ['Base adresse locale'], }, { title: 'Épisode 4 : Numéros', - picto: '/img/picto-fr/video.svg', + image: '/img/formations-en-ligne/e4.png', link: { href: 'https://peertube.adresse.data.gouv.fr/w/un73nNp4kQofNkhT38D6YQ', target: '_blank', }, - tags: ['Base adresse locale'], }, { title: 'Épisode 5 : Lieux-dits', - picto: '/img/picto-fr/video.svg', + image: '/img/formations-en-ligne/e5.png', link: { href: 'https://peertube.adresse.data.gouv.fr/w/ttnYNTcXtcubCHQX8kHdGt', target: '_blank', }, - tags: ['Base adresse locale'], }, { title: 'Épisode 6 : Publication', - picto: '/img/picto-fr/video.svg', + image: '/img/formations-en-ligne/e6.png', link: { href: 'https://peertube.adresse.data.gouv.fr/w/4uU6AHpTe7coPyhskBSANB', target: '_blank', }, - tags: ['Base adresse locale'], + }, + { + title: 'Épisode 7 : Récupération', + image: '/img/formations-en-ligne/e7.png', + link: { + href: 'https://peertube.adresse.data.gouv.fr/w/fdD1tzvPfktHkkVK8p7h5D', + target: '_blank', + }, }, ] @@ -81,7 +83,13 @@ export default async function FormationEnLignePage() { ))} - +
+ + {videoFormations.map((video, index) => ( + + ))} + +
) } diff --git a/src/components/Events/EventCard.styles.ts b/src/components/Events/EventCard.styles.ts index 1ea159042..127d1e025 100644 --- a/src/components/Events/EventCard.styles.ts +++ b/src/components/Events/EventCard.styles.ts @@ -22,4 +22,10 @@ export const StyledEventCard = styled.div<{ isPassed?: boolean }>` h3 { font-size: 1.5rem; } + + .fr-btn { + &::after { + display: none; + } + } ` diff --git a/src/components/VideoMiniature/VideoMiniature.styles.ts b/src/components/VideoMiniature/VideoMiniature.styles.ts new file mode 100644 index 000000000..b910f9617 --- /dev/null +++ b/src/components/VideoMiniature/VideoMiniature.styles.ts @@ -0,0 +1,16 @@ +'use client' + +import styled from 'styled-components' + +export const StyledWrapper = styled.a` + margin: 10px; + h3 { + font-size: 0.9rem; + font-weight: bold; + margin: 0; + } + + &::after { + display: none; + } +` diff --git a/src/components/VideoMiniature/VideoMiniature.tsx b/src/components/VideoMiniature/VideoMiniature.tsx new file mode 100644 index 000000000..3a6200491 --- /dev/null +++ b/src/components/VideoMiniature/VideoMiniature.tsx @@ -0,0 +1,20 @@ +import ResponsiveImage from '../ResponsiveImage' +import { StyledWrapper } from './VideoMiniature.styles' + +interface VideoMiniatureProps { + title: string + image: string + link: { + href: string + target: string + } +} + +export default function VideoMiniature({ title, image, link }: VideoMiniatureProps) { + return ( + + +

{title}

+
+ ) +} diff --git a/src/components/VideoMiniature/index.tsx b/src/components/VideoMiniature/index.tsx new file mode 100644 index 000000000..b2a24a4ca --- /dev/null +++ b/src/components/VideoMiniature/index.tsx @@ -0,0 +1 @@ +export { default } from './VideoMiniature'