feat: add CTA on front (and fix news ordering)

src/components/sections/ExpoComp.astro

@@ -0,0 +1,35 @@
+---
+import Box from "../Box.astro";
+
+interface Props {
+  autoHeight?: boolean;
+}
+
+const { autoHeight = false } = Astro.props;
+const heightStyles = autoHeight ? "h-full" : "h-[300px]";
+---
+
+<section class={`relative ${heightStyles}`}>
+  <img
+    src="https://www.tg.no/media/images/TG-artikler.max-1600x1600.png"
+    srcset="https://www.tg.no/media/images/TG-artikler.max-1600x1600.png 500w, https://www.tg.no/media/images/TG-artikler.max-3200x3200.png 1000w"
+    alt='Bilde av "Community village" fra TG 23, prototypen på Expo-området vårt'
+    class="w-full h-full object-cover rounded-3xl"
+  />
+  <div
+    class="absolute inset-0 flex justify-center items-start sm:items-center sm:p-4"
+  >
+    <Box
+      itemCenter={true}
+      title="Utstiller, sponsor eller presse?"
+      titleColor="text-orange-500"
+      text="Alt du trenger å vite finner du her! Og kontaktinfo for alt vi ikke har tenkt på enda..."
+      button={{
+        text: "Lær mer",
+        link: "/collaboration",
+        color: "bg-orange-500 self-center",
+      }}
+      backgroundColor="bg-black bg-opacity-90"
+    />
+  </div>
+</section>

src/pages/index.astro

@@ -8,6 +8,7 @@ import CrewDescriptionComp from "../components/sections/CrewDescriptionComp.astr
 import CrewJoinComp from "../components/sections/CrewJoinComp.astro";
 import TechBlogComp from "../components/sections/TechBlogComp.astro";
 import TicketsComp from "../components/sections/TicketsComp.astro";
+import ExpoComp from "../components/sections/ExpoComp.astro";
 ---
 
 <Layout title="The Gathering">
@@ -19,23 +20,26 @@ import TicketsComp from "../components/sections/TicketsComp.astro";
       <div class="sm:col-start-4 sm:col-span-2 sm:row-start-1">
         <TicketsComp />
       </div>
+      <div class="sm:col-span-5 my-2">
+        <NewsComp />
+      </div>
       <div
         class="sm:col-start-1 sm:col-span-3 sm:row-start-1 sm:row-span-2 flex"
       >
         <AboutComp />
       </div>
       <div class="sm:col-start-4 sm:col-span-2 sm:row-start-2">
-        <CrewJoinComp image="/images/tg23-oversikt.jpg" />
-      </div>
-      <div class="sm:col-span-5 my-2">
-        <NewsComp />
+        <ExpoComp />
       </div>
       <div class="sm:col-span-2">
         <CrewDescriptionComp image="/images/tg19-lights.jpg" />
       </div>
       <div class="sm:col-span-3">
         <TechBlogComp image="/images/tg23-crew.jpg" />
       </div>
+      <div class="sm:col-span-5">
+        <CrewJoinComp image="/images/tg23-oversikt.jpg" />
+      </div>
     </div>
   </Main>
 </Layout>