feat: add TG25 teaser to frontpage hero (#132)

package.json

@@ -16,6 +16,7 @@
     "@astrojs/tailwind": "^5.1.2",
     "@tailwindcss/typography": "^0.5.15",
     "astro": "^4.16.6",
+    "astro-lazy-youtube-embed": "^0.5.4",
     "dompurify": "^3.1.7",
     "jsdom": "^25.0.1",
     "tailwindcss": "^3.4.14",

src/components/frontpage/Hero.astro

@@ -1,21 +1,30 @@
 ---
+import { YouTube } from "astro-lazy-youtube-embed";
 import Button from "../Button.astro";
 ---
 
 <section
-  class="relative sm:h-[400px] sm:block space-y-4 flex flex-col rounded-3xl"
+  class="relative rounded-3xl sm:grid sm:grid-cols-5 gap-4 sm:p-4 space-y-4 sm:space-y-0"
 >
-  <img
-    src="/images/tg19-lights.jpg"
-    alt="Hero Image"
-    class="w-full h-full object-cover rounded-3xl"
-  />
+  <div class="z-10 relative rounded-3xl flex flex-col col-span-3">
+    <YouTube
+      class="rounded-3xl"
+      title="The Gathering 2025 - TG:RE - Trailer"
+      videoId="B8khsj7usxc"
+      allow="autoplay"
+      embedParams={{
+        autoplay: 1,
+        playslinline: 1,
+        rel: 0,
+        // @ts-ignore
+        mute: 1,
+      }}
+    />
+  </div>
 
-  <div
-    class="sm:absolute sm:bottom-4 sm:right-4 flex flex-col space-y-4 sm:p-4 sm:p-0 sm:min-w-[40%]"
-  >
+  <div class="z-10 relative flex flex-col justify-end col-span-2 space-y-4">
     <div
-      class="w-full bg-blue-600 text-white p-4 rounded-3xl flex flex-col space-y-2 sm:m-auto sm:rounded-2xl"
+      class="w-full bg-blue-600 text-white p-4 rounded-3xl flex flex-col space-y-2 sm:rounded-2xl"
     >
       <div class="flex flex-col text-left">
         <div class="w-full">
@@ -31,12 +40,17 @@ import Button from "../Button.astro";
       </div>
     </div>
     <div
-      class="w-full bg-orange-600 text-white p-4 rounded-3xl flex flex-col space-y-2 sm:m-auto sm:rounded-2xl"
+      class="w-full bg-orange-600 text-white p-4 rounded-3xl flex flex-col space-y-2 sm:rounded-2xl"
     >
       <div class="flex space-x-2 items-center justify-between">
         <p class="text-white">Lyst til å stille ut?</p>
         <Button href="/about/expo" theme="secondary">Les hvordan</Button>
       </div>
     </div>
   </div>
+  <img
+    src="/images/tg19-lights.jpg"
+    alt="Hero Image"
+    class="hidden sm:block sm:absolute left-0 top-0 w-full h-full object-cover rounded-3xl z-0"
+  />
 </section>