Add sponsors

src/App.vue

@@ -13,6 +13,10 @@
       <recent-talks/>
     </main>
 
+    <aside class="py-24 px-4 bg-gray-50">
+      <our-sponsors/>
+    </aside>
+
     <footer class="py-20 bg-black">
       <div class="max-w-6xl mx-auto">
         <div class="grid grid-cols-3">
@@ -33,6 +37,7 @@
 
 <script>
 import Navbar from '@/components/navbar'
+import OurSponsors from '@/components/our-sponsors'
 import RecentTalks from '@/components/recent-talks'
 
 export default {
@@ -40,6 +45,7 @@ export default {
 
   components: {
     Navbar,
+    OurSponsors,
     RecentTalks
   },
 

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>

src/data/sponsors.json

@@ -0,0 +1,28 @@
+{
+  "sponsors": [
+    {
+      "name": "Novate IT",
+      "logo": "http://bristoljs.org/assets/img/sponsors/novate.png"
+    },
+    {
+      "name": "POTATO",
+      "logo": "http://bristoljs.org/assets/img/sponsors/potato.png"
+    },
+    {
+      "name": "Pusher",
+      "logo": "http://bristoljs.org/assets/img/sponsors/pusher.png"
+    },
+    {
+      "name": "Just Eat",
+      "logo": "http://bristoljs.org/assets/img/sponsors/just-eat.png"
+    },
+    {
+      "name": "basekit",
+      "logo": "http://bristoljs.org/assets/img/sponsors/basekit.png"
+    },
+    {
+      "name": "cxpartners",
+      "logo": "http://bristoljs.org/assets/img/sponsors/cx-partners.png"
+    }
+  ]
+}

src/services/sponsor-service.js

@@ -0,0 +1,5 @@
+import sponsors from '@/data/sponsors.json'
+
+export function getSponsors() {
+  return sponsors.sponsors
+}

tailwind.config.js

@@ -3,6 +3,9 @@ module.exports = {
   theme: {
     colors: {
       black: '#222',
+      gray: {
+        50: '#f7f7f7'
+      },
       blue: {
         500: '#337ab7',
         550: '#286090',