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'