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

<template>
    <div class="oasis-header">
        <Clouds class="clouds">
            <Cloud type="white" class="cloud" />
            <Cloud type="white" class="cloud" />
            <Cloud type="white" class="cloud" />
            <Cloud type="white" class="cloud" />
            <Cloud type="white" class="cloud" />
        </Clouds>

        <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>

            <div v-if="config.isAuthenticated">
                <router-link :to="{name: 'Files'}" class="theme-button">
                    {{ $t('go_to_files') }}
                </router-link>
            </div>
            <div v-if="! config.isAuthenticated">
                <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>
            </div>
        </header>

        <img src="/oasis/header-image.svg" alt="OasisDrive" class="hero">
    </div>
</template>

<script>
    import Clouds from '@/Oasis/Homepage/Components/Clouds'
    import Cloud from '@/Oasis/Homepage/Components/Cloud'
    import { mapGetters } from 'vuex'

    export default {
        name: 'Header',
        components: {
            Clouds,
            Cloud,
        },
        computed: {
            ...mapGetters([
                'config'
            ]),
        },
        data() {
            return {

            }
        },
    }
</script>

<style lang="scss" scoped>
    @import '@assets/oasis/_components';
    @import '@assets/oasis/_homepage';
    @import '@assets/oasis/_responsive';

    .clouds .cloud {

        &:nth-child(1) {
            @include transform(scale(-0.4, 0.4));
            top: 12%;
            left: 16%;
        }

        &:nth-child(2) {
            @include transform(scale(-0.8, 0.8));
            top: 17%;
            left: -11%;
        }

        &:nth-child(3) {
            @include transform(scale(1));
            top: 32%;
            left: 8%;
        }

        &:nth-child(4) {
            @include transform(scale(0.55));
            top: 9%;
            right: 21%;
        }

        &:nth-child(5) {
            @include transform(scale(-1.35, 1.35));
            top: 20%;
            right: -2%;
        }
    }

    .oasis-header {
        position: relative;
        margin-top: -110px;
        padding-top: 250px;
        background: linear-gradient(180deg, rgba(149, 189, 230, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);

        .main-title {
            max-width: 820px;
            margin: 0 auto 20px;
        }

        .sub-title {
            margin-bottom: 47px;
        }
    }

    .hero {
        width: 100%;
        margin-top: -100px;
        margin-bottom: -10px;
    }
</style>