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/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 😘.