<?php
/**
 * Extansion version
 *
 * @package     Wow_Plugin
 * @subpackage
 * @copyright   Copyright (c) 2018, Dmytro Lobov
 * @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/float-menu-pro/';
$demo_url = 'https://preview.wow-estore.com/float-menu-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 feature-box is-radiusless">
                    <div class="icon is-large has-text-grey">
                        <i class="fas fa-swatchbook fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Beautiful Animations</p>
                        <p>7 animations for showing button label</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-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-shapes fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5 ">4 Different Shapes</p>
                        <p>Choose different types of shapes for the menu: Square, Round, Rounded, Rounded-out.</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-plus-square fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5 ">Sub Menu</p>
                        <p>Add submenu to first menu 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-plus fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5 ">Add Attributes</p>
                        <p>Add custom values to attributes such as CLASS and ID to each menu 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" style="transform: rotate(90deg);">
                        <i class="fas fa-sliders-h fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5 ">Align</p>
                        <p>Align the menu vertically.</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-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-text-height fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Size control</p>
                        <p>Set the custom size for texts and icons.</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-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-window-maximize fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Popup</p>
                        <p>Set and customize the popup for the menu item and open it by 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-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-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>Can be positioned at right or left side of the screen.</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-image fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5">Custom Icon</p>
                        <p>Add your own icon for the menu 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-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-sticky-note fa-3x"></i>
                    </div>
                    <div class="content">
                        <p class="title is-5 ">Well Documented</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-alt 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>
