Add sponsors

src/components/our-sponsors/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <section>
+    <h2 class="text-2xl font-bold uppercase text-center">Our sponsors</h2>
+
+    <div class="mt-10">
+      <div class="max-w-6xl mx-auto px-4">
+        <div class="grid grid-cols-3 gap-16">
+          <div v-for="(sponsor, i) in sponsors" :key="i">
+            <sponsor :sponsor="sponsor"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import Sponsor from '@/components/our-sponsors/sponsor'
+import { getSponsors } from '@/services/sponsor-service'
+
+export default {
+  name: 'OurSponsors',
+
+  components: {
+    Sponsor
+  },
+
+  data() {
+    return {
+      sponsors: []
+    }
+  },
+
+  created() {
+    this.sponsors = getSponsors()
+  }
+}
+</script>

src/components/our-sponsors/sponsor.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <a href="#">
+      <img
+        :src="sponsor.logo"
+        :alt="`${sponsor.name} logo`"
+        style="max-height: 100px; max-width: 80%"
+      />
+
+      <span v-text="sponsor.name" class="sr-only"/>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sponsor',
+
+  props: {
+    sponsor: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>