<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <title>Snaptie</title>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center px-4">

    <div class="max-w-xl w-full bg-gray-800 rounded-lg shadow-md p-6">
        <h1 class="text-2xl font-bold text-blue-400 text-center mb-4">Snaptie – Liga duas pessoas com um toque de
            mistério.</h1>

        <p class="text-center text-lg font-medium mb-2">Dois QR codes. Duas pessoas. Uma conversa privada e anónima.</p>

        <p class="mb-4 text-sm text-gray-300 leading-relaxed">
            O Snaptie é um produto físico com dois QR codes idênticos.<br>
            Quem compra o produto oferece uma das metades a alguém que quer conhecer melhor… <strong>sem
                pressão</strong>.
        </p>

        <p class="mb-4 text-sm text-gray-300 leading-relaxed">
            Ambos os QRs ligam diretamente a um chat privado e anónimo,<br>
            onde só os dois podem conversar — <em>sem nomes, sem registos, sem julgamentos</em>.
        </p>

        <p class="text-center font-semibold text-white mb-6">Privado. Rápido. Divertido. Totalmente anónimo.</p>

        <form action="/create-room" method="POST" class="text-center">
            <button
                class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-md transition duration-200">
                🎁 Gerar sala anónima
            </button>
        </form>
    </div>

</body>


</html>
