almalinux.org/layouts/certification/hardware-certification/list.html

{{ define "main" }}
<style>
  img {
    max-width: 100%;
  }
  #hc-hero {
    background: #0e3b5c;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  #hc-hero h1 {
    font-weight: 800;
    font-size: 2.3rem;
  }
  #hc-hero h2 {
    font-size: 1.7rem;
  }
  #hc-hero img {
    border-radius: 1rem;
  }
  #hc-hero .row {
    align-items: center;
  }
  .btn-row {
    text-align: center;
  }
  .btn-row div {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  .btn-box {
    width: 100%;
    background: white;
    display: block;
    padding: 0.5rem;
    color: black;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
  }
  .btn-box:hover {
    text-decoration: none;
    color: black;
  }
  .btn-box i {
    display: block;
    margin-bottom: 0.2rem;
  }
  .blue {
    background: #24c2ff;
  }
  .green {
    background: #86da2f;
  }
  .yellow {
    background: #ffcb12;
  }
  .red {
    background: #ff4649;
  }

  #hc-get {
    margin-bottom: 2rem;
    text-align: left;
  }
#hc-get h2 {
  text-align: center;
  border-bottom: 2px solid #13517e;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}
#hc-get h3 {
  margin: 0;
}
.mixed-text  {
  line-height:48px;
  font-size:32px;
}
.mixed-text img {
  display: inline;
}

/*RESPONSIVE QUERIES */
  @media(max-width: 991px){
    .m-hide {
      display: none;
    }
  }
/*END RESPONSIVE QUERIES */
</style>
<!-- HERO -->
<section id="hc-hero">
  <div class="container px-0 al-py-lg">  
    <div class="row">
      <div class="col-lg-6">
        <h1 class="display-5 fw-bold">{{ i18n "Hardware Certification" }}</h1>
		<p class="display-4"><i class="bi bi-building-fill-check"></i> {{ i18n "Part of the AlmaLinux Certification Program" }}</p>
        <p class="lead mb-5 mb-md-3">{{ i18n "The AlmaLinux Hardware Certification Program ensures hardware compatibility and promotes OS adoption through community-first, flexible certification types. The process is built just like AlmaLinux: with focus on long-term reliability and performance." }}</p>
        <div class="row btn-row">
          <div class="d-grid d-md-flex justify-content-md-start">
            <a class="btn al-cta-blue" href="/certification/ecosystem-catalog/"><i class="bi bi-check-all"></i> {{ i18n "Certified Hardware" }}</a>
          </div>
          <div class="d-grid d-md-flex justify-content-md-start">
            <a class="btn al-cta-green" href="/certification/hardware-certification/hardware-certification-program/"><i class="bi bi-journal-medical"></i> {{ i18n "Get started" }}</a>
          </div>
          <div class="d-grid d-md-flex justify-content-md-start">
            <a class="btn al-cta-yellow" href="https://wiki.almalinux.org/sigs/Certification.html"><i class="bi bi-people-fill"></i> {{ i18n "Get involved" }}</a>
          </div>
        </div>
      </div>
      <div class="col-lg-6 imgswitch">
        <img src="/images/certificationimages/hardware_certification_hero.png">
      </div>
    </div>
  </div>
</section>
<!-- start page content -->
<section id="hc-get">
  <div class="container px-4 al-py-lg">  
    <h2>{{ i18n "Compatibility you can trust for performance, reliability, and stability" }}</h2>
    <div class="row px-4 pb-4">
      <div class="col-lg-6">
		<h3 class="pb-3">{{ i18n "For consumers" }}</h3>
        <p>{{ i18n "Ensuring that hardware is fully compatible with chosen operating systems is critical for all users. Whether running a home server, a desktop, or an HPC cluster, compatibility issues can lead to system instability or performance degradation. The AlmaLinux certification program ensures you know what hardware you can rely on for your AlmaLinux environment." }}</p>
		<h4 class="pb-3">{{ i18n "Confirm Compatibility" }}</h4>
		 <p>{{ i18n "The full list of certified hardware is available for you to see in the" }} <a href="/certification/ecosystem-catalog/">{{ i18n "Ecosystem Catalog" }}</a>. {{ i18n "If your hardware isn't listed yet, join the Certification SIG chat room to ask about it, or submit a request! You can also find our entire our open source certification suite" }} <i class="bi bi-github p"></i><a href="https://github.com/AlmaLinux/Hardware-Certification-Suite">{{ i18n "on GitHub" }}</a></p>
        <div class="btn-row">
          <i class="bi bi-send p"></i> <a class="btn btn-primary btn-block p-2" href="https://github.com/AlmaLinux/certifications">{{ i18n "Request Certification" }}</a>
      	</div>
	  </div> <!-- end column 1 -->
      <div class="col-lg-6">
         <img src="/images/certificationimages/certification_consumers.jpg">
      </div>
	</div><!-- end consumer row -->
    <div class="row px-4">
      <div class="col-lg-6">
         <img src="/images/certificationimages/certification_providers.jpg">
      </div>
      <div class="col-lg-6">
		<h3 class="pb-3">{{ i18n "For hardware providers" }}</h3>
        <p>{{ i18n "Proving hardware reliability is incredibly important for producers of some of the most powerful hardware in the world. The AlmaLinux Certification SIG has partnered with some of the biggest hardware providers in the world for the painless process of getting certified." }}</p>
		<h4 class="pb-3">{{ i18n "Test your hardware" }}</h4>
		 <p>{{ i18n "Start the processes to get hardware certified by clicking below, or take a look at our open source certification suite" }} <i class="bi bi-github p"></i> <a href="https://github.com/AlmaLinux/Hardware-Certification-Suite">{{ i18n "on GitHub" }}</a></p>
        <div class="btn-row pt-3">
          <a class="btn btn-primary btn-block p-2" href="/certification/hardware-certification/hardware-certification-program/">{{ i18n "Get Certified" }}</a>
	  	</div>
      </div>
      </div><!-- end provider row -->
	</div>
</section>
{{ end }}