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>

resources/sass/oasis/_components.scss

@@ -0,0 +1,65 @@
+@import '@assets/vuefilemanager/_mixins';
+@import '@assets/oasis/_variables';
+
+.text-center {
+  text-align: center;
+}
+
+.main-title {
+  @include font-size(62);
+  font-weight: 900;
+  line-height: 1.1;
+  margin-bottom: 16px;
+}
+
+.sub-title {
+  @include font-size(25);
+  font-weight: 600;
+}
+
+.sub-title-sm {
+  @include font-size(23);
+  font-weight: 600;
+  line-height: 1.6;
+}
+
+.theme-button {
+  display: inline-block;
+  @include font-size(22);
+  background: $gradient-theme;
+  border-radius: 50px;
+  color: white;
+  padding: 18px 42px;
+  font-weight: 700;
+  box-shadow: 0 8px 24px -12px #800DF2;
+  @include transition(150ms);
+
+  &:hover {
+    @include transform(scale(1.03));
+  }
+
+  &:active {
+    @include transform(scale(0.97));
+  }
+}
+
+.base-button {
+  padding: 16px 30px;
+  box-shadow: 0 8px 24px -12px #800DF250;
+  border-radius: 50px;
+  @include font-size(17);
+  @include transition(150ms);
+  background: white;
+  display: inline-block;
+  font-weight: 800;
+  color: $theme;
+
+  &:hover {
+    background: $theme;
+    color: white;
+  }
+
+  &:active {
+    @include transform(scale(0.97));
+  }
+}

resources/sass/oasis/_homepage.scss

@@ -0,0 +1,184 @@
+@import '@assets/vuefilemanager/_mixins';
+@import '@assets/oasis/_variables';
+
+.container {
+  width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.oasis-header {
+  padding-top: 45px;
+  background: linear-gradient(180deg, rgba(149, 189, 230, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
+}
+
+.oasis-features {
+  background: $theme-bg-dark;
+
+  .title-wrapper {
+    margin-bottom: 90px;
+  }
+
+  .main-title {
+    color: white;
+  }
+
+  .sub-title-sm {
+    color: $text-dark-subtitle;
+  }
+
+  .features-box {
+    margin-bottom: -175px;
+  }
+
+  .cta {
+    top: 240px;
+    position: relative;
+  }
+}
+
+.navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+
+  .log-in, .logo {
+    width: 235px;
+  }
+
+  .links {
+    display: block;
+
+    li {
+      display: inline-block;
+
+      a {
+        @include font-size(17);
+        padding: 9px 30px;
+        color: $text-primary;
+        font-weight: 800;
+        @include transition;
+        border-radius: 25px;
+
+        &:hover {
+          background: white;
+          box-shadow: 0 6px 20px -10px rgba($theme, 0.35);
+        }
+      }
+    }
+  }
+
+  .logo img {
+    width: 100%;
+  }
+
+  .log-in {
+    text-align: right;
+  }
+}
+
+.header {
+  display: block;
+  text-align: center;
+
+  .log-in {
+    display: block;
+
+    a {
+      @include transition(150ms);
+      font-weight: 700;
+      text-decoration: underline;
+
+      &:hover {
+        color: $theme;
+      }
+    }
+  }
+}
+
+.features-box {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 60px;
+
+  .box {
+    background: $theme-bg-light;
+    box-shadow: 0 22px 34px -20px #232142;
+    border-radius: 12px;
+    text-align: center;
+    padding: 45px 25px;
+    display: block;
+
+    .box-title {
+      color: white;
+      margin-top: 30px;
+      margin-bottom: 25px;
+      @include font-size(32);
+    }
+
+    .box-description {
+      color: $text-dark-secondary;
+      @include font-size(19);
+      line-height: 1.6;
+      margin-bottom: 25px;
+    }
+
+    .box-more-info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+
+      .icon {
+        margin-left: 5px;
+
+        polyline {
+          color: $theme;
+          @include transition(150ms);
+        }
+      }
+
+      span {
+        @include font-size(17);
+        color: $theme;
+        font-weight: 700;
+        @include transition(150ms);
+      }
+
+      &:hover {
+        span, polyline {
+          color: lighten($theme, 10%);
+        }
+      }
+    }
+
+    &:nth-child(1) {
+
+      .box-icon {
+        rect, path {
+          color: $theme;
+        }
+      }
+    }
+
+    &:nth-child(2) {
+
+      .box-icon {
+        line, polyline, path {
+          color: $cyan;
+        }
+      }
+    }
+
+    &:nth-child(3) {
+
+      .box-icon {
+        path {
+          color: $pink;
+        }
+      }
+    }
+  }
+}

resources/sass/oasis/_responsive.scss

@@ -0,0 +1,5 @@
+@media only screen and (min-width: 1440px) {
+  .container {
+    width: 1700px;
+  }
+}

resources/sass/oasis/_variables.scss

@@ -0,0 +1,14 @@
+$text-primary: #312E5C;
+$text-secondary: #545E71;
+
+$text-dark-secondary: #BFBCE6;
+$text-dark-subtitle: #9995CD;
+
+$gradient-theme: linear-gradient(135deg, rgba(97,126,231,1) 0%, rgba(201,37,240,1) 100%);
+
+$theme-bg-dark: #312E5C;
+$theme-bg-light: #383469;
+
+$theme: #AE5FEC;
+$cyan: #19BCE0;
+$pink: #E40DF2;