From a033ec8d2cf63e516b7d69000bdf4b04db0a529e Mon Sep 17 00:00:00 2001
From: niccofyren <niccofyren@gmail.com>
Date: Sun, 24 Nov 2024 18:07:09 +0100
Subject: [PATCH] feat: about section including sponsor and expo pages (#96)

---
 src/components/Header.astro             | 16 +++++
 src/components/navigation/NavItem.astro |  2 +-
 src/components/sections/ExpoComp.astro  | 35 ++++++++++
 src/pages/about.astro                   | 31 ---------
 src/pages/about/expo.astro              | 73 +++++++++++++++++++
 src/pages/about/index.astro             | 93 +++++++++++++++++++++++++
 src/pages/about/sponsor.astro           | 62 +++++++++++++++++
 src/pages/index.astro                   | 12 ++--
 8 files changed, 288 insertions(+), 36 deletions(-)
 create mode 100644 src/components/sections/ExpoComp.astro
 delete mode 100644 src/pages/about.astro
 create mode 100644 src/pages/about/expo.astro
 create mode 100644 src/pages/about/index.astro
 create mode 100644 src/pages/about/sponsor.astro

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 0630797..b6ff9f8 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -50,6 +50,14 @@ import NavItem from "./navigation/NavItem.astro";
           />
         </a>
         <ul class="hidden sm:flex w-full space-x-6 space-y-0 justify-end">
+          <NavItem
+            title="Om TG"
+            path="/about"
+            subItems={[
+              { title: "Bli utstiller", path: "/about/expo" },
+              { title: "Bli sponsor", path: "/about/sponsor" },
+            ]}
+          />
           <NavItem
             title="Konkurranser"
             subItems={[
@@ -120,6 +128,14 @@ import NavItem from "./navigation/NavItem.astro";
       <!-- Mobile menu, show/hide based on menu state. -->
       <div class="hidden md:hidden" id="mobile-menu" data-part="mobile-menu">
         <ul class="space-y-3 px-2 pb-3 pt-2 flex flex-col">
+          <NavItem
+            title="Om TG"
+            path="/about"
+            subItems={[
+              { title: "Bli utstiller", path: "/about/expo" },
+              { title: "Bli sponsor", path: "/about/sponsor" },
+            ]}
+          />
           <NavItem
             title="Konkurranser"
             subItems={[
diff --git a/src/components/navigation/NavItem.astro b/src/components/navigation/NavItem.astro
index d775a4c..3acacef 100644
--- a/src/components/navigation/NavItem.astro
+++ b/src/components/navigation/NavItem.astro
@@ -151,7 +151,7 @@ const subItemsWithParent: Array<
   {
     expandable ? (
       <ul
-        class={`hidden min-w-full flex-col bg-neutral-800 md:bg-backgroundSecondary space-y-1 px-2 py-3 mt-3 z-0 md:mt-0 md:pt-10 md:rounded-b-md md:absolute md:top-0 ${subAlignment === "left" ? "md:left-0" : "md:right-0"}`}
+        class={`hidden min-w-max flex-col bg-neutral-800 md:bg-backgroundSecondary space-y-1 px-2 py-3 mt-3 z-0 md:mt-0 md:pt-10 md:rounded-b-md md:absolute md:top-0 ${subAlignment === "left" ? "md:left-0" : "md:right-0"}`}
         id={`nav-item-sub-${key}`}
         aria-role="menu"
         data-part="sub-menu"
diff --git a/src/components/sections/ExpoComp.astro b/src/components/sections/ExpoComp.astro
new file mode 100644
index 0000000..0213a2c
--- /dev/null
+++ b/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="Lyst til å stille ut?"
+      titleColor="text-orange-500"
+      text="Er du klar for å nå tusenvis av teknologi- og gaming-entusiaster på Norges største LAN-party?"
+      button={{
+        text: "Les hvordan",
+        link: "/about/expo",
+        color: "bg-orange-500 self-center",
+      }}
+      backgroundColor="bg-black bg-opacity-90"
+    />
+  </div>
+</section>
diff --git a/src/pages/about.astro b/src/pages/about.astro
deleted file mode 100644
index 5b83781..0000000
--- a/src/pages/about.astro
+++ /dev/null
@@ -1,31 +0,0 @@
----
-import Main from "../components/Main.astro";
-import Layout from "../layouts/Layout.astro";
----
-
-<Layout title="The Gathering - About">
-  <Main>
-    <section class="text-white p-8 rounded-lg">
-      <div class="container mx-auto">
-        <h1 class="text-3xl font-bold text-center mb-6">
-          Hva er The Gathering?
-        </h1>
-        <p class="text-center mb-4">
-          Hver påske samler vi spill- og teknologientusiaster i Vikingskipet i
-          Hamar, på en av verdens største festivaler som feirer data,
-          kreativitet og spillkultur.
-        </p>
-        <p class="text-center mb-4">
-          The Gathering er et unikt samspill av gaming, e-sport, pulserende
-          konserter, hackerkonkurranser, cosplay, digital kunst, og selvfølgelig
-          den evige letingen etter Arne.
-        </p>
-        <p class="text-center">
-          Dette er The Gathering – hvor entusiasme og lidenskap for alt digitalt
-          møtes i en eksplosjon av kreativitet. Velkommen til verdens største
-          påskehytte
-        </p>
-      </div>
-    </section>
-  </Main>
-</Layout>
diff --git a/src/pages/about/expo.astro b/src/pages/about/expo.astro
new file mode 100644
index 0000000..f6c97b0
--- /dev/null
+++ b/src/pages/about/expo.astro
@@ -0,0 +1,73 @@
+---
+import H1 from "../../components/H1.astro";
+import Layout from "../../layouts/Layout.astro";
+import Main from "../../components/Main.astro";
+import H2 from "../../components/H2.astro";
+import ContentContainer from "../../components/ContentContainer.astro";
+
+const boxStyles = "rounded-3xl sm:rounded-2xl sm:w-full sm:mx-auto";
+const buttonStyles =
+  "block px-4 py-2 rounded-full content-center text-decoration-none text-center mt-6 border border-orange-500 bg-orange-500 hover:bg-orange-200 hover:text-black";
+---
+
+<Layout
+  title="The Gathering - Bli utstiller!"
+  description="Bli utstiller på The Gathering!"
+>
+  <Main>
+    <ContentContainer>
+      <H1 text="Bli utstiller" />
+      <div class="grid grid-cols-1 sm:grid-cols-7 gap-x-4 gap-y-4">
+        <aside class={`${boxStyles} sm:col-span-3 min-h-64`}>
+          <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"
+          />
+        </aside>
+        <section
+          class={`${boxStyles} p-6 sm:col-span-4 bg-white text-black mt-auto`}
+        >
+          <span class="prose text-black prose-strong:text-black">
+            <H2 text="Still ut på vårt Expo område!" color="text-black" />
+            <p>
+              <strong>
+                Er du klar for å nå tusenvis av teknologi- og gaming-entusiaster
+                på Norges største LAN-party? TG er den perfekte arenaen for å
+                vise frem produktene og tjenestene dine til et engasjert og
+                fremtidsrettet publikum.
+              </strong>
+            </p>
+            <p>
+              Som utstiller får du en unik mulighet til å knytte kontakter,
+              bygge merkevaren din og komme tett på en målgruppe som er
+              lidenskapelig opptatt av gaming, teknologi og digital innovasjon.
+              Med et komplett program fylt med spennende aktiviteter, er The
+              Gathering en uforglemmelig opplevelse for både deltakerne og
+              utstillerne. Vi kan også hjelpe deg til å finne kreative og
+              morsomme løsninger som kan gjøre din stand unik!
+            </p>
+            <p>
+              Bli med å gjøre The Gathering til et event som setter standarden
+              for fremtidens teknologi og gaming! Send oss en mail på <a
+                href="mailto:expo@tg.no">expo@tg.no</a
+              >
+              for priser, info eller bare en hyggelig prat!
+            </p>
+          </span>
+          <a class={buttonStyles} href="mailto:expo@tg.no"
+            >Ta kontakt på expo@tg.no</a
+          >
+        </section>
+        <aside class="sm:col-span-7 my-4 prose text-white">
+          <p>
+            Egentlig mest klar for å bli sponsor? <a href="/about/sponsor">
+              Les mer om sponsorater her!
+            </a>
+          </p>
+        </aside>
+      </div>
+    </ContentContainer>
+  </Main></Layout
+>
diff --git a/src/pages/about/index.astro b/src/pages/about/index.astro
new file mode 100644
index 0000000..00199a7
--- /dev/null
+++ b/src/pages/about/index.astro
@@ -0,0 +1,93 @@
+---
+import H1 from "../../components/H1.astro";
+import Layout from "../../layouts/Layout.astro";
+import Main from "../../components/Main.astro";
+import H2 from "../../components/H2.astro";
+import ContentContainer from "../../components/ContentContainer.astro";
+
+const boxStyles = "rounded-3xl sm:rounded-2xl sm:w-full sm:mx-auto";
+const buttonStyles =
+  "block px-4 py-2 rounded-full content-center text-decoration-none text-center mt-6 border border-orange-500 bg-orange-500 hover:bg-orange-200 hover:text-black";
+---
+
+<Layout title="The Gathering - Om The Gathering" description="Hv">
+  <Main>
+    <ContentContainer>
+      <H1 text="Om The Gathering" />
+      <div class="grid grid-cols-1 sm:grid-cols-7 gap-x-4 gap-y-4">
+        <aside
+          class={`${boxStyles} sm:col-span-4 min-h-64 sm:min-h-auto sm:max-h-64`}
+        >
+          <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"
+          />
+        </aside>
+        <section
+          class={`${boxStyles} p-6 sm:col-start-1 sm:col-span-4 bg-white text-black mt-auto`}
+        >
+          <span class="prose text-black prose-strong:text-black">
+            <H2 text="Om The Gathering" color="text-black" />
+            <p>
+              The Gathering (TG) er et av verdens største datatreff, der
+              tusenvis av teknologientusiaster, gamere, og kreative sjeler
+              samles hvert år i Vikingskipet på Hamar for fire dager fylt med
+              spill, utvikling, kunst, musikk, og fellesskap.
+            </p>
+          </span>
+        </section>
+        <section
+          class={`${boxStyles} p-6 sm:col-start-5 sm:col-span-3 sm:row-start-1 sm:row-span-2 bg-blue-400 text-black prose prose-headings:text-black sm:mt-20`}
+        >
+          <H2 text="Bakgrunn" color="text-black" />
+          <p>
+            The Gathering ble grunnlagt i 1992 og har siden vokst til å bli en
+            av de mest ikoniske begivenhetene for teknologi og digital kunst i
+            Norge. Fra starten har TG vært et pionerarrangement for gaming og
+            kreativ utfoldelse på tvers av generasjoner. Arrangementet har
+            endret seg med tidens teknologi og trender, men har alltid holdt
+            fast ved verdien av fellesskap og innovasjon.
+          </p>
+        </section>
+        <section
+          class={`${boxStyles} p-6 sm:col-start-1 sm:col-span-4 bg-white mt-auto`}
+        >
+          <span class="prose text-black prose-strong:text-black">
+            <H2 text="Ambisjoner og politisk arbeid" color="text-black" />
+            <p>
+              Fremover ønsker vi å gjøre The Gathering enda mer tilgjengelig og
+              inkluderende, samtidig som vi skaper nye muligheter for læring og
+              utvikling. Vårt mål er å videreutvikle TG som en arena for både
+              sosiale, teknologiske og kunstneriske uttrykk, og å gi flere
+              muligheter for innovasjon innen e-sport, programmering, design og
+              digital kunst. Vi ser frem til å fortsette reisen sammen med både
+              nye og gamle deltakere i mange år fremover.
+            </p>
+          </span>
+        </section>
+        <section
+          class={`${boxStyles} p-6 sm:col-start-5 sm:col-span-3 sm:row-span-2 bg-white text-black`}
+        >
+          <span class="prose text-black prose-strong:text-black">
+            <H2 text="Organisasjon og KANDU" color="text-black" />
+            <p>
+              The Gathering organiseres av en dedikert gjeng frivillige fra hele
+              landet, ledet og støttet av organisasjonen KANDU, en
+              interesseorganisasjon for datainteresserte ungdommer. KANDU står
+              for Kreativ Aktiv Norsk Data-Ungdom, og jobber for å fremme
+              datakultur og har vært en avgjørende faktor for TGs suksess
+              gjennom årene. Frivilligarbeidet er kjernen i TG, og både KANDU og
+              alle de involverte er opptatt av å gi deltakerne en uforglemmelig
+              opplevelse.
+            </p>
+          </span>
+          <a class={buttonStyles} href="https://www.kandu.no" target="_blank"
+            >Les mer om KANDU</a
+          >
+        </section>
+      </div>
+    </ContentContainer>
+  </Main>
+</Layout>
diff --git a/src/pages/about/sponsor.astro b/src/pages/about/sponsor.astro
new file mode 100644
index 0000000..3600285
--- /dev/null
+++ b/src/pages/about/sponsor.astro
@@ -0,0 +1,62 @@
+---
+import H1 from "../../components/H1.astro";
+import Layout from "../../layouts/Layout.astro";
+import Main from "../../components/Main.astro";
+import H2 from "../../components/H2.astro";
+import ContentContainer from "../../components/ContentContainer.astro";
+
+const boxStyles = "rounded-3xl sm:rounded-2xl sm:w-full sm:mx-auto";
+const buttonStyles =
+  "block px-4 py-2 rounded-full content-center text-decoration-none text-center mt-6 border border-orange-500 bg-orange-500 hover:bg-orange-200 hover:text-black";
+---
+
+<Layout
+  title="The Gathering - Bli sponsor!"
+  description="Bli sponsor på The Gathering!"
+>
+  <Main>
+    <ContentContainer>
+      <H1 text="Bli sponsor" />
+      <div class="grid grid-cols-1 sm:grid-cols-7 gap-x-4 gap-y-4">
+        <aside class={`${boxStyles} sm:col-span-3 min-h-64`}>
+          <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"
+          />
+        </aside>
+        <section class={`${boxStyles} p-6 sm:col-span-4 bg-white mt-auto`}>
+          <span class="prose text-black prose-strong:text-black">
+            <H2 text="Lyst til å støtte The Gathering?" color="text-black" />
+            <p>
+              <strong
+                >Vi setter pris på økonomisk støtte eller andre typer
+                sponsorater, og har eget opplegg for å fronte sponsorer og
+                samarbeidspartnere på våre flater. Både fysisk i skipet og i det
+                digitale.</strong
+              >
+            </p>
+            <p>
+              Ta kontakt med oss på <a href="mailto:sponsor@tg.no"
+                >sponsor@tg.no</a
+              > for å høre mer om mulighetene for å støtte The Gathering, og hva
+              vi kan tilby tilbake. Vi er åpne for mange ulike typer samarbeid, og
+              er sikre på at vi kan finne en løsning som passer for deg.
+            </p>
+          </span>
+          <a class={buttonStyles} href="mailto:sponsor@tg.no"
+            >Ta kontakt på sponsor@tg.no</a
+          >
+        </section>
+        <aside class="sm:col-span-7 my-4 prose text-white">
+          <p>
+            Egentlig mest klar for å ha stand? <a href="/about/expo">
+              Les mer om expo-mulighetene her!
+            </a>
+          </p>
+        </aside>
+      </div>
+    </ContentContainer>
+  </Main>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9e3d879..6a5477c 100644
--- a/src/pages/index.astro
+++ b/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,16 +20,16 @@ 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" />
@@ -36,6 +37,9 @@ import TicketsComp from "../components/sections/TicketsComp.astro";
       <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>