edrispapi/vibe-coding-ai-pixel-forge-studio
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CodeVortex | AI-Powered Game Creation</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 primary: '#e63946',18 secondary: '#a4161a',19 dark: '#1e1e1e',20 light: '#f1faee'21 }22 }23 }24 }25 </script>26</head>27<body class="bg-dark text-light font-sans min-h-screen">28 <custom-navbar></custom-navbar>29 30 <main class="container mx-auto px-4 py-12">31 <!-- Hero Section -->32 <section class="flex flex-col lg:flex-row items-center justify-between gap-12 mb-24">33 <div class="lg:w-1/2 space-y-8">34 <h1 class="text-5xl font-bold leading-tight">35 <span class="text-primary">Forge</span> Your Game Dreams Into Reality36 </h1>37 <p class="text-xl text-gray-300">38 The ultimate AI-powered platform for creating, sharing, and playing games. No coding experience required!39 </p>40 <div class="flex flex-col sm:flex-row gap-4">41 <a href="/signup" class="bg-primary hover:bg-secondary text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 text-center">42 Start Creating Free43 </a>44 <a href="#features" class="border border-primary text-primary hover:bg-primary hover:text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 text-center">45 Explore Features46 </a>47 </div>48 </div>49 <div class="lg:w-1/2 relative">50 <div class="relative z-10">51 <img src="http://static.photos/technology/1024x576/42" alt="Game creation interface" class="rounded-xl shadow-2xl border-2 border-primary">52 </div>53 <div class="absolute -inset-4 bg-primary/20 rounded-xl blur-xl z-0"></div>54 </div>55 </section>56 57 <!-- Features Section -->58 <section id="features" class="mb-24">59 <h2 class="text-3xl font-bold text-center mb-12">Powerful <span class="text-primary">Features</span></h2>60 <div class="grid md:grid-cols-3 gap-8">61 <div class="bg-dark-800 p-6 rounded-xl border border-gray-800 hover:border-primary transition-all duration-300">62 <div class="text-primary mb-4">63 <i data-feather="cpu" class="w-10 h-10"></i>64 </div>65 <h3 class="text-xl font-bold mb-2">AI-Assisted Coding</h3>66 <p class="text-gray-300">Our AI helps you write code with intelligent suggestions and auto-completion.</p>67 </div>68 <div class="bg-dark-800 p-6 rounded-xl border border-gray-800 hover:border-primary transition-all duration-300">69 <div class="text-primary mb-4">70 <i data-feather="users" class="w-10 h-10"></i>71 </div>72 <h3 class="text-xl font-bold mb-2">Real-Time Collaboration</h3>73 <p class="text-gray-300">Work with friends or team members in real-time on the same project.</p>74 </div>75 <div class="bg-dark-800 p-6 rounded-xl border border-gray-800 hover:border-primary transition-all duration-300">76 <div class="text-primary mb-4">77 <i data-feather="cloud" class="w-10 h-10"></i>78 </div>79 <h3 class="text-xl font-bold mb-2">Instant Publishing</h3>80 <p class="text-gray-300">Publish your games with one click and share them with the world.</p>81 </div>82 </div>83 </section>84 85 <!-- Trending Games -->86 <section class="mb-24">87 <div class="flex justify-between items-center mb-8">88 <h2 class="text-3xl font-bold">Trending <span class="text-primary">Games</span></h2>89 <a href="/games" class="text-primary hover:underline flex items-center gap-2">90 View All <i data-feather="arrow-right" class="w-4 h-4"></i>91 </a>92 </div>93 <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">94 <!-- Game Card 1 -->95 <div class="bg-dark-800 rounded-xl overflow-hidden border border-gray-800 hover:border-primary transition-all duration-300 group">96 <div class="relative overflow-hidden h-48">97 <img src="http://static.photos/gaming/640x360/1" alt="Game thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">98 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>99 <div class="absolute bottom-4 left-4 flex items-center gap-2">100 <div class="bg-primary text-white px-2 py-1 rounded text-xs font-bold">4.8 ★</div>101 </div>102 </div>103 <div class="p-4">104 <h3 class="font-bold text-lg mb-1">Space Odyssey</h3>105 <p class="text-gray-400 text-sm mb-3">Epic space adventure</p>106 <div class="flex justify-between items-center">107 <span class="text-xs text-gray-500">by QuantumDev</span>108 <button class="text-primary hover:text-secondary text-sm font-medium flex items-center gap-1">109 <i data-feather="play" class="w-4 h-4"></i> Play110 </button>111 </div>112 </div>113 </div>114 115 <!-- Repeat similar game cards 2-4 -->116 <div class="bg-dark-800 rounded-xl overflow-hidden border border-gray-800 hover:border-primary transition-all duration-300 group">117 <div class="relative overflow-hidden h-48">118 <img src="http://static.photos/gaming/640x360/2" alt="Game thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">119 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>120 <div class="absolute bottom-4 left-4 flex items-center gap-2">121 <div class="bg-primary text-white px-2 py-1 rounded text-xs font-bold">4.5 ★</div>122 </div>123 </div>124 <div class="p-4">125 <h3 class="font-bold text-lg mb-1">Dungeon Crawler</h3>126 <p class="text-gray-400 text-sm mb-3">Roguelike adventure</p>127 <div class="flex justify-between items-center">128 <span class="text-xs text-gray-500">by PixelMage</span>129 <button class="text-primary hover:text-secondary text-sm font-medium flex items-center gap-1">130 <i data-feather="play" class="w-4 h-4"></i> Play131 </button>132 </div>133 </div>134 </div>135 136 <div class="bg-dark-800 rounded-xl overflow-hidden border border-gray-800 hover:border-primary transition-all duration-300 group">137 <div class="relative overflow-hidden h-48">138 <img src="http://static.photos/gaming/640x360/3" alt="Game thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">139 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>140 <div class="absolute bottom-4 left-4 flex items-center gap-2">141 <div class="bg-primary text-white px-2 py-1 rounded text-xs font-bold">4.9 ★</div>142 </div>143 </div>144 <div class="p-4">145 <h3 class="font-bold text-lg mb-1">Racing Legends</h3>146 <p class="text-gray-400 text-sm mb-3">High-speed racing</p>147 <div class="flex justify-between items-center">148 <span class="text-xs text-gray-500">by SpeedDev</span>149 <button class="text-primary hover:text-secondary text-sm font-medium flex items-center gap-1">150 <i data-feather="play" class="w-4 h-4"></i> Play151 </button>152 </div>153 </div>154 </div>155 156 <div class="bg-dark-800 rounded-xl overflow-hidden border border-gray-800 hover:border-primary transition-all duration-300 group">157 <div class="relative overflow-hidden h-48">158 <img src="http://static.photos/gaming/640x360/4" alt="Game thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">159 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>160 <div class="absolute bottom-4 left-4 flex items-center gap-2">161 <div class="bg-primary text-white px-2 py-1 rounded text-xs font-bold">4.7 ★</div>162 </div>163 </div>164 <div class="p-4">165 <h3 class="font-bold text-lg mb-1">Zombie Survival</h3>166 <p class="text-gray-400 text-sm mb-3">Post-apocalyptic shooter</p>167 <div class="flex justify-between items-center">168 <span class="text-xs text-gray-500">by ApocalypseDev</span>169 <button class="text-primary hover:text-secondary text-sm font-medium flex items-center gap-1">170 <i data-feather="play" class="w-4 h-4"></i> Play171 </button>172 </div>173 </div>174 </div>175 </div>176 </section>177 178 <!-- Testimonials -->179 <section class="mb-24">180 <h2 class="text-3xl font-bold text-center mb-12">What <span class="text-primary">Creators</span> Say</h2>181 <div class="grid md:grid-cols-2 gap-8">182 <div class="bg-dark-800 p-8 rounded-xl border border-gray-800">183 <div class="flex items-center gap-4 mb-6">184 <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full">185 <div>186 <h4 class="font-bold">Alex Johnson</h4>187 <p class="text-gray-400 text-sm">Game Developer</p>188 </div>189 </div>190 <p class="text-gray-300 mb-4">"CodeVortex transformed how I create games. The AI assistance helped me build my first game in just 2 weeks!"</p>191 <div class="flex gap-1 text-primary">192 <i data-feather="star" class="w-5 h-5 fill-current"></i>193 <i data-feather="star" class="w-5 h-5 fill-current"></i>194 <i data-feather="star" class="w-5 h-5 fill-current"></i>195 <i data-feather="star" class="w-5 h-5 fill-current"></i>196 <i data-feather="star" class="w-5 h-5 fill-current"></i>197 </div>198 </div>199 <div class="bg-dark-800 p-8 rounded-xl border border-gray-800">200 <div class="flex items-center gap-4 mb-6">201 <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full">202 <div>203 <h4 class="font-bold">Sam Wilson</h4>204 <p class="text-gray-400 text-sm">Indie Developer</p>205 </div>206 </div>207 <p class="text-gray-300 mb-4">"The real-time collaboration feature is a game-changer. My team can work together seamlessly from different locations."</p>208 <div class="flex gap-1 text-primary">209 <i data-feather="star" class="w-5 h-5 fill-current"></i>210 <i data-feather="star" class="w-5 h-5 fill-current"></i>211 <i data-feather="star" class="w-5 h-5 fill-current"></i>212 <i data-feather="star" class="w-5 h-5 fill-current"></i>213 <i data-feather="star" class="w-5 h-5 fill-current"></i>214 </div>215 </div>216 </div>217 </section>218 219 <!-- CTA Section -->220 <section class="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-2xl p-8 md:p-12 text-center">221 <h2 class="text-3xl font-bold mb-4">Ready to Start Creating?</h2>222 <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">Join thousands of developers building amazing games with our AI-powered platform.</p>223 <a href="/signup" class="inline-block bg-primary hover:bg-secondary text-white font-bold py-3 px-8 rounded-lg transition-all duration-300">224 Get Started Free225 </a>226 </section>227 </main>228 229 <custom-footer></custom-footer>230 231 <script src="components/navbar.js"></script>232 <script src="components/footer.js"></script>233 <script src="script.js"></script>234 <script>235 feather.replace();236 </script>237<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>238</body>239</html>