<?php
/*
 * Template Name: Features - static
 *
 */

 get_header('static');

?>
<main>
    <section class="hero-page bg-dark-arrows">
        <div class="container">
            <h1 class="hero-page__main-title text-left text-align-left text-uppercase">Features</h1>
            <p class="hero-page__subtitle text-left h2">and benefits</p>
        </div>

    </section>

    <section class="text-btn-img align-left">
        <div class="container container--smaller text-btn-img__container">
            <div class="text-btn-img__content">
                <h2 class="h1 text-uppercase">Create</h2>
                <p class="h2">The DRILL CREATOR allows you to easily digitalize your drills and tactics</p>
                <a href="" class="btn btn--primary">Play video</a>
            </div>
            <div class="text-btn-img__image align-left">
                <img src="<?= THEMEROOT ?>/frontend/img/tmp-img/features-create.jpg" />
            </div>
        </div>
    </section>
    
    <section class="text-btn-img align-right img-background">
        <div class="container container--smaller text-btn-img__container">
            <div class="text-btn-img__content">
                <h2 class="h1 text-uppercase">Animated 3D</h2>
                <p class="h2">Watch all your plays using various 2D & 3D-perspectives and add audio comments to them.</p>
                <a href="" class="btn btn--primary">Play video</a>
            </div>
            <div class="text-btn-img__background-image align-right" style="background-image: url(<?= THEMEROOT; ?>/frontend/img/tmp-img/features-animated3D.jpg);"></div>
        </div>
    </section>

    <section class="three-cols">
        <div class="container three-cols__container">
            <div class="three-cols__col">
                <div class="icon">
                    <img src="<?= THEMEROOT; ?>/frontend/img/tmp-img/icon-features-sample.svg" alt="alt" />
                </div>
                <h3 class="h2 text-uppercase">Connect</h3>
                <p class="h3">Share your content with your players and staff</p>
            </div>
            <div class="three-cols__col">
                <div class="icon">
                    <img src="<?= THEMEROOT; ?>/frontend/img/tmp-img/icon-features-sample2.svg" alt="alt" />
                </div>
                <h3 class="h2 text-uppercase">PDF</h3>
                <p class="h3">Export your practice packages and lineups as a PDF, so you can share them or print them on paper.</p>
            </div>
            <div class="three-cols__col">
                <div class="icon">
                    <img src="<?= THEMEROOT; ?>/frontend/img/tmp-img/icon-features-sample.svg" alt="alt" />
                </div>
                <h3 class="h2 text-uppercase">Calendar</h3>
                <p class="h3">Create monthly plans by placing your practice packages and notes into your calendar.</p>
            </div>
        </div>
    </section>

    <section class="text-btn-img align-left img-background img-background-2">
        <div class="container container--smaller text-btn-img__container">
            <div class="text-btn-img__content">
                <h2 class="h1 text-uppercase">Video & Picture</h2>
                <p class="h2">Collect all your knowledge, including Pictures and Videos within Hockey Coach Vision. This allows you to integrate video demonstrations and photos into your practice planning.</p>
                <a href="" class="btn btn--primary">Play video</a>
            </div>
            <div class="text-btn-img__background-image" style="background-image: url(<?= THEMEROOT; ?>frontend/img/tmp-img/features-videoPicture.jpg);"></div>
        </div>
    </section>

    <section class="text-btn-img no-img align-right">
        <div class="container container--smaller text-btn-img__container">
            <div class="text-btn-img__content">
                <h2 class="h1 text-uppercase">INLINE HOCKEY</h2>
                <p class="h2">Switch the rink background and player animations to inline hockey.</p>
            </div>
        </div>
    </section>
    
    <section class="text-btn-img no-img align-right dark-theme">
        <div class="container text-btn-img__container">
            <div class="text-btn-img__content">
                <h2 class="h1 text-uppercase">Drill store</h2>
                <p class="h2">Get animated drills, videos and tactical files created by professionals.</p>
                <a href="" class="btn btn--primary">Visit drill store</a>
            </div>
            <div class="text-btn-img__image align-left">
                <img src="<?= THEMEROOT ?>/frontend/img/tmp-img/features-gallery.jpg" />
            </div>
            <!-- <div class="text-btn-img__background-image" style="background-image: url(<?= THEMEROOT; ?>frontend/img/tmp-img/features-gallery.jpg);"></div> -->
        </div>
    </section>
    

    <section class="three-cols">
        <div class="container three-cols__container">
            <div class="three-cols__col">
                <div class="icon">
                    <img src="<?= THEMEROOT; ?>/frontend/img/tmp-img/icon-features-sample.svg" alt="alt" />
                </div>
                <h3 class="h2 text-uppercase">Cloud syncronization</h3>
                <p class="h3">Save all of your data in our cloud. Simply sync your files between your devices with a click of a button.</p>
            </div>
            <div class="three-cols__col">
                <div class="icon">
                    <img src="<?= THEMEROOT; ?>/frontend/img/tmp-img/icon-features-sample2.svg" alt="alt" />
                </div>
                <h3 class="h2 text-uppercase">Roster & Lineup</h3>
                <p class="h3">Build your team roster to create your daily lineups, that can be printed or attached to a practice plan.</p>
            </div>
            <div class="three-cols__col">
                <div class="icon">
                    <img src="<?= THEMEROOT; ?>/frontend/img/tmp-img/icon-features-sample.svg" alt="alt" />
                </div>
                <h3 class="h2 text-uppercase">Languages</h3>
                <p class="h3">Available in multiple languages. </p>
                <img src="<?= THEMEROOT; ?>/frontend/img/tmp-img/features-languages.svg" alt="" />
            </div>
        </div>
    </section>

    <section class="text-btn-img align-left">
        <div class="container container--smaller text-btn-img__container">
            <div class="text-btn-img__content">
                <h2 class="h1 text-uppercase">Portal</h2>
                <h3 class="h2">Access content from your organization.</h3>
                <p class="h3">Share huge libraries of drills, tactics and practice plans within your organization. This ensures the delivery of high quality content to everyone in your Portal and allows you to build your knowledge base. We would be happy to arrange a demonstration and give you a quote for your club, association or federation. Please contact us for more information!</p>
                <a href="" class="btn btn--primary">Contact us</a>
            </div>
            <div class="text-btn-img__image align-left">
                <img src="<?= THEMEROOT ?>/frontend/img/tmp-img/features-portal.jpg" />
            </div>
        </div>
    </section>

    <section class="availability">
        <div class="container">
            <div class="md-top-right">
                <h2 class="h1 text-uppercase">Available on</h2>
                <p class="h3">Mac, Windows, iPads, iPhones, Android tablets, Android phones</p>
            </div>
            <img src="<?= THEMEROOT ?>frontend/img/available-on.jpg" />

        </div>
    </section>
    

<?php get_footer('static');