style: Update Iframe component to default export

app/components/Iframe.tsx

@@ -8,7 +8,7 @@ type IframeProps = {
 	class?: string;
 };
 
-export function Iframe(props: IframeProps) {
+export default function Iframe(props: IframeProps) {
 	return (
 		<iframe
 			src={props.src}

app/pages/certifications/dwwm/at1/cp1/+Page.mdx

@@ -4,6 +4,8 @@ description: Synthèse et explications des attentes relatives à la compétence
 tags: [DWWM, Environnement de développement]
 ---
 
+import Callout from "@/components/Callout";
+
 ## 📚 Références
 
 - REAC _(mise à jour du 02/07/2024)_, pages 15 et 16
@@ -32,32 +34,24 @@ Mais heureusement, tu dois uniquement expliquer comment installer et configurer
 
 Si tu fais un projet Laravel et React, pas besoin d'expliquer comment installer et configurer Ruby et Java, par exemple 😉
 
-{% callout type="note" title="Utilisation de XAMPP, WAMP, MAMP, LAMP, Laragon etc." %}
+<Callout type="note" title="Utilisation de XAMPP, WAMP, MAMP, LAMP, Laragon etc.">
-
   Si tu utilises un logiciel comme XAMPP, WAMP, MAMP, LAMP, Laragal etc., tu as évidemment le droit de le mentionner dans ta présentation et dossier de projet.
 
   Toutefois, il est préférable que tu saches expliquer comment installer et configurer les éléments nécessaires de manières individuelles.
-
+</Callout>
-{% /callout %}
 
 ## ➕ Informations complémentaires
 
-{% callout type="warning" title="Versions des outils et dépendances" %}
+<Callout type="warning" title="Versions des outils et dépendances">
-
   Même si le choix des outils que tu utilises est libre, il est important de préciser les versions que tu as utilisées pour ton projet.
 
   Étant donné que chaque version corrige probablement diverses failles de sécurité et/ou ajoute des fonctionnalités, c'est le bon moment pour montrer que tu prends la veille technologique au sérieux.
-
+</Callout>
-{% /callout %}
-
-## 🛠️ Ressources conseillées
-
-_En cours de rédaction..._
 
 ## 🎯 Critères d'évaluation
 
 - Les outils de développement nécessaires sont installés et configurés
 - Les outils de gestion de versions et de collaboration sont installés
-- Les conteneurs implémentes les services requis pour l'environnement de développement
+- Les conteneurs implémentent les services requis pour l'environnement de développement
-- La documentation technique de l'environnement de travail est comprise, en langue française ou anglaise (niveau B1 CECRL pour l'anglais)
+- La documentation technique de l'environnement de travail est comprise, en langue française ou anglaise _(niveau B1 CECRL pour l'anglais)_
 - Le système de veille permet de suivre les évolutions technologies et les problématiques de sécurité en lien avec l'installation et la configuration d'un environnement de travail

app/pages/certifications/dwwm/at1/cp2/+Page.mdx

@@ -4,6 +4,9 @@ description: Synthèse et explications des attentes relatives à la compétence
 tags: [DWWM, Éco-conception, Accessibilité, SEO, Maquettage, UX, UI, Zoning, Wireframe, Prototypage, Design, Frontend]
 ---
 
+import Callout from "@/components/Callout";
+import Iframe from "@/components/Iframe";
+
 ## 📚 Références
 
 - REAC _(mise à jour du 02/07/2024)_, pages 17 et 18
@@ -14,7 +17,7 @@ tags: [DWWM, Éco-conception, Accessibilité, SEO, Maquettage, UX, UI, Zoning, W
 Pour cette compétence, tu vas devoir réaliser des maquettes d'interfaces utilisateur.  
 Mais par maquettage, on ne parle pas de maquette en papier ou en carton, mais bien de maquettes numériques.
 
-{% iframe src="https://giphy.com/embed/28n0C19zo9OOvHnYww" width="480" height="269" className="mx-auto" /%}
+<Iframe src="https://giphy.com/embed/28n0C19zo9OOvHnYww" width="480" height="269" className="mx-auto" />
 
 ... Blague à part, on entend par cette compétence professionnelle la réalisation de maquettes au travers des différentes étapes de maquettage :
 
@@ -26,8 +29,7 @@ Mais par maquettage, on ne parle pas de maquette en papier ou en carton, mais bi
 6. **Création de maquettes graphiques** : réaliser des maquettes graphiques en respectant la charte graphique et les wireframes
 7. **Mise en place du prototypage** : créer un prototype interactif pour tester l'application avant le développement
 
-{% callout type="question" title="Mais je ne suis pas webdesigner ! 😱" %}
+<Callout type="question" title="Mais je ne suis pas webdesigner ! 😱">
-
   Pas de panique !
 
   Tu n'as pas besoin d'être un webdesigner pour réaliser des maquettes.  
@@ -36,8 +38,7 @@ Tu n'as pas besoin d'être un webdesigner pour réaliser des maquettes.
   Ce qu'on attend de toi, c'est de respecter les consignes du cahier des charges tout en répondant au besoin du client et en faisant attention à l'**expérience utilisateur** et l'**accessibilité**.
 
   Si par ailleurs tu cherches un outil gratuit pour réaliser des maquettes, tu peux te tourner vers [Figma](https://www.figma.com/fr-fr/) qui permet non seulement de créer des **maquettes** et **prototypes**, mais aussi de **collaborer** avec d'autres personnes sur un même projet.
-
+</Callout>
-{% /callout %}
 
 ## ➕ Informations complémentaires
 
@@ -79,10 +80,6 @@ Au delà de l'impact environnemental, un site éco-conçu est souvent plus rapid
 
 Tu l'auras compris, que tu sois éco-convaincu ou non, c'est un point qui est en faveur de l'expérience utilisateur ! 🚀
 
-## 🛠️ Ressources conseillées
-
-_En cours de rédaction..._
-
 ## 🎯 Critères d'évaluation
 
 - Les maquettes sont réalisées conformément au dossier de conception, en langue française ou anglaise _(niveau B1 du CECRL pour l'anglais)_
@@ -92,12 +89,12 @@ _En cours de rédaction..._
 - L'enchainement des maquettes est formalisé par un schéma
 - La législation en vigueur est respectée, y compris celle relative à l'accessibilité
 
-## 🤯 Aller plus loin _(hors référentiel)_
+## 🤯 Aller plus loin (hors référentiel)
 
 Tu trouves que je n'ai pas assez parlé dans cette compétence ? Alors je vais te donner quelques pistes pour aller plus loin !
 
 Je vais parler un peu plus en détail de l'éco-conception, tant il s'agit d'un sujet important, relativement récent et souvent négligé _(ou incompris)_.  
-Le premier réflexe que l'on pourrait avoir en entendu ce terme, c'est crier au greenwashing et penser qu'on attend de nous de revenir dans les années 90 avec des sites tout moches et tout plats.
+Le premier réflexe que l'on pourrait avoir en entendant ce terme, c'est crier au greenwashing et penser qu'on attend de nous de revenir dans les années 90 avec des sites tout moches et tout plats.
 
 Alors... Greenwashing ? Tout dépend de qui en parle et avec quels arguments, mais la cause elle-même est noble et mérite d'être prise en compte.  
 Pour le côté "site tout moche", c'est effectivement une possibilité, mais uniquement si c'est un développeur PHP ou Java qui s'en occupe 😘.