@extends('layouts.site-wait')

@section('titlepage', 'Em Construção')
    
@section('content')
    <div class="singlepage" style="background-image: url('{{ asset("img/background.png") }}')">
        <div class="top">
            <div class="left"><img src="{{ asset('img/topleft.png') }}" alt="topleft logo"></div>
            <div class="center"><a href="{{ url('/') }}"><img src="{{ asset('img/logo.png') }}" alt="logo image"></a></div>
            <div class="right"><img src="{{ asset('img/topright.png') }}" alt="topright logo"></div>
        </div>
        <div class="center">
            <div class="left">Estamos</div>
        <div class="center"><img src="{{ asset('img/brush.png') }}" alt="brush"></div>
            <div class="right">chegando!</div>
        </div>
        <div class="bottom">
            <p>Estamos preparando um site cheio de novidades!</p>
        </div>
        <div class="footer">
            <a href="https://www.instagram.com/brazilbeardhair/" target="_blank"><img src="{{ asset('img/logoinsta.png') }}" alt="insta"></a>
            <a href="https://api.whatsapp.com/send?phone=5511933125040&text=" target="_blank"><img src="{{ asset('img/whatsapp.svg') }}" alt=""></a>
        </div>
        <div class="bottom2">
            <a href="mailto:franquia@brazilbeardhair.com">franquia@brazilbeardhair.com</a>
        </div>
    </div>

    <style>
        html, body {
    font-size: 16px;
    font-family: Roboto, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: black;
}
body {
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.singlepage {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.singlepage > .top {
    display: flex;
    align-items: center;
    justify-content: center;
}
.singlepage > .center {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}
.singlepage > .center > .left {
    font-size: 5.5rem;
    font-weight: bold;
    color: #144915be;
    position: absolute;
    top: 50%;
    right: 55%;
    transform: translate(0, -60%);
}
.singlepage > .center > .right {
    font-size: 5.5rem;
    font-weight: bold;
    color: #c9a023be;
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translate(0, -60%);
}
.singlepage > .bottom {
    max-width: 300px;
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    text-align-last: center;
    margin-bottom: 1rem;
}
.singlepage > .bottom p { 
    margin-bottom: 0;
    line-height: 1.2;
    font-weight: bold;
}
.singlepage > .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: max-content;
}
.singlepage > .footer > a:first-child { 
    margin-right: 1rem;
} 
.singlepage > .footer > a > img { 
    height: 30px;
    width: 30px;
}

.singlepage > .bottom2 {
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 1rem;
}
.singlepage > .bottom2 > a { 
    color: #fff;
    text-decoration: none;
}

@media screen and (orientation: portrait) {
    body {
        height: max-content;
        min-height: 100vh;
        overflow-y: scroll;
    }
    .singlepage {
        padding: 2rem 0;
  
    }
    .singlepage > .top .left,
    .singlepage > .top .right {
        display: none;
    }
    .singlepage > .top .center a img {
        width: 60vw;
        max-width: 400px;
    }
    .singlepage > .center > .center img {
        width: 40vw;
        max-width: 300px;
        height: auto;
    }
    .singlepage > .center > .right,
    .singlepage > .center > .left {
        position: relative;
        left: unset;
        right: unset;
        transform: unset;
        top: unset;
        font-size: 4rem;
    }
    .singlepage > .center {
        flex-direction: column;
    }
}


    </style>
@endsection