<div align="center" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); padding: 40px; border-radius: 20px; max-width: 900px; margin: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);">
  <img src="https://github.com/eli64s/readme-ai/blob/main/assets/logo.png?raw=true" alt="readme-ai logo" style="max-width: 180px; border-radius: 15px; margin-bottom: 30px; transition: transform 0.3s ease-in-out;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">

  <h1 style="color: #E6E6E6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 2.5em; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
    README-AI: Effortless Documentation Generation
  </h1>

  <p style="color: #B0B0B0; font-size: 1.2em; max-width: 80%; margin: 20px auto; line-height: 1.6;">
    Revolutionize your project documentation with AI-powered automation that understands your code and generates comprehensive READMEs in seconds.
  </p>

  <div style="margin: 30px 0;">
    <a href="https://github.com/eli64s/readme-ai/actions" style="text-decoration: none;">
      <img src="https://img.shields.io/github/actions/workflow/status/eli64s/readme-ai/release-pipeline.yml?logo=githubactions&label=CICD&logoColor=white&color=4169E1" alt="github-actions" style="margin: 5px; border-radius: 5px; transition: transform 0.2s ease-in-out;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'">
    </a>
    <a href="https://app.codecov.io/gh/eli64s/readme-ai" style="text-decoration: none;">
      <img src="https://img.shields.io/codecov/c/github/eli64s/readme-ai?logo=codecov&logoColor=white&label=Coverage&color=5D4ED3" alt="codecov" style="margin: 5px; border-radius: 5px; transition: transform 0.2s ease-in-out;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'">
    </a>
  </div>

  <div style="margin-top: 30px; display: flex; justify-content: center; gap: 20px;">
    <a href="https://github.com/eli64s/readme-ai" style="text-decoration: none;">
      <button style="background-color: #5D4ED3; color: #FFFFFF; padding: 12px 24px; border: none; border-radius: 8px; font-size: 1.1em; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" style="margin-right: 8px;">
          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
        </svg>
        View on GitHub
      </button>
    </a>
    <a href="https://eli64s.github.io/readme-ai" style="text-decoration: none;">
      <button style="background-color: #4169E1; color: #FFFFFF; padding: 12px 24px; border: none; border-radius: 8px; font-size: 1.1em; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" style="margin-right: 8px;">
          <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 16l-6-6 2.71-2.71 3.29 3.3 7.29-7.3 2.71 2.71-10 10z"/>
        </svg>
        Read Documentation
      </button>
    </a>
  </div>
</div>

<style>
  button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  }
  @media (max-width: 600px) {
    div[align="center"] {
      padding: 20px;
    }
    h1 {
      font-size: 2em;
    }
    p {
      font-size: 1em;
    }
    button {
      padding: 10px 20px;
      font-size: 1em;
    }
  }
</style>
