<div class="wrap">
    <div class="elation-page-wrap">

        <?php 
?>

        <div class="elation-page">
            <div class="elation-title">
                <h3><?php 
esc_html_e( 'Getting Started with Elation', 'elation' );
?></h3>
                <a href="<?php 
echo  esc_url( admin_url( 'themes.php?page=elation_info-account' ) ) ;
?>" class="dashicons dashicons-admin-users"></a>
            </div>

            <div class="elation-content">
                <div class="elation-content-narrow">
                    <h4><?php 
esc_html_e( 'Welcome to Elation', 'elation' );
?></h4>
                    <p class="elation-meaning">
                        <?php 
esc_html_e( '[ ih-ley-shuhn ] - "great happiness and exhilaration."', 'elation' );
?>
                    </p>
                    <p>
                        <?php 
esc_html_e( 'Get introduced to the Elation WordPress theme by watching our "Getting Started" video. This video will give you a quick and easy understanding of how the Elation theme works. Happy building :)', 'elation' );
?>
                    </p>
                </div>

                <div class="elation-content-view">
                    <iframe width="620" height="350" src="https://www.youtube.com/embed/0fMNhXjckTE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                
                <div class="elation-content-narrow">
                    <p>
                        <?php 
esc_html_e( 'Now that you know where the settings are and how to use them, you can start building your website... Or click through to view more Kaira documentation.', 'elation' );
?>
                    </p>
                    <div class="elation-btns">
                        <a href="<?php 
echo  esc_url( admin_url( 'customize.php' ) ) ;
?>" class="button button-primary elation-btn"><?php 
esc_html_e( 'Start Customizing Elation', 'elation' );
?></a>
                        <a href="<?php 
echo  esc_url( 'https://kairaweb.com/documentation/' ) ;
?>" class="button elation-btn" target="_blank"><?php 
esc_html_e( 'See Kaira Documentation', 'elation' );
?></a>
                    </div>
                </div>
            </div>
        </div>

        <?php 
?>
            <div class="elation-content-lower">
                <h3 class="elation-sub-title">
                    <a href="<?php 
echo  esc_url( admin_url( 'themes.php?page=elation_info-pricing' ) ) ;
?>"><?php 
esc_html_e( 'Elation Pro', 'elation' );
?></a>
                </h3>
                <p class="elation-meaning">
                    <a href="<?php 
echo  esc_url( admin_url( 'themes.php?page=elation_info-pricing' ) ) ;
?>">
                        <?php 
esc_html_e( 'Purchase Elation Pro right here in the Dashboard!', 'elation' );
?>
                    </a>
                </p>
                <p>
                    <?php 
esc_html_e( 'Elation Pro offers a lot more extra, useful features for building your website. See some of the Premium features below and purchase Elation Pro to get started.', 'elation' );
?>
                </p>

                <div class="elation-btns">
                    <a href="<?php 
echo  esc_url( admin_url( 'themes.php?page=elation_info-pricing' ) ) ;
?>" class="button button-primary elation-btn"><?php 
esc_html_e( 'Purchase Elation Pro', 'elation' );
?></a>
                </div>
                
                <div class="elation-grid">
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-01.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Website Loader', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Website Loader', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Add a website loader to display while your website loads, and further customize the loader to suit your site.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-02.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Advanced WooCommerce Settings', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Advanced WooCommerce Settings', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Elation Pro offers extrs integrated WooCommerce settings to enhance your WooCommerce store even more.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-03.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Blog Pagination / Ajax Load new posts', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Blog Ajax Load new posts', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Add Numeric Pagination or AJAX button or infinite Scroll to load more blog posts much quicker and easier for your users.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-04.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'FREE Shortcode slider', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'FREE Shortcode slider', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Elation Pro includes a better shortcode slider to created sliders for all/any pages on your site.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-05.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Side Aligned Social Icons', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Customize Side Aligned Social Icons', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Add neat Social Icons to the side of the website that can scroll with the users on your site.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-06.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Brand Colored Social Icons', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Brand Colored Social Icons', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Change each Social link icon to their original brand color so they stand out beautifully.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-07.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Sticky Header', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Sticky Header', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Add a Sticky Header to your site so users can easily navigate around no matter how far they\'ve scrolled down.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-14.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Sticky Widget Area / Sidebar', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Sticky Widget Area / Sidebar', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Set the Widget area / Sidebar to sticky, making it always visible and clickable for users as the scroll.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-15.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'WooCommerce Menu Cart', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Menu Cart Drop Down basket', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Add and customize a menu cart to your site navigation and display a full dropdown cart with products.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-08.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Import Page Layouts', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Import Page Layouts', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Elation Pro offers a bunch of Elementor Page layouts to easily import and use as a start for each page.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-09.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Advanced Blog Excerpts', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Advanced Blog Excerpts', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Customize your blog list page with custom Excerpts to make them all display neatly and as you want.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-10.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Blog Posts Author Block', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Blog Posts Author Block', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Add a post author block to each blog post displaying information about the author.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-11.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Back To Top Button', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Back To Top Button', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Add and customize a neat Back To Top button so your users can easily scroll up with a simple click.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-12.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Footer Siteby Link', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Footer Siteby Link', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Building websites for clients? Add your own SiteBy link to the site to backlink to your business site.', 'elation' );
?>
                        </p>
                    </div>
                    <div class="elation-grid-block">
                        <img src="<?php 
echo  esc_url( get_template_directory_uri() . '/inc/admin/images/pro-13.jpg' ) ;
?>" alt="<?php 
esc_attr_e( 'Site Attribution', 'elation' );
?>" />
                        <h5><?php 
esc_html_e( 'Site Attribution', 'elation' );
?></h5>
                        <p>
                            <?php 
esc_html_e( 'Edit the Kaira attribution text in the footer to have your own &copy; copyright information.', 'elation' );
?>
                        </p>
                    </div>
                </div>

                <h6><?php 
esc_html_e( 'Extra features also included with Elation Pro', 'elation' );
?></h6>
                <ul>
                    <li><?php 
esc_html_e( 'Select from different WooCommerce Product List Styling', 'elation' );
?></li>
                    <li><?php 
esc_html_e( 'Edit WooCommerce Product Page Design / Layout', 'elation' );
?></li>
                    <li><?php 
esc_html_e( 'Edit WooCommerce Product Page Tab Styling', 'elation' );
?></li>
                    <li><?php 
esc_html_e( 'Remove selected User Account Tabs', 'elation' );
?></li>
                    <li><?php 
esc_html_e( 'Add breadcrumbs anywhere using a shortcode', 'elation' );
?></li>
                    <li><?php 
esc_html_e( 'Remove Pages from Blog Search Results', 'elation' );
?></li>
                    <li><?php 
esc_html_e( 'Add extra icon & text to site footer', 'elation' );
?></li>
                    <li><?php 
esc_html_e( '40% Renewals Discount', 'elation' );
?></li>
                </ul>

                <p>
                    <?php 
esc_html_e( 'With Elation Pro, we offer dedicated and prioritized premium support, and we will go out of our way to help you as best as we can with anything you may need help with.', 'elation' );
?>
                </p>
            </div>
        <?php 
?>

        <div class="elation-content-lower">
            <h3 class="elation-sub-title"><?php 
esc_html_e( 'Help with Elation', 'elation' );
?></h3>

            <p>
                <?php 
esc_html_e( 'For extra help on using Elation, read through the links below, or get in contact if you simply need advice or help when building your website.', 'elation' );
?>
            </p>
            
            <div class="elation-grid">
                <?php 
?>
                    <a href="<?php 
echo  esc_url( 'https://kairaweb.com/child-theme/elation-child-theme/' ) ;
?>" class="elation-grid-block" target="_blank">
                        <h5><?php 
esc_html_e( 'Elation Child Theme', 'elation' );
?></h5>
                        <p><?php 
esc_html_e( 'Download a working child theme for Elation and start customizing the theme with your own code.', 'elation' );
?></p>
                        <span><?php 
esc_html_e( 'Click to Download', 'elation' );
?></span>
                    </a>
                <?php 
?>
                <a href="<?php 
echo  esc_url( 'https://kairaweb.com/contact/' ) ;
?>" class="elation-grid-block" target="_blank">
                    <h5><?php 
esc_html_e( 'Theme Support', 'elation' );
?></h5>
                    <p><?php 
esc_html_e( 'Get theme Support / Advice for the Elation theme (Pro users get prioritized support).', 'elation' );
?></p>
                    <span><?php 
esc_html_e( 'Click to get in contact', 'elation' );
?></span>
                </a>
                <a href="<?php 
echo  esc_url( 'https://kairaweb.com/documentation/' ) ;
?>" class="elation-grid-block" target="_blank">
                    <h5><?php 
esc_html_e( 'Kaira Documentation', 'elation' );
?></h5>
                    <p><?php 
esc_html_e( 'Get more help on WordPress and using WordPress themes by reading through our Kaira documentation.', 'elation' );
?></p>
                    <span><?php 
esc_html_e( 'Click to Read More', 'elation' );
?></span>
                </a>
                <?php 
?>
            </div>

            <div class="elation-btns">
                <a href="<?php 
echo  esc_url( 'https://kairaweb.com/wordpress-theme/elation/' ) ;
?>" class="button button-primary elation-btn" target="_blank"><?php 
esc_html_e( 'View More on Elation', 'elation' );
?></a>
            </div>
        </div>
        
    </div>
</div>