90 lines
3.6 KiB
Plaintext
90 lines
3.6 KiB
Plaintext
---
|
||
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
|
||
import Scroll from '@app/website/index/Scroll.svelte';
|
||
import Teams from '@app/website/index/Teams.svelte';
|
||
import Countdown from '@app/website/index/Countdown.svelte';
|
||
import Varo from '@assets/img/varo.webp';
|
||
import Background from '@assets/img/background.webp';
|
||
import { START_DATE } from 'astro:env/server';
|
||
import { getSetting, SettingKey } from '@util/settings';
|
||
import { db } from '@db/database.ts';
|
||
|
||
const teams = await db.getTeams({});
|
||
const deaths = await db.getDeaths({});
|
||
|
||
const signupEnabled = await getSetting(db, SettingKey.SignupEnabled, false);
|
||
|
||
const information = [
|
||
{
|
||
title: 'Was ist Varo?',
|
||
description:
|
||
'Varo ist ein spannendes Vanilla-Minecraft-PvP-Projekt, bei dem Zweier-Teams im Kampf ums Überleben gegeneinander antreten. Wer stirbt – ganz gleich auf welche Weise – scheidet endgültig aus. Das letzte verbleibende Team gewinnt Varo!'
|
||
},
|
||
{
|
||
title: 'Warum Varo?',
|
||
description:
|
||
'Varo 5 ist unser erstes großes Sommerprojekt – ein PvP-Format, das für frische Abwechslung sorgt und die Wartezeit auf das nächsten CraftAttack verkürzt.\n' +
|
||
'Tatsächlich ist es schon das fünfte Varo – auch wenn das viele überraschen dürfte.\n' +
|
||
'Zum ersten Mal veranstalten wir es jedoch in dieser offenen Form für alle Teilnehmenden.\n' +
|
||
'Wenn es euch gefällt, könnte Varo künftig als feste Sommerreihe weitergeführt werden.\n' +
|
||
'Und natürlich gilt: Im Winter sehen wir uns wie gewohnt bei CraftAttack wieder!'
|
||
},
|
||
{
|
||
title: 'Wer kann mitspielen?',
|
||
description:
|
||
'Alle Spieler mit einem Minecraft Java-Account sind herzlich eingeladen, mitzumachen. Wenn du dabei sein willst, brauchst du nur einen Teampartner – gemeinsam könnt ihr euch direkt hier auf unserer Website anmelden.'
|
||
}
|
||
];
|
||
---
|
||
|
||
<WebsiteLayout title="Varo 5">
|
||
<div class="bg-base-200 flex flex-col min-h-screen relative">
|
||
<div class="flex items-center xl:w-1/2 px-6 sm:px-10 min-h-screen h-full">
|
||
<div class="flex flex-col w-full xl:h-3/4 my-10">
|
||
<div class="flex flex-col w-full mt-2 lg:mt-5 lg:w-10/12 h-full">
|
||
<div class="w-2/3 m-auto">
|
||
<img src={Varo.src} alt="Varo 5" />
|
||
</div>
|
||
<div>
|
||
<div class="divider"></div>
|
||
<div class="flex flex-col md:flex-row xl:flex-col gap-5">
|
||
{
|
||
information.map((info) => (
|
||
<div>
|
||
<h4 class="mb-1 font-bold">{info.title}</h4>
|
||
<p>{info.description}</p>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
<div class="divider"></div>
|
||
</div>
|
||
<div class="flex justify-center">
|
||
<a class="btn btn-outline btn-accent hover:bg-white" href="signup"
|
||
>{signupEnabled ? 'Jetzt registrieren' : 'Infos zur Anmeldung'}</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="hidden xl:block absolute top-0 left-0 h-full w-full"
|
||
style="clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);"
|
||
>
|
||
<img src={Background.src} alt="" loading="lazy" width="100%" height="100%" />
|
||
</div>
|
||
<div class="hidden xl:flex justify-center absolute bottom-12 right-0 w-[60%]">
|
||
<Countdown end={Date.parse(START_DATE)} client:load />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fixed bottom-0 sm:right-0 m-5 hidden sm:block">
|
||
<Scroll href="#teams" client:load />
|
||
</div>
|
||
|
||
<div class="bg-base-100 flex flex-col space-y-10 items-center py-10">
|
||
<h2 id="teams" class="text-4xl">Teams</h2>
|
||
<Teams {teams} {deaths} />
|
||
</div>
|
||
</WebsiteLayout>
|