Skip to content

Commit

Permalink
feat: initial create competitions pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@niccofyren
niccofyren committed Oct 21, 2024
1 parent 69ec61c commit 590bc21
Show file tree
Hide file tree
Showing 2 changed files with 397 additions and 0 deletions.
81 changes: 81 additions & 0 deletions src/components/competitions/CreativeBox.astro
View file
Original file line number Diff line number Diff line change
@@ -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>
316 changes: 316 additions & 0 deletions src/pages/competitions/creative.astro
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 590bc21

Please sign in to comment.