update the cards on the homepage (#2868)

[ ] Check if this is a typo or other quick fix and ignore the rest :)

## Type of change
<!-- Please be sure to add the appropriate label to your PR. -->

### What should this PR do?
<!-- Does this PR resolve an issue? Please include a reference to it.
-->

### Why are we making this change?
<!-- What larger problem does this PR address? -->

### What are the acceptance criteria? 
<!-- What should be happening for this PR to be accepted? Please list
criteria. -->
<!-- Do any stakeholders need to be tagged in this review? If so, please
add them. -->

### How should this PR be tested?
<!-- What should your reviewer do to test this PR? Please list steps.
-->

Signed-off-by: ltagliaferri <[email protected]>

Author: ltagliaferri

assets/scss/components/_academy-rebrand.scss

@@ -367,6 +367,11 @@
   border: none !important;
 }
 
+.card-gradient-purple {
+  background: #6226FB !important;
+  border: none !important;
+}
+
 // Dark mode - keep same flat colors
 :root[data-dark-mode] {
   .card-gradient-magenta {
@@ -380,6 +385,10 @@
   .card-gradient-green {
     background: #04BD13 !important;
   }
+
+  .card-gradient-purple {
+    background: #6226FB !important;
+  }
 }
 
 // Enhanced Basics Cards

layouts/index.html

@@ -32,6 +32,17 @@ <h1 class="hero-title">
         <!-- <h4 class="section-title">Featured</h4> -->
         <div class="top-card-container">
           <div class="card-container">
+            <div>
+              <a href="/chainguard/chainguard-images/overview/" class="a--original">
+                <div class="card-background image-card card-gradient-purple">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 80 80" fill="none">
+                    <path d="M0 0V80H80V0H0ZM53.3333 53.3333H26.6667V26.6667H53.3333V53.3333Z" fill="#FFFFFF"/>
+                  </svg>
+                </div>
+                <h5 class="caption-title">Chainguard Containers</h5>
+                <p class="caption">Distroless container images with minimal attack surface and zero CVEs</p>
+              </a>
+            </div>
             <div>
               <a href="/chainguard/libraries/overview/" class="a--original">
                 <div class="card-background image-card card-gradient-magenta">
@@ -47,17 +58,6 @@ <h5 class="caption-title">Chainguard Libraries</h5>
                 <p class="caption">Hardened language packages built for enterprise security requirements</p>
               </a>
             </div>
-            <div>
-              <a href="/chainguard/vms/" class="a--original">
-                <div class="card-background image-card card-gradient-cyan">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 96 96" fill="none">
-                    <path d="M76.8 38.4V19.2H57.6V0H38.4V19.2H19.2V38.4H0V57.6H19.2V76.8H38.4V96H57.6V76.8H76.8V57.6H96V38.4H76.8ZM38.4 57.6V38.4H57.6V57.6H38.4Z" fill="#FFFFFF"/>
-                  </svg>
-                </div>
-                <h5 class="caption-title">Chainguard VMs</h5>
-                <p class="caption">Secure virtual machine images with built-in security controls and compliance</p>
-              </a>
-            </div>
             <div>
               <a href="https://courses.chainguard.dev/?utm_source=skilljar&utm_medium=referral&utm_campaign=FY25-DevRel-Skilljar" class="a--original" target="_blank">
                 <div class="card-background image-card card-gradient-green">