add story image by Nanou

app/app.vue

@@ -28,7 +28,7 @@
 <script>
     import LesspassHeader from './components/header/header.vue';
     import LesspassHeadlines from './components/headlines.vue';
-    import LesspassJumbotron from './components/jumbotron.vue';
+    import LesspassJumbotron from './components/jumbotron/jumbotron.vue';
     import PasswordGenerator from './components/password-generator.vue';
     import LesspassFeatures from './components/features/features.vue';
     import BootstrapHr from './components/bootstrap-hr.vue';

app/components/jumbotron.vue → app/components/jumbotron/jumbotron.vue

@@ -7,7 +7,17 @@
     <div class="container">
         <div class="jumbotron">
             <div class="row">
-                <div class="col-lg-12">
+                <div class="col-lg-8">
+                    <div v-if="$t('lang') == 'en'">
+                        <img src="story-en.png" class="img-fluid" alt="what is lesspass"/>
+                    </div>
+                    <div v-if="$t('lang') == 'fr'">
+                        <img src="story-fr.png" class="img-fluid" alt="qu'est ce que lesspass"/>
+
+                    </div>
+                    <small>&copy; Nanou</small>
+                </div>
+                <div class="col-lg-4 m-t-1">
                     <p class="lead">
                         <a href='https://lesspass.com/'>LessPass</a> {{ $t('what_is_lesspass') }}
                     </p>

app/locales/locales.js

@@ -23,6 +23,7 @@ const locales = {
         "uppercase_options": "UPPERCASE (A-Z)",
         "numbers_options": "numbers (0-9)",
         "symbols_options": "symbols (@&%?)",
+        "lang": "en",
         "Length": "Length"
     },
     "fr": {
@@ -49,6 +50,7 @@ const locales = {
         "uppercase_options": "MAJUSCULES (A-Z)",
         "numbers_options": "nombres (0-9)",
         "symbols_options": "caractères spéciaux (@&%?)",
+        "lang": "fr",
         "Length": "Longueur"
     }
 };