<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AWS Elastic Beanstalk - Node.js Sample Application</title>
  <style>
    :root {
      --aws-squid-ink: #232f3e;
      --aws-anchor-blue: #1E88E5; /* AWS Blue */
      --aws-accent-color: #68A063;
      --aws-light-gray: #f2f3f3;
      --aws-dark-gray: #545b64;
      --aws-border-gray: #d5dbdb;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
      color: #16191f;
      line-height: 1.6;
      background-color: #ffffff;
    }

    .header {
      background-color: var(--aws-squid-ink);
      color: white;
      padding: 1rem 0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    .header-content {
      display: flex;
      align-items: center;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      text-decoration: none;
      display: flex;
      align-items: center;
    }

    .logo i {
      color: var(--aws-accent-color);
      margin-right: 10px;
    }

    .hero {
      background: linear-gradient(135deg, var(--aws-squid-ink) 0%, #68A063 100%); /* Node.js green gradient */
      color: white;
      padding: 4rem 0;
      text-align: center;
    }

    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      font-weight: 400;
    }

    .hero p {
      font-size: 1.2rem;
      max-width: 800px;
      margin: 0 auto 2rem;
    }

    .btn {
      display: inline-block;
      background-color: var(--aws-accent-color);
      color: white;
      padding: 0.75rem 1.5rem;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 500;
      transition: background-color 0.3s;
    }

    .btn:hover {
      background-color: #4E8749;
    }

    .section {
      padding: 4rem 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 3rem;
      color: var(--aws-squid-ink);
    }

    .section-title h2 {
      font-size: 2rem;
      font-weight: 400;
      margin-bottom: 1rem;
    }

    .section-title p {
      color: var(--aws-dark-gray);
      max-width: 700px;
      margin: 0 auto;
    }

    .benefits {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }

    .benefit-card {
      background-color: white;
      border-radius: 8px;
      padding: 2rem;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--aws-border-gray);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .benefit-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .benefit-icon {
      font-size: 2.5rem;
      color: var(--aws-accent-color);
      margin-bottom: 1.5rem;
    }

    .benefit-card h3 {
      font-size: 1.25rem;
      margin-bottom: 1rem;
      color: var(--aws-squid-ink);
    }

    .resources {
      background-color: var(--aws-light-gray);
    }

    .resource-list {
      list-style: none;
    }

    .resource-item {
      background-color: white;
      border-radius: 8px;
      margin-bottom: 1rem;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s;
    }

    .resource-item:hover {
      transform: translateX(5px);
    }

    .resource-link {
      display: flex;
      align-items: center;
      padding: 1.25rem;
      color: var(--aws-anchor-blue);
      text-decoration: none;
    }

    .resource-icon {
      margin-right: 1rem;
      color: var(--aws-accent-color);
      font-size: 1.25rem;
    }

    .footer {
      background-color: var(--aws-squid-ink);
      color: white;
      padding: 2rem 0;
      text-align: center;
    }

    .footer p {
      margin-bottom: 1rem;
    }

    .footer a {
      color: var(--aws-accent-color);
      text-decoration: none;
    }

    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2rem;
      }

      .hero p {
        font-size: 1rem;
      }

      .section {
        padding: 3rem 0;
      }
    }
  </style>
</head>
<body>
<header class="header">
  <div class="container">
    <div class="header-content">
      <a href="#" class="logo">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="1em" height="1em" fill="currentColor" style="color: var(--aws-accent-color); margin-right: 10px;">
          <path d="M0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4 4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336z"/>
        </svg>
        AWS Elastic Beanstalk
      </a>
    </div>
  </div>
</header>

<section class="hero">
  <div class="container">
    <h1>Welcome to Your Elastic Beanstalk Application</h1>
    <p>Congratulations! Your Node.js application is now running on your own dedicated environment in the AWS Cloud.</p>
    <a href="https://aws.amazon.com/elasticbeanstalk/" class="btn">Learn More</a>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="section-title">
      <h2>Benefits of AWS Elastic Beanstalk</h2>
      <p>Discover why thousands of developers rely on AWS Elastic Beanstalk to deploy and manage their applications.</p>
    </div>
    <div class="benefits">
      <div class="benefit-card">
        <div class="benefit-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
            <path d="M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/>
          </svg>
        </div>
        <h3>Easy to Get Started</h3>
        <p>Upload your code and Elastic Beanstalk automatically handles the deployment, from capacity provisioning, load balancing, auto-scaling to application health monitoring.</p>
      </div>
      <div class="benefit-card">
        <div class="benefit-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
            <path d="M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z"/>
          </svg>
        </div>
        <h3>Maximum Flexibility</h3>
        <p>With Elastic Beanstalk, you have the freedom to select the AWS resources, such as Amazon EC2 instance type including Spot instances, that are optimal for your application.</p>
      </div>
      <div class="benefit-card">
        <div class="benefit-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
            <path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"/>
          </svg>
        </div>
        <h3>Managed Platform</h3>
        <p>Elastic Beanstalk automatically manages platform updates, including security patches and minor updates, for both the runtime and the operating system.</p>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="section-title">
      <h2>Key Features</h2>
      <p>Elastic Beanstalk provides a comprehensive set of features to simplify your application deployment and management.</p>
    </div>
    <div class="benefits">
      <div class="benefit-card">
        <div class="benefit-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="1em" height="1em" fill="currentColor"><path d="M384 32l128 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L398.4 96c-5.2 25.8-22.9 47.1-46.4 57.3L352 448l160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0-192 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l160 0 0-294.7c-23.5-10.3-41.2-31.6-46.4-57.3L128 96c-17.7 0-32-14.3-32-32s14.3-32 32-32l128 0c14.6-19.4 37.8-32 64-32s49.4 12.6 64 32zm55.6 288l144.9 0L512 195.8 439.6 320zM512 416c-62.9 0-115.2-34-126-78.9c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C627.2 382 574.9 416 512 416zM126.8 195.8L54.4 320l144.9 0L126.8 195.8zM.9 337.1c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C242 382 189.7 416 126.8 416S11.7 382 .9 337.1z"/></svg>
        </div>
        <h3>Auto Scaling</h3>
        <p>Automatically adjusts capacity to maintain steady, predictable performance at the lowest possible cost. You can specify triggers to increase or decrease capacity.</p>
      </div>
      <div class="benefit-card">
        <div class="benefit-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
            <path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V448c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/>
          </svg>
        </div>
        <h3>Health Monitoring</h3>
        <p>Monitors application health and provides tools to identify and troubleshoot the root cause of application issues and errors.</p>
      </div>
      <div class="benefit-card">
        <div class="benefit-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor"><path d="M80 104a24 24 0 1 0 0-48 24 24 0 1 0 0 48zm80-24c0 32.8-19.7 61-48 73.3l0 87.8c18.8-10.9 40.7-17.1 64-17.1l96 0c35.3 0 64-28.7 64-64l0-6.7C307.7 141 288 112.8 288 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3l0 6.7c0 70.7-57.3 128-128 128l-96 0c-35.3 0-64 28.7-64 64l0 6.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3l0-6.7 0-198.7C19.7 141 0 112.8 0 80C0 35.8 35.8 0 80 0s80 35.8 80 80zm232 0a24 24 0 1 0 -48 0 24 24 0 1 0 48 0zM80 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
        </div>
        <h3>Deployment Options</h3>
        <p>Multiple deployment policies—all at once, rolling, rolling with an additional batch, immutable, and blue/green—offer choices for the speed and safety of deploying your applications while reducing the administrative burden.</p>
      </div>
    </div>
  </div>
</section>

<section class="section resources">
  <div class="container">
    <div class="section-title">
      <h2>Resources & Documentation</h2>
      <p>Explore these resources to learn more about AWS Elastic Beanstalk.</p>
    </div>
    <ul class="resource-list">
      <li class="resource-item">
        <a href="https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/Welcome.html" class="resource-link" target="_blank" rel="noopener noreferrer">
                        <span class="resource-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor">
                                <path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
                            </svg>
                        </span>
          <span>AWS Elastic Beanstalk Developer Guide</span>
        </a>
      </li>
      <li class="resource-item">
        <a href="https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/concepts.html" class="resource-link" target="_blank" rel="noopener noreferrer">
                        <span class="resource-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1em" height="1em" fill="currentColor">
                                <path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"/>
                            </svg>
                        </span>
          <span>Elastic Beanstalk Concepts</span>
        </a>
      </li>
      <li class="resource-item">
        <a href="https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/create_deploy_nodejs.html" class="resource-link" target="_blank" rel="noopener noreferrer">
                        <span class="resource-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
                                <path d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"/>
                            </svg>
                        </span>
          <span>Node JS Platform</span>
        </a>
      </li>
      <li class="resource-item">
        <a href="https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/using-features.managing.html" class="resource-link" target="_blank" rel="noopener noreferrer">
                        <span class="resource-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
                                <path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm48 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM64 288c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm56 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/>
                            </svg>
                        </span>
          <span>Managing Environments</span>
        </a>
      </li>
      <li class="resource-item">
        <a href="https://nodejs.org/en/docs/" class="resource-link" target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer">
                        <span class="resource-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="1em" height="1em" fill="currentColor">
                                <path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/>
                            </svg>
                        </span>
          <span>Node.js Documentation</span>
        </a>
      </li>
    </ul>
  </div>
</section>

<footer class="footer">
  <div class="container">
  </div>
</footer>
</body>
</html>
