app/components/Iframe.tsx

@@ -10,12 +10,14 @@ type IframeProps = {
 
 export default function Iframe(props: IframeProps) {
 	return (
+		<div class={clsx("max-w-full pointer-events-none w-full")}>
 			<iframe
 				src={props.src}
-			class={clsx("max-w-full pointer-events-none", props.class)}
 				width={props.width}
 				height={props.height}
 				title={props.title}
+				class={props.class}
 			/>
+		</div>
 	);
 }

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

@@ -4,6 +4,8 @@ description: Synthèse et explications des attentes relatives à l'activité typ
 tags: [DWWM]
 ---
 
+import QuickLinks from "@/components/QuickLinks";
+
 ## 📚 Références
 
 - REAC _(mise à jour du 02/07/2024)_, pages 15 et 16
@@ -17,7 +19,30 @@ Voyons un peu plus en détail ce qui est attendu pour chacune de ces compétence
 
 Elle est divisée en 4 **compétences professionnelles** _(CP)_ :
 
-- **CP 1** : Installer et configurer son environnement de travail en fonction du projet web ou web mobile
+<QuickLinks>
-- **CP 2** : Maquetter des interfaces utilisateur web ou web mobile
+  <QuickLinks.QuickLink
-- **CP 3** : Réaliser des interfaces utilisateur statiques web ou web mobile
+    title="CP 1"
-- **CP 4** : Développer la partie dynamique des interfaces utilisateur web ou web mobile
+    href="at1/cp1"
+    description="Installer et configurer son environnement de travail en fonction du projet web ou web mobile"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 2"
+    href="at1/cp2"
+    description="Maquetter des interfaces utilisateur web ou web mobile"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 3"
+    href="at1/cp3"
+    description="Réaliser des interfaces utilisateur statiques web ou web mobile"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 4"
+    href="at1/cp4"
+    description="Développer la partie dynamique des interfaces utilisateur web ou web mobile"
+    icon="presets"
+  />
+</QuickLinks>
+

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

@@ -17,7 +17,7 @@ import Iframe from "@/components/Iframe";
 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" class="mx-auto rounded-md" />
 
 ... Blague à part, on entend par cette compétence professionnelle la réalisation de maquettes au travers des différentes étapes de maquettage :
 

app/pages/certifications/dwwm/at2/+Page.mdx

@@ -4,6 +4,8 @@ description: Synthèse et explications des attentes relatives à l'activité typ
 tags: [DWWM]
 ---
 
+import QuickLinks from "@/components/QuickLinks";
+
 ## 📚 Références
 
 - REAC _(mise à jour du 02/07/2024)_, pages 15 et 16
@@ -17,7 +19,29 @@ Voyons un peu plus en détail ce qui est attendu pour chacune de ces compétence
 
 Elle est divisée en 4 **compétences professionnelles** _(CP)_ :
 
-- **CP 5** : Mettre en place une base de données relationnelle
+<QuickLinks>
-- **CP 6** : Développer des composants d'accès aux données SQL et NoSQL
+  <QuickLinks.QuickLink
-- **CP 7** : Développer des composants métier coté serveur
+    title="CP 5"
-- **CP 8** : Documenter le déploiement d'une application dynamique web ou web mobile
+    href="at2/cp5"
+    description="Mettre en place une base de données relationnelle"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 6"
+    href="at2/cp6"
+    description="Développer des composants d'accès aux données SQL et NoSQL"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 7"
+    href="at2/cp7"
+    description="Développer des composants métier coté serveur"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 8"
+    href="at2/cp8"
+    description="Documenter le déploiement d'une application dynamique web ou web mobile"
+    icon="presets"
+  />
+</QuickLinks>