diff --git a/src/assets/img/partenaires-akoya.png b/src/assets/img/partenaires-akoya.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1acc6ba1187b6558e17ac5f9fd6818e13213c56
Binary files /dev/null and b/src/assets/img/partenaires-akoya.png differ
diff --git a/src/assets/img/partenaires-cget.png b/src/assets/img/partenaires-cget.png
new file mode 100644
index 0000000000000000000000000000000000000000..aef09a53e4e507d842268b62d267ff1d7041f88f
Binary files /dev/null and b/src/assets/img/partenaires-cget.png differ
diff --git a/src/assets/img/partenaires-rectorat.png b/src/assets/img/partenaires-rectorat.png
new file mode 100644
index 0000000000000000000000000000000000000000..76e19028bf34853915960f3f5ab1eefda5eb7de3
Binary files /dev/null and b/src/assets/img/partenaires-rectorat.png differ
diff --git a/src/assets/img/partenaires-ridf.png b/src/assets/img/partenaires-ridf.png
new file mode 100644
index 0000000000000000000000000000000000000000..7992531cb414d7092f44d64fe18d94754e7a5780
Binary files /dev/null and b/src/assets/img/partenaires-ridf.png differ
diff --git a/src/assets/img/partenaires-safran.png b/src/assets/img/partenaires-safran.png
new file mode 100644
index 0000000000000000000000000000000000000000..02ef462977f1e8a70dff4aff4d22d7992c8375b3
Binary files /dev/null and b/src/assets/img/partenaires-safran.png differ
diff --git a/src/assets/img/partenaires-upsaclay.png b/src/assets/img/partenaires-upsaclay.png
new file mode 100644
index 0000000000000000000000000000000000000000..23b437655e6186b7a4d863549fcbe2b206ba4a59
Binary files /dev/null and b/src/assets/img/partenaires-upsaclay.png differ
diff --git a/src/assets/scss/mixins.scss b/src/assets/scss/mixins.scss
index 13381b124bd37cdedbbda113ed91826f1333f866..f3ce23b4f76bfdd13c10e901cb8e35aaf241664d 100644
--- a/src/assets/scss/mixins.scss
+++ b/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 {
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
index 2b88fae04c57f32bf318fe6d5a4dd748d74fe3f9..21b5e0c5338d37e56280c567f27d41054a050c9f 100644
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@@ -1,4 +1,5 @@
/* 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);
diff --git a/src/components/Button.vue b/src/components/Button.vue
new file mode 100644
index 0000000000000000000000000000000000000000..673c1f18a4045b0e0b1305671add2884a2112b60
--- /dev/null
+++ b/src/components/Button.vue
@@ -0,0 +1,67 @@
+<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>
diff --git a/src/components/CallsToAction.vue b/src/components/CallsToAction.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9d5fa3e2310f0256decde869bb678d575991786d
--- /dev/null
+++ b/src/components/CallsToAction.vue
@@ -0,0 +1,97 @@
+<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>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e46987eb6fa7d4596c95ee2a7c24108107c95eb1
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,53 @@
+<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 & 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>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index a8d99a33584e0eb860228ca787c46883ad8dc19e..0a75738a889bfaa894d0247179c5f98db9b24fe9 100644
--- a/src/components/Home.vue
+++ b/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>
diff --git a/src/components/LandingPage.vue b/src/components/LandingPage.vue
index 25dd996a38b4986a119651e49cf69c0adb5689e8..bfece3a686f223b86b33b73f28960fbb4ea23006 100644
--- a/src/components/LandingPage.vue
+++ b/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>
diff --git a/src/components/News.vue b/src/components/News.vue
index 97036deaa31bbb113ea85e975f4bfefcee88bda7..e7696cdb9700b9c6098fbc15a164d3b2d2fb8f3c 100644
--- a/src/components/News.vue
+++ b/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;
diff --git a/src/components/NewsCard.vue b/src/components/NewsCard.vue
index 4394d2a83897be475a40a6b8ae2e8d860c0da2c5..d6aab4a5d80eb35c6a36987507c57cf4430a603a 100644
--- a/src/components/NewsCard.vue
+++ b/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;