Add new effect grid & effect container

components/Effect.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+
+  &:hover {
+    background-color: hsla(237, 37%, 24%, 0.5);
+    cursor: pointer;
+  }
+}
+</style>

components/Effects.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="grid">
+    <Effect v-for="effect in Object.values(this.effects)" :key="effect.name">
+      <component :is="effect.name"/>
+    </Effect>
+  </div>
+</template>
+
+<script>
+import Effect from "~/components/Effect";
+import { components } from "~/assets/effects.js";
+
+export default {
+  components: { Effect, ...components },
+  props: {
+    effects: Object
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: 8em;
+  grid-gap: 1em;
+  padding: 0 1em 5em 1em;
+  margin: 0 auto;
+}
+
+// Responsive styles
+
+@media (min-width: "640px") {
+  .grid {
+    max-width: 640px;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1.5em;
+    padding: 0 1em 5em 1em;
+  }
+}
+
+@media (min-width: "768px") {
+  .grid {
+    max-width: 768px;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 2em;
+    padding: 0 2em 5em 2em;
+  }
+}
+
+@media (min-width: "1024px") {
+  .grid {
+    max-width: 1024px;
+    grid-template-columns: repeat(5, 1fr);
+    padding: 0 2.5em 5em 2.5em;
+  }
+}
+
+@media (min-width: "1280px") {
+  .grid {
+    max-width: 1280px;
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+</style>

pages/index.vue

@@ -4,16 +4,22 @@
     <Navbar/>
     <Header/>
     <CarbonAd/>
+    <Effects :effects="effects"/>
   </div>
 </template>
 
 <script>
 import Navbar from "~/components/Navbar";
 import Header from "~/components/Header";
 import CarbonAd from "~/components/CarbonAd";
+import Effects from "~/components/Effects";
+import { effects } from "~/assets/effects.js";
 
 export default {
-  components: { Navbar, Header, CarbonAd }
+  components: { Navbar, Header, CarbonAd, Effects },
+  data() {
+    return { effects };
+  }
 };
 </script>