OwlCyberSecurity - MANAGER

Edit File: dashboard.php

<div class="d-flex flex-column gap-3 me-3  mb-3 rtm-container rounded-2 rtm-bg-gradient-3" style="margin-top: -8rem;">
    <div class="px-5 rounded-3">
        <div class="spacer"></div>
        <div class="row row-cols-xl-2 row-cols-1 rtm-text-font px-4 py-5">
            <div class="col col-xl-7">
                <div class="d-flex flex-column gap-4 px-4">
                    <h1 class="text-white m-0">
                        Hello , <span class="fw-bold"><?php echo ucwords(get_userdata(get_current_user_id())->user_login) ?></span> <br>
                        Welcome To RomethemeKit
                    </h1>
                    <div class="rtm-divider rounded-pill" style="width: 80%;"></div>
                    <p class="text m-0">Get more features by upgrading to the pro version with a discount of up to 50%</p>
                    <div class="bg-gradient-1 rounded-3 p-4">
                        <ul class="list ms-4 text-white row row-cols-xl-2 row-cols-1">
                            <li class="col">54+ Total Widgets</li>
                            <li class="col">50+ Template Libary</li>
                            <li class="col">All Access for Theme Builder</li>
                            <li class="col">Include RomethemeForm </li>
                        </ul>
                    </div>
                    <div class="d-flex flex-row align-items-center gap-4">
                        <a href="https://rometheme.net/pricing/" target="_blank" class="btn btn-gradient-accent rounded-pill text-nowrap">Upgrade Now <i class="rtmicon rtmicon-arrow-up-right ms-2"></i></a>
                        <p class="text m-0">Learn More & Get a lifetime license and unlimited sites</p>
                    </div>
                </div>
            </div>
            <div class="col col-xl-5">
                <img src="<?php echo esc_url(\RomeTheme::plugin_url() . 'view/dashboard_section_1.png') ?>" alt="" class="img-fluid">
            </div>
        </div>
    </div>
</div>

<div class="rtm-container me-3">
    <div class="d-flex flex-lg-row flex-column gap-3">
        <div class="col col-lg-4">
            <div class="d-flex flex-column gap-3">
                <div class="p-5 d-flex flex-column gap-3 rounded-3 text-white rtm-text-font rtm-bg-gradient-1">
                    <h4>Let’s Connected with Us !</h4>
                    <p>Get information about updates, tips & tricks, New Offers, from our various social channels</p>
                    <div class="rtm-divider rounded-pill" style="width: 80%;"></div>
                    <div class="d-flex flex-column gap-2">
                        <h4>Social Media Channel</h4>
                        <ul class="rtm-social-container p-0 gap-2">
                            <li><a href="https://www.instagram.com/rometheme/" target="_blank" class="social-item rounded-2"><i class="fa-brands fa-instagram"></i></a></li>
                            <li><a href="https://twitter.com/rometheme" target="_blank" class="social-item rounded-2"><i class="fa-brands fa-x-twitter"></i></a></li>
                            <li><a href="https://www.youtube.com/channel/UCB1RCmPjzvFyWNN28rtwheQ" target="_blank" class="social-item rounded-2"><i class="fa-brands fa-youtube"></i></a></li>
                            <li><a href="https://dribbble.com/rometheme" target="_blank" class="social-item rounded-2"><i class="fa-brands fa-dribbble"></i></a></li>
                            <li><a href="https://www.behance.net/Rometheme" target="_blank" class="social-item rounded-2"><i class="fa-brands fa-behance"></i></a></li>
                        </ul>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        <h4>Join the Community</h4>
                        <a href="https://www.facebook.com/groups/1039541754019284" target="_blank" class="d-flex flex-row align-items-center gap-3 social-link">
                            <div class="social-item rounded-2">
                                <i class="fa-brands fa-facebook-f"></i>
                            </div>
                            <span>Rometheme Community</span>
                        </a>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        <h4>Premium Support</h4>
                        <a href="mailto:cs.rometheme@gmail.com" class="d-flex flex-row align-items-center gap-3 social-link">
                            <div class="social-item rounded-2">
                                <i class="fa-solid fa-envelope"></i>
                            </div>
                            <span>cs.rometheme@gmail.com</span>
                        </a>
                    </div>
                </div>
                <div class="p-5 d-flex flex-column gap-3 rounded-3 text-white rtm-text-font rtm-bg-gradient-1">
                    <span class="rtm-text-font accent-color">Cheers for use RomethemeKit.</span>
                    <h4>Another one, Rate us on
                        Wordpress too !</h4>
                    <div class="rtm-divider rounded-pill" style="width: 80%;"></div>
                    <p>Our product development is greatly impacted by your highest rating.</p>
                    <div class="d-flex flex-row align-items-center gap-4">
                        <a href="https://wordpress.org/support/plugin/rometheme-for-elementor/reviews/" target="_blank" class="btn btn-gradient-accent rounded-pill text-nowrap">Rate Now <i class="rtmicon rtmicon-arrow-up-right ms-2"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="d-flex flex-column gap-3">
                <div class="rtm-bg-gradient-1 p-5 rounded-3 d-flex flex-column gap-3">
                    <div class="d-flex flex-row align-items-center gap-3">
                        <div class="bg-gradient-2 heading-icon">
                            <i class="fa-solid fa-question"></i>
                        </div>
                        <h4 class="text-nowrap m-0 text-white">Recently Update by RomethemeKit</h4>
                        <div class="col">
                            <div class="rtm-divider"></div>
                        </div>
                    </div>
                    <div class="d-flex flex-column text-white">
                        <div class="d-flex flex-row align-items-center gap-3">
                            <h4 class="m-0">Maret 15 , 2025</h4>
                            <span class="rtm-version py-0">V.<?php echo esc_html(\RomeTheme::rt_version()) ?></span>
                        </div>
                        <ul class="list text-white ms-4 py-3" style="font-size:14px">
                            <li>New Extension : Glassmorphism Effect</li>
                            <li>New Widget : Back to Top</li>
                            <li>New Widget : Client Grid</li>
                            <li>Fix : Bug Fixed in Text Marquee Widget</li>
                            <li>Fix : Bug Fixed in Post List Widget</li>
                            <li>Fix : Bug Fixed in Product Grid Widget</li>
                            <li>Fix : Bug Fixed in Pricing Table Widget</li>
                            <li>Fix : Bug Fixed in Hero Slider Widget</li>
                        </ul>
                        <div>
                            <a href="https://wordpress.org/plugins/rometheme-for-elementor/#developers" target="__blank" class="btn btn-gradient-accent rounded-pill">Full Changelog<i class="rtmicon rtmicon-arrow-up-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
                <div class="rtm-bg-gradient-1 p-5 rounded-3 d-flex flex-column gap-4">
                    <div class="d-flex flex-row align-items-center gap-3">
                        <div class="bg-gradient-2 heading-icon">
                            <i class="fa-brands fa-youtube"></i>
                        </div>
                        <h4 class="text-nowrap m-0 text-white">Watch Our Tutorial Video Here</h4>
                        <div class="col">
                            <div class="rtm-divider"></div>
                        </div>
                    </div>
                    <div class="d-flex flex-row gap-4">
                        <div class="col">
                            <div class="yt-container overflow-hidden rounded-3">
                                <div class="thumbnail">
                                    <img src="https://i1.ytimg.com/vi/z27RYQVGaYE/maxresdefault.jpg" alt="" class="img-fluid">
                                </div>
                                <div class="overlay">
                                    <a href="https://youtu.be/z27RYQVGaYE?feature=shared" target="_blank">
                                        <i class="fa-solid fa-circle-play"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="yt-container overflow-hidden rounded-3">
                                <div class="thumbnail">
                                    <img src="https://i1.ytimg.com/vi/-WAhHxMxtmw/maxresdefault.jpg" alt="" class="img-fluid">
                                </div>
                                <div class="overlay">
                                    <a href="https://youtu.be/-WAhHxMxtmw?feature=shared" target="_blank">
                                        <i class="fa-solid fa-circle-play"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-row align-items-center gap-4">
                        <a href="https://www.youtube.com/playlist?list=PLiDcdRZHQZ66vm5sZ6maMY-CZiZuweCRo" target="_blank" class="btn btn-gradient-accent rounded-pill">Watch Now <i class="rtmicon rtmicon-arrow-up-right ms-2"></i></a>
                        <p class="text m-0">Enjoy your #selflearningwithrometheme</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.link {
        text-decoration: none;
    }
</style>