feat: improving design

components/IndexHero.vue

@@ -1,9 +1,10 @@
 <template>
   <!-- Hero card -->
-  <div class="relative md:mt-4">
-    <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
+  <div class="relative bg-pink-100 md:pt-4">
+    <div>
+      <div class="absolute inset-x-0 bottom-0 h-1/2 bg-pink-200" />
       <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="relative shadow-2xl sm:rounded-2xl sm:overflow-hidden">
           <div class="absolute inset-0">
             <img class="h-full w-full object-cover" src="/hero.jpg" alt="" />
           </div>
@@ -16,7 +17,7 @@
               />
             </h1>
             <p
-            class="mt-6 p-4 rounded-md max-w-lg mx-auto text-xl bg-pink-800 bg-opacity-40 text-pink-100 sm:max-w-3xl"
+              class="mt-6 p-4 rounded-md max-w-lg mx-auto text-xl bg-brandlight bg-opacity-50 text-pink-100 sm:max-w-3xl"
             >
               ...there was a queer tale of fantasy tabletop roleplaying games.
               Join Gaiety on a journey through her favorite game systems,
@@ -36,7 +37,7 @@
                 </a>
                 <a
                   href="https://ko-fi.com/gaiety"
-                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-pink-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
+                  class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-branddark bg-opacity-70 hover:bg-opacity-90 sm:px-8"
                 >
                   Support
                 </a>
@@ -46,4 +47,5 @@
         </div>
       </div>
     </div>
+  </div>
 </template>

components/VideoPreview.vue

@@ -9,7 +9,7 @@
         class="w-full h-full object-center object-cover group-hover:opacity-75"
       />
     </div>
-    <time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-700">
+    <time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-500">
       {{ publishedHuman }}
     </time>
     <h3 class="mt-1 text-lg font-medium text-gray-900">

nuxt.config.js

@@ -141,14 +141,14 @@ export default {
   tailwindcss: {
     config: {
       plugins: [tailwindAspectRatio],
-    },
       theme: {
         extend: {
           colors: {
-          brandbright: '#ca4e8d',
+            brandlight: '#ca4e8d',
             branddark: '#83398c',
           },
         },
       },
     },
+  },
 }