Spaces:
Running
Running
File size: 18,510 Bytes
012dbcd | 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 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our AI - Create Your Own Overlay & Frame for Your Channel</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero-gradient {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
}
.card-hover:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.pricing-card {
transition: all 0.3s ease;
}
.pricing-card:hover {
transform: scale(1.05);
}
.feature-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>
</head>
<body class="bg-gray-900 text-white">
<!-- Navigation -->
<nav class="bg-gray-800 px-6 py-4">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
<i class="fas fa-robot text-white text-sm"></i>
</div>
<span class="text-xl font-bold">Our AI</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-300 hover:text-white">Home</a>
<a href="#" class="text-gray-300 hover:text-white">Overlays</a>
<a href="#" class="text-gray-300 hover:text-white">Frames</a>
<a href="#" class="text-gray-300 hover:text-white">Chatbots</a>
<a href="#" class="text-gray-300 hover:text-white">Blog</a>
</div>
<button class="bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-2 rounded-full text-white font-medium hover:opacity-90">
Get Started
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient min-h-screen flex items-center justify-center px-6 relative overflow-hidden">
<div class="absolute inset-0 bg-black bg-opacity-50"></div>
<div class="relative z-10 text-center max-w-4xl mx-auto">
<h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
Create Your Own Overlay & Frame for Your Channel
</h1>
<p class="text-xl text-gray-200 mb-8 max-w-2xl mx-auto">
Unlock the power of AI to create stunning overlays and frames for your YouTube channel
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-md mx-auto">
<input type="email" placeholder="Enter your email" class="flex-1 px-4 py-3 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-500">
<button class="bg-gradient-to-r from-purple-500 to-pink-500 px-8 py-3 rounded-full text-white font-medium hover:opacity-90 whitespace-nowrap">
Get Started
</button>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20 px-6 bg-gray-800">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">Our Features</h2>
<p class="text-gray-400 text-lg">Discover what makes our AI platform unique</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-700 rounded-xl p-8 card-hover">
<div class="feature-icon w-16 h-16 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-layer-group text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Custom Overlays</h3>
<p class="text-gray-300">Create professional overlays for your streams and videos</p>
</div>
<div class="bg-gray-700 rounded-xl p-8 card-hover">
<div class="feature-icon w-16 h-16 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-border-all text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Custom Frames</h3>
<p class="text-gray-300">Design unique frames to enhance your video presentation</p>
</div>
<div class="bg-gray-700 rounded-xl p-8 card-hover">
<div class="feature-icon w-16 h-16 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-comments text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">AI Chatbots</h3>
<p class="text-gray-300">Engage your audience with intelligent chatbot interactions</p>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="py-20 px-6 bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">Simple Pricing</h2>
<p class="text-gray-400 text-lg">Choose the perfect plan for your needs</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-800 rounded-xl p-8 pricing-card">
<h3 class="text-2xl font-bold mb-4">Basic</h3>
<div class="text-4xl font-bold mb-2">$9<span class="text-lg text-gray-400">/month</span></div>
<p class="text-gray-400 mb-6">Perfect for beginners</p>
<ul class="space-y-3 mb-8">
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Basic overlays</li>
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Standard frames</li>
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Basic chatbot</li>
</ul>
<button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 py-3 rounded-full text-white font-medium hover:opacity-90">
Get Started
</button>
</div>
<div class="bg-gray-700 rounded-xl p-8 pricing-card border-2 border-purple-500">
<h3 class="text-2xl font-bold mb-4">Pro</h3>
<div class="text-4xl font-bold mb-2">$29<span class="text-lg text-gray-400">/month</span></div>
<p class="text-gray-400 mb-6">For growing creators</p>
<ul class="space-y-3 mb-8">
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Advanced overlays</li>
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Custom frames</li>
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Smart chatbot</li>
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Analytics</li>
</ul>
<button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 py-3 rounded-full text-white font-medium hover:opacity-90">
Get Started
</button>
</div>
<div class="bg-gray-800 rounded-xl p-8 pricing-card">
<h3 class="text-2xl font-bold mb-4">Enterprise</h3>
<div class="text-4xl font-bold mb-2">$99<span class="text-lg text-gray-400">/month</span></div>
<p class="text-gray-400 mb-6">For professional creators</p>
<ul class="space-y-3 mb-8">
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Premium overlays</li>
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Custom frames</li>
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>AI chatbot</li>
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Advanced analytics</li>
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-3"></i>Priority support</li>
</ul>
<button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 py-3 rounded-full text-white font-medium hover:opacity-90">
Get Started
</button>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 px-6 bg-gray-800">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">What Our Users Say</h2>
<p class="text-gray-400 text-lg">Hear from our satisfied customers</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="testimonial-card rounded-xl p-6 border border-gray-700">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-user text-white"></i>
</div>
<div>
<h4 class="font-bold">Sarah Johnson</h4>
<p class="text-gray-400 text-sm">YouTuber</p>
</div>
</div>
<p class="text-gray-300">"This platform completely transformed my YouTube channel. The overlays are stunning and easy to create!"</p>
</div>
<div class="testimonial-card rounded-xl p-6 border border-gray-700">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-user text-white"></i>
</div>
<div>
<h4 class="font-bold">Michael Chen</h4>
<p class="text-gray-400 text-sm">Streamer</p>
</div>
</div>
<p class="text-gray-300">"The AI chatbot has been a game changer for engaging with my audience during live streams."</p>
</div>
<div class="testimonial-card rounded-xl p-6 border border-gray-700">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-user text-white"></i>
</div>
<div>
<h4 class="font-bold">Emily Rodriguez</h4>
<p class="text-gray-400 text-sm">Content Creator</p>
</div>
</div>
<p class="text-gray-300">"I love how easy it is to create professional-looking frames for my videos. Highly recommend!"</p>
</div>
</div>
</div>
</section>
<!-- Blog Section -->
<section class="py-20 px-6 bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">Latest from Our Blog</h2>
<p class="text-gray-400 text-lg">Stay updated with our latest insights and tips</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<article class="bg-gray-800 rounded-xl overflow-hidden card-hover">
<div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500"></div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3">How to Create Engaging YouTube Overlays</h3>
<p class="text-gray-400 mb-4">Learn the secrets to creating overlays that keep your audience engaged and coming back for more.</p>
<a href="#" class="text-purple-400 hover:text-purple-300 font-medium">Read More →</a>
</div>
</article>
<article class="bg-gray-800 rounded-xl overflow-hidden card-hover">
<div class="h-48 bg-gradient-to-r from-blue-500 to-purple-500"></div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3">The Power of AI in Content Creation</h3>
<p class="text-gray-400 mb-4">Discover how artificial intelligence is revolutionizing the way we create and consume content.</p>
<a href="#" class="text-purple-400 hover:text-purple-300 font-medium">Read More →</a>
</div>
</article>
<article class="bg-gray-800 rounded-xl overflow-hidden card-hover">
<div class="h-48 bg-gradient-to-r from-green-500 to-blue-500"></div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3">Maximizing Your YouTube Channel Growth</h3>
<p class="text-gray-400 mb-4">Proven strategies to grow your YouTube channel and increase your subscriber base.</p>
<a href="#" class="text-purple-400 hover:text-purple-300 font-medium">Read More →</a>
</div>
</article>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 py-16 px-6">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-4 gap-8 mb-12">
<div>
<div class="flex items-center space-x-2 mb-6">
<div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
<i class="fas fa-robot text-white text-sm"></i>
</div>
<span class="text-xl font-bold">Our AI</span>
</div>
<p class="text-gray-400">Create stunning overlays and frames for your YouTube channel with the power of AI.</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Overlays</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Frames</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Chatbots</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Connect With Us</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600">
<i class="fab fa-twitter text-gray-400"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600">
<i class="fab fa-facebook text-gray-400"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600">
<i class="fab fa-instagram text-gray-400"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600">
<i class="fab fa-youtube text-gray-400"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm">© 2023 Our AI. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
</div>
</div>
<div class="mt-4 text-center">
<a href="https://huggingface.co/spaces/akhaliq/anycoder" class="text-gray-400 hover:text-white text-sm">Built with anycoder</a>
</div>
</div>
</footer>
<script>
// Simple mobile menu toggle (if needed)
document.addEventListener('DOMContentLoaded', function() {
// Add any interactive functionality here
console.log('Our AI website loaded successfully');
});
</script>
</body>
</html> |