<div class="container py-5">
    <!-- Product Title and Overview -->
    <div class="text-center mb-4">
        <i class="fab fa-edge fa-3x text-info mb-3"></i>
        <h5 class="card-title">Edge Extension</h5>
        <p class="lead text-muted">Your ultimate Edge addon to organize, store, and personalize your bookmarks effortlessly.</p>
    </div>

    <!-- Features Section -->
    <div class="row g-4">
        <!-- Feature: Add and Manage Bookmarks -->
        <div class="col-md-6">
            <div class="card shadow-sm h-100 context-main-bg">
                <div class="card-body text-center">
                    <i class="fas fa-bookmark fa-2x text-primary mb-3"></i>
                    <h5 class="card-title">Add & Manage Bookmarks</h5>
                    <p class="card-text">Quickly add bookmarks, organize them, and never lose track of your favorite websites.</p>
                </div>
            </div>
        </div>

        <!-- Feature: Create Folders -->
        <div class="col-md-6">
            <div class="card shadow-sm h-100 context-main-bg">
                <div class="card-body text-center">
                    <i class="fas fa-folder-open fa-2x text-success mb-3"></i>
                    <h5 class="card-title">Create Folders</h5>
                    <p class="card-text">Group your bookmarks into customizable folders for better organization.</p>
                </div>
            </div>
        </div>

        <!-- Feature: Set Colors -->
        <div class="col-md-6">
            <div class="card shadow-sm h-100 context-main-bg">
                <div class="card-body text-center">
                    <i class="fas fa-palette fa-2x text-warning mb-3"></i>
                    <h5 class="card-title">Set Colors</h5>
                    <p class="card-text">Personalize your folders and bookmarks with color coding.</p>
                </div>
            </div>
        </div>

        <!-- Feature: Privacy Settings -->
        <div class="col-md-6">
            <div class="card shadow-sm h-100 context-main-bg">
                <div class="card-body text-center">
                    <i class="fas fa-lock fa-2x text-danger mb-3"></i>
                    <h5 class="card-title">Privacy Controls</h5>
                    <p class="card-text">Keep your bookmarks private or share them—your choice, your control.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Call to Action -->
    <div class="text-center mt-5">
        <a href="/edge" class="btn atb-green-bg btn-lg">
            <i class="fas fa-download me-2"></i>Get the Addon for Edge
        </a>
    </div>
</div>
