Hugging Face's logo

Spaces:
HassanStar
/
vibekid
Running

App Files Community
HassanStar commited on
Commit
c2a6104
·
verified ·
1 Parent(s): e490f6d

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +573 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vibekid
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: vibekid
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,573 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeGenius - AI-Powered Coding for Kids</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
12
+ }
13
+ .code-block {
14
+ font-family: 'Courier New', monospace;
15
+ background-color: #2d3748;
16
+ color: #f7fafc;
17
+ border-radius: 0.5rem;
18
+ padding: 1.5rem;
19
+ position: relative;
20
+ }
21
+ .floating-robot {
22
+ animation: float 6s ease-in-out infinite;
23
+ }
24
+ @keyframes float {
25
+ 0% { transform: translateY(0px); }
26
+ 50% { transform: translateY(-20px); }
27
+ 100% { transform: translateY(0px); }
28
+ }
29
+ .glow-hover:hover {
30
+ box-shadow: 0 0 15px rgba(167, 119, 227, 0.6);
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="font-sans bg-gray-50">
35
+ <!-- Navigation -->
36
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
37
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
38
+ <div class="flex justify-between h-16">
39
+ <div class="flex items-center">
40
+ <div class="flex-shrink-0 flex items-center">
41
+ <i class="fas fa-robot text-3xl text-purple-600 mr-2"></i>
42
+ <span class="text-xl font-bold text-gray-900">CodeGenius</span>
43
+ </div>
44
+ </div>
45
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
46
+ <a href="#features" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Features</a>
47
+ <a href="#courses" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Courses</a>
48
+ <a href="#testimonials" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Success Stories</a>
49
+ <a href="#pricing" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Pricing</a>
50
+ <button class="gradient-bg text-white px-4 py-2 rounded-md font-medium hover:opacity-90 transition">Start Free Trial</button>
51
+ </div>
52
+ <div class="-mr-2 flex items-center md:hidden">
53
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
54
+ <span class="sr-only">Open main menu</span>
55
+ <i class="fas fa-bars"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <!-- Hero Section -->
63
+ <section class="gradient-bg text-white">
64
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
65
+ <div class="md:flex items-center">
66
+ <div class="md:w-1/2 mb-10 md:mb-0">
67
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Unlock Your Child's Creative Potential with AI</h1>
68
+ <p class="text-xl mb-8">The next generation of builders is here. With our AI-powered platform, kids 9-13 can create anything they imagine!</p>
69
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
70
+ <button class="bg-white text-purple-600 px-6 py-3 rounded-md font-bold text-lg hover:bg-gray-100 transition">Start Free Trial</button>
71
+ <button class="border-2 border-white text-white px-6 py-3 rounded-md font-bold text-lg hover:bg-white hover:text-purple-600 transition">Watch Demo</button>
72
+ </div>
73
+ </div>
74
+ <div class="md:w-1/2 flex justify-center">
75
+ <div class="relative floating-robot">
76
+ <img src="https://cdn-icons-png.flaticon.com/512/4712/4712035.png" alt="AI Robot" class="w-64 h-64">
77
+ <div class="absolute -bottom-10 -right-10 bg-yellow-400 text-gray-900 px-4 py-2 rounded-full font-bold">
78
+ <i class="fas fa-bolt mr-2"></i>Powered by AI
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </section>
85
+
86
+ <!-- Features Section -->
87
+ <section id="features" class="py-20 bg-white">
88
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
89
+ <div class="text-center mb-16">
90
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose CodeGenius?</h2>
91
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">We're revolutionizing how kids learn to code by combining AI assistance with creative projects they love.</p>
92
+ </div>
93
+
94
+ <div class="grid md:grid-cols-3 gap-8">
95
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-xl transition">
96
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6">
97
+ <i class="fas fa-brain text-white text-2xl"></i>
98
+ </div>
99
+ <h3 class="text-xl font-bold mb-3">AI Pair Programming</h3>
100
+ <p class="text-gray-600">Our AI assistant helps kids through every step, explaining concepts and suggesting improvements in real-time.</p>
101
+ </div>
102
+
103
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-xl transition">
104
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6">
105
+ <i class="fas fa-gamepad text-white text-2xl"></i>
106
+ </div>
107
+ <h3 class="text-xl font-bold mb-3">Learn Through Play</h3>
108
+ <p class="text-gray-600">Kids build games, animations, and interactive stories while learning fundamental coding concepts.</p>
109
+ </div>
110
+
111
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-xl transition">
112
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6">
113
+ <i class="fas fa-rocket text-white text-2xl"></i>
114
+ </div>
115
+ <h3 class="text-xl font-bold mb-3">Rapid Prototyping</h3>
116
+ <p class="text-gray-600">With AI assistance, kids can bring their wildest ideas to life in minutes, not days.</p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- AI Coding Demo -->
123
+ <section class="py-20 bg-gray-100">
124
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
125
+ <div class="md:flex items-center">
126
+ <div class="md:w-1/2 mb-10 md:mb-0">
127
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">See AI-Powered Coding in Action</h2>
128
+ <p class="text-gray-600 mb-6">Watch how our AI assistant helps 10-year-old Mia build her first game in just 15 minutes.</p>
129
+
130
+ <div class="code-block mb-6">
131
+ <div class="flex mb-4">
132
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
133
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
134
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
135
+ </div>
136
+ <pre class="overflow-x-auto">
137
+ <span class="text-green-400"># Mia's Space Adventure Game</span>
138
+ <span class="text-blue-400">import</span> pygame
139
+ <span class="text-blue-400">import</span> random
140
+
141
+ <span class="text-purple-400">class</span> <span class="text-yellow-400">Spaceship</span>:
142
+ <span class="text-purple-400">def</span> <span class="text-yellow-400">__init__</span>(<span class="text-green-500">self</span>):
143
+ <span class="text-green-500">self</span>.x = <span class="text-orange-400">400</span>
144
+ <span class="text-green-500">self</span>.y = <span class="text-orange-400">500</span>
145
+ <span class="text-green-500">self</span>.speed = <span class="text-orange-400">5</span>
146
+
147
+ <span class="text-purple-400">def</span> <span class="text-yellow-400">move</span>(<span class="text-green-500">self</span>, direction):
148
+ <span class="text-purple-400">if</span> direction == <span class="text-blue-400">"left"</span>:
149
+ <span class="text-green-500">self</span>.x -= <span class="text-green-500">self</span>.speed
150
+ <span class="text-purple-400">elif</span> direction == <span class="text-blue-400">"right"</span>:
151
+ <span class="text-green-500">self</span>.x += <span class="text-green-500">self</span>.speed</pre>
152
+ </div>
153
+ <button class="gradient-bg text-white px-6 py-3 rounded-md font-bold hover:opacity-90 transition">
154
+ <i class="fas fa-play mr-2"></i>Try Live Demo
155
+ </button>
156
+ </div>
157
+
158
+ <div class="md:w-1/2 pl-10">
159
+ <div class="bg-white p-6 rounded-xl shadow-lg">
160
+ <div class="flex items-center mb-4">
161
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold">AI</div>
162
+ <div class="ml-4 bg-gray-100 p-3 rounded-lg">
163
+ <p class="text-sm">Great start Mia! Would you like to add asteroids for your spaceship to avoid? I can help you with that!</p>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="flex items-center mb-4">
168
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold">M</div>
169
+ <div class="ml-4 bg-purple-100 p-3 rounded-lg">
170
+ <p class="text-sm">Yes please! And can we make them different colors?</p>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="flex items-center">
175
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold">AI</div>
176
+ <div class="ml-4 bg-gray-100 p-3 rounded-lg">
177
+ <p class="text-sm">Absolutely! Here's how we can create colorful asteroids...</p>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="mt-6 border-t pt-4">
182
+ <div class="relative">
183
+ <input type="text" placeholder="Ask the AI assistant anything..." class="w-full border rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500">
184
+ <i class="fas fa-paper-plane absolute right-3 top-3 text-purple-500"></i>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </section>
192
+
193
+ <!-- Courses Section -->
194
+ <section id="courses" class="py-20 bg-white">
195
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
196
+ <div class="text-center mb-16">
197
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Our AI-Powered Courses</h2>
198
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Designed specifically for kids aged 9-13 to learn at their own pace with AI guidance.</p>
199
+ </div>
200
+
201
+ <div class="grid md:grid-cols-3 gap-8">
202
+ <div class="border rounded-xl overflow-hidden hover:shadow-lg transition glow-hover">
203
+ <div class="gradient-bg p-6 text-white">
204
+ <h3 class="text-xl font-bold mb-2">Adventure in Python</h3>
205
+ <p class="opacity-90">Create games while learning Python basics</p>
206
+ <div class="mt-4 flex items-center">
207
+ <div class="flex items-center">
208
+ <i class="fas fa-star text-yellow-300 mr-1"></i>
209
+ <span>4.9</span>
210
+ </div>
211
+ <span class="mx-2">•</span>
212
+ <span>Ages 9+</span>
213
+ </div>
214
+ </div>
215
+ <div class="p-6">
216
+ <ul class="space-y-3 mb-6">
217
+ <li class="flex items-center">
218
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
219
+ <span>20 interactive lessons</span>
220
+ </li>
221
+ <li class="flex items-center">
222
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
223
+ <span>5 game projects</span>
224
+ </li>
225
+ <li class="flex items-center">
226
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
227
+ <span>AI debugging assistant</span>
228
+ </li>
229
+ </ul>
230
+ <button class="w-full gradient-bg text-white py-2 rounded-md font-medium">Start Learning</button>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="border rounded-xl overflow-hidden hover:shadow-lg transition glow-hover">
235
+ <div class="gradient-bg p-6 text-white">
236
+ <h3 class="text-xl font-bold mb-2">Web Wizardry</h3>
237
+ <p class="opacity-90">Build interactive websites with HTML/CSS/JS</p>
238
+ <div class="mt-4 flex items-center">
239
+ <div class="flex items-center">
240
+ <i class="fas fa-star text-yellow-300 mr-1"></i>
241
+ <span>4.8</span>
242
+ </div>
243
+ <span class="mx-2">•</span>
244
+ <span>Ages 10+</span>
245
+ </div>
246
+ </div>
247
+ <div class="p-6">
248
+ <ul class="space-y-3 mb-6">
249
+ <li class="flex items-center">
250
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
251
+ <span>15 creative projects</span>
252
+ </li>
253
+ <li class="flex items-center">
254
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
255
+ <span>AI design suggestions</span>
256
+ </li>
257
+ <li class="flex items-center">
258
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
259
+ <span>Publish your sites online</span>
260
+ </li>
261
+ </ul>
262
+ <button class="w-full gradient-bg text-white py-2 rounded-md font-medium">Start Learning</button>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="border rounded-xl overflow-hidden hover:shadow-lg transition glow-hover">
267
+ <div class="gradient-bg p-6 text-white">
268
+ <h3 class="text-xl font-bold mb-2">AI Creators Lab</h3>
269
+ <p class="opacity-90">Build your own AI apps and chatbots</p>
270
+ <div class="mt-4 flex items-center">
271
+ <div class="flex items-center">
272
+ <i class="fas fa-star text-yellow-300 mr-1"></i>
273
+ <span>5.0</span>
274
+ </div>
275
+ <span class="mx-2">•</span>
276
+ <span>Ages 12+</span>
277
+ </div>
278
+ </div>
279
+ <div class="p-6">
280
+ <ul class="space-y-3 mb-6">
281
+ <li class="flex items-center">
282
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
283
+ <span>10 AI experiments</span>
284
+ </li>
285
+ <li class="flex items-center">
286
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
287
+ <span>Train your own models</span>
288
+ </li>
289
+ <li class="flex items-center">
290
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
291
+ <span>Ethics and safety lessons</span>
292
+ </li>
293
+ </ul>
294
+ <button class="w-full gradient-bg text-white py-2 rounded-md font-medium">Start Learning</button>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </section>
300
+
301
+ <!-- Testimonials -->
302
+ <section id="testimonials" class="py-20 bg-gray-100">
303
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
304
+ <div class="text-center mb-16">
305
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Young Builders Say</h2>
306
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from the next generation of creators who are building amazing things with AI.</p>
307
+ </div>
308
+
309
+ <div class="grid md:grid-cols-2 gap-8">
310
+ <div class="bg-white p-8 rounded-xl shadow-sm">
311
+ <div class="flex items-center mb-6">
312
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 text-2xl font-bold">L</div>
313
+ <div class="ml-4">
314
+ <h4 class="font-bold">Liam, 11</h4>
315
+ <p class="text-gray-500">Created 3 games in 2 weeks</p>
316
+ </div>
317
+ </div>
318
+ <p class="text-gray-700 italic mb-4">"The AI helper is like having a teacher available 24/7. I built my first game in one afternoon and now all my friends want to play it!"</p>
319
+ <div class="flex">
320
+ <i class="fas fa-star text-yellow-400"></i>
321
+ <i class="fas fa-star text-yellow-400"></i>
322
+ <i class="fas fa-star text-yellow-400"></i>
323
+ <i class="fas fa-star text-yellow-400"></i>
324
+ <i class="fas fa-star text-yellow-400"></i>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="bg-white p-8 rounded-xl shadow-sm">
329
+ <div class="flex items-center mb-6">
330
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-2xl font-bold">S</div>
331
+ <div class="ml-4">
332
+ <h4 class="font-bold">Sophia, 10</h4>
333
+ <p class="text-gray-500">Published her first website</p>
334
+ </div>
335
+ </div>
336
+ <p class="text-gray-700 italic mb-4">"I made a website for my dog with pictures and animations! The AI showed me how to add a button that plays barks when you click it."</p>
337
+ <div class="flex">
338
+ <i class="fas fa-star text-yellow-400"></i>
339
+ <i class="fas fa-star text-yellow-400"></i>
340
+ <i class="fas fa-star text-yellow-400"></i>
341
+ <i class="fas fa-star text-yellow-400"></i>
342
+ <i class="fas fa-star text-yellow-400"></i>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="bg-white p-8 rounded-xl shadow-sm">
347
+ <div class="flex items-center mb-6">
348
+ <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-2xl font-bold">E</div>
349
+ <div class="ml-4">
350
+ <h4 class="font-bold">Ethan, 13</h4>
351
+ <p class="text-gray-500">Built an AI chatbot</p>
352
+ </div>
353
+ </div>
354
+ <p class="text-gray-700 italic mb-4">"I trained an AI to talk like my favorite YouTuber. It's not perfect but it's crazy that I could make this myself!"</p>
355
+ <div class="flex">
356
+ <i class="fas fa-star text-yellow-400"></i>
357
+ <i class="fas fa-star text-yellow-400"></i>
358
+ <i class="fas fa-star text-yellow-400"></i>
359
+ <i class="fas fa-star text-yellow-400"></i>
360
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="bg-white p-8 rounded-xl shadow-sm">
365
+ <div class="flex items-center mb-6">
366
+ <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 text-2xl font-bold">O</div>
367
+ <div class="ml-4">
368
+ <h4 class="font-bold">Olivia, 9</h4>
369
+ <p class="text-gray-500">Created animated stories</p>
370
+ </div>
371
+ </div>
372
+ <p class="text-gray-700 italic mb-4">"I made a cartoon where unicorns race rainbows! The AI helped me when I got stuck on the colors."</p>
373
+ <div class="flex">
374
+ <i class="fas fa-star text-yellow-400"></i>
375
+ <i class="fas fa-star text-yellow-400"></i>
376
+ <i class="fas fa-star text-yellow-400"></i>
377
+ <i class="fas fa-star text-yellow-400"></i>
378
+ <i class="fas fa-star text-yellow-400"></i>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </section>
384
+
385
+ <!-- Pricing -->
386
+ <section id="pricing" class="py-20 bg-white">
387
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
388
+ <div class="text-center mb-16">
389
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Simple, Affordable Pricing</h2>
390
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Start for free, upgrade as your child's skills grow</p>
391
+ </div>
392
+
393
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
394
+ <div class="border rounded-xl p-8 hover:shadow-lg transition">
395
+ <h3 class="text-xl font-bold mb-2">Explorer</h3>
396
+ <p class="text-gray-600 mb-6">Perfect for trying out coding</p>
397
+ <div class="mb-6">
398
+ <span class="text-4xl font-bold">$0</span>
399
+ <span class="text-gray-500">/month</span>
400
+ </div>
401
+ <ul class="space-y-3 mb-8">
402
+ <li class="flex items-center">
403
+ <i class="fas fa-check text-green-500 mr-2"></i>
404
+ <span>Basic AI assistant</span>
405
+ </li>
406
+ <li class="flex items-center">
407
+ <i class="fas fa-check text-green-500 mr-2"></i>
408
+ <span>5 beginner projects</span>
409
+ </li>
410
+ <li class="flex items-center">
411
+ <i class="fas fa-check text-green-500 mr-2"></i>
412
+ <span>Community support</span>
413
+ </li>
414
+ </ul>
415
+ <button class="w-full border border-purple-600 text-purple-600 py-2 rounded-md font-medium hover:bg-purple-50">Get Started</button>
416
+ </div>
417
+
418
+ <div class="border-2 border-purple-500 rounded-xl p-8 hover:shadow-lg transition relative">
419
+ <div class="absolute top-0 right-0 bg-purple-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div>
420
+ <h3 class="text-xl font-bold mb-2">Creator</h3>
421
+ <p class="text-gray-600 mb-6">For kids who want to build more</p>
422
+ <div class="mb-6">
423
+ <span class="text-4xl font-bold">$15</span>
424
+ <span class="text-gray-500">/month</span>
425
+ </div>
426
+ <ul class="space-y-3 mb-8">
427
+ <li class="flex items-center">
428
+ <i class="fas fa-check text-green-500 mr-2"></i>
429
+ <span>Advanced AI assistant</span>
430
+ </li>
431
+ <li class="flex items-center">
432
+ <i class="fas fa-check text-green-500 mr-2"></i>
433
+ <span>All courses & projects</span>
434
+ </li>
435
+ <li class="flex items-center">
436
+ <i class="fas fa-check text-green-500 mr-2"></i>
437
+ <span>Weekly live workshops</span>
438
+ </li>
439
+ <li class="flex items-center">
440
+ <i class="fas fa-check text-green-500 mr-2"></i>
441
+ <span>Project publishing</span>
442
+ </li>
443
+ </ul>
444
+ <button class="w-full gradient-bg text-white py-2 rounded-md font-medium hover:opacity-90">Start 7-Day Free Trial</button>
445
+ </div>
446
+
447
+ <div class="border rounded-xl p-8 hover:shadow-lg transition">
448
+ <h3 class="text-xl font-bold mb-2">Family</h3>
449
+ <p class="text-gray-600 mb-6">For siblings learning together</p>
450
+ <div class="mb-6">
451
+ <span class="text-4xl font-bold">$25</span>
452
+ <span class="text-gray-500">/month</span>
453
+ </div>
454
+ <ul class="space-y-3 mb-8">
455
+ <li class="flex items-center">
456
+ <i class="fas fa-check text-green-500 mr-2"></i>
457
+ <span>Everything in Creator</span>
458
+ </li>
459
+ <li class="flex items-center">
460
+ <i class="fas fa-check text-green-500 mr-2"></i>
461
+ <span>Up to 3 child accounts</span>
462
+ </li>
463
+ <li class="flex items-center">
464
+ <i class="fas fa-check text-green-500 mr-2"></i>
465
+ <span>Parent dashboard</span>
466
+ </li>
467
+ <li class="flex items-center">
468
+ <i class="fas fa-check text-green-500 mr-2"></i>
469
+ <span>Collaboration features</span>
470
+ </li>
471
+ </ul>
472
+ <button class="w-full border border-purple-600 text-purple-600 py-2 rounded-md font-medium hover:bg-purple-50">Choose Family</button>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </section>
477
+
478
+ <!-- CTA Section -->
479
+ <section class="gradient-bg text-white py-20">
480
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
481
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Unleash Your Child's Creativity?</h2>
482
+ <p class="text-xl mb-8">Join thousands of kids who are discovering they can build anything they imagine with AI.</p>
483
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
484
+ <button class="bg-white text-purple-600 px-8 py-4 rounded-md font-bold text-lg hover:bg-gray-100 transition">Start Free Trial</button>
485
+ <button class="border-2 border-white text-white px-8 py-4 rounded-md font-bold text-lg hover:bg-white hover:text-purple-600 transition">Talk to Our Team</button>
486
+ </div>
487
+ </div>
488
+ </section>
489
+
490
+ <!-- Footer -->
491
+ <footer class="bg-gray-900 text-white py-12">
492
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
493
+ <div class="grid md:grid-cols-4 gap-8">
494
+ <div>
495
+ <div class="flex items-center mb-4">
496
+ <i class="fas fa-robot text-3xl text-purple-400 mr-2"></i>
497
+ <span class="text-xl font-bold">CodeGenius</span>
498
+ </div>
499
+ <p class="text-gray-400">Empowering the next generation of builders with AI-powered coding education.</p>
500
+ <div class="flex space-x-4 mt-6">
501
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
502
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
503
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
504
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-tiktok"></i></a>
505
+ </div>
506
+ </div>
507
+
508
+ <div>
509
+ <h4 class="text-lg font-semibold mb-4">Courses</h4>
510
+ <ul class="space-y-2">
511
+ <li><a href="#" class="text-gray-400 hover:text-white">Adventure in Python</a></li>
512
+ <li><a href="#" class="text-gray-400 hover:text-white">Web Wizardry</a></li>
513
+ <li><a href="#" class="text-gray-400 hover:text-white">AI Creators Lab</a></li>
514
+ <li><a href="#" class="text-gray-400 hover:text-white">Game Design</a></li>
515
+ </ul>
516
+ </div>
517
+
518
+ <div>
519
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
520
+ <ul class="space-y-2">
521
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
522
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
523
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
524
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
525
+ </ul>
526
+ </div>
527
+
528
+ <div>
529
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
530
+ <ul class="space-y-2">
531
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
532
+ <li><a href="#" class="text-gray-400 hover:text-white">Parents Guide</a></li>
533
+ <li><a href="#" class="text-gray-400 hover:text-white">Safety</a></li>
534
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
535
+ </ul>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
540
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 CodeGenius. All rights reserved.</p>
541
+ <div class="flex space-x-6">
542
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
543
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
544
+ <a href="#" class="text-gray-400 hover:text-white">COPPA Compliance</a>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </footer>
549
+
550
+ <script>
551
+ // Simple animation for the code block
552
+ document.addEventListener('DOMContentLoaded', function() {
553
+ const codeBlock = document.querySelector('.code-block');
554
+ if (codeBlock) {
555
+ setTimeout(() => {
556
+ codeBlock.style.transform = 'translateY(-5px)';
557
+ codeBlock.style.boxShadow = '0 10px 25px rgba(0,0,0,0.1)';
558
+ }, 500);
559
+ }
560
+
561
+ // Smooth scrolling for anchor links
562
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
563
+ anchor.addEventListener('click', function (e) {
564
+ e.preventDefault();
565
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
566
+ behavior: 'smooth'
567
+ });
568
+ });
569
+ });
570
+ });
571
+ </script>
572
+ <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-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=HassanStar/vibekid" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
573
+ </html>
prompts.txt ADDED
File without changes