Added OasisFeatures.vue and OasisHeader.vue

resources/js/Oasis/Homepage/Components/OasisFeatures.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="oasis-features text-center">
+
+        <div class="title-wrapper container">
+            <h3 class="main-title">
+                Proč je OasisDrive Výnimočný?
+            </h3>
+            <h4 class="sub-title-sm">
+                Cloudové uložiště je v podstatě virtuální šanon, kam uživatelé ukládají svá data, ke kterým se mohou přihlásit odkudkoli v nezávislosti na zařízení. OasisDrive umožňuje bezpečně chránit Vaše firemní data.
+            </h4>
+        </div>
+
+        <ul class="features-box container">
+            <li v-for="(feature, i) in features" :key="i" class="box">
+                <cloud-icon v-if="feature.icon === 'cloud'" size="56" class="box-icon" />
+                <file-text-icon v-if="feature.icon === 'file'" size="56" class="box-icon" />
+                <lock-icon v-if="feature.icon === 'lock'" size="56" class="box-icon" />
+
+                <h5 class="box-title">
+                    {{ feature.title }}
+                </h5>
+                <p class="box-description">
+                    {{ feature.excerp }}
+                </p>
+                <div class="box-more-info">
+                    <span>Více Informací</span>
+                    <chevron-right-icon size="18" class="icon"/>
+                </div>
+            </li>
+        </ul>
+
+        <router-link :to="{name: 'SignUp'}" class="base-button theme-color cta">
+            Vyzkouset OasisDrive
+        </router-link>
+    </div>
+</template>
+
+<script>
+    import {
+        ChevronRightIcon,
+        FileTextIcon,
+        CloudIcon,
+        LockIcon,
+    } from 'vue-feather-icons'
+    import { mapGetters } from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'OasisFeatures',
+        components: {
+            ChevronRightIcon,
+            FileTextIcon,
+            CloudIcon,
+            LockIcon,
+        },
+        computed: {
+            ...mapGetters([
+                'config'
+            ]),
+        },
+        data() {
+            return {
+                features: [
+                    {
+                        icon: 'lock',
+                        title: 'Bezpecnost na prvnim miste',
+                        excerp: 'Naše cloudové uložiště umožňuje bezpečně chránit Vaše firemní data. kdy využíváme několik vysoce zabezpečených serverů po Evropské unii a vícenásobným šifrováním souborů (tzv. kryptováním). ',
+                        content: '',
+                    },
+                    {
+                        icon: 'file',
+                        title: 'Bezpečnost v rámci GDPR',
+                        excerp: 'bezpečnost uložení dat v rámci evropské směrnice o GDPR a přidružených zákonů o zpracování a ochraně citlivých údajů. Naši klienti jsou tedy chráněni před zneužitím dat a tím pádem i před pokutami vyplývajícími z legislativy, které být astronomické. ',
+                        content: '',
+                    },
+                    {
+                        icon: 'cloud',
+                        title: 'Jednoduchost pouzivani',
+                        excerp: 'Naše cloudové uložiště umožňuje bezpečně chránit Vaše firemní data. kdy využíváme několik vysoce zabezpečených serverů po Evropské unii a vícenásobným šifrováním souborů (tzv. kryptováním). ',
+                        content: '',
+                    },
+                ]
+            }
+        },
+        mounted() {
+
+        },
+        created() {
+            this.$scrollTop()
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/oasis/_components';
+    @import '@assets/oasis/_homepage';
+    @import '@assets/oasis/_responsive';
+</style>

resources/js/Oasis/Homepage/Components/OasisHeader.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="oasis-header">
+        <nav class="navigation container">
+            <router-link :to="{name: 'Homepage'}" tag="div" class="logo">
+                <img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name">
+                <b v-if="! config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
+            </router-link>
+            <ul class="links">
+                <li v-for="(item, i) in navigation" :key="i">
+                    <a :href="`#${item.href}`">{{ item.title }}</a>
+                </li>
+            </ul>
+            <div class="log-in">
+                <router-link :to="{name: 'SignIn'}" class="base-button theme-color">
+                    Prihlásit se
+                </router-link>
+            </div>
+        </nav>
+
+        <header class="header container">
+            <h1 class="main-title">
+                Jednoduchý a Bezpečný Cloud vo Vrecku
+            </h1>
+            <h2 class="sub-title">
+                Virtuální šanon, vždy s tebou.
+            </h2>
+            <router-link :to="{name: 'SignUp'}" class="theme-button">
+                Zaregistrujte se
+            </router-link>
+            <span class="log-in">
+                alebo <router-link :to="{name: 'SignIn'}">prihláste se</router-link>
+            </span>
+        </header>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    export default {
+        name: 'Header',
+        components: {
+
+        },
+        computed: {
+            ...mapGetters([
+                'config'
+            ]),
+        },
+        data() {
+            return {
+                navigation: [
+                    {
+                        title: 'O Nás',
+                        href: 'o-nas',
+                    },
+                    /*{
+                        title: 'Kariéra',
+                        href: 'kariera',
+                    },*/
+                    {
+                        title: 'Ceník',
+                        href: 'cenik',
+                    },
+                    {
+                        title: 'Podpora',
+                        href: 'podpora',
+                    },
+                ],
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/oasis/_components';
+    @import '@assets/oasis/_homepage';
+    @import '@assets/oasis/_responsive';
+</style>

resources/js/Oasis/Homepage/Homepage.vue

@@ -1,16 +1,21 @@
 <template>
-    <h1>hello oasis</h1>
+    <div id="page">
+        <OasisHeader v-if="false"/>
+        <OasisFeatures v-if="true"/>
+    </div>
 </template>
 
 <script>
-    //import HeroScreenshot from '@/components/Index/IndexHeroScreenshot'
+    import OasisHeader from '@/Oasis/Homepage/Components/OasisHeader'
+    import OasisFeatures from '@/Oasis/Homepage/Components/OasisFeatures'
     import { mapGetters } from 'vuex'
     import axios from 'axios'
 
     export default {
         name: 'Homepage',
         components: {
-
+            OasisFeatures,
+            OasisHeader,
         },
         computed: {
             ...mapGetters([
@@ -19,7 +24,7 @@
         },
         data() {
             return {
-                isLoading: false,
+
             }
         },
         mounted() {
@@ -32,5 +37,7 @@
 </script>
 
 <style lang="scss" scoped>
-
+    @import '@assets/oasis/_components';
+    @import '@assets/oasis/_homepage';
+    @import '@assets/oasis/_responsive';
 </style>