Add the start of the landing page

.drone.yml

@@ -1,5 +1,4 @@
 kind: pipeline
-name:
 
 steps:
   - name: build

src/app/app.component.css

@@ -4,6 +4,4 @@ body{
   justify-content: space-between;
   height: 100vh;
   margin: 0;
-
-  background-color: yellow;
 }

src/app/documentation/documentation.component.html

@@ -1 +1 @@
-<span class="love-hugo">Ceci est la page Documentation réclamé par Hugo le 21 Septembre 2023. Elle contient une documentation inconnue à ce jour. Cepandant, 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>
+<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>

src/app/header/header.component.css

@@ -1,7 +1,6 @@
-
 .toolbar {
   background-color: #494b92;
-  padding:  .5rem 1rem;
+  padding:  0 1rem;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -26,22 +25,22 @@
   flex-direction: row;
   gap: 2rem;
 
-  align-items: center;
+  align-items: flex-end;
 }
 
 .left_part .menu a {
   color: white;
   text-decoration: none;
+  padding: .5rem .5rem 0;
 }
 
 .left_part .menu a:hover {
-  color: yellow;
+  background-color: #686AB7;
-  text-decoration: underline;
+  transition: background-color .3s ease;
 }
 
 .left_part .menu a.active {
-  color: yellow;
+  background-color: #686AB7;
-  text-decoration: underline;
 }
 
 .sandkasten-logo {

src/app/landing-page/landing-page.component.css

@@ -1,3 +1,20 @@
+.landing-block {
+    padding: 6rem;
+
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+}
+
+/* Upper block*/
+.hero-container {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+
+    padding: 2rem 1rem;
+    background: #EEEEEE;
+}
 
 .landing-links {
     width: 100%;
@@ -7,3 +24,38 @@
 button{
     font-size: 20px;
 }
+
+/* Animated Button*/
+.landing-links {
+    width: fit-content;
+    padding: 1rem;
+    height: fit-content;
+
+}
+
+.button-container {
+    position: relative;
+    margin: auto;
+
+    &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -1rem;
+        border-radius: 100px;
+        width: 2rem;
+        height: 2rem;
+        transform: translate(0%, -25%);
+        background: rgba(0, 0, 255, 0.5);
+        transition: width 0.3s ease;
+    }
+}
+
+.landing-links:hover .button-container:before {
+    width: calc(100% + 2rem);
+}
+
+.button-container .animated-button {
+    position: relative;
+    white-space: nowrap;
+}

src/app/landing-page/landing-page.component.html

@@ -1,11 +1,12 @@
 <div class="landing-block">
   <div class="hero-container">
     <h2 class="hero-title">Bienvenue sur Sandkasten !</h2>
-    <span class="hero-text">Sandkasten est un site vous permettant de tester votre code.</span>
+    <span class="hero-text">Vous voici arriver sur le meilleur site bac à sable de test de code !  Nous vous permettons de tester tous vos programmes sur vos langages préférés. grâce à l’éditeur Monaco et à notre gestion personalisée de l’éxecution sur des conteneurs, votre code devient complétement innoffencif et vous pouvez donc vous amusez autant que vous le souhaitez !</span>
   </div>
 
   <div class="landing-links">
-    <button (click)="onContinue()">Try it now !</button>
+    <div class="button-container">
+      <a class="animated-button" (click)="onContinue()">Try it now !</a>
+    </div>
   </div>
-
 </div>

src/styles.css

@@ -6,20 +6,20 @@ body {
   margin: 0;
 }
 
-button {
+/*button {*/
-    background-color: #1dd21d;
+/*    background-color: #1dd21d;*/
-    border-radius: 10px;
+/*    border-radius: 10px;*/
-    box-sizing: border-box;
+/*    box-sizing: border-box;*/
-    padding: 5px 10px;
+/*    padding: 5px 10px;*/
-    border: none;
+/*    border: none;*/
-    box-shadow: lightgray 3px 3px 7px;
+/*    box-shadow: lightgray 3px 3px 7px;*/
-    margin-right: 20px;
+/*    margin-right: 20px;*/
-    outline: none;
+/*    outline: none;*/
-    font-size: 20px;
+/*    font-size: 20px;*/
-    font-weight: 500;
+/*    font-weight: 500;*/
 
-    &:active {
+/*    &:active {*/
-        transform: translate(1px, 1px);
+/*        transform: translate(1px, 1px);*/
-        box-shadow: lightgray 0 0 5px;
+/*        box-shadow: lightgray 0 0 5px;*/
-    }
+/*    }*/
-}
+/*}*/