From dd19c6d57ab3e917b176064af2e334f8b1961032 Mon Sep 17 00:00:00 2001
From: Kekskurse <git@kekskurse.de>
Date: Sun, 11 Aug 2019 22:55:26 +0200
Subject: [PATCH] Change Startpage

---
 src/plugins/vuetify.js  |  4 +-
 src/views/Startpage.vue | 84 ++++++++++++++++++++++++++---------------
 2 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index d42b80a6..f2596e71 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -5,6 +5,6 @@ Vue.use(Vuetify);
 
 export default new Vuetify({
   icons: {
-    iconfont: 'mdi',
+    iconfont: 'mdiSvg',
   },
-});
\ No newline at end of file
+});
diff --git a/src/views/Startpage.vue b/src/views/Startpage.vue
index 65c3ac85..364e7fae 100644
--- a/src/views/Startpage.vue
+++ b/src/views/Startpage.vue
@@ -4,43 +4,55 @@
     <h1>{{ nameBig }}<span class="small">{{ nameSmall }}</span></h1>
     <h2>{{ slogen }}</h2>
   </div>
-    <v-container grid-list-md pa-10 >
-      <v-layout row wrap>
-        <v-flex md12>
-          <h1>Services</h1>
-          <p>Mit deinem KeksAccount Username kannst du dich u.a. bei folgenden Servicen einloggen und diese nutzten. </p>
-        </v-flex>
-
-      </v-layout>
-      <v-layout row wrap>
-        <v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
-          <v-card>
-            <v-layout>
-              <v-flex xs5>
+    <v-container grid-list-md pa-10>
+     <v-layout wrap>
+       <v-flex v-for="i in 3" :key="`4${i}`" style="text-align: justify; padding-left: 10px; padding-right: 10px;" xs4>
+         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+       </v-flex>
+     </v-layout>
+    </v-container>
+    <template>
+      <v-carousel class="bg">
+        <v-carousel-item
+                v-for="(item, index) in apps"
+                :key="color"
+        >
+          <v-sheet
+                  color="transparent"
+                  height="100%"
+                  tile
+          >
+            <v-layout
+                    align-center
+                    fill-height
+                    justify-center
+            >
+              <v-container grid-list-md pa-10 style="margin-right: 20%;margin-left: 20%;">
+                <v-layout wrap>
+              <v-flex  xs4>
                 <v-img
                         :src="getImageUrl(item.id)"
                         height="125px"
                         contain
                 ></v-img>
               </v-flex>
-              <v-flex xs7>
-                <v-card-title primary-title>
-                  <div>
-                    <div class="headline">{{ item.name }}</div>
-                    <div>{{ item.description }}</div>
-                  </div>
-                </v-card-title>
+              <v-flex xs8>
+                <h1>{{ item.name }}</h1>
+                <p>{{ item.description }}</p>
               </v-flex>
-            </v-layout>
-            <v-divider light></v-divider>
-            <v-card-actions class="pa-3">
+                </v-layout>
+              </v-container>
 
-              <v-spacer></v-spacer>
-              <v-btn icon>
-                <v-icon @click="navigateToApp(item)">input</v-icon>
-              </v-btn>
-            </v-card-actions>
-          </v-card>
+            </v-layout>
+          </v-sheet>
+        </v-carousel-item>
+      </v-carousel>
+    </template>
+    <v-container grid-list-md pa-10>
+      <v-layout wrap>
+        <v-flex style="text-align: justify; padding-left: 10px; padding-right: 10px;" xs12>
+          <h3>Open Source</h3>
+          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         </v-flex>
       </v-layout>
     </v-container>
@@ -63,7 +75,14 @@
           { icon: 'info', title: 'Invited' },
           { icon: 'warning', title: 'Register' }
         ],
-        apps: []
+        apps: [],
+        colors: [
+          'primary',
+          'secondary',
+          'yellow darken-2',
+          'red',
+          'orange',
+        ],
       }
     },
     methods: {
@@ -86,6 +105,9 @@
 </script>
 
 <style>
+  .bg {
+    background-image: url('~@/assets/texture-1485529_1920.jpg');
+  }
 .headerStartpage {
   background-image: url('~@/assets/texture-1485529_1920.jpg');
   background-repeat: no-repeat;
@@ -94,7 +116,7 @@
   text-align: center;
 }
   .headerStartpage h1{
-    padding-top: 200px;
+    padding-top: 300px;
     font-size: 56px !important;
     font-weight: 400;
     line-height: 32px !important;