File size: 6,295 Bytes
3739684 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KickBuzz - Powered by Comet</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-white text-gray-800">
<!-- Navbar -->
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="text-2xl font-bold text-indigo-600">KickBuzz</div>
<nav class="space-x-4 hidden md:flex">
<a href="#features" class="text-gray-600 hover:text-indigo-600">Features</a>
<a href="#about" class="text-gray-600 hover:text-indigo-600">About</a>
<a href="#contact" class="text-gray-600 hover:text-indigo-600">Contact</a>
</nav>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white py-24">
<div class="max-w-3xl mx-auto text-center px-6">
<h1 class="text-4xl sm:text-5xl font-extrabold mb-6 leading-tight">
Welcome to KickBuzz, Powered by Comet
</h1>
<p class="text-lg sm:text-xl mb-8">
Organized content creation for AI-driven outlines, documentation, and dynamic responses.
</p>
<a href="#content-section" class="inline-block bg-white text-indigo-600 font-semibold py-3 px-6 rounded-lg shadow hover:bg-gray-100 transition">
Get Started
</a>
</div>
</section>
<!-- Content Section -->
<section id="content-section" class="py-16 bg-gray-50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Dynamic Content Area</h2>
<div id="dynamic-content" class="prose max-w-none">
<p class="text-center text-gray-600">Loading content...</p>
</div>
<div class="text-center mt-8">
<button onclick="loadSampleContent()" class="bg-indigo-600 text-white py-2 px-6 rounded hover:bg-indigo-700 transition">
Load Sample Content
</button>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-16 bg-white">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Features</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<div class="bg-gray-50 p-6 rounded-lg shadow hover:shadow-lg transition">
<i class="fas fa-bolt text-indigo-600 text-3xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">AI-Driven Outlines</h3>
<p class="text-gray-600">Create smart content outlines with minimal input and maximum output.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow hover:shadow-lg transition">
<i class="fas fa-book text-indigo-600 text-3xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">Dynamic Documentation</h3>
<p class="text-gray-600">Generate and update documentation on the fly with intelligent tools.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow hover:shadow-lg transition">
<i class="fas fa-cog text-indigo-600 text-3xl mb-4"></i>
<h3 class="text-xl font-semibold mb-2">Smart Templates</h3>
<p class="text-gray-600">Use adaptive templates that evolve with your content needs.</p>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 bg-indigo-50">
<div class="max-w-3xl mx-auto text-center px-6">
<h2 class="text-3xl font-bold mb-4">Stay Updated</h2>
<p class="text-gray-700 mb-6">Subscribe to our newsletter for the latest updates and insights.</p>
<form id="newsletter-form" class="flex flex-col sm:flex-row items-center justify-center gap-4">
<input type="email" required placeholder="Enter your email" class="px-4 py-3 rounded-lg w-full sm:w-auto flex-1 focus:outline-none focus:ring-2 focus:ring-indigo-400" />
<button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition">
Subscribe
</button>
</form>
<p id="newsletter-message" class="mt-4 text-sm text-green-600 hidden">Thanks for subscribing!</p>
</div>
</section>
<!-- Footer -->
<footer id="contact" class="bg-gray-800 text-white py-10">
<div class="max-w-6xl mx-auto px-6 text-center">
<p>© 2025 KickBuzz. Powered by Comet. All rights reserved.</p>
</div>
</footer>
<!-- JavaScript -->
<script>
function loadSampleContent() {
const content = `
<h3>Sample AI-Driven Outline</h3>
<ul>
<li>1. Introduction</li>
<li>2. Key Concepts</li>
<li>3. Implementation Strategies</li>
<li>4. Case Studies</li>
<li>5. Conclusion</li>
</ul>
<p>This content was dynamically generated and can be extended with your own data or AI-powered input.</p>
`;
document.getElementById('dynamic-content').innerHTML = content;
}
document.getElementById('newsletter-form').addEventListener('submit', function(e) {
e.preventDefault();
const message = document.getElementById('newsletter-message');
message.classList.remove('hidden');
message.textContent = 'Thanks for subscribing!';
this.reset();
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=Loddina/kickbuzz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |