{% extends "base.html" %}

{% block title %}Unieke Kingdom ervaring{% endblock %}

{% block description %}Nederlandse Minecraft server. Speel mee, ontdek onze community en word onderdeel van het
avontuur.{% endblock %}

{% block content %}
<section
	class="lc-hero relative flex min-h-[78vh] flex-col justify-center px-4 pb-28 pt-10 sm:px-6 sm:pt-14 lg:min-h-[82vh] lg:pb-32 lg:pt-16"
	aria-labelledby="hero-heading">
	<div
		class="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-12 lg:grid-cols-[minmax(0,1.12fr)_minmax(260px,26rem)] lg:items-center lg:gap-x-14 xl:gap-x-20">
		<div class="reveal min-w-0 text-center lg:text-left" style="transition-delay: 40ms">
			<p
				class="mb-7 text-[0.7rem] font-bold uppercase tracking-[0.32em] text-slate-400 sm:text-xs sm:tracking-[0.38em]">
				Nederlandse Kingdom Server
			</p>
			<h1 id="hero-heading"
				class="font-display text-[clamp(2.85rem,8.5vw,4.25rem)] font-extrabold leading-[1.02] tracking-tight text-white sm:text-[clamp(3.25rem,7.5vw,5rem)] lg:text-[clamp(3.5rem,5.2vw,5.75rem)]">
				<span class="lc-hero-title-line block text-balance text-white">Welkom bij</span>
				<span
					class="lc-gradient-text mt-3 block bg-gradient-to-r from-amber-200 via-primary to-fuchsia-400 bg-clip-text pb-1 text-transparent sm:mt-4">
					Valor Realms
				</span>
			</h1>
			<p
				class="mx-auto mt-9 max-w-2xl text-balance text-lg font-medium leading-relaxed text-slate-300 sm:text-xl sm:leading-relaxed md:mt-10 md:text-2xl md:leading-snug lg:mx-0 lg:max-w-2xl">
				Een moderne server met een unieke kingdom ervaring, hechte community en avontuur dat op jou wacht.
			</p>
			<div class="mt-11 flex flex-wrap items-center justify-center gap-4 sm:mt-12 md:gap-5 lg:justify-start">
				<a href="#join"
					class="lc-hero-cta-primary inline-flex min-h-[3.25rem] items-center justify-center px-11 py-3.5 text-base focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#050508] sm:min-h-[3.5rem] sm:px-12 sm:text-[1.05rem]">
					Speel nu
				</a>
				<a href="/discord"
					class="lc-hero-cta-ghost inline-flex min-h-[3.25rem] items-center justify-center px-11 py-3.5 text-base focus:outline-none focus-visible:ring-2 focus-visible:ring-white/35 focus-visible:ring-offset-2 focus-visible:ring-offset-[#050508] sm:min-h-[3.5rem] sm:px-12 sm:text-[1.05rem]"
					target="_blank" rel="noopener noreferrer">
					Join Discord
				</a>
			</div>
		</div>
		<div class="reveal flex min-w-0 justify-center lg:justify-end" style="transition-delay: 0ms">
			<div class="w-full max-w-md lg:max-w-none">
				<div class="lc-hero-card-outer mx-auto lg:ml-auto lg:mr-0">
					<figure class="lc-hero-card-inner">
						<img src="{{ url_for('static', filename='assets/hero.png') }}"
							alt="Minecraft-bouw: kathedraal en kasteelachtige structuur van blokken" width="960"
							height="1280" class="lc-hero-card__img h-auto w-full" decoding="async"
							fetchpriority="high" />
					</figure>
				</div>
			</div>
		</div>
	</div>
</section>

<section
	class="border-y border-white/[0.06] bg-gradient-to-b from-transparent via-white/[0.02] to-transparent px-4 py-20 sm:px-6"
	aria-labelledby="features-heading">
	<div class="mx-auto mb-10 max-w-3xl text-center sm:mb-12">
		<h2 id="features-heading" class="font-display text-sm font-bold uppercase tracking-[0.2em] text-slate-500">
			Waarom joinen</h2>
		<p class="mt-3 font-display text-2xl font-bold text-white sm:text-3xl">Alles wat je nodig hebt op één plek</p>
	</div>

	<div class="reveal lc-feature-strip mx-auto max-w-6xl" style="transition-delay: 40ms">
		<div class="lc-feature-strip__grid">
			<article class="lc-feature-strip__card lc-feature-strip__card-bg">
				<div class="lc-feature-strip__bg" aria-hidden="true">
					<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&amp;fit=crop&amp;w=900&amp;q=80"
						alt="" width="900" height="600" loading="eager" decoding="async" />
				</div>
				<div class="lc-feature-strip__dim" aria-hidden="true"></div>
				<div class="lc-feature-strip__inner">
					<p class="lc-feature-strip__sub">Uniek concept</p>
					<p class="lc-feature-strip__title">
						<span class="lc-feature-strip__title-line">Nieuwe</span>
						<span class="lc-feature-strip__title-line">ervaring</span>
					</p>
				</div>
			</article>
			<article class="lc-feature-strip__card lc-feature-strip__card-bg">
				<div class="lc-feature-strip__bg" aria-hidden="true">
					<img src="https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&amp;fit=crop&amp;w=900&amp;q=80"
						alt="" width="900" height="600" loading="lazy" decoding="async" />
				</div>
				<div class="lc-feature-strip__dim" aria-hidden="true"></div>
				<div class="lc-feature-strip__inner">
					<p class="lc-feature-strip__sub">Nederlandse community</p>
					<p class="lc-feature-strip__title">
						<span class="lc-feature-strip__title-line">Hechte</span>
						<span class="lc-feature-strip__title-line">sfeer</span>
					</p>
				</div>
			</article>
			<article class="lc-feature-strip__card lc-feature-strip__card-bg">
				<div class="lc-feature-strip__bg" aria-hidden="true">
					<img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&amp;fit=crop&amp;w=900&amp;q=80"
						alt="" width="900" height="600" loading="lazy" decoding="async" />
				</div>
				<div class="lc-feature-strip__dim" aria-hidden="true"></div>
				<div class="lc-feature-strip__inner">
					<p class="lc-feature-strip__sub">Regels &amp; support</p>
					<p class="lc-feature-strip__title">
						<span class="lc-feature-strip__title-line">Iedereen is</span>
						<span class="lc-feature-strip__title-line">welkom</span>
					</p>
				</div>
			</article>
			<article class="lc-feature-strip__card lc-feature-strip__card-bg">
				<div class="lc-feature-strip__bg" aria-hidden="true">
					<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&amp;fit=crop&amp;w=900&amp;q=80"
						alt="" width="900" height="600" loading="lazy" decoding="async" />
				</div>
				<div class="lc-feature-strip__dim" aria-hidden="true"></div>
				<div class="lc-feature-strip__inner">
					<p class="lc-feature-strip__sub">Discord &amp; events</p>
					<p class="lc-feature-strip__title">
						<span class="lc-feature-strip__title-line">Altijd iets</span>
						<span class="lc-feature-strip__title-line">te doen</span>
					</p>
				</div>
			</article>
		</div>
	</div>
</section>

<section class="px-4 py-24 sm:px-6">
	<div class="reveal mx-auto max-w-3xl text-center">
		<h2 class="font-display text-2xl font-bold text-white sm:text-3xl">Klaar om te joinen?</h2>
		<p class="mt-4 text-slate-400">Ga naar het blok hieronder: kopieer het serveradres of open Discord in één klik.
		</p>
		<a href="#join"
			class="mt-10 inline-flex items-center gap-2 text-sm font-bold text-fuchsia-400 transition hover:text-amber-300">
			<span>Naar server &amp; Discord</span>
			<span aria-hidden="true">→</span>
		</a>
	</div>
</section>
{% endblock %}