feat [front]: about page

front/components/find-us.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="card">
+    <header
+      class="card-content is-flex is-justify-content-space-between is-align-items-center"
+    >
+      <h3 class="title is-4 mb-0">Nous trouver</h3>
+      <ButtonIcon
+        label="Nous contacter"
+        icon="ri-mail-line"
+        class="is-primary"
+      />
+    </header>
+    <div class="card-content">
+      <div>
+        <div class="is-flex socials">
+          <SocialsFacebook />
+          <SocialsInstagram />
+          <SocialsNewsletter />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="sass">
+.card
+  width: fit-content
+</style>

front/pages/a-propos.vue

@@ -0,0 +1,59 @@
+<template>
+  <main>
+    <section class="section">
+      <h1 class="title is-2">À propos du ciné-club</h1>
+      <div class="columns">
+        <div class="column is-one-third">
+          <img src="~/assets/img/projo.jpg" alt="projecteur 35mm" />
+          <img src="~/assets/img/public.jpg" alt="public de la salle Dussane" />
+        </div>
+        <div class="column is-two-thirds pl-5">
+          <div class="content">
+            <p>Le ciné-club de l’ÉNS, c’est tout simplement :</p>
+            <ul>
+              <li>
+                des séances ouvertes à tout le monde, que vous soyez ou non
+                élève de l’école. On vous aime pareil&nbsp;!
+              </li>
+              <li>
+                des projections en 35mm dans une belle salle : l’illustre salle
+                Dussane, au 45 rue d’Ulm. La pellicule, c’est la vie. Même quand
+                ça se bloque et crame un peu (on plaisante)
+              </li>
+              <li>
+                des invité·e·s qui viennent présenter les films, des rencontres
+                avec les cinéastes. Moment VIP&nbsp;!
+              </li>
+              <li>
+                des partenariats avec des associations, des débats réguliers
+                avec des disputes et de l’amour
+              </li>
+              <li>des films choisis avec goût (le nôtre)</li>
+            </ul>
+            <p>
+              Alors venez nous voir, et (re)découvrez des films
+              merveilleux&nbsp; !
+            </p>
+          </div>
+          <FindUs />
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="title">Partenaires</h2>
+      <div class="is-flex is-align-items-center">
+        <a class="cof mr-6" href="https://cof.ens.fr/">COF</a>
+        <a href="https://www.psl.eu/">
+          <img src="~/assets/img/logoPsl.png" alt="logo de PSL" />
+        </a>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="sass">
+.content ul
+  list-style-type: "— "
+</style>