<?php include 'inc/config.php'; ?>
<?php include 'inc/template_start.php'; ?>
<?php include 'inc/page_head.php'; ?>

<!-- Intro -->
<section class="site-section site-section-top site-section-light themed-background-dark">
    <div class="container">
        <h1 class="text-center animation-fadeInQuickInv"><strong>The best features in one template.</strong></h1>
    </div>
</section>
<!-- END Intro -->

<!-- Features #1 -->
<section class="site-content site-section border-bottom">
    <div class="container text-center">
        <div class="row row-items">
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-danger" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="fa fa-fire"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Bootstrap Powered</strong></h4>
                    <p class="feature-text text-muted">Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. <strong>AppUI</strong> was built on top, extending it to a large degree.</p>
                </div>
            </div>
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-success" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="gi gi-pizza"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>1200+ Font Based Icons</strong></h4>
                    <p class="feature-text text-muted">With so many unique icons included in <strong>AppUI</strong>, you don't have to worry about running out. Let's not talk about possible color and size variations.</p>
                </div>
            </div>
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-info" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="fa fa-book"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Documentation Included</strong></h4>
                    <p class="feature-text text-muted"><strong>AppUI</strong> comes packed with a great documentation which covers all the basics to get you familiar with template's structure, files and plugins. It is the best way to get started.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END Features #1 -->

<!-- Features #2 -->
<section class="site-content site-section border-bottom">
    <div class="container text-center">
        <div class="row row-items">
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-amethyst" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="gi gi-eye_open"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Retina Ready</strong></h4>
                    <p class="feature-text text-muted">It will look crispy clear on high resolution screens and at the same time it will serve your high quality images as required.</p>
                </div>
            </div>
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-flat" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="fa fa-code"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Clean & Commented Code</strong></h4>
                    <p class="feature-text text-muted">The code is created with the developer in mind. It is clean, easy to follow, easy to replicate and at the same time well commented, so that you never feel lost.</p>
                </div>
            </div>
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-passion" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="gi gi-iphone_shake"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Fully Responsive</strong></h4>
                    <p class="feature-text text-muted">The User Interface will adjust to any screen size. It will look great on mobile devices and on desktops at the same time. No need to worry about the UI, just stay focused on the development.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END Features #2 -->

<!-- Features #3 -->
<section class="site-content site-section border-bottom">
    <div class="container text-center">
        <div class="row row-items">
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-warning" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="gi gi-brush"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>7 Colors Themes</strong></h4>
                    <p class="feature-text text-muted"><strong>AppUI</strong> features 7 carefully chosen and integrated color themes to choose from (with 2 header & sidebar color variations each). It's like getting a new template every time you change the active color theme.</p>
                </div>
            </div>
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-info" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="gi gi-electricity"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Flexible Layout</strong></h4>
                    <p class="feature-text text-muted">Create the layout you want for your project in seconds. Would you like a static layout? A fixed header and sidebars? A fixed footer? An alternative sidebar? You can have it!</p>
                </div>
            </div>
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-classy" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="fa fa-cogs"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Awesome Components</strong></h4>
                    <p class="feature-text text-muted"><strong>AppUI</strong> comes packed with so many awesome components. Calendar, CSS3 Animations, Form Wizards, Form Validation and Charts are only a small portion of them.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END Features #3 -->

<!-- Features #4 -->
<section class="site-content site-section">
    <div class="container text-center">
        <div class="row row-items">
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-success" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="fa fa-check"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Saves you time</strong></h4>
                    <p class="feature-text text-muted">Time is of vital importance. <strong>AppUI</strong> will save you hundreds of hours of extra development. Start right away coding your functionality and see your project come to life months sooner.</p>
                </div>
            </div>
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="gi gi-globe_af"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Cross Browser Support</strong></h4>
                    <p class="feature-text text-muted"><strong>AppUI</strong> will play nice with all modern browsers such as Chrome, Firefox, Safari, Opera and the latest versions of Internet Explorer (IE9 and up).</p>
                </div>
            </div>
            <div class="col-sm-4">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-social" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="gi gi-iphone"></i>
                </a>
                <div class="visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-100">
                    <h4 class="site-heading feature-heading"><strong>Mobile First</strong></h4>
                    <p class="feature-text text-muted">The layout adjusts as we move up from mobile devices to large desktop screens and not the other way around. This speed things up a lot.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END Features #4 -->

<!-- Quick Stats -->
<section class="site-content site-section themed-background-dark">
    <div class="container">
        <!-- Stats Row -->
        <!-- CountTo (initialized in js/app.js), for more examples you can check out https://github.com/mhuggins/jquery-countTo -->
        <div class="row">
            <div class="col-sm-4">
                <div class="counter site-block">
                    <span data-toggle="countTo" data-to="2120" data-after="+"></span>
                    <small>Sales</small>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="counter site-block">
                    <span data-toggle="countTo" data-to="530" data-after="+"></span>
                    <small>Services</small>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="counter site-block">
                    <span data-toggle="countTo" data-to="3200" data-after="+"></span>
                    <small>Projects</small>
                </div>
            </div>
        </div>
        <!-- END Stats Row -->
    </div>
</section>
<!-- END Quick Stats -->

<!-- Sign Up Action -->
<section class="site-content site-section">
    <div class="container">
        <h2 class="site-heading text-center">Sign up today and receive <strong>30% discount</strong>!</h2>
        <div class="site-block text-center">
            <form action="features.php" method="post" class="form-inline" onsubmit="return false;">
                <div class="form-group">
                    <label class="sr-only" for="register-username">Username</label>
                    <input type="text" id="register-username" name="register-username" class="form-control input-lg" placeholder="Choose a username..">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="register-password">Password</label>
                    <input type="password" id="register-password" name="register-password" class="form-control input-lg" placeholder="..and a password!">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-lg btn-success">Get Started!</button>
                </div>
            </form>
        </div>
    </div>
</section>
<!-- END Sign Up Action -->

<?php include 'inc/page_footer.php'; ?>
<?php include 'inc/template_scripts.php'; ?>
<?php include 'inc/template_end.php'; ?>