{{ template "headersBranded.html" . }}

<section id="voza" class="w-full table relative bg-[url('/cdn/enseigne/{{ .brand.Logo.String }}')] bg-center bg-no-repeat bg-cover">
    <div class="container relative">
        <div class="relative justify-center items-center py-40 w-full h-screen text-left">
            <div class="lg:w-1/2 md:1/2 sm:w-2/3">
                {{ if .brand.Status.Valid }} 
                    {{ if eq .brand.Status.Int32 1 }}
                    <h6 class="mb-2 text-xs font-bold text-indigo-600 uppercase">Votre partenaire officiel {{ .brand.Name.String }}</h6>
                    <h4 class="mb-4 md:text-[28px]] md:text-3xl text-2xl">Digitalisez vos <span class="font-bold text-indigo-600 text-md typewrite" data-period="2000" data-type='[ "cartes de visite" ]'> <span class="wrap"></span> </span></h4>
                    {{ else }}
                    <h4 class="mb-4 md:text-[28px]] md:text-3xl text-2xl">Gabarit mutualisé<br/>{{ .brand.Name.String }} :<br><span class="font-bold text-indigo-600 text-md typewrite" data-period="2000" data-type='[ "cartes de visite", "signatures d’email", "prise de RDV", "formulaires client", "communication sectorielle" ]'> <span class="wrap"></span> </span></h4>
                    {{ end }}
                {{ end }}
                <div class="my-6 uppercase">
                    <a href="/{{ .brand.Host.String }}/signin" class="text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:border-indigo-700"> Créer un compte <i style="float:right; margin:4px 0 0 12px" class="fa fa-sign-{{ if .isConnected }}out{{ else }}in{{ end }}" class="w-4 h-4"></i></a>
                    <a href="/{{ .brand.Host.String }}/signup" class="text-black bg-white rounded-md border-white btn hover:border-indigo-700"> Se connecter <i style="float:right; margin:4px 0 0 12px" class="fa fa-sign-{{ if .isConnected }}out{{ else }}in{{ end }}" class="w-4 h-4"></i></a>
                </div>
            </div>
        </div>
        <div class="flex hidden md:block" style="position:absolute;top:136px;left:50%;margin:0 0 0 72px;z-index:121">
    
            <link rel="stylesheet" href="https://next.card.pm/assets/devices-css/assets/devices.min.css?1644158872" type="text/css">
            <div id="Telephone">
            <div class="marvel-device iphone-x white" id="Youtube" style="
            transform: perspective(1400px) rotateY( 
            -25deg
            ) rotateX( 
            4.9deg
            ) rotateZ( 
            4.15deg
            ) scaleY(1);
            transform-style: preserve-3d;
            margin-top: -72px;">
                <div class="notch" style="display:none">
                    <div class="camera"></div>
                    <div class="speaker"></div>
                </div>
                <div class="top-bar"></div>
                <div class="sleep"></div>
                <div class="bottom-bar"></div>
                <div class="volume"></div>
                <div class="overflow">
                    <div class="shadow shadow--tr"></div>
                    <div class="shadow shadow--tl"></div>
                    <div class="shadow shadow--br"></div>
                    <div class="shadow shadow--bl"></div>
                </div>
                <div class="inner-shadow"></div>
                <div class="screen"><div id="YoutubeContent"><iframe id="YoutubeFrame" width="100%" height="812" src="https://card.pm/{{ .brand.Host.String }}/demo" frameborder="0" allowfullscreen=""></iframe></div></div>
            </div>
            </div>
            
        </div>
    </div>
</section>

{{ template "footer.html" . }}