<div class="container py-5 context-main-bg mt-4">
    <!-- Hero Section -->
    <div class="text-center mb-5">
        <h1 class="display-4">Welcome to <span class="atb-green">All The Bookmarks</span></h1>
        <p class="lead">You've unlocked the ultimate tool for organizing, sharing, and managing all of your bookmarks effortlessly.</p>
        <img src="/images/manage.png" alt="Illustration of bookmark organization" class="img-fluid m-4 border border-white" style="width: 600px;">
    </div>
    <hr>
    <!-- Features Section -->
    <div class="row text-center my-4">
        <div class="col-md-4">
            <i class="fas fa-folder fa-3x atb-green mb-3"></i>
            <h5>Organize Your Bookmarks</h5>
            <p>Create folders to keep your bookmarks tidy and easy to find.</p>
        </div>
        <div class="col-md-4">
            <i class="fas fa-share-alt fa-3x atb-green mb-3"></i>
            <h5>Share Collections</h5>
            <p>Share dashboards with groups of folders to collaborate seamlessly.</p>
        </div>
        <div class="col-md-4">
            <i class="fas fa-sync-alt fa-3x atb-green mb-3"></i>
            <h5>Import & Export</h5>
            <p>Sync your bookmarks across major browsers with our easy import/export tools.</p>
        </div>
    </div>
    <hr>
    <!-- Browser Extensions Section -->
    <div class="row align-items-center my-4 ps-5">
        <div class="col-md-6">
            <h3>Bookmark Anything; Anytime, Anywhere</h3>
            <p>Our browser extension works with Chrome, Firefox, Brave, Edge, and Opera, making it simple to save and manage bookmarks directly from your browser.</p>
            <a href="/extensions" class="btn atb-green-outline">Install Extension</a>
        </div>
        <div class="col-md-6 text-center">
            <img src="/images/extension.png" alt="Illustration of browser extensions" class="img-fluid">
        </div>
    </div>
    <hr>
    <!-- Dashboards Section -->
    <div class="row align-items-center my-4 ps-5">
        <div class="col-md-6 text-center">
            <img src="/images/dashboard.png" alt="Illustration of dashboards" class="img-fluid">
        </div>
        <div class="col-md-6">
            <h3>Dynamic Dashboards</h3>
            <p>Group folders into dashboards and share them to keep everyone updated on the latest changes.</p>
            <a href="/bookmarks/dashboards" class="btn atb-green-outline">Learn More About Dashboards</a>
        </div>
    </div>
    <hr>
    <!-- Call to Action -->
    <div class="text-center mt-4">
        <h4>Ready to Get Started?</h4>
        <p>Start organizing, sharing, and syncing your bookmarks today!</p>
        <a href="/bookmarks/createFolder" class="btn btn-lg atb-green-bg">Create Your First Folder</a>
    </div>
</div>