add features block

app/app.vue

@@ -2,6 +2,7 @@
     <div>
         <lesspass-navbar></lesspass-navbar>
         <lesspass-header></lesspass-header>
+        <lesspass-features></lesspass-features>
         <!--<lesspass-headlines></lesspass-headlines>-->
         <!--<lesspass-how-it-works></lesspass-how-it-works>-->
         <!--<lesspass-feedback></lesspass-feedback>-->
@@ -12,11 +13,12 @@
 <script>
     import LesspassNavbar from './navbar/navbar.vue';
     import LesspassHeader from './header/header.vue';
-    import LesspassHeadlines from './components/headlines.vue';
-    import LesspassFeedback from './components/feedback.vue';
-    import LesspassHowItWorks from './components/howitworks.vue';
-    import LesspassFaq from './components/faq.vue';
-    import LesspassFooter from './components/footer.vue';
+    import LesspassFeatures from './features/features.vue';
+//    import LesspassHeadlines from './components/headlines.vue';
+//    import LesspassFeedback from './components/feedback.vue';
+//    import LesspassHowItWorks from './components/howitworks.vue';
+//    import LesspassFaq from './components/faq.vue';
+//    import LesspassFooter from './components/footer.vue';
 
     export default {
         data: function () {
@@ -25,11 +27,7 @@
         components: {
             LesspassNavbar,
             LesspassHeader,
-            LesspassHeadlines,
-            LesspassFeedback,
-            LesspassHowItWorks,
-            LesspassFaq,
-            LesspassFooter
+            LesspassFeatures
         }
     }
 </script>

app/features/features.vue

@@ -0,0 +1,68 @@
+<style>
+    #features {
+        background-color: #384d55;
+        color: white;
+        padding-top: 3em;
+        padding-bottom: 3em;
+    }
+
+    #features .features__img_block{
+        max-width: 140px;
+    }
+</style>
+<template>
+    <div id="features">
+        <div class="container">
+            <div class="row features__row">
+                <div class="col-md-6">
+                    <div class="media m-y-3">
+                        <a class="media-left media-middle text-xs-center features__img_block" href="#">
+                            <img src="./responsive.png" alt="" class="img-fluid">
+                        </a>
+                        <div class="media-body">
+                            <h4 class="media-heading">{{{ $t('how_it_works.responsive_title') }}}</h4>
+                            {{{ $t('how_it_works.responsive') }}}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <div class="media m-y-3">
+                        <a class="media-left media-middle text-xs-center features__img_block" href="#">
+                            <img src="./no-cloud.png" alt="" class="img-fluid">
+                        </a>
+                        <div class="media-body">
+                            <h4 class="media-heading">{{{ $t('how_it_works.no_cloud_title') }}}</h4>
+                            {{{ $t('how_it_works.no_cloud') }}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row features__row">
+                <div class="col-md-6">
+                    <div class="media m-y-3">
+                        <a class="media-left media-middle text-xs-center features__img_block" href="#">
+                            <img src="./open-source.png" alt="" class="img-fluid">
+                        </a>
+                        <div class="media-body">
+                            <h4 class="media-heading">{{{ $t('how_it_works.open_source_title') }}}</h4>
+                            {{{ $t('how_it_works.open_source') }}}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <div class="media m-y-3">
+                        <a class="media-left media-middle text-xs-center features__img_block" href="#">
+                            <img src="./free.png" alt="" class="img-fluid">
+                        </a>
+                        <div class="media-body">
+                            <h4 class="media-heading">{{{ $t('how_it_works.free_title') }}}</h4>
+                            {{{ $t('how_it_works.free') }}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

app/header/header.vue

@@ -1,6 +1,6 @@
 <style>
     #header {
-        background-color: rgba(52, 126, 185, 1);
+        background-color: #347eb9;
         color: white;
     }
 

app/header/password-generator/password-generator.vue

@@ -1,8 +1,11 @@
-<!--<style>-->
-    <!--#password-generator .c-input {-->
-        <!--color: inherit;-->
-    <!--}-->
-<!--</style>-->
+<style>
+    #password-generator .c-input {
+        color: inherit;
+    }
+    #password-generator .btn-reverse{
+        background-color: #373a3c;
+    }
+</style>
 <template>
     <div id="password-generator">
         <form>
@@ -59,7 +62,7 @@
                                v-bind:disabled="!generatedPassword">
                         <span class="input-group-btn">
                             <button id="copyBtn" data-clipboard-target="#generatedPassword"
-                                    class="btn btn-secondary" type="button">
+                                    class="btn btn-reverse" type="button">
                                 {{ $t('passwordgenerator.copy') }}
                             </button>
                         </span>
@@ -148,7 +151,6 @@
         </form>
     </div>
 </template>
-
 <script>
     import lesspass from 'lesspass'
     import Clipboard from 'clipboard';

app/locales.js

@@ -6,7 +6,7 @@ const locales = {
         "lang": "en",
         "headlines": {
             "title": "Open Source<br>Password Manager",
-            "subtitle": "replaces all your tools that record your passwords as LastPass, 1Password, Keepass, Excel spreadsheet, post it, etc ..."
+            "subtitle": "replaces all your tools that record your passwords as LastPass, 1Password, Keepass, Excel spreadsheet, post it"
         },
         "footer": {
             "built_by": "by",
@@ -73,7 +73,7 @@ const locales = {
         "lang": "fr",
         "headlines": {
             "title": "Gestionnaire de mot de passe open source",
-            "subtitle": "remplace tous vos outils qui sauvegardent vos mots de passe comme Lastpass, 1password, Keepass, tableur Excel, post it, etc..."
+            "subtitle": "remplace tous vos outils qui sauvegardent vos mots de passe comme Lastpass, 1password, Keepass, tableur Excel, post it"
         },
         "footer": {
             "built_by": "Réalisé par",