{{template "base/head" .}}
<div role="main" aria-label="{{ctx.Locale.Tr "home_title"}}" class="page-content home prs">
	<div class="prs-wrap">
		<div class="prs-strip">
			<section class="prs-panel prs-scene">
				<span class="prs-caption">Meanwhile, on Planet Renox&hellip;</span>
				<div class="prs-sticker">
					<div class="prs-die"><img src="{{AssetUrlPrefix}}/img/logo.svg?v=3" width="260" height="260" alt="{{ctx.Locale.Tr "logo"}}"></div>
				</div>
				<span class="prs-burst" aria-hidden="true"><b>PUSH!</b></span>
			</section>
			<section class="prs-panel prs-cover">
				<h1 class="prs-title"><span class="prs-holo">Planet Renox</span> <span class="prs-tag">Source</span></h1>
				<p class="prs-bubble">Welcome aboard! Every project on the planet lives right here.<svg class="prs-tail" viewBox="0 0 32 26" aria-hidden="true"><path d="M32 3 1 22l31-5"/></svg></p>
				<div class="prs-actions">
					<a class="prs-btn prs-go" href="{{AppSubUrl}}/explore/repos">{{svg "octicon-telescope" 18}}{{ctx.Locale.Tr "explore_title"}}</a>
					{{if .IsSigned}}
						<a class="prs-btn" href="{{AppSubUrl}}/">{{svg "octicon-home" 18}}{{ctx.Locale.Tr "dashboard"}}</a>
					{{else}}
						<a class="prs-btn" href="{{AppSubUrl}}/user/login">{{svg "octicon-sign-in" 18}}{{ctx.Locale.Tr "sign_in"}}</a>
					{{end}}
				</div>
			</section>
		</div>
		<nav class="prs-strip prs-row">
			<a class="prs-panel prs-mini" href="{{AppSubUrl}}/explore/repos"><i>{{svg "octicon-repo" 26}}</i><b>{{ctx.Locale.Tr "explore.repos"}}</b><small>Panel 2 &rarr;</small></a>
			<a class="prs-panel prs-mini" href="{{AppSubUrl}}/explore/organizations"><i>{{svg "octicon-organization" 26}}</i><b>{{ctx.Locale.Tr "explore.organizations"}}</b><small>Panel 3 &rarr;</small></a>
			<a class="prs-panel prs-mini" href="{{AppSubUrl}}/explore/users"><i>{{svg "octicon-people" 26}}</i><b>{{ctx.Locale.Tr "explore.users"}}</b><small>Panel 4 &rarr;</small></a>
		</nav>
	</div>
</div>

<style>
	@font-face {
		font-family: "Bangers";
		src: url("{{AssetUrlPrefix}}/fonts/bangers.woff2") format("woff2");
		font-display: swap;
	}

	.prs {
		--ink: #0b2231;
		--navy: #194756;
		--teal: #489489;
		--mint: #74d7c2;
		--paper: #fbf8ef;
		--pop: #ffe27a;
		--holo: linear-gradient(115deg, #ff9ad5, #ffe98a 20%, #9dfcd8 40%, #8ecbff 60%, #c7a2ff 80%, #ff9ad5);
		--comic: "Bangers", Impact, "Arial Black", sans-serif;
		position: relative;
		isolation: isolate;
		overflow: hidden;
		padding: 40px 16px 80px !important;
		color: var(--ink);
		background:
			repeating-linear-gradient(-45deg, rgb(11 34 49 / .06) 0 2px, transparent 2px 16px),
			linear-gradient(160deg, #f6f1e4, #e9f5f0 55%, #f3ecf8);
	}

	/* holo foil band slashing across the page */
	.prs::before {
		content: "";
		position: absolute;
		z-index: -1;
		left: -20%;
		right: -20%;
		top: 38%;
		height: 240px;
		transform: rotate(-12deg);
		background: repeating-linear-gradient(45deg, rgb(255 255 255 / .5) 0 3px, transparent 3px 12px), var(--holo);
		background-size: auto, 200% 100%;
		opacity: .45;
	}

	/* ben-day dots fading in from the corners */
	.prs::after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		background: radial-gradient(circle, rgb(72 148 137 / .35) 1.6px, transparent 1.8px) 0 0 / 13px 13px;
		mask-image: radial-gradient(circle at 0 0, #000, transparent 38%), radial-gradient(circle at 100% 100%, #000, transparent 42%);
	}

	.full.height:has(.prs) { display: flex; flex-direction: column; padding-bottom: 0; }
	.prs { flex: 1; }
	.prs a, .prs a:hover { color: inherit; text-decoration: none; }

	.prs-wrap {
		max-width: 1080px;
		margin: 0 auto;
		display: grid;
		gap: 28px;
	}

	.prs-strip {
		display: grid;
		grid-template-columns: 1fr 1.25fr;
		gap: 24px;
	}

	.prs-panel {
		position: relative;
		overflow: hidden;
		background: var(--paper);
		border: 3px solid var(--ink);
		box-shadow: 8px 8px 0 var(--ink);
	}

	/* panel A: the scene */
	.prs-scene {
		display: grid;
		place-items: center;
		min-height: 440px;
		transform: rotate(-1deg);
		background:
			radial-gradient(circle at 50% 54%, transparent 0 25%, var(--paper) 72%),
			repeating-conic-gradient(from 0deg at 50% 54%, rgb(116 215 194 / .55) 0 5deg, transparent 5deg 13deg),
			var(--paper);
	}

	.prs-caption {
		position: absolute;
		top: 14px;
		left: 14px;
		z-index: 2;
		padding: 6px 12px;
		background: var(--pop);
		border: 3px solid var(--ink);
		box-shadow: 3px 3px 0 var(--ink);
		font: 800 .8rem/1.2 system-ui, sans-serif;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	.prs-sticker {
		position: relative;
		width: min(300px, 64vw);
		aspect-ratio: 1;
		padding: 13px;
		border-radius: 50%;
		border: 3px solid var(--ink);
		background: var(--holo);
		background-size: 200% 200%;
		box-shadow: 10px 12px 0 rgb(11 34 49 / .9);
		transform: rotate(-7deg);
		transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
	}

	.prs-sticker:hover { transform: rotate(3deg) scale(1.04); }

	.prs-die {
		height: 100%;
		border-radius: 50%;
		border: 3px solid var(--ink);
		background: #fff;
		overflow: hidden;
	}

	.prs-die img {
		display: block;
		width: 100%;
		height: 100%;
		transform: scale(1.12);
	}

	/* foil sheen sweeping across the sticker */
	.prs-sticker::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		pointer-events: none;
		background:
			linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .85) 47%, transparent 56%),
			repeating-linear-gradient(135deg, rgb(255 255 255 / .18) 0 2px, transparent 2px 7px),
			var(--holo);
		background-size: 300% 100%, auto, 200% 200%;
		background-position: 120% 0, 0 0, 0 0;
		mix-blend-mode: soft-light;
		opacity: .55;
	}

	.prs-burst {
		position: absolute;
		right: 6%;
		bottom: 7%;
		width: 132px;
		aspect-ratio: 1;
		display: grid;
		place-items: center;
		background: var(--ink);
		transform: rotate(10deg);
	}

	.prs-burst, .prs-burst::before {
		clip-path: polygon(50% 0, 60% 20%, 82% 7%, 79% 31%, 100% 36%, 83% 52%, 97% 72%, 74% 73%, 72% 97%, 55% 81%, 38% 100%, 33% 78%, 10% 88%, 16% 64%, 0 52%, 17% 39%, 5% 17%, 28% 21%, 33% 0);
	}

	.prs-burst::before {
		content: "";
		position: absolute;
		inset: 7px;
		background: var(--pop);
	}

	.prs-burst b {
		position: relative;
		font: 400 1.9rem/1 var(--comic);
		letter-spacing: .04em;
		color: #ff4fa3;
		-webkit-text-stroke: 1.5px var(--ink);
		filter: drop-shadow(2px 2px 0 var(--ink));
	}

	/* panel B: the cover */
	.prs-cover {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 22px;
		padding: 48px 44px;
		transform: rotate(.6deg);
		background:
			linear-gradient(to bottom right, transparent 70%, rgb(116 215 194 / .22)),
			repeating-linear-gradient(135deg, rgb(25 71 86 / .05) 0 1px, transparent 1px 9px),
			var(--paper);
	}

	/* holo foil corner */
	.prs-cover::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 120px;
		height: 120px;
		clip-path: polygon(0 0, 100% 0, 100% 100%);
		background: repeating-linear-gradient(45deg, rgb(255 255 255 / .45) 0 2px, transparent 2px 8px), var(--holo);
		background-size: auto, 200% 200%;
		border-left: 3px solid var(--ink);
	}

	.prs-title.prs-title {
		margin: 0;
		font: 400 clamp(3.2rem, 8.5vw, 6.4rem)/.9 var(--comic);
		letter-spacing: .02em;
	}

	.prs-holo {
		display: block;
		color: transparent;
		background: var(--holo);
		background-size: 250% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-stroke: 2.5px var(--ink);
		filter: drop-shadow(5px 5px 0 var(--ink));
	}

	.prs-tag {
		display: inline-block;
		margin-top: 14px;
		padding: 4px 22px 2px;
		font-size: .52em;
		letter-spacing: .14em;
		color: var(--ink);
		background: repeating-linear-gradient(45deg, rgb(255 255 255 / .55) 0 3px, transparent 3px 9px), var(--holo);
		background-size: auto, 200% 100%;
		border: 3px solid var(--ink);
		border-radius: 10px;
		box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--ink), 6px 7px 0 8px var(--ink);
		transform: rotate(-4deg) translateX(10px);
	}

	.prs-bubble {
		position: relative;
		max-width: 26rem;
		margin: 6px 0 0;
		padding: 14px 20px;
		font: 700 1.05rem/1.35 system-ui, sans-serif;
		background: #fff;
		border: 3px solid var(--ink);
		border-radius: 28px;
		box-shadow: 4px 4px 0 var(--ink);
	}

	.prs-tail {
		position: absolute;
		left: -29px;
		top: calc(50% - 13px);
		width: 32px;
		height: 26px;
		fill: #fff;
		stroke: var(--ink);
		stroke-width: 3;
		stroke-linejoin: round;
	}

	.prs-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
	}

	.prs-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 11px 22px 9px;
		font: 400 1.35rem/1 var(--comic);
		letter-spacing: .07em;
		background: #fff;
		border: 3px solid var(--ink);
		border-radius: 12px;
		box-shadow: 5px 5px 0 var(--ink);
		transition: transform .12s, box-shadow .12s;
	}

	.prs-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
	.prs-btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }

	.prs-go {
		background: repeating-linear-gradient(-45deg, rgb(255 255 255 / .25) 0 3px, transparent 3px 10px), var(--mint);
	}

	/* bottom row of mini panels */
	.prs-row { grid-template-columns: repeat(3, 1fr); }

	.prs-mini {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 16px;
		padding: 20px 22px;
		transition: transform .2s, box-shadow .2s;
	}

	.prs-mini:nth-child(1) { transform: rotate(-.8deg); }
	.prs-mini:nth-child(2) { transform: rotate(.5deg); }
	.prs-mini:nth-child(3) { transform: rotate(-.4deg); }

	.prs-mini:hover {
		transform: translate(-3px, -3px) rotate(0);
		box-shadow: 11px 11px 0 var(--ink);
		background: repeating-linear-gradient(45deg, rgb(255 255 255 / .5) 0 3px, transparent 3px 10px), var(--holo);
		background-size: auto, 200% 100%;
	}

	.prs-mini::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: radial-gradient(circle, rgb(72 148 137 / .3) 1.5px, transparent 1.7px) 0 0 / 9px 9px;
		mask-image: linear-gradient(105deg, transparent 55%, #000);
	}

	.prs-mini i {
		grid-row: span 2;
		display: grid;
		place-items: center;
		width: 56px;
		height: 56px;
		border: 3px solid var(--ink);
		border-radius: 50%;
		background: var(--mint);
		box-shadow: 3px 3px 0 var(--ink);
	}

	.prs-mini b { font: 400 1.6rem/1 var(--comic); letter-spacing: .05em; }

	.prs-mini small {
		font: 800 .72rem/1 system-ui, sans-serif;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--teal);
	}

	@media (prefers-reduced-motion: no-preference) {
		.prs-holo, .prs-tag, .prs-mini:hover { animation: prs-shift 5s ease-in-out infinite alternate; }
		.prs-sticker { animation: prs-shift 7s ease-in-out infinite alternate; }
		.prs-sticker::after { animation: prs-sheen 4.5s ease-in-out infinite; }
		.prs-burst { animation: prs-pop 2.4s ease-in-out infinite; }
	}

	@keyframes prs-shift { to { background-position: 100% 100%; } }
	@keyframes prs-sheen { 0%, 20% { background-position: 120% 0, 0 0, 0 0; } 70%, 100% { background-position: -20% 0, 0 0, 100% 100%; } }
	@keyframes prs-pop { 50% { transform: rotate(4deg) scale(1.08); } }

	@media (max-width: 820px) {
		.prs { padding-top: 24px !important; }
		.prs-strip, .prs-row { grid-template-columns: 1fr; }
		.prs-scene { min-height: 380px; }
		.prs-cover { padding: 40px 24px 32px; }
		.prs-burst { width: 104px; }
		.prs-burst b { font-size: 1.5rem; }
		.prs-tail { top: -26px; left: 40px; transform: rotate(90deg); }
	}
</style>
{{template "base/footer" .}}