From 1dbc198684922025253c20ed0f0f795aeb9eb096 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 24 Sep 2019 11:50:13 +0200
Subject: [PATCH] Add footer

---
 src/App.vue               |  6 ++++-
 src/components/Footer.vue | 56 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Footer.vue

diff --git a/src/App.vue b/src/App.vue
index f05598c..67464d1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,16 +3,20 @@
     <header-component></header-component>
 
     <router-view></router-view>
+
+    <footer-component></footer-component>
   </div>
 </template>
 
 <script>
   import HeaderComponent from './components/Header.vue'
+  import FooterComponent from './components/Footer.vue'
 
   export default {
     name: 'app',
     components: {
-      HeaderComponent
+      HeaderComponent,
+      FooterComponent
     },
     metaInfo: function () {
       return {
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..8d162c1
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,56 @@
+<template>
+  <footer>
+    <div>
+      <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org/en/legals/" v-translate>Legal notices</a>
+
+      <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org" v-translate>Contact</a>
+
+      <a target="_blank" rel="noopener noreferrer" href="https://framalistes.org/sympa/subscribe/peertube-newsletter" v-translate>Newsletter</a>
+
+      <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/peertube" v-translate>Forum</a>
+    </div>
+
+    <div>
+      <a target="_blank" rel="noopener noreferrer" href="https://framagit.org/framasoft/peertube/joinpeertube" v-translate>JoinPeerTube Git</a>
+
+      <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube" v-translate>PeerTube Git</a>
+    </div>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+  @import '../scss/_variables.scss';
+  @import '../scss/_mixins.scss';
+
+  footer {
+    margin-top: 30px;
+    background-color: #fff;
+    padding: 30px 200px;
+    display: flex;
+    justify-content: space-between;
+
+    > div {
+      a {
+        display: block;
+        color: #000;
+        font-weight: $font-semibold;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  @media screen and (max-width: $responsive-screen) {
+    footer {
+      padding: 30px;
+    }
+  }
+</style>
+
+<script>
+
+  export default {
+    components: {
+
+    }
+  }
+</script>