feat: home page

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

package.json

@@ -1,5 +1,6 @@
 {
   "name": "it-tools",
+  "description": "",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/App.vue

@@ -118,24 +118,6 @@
         font-weight: 300 !important;
     }
 
-    /*    footer {*/
-    /*        display: flex;*/
-    /*        flex-direction: row;*/
-    /*        justify-content: space-between;*/
-    /*        color: rgba(255, 255, 255, 0.52) !important;*/
-
-    /*        .footer-link {*/
-    /*            text-decoration: none;*/
-    /*            color: rgba(255, 255, 255, 0.52) !important;*/
-    /*            border-bottom: 1px dashed;*/
-
-    /*            &:hover {*/
-    /*                color: #4CAF50 !important;*/
-    /*                border-bottom: 1px solid;*/
-    /*            }*/
-    /*        }*/
-    /*    }*/
-
     .title {
         text-decoration: none;
         color: #fff !important;

src/routes/Home.vue

@@ -1,16 +1,86 @@
 <template>
-  <v-card>
+    <v-card class="single-card">
-    <v-card-text>
+        <v-card-text>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at cumque dolore dolores, dolorum eius error est eum eveniet hic illum ipsum labore minus odio quibusdam repudiandae sed ullam veritatis!
+            <div class="card-wrapper ">
-    </v-card-text>
+                <div v-for="item in items" :key="item.text" class="pa-2">
-  </v-card>
+                    <v-card class="card-element" color="primary" :to="item.path">
+                        <v-card-text>
+                            <v-icon>{{ item.icon }}</v-icon>
+                            <div class="item-title">{{item.text}}</div>
+                        </v-card-text>
+                    </v-card>
+                </div>
+            </div>
+        </v-card-text>
+    </v-card>
 </template>
 
 <script>
+    import {toolsComponentsFlat} from "../router";
 
-export default {
+    export default {
-  name: 'Home',
+        name: 'Home',
-  components: {
+        data: () => ({
-  }
+            items: toolsComponentsFlat
-}
+        })
+    }
 </script>
+
+<style lang="less" scoped>
+    .card-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        div {
+            flex: 1 1 33%;
+
+            @media only screen and (max-width: 620px) {
+                flex: 0 1 50%;
+            }
+            @media only screen and (max-width: 450px) {
+                flex: 0 1 220px;
+            }
+            @media only screen and (max-width: 300px) {
+                flex: 0 1 100%;
+            }
+
+            .card-element {
+                border-radius: 24px 4px !important;
+                color: #ffffff !important;
+                font-weight: bold !important;
+                text-align: center;
+                transition: 0.2s ease;
+                position: relative;
+                top: 0;
+
+                &:hover {
+                    position: relative;
+                    top: -5px;
+                    opacity: 0.9;
+                }
+
+                .v-icon {
+                    font-size: 50px;
+                    color: #ffffff;
+                    margin: 15px 0;
+                    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+
+                }
+
+                .item-title {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 18px;
+                    line-height: 22px;
+                    height: 44px;
+                    opacity: 1;
+                    color: #ffffff;
+                    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+
+                }
+            }
+        }
+    }
+</style>