{**
* Copyright (C) 2020 Futurenext srl
*
* This file is part of Zakeke.
*
* Zakeke Interactive Product Designer can not be copied and/or distributed
* without the express permission of Futurenext srl
*
* @author    Futurenext srl <help@zakeke.com>
* @copyright 2019 Futurenext srl
* @license   https://www.zakeke.com/privacy/#general_conditions
*}

{if isset($zakeke_connect_url)}
    <style>
        .zakeke-box {
            max-width: 1100px;
            margin: auto;
            margin-bottom: 50px;
        }

        .zakeke-logo {
            float:right;
            margin-right:30px;
        }

        .zakeke-box h2 {
            font-size: 80px;
            color: #1c3353;
            margin-bottom: 30px;
        }

        .zakeke-box .zakeke-description {
            font-size: 16px;
            color: #363A41;
            letter-spacing: 0;
            line-height: 24px;
            margin-bottom: 15px;
        }

        .zakeke-button, .zakeke-button:hover {
            color: #24B9D7;
            background-color: #fff;

            display: inline-block;
            border: 1px solid #24B9D7;
            border-radius: 1px;
            padding: 5px 12px;
            margin-right: 20px;
            text-decoration: none !important;
            font-size: 14px;
            font-weight: bold;
        }

        .zakeke-button-pricipal, .zakeke-button-pricipal:hover {
            color: white !important;
            background-color: #24B9D7;

            display: inline-block;
            border: 1px solid #24B9D7;
            border-radius: 1px;
            padding: 5px 12px;
            margin-right: 20px;
            text-decoration: none !important;
            font-size: 14px;
            font-weight: bold;
        }
    </style>

    <div class="zakeke-box">
        <img class="zakeke-logo" src="../modules/zakeke/logo.png" height="250" width="250">
        <h2>Connect Zakeke to your store</h2>
        <p class="zakeke-description">{l s='Connect your Zakeke account to start using Zakeke' mod='zakeke'}</p>
        <a class="zakeke-button-pricipal" href="{$zakeke_connect_url|escape:'html':'UTF-8'}">{l s='Connect' mod='zakeke'}</a>
        <a class="zakeke-button" href="{$zakeke_showall_url|escape:'html':'UTF-8'}">{l s='Show all options' mod='zakeke'}</a>
    </div>
{/if}