add contacts to presentation

packages/client/src/app/home/home-page/home-page.component.html

@@ -2,17 +2,17 @@
   <div fxFlex class="max-width" fxLayout="column" fxLayoutGap="20px">
     <mat-card fxFlex>
       <mat-card-content fxLayout="column" fxLayoutAlign="center center">
-        <div>
+        <h1>
           Mais qu'est ce que la K-Fêt de l'INSA Lyon ?
-        </div>
-        <div>
-          Check la <span class="link" routerLink="/home/presentation">page de présentation</span>!
-        </div>
+        </h1>
       </mat-card-content>
     </mat-card>
     <app-feed fxFlex></app-feed>
+    <app-presentation fxFlex></app-presentation>
   </div>
 </div>
+
+
 <div fxLayoutAlign="center" *ngIf="isConnected()">
   <div fxFlex fxLayout="column" fxLayoutGap="20px" class="max-width">
     <mat-card>
@@ -22,7 +22,7 @@
             <h1>Bonjour {{ getName() }}!</h1>
           </section>
         </mat-card-title>
-        <mat-card-subtitle>Cela fait maintenant {{ currentUser.createdAt | dfnsFormatDistanceToNow }} que tu fais parti
+        <mat-card-subtitle>Cela fait maintenant que tu fais parti
           de
           l'association A.R.G.I.L
         </mat-card-subtitle>
@@ -36,3 +36,5 @@ <h1>Bonjour {{ getName() }}!</h1>
     <app-feed fxFlex></app-feed>
   </div>
 </div>
+
+

packages/client/src/app/home/presentation/presentation.component.html

@@ -48,8 +48,8 @@ <h1>Les horaires</h1>
           </p>
         </div>
         <p>
-          Attention, lors de certains évènements (notament les BOOMs K-Fêt), une extension d'horaire est
-          prévue <strong>jusqu'à 3h du matin</strong>. Nous t'informons néanmoins que la K-Fêt est fermée toutes
+          Attention, lors de certains évènements exceptionnels, une extension d'horaire est
+          possible jusqu'à 3h du matin. Nous t'informons néanmoins que la K-Fêt est fermée toutes
           vieilles de
           vacances scolaires, vacances scolaires (excepté le mois d'août pour l'école d'été) ainsi que les
           jours fériés sauf indication contraire.
@@ -95,9 +95,9 @@ <h1>Les services</h1>
         </p>
         <h2>Les Baby Foot</h2>
         <p class="justify">
-          La K-Fêt dispose de 3 baby foot. Seux types de balles sont mis à disposition:
+          La K-Fêt dispose de 3 baby foot. Deux types de balles sont mis à disposition:
           les balles standards et les balles dures. Ces-dernières nécéssitent une caution au bar!
-          N'hésite pas à venir jouer, c'est le sport le plus répendu dans ce bar.
+          N'hésite pas à venir jouer, c'est le sport le plus répandu dans ce bar.
         </p>
         <div fxLayoutAlign="center">
           <div fxLayout="column" fxFlex.lt-md="100%" fxFlex="900px">
@@ -106,11 +106,18 @@ <h2>Les Baby Foot</h2>
             </div>
           </div>
         </div>
-        <h2>Les billards</h2>
+        <h2>Le billard</h2>
         <p class="justify">
           Il te suffit de donner une carte étudiante/permis de conduire + 20€ de caution au bar
           pour te munir des cannes et des boules.
         </p>
+        <div fxLayoutAlign="center">
+          <div fxLayout="column" fxFlex.lt-md="100%" fxFlex="900px">
+            <div fxFlex.xs="270px" fxFlex="400px" style="background-image: url('./assets/img/presentation/billard.jpeg')"
+                 class="responsive-image-container">
+            </div>
+          </div>
+        </div>
         <p class="justify">
           Si tu constate le moindre soucis durant la soirée, n'hésite pas à en parler aux barmans de services.
         </p>
@@ -133,4 +140,32 @@ <h1>La carte</h1>
       </mat-card-content>
     </mat-card>
   </div>
+  <div fxLayoutAlign="center">
+    <mat-card fxFlex class="max-width">
+      <mat-card-header>
+        <mat-card-title fxLayout="row">
+          <section class="mat-typography">
+            <h1>Contacts</h1>
+          </section>
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <h4>
+          Voici les différentes personnes que tu peux contacter en fonction de tes besoins:
+        </h4>
+      <p class = "justify">
+        <strong> Concerts :</strong> [email protected]
+      </p>
+      <p class = "justify">
+        <strong> Techniques :</strong> [email protected]
+      </p>
+      <p class = "justify">
+        <strong> Location :</strong> [email protected]
+      </p>
+      <p class = "justify">
+        <strong> Autres demandes :</strong> [email protected]
+      </p>
+      </mat-card-content>
+    </mat-card>
+  </div>
 </div>