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

<!-- Intro + Action -->
<section class="site-section site-section-top site-section-light themed-background-dark-default">
    <div class="container">
        <div class="push text-center">
            <h1 class="animation-fadeInQuick2Inv"><strong>A powerful template for your new project.</strong></h1>
            <h2 class="text-light-op animation-fadeInQuickInv push-bit"><strong>Build something amazing.</strong></h2>
            <a href="http://goo.gl/RcsdAh" class="btn btn-lg btn-success push-right-left"><strong>Purchase</strong></a>
            <a href="http://demo.pixelcave.com/appui" class="btn btn-lg btn-info push-right-left"><strong>Live Preview</strong></a>
        </div>
        <div class="site-promo-img visibility-none" data-toggle="animation-appear" data-animation-class="animation-slideUpQuick" data-element-offset="0">
            <img src="img/placeholders/screenshots/promo_welcome.png" alt="">
        </div>
    </div>
</section>
<!-- END Intro + Action -->

<!-- Promo Features -->
<section class="site-content site-section border-bottom">
    <div class="container">
        <div class="row row-items">
            <div class="col-sm-4 text-center">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-muted" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="fa fa-fire text-dark"></i>
                </a>
                <h2 class="site-heading h4 feature-heading visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-20">
                    <strong>Bootstrap Powered</strong>
                </h2>
            </div>
            <div class="col-sm-4 text-center">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-muted" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="fa fa-code text-dark"></i>
                </a>
                <h2 class="site-heading h4 feature-heading visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-20">
                    <strong>Clean & Commented Code</strong>
                </h2>
            </div>
            <div class="col-sm-4 text-center">
                <a href="javascript:void(0)" class="feature visibility-none themed-background-muted" data-toggle="animation-appear" data-animation-class="animation-fadeInQuickInv" data-element-offset="-100">
                    <i class="fa fa-cogs text-dark"></i>
                </a>
                <h2 class="site-heading h4 feature-heading visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInQuick2Inv" data-element-offset="-20">
                    <strong>Awesome Components</strong>
                </h2>
            </div>
        </div>
    </div>
</section>
<!-- END Promo Features -->

<!-- Promo #1 -->
<section class="site-section site-content border-bottom overflow-hidden">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 push">
                <h2 class="site-heading"><strong>7 Colors Themes</strong></h2>
                <p class="feature-text text-muted push"><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>
                <h2 class="site-heading"><strong>Cross Browser Support</strong></h2>
                <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 class="col-sm-6 clearfix push">
                <img src="img/placeholders/screenshots/promo_1.png" alt="" class="img-responsive pull-right visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInLeft" data-element-offset="-200" style="max-width: 450px; margin-right: -130px;">
            </div>
        </div>
    </div>
</section>
<!-- END Promo #1 -->

<!-- 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 -->

<!-- Promo #2 -->
<section class="site-section site-content border-bottom overflow-hidden">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-push-6 push">
                <h2 class="site-heading"><strong>Flexible Layout</strong></h2>
                <p class="feature-text text-muted push">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>
                <h2 class="site-heading"><strong>Fully Responsive</strong></h2>
                <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 class="col-sm-6 col-sm-pull-6 clearfix push">
                <img src="img/placeholders/screenshots/promo_2.png" alt="" class="img-responsive pull-left visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInRight" data-element-offset="-200" style="max-width: 450px; margin-left: -130px;">
            </div>
        </div>
    </div>
</section>
<!-- END Promo #2 -->

<!-- Sign Up Action -->
<section class="site-content site-section themed-background-dark">
    <div class="container">
        <h2 class="site-heading text-center text-light">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 -->

<!-- Promo #3 -->
<section class="site-section site-content border-bottom overflow-hidden">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 push">
                <h2 class="site-heading"><strong>Saves you time</strong></h2>
                <p class="feature-text text-muted push">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>
                <h2 class="site-heading"><strong>Ready Designed Pages</strong></h2>
                <p class="feature-text text-muted">15+ ready to use pages. The UI is ready, create the functionality. Dashboard, Login, Register, Social Net, Email Center, Media Box, Invoice, FAQ, Search Results and even more. Check them all out at the live preview.</p>
            </div>
            <div class="col-sm-6 clearfix push">
                <img src="img/placeholders/screenshots/promo_3.png" alt="" class="img-responsive pull-right visibility-none" data-toggle="animation-appear" data-animation-class="animation-fadeInLeft" data-element-offset="-200" style="max-width: 450px; margin-right: -130px;">
            </div>
        </div>
    </div>
</section>
<!-- END Promo #3 -->

<!-- Testimonials -->
<section class="site-content site-section themed-background-muted">
    <div class="container">
        <div id="testimonials-carousel" class="carousel slide carousel-html" data-ride="carousel" data-interval="4000">
            <div class="carousel-inner text-center">
                <div class="active item">
                    <blockquote>
                        <p><img src="img/placeholders/avatars/avatar13@2x.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar-2x"></p>
                        <h3>A big thanks! Our web app looks great!</h3>
                        <footer><em><strong>Maria Clark</strong>, http://example.com/</em></footer>
                    </blockquote>
                </div>
                <div class="item">
                    <blockquote>
                        <p><img src="img/placeholders/avatars/avatar2@2x.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar-2x"></p>
                        <h3>It just works!</h3>
                        <footer><em><strong>Roger Santos</strong>, http://example.com/</em></footer>
                    </blockquote>
                </div>
                <div class="item">
                    <blockquote>
                        <p><img src="img/placeholders/avatars/avatar1@2x.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar-2x"></p>
                        <h3>A great product at a great price!</h3>
                        <footer><em><strong>Edward Duncan</strong>, http://example.com/</em></footer>
                    </blockquote>
                </div>
                <div class="item">
                    <blockquote>
                        <p><img src="img/placeholders/avatars/avatar7@2x.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar-2x"></p>
                        <h3>Awesome purchase, I'm so happy I made it!</h3>
                        <footer><em><strong>Scott Gray</strong>, http://example.com/</em></footer>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END Testimonials -->

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