From 94e957c1cb7f3e06468b0574d7ff939c8fdbc3e6 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Mon, 21 Apr 2025 13:12:20 +0200
Subject: [PATCH] style: Update Iframe component to default export

---
 app/components/Iframe.tsx                     |  2 +-
 .../dwwm/at1/cp2/{page.md => +Page.mdx}       | 29 +++++++++----------
 2 files changed, 14 insertions(+), 17 deletions(-)
 rename app/pages/certifications/dwwm/at1/cp2/{page.md => +Page.mdx} (84%)

diff --git a/app/components/Iframe.tsx b/app/components/Iframe.tsx
index fcd070c..e7a91ae 100644
--- a/app/components/Iframe.tsx
+++ b/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}
diff --git a/app/pages/certifications/dwwm/at1/cp2/page.md b/app/pages/certifications/dwwm/at1/cp2/+Page.mdx
similarity index 84%
rename from app/pages/certifications/dwwm/at1/cp2/page.md
rename to app/pages/certifications/dwwm/at1/cp2/+Page.mdx
index 6ffa438..9f566ed 100644
--- a/app/pages/certifications/dwwm/at1/cp2/page.md
+++ b/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,18 +29,16 @@ 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 !
 
-Pas de panique !
+  Tu n'as pas besoin d'être un webdesigner pour réaliser des maquettes.  
+  Évidemment, si tu as des compétences en design, c'est un plus car en général les développeurs ne sont pas tous réputés pour être de bons designers... 😅
 
-Tu n'as pas besoin d'être un webdesigner pour réaliser des maquettes.  
-Évidemment, si tu as des compétences en design, c'est un plus car en général les développeurs ne sont pas tous réputés pour être de bons designers... 😅
+  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é**.
 
-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 %}
+  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>
 
 ## ➕ 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 😘.