feat: improving hero

components/IndexHero.vue

@@ -7,12 +7,13 @@
         <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">
+        <div class="relative p-8">
-          <h1
+          <h1>
-            class="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"
+            <img
-          >
+              class="w-full max-w-xs m-auto"
-            <span class="block text-white">Faetale</span>
+              src="/logo-square.webp"
-            <span class="block text-indigo-600">Once Upon a Time...</span>
+              alt="Faetale: Once Upon a Time"
+            />
           </h1>
           <p
             class="mt-6 max-w-lg mx-auto text-center text-xl text-indigo-500 sm:max-w-3xl"
@@ -28,13 +29,13 @@
               class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
             >
               <a
-                href="#"
+                href="#videolist"
                 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="#"
+                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-indigo-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
               >
                 Support

components/PageNav.vue

@@ -1,3 +1,3 @@
 <template>
-  <nav>NAV</nav>
+  <nav><!-- TODO --></nav>
 </template>

components/VideosList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-200">
+  <div id="videolist" 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"
     >