add cta section and footer

src/assets/scss/mixins.scss

@@ -58,7 +58,7 @@
   z-index: 10 - $index;
   @extend %shadow;
   margin: 0;
-  padding: 42px $margin-page;
+  padding: $margin-page;
   color: $color;
 
   h2 {

src/assets/scss/variables.scss

 /* Colors */
+$color-darkest-blue: rgb(32, 26, 78);
 $color-dark-blue: rgb(46, 37, 128);
 $color-purple: rgb(99, 92, 161);
 $color-purple-light: rgb(151, 146, 192);

src/components/Button.vue

+<template>
+  <div class="btn">
+    <a :href="href" :style="style" @mouseover="mouseOver()" @mouseout="mouseOver()">{{ title }}</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Button",
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      default: "white"
+    },
+    hoverColor: {
+      type: String,
+      default: "black"
+    },
+    href: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    style () {
+      let bg = this.hovering ? this.color : "none";
+      let color = this.hovering ? this.hoverColor : this.color;
+      return `
+        background: ${bg};
+        color: ${color};
+        border: 1px solid ${this.color};
+      `;
+    }
+  },
+  data () {
+    return {
+      hovering: false
+    }
+  },
+  methods: {
+    mouseOver () {
+      this.hovering = !this.hovering;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn {
+  $padding: 8px;
+  box-sizing: content-box;
+  text-align: center;
+  margin: $padding 0;
+  a {
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+    padding: $padding;
+    border-radius: 4px;
+    transition: background 0.2s, color 0.2s;
+    font-weight: bold;
+  }
+}
+</style>

src/components/CallsToAction.vue

+<template>
+<div id="calls-to-action">
+  <div class="heading">
+    <h2>Ensemble, osons agir.</h2>
+  </div>
+  <div class="cta">
+    <div class="cta-text">
+      <p>
+        Ils nous soutiennent cette année encore : <strong>merci à nos partenaires pour leur engagement !</strong>
+      </p>
+      <p>
+        Vous aussi, engagez-vous à nos côtés en devenant <strong>partenaire d'Ouverture Sociale pour l'Égalité et la Réussite</strong>.
+      </p>
+      <Button title="Devenir partenaire" color="rgb(213, 250, 255)" hoverColor="rgb(46, 37, 128)"/>
+    </div>
+    <div class="cta-well white">
+      <img src="~assets/img/partenaires-akoya.png" alt="Akoya Consulting">
+      <img src="~assets/img/partenaires-safran.png" alt="Safran">
+    </div>
+  </div>
+  <div class="cta">
+    <div class="cta-text">
+      <p>
+        OSER fait partie de la Cordée Mutualisée de l'Université Paris Saclay, projet visant à favoriser l'accès à l'enseignement supérieur, dont les  lières d'excellence, de jeunes quel que soit leur milieu socioculturel. Notre action est ainsi en partie financée par des organismes régionaux et départementaux.
+      </p>
+      <p>
+        Vous aussi, <strong>soutenez notre action auprès des jeunes de la région parisienne</strong>.
+      </p>
+      <Button title="Faire un don" color="rgb(213, 250, 255)" hoverColor="rgb(46, 37, 128)"/>
+    </div>
+    <div class="cta-well">
+      <img src="~assets/img/partenaires-cget.png" alt="CGET">
+      <img src="~assets/img/partenaires-rectorat.png" alt="Rectorat">
+      <img src="~assets/img/partenaires-ridf.png" alt="RIDF">
+      <img src="~assets/img/partenaires-upsaclay.png" alt="UPSaclay">
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import Button from "./Button"
+
+export default {
+  name: "CallsToAction",
+  components: {Button}
+}
+</script>
+
+<style lang="scss">
+@import 'src/assets/scss/variables', 'src/assets/scss/mixins', 'src/assets/scss/media-queries';
+
+#calls-to-action {
+  @include landing-section(4);
+  background-color: $color-dark-blue;
+  color: white;
+
+  .heading {
+    text-align: center;
+  }
+
+  h2 {
+    color: $color-light-blue;
+  }
+
+  .cta {
+    display: grid;
+    grid-template-areas: "text well";
+    grid-gap: 2em;
+    margin-bottom: 2em;
+    .btn {
+      margin-top: 2em;
+    }
+  }
+
+  .cta-text {
+    grid-area: "text";
+  }
+
+  .cta-well {
+    grid-area: "well";
+    width: 30em;
+    margin-bottom: auto;
+    text-align: center;
+    box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.2) inset;
+    border-radius: 4px;
+    img {
+      vertical-align: middle;
+      max-width: 49%;
+      height: auto;
+    }
+    &.white {
+      background: white;
+    }
+  }
+}
+</style>

src/components/Footer.vue

+<template>
+  <div id="footer">
+    <div class="inline-text">
+      Newsletter : recevez toute notre actualité
+      <Button
+      title="M'inscrire"
+      color="rgb(151, 146, 192)"
+      hoverColor="rgb(32, 26, 78)"/>
+    </div>
+    <div class="inline-text">
+      Contact | Mentions légales &amp; crédits
+    </div>
+    <div class="inline-text">
+      <i class="social fa fa-2x fa-facebook"></i>
+      <i class="social fa fa-2x fa-twitter"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "./Button";
+
+export default {
+  name: "Footer",
+  components: {Button}
+}
+</script>
+
+<style lang="scss">
+@import 'src/assets/scss/variables', 'src/assets/scss/mixins', 'src/assets/scss/media-queries';
+
+#footer {
+  position: relative;
+  z-index: 30;
+  background: $color-darkest-blue;
+  padding: $margin-page 3*$margin-page;
+  color: $color-purple-light;
+  display: flex;
+  justify-content: space-between;
+}
+.inline-text {
+  .btn {
+    display: inline;
+    vertical-align: baseline;
+    margin-left: 1em;
+  }
+  .social {
+    margin: 0 0.5em;
+    color: $color-light-blue;
+  }
+}
+
+</style>

src/components/Home.vue

@@ -2,17 +2,20 @@
   <div>
     <Navbar/>
     <LandingPage/>
+    <Footer/>
   </div>
 </template>
 
 <script>
 import Navbar from './Navbar'
 import LandingPage from './LandingPage'
+import Footer from './Footer'
 
 export default {
   components: {
     Navbar,
-    LandingPage
+    LandingPage,
+    Footer
   }
 }
 </script>

src/components/LandingPage.vue

@@ -4,6 +4,7 @@
     <QuiSommesNous/>
     <Actions/>
     <News/>
+    <CallsToAction/>
   </div>
 </template>
 
@@ -11,13 +12,15 @@
 import QuiSommesNous from './QuiSommesNous'
 import Actions from './Actions'
 import News from './News'
+import CallsToAction from './CallsToAction'
 
 export default {
   name: 'LandingPage',
   components: {
     QuiSommesNous,
     Actions,
-    News
+    News,
+    CallsToAction
   }
 }
 </script>

src/components/News.vue

@@ -60,7 +60,6 @@ export default {
     @include landing-section(3);
     .heading {
         text-align: center;
-        // margin-bottom: 3em;
     }
     .link-all {
         text-align: center;

src/components/NewsCard.vue

@@ -68,8 +68,7 @@ export default {
         h5 {
             color: gray;
             font-weight: normal;
-            margin: 0;
-            padding: 0;
+            margin-top: .5em;
         }
         a {
             text-decoration: none;