<div class="row justify-content-center">
  <div class="col-md-10">
    <div class="card bg-dark">
      <div class="card-header bg-primary text-white">
        <h1 class="mb-0">About 2weekmail</h1>
      </div>
      <div class="card-body">
        <section class="mb-5">
          <h2 class="mb-4">What is 2weekmail?</h2>
          <p class="lead">2weekmail is a simple, privacy-focused temporary email service that provides disposable email addresses that automatically expire after 14 days.</p>
        </section>

        <section class="mb-5">
          <h2 class="mb-4">How It Works</h2>
          <div class="row">
            <div class="col-md-6 mb-4">
              <div class="card h-100 bg-dark border-primary">
                <div class="card-body text-center">
                  <i class="fas fa-envelope-open-text fa-3x mb-3 text-primary"></i>
                  <h4>Generate a Temporary Email</h4>
                  <p>Instantly create a temporary email address with no registration required.</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-4">
              <div class="card h-100 bg-dark border-primary">
                <div class="card-body text-center">
                  <i class="fas fa-inbox fa-3x mb-3 text-primary"></i>
                  <h4>Receive Emails Only</h4>
                  <p>Your temporary address can only receive emails, not send them.</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-4">
              <div class="card h-100 bg-dark border-primary">
                <div class="card-body text-center">
                  <i class="fas fa-calendar-times fa-3x mb-3 text-primary"></i>
                  <h4>Automatic Deletion</h4>
                  <p>After 14 days, your temporary email address and all received messages are permanently deleted.</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-4">
              <div class="card h-100 bg-dark border-primary">
                <div class="card-body text-center">
                  <i class="fas fa-user-shield fa-3x mb-3 text-primary"></i>
                  <h4>Zero Data Collection</h4>
                  <p>We don't collect any personal information, track your usage, or use cookies.</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="mb-5">
          <h2 class="mb-4">Why Use 2weekmail?</h2>
          <div class="row">
            <div class="col-md-6 mb-3">
              <div class="d-flex">
                <div class="me-3">
                  <i class="fas fa-shield-alt text-primary fa-2x"></i>
                </div>
                <div>
                  <h4>Protect Your Privacy</h4>
                  <p>Keep your primary email address private when signing up for services.</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="d-flex">
                <div class="me-3">
                  <i class="fas fa-ban text-primary fa-2x"></i>
                </div>
                <div>
                  <h4>Avoid Spam</h4>
                  <p>Use a disposable address for one-time registrations.</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="d-flex">
                <div class="me-3">
                  <i class="fas fa-unlink text-primary fa-2x"></i>
                </div>
                <div>
                  <h4>No Commitment</h4>
                  <p>No accounts to create or delete - everything disappears automatically.</p>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="d-flex">
                <div class="me-3">
                  <i class="fas fa-broom text-primary fa-2x"></i>
                </div>
                <div>
                  <h4>Clean and Simple</h4>
                  <p>A straightforward service focused solely on providing temporary email functionality.</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="mb-5">
          <h2 class="mb-4">Our Approach to Privacy</h2>
          <div class="card bg-dark border-success">
            <div class="card-body">
              <p class="lead">At 2weekmail, we believe in privacy by design. That's why:</p>
              <ul class="list-group list-group-flush bg-transparent">
                <li class="list-group-item bg-dark text-light border-secondary">
                  <i class="fas fa-check-circle text-success me-2"></i> We don't ask for personal information
                </li>
                <li class="list-group-item bg-dark text-light border-secondary">
                  <i class="fas fa-check-circle text-success me-2"></i> We don't track your IP address
                </li>
                <li class="list-group-item bg-dark text-light border-secondary">
                  <i class="fas fa-check-circle text-success me-2"></i> We don't use cookies or analytics
                </li>
                <li class="list-group-item bg-dark text-light border-secondary">
                  <i class="fas fa-check-circle text-success me-2"></i> We don't keep emails longer than 14 days
                </li>
                <li class="list-group-item bg-dark text-light border-secondary">
                  <i class="fas fa-check-circle text-success me-2"></i> We don't sell or share any data (because we don't collect any)
                </li>
              </ul>
            </div>
          </div>
        </section>

        <section class="mb-5">
          <h2 class="mb-4">Common Uses</h2>
          <div class="row text-center">
            <div class="col-md-4 mb-3">
              <div class="bg-dark p-3 rounded h-100">
                <i class="fas fa-ticket-alt text-primary fa-2x mb-3"></i>
                <p>Signing up for free trials</p>
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <div class="bg-dark p-3 rounded h-100">
                <i class="fas fa-key text-primary fa-2x mb-3"></i>
                <p>Receiving one-time verification codes</p>
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <div class="bg-dark p-3 rounded h-100">
                <i class="fas fa-vial text-primary fa-2x mb-3"></i>
                <p>Testing website functionality</p>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="bg-dark p-3 rounded h-100">
                <i class="fas fa-newspaper text-primary fa-2x mb-3"></i>
                <p>Subscribing to newsletters without cluttering your primary inbox</p>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="bg-dark p-3 rounded h-100">
                <i class="fas fa-store text-primary fa-2x mb-3"></i>
                <p>Marketplace registrations</p>
              </div>
            </div>
          </div>
        </section>

        <section class="mb-5">
          <h2 class="mb-4">Technical Details</h2>
          <div class="card bg-dark border-primary">
            <div class="card-body">
              <p>2weekmail is built with modern technologies focused on security and efficiency. Our lightweight service ensures that temporary emails work reliably while maintaining our commitment to privacy and simplicity.</p>
              <div class="row mt-4 text-center">
                <div class="col-md-3 col-6 mb-3">
                  <i class="fab fa-node-js fa-3x text-primary mb-2"></i>
                  <p>Node.js</p>
                </div>
                <div class="col-md-3 col-6 mb-3">
                  <i class="fas fa-database fa-3x text-primary mb-2"></i>
                  <p>MongoDB</p>
                </div>
                <div class="col-md-3 col-6 mb-3">
                  <i class="fas fa-lock fa-3x text-primary mb-2"></i>
                  <p>Encryption</p>
                </div>
                <div class="col-md-3 col-6 mb-3">
                  <i class="fas fa-server fa-3x text-primary mb-2"></i>
                  <p>Cloud Hosting</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section>
          <h2 class="mb-4">Contact</h2>
          <div class="card bg-dark border-info">
            <div class="card-body text-center">
              <p>If you have questions or need assistance, please reach out to us at:</p>
              <p><a href="mailto:ainzbirb@proton.me" class="btn btn-info"><i class="fas fa-envelope me-2"></i>ainzbirb@proton.me</a></p>
            </div>
          </div>
        </section>
      </div>
      <div class="card-footer text-center text-muted">
        <p class="mb-0"><em>2weekmail - Temporary email. No strings attached.</em></p>
      </div>
    </div>
  </div>
</div>