Add Frequently Asked section

src/App.vue

@@ -60,6 +60,12 @@
           </div>
         </div>
       </div>
+
+      <div class="max-w-6xl mx-auto pt-12 pb-24">
+        <div class="grid gap-6 md:grid-cols-2">
+          <frequently-asked/>
+        </div>
+      </div>
     </main>
 
     <aside class="py-24 px-4 bg-gray-50">
@@ -85,6 +91,7 @@
 </template>
 
 <script>
+import FrequentlyAsked from '@/components/frequently-asked'
 import Navbar from '@/components/navbar'
 import OurSponsors from '@/components/our-sponsors'
 import RecentTalks from '@/components/recent-talks'
@@ -93,6 +100,7 @@ export default {
   name: 'App',
 
   components: {
+    FrequentlyAsked,
     Navbar,
     OurSponsors,
     RecentTalks

src/assets/css/tailwind.css

@@ -12,4 +12,8 @@
     @apply transition-colors ease-in-out duration-300;
     @apply hover:bg-blue-550
   }
+
+  .link {
+    @apply text-blue-500 hover:text-blue-600
+  }
 }

src/components/frequently-asked.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="space-y-2">
+    <h2 class="pb-2 text-lg font-bold border-b-2">Frequently Asked</h2>
+
+    <ul class="space-y-1">
+      <li><a class="link text-lg font-bold" href="#0">Who can speak?</a></li>
+      <li><a class="link text-lg font-bold" href="#0">Is Bristol JS free to attend?</a></li>
+    </ul>
+  </div>
+</template>