<div class="text-center mb-5">
    <h1 class="display-4 fw-bold">2weekmail</h1>
    <p class="lead">Temporary email service that lasts for two weeks</p>
    <div class="d-flex justify-content-center mt-4">
        <a href="/api-docs" class="btn btn-primary btn-lg me-3">
            <i class="fas fa-code me-2"></i>Get API Key
        </a>
        <a href="#features" class="btn btn-outline-light btn-lg">
            <i class="fas fa-info-circle me-2"></i>Learn More
        </a>
    </div>
</div>

<div class="row mt-5 g-4">
    <div class="col-md-4">
        <div class="card h-100 bg-dark text-light border-primary">
            <div class="card-body text-center">
                <i class="fas fa-chart-bar fa-4x mb-3 text-primary"></i>
                <h3 class="card-title">Stats</h3>
                <p class="card-text">View real-time statistics about our service usage and performance.</p>
                <a href="/stats" class="btn btn-primary mt-3">View Stats</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card h-100 bg-dark text-light border-primary">
            <div class="card-body text-center">
                <i class="fas fa-code fa-4x mb-3 text-primary"></i>
                <h3 class="card-title">API Documentation</h3>
                <p class="card-text">Explore our comprehensive API documentation to integrate with our service.</p>
                <a href="/api-docs" class="btn btn-primary mt-3">View API Docs</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card h-100 bg-dark text-light border-primary">
            <div class="card-body text-center">
                <i class="fas fa-info-circle fa-4x mb-3 text-primary"></i>
                <h3 class="card-title">About</h3>
                <p class="card-text">Learn more about 2weekmail, our mission, and how we protect your privacy.</p>
                <a href="/about" class="btn btn-primary mt-3">About Us</a>
            </div>
        </div>
    </div>
</div>

<div id="features" class="row mt-5 pt-5">
    <div class="col-12 text-center mb-4">
        <h2 class="fw-bold">Why Choose 2weekmail?</h2>
    </div>
    
    <div class="col-md-6 col-lg-3 mb-4">
        <div class="d-flex flex-column align-items-center">
            <div class="bg-primary rounded-circle p-3 mb-3">
                <i class="fas fa-shield-alt text-light fa-2x"></i>
            </div>
            <h4>Privacy First</h4>
            <p class="text-center">Your data is never sold or shared with third parties.</p>
        </div>
    </div>
    
    <div class="col-md-6 col-lg-3 mb-4">
        <div class="d-flex flex-column align-items-center">
            <div class="bg-primary rounded-circle p-3 mb-3">
                <i class="fas fa-bolt text-light fa-2x"></i>
            </div>
            <h4>Fast API</h4>
            <p class="text-center">Our API is designed for speed and reliability.</p>
        </div>
    </div>
    
    <div class="col-md-6 col-lg-3 mb-4">
        <div class="d-flex flex-column align-items-center">
            <div class="bg-primary rounded-circle p-3 mb-3">
                <i class="fas fa-code-branch text-light fa-2x"></i>
            </div>
            <h4>Easy Integration</h4>
            <p class="text-center">Simple to integrate with your existing applications.</p>
        </div>
    </div>
    
    <div class="col-md-6 col-lg-3 mb-4">
        <div class="d-flex flex-column align-items-center">
            <div class="bg-primary rounded-circle p-3 mb-3">
                <i class="fas fa-calendar-alt text-light fa-2x"></i>
            </div>
            <h4>Two Week Retention</h4>
            <p class="text-center">Emails are stored for exactly two weeks, then deleted.</p>
        </div>
    </div>
</div> 