Add components demos,add FA and other css,add choicebox component

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="app">
-<softbox img="/img/gchange.491cb4ae.svg" name="gchange" desc="gchange est un market place"/>
+    <choicebox buttons="jacky,tunning,arduino,coucou" links="gnie,gchange,g1bien,petitecolo"/>
+<softbox img="/assets/gchange.svg" name="gchange" desc="gchange est un market place"/>
 
 
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
@@ -159,6 +160,7 @@
        d="m 93.85536,145.99908 c -0.94233,0.63707 -1.87139,1.35377 -2.07048,1.59267 -0.10617,0.13273 -0.50434,0.3849 -0.88924,0.54417 -0.37162,0.17254 -0.7167,0.41144 -0.75652,0.54416 -0.0531,0.13272 -0.27871,0.35835 -0.50435,0.50435 -0.2389,0.14599 -0.51761,0.43798 -0.63706,0.63707 -0.19909,0.37162 -0.19909,0.37162 0.6238,1.15468 0.45125,0.43799 0.91578,0.95561 1.02196,1.16797 0.10618,0.21235 0.41144,0.49107 0.66361,0.61052 0.25218,0.11945 0.50435,0.27872 0.54417,0.34508 0.0796,0.13272 2.08374,1.36704 2.84027,1.75194 0.25217,0.13272 0.67688,0.27872 0.92905,0.31853 0.26545,0.0531 0.65034,0.19909 0.87598,0.34508 0.21235,0.13273 0.50434,0.2389 0.62379,0.2389 0.22563,0 1.73867,0.43799 2.3492,0.67689 0.21235,0.0929 0.34507,0.0929 0.41144,0 0.0531,-0.0929 0.70343,-0.13272 1.85812,-0.0929 1.32722,0.0398 1.96429,0 2.50846,-0.14599 0.41144,-0.11945 1.07505,-0.25217 1.47322,-0.29199 0.39816,-0.0531 0.96888,-0.21236 1.26086,-0.37162 0.70343,-0.35836 1.60595,-0.7698 2.18993,-0.98215 0.25217,-0.10618 0.66361,-0.37163 0.90251,-0.61053 0.23891,-0.2389 0.59726,-0.4778 0.79634,-0.51762 0.19908,-0.0531 0.53089,-0.2389 0.72998,-0.41144 0.21235,-0.15926 0.42471,-0.30526 0.4778,-0.30526 0.0531,0 0.30526,-0.27872 0.57071,-0.63707 0.26544,-0.34508 0.61052,-0.75652 0.75652,-0.91579 0.43798,-0.46453 0.50434,-1.03523 0.14599,-1.32722 -0.17254,-0.13273 -0.4778,-0.42472 -0.69016,-0.66362 -0.21235,-0.22563 -0.58398,-0.49107 -0.80961,-0.58398 -0.42471,-0.15927 -1.08832,-0.67688 -1.9112,-1.45995 -0.50435,-0.49107 -1.64576,-1.31395 -1.81831,-1.31395 -0.0664,0 -0.39816,0.25217 -0.74324,0.55743 -0.88924,0.79634 -1.69886,1.3405 -2.38901,1.61922 -0.33181,0.13272 -0.82288,0.35835 -1.11487,0.50435 -0.45126,0.2389 -0.75653,0.26544 -2.46865,0.26544 -1.67231,0 -2.01738,-0.0398 -2.46864,-0.26544 -0.27872,-0.13273 -0.69016,-0.29199 -0.91579,-0.34508 -0.58398,-0.146 -1.45995,-0.75652 -2.97299,-2.07048 -0.54416,-0.4778 -0.76979,-0.49107 -1.39359,-0.0664 z"
        id="path3773-5"
        style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.01327228;stroke-opacity:1;image-rendering:auto" />
+
     <path
        inkscape:connector-curvature="0"
        d="m 100.66404,223.70827 c -0.10618,0.0664 -0.51762,0.21236 -0.91579,0.33181 -0.86269,0.27871 -1.40686,0.65034 -2.33592,1.59267 -0.7167,0.74325 -0.82288,0.92906 -1.24759,2.42883 -0.30527,1.04851 -0.29199,1.87139 0.0531,2.95972 0.38489,1.26086 1.40686,2.76063 2.11029,3.11898 0.22563,0.11945 0.59725,0.35835 0.79634,0.53089 0.2389,0.19909 0.54416,0.31854 0.83615,0.31854 0.2389,0 0.69016,0.0929 0.98215,0.21235 0.57071,0.22563 0.78306,0.21236 2.25628,-0.18581 1.28742,-0.34508 3.31808,-1.79176 3.31808,-2.36246 0,-0.0531 0.10617,-0.22564 0.2389,-0.37163 0.35835,-0.39817 0.83615,-1.93775 0.84942,-2.76063 0,-0.41144 -0.10618,-1.04851 -0.27872,-1.52631 -0.14599,-0.45126 -0.27871,-0.91579 -0.27871,-1.0087 0,-0.15927 -0.7698,-1.27414 -1.12815,-1.61921 -1.04851,-1.02197 -2.38901,-1.60595 -3.92859,-1.69886 -0.6238,-0.0265 -1.22105,-0.0133 -1.32723,0.0398 z"
@@ -173,14 +175,17 @@
 
 <script>
 import softbox from './components/SoftBox.vue'
-
+import choicebox from './components/ChoiceBox.vue'
 export default {
   name: 'app',
   components: {
     softbox,
+    choicebox,
   },
   data: function(){
-    this.stroke ="#000000"
+    return{
+      
+    }
   }
 }
 </script>

src/assets/fonts/stylesheet.css

@@ -0,0 +1,24 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 24, 2020 */
+
+
+
+@font-face {
+    font-family: 'robotobold';
+    src: url('roboto-bold-webfont.woff2') format('woff2'),
+         url('roboto-bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'robotoregular';
+    src: url('roboto-regular-webfont.woff2') format('woff2'),
+         url('roboto-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

src/assets/styles.css

@@ -0,0 +1,61 @@
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-bold-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-bold-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-regular-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+.button-redirect{
+  border:none;
+  background-color:#0483d8;
+  height:40px;
+  color:white;
+  text-decoration: none;
+}
+.button-redirect:hover{
+border:#0483d8 solid 2px;
+transition:0.4s;
+background-color:white;
+color:#0483d8;
+text-decoration: none;
+}
+.button-donate{
+  border:none;
+  background-color:#0483d8;
+  height:40px;
+  color:white;
+  position:relative;
+}
+.button-donate::before{
+  content: "\25AE";
+  font-family: "FontAwesome";
+  left:10px;
+position:absolute;
+top:0;
+}
+.button-donate:hover{
+border:#0483d8 solid 2px;
+transition:0.4s;
+background-color:white;
+color:#0483d8;
+}
+p{
+font-family: roboto;
+}
+h2{
+  font-family: roboto;
+}

src/components/ChoiceBox.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="app">
+    <h2>Nous avons trouvés plusieurs résultats pour vous</h2>
+    <!--
+    <p>
+      RÉSULTATS DE DÉBUG<br>
+    String :  {{buttons}} <br>
+    Array :  {{buttons_array}}<br>
+    String : {{links}}<br>
+    Array : {{links_array}}<br>
+  </p>-->
+    <button v-for="item in buttons_array" :key="item" class="button-redirect">{{ item }}</button>
+    <li v-for="f in fruit" :key="f">
+      {{ f.buttonsMessage }}
+      {{ f.linksMessage }}
+    </li>
+
+    <!--
+    <ul id="example-1" >
+      <button class="button-redirect">Gchange</button>
+      <li v-for="item in buttons_array" :key="item">
+        <button class="button-redirect">{{ item }}</button>
+      </li>
+      <li v-for="item in links_array" :key="item">
+        {{ item }}
+      </li>
+    </ul>
+-->
+
+  </div>
+</template>
+<script>
+
+export default {
+ el: '#app',
+  data: function() {
+
+    return {
+
+
+buttons_array: '',
+links_array: '',
+
+};
+  },
+  created: function(){
+    this.split_buttons(),
+    this.split_links()
+  },
+  computed: {
+    list() {
+      const list = []
+      for (let i = 0, len = Math.max(this.buttons_array.length, this.links_array.length); i < len; i++) {
+        list.push({
+          buttonsMessage: this.buttons[i] && this.buttons[i].message || 'no buttons message',
+          linksMessage: this.links[i] && this.links[i].message || 'no links message'
+        })
+      }
+      return list
+    }
+  },
+props: {
+buttons:String,
+links:String,
+},
+
+methods:{
+  split_buttons: function () {
+this.buttons_array = this.buttons.split(",");
+},
+split_links: function () {
+this.links_array = this.links.split(",");
+}
+}
+
+}
+</script>
+<style>
+li{
+list-style-type: none;
+}
+</style>

src/components/SoftBox.vue

@@ -4,6 +4,7 @@
 <section class="col">
   <h3>{{name}}</h3>
   <p>{{desc}}</p>
+  <button href="https://gchange.fr" class="button-donate">Aller</button>
 </section>
 
 </div>
@@ -17,9 +18,6 @@ export default {
     desc:String
   },
 
-  data: function () {
-    this.imgBox = this.img
-  }
 }
 </script>
 <style>
@@ -32,4 +30,5 @@ border:2px solid black;
   display:flex;
   flex-direction: column;
 }
+
 </style>

src/main.js

@@ -3,6 +3,8 @@ import App from './App.vue'
 
 Vue.config.productionTip = false
 
+import "@/assets/styles.css"
+import "@/assets/fontawesome.min.css"
 new Vue({
   render: h => h(App),
 }).$mount('#app')