AI Hackathon Landing Page

sites/labs/src/components/AuroraBackground.astro

@@ -0,0 +1,53 @@
+---
+
+---
+
+<div class="aurora-container">
+	<div class="aurora-blob emerald-one"></div>
+	<div class="aurora-blob emerald-two"></div>
+</div>
+
+<style>
+	.aurora-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 0;
+		filter: blur(120px);
+		opacity: 0.1;
+		pointer-events: none;
+	}
+
+	.aurora-blob {
+		position: absolute;
+		width: 200px;
+		height: 200px;
+		border-radius: 40%;
+		mix-blend-mode: screen;
+	}
+
+	.emerald-one {
+		background: #10b981;
+		top: 10%;
+		left: 20%;
+		animation: drift 18s infinite alternate;
+	}
+
+	.emerald-two {
+		background: #059669;
+		bottom: 15%;
+		right: 25%;
+		animation: drift 25s infinite alternate-reverse;
+	}
+
+	@keyframes drift {
+		0% {
+			transform: translate(0, 0) scale(1);
+		}
+		100% {
+			transform: translate(60px, 40px) scale(1.1);
+		}
+	}
+</style>

sites/labs/src/components/Counter.astro

@@ -0,0 +1,134 @@
+---
+
+---
+
+<div
+	id="countdown"
+	class="flex gap-6 justify-center items-center my-8 text-white font-mono"
+>
+	<div class="countdown-unit">
+		<span id="days" class="countdown-number">00</span>
+		<p class="countdown-label">Days</p>
+	</div>
+	<div class="countdown-separator">:</div>
+	<div class="countdown-unit">
+		<span id="hours" class="countdown-number">00</span>
+		<p class="countdown-label">Hours</p>
+	</div>
+	<div class="countdown-separator">:</div>
+	<div class="countdown-unit">
+		<span id="minutes" class="countdown-number">00</span>
+		<p class="countdown-label">Min</p>
+	</div>
+	<div class="countdown-separator">:</div>
+	<div class="countdown-unit">
+		<span id="seconds" class="countdown-number">00</span>
+		<p class="countdown-label">Sec</p>
+	</div>
+</div>
+
+<style>
+	.countdown-unit {
+		text-align: center;
+		background: transparent;
+		border: 1px solid rgba(16, 185, 129, 0.3);
+		border-radius: 12px;
+		padding: 16px 20px;
+		min-width: 100px;
+		transition: all 0.3s ease;
+	}
+
+	.countdown-unit:hover {
+		border-color: rgba(16, 185, 129, 0.5);
+		box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
+	}
+
+	.countdown-number {
+		display: block;
+		font-size: 3rem;
+		font-weight: bold;
+		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+		line-height: 1;
+		margin-bottom: 8px;
+	}
+
+	.countdown-label {
+		color: rgba(255, 255, 255, 0.5);
+		font-size: 0.75rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		font-weight: 500;
+	}
+
+	.countdown-separator {
+		font-size: 2.5rem;
+		color: rgba(16, 185, 129, 0.4);
+		font-weight: bold;
+		align-self: center;
+		margin-bottom: 28px;
+	}
+
+	@media (max-width: 768px) {
+		.countdown-unit {
+			min-width: 70px;
+			padding: 12px 16px;
+		}
+
+		.countdown-number {
+			font-size: 2rem;
+		}
+
+		.countdown-separator {
+			font-size: 1.5rem;
+			margin-bottom: 20px;
+		}
+
+		#countdown {
+			gap: 12px;
+		}
+	}
+</style>
+
+<script>
+	const target = new Date("2026-05-02T12:00:00").getTime();
+
+	function update() {
+		const now = Date.now();
+		const diff = target - now;
+
+		const countdownEl = document.getElementById("countdown");
+		if (!countdownEl) return;
+
+		if (diff <= 0) {
+			countdownEl.innerHTML =
+				'<span class="text-emerald-400 text-2xl font-bold">The jam has started! 🚀</span>';
+			return;
+		}
+
+		const daysEl = document.getElementById("days");
+		const hoursEl = document.getElementById("hours");
+		const minutesEl = document.getElementById("minutes");
+		const secondsEl = document.getElementById("seconds");
+
+		if (daysEl)
+			daysEl.textContent = String(Math.floor(diff / 86400000)).padStart(2, "0");
+		if (hoursEl)
+			hoursEl.textContent = String(
+				Math.floor((diff % 86400000) / 3600000)
+			).padStart(2, "0");
+		if (minutesEl)
+			minutesEl.textContent = String(
+				Math.floor((diff % 3600000) / 60000)
+			).padStart(2, "0");
+		if (secondsEl)
+			secondsEl.textContent = String(
+				Math.floor((diff % 60000) / 1000)
+			).padStart(2, "0");
+	}
+
+	update();
+	setInterval(update, 1000);
+</script>

sites/labs/src/pages/AI-hackathon.astro

@@ -0,0 +1,140 @@
+---
+import Shell from "@leaningtech/astro-theme/layouts/Shell.astro";
+import Footer from "@leaningtech/astro-theme/components/Footer.astro";
+import AuroraBackground from "../components/AuroraBackground.astro";
+import Counter from "../components/Counter.astro";
+---
+
+<Shell>
+	<section class="relative w-full h-auto pt-8 bg-[#050b0a] overflow-hidden">
+		<AuroraBackground />
+
+		<!-- Hero -->
+		<div class="relative z-10 py-32">
+			<div class="items-center py-2">
+				{
+					/*
+				<Image
+					src={BPLogo}
+					alt="BrowserPod Logo"
+					class="w-40 mx-auto animate-float"
+				/>
+				*/
+				}
+				<!-- Placeholder for the logo -->
+				<div class="w-40 h-40 mx-auto" aria-hidden="true"></div>
+			</div>
+			<div class="">
+				<h1
+					class="font-mono text-5xl text-center text-wrap text-balance mb-5 bg-gradient-to-r from-emerald-400 to-green-500 text-transparent bg-clip-text font-bold"
+				>
+					AI in the Box
+				</h1>
+				<p class="text-white/80 text-center">
+					Where generative AI meets the browser sandbox
+				</p>
+				<p class="text-emerald-400 text-center font-bold">2 May - 3 May 2026</p>
+				<p class="text-white text-center font-thin">
+					📍EC Stoner Building, Leeds
+				</p>
+
+				<!-- Countdown Timer -->
+				<Counter />
+
+				<!-- Call to Action Buttons -->
+				<div class="flex gap-4 justify-center my-8">
+					<a
+						href="https://forms.gle/ECGyMj8xzjgWQADaA"
+						class="custom-button primary-button"
+					>
+						<span>Register</span>
+						<svg
+							class="button-icon"
+							xmlns="http://www.w3.org/2000/svg"
+							width="20"
+							height="20"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<line x1="12" y1="5" x2="12" y2="19"></line>
+							<line x1="5" y1="12" x2="19" y2="12"></line>
+						</svg>
+					</a>
+					<a
+						href="https://browserpod.io/docs/overview"
+						class="custom-button secondary-button"
+					>
+						<span>BrowserPod docs</span>
+					</a>
+				</div>
+			</div>
+		</div>
+	</section>
+</Shell>
+
+<div class="relative z-20">
+	<Footer />
+</div>
+
+<style>
+	@keyframes float {
+		0%,
+		100% {
+			transform: translateY(0px);
+		}
+		50% {
+			transform: translateY(-15px);
+		}
+	}
+
+	.animate-float {
+		animation: float 4s ease-in-out infinite;
+	}
+
+	/* Button Styling */
+	.custom-button {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		padding: 12px 24px;
+		border-radius: 8px;
+		font-family: ui-monospace, monospace;
+		font-weight: 600;
+		font-size: 0.95rem;
+		text-decoration: none;
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
+
+	.primary-button {
+		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+		color: white;
+		border: none;
+		box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+	}
+
+	.primary-button:hover {
+		box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
+		transform: translateY(-1px);
+	}
+
+	.secondary-button {
+		background: transparent;
+		color: #10b981;
+		border: 1px solid rgba(16, 185, 129, 0.5);
+	}
+
+	.secondary-button:hover {
+		background: rgba(16, 185, 129, 0.1);
+		border-color: #10b981;
+	}
+
+	.button-icon {
+		width: 18px;
+		height: 18px;
+	}
+</style>