vuefilemanager/resources/js/components/Index/IndexPageHeader.vue

<template>
    <header class="main-header page-wrapper medium">
        <PageTitle
            :title="index.header_title"
            :description="index.header_description"
        />

        <div v-if="! config.isAuthenticated">

            <!--User registration button-->
            <router-link v-if="config.userRegistration" class="sign-up-button" :to="{name: 'SignUp'}">
                <AuthButton class="button" icon="chevron-right" :text="$t('page_index.sign_up_button')" />
            </router-link>

            <!--User login button-->
            <router-link v-if="! config.userRegistration" class="sign-up-button" :to="{name: 'SignIn'}">
                <AuthButton class="button" icon="chevron-right" :text="$t('page_index.menu.log_in')" />
            </router-link>

            <div class="features" v-if="config.isSaaS">
                <div class="feature">
                    <credit-card-icon size="19" class="feature-icon"></credit-card-icon>
                    <b class="feature-title">{{ $t('page_index.sign_feature_1') }}</b>
                </div>
                <div class="feature">
                    <hard-drive-icon size="19" class="feature-icon"></hard-drive-icon>
                    <b class="feature-title">{{ $t('page_index.sign_feature_2', {defaultSpace: config.storageDefaultSpaceFormatted}) }}</b>
                </div>
            </div>
        </div>
    </header>
</template>

<script>
    import HardDriveIcon from "vue-feather-icons/icons/HardDriveIcon";
    import PageTitle from "./Components/PageTitle";
    import AuthButton from "../Auth/AuthButton";
    import { CreditCardIcon } from 'vue-feather-icons'
    import { mapGetters } from 'vuex'

    export default {
        name: 'IndexPageHeader',
        components: {
            PageTitle,
            CreditCardIcon,
            HardDriveIcon,
            AuthButton,
        },
        computed: {
            ...mapGetters(['index', 'config']),
        },
    }
</script>

<style lang="scss" scoped>
    @import '../../../sass/vuefilemanager/landing-page';
    @import '../../../sass/vuefilemanager/variables';
    @import '../../../sass/vuefilemanager/mixins';

    .features {
        display: flex;
        margin-top: 35px;

        .feature {
            display: flex;
            margin-right: 35px;

            &:nth-child(1) {
                path, line, polyline, rect, circle {
                    stroke: $yellow;
                }
            }

            &:nth-child(2) {
                path, line, polyline, rect, circle {
                    stroke: $purple;
                }
            }

            &:last-child {
                margin-right: 0;
            }

            .feature-title {
                @include font-size(14);
                font-weight: 700;
            }

            .feature-icon {
                margin-right: 10px;
            }
        }
    }

    .main-header {
        padding-top: 70px;
    }

    .sign-up-button {
        margin-top: 65px;
        display: block;

        .button {
            margin-left: 0;
            margin-right: 0;
        }
    }

    @media only screen and (max-width: 690px) {

        .main-header {
            padding-top: 50px;
        }

        .features {
            display: block;

            .feature {
                margin-right: 0;
                margin-bottom: 15px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .sign-up-button {
            margin-top: 30px;
        }
    }
</style>