<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InfraHub</title>
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    
    <!-- Use Flask route for CSS -->
    <link rel="stylesheet" href="{{ url_for('pages.serve_css', filename='retro.css') }}">
</head>
<body>
  <!-- ===== HEADER ===== -->
<header>
  <div class="header-inner">
    <div class="left">
        <img src="{{ url_for('pages.serve_png', filename='infrahublogo.png') }}" alt="InfraHub Logo" class="logo">
    </div>

    <nav>
      <ul class="navbar">
        <li><a href="{{ url_for('pages.index') }}"><i class="fa fa-house"></i> Home</a></li>
        <li><a href="{{ url_for('pages.isos') }}"><i class="fa fa-compact-disc"></i> ISOs</a></li>
        <li><a href="{{ url_for('pages.playbooks') }}"><i class="fa fa-scroll"></i> Playbooks</a></li>
        <li><a href="{{ url_for('pages.docker') }}"><i class="fab fa-docker"></i>Docker Sandbox</a></li>
        <li><a href="{{ url_for('pages.aws') }}"><i class="fab fa-aws"></i>AWS Guide</a></li>
        <li><a href="https://github.com/AJprogramming123/OpsCenter" target="_blank"><i class="fab fa-github"></i> GitHub</a></li>
      </ul>
    </nav>
  </div>
</header>

  <!-- ===== MAIN CONTENT ===== -->
  <main>
    <div class="container">
      <section class="about">
        <h2>About InfraHub</h2>
        <p>
          InfraHub is a centralized knowledge hub for IT administrators and developers, providing guidance, best practices, 
          and example workflows for building and managing infrastructure. The platform consolidates lessons learned from 
          preconfigured OS installers, department-specific Ansible playbooks, containerized backend setups, S3 and EC2 
          workflows, and multi-CDN architectures into a single accessible resource. InfraHub empowers teams to explore secure, 
          reliable, and scalable deployments by learning from real-world examples, reducing trial-and-error, 
          and enabling reproducible setups.
        </p>
      </section>

      <hr class="divider">

      <section class="sections">
        <h2>Explore Our Tools</h2>

        <div class="cards">
          <div class="card">
            <h3>1. Preconfigured ISOs</h3>
            <p>
              Download preconfigured OS images that install automatically with SSH and Ansible
              enabled out of the box. Perfect for building consistent lab environments fast.
            </p>
            <a href="{{ url_for('pages.isos') }}" class="btn">View ISOs</a>
          </div>

          <div class="card">
            <h3>2. Ansible Playbooks</h3>
            <p>
              Access department-specific automation scripts for tasks like network setup,
              system hardening, and server provisioning.
            </p>
            <a href="{{ url_for('pages.playbooks') }}" class="btn">View Playbooks</a>
          </div>

          <div class="card">
            <h3>3. Docker Sandbox</h3>
            <p>
              Experiment with containerized environments built for hands-on
              learning. The Docker sandbox includes preconfigured containers, 
              Compose templates, and isolated environments for testing backend 
              services, networking, and infrastructure automation safely.
            </p>
            <a href="{{ url_for('pages.docker') }}" class="btn">View Docker Sandbox</a>
          </div>

        </div>
      </section>
    </div>
  </main>

  <!-- ===== FOOTER ===== -->
    <footer>
        <p>© 2025 InfraHub — Designed for Learning and Deployment</p>
    </footer>
</body>
</html>
