From 88fd52fdadee350df5fd19cfcdb926427fd7f1e4 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 8 Sep 2020 21:49:13 +0100
Subject: [PATCH] Add sponsors

---
 src/App.vue                             |  6 ++++
 src/components/our-sponsors/index.vue   | 38 +++++++++++++++++++++++++
 src/components/our-sponsors/sponsor.vue | 26 +++++++++++++++++
 src/data/sponsors.json                  | 28 ++++++++++++++++++
 src/services/sponsor-service.js         |  5 ++++
 tailwind.config.js                      |  3 ++
 6 files changed, 106 insertions(+)
 create mode 100644 src/components/our-sponsors/index.vue
 create mode 100644 src/components/our-sponsors/sponsor.vue
 create mode 100644 src/data/sponsors.json
 create mode 100644 src/services/sponsor-service.js

diff --git a/src/App.vue b/src/App.vue
index 4f64835..80affef 100644
--- a/src/App.vue
+++ b/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
   },
 
diff --git a/src/components/our-sponsors/index.vue b/src/components/our-sponsors/index.vue
new file mode 100644
index 0000000..1a01415
--- /dev/null
+++ b/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>
diff --git a/src/components/our-sponsors/sponsor.vue b/src/components/our-sponsors/sponsor.vue
new file mode 100644
index 0000000..7a2f0b5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/data/sponsors.json b/src/data/sponsors.json
new file mode 100644
index 0000000..fee24ac
--- /dev/null
+++ b/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"
+    }
+  ]
+}
diff --git a/src/services/sponsor-service.js b/src/services/sponsor-service.js
new file mode 100644
index 0000000..e33b43c
--- /dev/null
+++ b/src/services/sponsor-service.js
@@ -0,0 +1,5 @@
+import sponsors from '@/data/sponsors.json'
+
+export function getSponsors() {
+  return sponsors.sponsors
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 50af5fa..4879a7c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,9 @@ module.exports = {
   theme: {
     colors: {
       black: '#222',
+      gray: {
+        50: '#f7f7f7'
+      },
       blue: {
         500: '#337ab7',
         550: '#286090',