<div id="introduction" class="content-introduction active tab_item">
    <section class="section_full background_free full_width">
        <div class="col_description">
            <h2><?php esc_html_e('Quick Overview', 'image-choices-for-gravity-forms'); ?></h2>
            <p><?php esc_html_e('Image Picker enhances Gravity Forms by replacing standard radio, checkboxes buttons and dropdwon with clickable images. Perfect for surveys, polls, sigle product field, product option, multiple choices, shipping and custom post field fields. It makes forms more interactive and visually appealing. Users can easily select options through images, improving engagement and decision-making.', 'image-choices-for-gravity-forms'); ?></p>
        </div>
    </section>

    <div class="content_heading">
        <h2><?php esc_html_e('Never miss a valuable features', 'image-choices-for-gravity-forms'); ?></h2>
        <p><?php esc_html_e('Let\'s explore the awesome features of the plugin', 'image-choices-for-gravity-forms'); ?></p>
    </div>

    <div class="section_wrap">
        <!-- Slider Variation -->
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('Radio & Checkbox Field', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('Replace or enhance your Gravity Forms radio and checkbox fields by adding images, allowing users to choose from visual options instead of plain text labels.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/checkbox.gif'); ?>">
            </div>
        </section>
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('Dropdown Field', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('Add images to Gravity Forms dropdown fields for a more visual selection experience. Perfect for product variations, categories, or any option where images add clarity.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/dropdown.gif'); ?>">
            </div>
        </section>
        <!-- Single and dual handle slider -->
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('Single Product Field', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('Enhance your Gravity Forms single product field by adding images with input options. Users can view the product visually and enter custom quantities or values directly, making the selection process more interactive.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/single-product.webp'); ?>">
            </div>
        </section>
        <!-- Tooltip & Pips -->
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('6 Beautiful Themes', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('Image Picker comes with 6 beautiful pre-designed themes to match your form style. You can even apply different themes to different fields at the same time, giving each section of your form a unique look and feel.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/circle.webp'); ?>">
            </div>
        </section>
        <!-- Default min & max value -->
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('Shipping Field', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('Enhance your Gravity Forms shipping fields by adding images to both radio and dropdown options. Users can visually compare and select their preferred shipping method with ease.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/shipping.webp'); ?>">
            </div>
        </section>
        <!-- Prefix & postfix -->
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('Multiple Choice & other fields', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('Add images to Gravity Forms multiple choice, survey, and poll fields, transforming standard options into visual selections. This makes it easier for users to understand choices and engage with your forms.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/multiple.webp'); ?>">
            </div>
        </section>

        <!-- RTL support -->
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('Global & Form Settings', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('Image Picker supports both global and specific form settings. You can define default styles and behaviors once globally, or customize them individually for each form to match unique requirements.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/form_setting.webp'); ?>">
            </div>
        </section>
        <!-- Calculation Support -->
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('Field Settings', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('With Image Picker, you can customize individual fields by overriding the form’s default settings. This allows you to choose layouts, theme, notification and more for each field independently.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/field_setting.webp'); ?>">
            </div>
        </section>
        <!-- Entry / Notification -->
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('Entry & Notfications', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('Image Picker saves selected images in Gravity Forms entries and includes them in email notifications. You have multiple options to display or retrieve images and text, allowing you to customize exactly how data appears based on your needs.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/notification.webp'); ?>">
            </div>
        </section>
        <section class="section_half">
            <div class="col_description">
                <h3><?php esc_html_e('Image Options', 'image-choices-for-gravity-forms'); ?></h3>
                <p>
                    <?php
                    esc_html_e('Image Picker lets you control image height at the global, form, or individual field level. Each theme also comes with its own default height settings, ensuring your images look perfect in any layout.', 'image-choices-for-gravity-forms');
                    ?>
                </p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/image-option.webp'); ?>">
            </div>
        </section>
    </div>
</div>