dgallegos's picture
The spec mentioned to use react? What happened?
6787be5 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Void Explorer</title>
<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.globe.min.js"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="min-h-screen flex flex-col bg-gray-900 text-white">
<custom-navbar></custom-navbar>
<main id="vanta-bg" class="flex-grow flex items-center justify-center p-6">
<div class="max-w-4xl mx-auto text-center backdrop-blur-sm bg-black/30 p-8 rounded-xl">
<h1 class="text-5xl font-bold mb-6 bg-gradient-to-r from-purple-500 via-pink-500 to-indigo-500 bg-clip-text text-transparent">
Colorful Void Explorer
</h1>
<p class="text-xl mb-8">
Journey through an undefined cosmos of colors and imagination
</p>
<div class="flex gap-4 justify-center">
<a href="#explore" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-full font-medium hover:opacity-90 transition">
Explore Now
</a>
<a href="#learn" class="px-6 py-3 border border-purple-400 rounded-full font-medium hover:bg-purple-900/30 transition">
Learn More
</a>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="script.js"></script>
<script>
feather.replace();
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x8040ff,
backgroundColor: 0x0
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>