Updated hero on index.html.

assets/css/style.css

@@ -2278,6 +2278,10 @@ video {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .absolute {
   position: absolute;
 }
@@ -2342,6 +2346,10 @@ video {
   grid-column: span 3 / span 3;
 }
 
+.col-span-6 {
+  grid-column: span 6 / span 6;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -2372,6 +2380,11 @@ video {
   margin-bottom: -0.5rem;
 }
 
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -2448,6 +2461,22 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -2521,6 +2550,14 @@ video {
   height: 1rem;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
 .max-h-12 {
   max-height: 3rem;
 }
@@ -2609,6 +2646,10 @@ video {
   max-width: none;
 }
 
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -2689,6 +2730,10 @@ video {
   flex-wrap: wrap;
 }
 
+.place-items-center {
+  place-items: center;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -2717,6 +2762,10 @@ video {
   gap: 1rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -2747,6 +2796,23 @@ video {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2865,6 +2931,21 @@ video {
   background-color: rgb(129 140 248 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2885,6 +2966,12 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-indigo-900 {
+  --tw-gradient-from: #312e81;
+  --tw-gradient-to: rgb(49 46 129 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .via-indigo-500 {
   --tw-gradient-to: rgb(99 102 241 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #6366f1, var(--tw-gradient-to);
@@ -2894,6 +2981,14 @@ video {
   --tw-gradient-to: #1e40af;
 }
 
+.to-blue-900 {
+  --tw-gradient-to: #1e3a8a;
+}
+
+.to-gray-900 {
+  --tw-gradient-to: #111827;
+}
+
 .bg-center {
   background-position: center;
 }
@@ -2958,14 +3053,9 @@ video {
   padding-bottom: 1rem;
 }
 
-.py-6 {
+.py-1\.5 {
-  padding-top: 1.5rem;
+  padding-top: 0.375rem;
-  padding-bottom: 1.5rem;
+  padding-bottom: 0.375rem;
-}
-
-.px-2\.5 {
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
 }
 
 .py-1 {
@@ -2973,11 +3063,21 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -3033,11 +3133,6 @@ video {
   padding-bottom: 3rem;
 }
 
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-
 .pt-8 {
   padding-top: 2rem;
 }
@@ -3086,6 +3181,26 @@ video {
   padding-top: 0.5rem;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
+.pr-5 {
+  padding-right: 1.25rem;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -3119,9 +3234,9 @@ video {
   line-height: 1;
 }
 
-.text-5xl {
+.text-4xl {
-  font-size: 3rem;
+  font-size: 2.25rem;
-  line-height: 1;
+  line-height: 2.5rem;
 }
 
 .text-base {
@@ -3134,16 +3249,16 @@ video {
   line-height: 1.75rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-black {
   font-weight: 900;
 }
@@ -3164,6 +3279,14 @@ video {
   font-weight: 600;
 }
 
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -3184,6 +3307,10 @@ video {
   line-height: 2.5;
 }
 
+.leading-none {
+  line-height: 1;
+}
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -3262,6 +3389,16 @@ video {
   color: rgb(24 24 27 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.text-gray-50 {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
@@ -3705,6 +3842,11 @@ EmojiSymbols;
   color: rgb(99 102 241 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .dark .dark\:focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
@@ -3739,6 +3881,10 @@ EmojiSymbols;
     grid-column: span 2 / span 2;
   }
 
+  .sm\:-m-6 {
+    margin: -1.5rem;
+  }
+
   .sm\:mx-auto {
     margin-left: auto;
     margin-right: auto;
@@ -3772,6 +3918,10 @@ EmojiSymbols;
     margin-left: 0.75rem;
   }
 
+  .sm\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -3780,15 +3930,31 @@ EmojiSymbols;
     display: flex;
   }
 
+  .sm\:hidden {
+    display: none;
+  }
+
   .sm\:h-2\/3 {
     height: 66.666667%;
   }
 
+  .sm\:h-96 {
+    height: 24rem;
+  }
+
   .sm\:w-fit {
     width: -moz-fit-content;
     width: fit-content;
   }
 
+  .sm\:w-80 {
+    width: 20rem;
+  }
+
+  .sm\:w-auto {
+    width: auto;
+  }
+
   .sm\:max-w-3xl {
     max-width: 48rem;
   }
@@ -3805,6 +3971,22 @@ EmojiSymbols;
     justify-content: center;
   }
 
+  .sm\:gap-12 {
+    gap: 3rem;
+  }
+
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:py-8 {
     padding-top: 2rem;
     padding-bottom: 2rem;
@@ -3843,11 +4025,6 @@ EmojiSymbols;
     text-align: center;
   }
 
-  .sm\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
   .sm\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
@@ -3953,6 +4130,10 @@ EmojiSymbols;
     flex-direction: row;
   }
 
+  .md\:place-items-center {
+    place-items: center;
+  }
+
   .md\:items-center {
     align-items: center;
   }
@@ -4183,6 +4364,10 @@ EmojiSymbols;
     border-bottom-left-radius: 0.5rem;
   }
 
+  .md\:p-0 {
+    padding: 0px;
+  }
+
   .md\:py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
@@ -4229,6 +4414,10 @@ EmojiSymbols;
     padding-bottom: 4rem;
   }
 
+  .md\:pt-32 {
+    padding-top: 8rem;
+  }
+
   .md\:text-left {
     text-align: left;
   }
@@ -4243,15 +4432,15 @@ EmojiSymbols;
     line-height: 1;
   }
 
-  .md\:text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-
   .md\:text-5xl {
     font-size: 3rem;
     line-height: 1;
   }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -4305,6 +4494,11 @@ EmojiSymbols;
     margin-right: auto;
   }
 
+  .lg\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
   .lg\:mt-0 {
     margin-top: 0px;
   }
@@ -4317,6 +4511,26 @@ EmojiSymbols;
     margin-bottom: 4rem;
   }
 
+  .lg\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .lg\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .lg\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .lg\:mb-24 {
+    margin-bottom: 6rem;
+  }
+
+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
+
   .lg\:grid {
     display: grid;
   }
@@ -4357,6 +4571,14 @@ EmojiSymbols;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
   .lg\:place-items-center {
     place-items: center;
   }
@@ -4381,6 +4603,10 @@ EmojiSymbols;
     gap: 6rem;
   }
 
+  .lg\:gap-4 {
+    gap: 1rem;
+  }
+
   .lg\:prose-xl {
     font-size: 1.25rem;
     line-height: 1.8;
@@ -4645,6 +4871,18 @@ EmojiSymbols;
     padding-bottom: 4rem;
   }
 
+  .lg\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .lg\:pt-32 {
+    padding-top: 8rem;
+  }
+
+  .lg\:pt-48 {
+    padding-top: 12rem;
+  }
+
   .lg\:text-left {
     text-align: left;
   }
@@ -4656,6 +4894,18 @@ EmojiSymbols;
 }
 
 @media (min-width: 1280px) {
+  .xl\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .xl\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .xl\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
   .xl\:block {
     display: block;
   }
@@ -4664,6 +4914,14 @@ EmojiSymbols;
     display: inline;
   }
 
+  .xl\:w-96 {
+    width: 24rem;
+  }
+
+  .xl\:pt-48 {
+    padding-top: 12rem;
+  }
+
   .xl\:text-9xl {
     font-size: 8rem;
     line-height: 1;
@@ -4678,4 +4936,25 @@ EmojiSymbols;
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
+
+  .xl\:text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+  }
+
+  .xl\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .xl\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:pt-48 {
+    padding-top: 12rem;
+  }
 }

layouts/index.html

@@ -1,61 +1,44 @@
 {{ define "main" }}
 <main>
-    <div class="py-8 bg-gradient-to-br from-indigo-800 via-indigo-500 to-blue-800 h-max">
+    <div class="bg-gray-200 dark:bg-gray-900">
-        <div class="max-w-full mx-auto lg:px-8">
+        <div class="max-w-screen-xl px-4 py-8 mx-auto">
-            <div class="lg:grid lg:grid-cols-2 lg:gap-12 lg:place-items-center">
+            <div class="grid items-center gap-8 mb-8 lg:gap-12 lg:grid-cols-12">
-                <div class="p-6 mx-auto text-center lg:max-w-xl lg:px-0 lg:text-left">
+                <div class="col-span-6 px-4 text-center sm:mb-6 lg:text-left lg:mb-0">
-                    <div class="block py-4 mx-auto max-w-ful">
+                    <h1
-                        <h1
+                        class="mb-2 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl xl:text-6xl dark:text-white">
-                            class="mt-2 text-6xl font-black tracking-tight text-white md:text-6xl xl:text-8xl drop-shadow-lg">
+                        TailBliss</h1>
-                            <span class="text-white xl:block">TailBliss</span>
+                    <h2 class="pb-2 text-3xl font-light text-gray-800 dark:text-gray-300 md:text-4xl">
-                        </h1>
+                        Super Fast, and Flexible
-                        <h2 class="py-1.5 text-4xl font-light text-gray-900 md:text-5xl">
+                    </h2>
-                            Super Fast, and Flexible
+                    <a href="https://github.com/nusserstudios/tailbliss"
-                        </h2>
+                       class="inline-flex py-4 mx-auto space-x-4 sm:text-center">
-                    </div>
+                        <span class="rounded bg-gray-50 px-2.5 py-1 text-sm font-bold text-gray-900">
-                    <div class="block max-w-xl pt-8 mx-auto text-center md:text-left">
+                            What's new
-                        <a href="https://github.com/nusserstudios/tailbliss"
+                        </span>
-                           class="inline-flex mx-auto space-x-4 sm:text-center">
+                        <span
-                            <span class="rounded bg-gray-50 px-2.5 py-1 text-sm font-bold text-indigo-800">
+                              class="inline-flex items-center space-x-1 text-sm font-medium text-gray-800 dark:text-white">
-                                What's new
+                            <span>Just shipped version 0.1.0</span>
-                            </span>
+                            <!-- Heroicon name: mini/chevron-right -->
-                            <span class="inline-flex items-center space-x-1 text-sm font-medium text-white">
+                            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                                <span>Just shipped version 0.1.0</span>
+                                 fill="currentColor" aria-hidden="true">
-                                <!-- Heroicon name: mini/chevron-right -->
-                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                                     fill="currentColor" aria-hidden="true">
-                                    <path fill-rule="evenodd"
-                                          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-                                          clip-rule="evenodd" />
-                                </svg>
-                            </span>
-                        </a>
-                        <p class="mx-auto mt-3 text-base text-gray-300 sm:mt-5 md:text-lg">
-                            A Hugo theme built with love, using TailwindCSS 3, Apline.JS, and Hugo
-                            Pipes. Images are optimized for use with Hugo Pipes and converted to
-                            WebP format. So load it up with high ressolution images in the /assets
-                            folder, and Hugo will optimize them for you.
-                        </p>
-                        <a href="/prose"
-                           class="text-white bg-gray-900 hover:font-bold hover:text-gray-900 hover:bg-slate-200 focus:ring-4 focus:outline-none focus:ring-slate-200/40 font-semibold rounded-lg text-xl px-5 py-2.5 text-center inline-flex items-center mt-6 group transition-colors">
-                            Get Started
-                            <svg class="w-5 h-5 ml-2 -mr-1 group-hover:ml-3" fill="currentColor" viewBox="0 0 20 20"
-                                 xmlns="http://www.w3.org/2000/svg">
                                 <path fill-rule="evenodd"
-                                      d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                                      d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-                                      clip-rule="evenodd"></path>
+                                      clip-rule="evenodd" />
                             </svg>
-                        </a>
+                        </span>
-                    </div>
+                    </a>
+                    <p
+                       class="max-w-xl mx-auto mb-6 font-normal text-gray-900 lg:mx-0 xl:mb-2 md:text-lg xl:text-xl dark:text-gray-50">
+                        A Hugo theme built with love, using TailwindCSS 3, Apline.JS, and Hugo
+                        Pipes. Images are optimized for use with Hugo Pipes for WebP format.</p>
                 </div>
-                <div class="relative pb-16 md:pb-0 lg:m-0 lg:px-0">
+                <div class="col-span-6">
-                    <div class="max-w-full p-6 mx-auto">
+                    <video autoplay loop muted poster="/images/home-rocket-indigo.webp"
-                        <!-- Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ -->
+                           class="w-full h-64 max-w-xl mx-auto sm:h-96">
-                        <video autoplay loop muted poster="/images/home-rocket-indigo.webp" class="rounded-lg sm:mb-16">
+                        <source src="https://cloud.nusserstudios.com/video/tailbliss-home-rocket-indigo.mp4"
-                            <source src="https://cloud.nusserstudios.com/video/tailbliss-home-rocket-indigo.mp4"
+                                type="video/mp4" class="rounded-lg" />
-                                    type="video/mp4" />
+                    </video>
-                        </video>
+
-                    </div>
                 </div>
             </div>
         </div>
@@ -64,7 +47,7 @@
     <!-- More main page content here... -->
 
     <!-- Testimonial/stats section -->
-    <div class="relative my-4 md:mt-20">
+    <div class="relative my-4">
         <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8">
             <div class="relative sm:py-8 lg:py-0">
                 <div aria-hidden="true" class="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen">

layouts/partials/nav.html

@@ -135,7 +135,7 @@
                 Contact
             </a>
             <button id="theme-toggle" type="button"
-                    class="p-2 text-sm text-gray-500 rounded-lg md: dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 md:ml-2">
+                    class="p-2 text-sm text-gray-500 rounded-lg md: dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 md:ml-2 max-w-5 xs:hidden">
                 <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                      xmlns="http://www.w3.org/2000/svg">
                     <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z">

resources/_gen/assets/css/css/style.css_ad9a12809e06de71aca16e9138fbecf4.content

@@ -2278,6 +2278,10 @@ video {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .absolute {
   position: absolute;
 }
@@ -2342,6 +2346,10 @@ video {
   grid-column: span 3 / span 3;
 }
 
+.col-span-6 {
+  grid-column: span 6 / span 6;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -2372,6 +2380,11 @@ video {
   margin-bottom: -0.5rem;
 }
 
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -2448,6 +2461,22 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -2521,6 +2550,14 @@ video {
   height: 1rem;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
 .max-h-12 {
   max-height: 3rem;
 }
@@ -2609,6 +2646,10 @@ video {
   max-width: none;
 }
 
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -2689,6 +2730,10 @@ video {
   flex-wrap: wrap;
 }
 
+.place-items-center {
+  place-items: center;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -2717,6 +2762,10 @@ video {
   gap: 1rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -2747,6 +2796,23 @@ video {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2865,6 +2931,21 @@ video {
   background-color: rgb(129 140 248 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2885,6 +2966,12 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-indigo-900 {
+  --tw-gradient-from: #312e81;
+  --tw-gradient-to: rgb(49 46 129 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .via-indigo-500 {
   --tw-gradient-to: rgb(99 102 241 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #6366f1, var(--tw-gradient-to);
@@ -2894,6 +2981,14 @@ video {
   --tw-gradient-to: #1e40af;
 }
 
+.to-blue-900 {
+  --tw-gradient-to: #1e3a8a;
+}
+
+.to-gray-900 {
+  --tw-gradient-to: #111827;
+}
+
 .bg-center {
   background-position: center;
 }
@@ -2958,14 +3053,9 @@ video {
   padding-bottom: 1rem;
 }
 
-.py-6 {
+.py-1\.5 {
-  padding-top: 1.5rem;
+  padding-top: 0.375rem;
-  padding-bottom: 1.5rem;
+  padding-bottom: 0.375rem;
-}
-
-.px-2\.5 {
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
 }
 
 .py-1 {
@@ -2973,11 +3063,21 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -3033,11 +3133,6 @@ video {
   padding-bottom: 3rem;
 }
 
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-
 .pt-8 {
   padding-top: 2rem;
 }
@@ -3086,6 +3181,26 @@ video {
   padding-top: 0.5rem;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
+.pr-5 {
+  padding-right: 1.25rem;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -3119,9 +3234,9 @@ video {
   line-height: 1;
 }
 
-.text-5xl {
+.text-4xl {
-  font-size: 3rem;
+  font-size: 2.25rem;
-  line-height: 1;
+  line-height: 2.5rem;
 }
 
 .text-base {
@@ -3134,16 +3249,16 @@ video {
   line-height: 1.75rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-black {
   font-weight: 900;
 }
@@ -3164,6 +3279,14 @@ video {
   font-weight: 600;
 }
 
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -3184,6 +3307,10 @@ video {
   line-height: 2.5;
 }
 
+.leading-none {
+  line-height: 1;
+}
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -3262,6 +3389,16 @@ video {
   color: rgb(24 24 27 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.text-gray-50 {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
@@ -3705,6 +3842,11 @@ EmojiSymbols;
   color: rgb(99 102 241 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .dark .dark\:focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
@@ -3739,6 +3881,10 @@ EmojiSymbols;
     grid-column: span 2 / span 2;
   }
 
+  .sm\:-m-6 {
+    margin: -1.5rem;
+  }
+
   .sm\:mx-auto {
     margin-left: auto;
     margin-right: auto;
@@ -3772,6 +3918,10 @@ EmojiSymbols;
     margin-left: 0.75rem;
   }
 
+  .sm\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -3780,15 +3930,31 @@ EmojiSymbols;
     display: flex;
   }
 
+  .sm\:hidden {
+    display: none;
+  }
+
   .sm\:h-2\/3 {
     height: 66.666667%;
   }
 
+  .sm\:h-96 {
+    height: 24rem;
+  }
+
   .sm\:w-fit {
     width: -moz-fit-content;
     width: fit-content;
   }
 
+  .sm\:w-80 {
+    width: 20rem;
+  }
+
+  .sm\:w-auto {
+    width: auto;
+  }
+
   .sm\:max-w-3xl {
     max-width: 48rem;
   }
@@ -3805,6 +3971,22 @@ EmojiSymbols;
     justify-content: center;
   }
 
+  .sm\:gap-12 {
+    gap: 3rem;
+  }
+
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:py-8 {
     padding-top: 2rem;
     padding-bottom: 2rem;
@@ -3843,11 +4025,6 @@ EmojiSymbols;
     text-align: center;
   }
 
-  .sm\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
   .sm\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
@@ -3953,6 +4130,10 @@ EmojiSymbols;
     flex-direction: row;
   }
 
+  .md\:place-items-center {
+    place-items: center;
+  }
+
   .md\:items-center {
     align-items: center;
   }
@@ -4183,6 +4364,10 @@ EmojiSymbols;
     border-bottom-left-radius: 0.5rem;
   }
 
+  .md\:p-0 {
+    padding: 0px;
+  }
+
   .md\:py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
@@ -4229,6 +4414,10 @@ EmojiSymbols;
     padding-bottom: 4rem;
   }
 
+  .md\:pt-32 {
+    padding-top: 8rem;
+  }
+
   .md\:text-left {
     text-align: left;
   }
@@ -4243,15 +4432,15 @@ EmojiSymbols;
     line-height: 1;
   }
 
-  .md\:text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-
   .md\:text-5xl {
     font-size: 3rem;
     line-height: 1;
   }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -4305,6 +4494,11 @@ EmojiSymbols;
     margin-right: auto;
   }
 
+  .lg\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
   .lg\:mt-0 {
     margin-top: 0px;
   }
@@ -4317,6 +4511,26 @@ EmojiSymbols;
     margin-bottom: 4rem;
   }
 
+  .lg\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .lg\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .lg\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .lg\:mb-24 {
+    margin-bottom: 6rem;
+  }
+
+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
+
   .lg\:grid {
     display: grid;
   }
@@ -4357,6 +4571,14 @@ EmojiSymbols;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
   .lg\:place-items-center {
     place-items: center;
   }
@@ -4381,6 +4603,10 @@ EmojiSymbols;
     gap: 6rem;
   }
 
+  .lg\:gap-4 {
+    gap: 1rem;
+  }
+
   .lg\:prose-xl {
     font-size: 1.25rem;
     line-height: 1.8;
@@ -4645,6 +4871,18 @@ EmojiSymbols;
     padding-bottom: 4rem;
   }
 
+  .lg\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .lg\:pt-32 {
+    padding-top: 8rem;
+  }
+
+  .lg\:pt-48 {
+    padding-top: 12rem;
+  }
+
   .lg\:text-left {
     text-align: left;
   }
@@ -4656,6 +4894,18 @@ EmojiSymbols;
 }
 
 @media (min-width: 1280px) {
+  .xl\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .xl\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .xl\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
   .xl\:block {
     display: block;
   }
@@ -4664,6 +4914,14 @@ EmojiSymbols;
     display: inline;
   }
 
+  .xl\:w-96 {
+    width: 24rem;
+  }
+
+  .xl\:pt-48 {
+    padding-top: 12rem;
+  }
+
   .xl\:text-9xl {
     font-size: 8rem;
     line-height: 1;
@@ -4678,4 +4936,25 @@ EmojiSymbols;
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
+
+  .xl\:text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+  }
+
+  .xl\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .xl\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:pt-48 {
+    padding-top: 12rem;
+  }
 }