From 590bc213f0701f8db11c094932cedbea4f3a1fb5 Mon Sep 17 00:00:00 2001
From: Nicolai Rosdahl Tellefsen <niccofyren@gmail.com>
Date: Mon, 21 Oct 2024 19:36:41 +0200
Subject: [PATCH] feat: initial create competitions pages

---
 src/components/competitions/CreativeBox.astro |  81 +++++
 src/pages/competitions/creative.astro         | 316 ++++++++++++++++++
 2 files changed, 397 insertions(+)
 create mode 100644 src/components/competitions/CreativeBox.astro
 create mode 100644 src/pages/competitions/creative.astro

diff --git a/src/components/competitions/CreativeBox.astro b/src/components/competitions/CreativeBox.astro
new file mode 100644
index 0000000..e0bea2d
--- /dev/null
+++ b/src/components/competitions/CreativeBox.astro
@@ -0,0 +1,81 @@
+---
+import H2 from "../../components/H2.astro";
+import H3 from "../../components/H3.astro";
+
+export interface Props {
+  title: string;
+  children: any;
+  prizes: Array<{
+    name?: string;
+    price?: number | string;
+  }>;
+  byoc?: boolean;
+  requiresTicket?: boolean;
+  class?: string;
+  url?: string;
+  category?:
+    | "foto"
+    | "video"
+    | "grafikk"
+    | "musikk"
+    | "diverse"
+    | "cosplay"
+    | "utvikling";
+}
+
+const { title, prizes, url, class: classNames, category } = Astro.props;
+
+const formatPrice = (prize: number | string) =>
+  typeof prize === "string"
+    ? prize
+    : new Intl.NumberFormat("nb-NO", {
+        style: "currency",
+        currency: "NOK",
+        maximumFractionDigits: 0,
+      }).format(prize);
+
+const categoryStyles = {
+  foto: "bg-red-500",
+  video: "bg-green-500",
+  grafikk: "bg-blue-500",
+  musikk: "bg-yellow-500",
+  diverse: "bg-purple-500",
+  cosplay: "bg-indigo-500",
+  utvikling: "bg-pink-500",
+};
+
+const categoryStyle = categoryStyles[category || "diverse"];
+const hasPrices = !!prizes.length;
+---
+
+<section class={`flex flex-col ${categoryStyle} ${classNames}`}>
+  <H2 text={title} color="" />
+  <span>
+    <slot />
+  </span>
+  {
+    hasPrices ? (
+      <>
+        <dl class="divide-y divide-black/50 mt-5 last:pt-5 last:mt-auto">
+          {prizes.map(({ name, price }, index) => (
+            <div class="px-2 py-1 sm:grid sm:grid-cols-3 sm:gap-2 sm:px-0">
+              <dt class="text-sm font-bold leading-4 text-black/90">
+                {name || `${index + 1}. plass`}
+              </dt>
+              <dd class="mt-1 text-sm leading-4 text-black/70 sm:col-span-2 sm:mt-0">
+                {price ? formatPrice(price) : "TBA"}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </>
+    ) : null
+  }
+  {
+    url && (
+      <button class="w-full px-4 py-2 rounded-full content-center mt-auto bg-white border border-white hover:bg-white/70">
+        Les mer
+      </button>
+    )
+  }
+</section>
diff --git a/src/pages/competitions/creative.astro b/src/pages/competitions/creative.astro
new file mode 100644
index 0000000..e0b7b34
--- /dev/null
+++ b/src/pages/competitions/creative.astro
@@ -0,0 +1,316 @@
+---
+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 H3 from "../../components/H3.astro";
+import ContentContainer from "../../components/ContentContainer.astro";
+import CreativeBox from "../../components/competitions/CreativeBox.astro";
+import Pill from "../../components/competitions/Pill.astro";
+
+const boxStyles = "p-6 rounded-3xl sm:mx-auto sm:rounded-2xl";
+---
+
+<Layout title="The Gathering - Kreative konkurranser">
+  <Main>
+    <ContentContainer>
+      <H1 text="Kreative konkurranser" />
+      <div
+        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
+      >
+        <div class="sm:col-start-1 sm:col-span-2">
+          <section class="mb-6 prose">
+            <H2 text="Hvem takler presset best?" />
+            <p>
+              Kreative impulser og klar for å vise hva du er god for?
+              Kreativitet har alltid vært en sentral del av The Gathering. Fra
+              imponerende cosplay til banebrytende musikk, TG er stedet hvor
+              fantasien får fritt spillerom. Uansett om du er en erfaren
+              deltaker eller nybegynner, vil du finne en rekke kreative
+              konkurranser som passer for deg.
+            </p>
+            <H3>Praktisk informasjon</H3>
+            <p>
+              <Pill text="Egen utstyr" color="orange" class="mr-2" />
+              Alle de kreative konkurransene krever at du har eget utstyr, som maskin,
+              tegnebrett, symaskin, kamera eller annet.
+            </p>
+            <p>
+              <Pill text="I skipet" color="blue" class="mr-2" />
+              Alle de kreative konkurransene gjennomføres og kåres i skipet, derfor
+              må du være på plass på The Gathering for å kunne delta
+            </p>
+          </section>
+        </div>
+        <CreativeBox
+          title="AI musikk"
+          class={boxStyles}
+          prizes={[{}, {}, {}]}
+          category="musikk"
+        >
+          <p>
+            Bruk kun AI verktøy, uten etterbehandling, til å lage et bilde av et
+            spesifikt tema. Tema vil bli annonsert under arrangementet.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="AI grafikk"
+          class={boxStyles}
+          url="/creative/ai-grafikk"
+          prizes={[
+            {
+              price: 2000,
+            },
+            {
+              price: 1000,
+            },
+            {
+              price: 500,
+            },
+          ]}
+          category="grafikk"
+        >
+          <p>
+            Bruk kun AI - verktøy, uten etterbehandling, til å lage et bilde av
+            et spesifikt tema. Tema vil bli annonsert under The Gathering 2025.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="Cosplay"
+          class={`${boxStyles} sm:col-span-2`}
+          prizes={[
+            {
+              name: "Grand Price",
+              price: 3000,
+            },
+            {
+              name: "Audience Award",
+              price: 1500,
+            },
+            {
+              name: "The Crafter",
+              price: 1500,
+            },
+            {
+              name: "The Tailor",
+              price: 1500,
+            },
+            {
+              name: "The Problem Solver",
+              price: 1500,
+            },
+          ]}
+          category="cosplay"
+        >
+          <p>
+            Så ta med deg ditt favoritt cosplay fra et spill, tv-serie/film,
+            manga eller animasjon. Vi gleder oss til å se deg stå på scenen og
+            vise fram ditt beste cosplay. Vi ses på The Gathering 2025.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="Demo"
+          class={boxStyles}
+          prizes={[
+            {
+              price: 5000,
+            },
+            {
+              price: 3000,
+            },
+            {
+              price: 1500,
+            },
+          ]}
+          category="utvikling"
+        >
+          <p>
+            Lag et dataprogram som imponerer med kul grafikk og bra musikk.
+            Målet med konkurransen er å vise frem tekniske ferdigheter og
+            kreativitet.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="Themed Photo"
+          class={boxStyles}
+          prizes={[
+            {
+              price: 2000,
+            },
+            {
+              price: 1000,
+            },
+            {
+              price: 500,
+            },
+          ]}
+          category="foto"
+        >
+          <p>
+            Er du glad i å ta bilder? Da passer denne konkurransen for deg. Ut
+            fra det temaet som blir annonsert, skal du ta ditt beste bilde.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="Freestyle Handdrawn Graphics"
+          class={boxStyles}
+          prizes={[
+            {
+              price: 5000,
+            },
+            {
+              price: 3000,
+            },
+            {
+              price: 1500,
+            },
+          ]}
+          category="grafikk"
+        >
+          <p>Få ut kunstneren i deg å tegn ditt beste bilde.</p>
+        </CreativeBox>
+        <CreativeBox
+          title="Fast Graphics"
+          class={boxStyles}
+          prizes={[
+            {
+              price: 4000,
+            },
+            {
+              price: 2000,
+            },
+            {
+              price: 1000,
+            },
+          ]}
+          category="grafikk"
+        >
+          <p>
+            Er du glad i å tegne, vil prøve, eller bare har lyst til å delta, da
+            er dette konkurransen for deg. Ut fra det temaet som blir annonsert,
+            skal du tegne ditt beste bilde.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="Freestyle Music"
+          class={boxStyles}
+          prizes={[
+            {
+              price: 6000,
+            },
+            {
+              price: 3000,
+            },
+            {
+              price: 1500,
+            },
+          ]}
+          category="musikk"
+        >
+          <p>
+            Har du en liten musiker i deg. Da er dette din mulighet til å få
+            vise deg fram.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="Fast Music Remix"
+          class={boxStyles}
+          prizes={[
+            {
+              price: 2000,
+            },
+            {
+              price: 1000,
+            },
+            {
+              price: 500,
+            },
+          ]}
+          category="musikk"
+        >
+          <p>
+            Har du en liten musiker i deg. Da er dette din mulighet til å få
+            vise deg fram. Du vil få tilgang til en samplepack og et tema for
+            sjanger. Ut fra dette skal du lage din beste låt.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="Small HTML"
+          class={boxStyles}
+          prizes={[
+            {
+              price: 2000,
+            },
+            {
+              price: 1000,
+            },
+            {
+              price: 500,
+            },
+          ]}
+          category="utvikling"
+        >
+          <p>
+            Lag et stykke html så lite som mulig. Bruk alle mulige triks for å
+            forminske koden. Det skal se helt likt ut som originalen i
+            nettleseren. Minste html - fil vinner!
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="Useless Utility"
+          class={boxStyles}
+          prizes={[{ name: "Premie", price: "Noe ubrukelig?" }]}
+          category="utvikling"
+        >
+          <p>
+            Lag et program som gjør noe som man aldri får bruk for. Kanskje en
+            app på telefon eller et program på pcen. Et helt og holdent
+            ubrukelig program.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="10s movie"
+          class={boxStyles}
+          prizes={[
+            {
+              price: 2000,
+            },
+            {
+              price: 1000,
+            },
+            {
+              price: 500,
+            },
+          ]}
+          category="video"
+        >
+          <p>
+            Målet er å lage din beste video som er 10 sekunder lang etter et
+            spesifikt tema som vil bli annonsert under arrangementet.
+          </p>
+        </CreativeBox>
+        <CreativeBox
+          title="Freestyle VFX"
+          class={boxStyles}
+          prizes={[
+            {
+              price: 5000,
+            },
+            {
+              price: 3000,
+            },
+            {
+              price: 1500,
+            },
+          ]}
+          category="video"
+        >
+          <p>
+            Konkurransen er for alle som ønsker å skape et manipulert
+            videoklipp, også kjent som visuelle effekter eller vfx.
+          </p>
+        </CreativeBox>
+      </div>
+    </ContentContainer>
+  </Main>
+</Layout>