<?php echo showSectionHead($spTextPanel['About Us']); ?>

<div style="max-width: 1200px; margin: 0 auto;">
    <!-- Hero Section -->
    <div style="background: linear-gradient(135deg, #4a8fc7 0%, #6faee0 100%); padding: 40px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(74, 143, 199, 0.3);">
        <div style="text-align: center; color: #ffffff;">
            <i class="fa fa-globe" style="font-size: 48px; margin-bottom: 15px; opacity: 0.9;"></i>
            <h2 style="font-size: 32px; font-weight: 700; margin: 0 0 12px 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">Quick Web Proxy</h2>
            <p style="font-size: 18px; margin: 0; opacity: 0.95; line-height: 1.6;">Secure, Fast & Anonymous Web Browsing Solution</p>
        </div>
    </div>

    <!-- What is Quick Web Proxy -->
    <div style="background: #ffffff; padding: 30px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-left: 4px solid #4a8fc7;">
        <h3 style="color: #2d3748; font-size: 24px; margin: 0 0 20px 0; display: flex; align-items: center;">
            <i class="fa fa-info-circle" style="color: #4a8fc7; margin-right: 12px; font-size: 28px;"></i>
            What is Quick Web Proxy?
        </h3>
        <p style="color: #4a5568; font-size: 16px; line-height: 1.8; margin: 0;">
            Quick Web Proxy is a powerful plugin for SEO Panel that enables you to browse websites anonymously and securely.
            It acts as an intermediary between you and the websites you visit, helping you access content that might be
            restricted in your region, test website accessibility from different locations, and maintain your privacy while browsing.
        </p>
    </div>

    <!-- Key Features -->
    <div style="background: #ffffff; padding: 30px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);">
        <h3 style="color: #2d3748; font-size: 24px; margin: 0 0 25px 0; display: flex; align-items: center;">
            <i class="fa fa-star" style="color: #4a8fc7; margin-right: 12px; font-size: 28px;"></i>
            Key Features
        </h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
            <!-- Feature 1 -->
            <div style="padding: 20px; background: linear-gradient(135deg, #f8fafc 0%, #e6f4ff 100%); border-radius: 10px; border: 1px solid #cbd5e0;">
                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                    <i class="fa fa-shield-alt" style="color: #10b981; font-size: 24px; margin-right: 12px;"></i>
                    <h4 style="margin: 0; color: #2d3748; font-size: 18px;">Anonymous Browsing</h4>
                </div>
                <p style="color: #4a5568; font-size: 14px; line-height: 1.6; margin: 0;">
                    Browse websites without revealing your IP address or location, maintaining complete privacy.
                </p>
            </div>

            <!-- Feature 2 -->
            <div style="padding: 20px; background: linear-gradient(135deg, #f8fafc 0%, #e6f4ff 100%); border-radius: 10px; border: 1px solid #cbd5e0;">
                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                    <i class="fa fa-bolt" style="color: #f59e0b; font-size: 24px; margin-right: 12px;"></i>
                    <h4 style="margin: 0; color: #2d3748; font-size: 18px;">Fast & Efficient</h4>
                </div>
                <p style="color: #4a5568; font-size: 14px; line-height: 1.6; margin: 0;">
                    Optimized for speed with minimal latency, providing quick access to web content.
                </p>
            </div>

            <!-- Feature 3 -->
            <div style="padding: 20px; background: linear-gradient(135deg, #f8fafc 0%, #e6f4ff 100%); border-radius: 10px; border: 1px solid #cbd5e0;">
                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                    <i class="fa fa-unlock-alt" style="color: #6366f1; font-size: 24px; margin-right: 12px;"></i>
                    <h4 style="margin: 0; color: #2d3748; font-size: 18px;">Bypass Restrictions</h4>
                </div>
                <p style="color: #4a5568; font-size: 14px; line-height: 1.6; margin: 0;">
                    Access geo-restricted content and bypass network filters with ease.
                </p>
            </div>

            <!-- Feature 4 -->
            <div style="padding: 20px; background: linear-gradient(135deg, #f8fafc 0%, #e6f4ff 100%); border-radius: 10px; border: 1px solid #cbd5e0;">
                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                    <i class="fa fa-check-circle" style="color: #10b981; font-size: 24px; margin-right: 12px;"></i>
                    <h4 style="margin: 0; color: #2d3748; font-size: 18px;">Easy to Use</h4>
                </div>
                <p style="color: #4a5568; font-size: 14px; line-height: 1.6; margin: 0;">
                    Simple interface with no complex setup required. Just enter URL and browse.
                </p>
            </div>

            <!-- Feature 5 -->
            <div style="padding: 20px; background: linear-gradient(135deg, #f8fafc 0%, #e6f4ff 100%); border-radius: 10px; border: 1px solid #cbd5e0;">
                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                    <i class="fa fa-mobile-alt" style="color: #ec4899; font-size: 24px; margin-right: 12px;"></i>
                    <h4 style="margin: 0; color: #2d3748; font-size: 18px;">Mobile Friendly</h4>
                </div>
                <p style="color: #4a5568; font-size: 14px; line-height: 1.6; margin: 0;">
                    Fully responsive design that works seamlessly on all devices and screen sizes.
                </p>
            </div>

            <!-- Feature 6 -->
            <div style="padding: 20px; background: linear-gradient(135deg, #f8fafc 0%, #e6f4ff 100%); border-radius: 10px; border: 1px solid #cbd5e0;">
                <div style="display: flex; align-items: center; margin-bottom: 12px;">
                    <i class="fa fa-cogs" style="color: #8b5cf6; font-size: 24px; margin-right: 12px;"></i>
                    <h4 style="margin: 0; color: #2d3748; font-size: 18px;">SEO Integration</h4>
                </div>
                <p style="color: #4a5568; font-size: 14px; line-height: 1.6; margin: 0;">
                    Perfect for SEO professionals to test website accessibility from different locations.
                </p>
            </div>
        </div>
    </div>

    <!-- Use Cases -->
    <div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 30px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-left: 4px solid #10b981;">
        <h3 style="color: #2d3748; font-size: 24px; margin: 0 0 20px 0; display: flex; align-items: center;">
            <i class="fa fa-lightbulb" style="color: #10b981; margin-right: 12px; font-size: 28px;"></i>
            Use Cases
        </h3>
        <ul style="color: #4a5568; font-size: 16px; line-height: 2; margin: 0; padding-left: 25px;">
            <li><strong>SEO Testing:</strong> Check how your website appears from different geographic locations</li>
            <li><strong>Privacy Protection:</strong> Browse websites without leaving traces of your identity</li>
            <li><strong>Content Research:</strong> Access region-specific content for market research</li>
            <li><strong>Security Testing:</strong> Test your website's security from external networks</li>
            <li><strong>Competitor Analysis:</strong> Analyze competitor websites anonymously</li>
        </ul>
    </div>

    <!-- Technology Stack -->
    <div style="background: #ffffff; padding: 30px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);">
        <h3 style="color: #2d3748; font-size: 24px; margin: 0 0 25px 0; display: flex; align-items: center;">
            <i class="fa fa-code" style="color: #4a8fc7; margin-right: 12px; font-size: 28px;"></i>
            Technology Stack
        </h3>
        <div style="display: flex; flex-wrap: wrap; gap: 12px;">
            <span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; padding: 10px 20px; border-radius: 25px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);">
                <i class="fab fa-php"></i> PHP
            </span>
            <span style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: #ffffff; padding: 10px 20px; border-radius: 25px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 6px rgba(240, 147, 251, 0.3);">
                <i class="fab fa-html5"></i> HTML5
            </span>
            <span style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: #ffffff; padding: 10px 20px; border-radius: 25px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 6px rgba(79, 172, 254, 0.3);">
                <i class="fab fa-css3-alt"></i> CSS3
            </span>
            <span style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: #ffffff; padding: 10px 20px; border-radius: 25px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 6px rgba(250, 112, 154, 0.3);">
                <i class="fab fa-js"></i> JavaScript
            </span>
            <span style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); color: #ffffff; padding: 10px 20px; border-radius: 25px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 6px rgba(48, 207, 208, 0.3);">
                <i class="fa fa-database"></i> AJAX
            </span>
        </div>
    </div>

    <!-- Developers -->
    <div style="background: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); text-align: center;">
        <h3 style="color: #2d3748; font-size: 24px; margin: 0 0 20px 0; display: flex; align-items: center; justify-content: center;">
            <i class="fa fa-users" style="color: #4a8fc7; margin-right: 12px; font-size: 28px;"></i>
            <?php echo $spText['label']['Developers']?>
        </h3>
        <p style="color: #4a5568; font-size: 16px; margin: 0 0 20px 0; line-height: 1.6;">
            Quick Web Proxy is proudly developed and maintained by the SEO Panel Team
        </p>
        <div style="display: inline-flex; align-items: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 15px 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);">
            <i class="fa fa-globe" style="color: #ffffff; font-size: 24px; margin-right: 12px;"></i>
            <a href="https://www.seopanel.org/" target="_blank" style="color: #ffffff; font-size: 18px; font-weight: 600; text-decoration: none;">
                www.seopanel.org
            </a>
        </div>
        <p style="color: #718096; font-size: 14px; margin: 20px 0 0 0;">
            <i class="fa fa-heart" style="color: #ef4444;"></i> Made with passion for the SEO community
        </p>
    </div>
</div>
