Ecosystem icons component

app/styles/app.css

@@ -1,4 +1,5 @@
 @import "components/brand-logos.css";
+@import "components/ecosystem-icons.css";
 @import "components/faqs.css";
 @import "components/homepage-image-grid.css";
 @import "components/release-timeline.css";

app/styles/components/ecosystem-icons.css

@@ -0,0 +1,38 @@
+.ecosystem-icons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 30px;
+  width: 190px;
+  margin: auto;
+}
+
+@media (max-width: 1007px) {
+  .ecosystem-icons {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    width: inherit;
+  }
+
+  .ecosystem-icon {
+    margin: auto;
+  }
+}
+
+.ecosystem-icon {
+  position: relative;
+  width: 130px;
+  height: 130px;
+}
+
+.ecosystem-icon .logo {
+  bottom: 20px;
+  right: 10px;
+  position: absolute;
+}
+.ecosystem-icon .logo.rotate {
+  transform: rotate(-9deg);
+}
+
+.ecosystem-icon .background {
+  position: absolute;
+  left: 0;
+}

app/templates/components/ecosystem-icon.hbs

@@ -0,0 +1,4 @@
+<div class="ecosystem-icon">
+  <svg class="background" xmlns="http://www.w3.org/2000/svg" width="133" height="130"><defs/><path fill={{@bg}} fill-rule="nonzero" d="M.91 27.535l15.047 93.176c.878 5.44 5.993 9.145 11.436 8.283l96.19-15.233c5.45-.863 9.172-5.98 8.314-11.43L117.264 9.301c-.857-5.451-5.969-9.178-11.42-8.326L9.238 16.06a10 10 0 00-8.33 11.475z"/></svg>
+  <img class="logo {{if @rotate "rotate"}}" src="/images/home/logos/{{@icon}}.svg" alt={{@icon}}>
+</div>

app/templates/components/ecosystem-icons.hbs

@@ -0,0 +1,8 @@
+<div class="ecosystem-icons">
+  <EcosystemIcon @icon="babel" @bg="#323330"/>
+  <EcosystemIcon @icon="js" @bg="#FAE125" @rotate={{true}} />
+  <EcosystemIcon @icon="prettier" @bg="#FFFFFF" />
+  <EcosystemIcon @icon="code" @bg="#272827" @rotate={{true}} />
+  <EcosystemIcon @icon="ts" @bg="#0075C7" @rotate={{true}} />
+  <EcosystemIcon @icon="npm" @bg="#c12127" @rotate={{true}}/>
+</div>

app/templates/index.hbs

@@ -104,7 +104,7 @@
 <section aria-labelledby="section-ecosystem" class="bg-dark bg-shape-swipe-bottom">
   <div class="container layout">
     <div class="lg:col-3 lg:start-4 text-center">
-      <img src="/images/ecosystem.svg" alt="ember ecosystem">
+      <EcosystemIcons />
     </div>
 
     <div class="lg:col-3">