update how it works and footer

app/landing-page/features/features.vue

@@ -1,69 +1,73 @@
 <style>
     #features {
-        background-color: #384d55;
-        color: #ffffff;
-        padding-top: 3em;
-        padding-bottom: 3em;
+        background-color: #025aa5;
+        color: #f2f2f2;
     }
 
     #features a {
-        color: #ffffff;
+        color: inherit;
         text-decoration: underline;
     }
 
-    #features .features__img_block {
-        max-width: 140px;
+    #features .container {
+        position: relative;
+
+        padding-top: 20vh;
+        padding-bottom: 20vh;
+    }
+
+    #features .features__card {
+
+        background-color: transparent;
+        border: none;
+        /*color: #1B2529;*/
+        border-radius: 0 !important;
+    }
+
+    #features .features__card img {
+        height: 120px;
+    }
+
+    @media (min-width: 768px) {
+
+        #features .features__card {
+            width: 25%
+        }
     }
 </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('features.responsive_title') }}}</h4>
-                            <p class="lead">{{{ $t('features.responsive') }}}</p>
+            <div class="row text-xs-center">
+                <div class="card-deck-wrapper">
+                    <div class="card-deck">
+                        <div class="card features__card p-t-2">
+                            <img class="card-img-top" src="./responsive.png" alt="Card image cap">
+                            <div class="card-block">
+                                <h4 class="card-title">{{{ $t('features.responsive_title') }}}</h4>
+                                <p class="card-text">{{{ $t('features.responsive') }}}</p>
+                            </div>
                         </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('features.no_cloud_title') }}}</h4>
-                            <p class="lead">{{{ $t('features.no_cloud') }}}</p>
+                        <div class="card features__card p-t-2">
+                            <img class="card-img-top" src="./no-cloud.png" alt="Card image cap">
+                            <div class="card-block">
+                                <h4 class="card-title">{{{ $t('features.no_cloud_title') }}}</h4>
+                                <p class="card-text">{{{ $t('features.no_cloud') }}}</p>
+                            </div>
                         </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('features.open_source_title') }}}</h4>
-                            <p class="lead">{{{ $t('features.open_source') }}}</p>
+                        <div class="card features__card p-t-2">
+                            <img class="card-img-top" src="./open-source.png" alt="Card image cap">
+                            <div class="card-block">
+                                <h4 class="card-title">{{{ $t('features.open_source_title') }}}</h4>
+                                <p class="card-text">{{{ $t('features.open_source') }}}</p>
+                            </div>
                         </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('features.free_title') }}}</h4>
-                            <p class="lead">{{{ $t('features.free') }}}</p>
+                        <div class="card features__card p-t-2">
+                            <img class="card-img-top" src="./free.png" alt="Card image cap">
+                            <div class="card-block">
+                                <h4 class="card-title">{{{ $t('features.free_title') }}}</h4>
+                                <p class="card-text">{{{ $t('features.free') }}}</p>
+                            </div>
                         </div>
                     </div>
                 </div>

app/landing-page/footer/footer.vue

@@ -1,19 +1,19 @@
 <style>
     #footer {
-        background-color: #1B2529;
-        color: #7A8491;
+        background-color: #202020;
+        color: #f2f2f2;
+        font-size: 0.8em;
+    }
+
+    #footer a{
+        color: inherit;
     }
 </style>
 <template>
     <div id="footer" class="text-xs-center">
         <div class="container">
-            <div class="row p-y-3">
-                <div class="col-lg-12">
-                    <img src="./logo.png" alt="logo">
-                </div>
-            </div>
-            <div class="row p-y-3">
-                <div class="col-lg-12">
+            <div class="row p-t-3 p-b-1">
+                <div class="col-lg-12 p-t-3 p-b-1 text-xs-right">
                     <p>
                         &copy; LessPass
                         - {{ $t('footer.created_by') }} <a href="mailto:guillaume@oslab.fr">Guillaume Vincent</a>

app/landing-page/howitworks/howitworks.vue

@@ -1,41 +1,57 @@
 <style>
     #how-it-works {
-        background-color: #F8F8F8;
-        color: #7f7f7f;;
+        background-color: #134a6a;
+        color: #f2f2f2;
+    }
+
+    #how-it-works #how-it-works__self_hosted {
+        background-color: #f7f7f7;
+        padding: 1em;
     }
 </style>
 <template>
     <div id="how-it-works">
         <div class="container">
-            <div class="row p-t-3">
+            <div class="row p-y-3">
                 <div class="col-lg-8">
                     <h3>{{ $t('how_it_works.title') }}</h3>
-                    <p class="lead">
-                        {{ $t('how_it_works.subtitle') }}
+                    <p>
+                        {{ $t('how_it_works.detail') }}
                     </p>
                 </div>
             </div>
-            <div class="row p-t-1 p-b-3">
-                <div class="col-lg-4 m-b-2">
-                    <img src="./lesspass.gif" alt="open source" class="img-fluid">
+            <div class="row p-y-3">
+                <div class="col-lg-6 p-y-2">
+                    <h5>{{ $t('how_it_works.always_sync') }}</h5>
+                    <p>
+                        {{ $t('how_it_works.always_sync_detail') }}
+                    </p>
+                </div>
+                <div class="col-lg-6">
+                    <img src="./responsive.png" alt="logo" class="img-fluid">
+                </div>
+            </div>
+            <div class="row p-y-3">
+                <div class="col-lg-3 col-lg-offset-2 text-xs-center col-md-4 col-md-offset-1">
+                    <img src="./logo.png" alt="logo" class="img-fluid">
                 </div>
-                <div class="col-lg-7">
-                    <div class="media m-b-3">
-                        <div class="media-body">
-                            <h4 class="media-heading">{{ $t('how_it_works.no_sync') }}</h4>
-                            <p class="lead">
-                                {{ $t('how_it_works.no_sync_detail') }}
-                            </p>
-                        </div>
-                    </div>
-                    <div class="media m-b-3">
-                        <div class="media-body">
-                            <h4 class="media-heading">{{ $t('how_it_works.derivation') }}</h4>
-                            <p class="lead">
-                                {{ $t('how_it_works.derivation_detail') }}
-                            </p>
-                        </div>
-                    </div>
+                <div class="col-lg-6 p-y-2 col-md-6 col-md-offset-1">
+                    <h5>{{ $t('how_it_works.derivation') }}</h5>
+                    <p>
+                        {{ $t('how_it_works.derivation_detail') }}
+                    </p>
+                </div>
+            </div>
+            <div class="row p-y-3">
+                <div class="col-lg-6 col-md-10">
+                    <h5>{{ $t('how_it_works.self_hosting') }}</h5>
+                    <p>
+                        {{ $t('how_it_works.self_hosting_detail') }}
+                    </p>
+                    <pre id="how-it-works__self_hosted"><code>git clone https://github.com/lesspass/lesspass
+cd lesspass
+docker-compose up -d</code></pre>
+
                 </div>
             </div>
         </div>

app/landing-page/image-separator/image-separator.vue

@@ -1,34 +0,0 @@
-<style>
-    #image-separator #image-separator__top {
-        background-color: #134a6a;
-            min-height: 20vh;
-    }
-
-    #image-separator #image-separator__bottom {
-        background-color: #1B2529;
-        min-height: 40vh;
-    }
-
-    #image-separator img{
-        margin-bottom: -35vh;
-    }
-
-</style>
-<template>
-    <div id="image-separator">
-        <div id="image-separator__top" class="text-xs-center">
-            <div class="container">
-                <div class="row">
-                    <div class="col-lg-8 col-lg-offset-2" v-if="$t('lang') == 'en'">
-                        <img src="./story-en.png" class="img-fluid" alt="what is lesspass"/>
-                    </div>
-                    <div class="col-lg-8 col-lg-offset-2" v-if="$t('lang') == 'fr'">
-                        <img src="./story-fr.png" class="img-fluid" alt="qu'est ce que lesspass"/>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div id="image-separator__bottom">
-        </div>
-    </div>
-</template>

app/landing-page/index.vue

@@ -3,9 +3,8 @@
         <lesspass-navbar></lesspass-navbar>
         <lesspass-hero></lesspass-hero>
         <lesspass-features></lesspass-features>
+        <lesspass-testimonials></lesspass-testimonials>
         <lesspass-howitworks></lesspass-howitworks>
-        <lesspass-feedback></lesspass-feedback>
-        <lesspass-image></lesspass-image>
         <lesspass-footer></lesspass-footer>
     </div>
 </template>
@@ -14,8 +13,7 @@
     import LesspassHero from './hero/hero.vue';
     import LesspassFeatures from './features/features.vue';
     import LesspassHowitworks from './howitworks/howitworks.vue';
-    import LesspassFeedback from './feedback/feedback.vue';
-    import LesspassImage from './image-separator/image-separator.vue';
+    import LesspassTestimonials from './testimonials/testimonials.vue';
     import LesspassFooter from './footer/footer.vue';
 
     export default {
@@ -27,8 +25,7 @@
             LesspassHero,
             LesspassFeatures,
             LesspassHowitworks,
-            LesspassFeedback,
-            LesspassImage,
+            LesspassTestimonials,
             LesspassFooter
         }
     }

app/landing-page/feedback/feedback.vue → app/landing-page/testimonials/testimonials.vue

@@ -1,16 +1,16 @@
 <style>
-    .lesspass-feedback {
-        background-color: #134a6a;
-        color: #D3D8E8;
+    #testimonials {
+        background-color: #202020;
+        color: #f2f2f2;
     }
 
-    .lesspass-feedback .thumbnail {
+    #testimonials .thumbnail {
         width: 42px;
     }
 </style>
 <template>
-    <div class="lesspass-feedback p-y-3">
-        <div class="container">
+    <div id="testimonials">
+        <div class="container p-y-3">
             <div class="row m-y-3">
                 <div class="col-lg-10 col-lg-offset-1">
                     <div class="media">
@@ -18,7 +18,7 @@
                             <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>
+                            <h5 class="media-heading">{{{ $t('feedback.feedback_1') }}}</h5>
                             <p>{{{ $t('feedback.feedback_1_author') }}}</p>
                         </div>
                     </div>
@@ -28,7 +28,7 @@
                 <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>
+                            <h5 class="media-heading">{{{ $t('feedback.feedback_2') }}}</h5>
                             <p>{{{ $t('feedback.feedback_2_author') }}}</p>
                         </div>
                         <a class="media-right" href="#">

app/locales.js

@@ -5,8 +5,8 @@ const locales = {
     "en": {
         "lang": "en",
         "headlines": {
-            "title": "Open Source<br>Password Generator",
-            "subtitle": "generate an unique password based on the information you provide"
+            "title": "Open Source<br>Password Manager",
+            "subtitle": "replaces all your tools that record your passwords as LastPass, 1Password, Keepass, Excel spreadsheet, post it, etc ..."
         },
         "footer": {
             "created_by": "created by"
@@ -33,15 +33,17 @@ const locales = {
             "no_cloud": "LessPass regenerates your passwords when you need them. No cloud storage is required",
             "responsive": "LessPass is a web application and works on all devices (computer, smartphone, tablet and your smartTV)",
             "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"
+            "free": "LessPass is free<br>and always will be"
         },
         "how_it_works": {
             "title": "How LessPass works ?",
-            "subtitle": "LessPass is a password generator that guarantees you to generate the same password on the basis of unique information you provide. You can use LessPass to create passwords for various internet services (social networks , email, server passwords , ...).",
-            "no_sync": "No storage",
-            "no_sync_detail": "LessPass don’t need any cloud storage. It’s a webapp, with some Javascript, that derive your password in a secure way.",
+            "detail": "LessPass is a password manager that guarantees you to generate the same password on the basis of unique information you provide. You can use LessPass to create passwords for various internet services (social networks , email, server passwords , ...).",
+            "always_sync": "No synchronisation",
+            "always_sync_detail": "LessPass don’t need any cloud storage. It’s a webapp, with some Javascript, that derive your password in a secure way.",
             "derivation": "Math and Crypto",
-            "derivation_detail": "LessPass use different key derivation functions to transform your personal information into an unique password. These transformations are robust against brute force attacks."
+            "derivation_detail": "LessPass use different key derivation functions to transform your personal information into an unique password. These transformations are robust against brute force attacks.",
+            "self_hosting": "Self hosted ",
+            "self_hosting_detail": "LessPass can be hosted on your server :"
         },
         "feedback": {
             "feedback_1": "Finally a security tool that I did not need to trust.",
@@ -57,8 +59,8 @@ const locales = {
     "fr": {
         "lang": "fr",
         "headlines": {
-            "title": "Générateur de mot de passe open source",
-            "subtitle": "construit un mot de passe unique lorsque vous en avez besoin sur la base d'informations uniques que vous lui fournissez. Plus besoin de synchronisation entre appareils."
+            "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..."
         },
         "footer": {
             "created_by": "créé par"
@@ -83,17 +85,19 @@ const locales = {
             "open_source_title": "Open Source",
             "free_title": "Gratuit",
             "no_cloud": "LessPass régénère vos mots de passe à chaque fois que vous en avez besoin.<br>Aucun stockage sur le cloud n'est nécessaire",
-            "responsive": "LessPass est une application web qui fonctionne sur tous les appareils : <br>ordinateur, smartphone, tablette et smartTV",
+            "responsive": "LessPass est une application web qui fonctionne<br>sur tous les appareils :<br>ordinateur, smartphone, tablette et smartTV",
             "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 fonctionne LessPass ?",
-            "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, ...).",
-            "no_sync": "Pas besoin de synchronisation",
-            "no_sync_detail": "LessPass est une solution open source, qui ne nécessite pas de stockage pour synchroniser les informations. Il s'agit d'une application web qui dérive vos mots de passe de manière sécurisée.",
+            "detail": "LessPass est un gestionnaire de mot de passe qui n'enregistre pas vos mots de passe. Il les regénère 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, ...).",
+            "always_sync": "Pas besoin de synchronisation",
+            "always_sync_detail": "Vous n'avez plus besoin de synchroniser sur le cloud vos coffres fort pour mots de passe. LessPass est une application web qui dérive vos mots de passe de manière sécurisée.",
             "derivation": "Mathématique et chiffrement",
-            "derivation_detail": "LastPass utilise différentes fonctions de dérivation pour transformer vos informations personnelles en un mot de passe unique. Ces transformations sont robustes aux attaques par force brute."
+            "derivation_detail": "LastPass utilise différentes fonctions de dérivation pour transformer vos informations personnelles en un mot de passe unique. Ces transformations sont robustes aux attaques par force brute.",
+            "self_hosting": "Auto Hébergement",
+            "self_hosting_detail": "Vous pouvez héberger LessPass sur vos serveurs :"
         },
         "feedback": {
             "feedback_1": "Enfin un outil de sécurité a qui je n'ai pas besoin de faire confiance.",