improve landing page

app/app.vue

@@ -1,29 +1,18 @@
 <template>
     <div id="app">
+        <lesspass-header></lesspass-header>
         <router-view></router-view>
     </div>
 </template>
-<!--<script>-->
-    <!--import LesspassNavbar from './navbar/navbar.vue';-->
-    <!--import LesspassHeader from './header/header.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 LesspassFooter from './footer/footer.vue';-->
+<script>
+    import LesspassHeader from './header/header.vue';
 
-    <!--export default {-->
-        <!--data: function () {-->
-            <!--return {}-->
-        <!--},-->
-        <!--components: {-->
-            <!--LesspassNavbar,-->
-            <!--LesspassHeader,-->
-            <!--LesspassFeatures,-->
-            <!--LesspassHowitworks,-->
-            <!--LesspassFeedback,-->
-            <!--LesspassImage,-->
-            <!--LesspassFooter-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
+    export default {
+        data: function () {
+            return {}
+        },
+        components: {
+            LesspassHeader
+        }
+    }
+</script>

app/header/header.vue

@@ -0,0 +1,20 @@
+<template>
+    <div id="header">
+        <lesspass-login></lesspass-login>
+        <lesspass-navbar></lesspass-navbar>
+    </div>
+</template>
+<script>
+    import LesspassLogin from './login.vue';
+    import LesspassNavbar from './navbar.vue';
+
+    export default {
+        data: function () {
+            return {}
+        },
+        components: {
+            LesspassLogin,
+            LesspassNavbar
+        }
+    }
+</script>

app/header/login.vue

@@ -0,0 +1,30 @@
+<style>
+    #login-bar {
+        background-color: #1a1a1a;
+        height: 38px;
+        color: #ffffff;
+    }
+
+    #login-bar .nav-link {
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    #login-bar .nav-link {
+        line-height: 38px;
+    }
+</style>
+<template>
+    <div id="login-bar">
+        <div class="container">
+            <nav class="nav nav-inline pull-right">
+                <a class="nav-link" href="#">
+                    <i class="fa fa-lock"></i> {{ $t('login.login') }}
+                </a>
+                <a class="nav-link bg-primary" href="#">
+                    <i class="fa fa-user-plus"></i> {{ $t('login.register') }}
+                </a>
+            </nav>
+        </div>
+    </div>
+</template>

app/1-header/header.vue → app/header/navbar.vue

@@ -1,8 +1,8 @@
 <style>
     #navbar {
-        background-color: #006699;
-        color: #ffffff;
-        margin: 0;
+        background-color: #f7f7f7;
+        color: #666666;
+        padding-top: 1em;
     }
 
     #navbar #navbar__logo {
@@ -20,7 +20,7 @@
                 <ul class="nav navbar-nav">
                     <li class="nav-item">
                         <a href="https://lesspass.com/">
-                            <img id="navbar__logo" src="./logo-white.png" alt="logo">
+                            <img id="navbar__logo" src="./logo.png" alt="logo">
                         </a>
                     </li>
                 </ul>

app/landing-page/footer/footer.vue

@@ -14,10 +14,9 @@
             </div>
             <div class="row p-y-3">
                 <div class="col-lg-12">
-                    <p class="lead">
+                    <p>
                         &copy; LessPass
-                        - {{ $t('footer.built_by') }} <a href="mailto:guillaume@oslab.fr">Guillaume Vincent</a>
-                        - <a href="https://github.com/lesspass">{{ $t('footer.contribute') }}</a>
+                        - {{ $t('footer.created_by') }} <a href="mailto:guillaume@oslab.fr">Guillaume Vincent</a>
                     </p>
                 </div>
             </div>

app/landing-page/header/header.vue

@@ -1,7 +1,7 @@
 <style>
     #header {
-        background-color: #006699;
-        color: #ffffff;
+        background-color: #f7f7f7;
+        color: #323232;
     }
 
     #header a {

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

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

app/locales.js

@@ -9,8 +9,7 @@ const locales = {
             "subtitle": "generate an unique password based on the information you provide"
         },
         "footer": {
-            "built_by": "built by",
-            "contribute": "contribute"
+            "created_by": "created by"
         },
         "passwordgenerator": {
             "who_are_you": "Email / Username",
@@ -39,8 +38,8 @@ const locales = {
         "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 need to sync",
-            "no_sync_detail": "LessPass is open source solution, that don’t need any cloud storage. It’s a webapp, with some Javascript, that derive your password in a secure way.",
+            "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.",
             "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."
         },
@@ -49,6 +48,10 @@ const locales = {
             "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"
+        },
+        "login": {
+            "login": "Login",
+            "register": "Register"
         }
     },
     "fr": {
@@ -58,8 +61,7 @@ const locales = {
             "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."
         },
         "footer": {
-            "built_by": "créé par",
-            "contribute": "contribuer"
+            "created_by": "créé par"
         },
         "passwordgenerator": {
             "who_are_you": "Email / Nom d'utilisateur",
@@ -98,6 +100,10 @@ const locales = {
             "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"
+        },
+        "login": {
+            "login": "Connexion",
+            "register": "Inscription"
         }
     }
 };

app/routes.js

@@ -9,15 +9,6 @@ Vue.use(Router);
 
 var router = new Router();
 
-
-var Foo = Vue.extend({
-    template: '<p>This is foo!</p>'
-});
-
-var Bar = Vue.extend({
-    template: '<p>This is bar!</p>'
-});
-
 router.map({
     '/': {
         auth: true,

assets/images/logo-white.svg

@@ -15,7 +15,7 @@
    width="400"
    height="90"
    sodipodi:docname="logo-white.svg"
-   inkscape:export-filename="/home/guillaume/workspace/lesspass/lesspass/app/assets/images/logo-white.png"
+   inkscape:export-filename="/home/guillaume/workspace/lesspass/lesspass/app/1-header/logo-green.png"
    inkscape:export-xdpi="80"
    inkscape:export-ydpi="80">
   <metadata
@@ -140,8 +140,8 @@
      id="namedview3041"
      showgrid="false"
      inkscape:zoom="0.60866769"
-     inkscape:cx="-110.86189"
-     inkscape:cy="46.95414"
+     inkscape:cx="191.43771"
+     inkscape:cy="112.67144"
      inkscape:window-x="33"
      inkscape:window-y="24"
      inkscape:window-maximized="1"
@@ -152,7 +152,7 @@
      inkscape:snap-bbox="false"
      showborder="true" />
   <path
-     style="opacity:0.90000000000000002;fill:#ffffff;fill-opacity:1;stroke:none;filter:url(#filter3097)"
+     style="opacity:0.90000000000000002;fill:#167fd9;fill-opacity:0.94117647;stroke:none;filter:url(#filter3097)"
      d="m 101.39259,-192.98373 c -5.751278,0.27568 -11.432799,2.6203 -15.843752,7.03125 l -50.96875,50.96874 c -9.410033,9.41003 -9.410033,24.55872 0,33.96875 l 50.96875,50.96875 c 9.410033,9.41003 24.558722,9.41003 33.968752,0 l 50.96875,-50.96875 c 9.41003,-9.41003 9.41003,-24.55872 0,-33.96875 l -50.96875,-50.96874 c -4.99908,-4.99908 -11.60689,-7.34369 -18.125,-7.03125 z m 0,30 c 0.38173,-0.0196 0.76987,0 1.15625,0 12.364,0 22.46875,10.13598 22.46875,22.49999 0,10.2795 -7.00683,18.97639 -16.46875,21.625 l 0,20.625 6.21875,0 c 0.126,0 0.21875,0.0928 0.21875,0.21875 l 0,10.25 c 0,0.1259 -0.0928,0.21875 -0.21875,0.21875 l -6.21875,0 0,3.875 6.21875,0 c 0.12098,-0.035 0.21875,0.0928 0.21875,0.21875 l 0,10.21875 c 0,0.1259 -0.0928,0.25 -0.21875,0.25 l -6.21875,0 -7.8125,0 -4.218752,0 0,-45.875 c -9.46194,-2.64861 -16.46875,-11.34551 -16.46875,-21.625 0,-11.97763 9.510121,-21.89377 21.343752,-22.49999 z m 1.15625,8.8125 c -7.596242,0 -13.656252,6.09122 -13.656252,13.68749 0,7.59632 6.06001,13.625 13.656252,13.625 7.59627,0 13.625,-6.02868 13.625,-13.625 0,-7.59627 -6.02873,-13.68749 -13.625,-13.68749 z"
      id="rect3044"
      inkscape:connector-curvature="0"
@@ -162,7 +162,7 @@
      inkscape:export-ydpi="63" />
   <text
      xml:space="preserve"
-     style="font-size:72.84078979px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:100%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Manga Temple;-inkscape-font-specification:Manga Temple"
+     style="font-size:72.84078979000000231px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:100%;letter-spacing:0px;word-spacing:0px;fill:#666666;fill-opacity:1;stroke:none;font-family:Manga Temple;-inkscape-font-specification:Manga Temple"
      x="98.325371"
      y="72.074348"
      id="text3050"
@@ -174,5 +174,5 @@
        id="tspan3052"
        x="98.325371"
        y="72.074348"
-       style="font-size:87.40895081px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:100%;letter-spacing:-4.14706755px;fill:#ffffff;fill-opacity:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">lesspass</tspan></text>
+       style="font-size:87.40895080999997901px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:100%;letter-spacing:-4.14706755000000005px;fill:#323232;fill-opacity:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">lesspass</tspan></text>
 </svg>