<?php defined('ALTUMCODE') || die() ?>

<div class="" style="background-color:#42fcd2;">
    <div class="container" style="max-width: 100%;">
        <?= \Altum\Alerts::output_alerts() ?>

        <div class="row">
            <div class="col-12 col-lg-6 d-flex px-7 flex-column justify-content-center align-items-center align-items-lg-start text-center text-lg-left" style="background: #fce442;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
}">
                <h1 class="index-header mb-4" style="font-size: 6rem;"><?= l('index.header') ?></h1>
                <p class="index-subheader" style="font-family: Arial;"><?= sprintf(l('index.subheader'), '<span class="text-primary-800 font-weight-bold" style="font-family: Arial;">', '</span>') ?></p>

                <!--<ul class="list-style-none my-4">
                    <li class="d-flex align-items-center mb-2">
                        <i class="fas fa-fw mr-2 fa-check-circle text-primary"></i>
                        <div class="text-muted">
                            <?= l('index.feature.one') ?>
                        </div>
                    </li>

                    <li class="d-flex align-items-center mb-2">
                        <i class="fas fa-fw mr-2 fa-check-circle text-primary"></i>
                        <div class="text-muted">
                            <?= l('index.feature.two') ?>
                        </div>
                    </li>

                    <li class="d-flex align-items-center mb-2">
                        <i class="fas fa-fw mr-2 fa-check-circle text-primary"></i>
                        <div class="text-muted">
                            <?= l('index.feature.three') ?>
                        </div>
                    </li>
                </ul>-->

                <div>
                    <a href="<?= url('register') ?>" class="btn btn-lg btn-primary index-button" style="border: 5px solid black;
    border-radius: 35px;
    background: transparent;
    color: black;
    font-weight: 700;"><?= l('index.button') ?> <i class="fas fa-fw fa-sm fa-arrow-right"></i></a>
                </div>
            </div>

            <div class="col-10 col-md-8 col-lg-5 offset-1 offset-md-2 mt-4 mt-lg-0" data-aos="fade-up" style="    background: #001830;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    margin-left: 60px;
    min-width: 45%;
    padding-left: 15%;">
                <img src="<?= ASSETS_URL_PATH . 'images/index/hero.png' ?>" class="img-fluid index-hero" loading="lazy" style="transform: none;"/>
            </div>
        </div>

    </div>
</div>

<!--<div class="my-5"></div>-->


<?php ob_start() ?>
<script src="<?= ASSETS_FULL_URL . 'js/libraries/jquery-qrcode.min.js' ?>"></script>
<script>
    'use strict';

    let generate_qr = () => {
        let qr_url = <?= json_encode(url('s/demo?referrer=qr')) ?>;

        let default_options = {
            render: 'image',
            minVersion: 1,
            maxVersion: 40,
            ecLevel: 'H',
            left: 0,
            top: 0,
            size: 600,
            fill: '#000',
            background: '#fff',
            text: qr_url,
            radius: 0,
            quiet: 0,
            mode: 0,
            mSize: 0.1,
            mPosX: 0.5,
            mPosY: 0.5,
            fontname: 'arial',
        };

        $('.index-qr').qrcode(default_options);
    }

    generate_qr();
</script>
<?php \Altum\Event::add_content(ob_get_clean(), 'javascript') ?>

<?php ob_start() ?>
<link rel="stylesheet" href="<?= ASSETS_FULL_URL . 'css/libraries/aos.min.css' ?>">
<?php \Altum\Event::add_content(ob_get_clean(), 'head') ?>

<?php ob_start() ?>
<script src="<?= ASSETS_FULL_URL . 'js/libraries/aos.min.js' ?>"></script>

<script>
    AOS.init({
        delay: 100,
        duration: 600
    });
</script>
<?php \Altum\Event::add_content(ob_get_clean(), 'javascript') ?>
