feat: hero header wip

components/IndexHero.vue

@@ -0,0 +1,48 @@
+<template>
+  <!-- Hero card -->
+  <div class="relative">
+    <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+      <div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
+        <div class="absolute inset-0">
+          <img class="h-full w-full object-cover" src="/hero.jpg" alt="" />
+        </div>
+        <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+          <h1
+            class="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"
+          >
+            <span class="block text-white">Faetale</span>
+            <span class="block text-indigo-600">Once Upon a Time...</span>
+          </h1>
+          <p
+            class="mt-6 max-w-lg mx-auto text-center text-xl text-indigo-500 sm:max-w-3xl"
+          >
+            ...there was a queer tale of fantasy tabletop roleplaying games.
+            Join Gaiety on a journey through her favorite game systems,
+            adventures and who knows what else!
+          </p>
+          <div
+            class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center"
+          >
+            <div
+              class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
+            >
+              <a
+                href="#"
+                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50 sm:px-8"
+              >
+                Watch
+              </a>
+              <a
+                href="#"
+                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
+              >
+                Support
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

components/VideosList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white">
+  <div class="bg-gray-200">
     <div
       class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8"
     >

nuxt.config.js

@@ -39,6 +39,12 @@ export default {
     config: {
       plugins: [tailwindAspectRatio],
     },
+    // theme: {
+    //   colors: {
+    //     'brand-bright': '#ca4e8d',
+    //     'brand-dark': '#83398c',
+    //   },
+    // },
   },
 
   // Modules: https://go.nuxtjs.dev/config-modules

pages/index.vue

@@ -4,6 +4,7 @@
       <PageNav />
     </header>
     <main>
+      <IndexHero />
       <VideosList />
     </main>
   </div>