246 lines
10 KiB
Plaintext
246 lines
10 KiB
Plaintext
---
|
|
import dayjs from "dayjs";
|
|
import NavbarLayout from "@layouts/NavbarLayout.astro";
|
|
import { getCollection } from "astro:content";
|
|
import { astroI18n } from "astro-i18n";
|
|
import { Image } from "astro:assets";
|
|
import { CaretRight, Pause, Rocket, Crosshair1 } from "@astropub/icons";
|
|
import { t } from "astro-i18n";
|
|
import { l } from "@utils/util";
|
|
import PlayerCount from "@components/PlayerCount.svelte";
|
|
import "../../public/fonts/barlow-condensed/barlow-condensed.css";
|
|
import { type Player } from "../components/types/data";
|
|
import PostComponent from "../components/PostComponent.astro";
|
|
import BackgroundImage from "../components/BackgroundImage.astro";
|
|
|
|
const teamMember: { [key: string]: Player[] } = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team").then((value) => value.json());
|
|
|
|
const posts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.locale);
|
|
|
|
const germanPosts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);
|
|
|
|
germanPosts.forEach((value) => {
|
|
if (posts.find((post) => post.data.key === value.data.key)) {
|
|
return;
|
|
} else {
|
|
posts.push(value);
|
|
}
|
|
});
|
|
|
|
const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).at(0);
|
|
|
|
const prefixColors: { [key: string]: string } = {
|
|
Admin: "#dc2626",
|
|
Dev: "#0284c7",
|
|
Mod: "#d97706",
|
|
Sup: "#1d4ed8",
|
|
Arch: "#22c55e",
|
|
};
|
|
|
|
const featClass =
|
|
"flex flex-col items-center text-center py-10 px-8 border-b border-white/[0.04] md:border-b-0 md:border-r md:last:border-r-0 transition-[background] duration-[400ms] hover:bg-amber-500/[0.025] [&_svg]:text-amber-500 [&_svg]:mb-5 [&_svg]:transition-transform [&_svg]:duration-300 [&:hover_svg]:scale-[1.15]";
|
|
const featNum = "font-display text-[3.5rem] font-extrabold leading-none text-amber-500/10 mb-5";
|
|
const featH3 = "font-display text-[1.15rem] font-bold text-white tracking-[0.08em] uppercase mb-3";
|
|
const featP = "text-neutral-400/85 text-[0.85rem] leading-[1.65] mt-1";
|
|
---
|
|
|
|
<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
|
|
<section class="relative w-full h-screen overflow-hidden">
|
|
<div class="absolute inset-0 h-[calc(100vh+1rem)]">
|
|
<BackgroundImage />
|
|
</div>
|
|
<div class="absolute inset-0 z-[2] [background:linear-gradient(to_bottom,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.2)_35%,rgba(0,0,0,0.45)_65%,#080808_100%)]"></div>
|
|
<div class="absolute inset-0 z-[3] pointer-events-none [background:repeating-linear-gradient(0deg,transparent_0px,transparent_3px,rgba(0,0,0,0.06)_3px,rgba(0,0,0,0.06)_4px)]"></div>
|
|
|
|
<div class="relative z-10 h-full flex flex-col items-center justify-center px-4">
|
|
<h1 class="font-display text-[clamp(4.5rem,14vw,14rem)] font-black leading-[0.85] tracking-[-0.03em] select-none animate-[scaleIn_0.9s_0.25s_ease-out_both]">
|
|
<span class="hero-text text-transparent">{t("home.title.first")}</span><span class="text-white [text-shadow:0_0_80px_rgba(255,255,255,0.06)]">{t("home.title.second")}</span>
|
|
</h1>
|
|
|
|
<div class="w-0 h-0.5 bg-gradient-to-r from-transparent via-amber-500 to-transparent my-7 animate-[lineGrow_0.6s_0.7s_ease-out_both]"></div>
|
|
|
|
<text-carousel class="h-10 sm:h-12 w-full max-w-[28rem] sm:max-w-[32rem] relative pointer-events-none">
|
|
<h2>{t("home.subtitle.1")}</h2>
|
|
<h2>
|
|
{t("home.subtitle.2")}
|
|
<PlayerCount client:idle />
|
|
</h2>
|
|
<h2>{t("home.subtitle.3")}</h2>
|
|
</text-carousel>
|
|
|
|
<a
|
|
href={l("join")}
|
|
class="inline-flex items-center gap-[0.6rem] mt-12 py-[0.8rem] px-[2.8rem] border border-amber-500/50 text-amber-400 font-display text-[0.85rem] tracking-[0.2em] uppercase bg-amber-500/[0.04] backdrop-blur-[12px] [clip-path:polygon(0_0,calc(100%-14px)_0,100%_14px,100%_100%,14px_100%,0_calc(100%-14px))] transition-all duration-[350ms] animate-[fadeUp_0.6s_1s_ease-out_both] hover:bg-amber-500/[0.12] hover:border-amber-500/85 hover:text-white hover:[box-shadow:0_0_40px_rgba(245,158,11,0.1),inset_0_0_40px_rgba(245,158,11,0.03)] hover:scale-[1.04] active:scale-[0.97]"
|
|
>
|
|
<span>{t("home.join")}</span>
|
|
<CaretRight width="18" height="18" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 w-full max-w-[40rem] px-4">
|
|
<PostComponent post={latestPost} slim={true} />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="relative bg-[#080808] overflow-hidden">
|
|
<div class="absolute -top-[100px] left-1/2 -translate-x-1/2 w-[500px] h-[250px] [background:radial-gradient(ellipse,rgba(245,158,11,0.06)_0%,transparent_70%)] pointer-events-none"></div>
|
|
<div class="relative z-[2] max-w-5xl mx-auto py-24 px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-3">
|
|
<article class={featClass}>
|
|
<span class={featNum}>01</span>
|
|
<Crosshair1 height="36" width="36" />
|
|
<h3 class={featH3}>{t("home.benefits.fights.title")}</h3>
|
|
<p class={featP}>{t("home.benefits.fights.description.1")}</p>
|
|
<p class={featP}>{t("home.benefits.fights.description.2")}</p>
|
|
</article>
|
|
|
|
<article class={featClass}>
|
|
<span class={featNum}>02</span>
|
|
<Rocket height="36" width="36" />
|
|
<h3 class={featH3}>{t("home.benefits.bau.title")}</h3>
|
|
<p class={featP}>{t("home.benefits.bau.description")}</p>
|
|
</article>
|
|
|
|
<article class={featClass}>
|
|
<span class={featNum}>03</span>
|
|
<Pause height="36" width="36" />
|
|
<h3 class={featH3}>{t("home.benefits.minigames.title")}</h3>
|
|
<p class={featP}>{t("home.benefits.minigames.description.1")}</p>
|
|
<p class={featP}>{t("home.benefits.minigames.description.2")}</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-[#0c0c0c] py-20">
|
|
<div class="max-w-5xl mx-auto px-4 flex flex-wrap gap-4">
|
|
{
|
|
Object.entries(teamMember).map(([prefix, players]) => (
|
|
<Fragment>
|
|
{players.map((v, i) => (
|
|
<div class="flex flex-col justify-end">
|
|
{i === 0 && (
|
|
<h2 class="font-display text-[1.35rem] font-bold tracking-[0.12em] uppercase text-[var(--rc)] pb-1 inline-block" style={`--rc: ${prefixColors[prefix] || "#666"}`}>
|
|
{t("home.prefix." + prefix)}
|
|
</h2>
|
|
)}
|
|
<div
|
|
class="flex flex-col items-center py-5 px-6 bg-white/[0.025] border-t-2 border-[var(--rc)] transition-[transform,background,box-shadow] duration-300 hover:-translate-y-1.5 hover:bg-white/5 hover:shadow-[0_12px_32px_rgba(0,0,0,0.5)] [&:hover_img]:scale-[1.08]"
|
|
style={`--rc: ${prefixColors[prefix] || "#666"}`}
|
|
>
|
|
<Image
|
|
src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
|
|
alt={v.name}
|
|
width="120"
|
|
height="120"
|
|
class="w-[120px] h-[120px] transition-transform duration-300"
|
|
/>
|
|
<span class="font-display mt-3 text-[0.9rem] tracking-[0.1em] text-neutral-300/90">{v.name}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Fragment>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
class TextCarousel extends HTMLElement {
|
|
current = 0;
|
|
|
|
connectedCallback() {
|
|
this._current.classList.add("!opacity-100");
|
|
|
|
for (let i = 0; i < this.children.length; i++) {
|
|
if (i !== this.current) {
|
|
this.children[i].classList.add("translate-y-4");
|
|
}
|
|
}
|
|
|
|
setInterval(() => this.next(), 5000);
|
|
}
|
|
|
|
get _current() {
|
|
return this.children[this.current];
|
|
}
|
|
|
|
next() {
|
|
this._current.classList.remove("!opacity-100");
|
|
this._current.classList.add("translate-y-4");
|
|
this._current.classList.remove("!delay-500");
|
|
this.current = (this.current + 1) % this.children.length;
|
|
this._current.classList.add("!opacity-100");
|
|
this._current.classList.remove("translate-y-4");
|
|
this._current.classList.add("!delay-500");
|
|
}
|
|
}
|
|
|
|
customElements.define("text-carousel", TextCarousel);
|
|
</script>
|
|
</NavbarLayout>
|
|
|
|
<style>
|
|
.hero-text {
|
|
background-image: linear-gradient(160deg, #fcd34d, #f59e0b);
|
|
background-clip: text;
|
|
}
|
|
|
|
text-carousel > * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
opacity: 0;
|
|
font-family: "Barlow Condensed", sans-serif;
|
|
font-size: 0.95rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
transform: translateY(8px);
|
|
transition:
|
|
transform 0.5s ease-out,
|
|
opacity 0.5s linear;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
text-carousel > * {
|
|
font-size: 1.15rem;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.92);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes lineGrow {
|
|
from {
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
width: 6rem;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|