Merge pull request #66 from buildkite/fix-product-icons

app/frontend/css/pages/homepage/_products.scss

@@ -58,3 +58,26 @@
     height: 50px;
   }
 }
+
+.ProductBadge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 12px;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),
+    0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 1px 0px 0px rgba(0, 0, 0, 0.09),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 3px 3px 0px rgba(0, 0, 0, 0.02),
+    0px 4px 4px 0px rgba(0, 0, 0, 0.01);
+  padding-right: 12px;
+  background: #fff;
+  font-size: 15px;
+  color: #28243f;
+  font-weight: 600;
+  margin-bottom: 16px;
+  svg {
+    width: 24px;
+    height: 24px;
+    padding: 8px;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    margin-right: 12px;
+  }
+}

app/frontend/css/utilities/_dark_mode.scss

@@ -344,4 +344,13 @@ html.dark {
       background-color: #eee;
     }
   }
+
+  .ProductBadge {
+    background: #1e293b;
+    color: #fff;
+    svg {
+      border-right: 1px solid rgba(255, 255, 255, 0.2);
+      margin-right: 8px;
+    }
+  }
 }

app/views/homepage/_products.html.erb

@@ -4,22 +4,36 @@
       <a href="/docs/pipelines" class="Products__link">
         <article class="ProductCard">
           <div>
-            <img alt="Pipelines graphic" class="ProductCard__img" src="<%= image_path('home/pipelines.png') %>" />
+            <div class='ProductBadge'>
+              <svg style='color: #00b368' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="2" cy="2" r="2" transform="matrix(-4.37114e-08 1 1 4.37114e-08 3 3)" stroke="currentColor" stroke-width="1.5"/>
+                <circle cx="2" cy="2" r="2" transform="matrix(-4.37114e-08 1 1 4.37114e-08 17 17)" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M16.5 19L9 19C7.067 19 5.5 17.433 5.5 15.5V15.5C5.5 13.567 7.067 12 9 12L13.5 12" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M7.5 5L15 5C16.933 5 18.5 6.567 18.5 8.5V8.5C18.5 10.433 16.933 12 15 12L13.5 12" stroke="currentColor" stroke-width="1.5"/>
+              </svg>
+              Pipelines
+            </div>
             <p class="ProductCard__summary">Powerful CI/CD built to scale on your choice of infrastructure</p>
           </div>
         </article>
       <a href="/docs/test-engine" class="Products__link">
         <article class="ProductCard">
           <div>
-            <img alt="Test Engine graphic" class="ProductCard__img" src="<%= image_path('home/test_engine.png') %>" />
+            <div class='ProductBadge'>
+              <svg style='color:#9f83fe;' fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m19 10.5v-5.5c0-1.65685-1.3431-3-3-3h-11c-1.65685 0-3 1.34315-3 3v12c0 1.6569 1.34315 3 3 3h4.5"/><path d="m22.2033 16.5302c.0839.0465.1539.1146.2026.1973s.0744.1769.0744.2728c0 .096-.0257.1902-.0744.2729s-.1187.1508-.2026.1973l-8.0318 4.4624c-.0818.0455-.1741.0687-.2677.0675-.0936-.0011-.1853-.0268-.266-.0743-.0806-.0475-.1475-.1152-.1939-.1965-.0465-.0812-.0709-.1732-.0709-.2668v-8.9249c0-.41.4401-.668.7985-.4687z"/><path d="m6.75 7.25h7.5"/><path d="m6.75 11.25h2.5"/><path d="m6.75 15.25h2.5"/></g></svg>
+              Test Engine
+            </div>
             <p class="ProductCard__summary">Real-time, scalable tracking and monitoring for your tests</p>
           </div>
         </article>
       </a>
       <a href="/docs/package-registries" class="Products__link">
         <article class="ProductCard">
           <div>
-            <img alt="Packages graphic" class="ProductCard__img" src="<%= image_path('home/package_registries.png') %>" />
+            <div class='ProductBadge'>
+              <svg style='color: #ffc976;' height='24' width='24' fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g clip-path="url(#a)"><mask id="b" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path d="M24 0H0v24h24V0Z" fill="#fff"/></mask><g mask="url(#b)" stroke="currentColor" stroke-width="1.5"><path d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v3m-18-3 9 5.25M3 7.5v9l9 5.25m0-9v9m0 0 1.6875-.9844" stroke-linecap="round" stroke-linejoin="round"/><path d="m8 5 8.5 5.5"/></g><path d="m15.5 16.5 2 2L22 14" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
+              Package Registries
+            </div>
             <p class="ProductCard__summary">Scale out asset management across any ecosystem</p>
           </div>
         </article>