move feddback and how it works blocks

app/app.vue

@@ -1,24 +1,22 @@
 <template>
-    <div>
+    <div id="app">
         <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>-->
+        <lesspass-howitworks></lesspass-howitworks>
+        <lesspass-feedback></lesspass-feedback>
         <!--<lesspass-faq></lesspass-faq>-->
-        <!--<lesspass-footer></lesspass-footer>-->
+        <lesspass-footer></lesspass-footer>
     </div>
 </template>
 <script>
     import LesspassNavbar from './navbar/navbar.vue';
     import LesspassHeader from './header/header.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';
+    import LesspassHowitworks from './howitworks/howitworks.vue';
+    import LesspassFeedback from './feedback/feedback.vue';
+    import LesspassFooter from './footer/footer.vue';
 
     export default {
         data: function () {
@@ -27,7 +25,10 @@
         components: {
             LesspassNavbar,
             LesspassHeader,
-            LesspassFeatures
+            LesspassFeatures,
+            LesspassHowitworks,
+            LesspassFeedback,
+            LesspassFooter
         }
     }
 </script>

app/components/howitworks.vue

@@ -1,82 +0,0 @@
-<style>
-    .lesspass-how-it-works {
-        background-color: #025aa5;;
-        color: #D3D8E8;
-    }
-
-    .lesspass-how-it-works img {
-        height: 120px;
-    }
-
-    .lesspass-how-it-works .explanation {
-        line-height: 1.5em;
-        font-weight: 400;
-    }
-
-    .lesspass-how-it-works .title {
-        font-weight: 600;
-    }
-
-    .lesspass-how-it-works a {
-        color: #D3D8E8;
-        text-decoration: underline;
-    }
-</style>
-<template>
-    <div class="lesspass-how-it-works p-t-3">
-        <div class="container">
-            <div class="row text-xs-center">
-                <div class="col-md-3">
-                    <div class="row">
-                        <div class="col-lg-12 m-y-3">
-                            <img src="../assets/images/responsive.png" alt="responsive">
-                        </div>
-                        <div class="col-lg-12 m-b-3">
-                            <h4 class="title">{{{ $t('how_it_works.responsive_title') }}}</h4>
-                            <h5 class="explanation m-t-1 m-b-3">{{{ $t('how_it_works.responsive') }}}</h5>
-                        </div>
-                    </div>
-
-                </div>
-                <div class="col-md-3">
-                    <div class="row">
-                        <div class="col-lg-12 m-y-3">
-                            <img src="../assets/images/no-cloud.png" alt="no cloud">
-                        </div>
-                        <div class="col-lg-12 m-b-3">
-                            <h4 class="title">{{{ $t('how_it_works.no_cloud_title') }}}</h4>
-                            <h5 class="explanation m-t-1 m-b-3">{{{ $t('how_it_works.no_cloud') }}}</h5>
-                        </div>
-                    </div>
-
-                </div>
-
-                <div class="col-md-3">
-                    <div class="row">
-                        <div class="col-lg-12 m-y-3">
-                            <img src="../assets/images/open-source.png" alt="open source">
-                        </div>
-                        <div class="col-lg-12 m-b-3">
-                            <h4 class="title">{{{ $t('how_it_works.open_source_title') }}}</h4>
-                            <h5 class="explanation m-t-1 m-b-3">{{{ $t('how_it_works.open_source') }}}</h5>
-                        </div>
-                    </div>
-
-
-                </div>
-                <div class="col-md-3">
-                    <div class="row">
-                        <div class="col-lg-12 m-y-3">
-                            <img src="../assets/images/free.png" alt="free">
-                        </div>
-                        <div class="col-lg-12 m-b-3">
-                            <h4 class="title">{{{ $t('how_it_works.free_title') }}}</h4>
-                            <h5 class="explanation m-t-1 m-b-3">{{{ $t('how_it_works.free') }}}</h5>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

app/features/features.vue

@@ -20,8 +20,8 @@
                             <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') }}}
+                            <h4 class="media-heading">{{{ $t('features.responsive_title') }}}</h4>
+                            <p class="lead">{{{ $t('features.responsive') }}}</p>
                         </div>
                     </div>
                 </div>
@@ -32,8 +32,8 @@
                             <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') }}}
+                            <h4 class="media-heading">{{{ $t('features.no_cloud_title') }}}</h4>
+                            <p class="lead">{{{ $t('features.no_cloud') }}}</p>
                         </div>
                     </div>
                 </div>
@@ -45,8 +45,8 @@
                             <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') }}}
+                            <h4 class="media-heading">{{{ $t('features.open_source_title') }}}</h4>
+                            <p class="lead">{{{ $t('features.open_source') }}}</p>
                         </div>
                     </div>
                 </div>
@@ -57,8 +57,8 @@
                             <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') }}}
+                            <h4 class="media-heading">{{{ $t('features.free_title') }}}</h4>
+                            <p class="lead">{{{ $t('features.free') }}}</p>
                         </div>
                     </div>
                 </div>

app/components/feedback.vue → app/feedback/feedback.vue

@@ -1,5 +1,49 @@
 <style>
     .lesspass-feedback {
+        background-color: #134a6a;
+        color: #D3D8E8;
+    }
+
+    .lesspass-feedback .thumbnail {
+        width: 42px;
+    }
+</style>
+<template>
+    <div class="lesspass-feedback p-y-3">
+        <div class="container">
+            <div class="row m-y-3">
+                <div class="col-lg-10 col-lg-offset-1">
+                    <div class="media">
+                        <a class="media-left" href="#">
+                            <img src="./el.jpg" alt="Edouard Lopez" class="img-circle thumbnail">
+                        </a>
+                        <div class="media-body">
+                            <h4 class="media-heading">{{{ $t('feedback.feedback_1') }}}</h4>
+                            <p>{{{ $t('feedback.feedback_1_author') }}}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-y-3">
+                <div class="col-lg-10 col-lg-offset-1">
+                    <div class="media">
+                        <div class="media-body text-xs-right">
+                            <h4 class="media-heading">{{{ $t('feedback.feedback_2') }}}</h4>
+                            <p>{{{ $t('feedback.feedback_2_author') }}}</p>
+                        </div>
+                        <a class="media-right" href="#">
+                            <img src="./gv.jpg" alt="guillaume vincent" class="img-circle thumbnail">
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<!--
+
+<style>
+    .lesspass-feedback {
         background-color: #252830;
         color: #D3D8E8;
     }
@@ -31,7 +75,7 @@
 
                     <blockquote class="blockquote">
                         <p class="m-b-0">
-                            <!--<img src="" alt="..." class="img-circle thumbnail">-->
+                            &lt;!&ndash;<img src="" alt="..." class="img-circle thumbnail">&ndash;&gt;
                             {{{ $t('feedback.what_do_you_think') }}}
                         </p>
                         <footer class="blockquote-footer">
@@ -42,4 +86,4 @@
             </div>
         </div>
     </div>
-</template>
+</template>-->

app/components/footer.vue → app/footer/footer.vue

@@ -1,28 +1,26 @@
 <style>
-    footer {
-        font-size: 0.7rem;
-        font-family: Consolas, DejaVu Sans Mono, Courier, monospace;
+    #footer {
+        background-color: #1B2529;
+        color: #7A8491;
     }
 </style>
 <template>
-    <footer class="text-xs-center">
+    <div id="footer" class="text-xs-center">
         <div class="container">
             <div class="row p-y-3">
                 <div class="col-lg-12">
-                    <p>
-                        <img src="../assets/images/logo.png" alt="logo">
-                    </p>
+                    <img src="./logo.png" alt="logo">
                 </div>
             </div>
             <div class="row p-y-3">
                 <div class="col-lg-12">
-                    <p>
+                    <p class="lead">
                         &copy; LessPass
                         - {{ $t('footer.built_by') }} <a href="mailto:guillaume@oslab.fr">Guillaume Vincent</a>
-                        - <a href="https://github.com/oslab-fr/lesspass">{{ $t('footer.source_code') }}</a>
+                        - <a href="https://github.com/lesspass">{{ $t('footer.contribute') }}</a>
                     </p>
                 </div>
             </div>
         </div>
-    </footer>
+    </div>
 </template>

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

@@ -63,7 +63,7 @@
                                v-bind:disabled="!generatedPassword">
                         <span class="input-group-btn">
                             <button id="copyBtn" data-clipboard-target="#generatedPassword"
-                                    class="btn btn-reverse" type="button">
+                                    class="btn btn-warning" type="button">
                                 {{ $t('passwordgenerator.copy') }}
                             </button>
                         </span>

app/howitworks/howitworks.vue

@@ -0,0 +1,52 @@
+<style>
+    #how-it-works {
+        background-color: #F8F8F8;;
+        color: #7f7f7f;
+    }
+</style>
+<template>
+    <div id="how-it-works">
+        <div class="container">
+            <div class="row p-t-3">
+                <div class="col-lg-12">
+                    <h3>{{ $t('how_it_works.title') }}</h3>
+                    <p class="lead">
+                        {{ $t('how_it_works.subtitle') }}
+                    </p>
+                </div>
+            </div>
+
+            <div class="row p-y-3">
+                <div class="col-lg-4 m-b-2">
+                    <img src="./lesspass.gif" alt="open source" class="img-fluid">
+                </div>
+                <div class="col-lg-7 col-lg-offset-1">
+                    <div class="media m-b-3">
+                        <div class="media-body">
+                            <h4 class="media-heading">Media heading</h4>
+                            <p class="lead">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+                            commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
+                            condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                        </div>
+                    </div>
+                    <div class="media m-b-3">
+                        <div class="media-body">
+                            <h4 class="media-heading">Media heading</h4>
+                            <p class="lead">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+                            commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
+                            condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                        </div>
+                    </div>
+                    <div class="media m-b-3">
+                        <div class="media-body">
+                            <h4 class="media-heading">Media heading</h4>
+                            <p class="lead">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+                            commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
+                            condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

app/locales.js

@@ -9,8 +9,8 @@ const locales = {
             "subtitle": "generate an unique password based on the information you provide"
         },
         "footer": {
-            "built_by": "by",
-            "source_code": "Source code"
+            "built_by": "built by",
+            "contribute": "contribute"
         },
         "passwordgenerator": {
             "who_are_you": "Email / Username",
@@ -50,7 +50,7 @@ const locales = {
             "a_pricing_free": "LessPass is free and always will be.",
             "a_pricing_enterprise": "LessPass Enterprise will add support for <abbr title='Lightweight Directory Access Protocol'>LDAP</abbr> and double-authentication for companies."
         },
-        "how_it_works": {
+        "features": {
             "no_cloud_title": "No storage",
             "responsive_title": "Available everywhere",
             "open_source_title": "Open Source",
@@ -60,13 +60,15 @@ const locales = {
             "open_source": "LessPass is <strong>open-source</strong>. So its security can be audited. Source code is available on <a href='https://github.com/lesspass/core'>Github</a>.",
             "free": "LessPass is free and always will be."
         },
+        "how_it_works": {
+            "title": "",
+            "subtitle": ""
+        },
         "feedback": {
             "feedback_1": "Finally a security tool that I did not need to trust.",
             "feedback_1_author": "Édouard Lopez, LessPass Team Member",
             "feedback_2": "I no longer need a personal cloud to manage my passwords.<br>One secret and I have access to my passwords everywhere.",
-            "feedback_2_author": "Guillaume Vincent, LessPass Founder",
-            "what_do_you_think": "Tell us what you think of LessPass.",
-            "send_us_email": "Send us an email"
+            "feedback_2_author": "Guillaume Vincent, LessPass Founder"
         }
     },
     "fr": {
@@ -76,8 +78,8 @@ const locales = {
             "subtitle": "construit un mot de passe unique lorsque vous en avez besoin sur la base d'informations uniques que vous lui fournissez."
         },
         "footer": {
-            "built_by": "Réalisé par",
-            "source_code": "Code source"
+            "built_by": "créé par",
+            "contribute": "contribuer"
         },
         "passwordgenerator": {
             "who_are_you": "Email / Nom d'utilisateur",
@@ -118,7 +120,7 @@ const locales = {
             "a_pricing_free": "LessPass est gratuit et le sera toujours.",
             "a_pricing_enterprise": "LessPass Enterprise, avec le support <abbr title='Lightweight Directory Access Protocol'>LDAP</abbr> et la double authentication, sera payante pour les enterprises."
         },
-        "how_it_works": {
+        "features": {
             "no_cloud_title": "Pas de stockage",
             "responsive_title": "Disponible partout",
             "open_source_title": "Open Source",
@@ -128,13 +130,15 @@ const locales = {
             "open_source": "LessPass est open source. Le code source est disponible sur <a href='https://github.com/lesspass/core'>Github</a>, vous pouvez l'auditer",
             "free": "LessPass est gratuit et le sera toujours."
         },
+        "how_it_works": {
+            "title": "Comment LessPass fonctionne ?",
+            "subtitle": "LessPass est un générateur de mot de passe qui vous garanti générer le même mot de passe sur la base d'informations uniques que vous lui fournissez. Vous pouvez donc utiliser LessPass pour créer des mots de passe pour vos différents services internet (Réseaux sociaux, mails, mots de passe serveurs, ...)."
+        },
         "feedback": {
             "feedback_1": "Enfin un outil de sécurité a qui je n'ai pas besoin de faire confiance.",
-            "feedback_1_author": "Édouard Lopez, membre de l'équipe de LessPass",
-            "feedback_2": "Je n'ai plus besoin d'un cloud personnel pour gérer mes mots de passe. Une seule phrase secrete et j'ai accès à mes mots de passe partout.",
-            "feedback_2_author": "Guillaume Vincent, créateur de LessPass",
-            "what_do_you_think": "dites-nous ce que vous pensez de LessPass.",
-            "send_us_email": "Envoyez-nous un email"
+            "feedback_1_author": "Édouard Lopez,<br> membre de l'équipe de LessPass",
+            "feedback_2": "Je n'ai plus besoin d'un cloud personnel pour gérer mes mots de passe.<br> Une seule phrase secrete et j'ai accès à mes mots de passe partout.",
+            "feedback_2_author": "Guillaume Vincent,<br> créateur de LessPass"
         }
     }
 };