<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EDUPA - Är du på? | Waitlist</title>
<!-- Tailwind CSS för styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts (Poppins för en modern, inbjudande startup-känsla) -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<!-- Phosphor Icons för snygga, moderna ikoner -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
colors: {
edupa: {
dark: '#0B0F19', // Djup midnattsblå/svart bas
primary: '#FF2A5F', // Energisk korall/rosa för Call-to-Actions
primaryHover: '#E01E4D',
card: '#1A202C'
}
}
}
}
}
</script>
<style>
/* Lite extra magi för bakgrunds-glow */
.glow-bg {
background: radial-gradient(circle at 50% 0%, rgba(255, 42, 95, 0.15) 0%, rgba(11, 15, 25, 0) 50%);
}
</style>
</head>
<body class="bg-edupa-dark text-white font-sans antialiased min-h-screen flex flex-col glow-bg">
<!-- Navigation -->
<nav class="container mx-auto px-6 py-6 flex justify-between items-center">
<div class="text-2xl font-extrabold tracking-tighter flex items-center gap-2">
<span class="text-edupa-primary">EDUPA</span>
</div>
<div class="text-sm font-medium text-gray-400 bg-edupa-card px-4 py-2 rounded-full border border-gray-800">
Beta-lansering snart
</div>
</nav>
<!-- Main Hero Section -->
<main class="flex-grow flex items-center justify-center container mx-auto px-6 py-12 lg:py-20">
<div class="max-w-3xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 text-edupa-primary text-sm font-semibold mb-6 border border-red-500/20">
<i class="ph-fill ph-map-pin"></i> Exklusiv stängd beta för Linköping / Göteborg
</div>
<h1 class="text-5xl lg:text-7xl font-extrabold leading-tight mb-6 tracking-tight">
Sluta scrolla.<br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-edupa-primary to-orange-400">Börja leva.</span>
</h1>
<p class="text-lg lg:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
Appen som byter skärmtid mot riktig tid. Saknar du en padelpartner, någon att ta en aw med, eller sällskap för en löprunda? EDUPA gör det enkelt att träffas kravlöst idag.
</p>
<!-- Sign Up Form -->
<div id="form-container" class="max-w-md mx-auto bg-edupa-card p-2 rounded-2xl border border-gray-800 shadow-2xl">
<form id="waitlist-form" class="flex flex-col sm:flex-row gap-2">
<input
type="email"
id="email-input"
placeholder="Din e-postadress"
required
class="flex-grow bg-transparent border-none text-white px-4 py-3 focus:outline-none focus:ring-0 placeholder-gray-500 rounded-xl"
>
<button
type="submit"
class="bg-edupa-primary hover:bg-edupa-primaryHover transition-colors duration-200 text-white font-semibold py-3 px-6 rounded-xl flex items-center justify-center gap-2 whitespace-nowrap"
>
Är du på? <i class="ph-bold ph-arrow-right"></i>
</button>
</form>
</div>
<!-- Success Message (Hidden by default) -->
<div id="success-message" class="hidden max-w-md mx-auto bg-green-500/10 border border-green-500/20 text-green-400 p-4 rounded-2xl flex items-center justify-center gap-2 font-medium shadow-lg">
<i class="ph-fill ph-check-circle text-xl"></i>
Tack! Du är på listan. Håll koll på inkorgen.
</div>
<p class="text-sm text-gray-500 mt-6 flex items-center justify-center gap-2">
<i class="ph-fill ph-lock-key"></i> Vi hatar spam lika mycket som du.
</p>
</div>
</main>
<!-- Features Section (Social Proof / How it works) -->
<section class="border-t border-gray-800/50 bg-edupa-dark/50 backdrop-blur-sm py-16">
<div class="container mx-auto px-6 max-w-5xl">
<h2 class="text-center text-2xl font-bold mb-12 text-gray-200">Hur fungerar det?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-edupa-card p-6 rounded-2xl border border-gray-800 hover:border-gray-700 transition-colors">
<div class="w-12 h-12 bg-edupa-primary/10 rounded-full flex items-center justify-center text-edupa-primary text-2xl mb-4">
<i class="ph-fill ph-magnifying-glass"></i>
</div>
<h3 class="text-xl font-semibold mb-2">1. Upptäck</h3>
<p class="text-gray-400 text-sm">Se vilka aktiviteter som händer i din närhet just nu. Från bio till bärs eller badminton.</p>
</div>
<!-- Feature 2 -->
<div class="bg-edupa-card p-6 rounded-2xl border border-gray-800 hover:border-gray-700 transition-colors">
<div class="w-12 h-12 bg-edupa-primary/10 rounded-full flex items-center justify-center text-edupa-primary text-2xl mb-4">
<i class="ph-fill ph-hand-pointing"></i>
</div>
<h3 class="text-xl font-semibold mb-2">2. Ansök</h3>
<p class="text-gray-400 text-sm">Hittat något kul? Klicka på "Jag är på!". Skaparen av eventet väljer vilka som får följa med.</p>
</div>
<!-- Feature 3 -->
<div class="bg-edupa-card p-6 rounded-2xl border border-gray-800 hover:border-gray-700 transition-colors">
<div class="w-12 h-12 bg-edupa-primary/10 rounded-full flex items-center justify-center text-edupa-primary text-2xl mb-4">
<i class="ph-fill ph-users-three"></i>
</div>
<h3 class="text-xl font-semibold mb-2">3. Träffas</h3>
<p class="text-gray-400 text-sm">En tillfällig chatt öppnas. Bestäm tid och plats, ses i verkligheten, och sen raderas chatten.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-8 text-center text-gray-600 text-sm border-t border-gray-800/50">
<p>© 2026 EDUPA. Alla rättigheter reserverade.</p>
</footer>
<!-- Simple Interactivity Script -->
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault(); // Förhindra att sidan laddas om
const email = document.getElementById('email-input').value;
if(email) {
// Här skulle vi normalt göra ett API-anrop till din databas/Mailchimp/Backend
// fetch('/api/waitlist', { method: 'POST', body: JSON.stringify({email}) })
// Animera bort formuläret och visa success-meddelandet
document.getElementById('form-container').classList.add('hidden');
const successMsg = document.getElementById('success-message');
successMsg.classList.remove('hidden');
// Lite snygg in-animation
successMsg.animate([
{ opacity: 0, transform: 'translateY(10px)' },
{ opacity: 1, transform: 'translateY(0)' }
], { duration: 300, fill: 'forwards', easing: 'ease-out' });
}
});
</script>
</body>
</html>