<?php
/**
 * Extansion version
 *
 * @package     Wow_Plugin
 * @subpackage
 * @copyright   Copyright (c) 2018, Wow-Company
 * @license     http://opensource.org/licenses/gpl-2.0.php GNU Public License
 * @since       1.0
 */
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
$pro_url  = 'https://wow-estore.com/item/button-generator-pro/';
$demo_url = 'https://preview.wow-estore.com/button-generator-pro/';
?>

<section class="section has-background-light is-medium" id="features">
    <div class="container">
        <div class="block has-text-centered ds-title">
            <p class="subtitle is-5 is-uppercase has-text-danger">what you get</p>
            <h3 class="title is-2">Awesome Features </h3>
            <div class="button-group">
                <a href="<?php echo esc_url( $pro_url ); ?>" class="like-button pro-button" target="_blank">Get More with Pro</a>
                <a href="<?php echo esc_url( $demo_url ); ?>" class="like-button demo-button" target="_blank">Demo</a>
            </div>
        </div>
        <div class="columns is-multiline is-variable is-3 feature-boxes">

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-flag fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5 ">1500+ Icons</p>
                        <p>The current version of the plugin has 1500+ Font Awesome Icon.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-users fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">User dependence</p>
                        <p>Show menu depending on user (for all users, only for logged-in users, only for not
                            logged-in
                            users).</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-swatchbook fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Hover Animation</p>
                        <p>You can set one of 70+ animations for a button when you hover over it. The animation can be set for the
                            whole button, for the icon and for the background color.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-certificate fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Info Badge</p>
                        <p>Adds the ability to create an information badge for the button. When the notification badge is showing, the user can with more likely perform a click on the button to
                            reveal a pop-up dialog that displays the notifications that currently exist or redirect on the page with
                            notifications.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-share-alt fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">33 Social Share</p>
                        <p>33 Easy Social Share Buttons for WordPress.</p>
                    </div>
                </div>
            </div>            

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-arrows-alt-v fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Smooth Scroll</p>
                        <p>Create a smooth scrolling effect to the page anchors.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-long-arrow-alt-up fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Go To Top</p>
                        <p>Create a button that will take the user to the top of the page when clicked on.</p>
                    </div>
                </div>
            </div>
			
			<div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-long-arrow-alt-down fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Go To Bottom</p>
                        <p>Create a button that will take the user to the bottom of the page when clicked on.</p>
                    </div>
                </div>
            </div>
			
			<div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-long-arrow-alt-left fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Go Back</p>
                        <p>Create a button that will take the user to the previous URL in the history list.</p>
                    </div>
                </div>
            </div>
			
			<div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-long-arrow-alt-right fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Go Forward</p>
                        <p>Create a button that will take the user to the next URL in the history list.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-print fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Print</p>
                        <p>Function for print the page via a click on the item.</p>
                    </div>
                </div>
            </div>
			
			<div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-tablet fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Devices control</p>
                        <p>You can specify for which devices to show the menu.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-users-cog fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">User links</p>
                        <p>Built-in user links: LogIn, LogOut, Register, Lostpassword.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-arrows-alt fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Different Positions</p>
                        <p>8 different Positions</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-window-restore fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5 ">New Window</p>
                        <p>Opening link in new window.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-language fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Language dependence</p>
                        <p>Show menu depending on language.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-file-alt fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Specific pages</p>
                        <p>Show the menu on the specific pages.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-palette fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Custome Style</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-globe fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Cross-Browser</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-code fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5 ">W3C Valid Code</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-infinity fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Unlimited Numbers</p>
                        <p>No limited to the number of buttons and sub-buttons.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-sync fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Lifetime Free Updates</p>
                        <p>Never pay for an update.</p>
                    </div>
                </div>
            </div>

            <div class="column is-full-mobile is-one-quarter-desktop is-half-tablet ">
                <div class="box has-text-centered has-text-grey feature-box is-radiusless">
                    <div class="icon is-large">
                        <i class="fas fa-headset fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5 ">Fast Support</p>
                        <p>We work closely with the user community and listen to your opinion. We provide free
                            technical
                            and
                            information support for customers.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
