Update the Documentation page

src/app/documentation/documentation.component.css

@@ -1,10 +1,23 @@
+.documentation {
+    display: flex;
+    flex-direction: column;
+    padding: 8rem;
 
-.love-hugo {
+    .title {
+        font-size: 3.75rem;
+        text-align: center;
+    }
+
+    .how_it_works, .code_execution, .code_transfert {
         display: flex;
-  flex-direction: row;
-  align-items: center;
+        flex-direction: column;
 
+        .question {
             font-size: 3rem;
-  color: pink;
-  text-align: center;
+        }
+
+        .text {
+            font-size: 1.5rem;
+        }
+    }
 }

src/app/documentation/documentation.component.html

@@ -1 +1,15 @@
-<span class="love-hugo">Ceci est la page Documentation réclamé par Hugo le 21 Septembre 2023. Elle contient une documentation inconnue à ce jour. Cependant, elle est très importante pour le bon fonctionnement du site et la compréhension de toutes les fonctionnalités ajoutées par l'équipe Sandkasten</span>
+<div class="documentation">
+	<h1 class="title">Documentation</h1>
+	<div class="how_it_works">
+		<h2 class="question">Comment fonctionne Sandkasten ?</h2>
+		<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in sagittis quam. Suspendisse eget posuere ligula, ut pretium sapien. Nulla vitae aliquam risus. Nulla facilisi. Cras sodales placerat elit, at ultricies dolor fringilla eget. Nullam sodales eros eget nisl dignissim, vel accumsan ligula euismod. Praesent congue placerat ullamcorper. Mauris at ante porttitor, maximus magna at, convallis velit.</span>
+	</div>
+	<div class="code_execution">
+		<h2 class="question">Exécution du code :</h2>
+		<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in sagittis quam. Suspendisse eget posuere ligula, ut pretium sapien. Nulla vitae aliquam risus. Nulla facilisi. Cras sodales placerat elit, at ultricies dolor fringilla eget. Nullam sodales eros eget nisl dignissim, vel accumsan ligula euismod. Praesent congue placerat ullamcorper. Mauris at ante porttitor, maximus magna at, convallis velit.</span>
+	</div>
+	<div class="code_transfert">
+		<h2 class="question">Transmission du code :</h2>
+		<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in sagittis quam. Suspendisse eget posuere ligula, ut pretium sapien. Nulla vitae aliquam risus. Nulla facilisi. Cras sodales placerat elit, at ultricies dolor fringilla eget. Nullam sodales eros eget nisl dignissim, vel accumsan ligula euismod. Praesent congue placerat ullamcorper. Mauris at ante porttitor, maximus magna at, convallis velit.</span>
+	</div>
+</div>