@using VberZero.Settings
@model string
@{
    
    var systemName = Model ?? await SettingManager.GetSettingValueAsync(VzSettingNames.AdminSystemName);
}

<style>
    .content,#vber_content_container  {
        padding:0!important;
    }
    .home-page {
        width: 100%;
        height: calc(100vh - 105px);
        position: relative;
        text-align: center;
        background: linear-gradient(60deg, rgba(54,58,183,1) 0, rgba(0,172,193,1) 100%);
        color: white;
    }
    
    @@media (min-width: 991.98px) {
        .home-page {
            height: calc(100vh - 115px);
        }
    }
    .home-page h1 {
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        letter-spacing: 2px;
        font-size: 48px;
        color: white;
    }

    .home-page .inner-header {
        height: 65%;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .home-page .waves-box {
        width: 100%;
        height: 15%;
        min-height: 100px;
        max-height: 150px;
    }

    .home-page .waves-box .waves {
        width: 100%;
        height: 100%;
    }

    /* Animation */

    .home-page .parallax > use {
        animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
    }

    .home-page .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }

    .home-page .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }

    .home-page .parallax > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }

    .home-page .parallax > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }

    .home-page .footer {
        position: relative;
        height: 22%;
        text-align: center;
        background-color: white;
        margin-top: -15px;
    }

    @@keyframes move-forever {
        0% {
            transform: translate3d(-90px,0,0);
        }

        100% {
            transform: translate3d(85px,0,0);
        }
    }
    /*Shrinking for mobile*/
    @@media (max-width: 768px) {
        .home-page .waves {
            height: 40px;
            min-height: 40px;
        }


        .home-page h1 {
            font-size: 24px;
        }
    }
</style>

<div class="home-page">
    <div class="inner-header">
        <h1>@systemName</h1>
    </div>
    <!--Waves Container-->
    <div class="waves-box">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.9)" />
            </g>
        </svg>
    </div>
    <!--Waves end-->
    <div class="footer"></div>
</div>