neongrid-vr / index.html
flitrx's picture
Design a futuristic indie game database website using Tailwind CSS with AR/VR experiences. Provide detailed specifications for user experience, technical architecture, and monetization strategy.
d0f5436 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NeonGrid VR โ€“ The Future of Indie Games</title>
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>๐ŸŽฎ</text></svg>">
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
</head>
<body class="bg-gray-900 text-gray-100">
<custom-navbar></custom-navbar>
<!-- HERO -->
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
<div id="vanta-bg" class="absolute inset-0 z-0"></div>
<div class="relative z-10 text-center px-6">
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-sky-400">
NeonGrid VR
</h1>
<p class="mt-4 text-lg md:text-2xl max-w-2xl mx-auto">
Discover, play and monetize the next generation of indie AR/VR experiences.
</p>
<div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
<a href="#games" class="px-6 py-3 rounded-lg bg-orange-500 hover:bg-orange-600 text-white font-semibold transition">Explore Games</a>
<a href="#upload" class="px-6 py-3 rounded-lg bg-sky-500 hover:bg-sky-600 text-white font-semibold transition">Upload Your Game</a>
</div>
</div>
</section>
<!-- FEATURED GAMES -->
<section id="games" class="py-20 px-6 max-w-7xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-10 text-center">Featured AR/VR Indies</h2>
<div id="game-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Cards injected by JS -->
</div>
</section>
<!-- UPLOAD -->
<section id="upload" class="py-20 px-6 max-w-4xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-10 text-center">Upload Your AR/VR Game</h2>
<form id="upload-form" class="space-y-6">
<input type="text" placeholder="Game Title" required class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500" />
<textarea placeholder="Short Description" rows="3" required class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500"></textarea>
<input type="url" placeholder="WebXR or Store Link" required class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500" />
<select required class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500">
<option disabled selected>Select Category</option>
<option>AR</option>
<option>VR</option>
<option>Mixed Reality</option>
</select>
<button type="submit" class="w-full px-6 py-3 rounded-lg bg-sky-500 hover:bg-sky-600 text-white font-semibold transition">Submit</button>
</form>
</section>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace()</script>
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
</body>
</html>