<div class="container py-5">
    <!-- Page Header -->
    <div class="text-center mb-4">
        <h1 class="fw-bold">Our Browser Extensions</h1>
        <p class="lead text-muted">Discover powerful tools to enhance your browsing experience, compatible with the browsers you love.</p>
    </div>

    <!-- Products Grid -->
    <div class="row g-4">
        <!-- Chrome Extension -->
        <div class="col-md-4">
            <div class="card shadow-sm h-100 context-main-bg">
                <div class="card-body text-center">
                    <i class="fab fa-chrome fa-3x text-primary mb-3"></i>
                    <h5 class="card-title">Chrome Extension</h5>
                    <p class="card-text">Enhance your Chrome browser with advanced features and effortless organization.</p>
                    <a href="/extensions/chrome" class="btn atb-green-bg btn-sm">Learn More</a>
                </div>
            </div>
        </div>

        <!-- Firefox Extension -->
        <div class="col-md-4">
            <div class="card shadow-sm h-100 context-main-bg">
                <div class="card-body text-center">
                    <i class="fab fa-firefox fa-3x text-warning mb-3"></i>
                    <h5 class="card-title">Firefox Extension</h5>
                    <p class="card-text">Seamlessly integrate with Firefox for a smoother browsing experience.</p>
                    <a href="/extensions/firefox" class="btn atb-green-bg btn-sm">Learn More</a>
                </div>
            </div>
        </div>

        <!-- Opera Extension -->
        <div class="col-md-4">
            <div class="card shadow-sm h-100 context-main-bg">
                <div class="card-body text-center">
                    <i class="fab fa-opera fa-3x text-danger mb-3"></i>
                    <h5 class="card-title">Opera Extension</h5>
                    <p class="card-text">Boost your Opera browser with intuitive features and tools.</p>
                    <a href="/extensions/opera" class="btn atb-green-bg btn-sm">Learn More</a>
                </div>
            </div>
        </div>

        <!-- Brave Extension -->
        <div class="col-md-6">
            <div class="card shadow-sm h-100 context-main-bg">
                <div class="card-body text-center">
                    <i class="fab fa-brave fa-3x text-orange mb-3"></i>
                    <h5 class="card-title">Brave Extension</h5>
                    <p class="card-text">Enjoy secure and private browsing with Brave, enhanced by our extension.</p>
                    <a href="/extensions/brave" class="btn atb-green-bg btn-sm">Learn More</a>
                </div>
            </div>
        </div>

        <!-- Edge Extension -->
        <div class="col-md-6">
            <div class="card shadow-sm h-100 context-main-bg">
                <div class="card-body text-center">
                    <i class="fab fa-edge fa-3x text-info mb-3"></i>
                    <h5 class="card-title">Edge Extension</h5>
                    <p class="card-text">Maximize productivity on Microsoft Edge with our extension.</p>
                    <a href="/extensions/edge" class="btn atb-green-bg btn-sm">Learn More</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Safari Disclaimer -->
    <div class="text-center mt-5">
        <p class="text-muted">
            <i class="fas fa-exclamation-circle me-2"></i>
            Unfortunately, our extensions are not currently supported on <a href="/extensions/safari" class="text-decoration-none atb-green">Safari</a>.
        </p>
    </div>
</div>
