Hugging Face's logo

Spaces:
XXXMARK
/
aiko
Running

App Files Community
XXXMARK commited on
Commit
3d4696d
·
verified ·
1 Parent(s): fea678c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +878 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aiko
3
- emoji: 🐢
4
- colorFrom: blue
5
- colorTo: green
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: aiko
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,878 @@
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>AiKo - Transformative Learning Platform</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8fafc;
15
+ scroll-behavior: smooth;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
20
+ }
21
+
22
+ .card-hover:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
25
+ }
26
+
27
+ .learning-path {
28
+ position: relative;
29
+ }
30
+
31
+ .learning-path::before {
32
+ content: '';
33
+ position: absolute;
34
+ left: 0;
35
+ top: 0;
36
+ height: 100%;
37
+ width: 4px;
38
+ background: linear-gradient(to bottom, #4f46e5, #7c3aed);
39
+ border-radius: 4px;
40
+ }
41
+
42
+ .progress-ring__circle {
43
+ transition: stroke-dashoffset 0.35s;
44
+ transform: rotate(-90deg);
45
+ transform-origin: 50% 50%;
46
+ }
47
+
48
+ .video-container {
49
+ position: relative;
50
+ padding-bottom: 56.25%;
51
+ height: 0;
52
+ overflow: hidden;
53
+ }
54
+
55
+ .video-container iframe {
56
+ position: absolute;
57
+ top: 0;
58
+ left: 0;
59
+ width: 100%;
60
+ height: 100%;
61
+ }
62
+
63
+ .floating {
64
+ animation: floating 3s ease-in-out infinite;
65
+ }
66
+
67
+ @keyframes floating {
68
+ 0% { transform: translateY(0px); }
69
+ 50% { transform: translateY(-15px); }
70
+ 100% { transform: translateY(0px); }
71
+ }
72
+ </style>
73
+ </head>
74
+ <body>
75
+ <!-- Navigation -->
76
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
77
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
78
+ <div class="flex justify-between h-16">
79
+ <div class="flex items-center">
80
+ <div class="flex-shrink-0 flex items-center">
81
+ <span class="text-2xl font-bold text-indigo-600">Ai<span class="text-gray-800">Ko</span></span>
82
+ </div>
83
+ <div class="hidden md:ml-6 md:flex md:space-x-8">
84
+ <a href="#features" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
85
+ <a href="#how-it-works" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a>
86
+ <a href="#pricing" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>
87
+ <a href="#testimonials" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Testimonials</a>
88
+ </div>
89
+ </div>
90
+ <div class="hidden md:ml-6 md:flex md:items-center">
91
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</button>
92
+ </div>
93
+ <div class="-mr-2 flex items-center md:hidden">
94
+ <button type="button" id="mobile-menu-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 focus:ring-2 focus:ring-inset focus:ring-indigo-500">
95
+ <span class="sr-only">Open main menu</span>
96
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
97
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
98
+ </svg>
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Mobile menu -->
105
+ <div id="mobile-menu" class="hidden md:hidden">
106
+ <div class="pt-2 pb-3 space-y-1">
107
+ <a href="#features" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a>
108
+ <a href="#how-it-works" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a>
109
+ <a href="#pricing" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Pricing</a>
110
+ <a href="#testimonials" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Testimonials</a>
111
+ <div class="mt-4 pl-3 pr-4">
112
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </nav>
117
+
118
+ <!-- Hero Section -->
119
+ <div class="gradient-bg text-white">
120
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
121
+ <div class="md:flex md:items-center md:justify-between">
122
+ <div class="md:w-1/2 mb-10 md:mb-0">
123
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Transform Learning with <span class="text-yellow-300">AiKo</span></h1>
124
+ <p class="text-xl mb-8">Short, interactive learning stints powered by AI to help you learn faster and retain more.</p>
125
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
126
+ <button class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold text-lg">Start Free Trial</button>
127
+ <button class="border-2 border-white text-white hover:bg-white hover:text-indigo-600 px-6 py-3 rounded-lg font-semibold text-lg">Watch Demo</button>
128
+ </div>
129
+ </div>
130
+ <div class="md:w-1/2 relative">
131
+ <div class="relative max-w-md mx-auto">
132
+ <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
133
+ <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
134
+ <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden">
135
+ <div class="video-container">
136
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
137
+ </div>
138
+ <div class="p-6">
139
+ <div class="flex items-center mb-4">
140
+ <div class="flex-shrink-0">
141
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
142
+ </div>
143
+ <div class="ml-3">
144
+ <p class="text-sm font-medium text-gray-900">Sarah Johnson</p>
145
+ <div class="flex space-x-1 text-sm text-gray-500">
146
+ <span>Completed</span>
147
+ <span>•</span>
148
+ <span>2 min ago</span>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ <h3 class="text-lg font-medium text-gray-900">Introduction to Data Visualization</h3>
153
+ <div class="mt-4 flex items-center justify-between">
154
+ <div class="flex space-x-1 text-sm text-gray-500">
155
+ <span>+25 XP</span>
156
+ <span>•</span>
157
+ <span>3/5 stars</span>
158
+ </div>
159
+ <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">View Details</button>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Stats Section -->
170
+ <div class="bg-white py-16">
171
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
172
+ <div class="lg:text-center">
173
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Trusted by learners worldwide</h2>
174
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">Learning reimagined</p>
175
+ </div>
176
+
177
+ <div class="mt-10">
178
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
179
+ <div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition duration-300">
180
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600">
181
+ <i class="fas fa-users text-xl"></i>
182
+ </div>
183
+ <div class="mt-5">
184
+ <h3 class="text-lg font-medium text-gray-900">500K+</h3>
185
+ <p class="mt-2 text-base text-gray-500">Active Learners</p>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition duration-300">
190
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
191
+ <i class="fas fa-graduation-cap text-xl"></i>
192
+ </div>
193
+ <div class="mt-5">
194
+ <h3 class="text-lg font-medium text-gray-900">10K+</h3>
195
+ <p class="mt-2 text-base text-gray-500">Courses Completed</p>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition duration-300">
200
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-yellow-100 text-yellow-600">
201
+ <i class="fas fa-clock text-xl"></i>
202
+ </div>
203
+ <div class="mt-5">
204
+ <h3 class="text-lg font-medium text-gray-900">40%</h3>
205
+ <p class="mt-2 text-base text-gray-500">Reduced Training Time</p>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition duration-300">
210
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-600">
211
+ <i class="fas fa-chart-line text-xl"></i>
212
+ </div>
213
+ <div class="mt-5">
214
+ <h3 class="text-lg font-medium text-gray-900">2.5x</h3>
215
+ <p class="mt-2 text-base text-gray-500">Retention Rate</p>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Features Section -->
224
+ <div id="features" class="bg-gray-50 py-16">
225
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
226
+ <div class="lg:text-center">
227
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
228
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">Why Choose AiKo?</p>
229
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
230
+ Our platform empowers organizations to reduce training time while boosting engagement and retention.
231
+ </p>
232
+ </div>
233
+
234
+ <div class="mt-20">
235
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
236
+ <!-- Feature 1 -->
237
+ <div class="relative learning-path pl-8">
238
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
239
+ <div class="flex items-center">
240
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3">
241
+ <i class="fas fa-brain text-indigo-600 text-xl"></i>
242
+ </div>
243
+ <div class="ml-4">
244
+ <h3 class="text-lg leading-6 font-medium text-gray-900">AI-Powered Learning Paths</h3>
245
+ </div>
246
+ </div>
247
+ <p class="mt-4 text-base text-gray-500">
248
+ Intelligent pathways curated for optimal learning based on your progress, preferences, and performance.
249
+ </p>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Feature 2 -->
254
+ <div class="relative learning-path pl-8">
255
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
256
+ <div class="flex items-center">
257
+ <div class="flex-shrink-0 bg-purple-100 rounded-md p-3">
258
+ <i class="fas fa-user-cog text-purple-600 text-xl"></i>
259
+ </div>
260
+ <div class="ml-4">
261
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Personalized Content</h3>
262
+ </div>
263
+ </div>
264
+ <p class="mt-4 text-base text-gray-500">
265
+ Tailored suggestions to enhance your progress with content that matches your skill level and learning style.
266
+ </p>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Feature 3 -->
271
+ <div class="relative learning-path pl-8">
272
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
273
+ <div class="flex items-center">
274
+ <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3">
275
+ <i class="fas fa-chart-bar text-yellow-600 text-xl"></i>
276
+ </div>
277
+ <div class="ml-4">
278
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Real-Time Progress Tracking</h3>
279
+ </div>
280
+ </div>
281
+ <p class="mt-4 text-base text-gray-500">
282
+ Monitor achievements and milestones in real time with detailed analytics and performance insights.
283
+ </p>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Feature 4 -->
288
+ <div class="relative learning-path pl-8">
289
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
290
+ <div class="flex items-center">
291
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
292
+ <i class="fas fa-sliders-h text-green-600 text-xl"></i>
293
+ </div>
294
+ <div class="ml-4">
295
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Adaptive Difficulty</h3>
296
+ </div>
297
+ </div>
298
+ <p class="mt-4 text-base text-gray-500">
299
+ Seamlessly adjusts to match your pace and skill level, ensuring optimal challenge without frustration.
300
+ </p>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Feature 5 -->
305
+ <div class="relative learning-path pl-8">
306
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
307
+ <div class="flex items-center">
308
+ <div class="flex-shrink-0 bg-red-100 rounded-md p-3">
309
+ <i class="fas fa-project-diagram text-red-600 text-xl"></i>
310
+ </div>
311
+ <div class="ml-4">
312
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Interactive Visualization</h3>
313
+ </div>
314
+ </div>
315
+ <p class="mt-4 text-base text-gray-500">
316
+ Explore data through dynamic charts and graphs that make complex information easy to understand.
317
+ </p>
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Feature 6 -->
322
+ <div class="relative learning-path pl-8">
323
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300">
324
+ <div class="flex items-center">
325
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
326
+ <i class="fas fa-hands-helping text-blue-600 text-xl"></i>
327
+ </div>
328
+ <div class="ml-4">
329
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Hands-On Practice</h3>
330
+ </div>
331
+ </div>
332
+ <p class="mt-4 text-base text-gray-500">
333
+ Gain practical skills by working directly with data in realistic scenarios and case studies.
334
+ </p>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- How It Works Section -->
343
+ <div id="how-it-works" class="bg-white py-16">
344
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
345
+ <div class="lg:text-center">
346
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Process</h2>
347
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">How AiKo Works</p>
348
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
349
+ Quick, snippet-like lessons are the foundation of AiKo's learning approach.
350
+ </p>
351
+ </div>
352
+
353
+ <div class="mt-16">
354
+ <div class="lg:grid lg:grid-cols-3 lg:gap-8">
355
+ <!-- Step 1 -->
356
+ <div class="relative">
357
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
358
+ <span class="text-xl font-bold">1</span>
359
+ </div>
360
+ <div class="mt-5">
361
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Select Your Learning Path</h3>
362
+ <p class="mt-2 text-base text-gray-500">
363
+ Choose from our extensive library of topics or let our AI recommend the perfect path based on your goals.
364
+ </p>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Step 2 -->
369
+ <div class="relative mt-10 lg:mt-0">
370
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
371
+ <span class="text-xl font-bold">2</span>
372
+ </div>
373
+ <div class="mt-5">
374
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Engage with Micro-Lessons</h3>
375
+ <p class="mt-2 text-base text-gray-500">
376
+ Learn through short, interactive sessions designed for maximum retention and minimal time commitment.
377
+ </p>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Step 3 -->
382
+ <div class="relative mt-10 lg:mt-0">
383
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
384
+ <span class="text-xl font-bold">3</span>
385
+ </div>
386
+ <div class="mt-5">
387
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Apply & Earn Rewards</h3>
388
+ <p class="mt-2 text-base text-gray-500">
389
+ Complete practical exercises, earn XP and badges, and track your progress toward mastery.
390
+ </p>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <div class="mt-16">
396
+ <div class="bg-indigo-50 rounded-2xl p-8 md:p-12">
397
+ <div class="md:flex md:items-center">
398
+ <div class="md:w-1/2 mb-8 md:mb-0">
399
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Experience the ROLL8 Advantage</h3>
400
+ <p class="text-gray-600 mb-6">
401
+ Our innovative ROLL8 tool generates eight tailored tasks at once, serving as both a supportive assistant and creativity booster.
402
+ </p>
403
+ <ul class="space-y-3">
404
+ <li class="flex items-start">
405
+ <div class="flex-shrink-0 mt-1">
406
+ <div class="flex items-center justify-center h-5 w-5 rounded-full bg-indigo-500 text-white">
407
+ <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
408
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
409
+ </svg>
410
+ </div>
411
+ </div>
412
+ <p class="ml-3 text-sm text-gray-700">Enhances creative thinking and problem-solving</p>
413
+ </li>
414
+ <li class="flex items-start">
415
+ <div class="flex-shrink-0 mt-1">
416
+ <div class="flex items-center justify-center h-5 w-5 rounded-full bg-indigo-500 text-white">
417
+ <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
418
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
419
+ </svg>
420
+ </div>
421
+ </div>
422
+ <p class="ml-3 text-sm text-gray-700">Accelerates vocabulary and concept acquisition</p>
423
+ </li>
424
+ <li class="flex items-start">
425
+ <div class="flex-shrink-0 mt-1">
426
+ <div class="flex items-center justify-center h-5 w-5 rounded-full bg-indigo-500 text-white">
427
+ <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
428
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
429
+ </svg>
430
+ </div>
431
+ </div>
432
+ <p class="ml-3 text-sm text-gray-700">Provides structured yet flexible learning framework</p>
433
+ </li>
434
+ </ul>
435
+ </div>
436
+ <div class="md:w-1/2 md:pl-12">
437
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
438
+ <div class="p-6">
439
+ <div class="flex justify-between items-center mb-6">
440
+ <h4 class="text-lg font-medium text-gray-900">Your ROLL8 Tasks</h4>
441
+ <button id="roll-tasks" class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-md text-sm font-medium">Roll Again</button>
442
+ </div>
443
+ <div id="task-list" class="space-y-4">
444
+ <!-- Tasks will be generated here by JavaScript -->
445
+ </div>
446
+ <div class="mt-6 pt-6 border-t border-gray-200">
447
+ <div class="flex justify-between">
448
+ <span class="text-sm font-medium text-gray-500">Completion</span>
449
+ <span class="text-sm font-medium text-indigo-600">0/8</span>
450
+ </div>
451
+ <div class="mt-2 w-full bg-gray-200 rounded-full h-2.5">
452
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Pricing Section -->
466
+ <div id="pricing" class="bg-gray-50 py-16">
467
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
468
+ <div class="lg:text-center">
469
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Pricing</h2>
470
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">Choose Your Plan</p>
471
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
472
+ Whether you're an individual learner or an enterprise team, we have the perfect solution for you.
473
+ </p>
474
+ </div>
475
+
476
+ <div class="mt-16 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8">
477
+ <!-- AiKo Pro -->
478
+ <div class="relative bg-white p-8 rounded-2xl shadow-lg border-2 border-gray-200 card-hover transition duration-300">
479
+ <div class="absolute top-0 right-0 -mt-4 -mr-4 bg-indigo-600 text-white text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full">
480
+ Most Popular
481
+ </div>
482
+ <h3 class="text-2xl font-bold text-gray-900">AiKo Pro</h3>
483
+ <p class="mt-4 text-gray-500">For individuals and small teams</p>
484
+ <div class="mt-6">
485
+ <span class="text-4xl font-extrabold text-gray-900">$29</span>
486
+ <span class="text-base font-medium text-gray-500">/month</span>
487
+ </div>
488
+ <ul class="mt-8 space-y-4">
489
+ <li class="flex items-start">
490
+ <div class="flex-shrink-0">
491
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
492
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
493
+ </svg>
494
+ </div>
495
+ <p class="ml-3 text-base text-gray-700">Unlimited micro-lessons</p>
496
+ </li>
497
+ <li class="flex items-start">
498
+ <div class="flex-shrink-0">
499
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
500
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
501
+ </svg>
502
+ </div>
503
+ <p class="ml-3 text-base text-gray-700">Personalized AI tutor</p>
504
+ </li>
505
+ <li class="flex items-start">
506
+ <div class="flex-shrink-0">
507
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
508
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
509
+ </svg>
510
+ </div>
511
+ <p class="ml-3 text-base text-gray-700">Advanced progress tracking</p>
512
+ </li>
513
+ <li class="flex items-start">
514
+ <div class="flex-shrink-0">
515
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
516
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
517
+ </svg>
518
+ </div>
519
+ <p class="ml-3 text-base text-gray-700">ROLL8 task generator</p>
520
+ </li>
521
+ <li class="flex items-start">
522
+ <div class="flex-shrink-0">
523
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
524
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
525
+ </svg>
526
+ </div>
527
+ <p class="ml-3 text-base text-gray-700">Certificate of completion</p>
528
+ </li>
529
+ </ul>
530
+ <div class="mt-8">
531
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-md font-medium">Get Started</button>
532
+ </div>
533
+ </div>
534
+
535
+ <!-- AiKo Enterprise -->
536
+ <div class="relative bg-white p-8 rounded-2xl shadow-lg border-2 border-purple-200 card-hover transition duration-300">
537
+ <h3 class="text-2xl font-bold text-gray-900">AiKo Enterprise</h3>
538
+ <p class="mt-4 text-gray-500">For organizations and large teams</p>
539
+ <div class="mt-6">
540
+ <span class="text-4xl font-extrabold text-gray-900">Custom</span>
541
+ </div>
542
+ <ul class="mt-8 space-y-4">
543
+ <li class="flex items-start">
544
+ <div class="flex-shrink-0">
545
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
546
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
547
+ </svg>
548
+ </div>
549
+ <p class="ml-3 text-base text-gray-700">Everything in Pro, plus:</p>
550
+ </li>
551
+ <li class="flex items-start">
552
+ <div class="flex-shrink-0">
553
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
554
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
555
+ </svg>
556
+ </div>
557
+ <p class="ml-3 text-base text-gray-700">Unlimited team members</p>
558
+ </li>
559
+ <li class="flex items-start">
560
+ <div class="flex-shrink-0">
561
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
562
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
563
+ </svg>
564
+ </div>
565
+ <p class="ml-3 text-base text-gray-700">Admin dashboard & analytics</p>
566
+ </li>
567
+ <li class="flex items-start">
568
+ <div class="flex-shrink-0">
569
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
570
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
571
+ </svg>
572
+ </div>
573
+ <p class="ml-3 text-base text-gray-700">Custom content creation</p>
574
+ </li>
575
+ <li class="flex items-start">
576
+ <div class="flex-shrink-0">
577
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
578
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
579
+ </svg>
580
+ </div>
581
+ <p class="ml-3 text-base text-gray-700">Priority support</p>
582
+ </li>
583
+ <li class="flex items-start">
584
+ <div class="flex-shrink-0">
585
+ <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
586
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
587
+ </svg>
588
+ </div>
589
+ <p class="ml-3 text-base text-gray-700">API access & integrations</p>
590
+ </li>
591
+ </ul>
592
+ <div class="mt-8">
593
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium">Contact Sales</button>
594
+ </div>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="mt-16 bg-white rounded-2xl shadow-lg overflow-hidden">
599
+ <div class="px-6 py-8 sm:p-10 sm:pb-6">
600
+ <div class="text-center">
601
+ <h3 class="text-2xl font-bold text-gray-900">Compare Features</h3>
602
+ </div>
603
+ <div class="mt-8">
604
+ <div class="overflow-x-auto">
605
+ <table class="min-w-full divide-y divide-gray-200">
606
+ <thead class="bg-gray-50">
607
+ <tr>
608
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Feature</th>
609
+ <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Free</th>
610
+ <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Pro</th>
611
+ <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Enterprise</th>
612
+ </tr>
613
+ </thead>
614
+ <tbody class="bg-white divide-y divide-gray-200">
615
+ <tr>
616
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Micro-lessons</td>
617
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Limited</td>
618
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
619
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Unlimited</td>
620
+ </tr>
621
+ <tr>
622
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">AI Tutor</td>
623
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Basic</td>
624
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Advanced</td>
625
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Premium</td>
626
+ </tr>
627
+ <tr>
628
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Progress Tracking</td>
629
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Basic</td>
630
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Advanced</td>
631
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">Enterprise</td>
632
+ </tr>
633
+ <tr>
634
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">ROLL8 Generator</td>
635
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">-</td>
636
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">✓</td>
637
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">✓</td>
638
+ </tr>
639
+ <tr>
640
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Team Management</td>
641
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">-</td>
642
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">-</td>
643
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">✓</td>
644
+ </tr>
645
+ <tr>
646
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Custom Content</td>
647
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">-</td>
648
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">-</td>
649
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">✓</td>
650
+ </tr>
651
+ <tr>
652
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">API Access</td>
653
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">-</td>
654
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">-</td>
655
+ <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">✓</td>
656
+ </tr>
657
+ </tbody>
658
+ </table>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+
666
+ <!-- Testimonials Section -->
667
+ <div id="testimonials" class="bg-white py-16">
668
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
669
+ <div class="lg:text-center">
670
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2>
671
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">What Our Learners Say</p>
672
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
673
+ Don't just take our word for it - hear from our community of learners.
674
+ </p>
675
+ </div>
676
+
677
+ <div class="mt-16">
678
+ <div class="space-y-16 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
679
+ <!-- Testimonial 1 -->
680
+ <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
681
+ <div class="flex items-center">
682
+ <div class="flex-shrink-0">
683
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
684
+ </div>
685
+ <div class="ml-4">
686
+ <div class="text-lg font-medium text-gray-900">Sarah Johnson</div>
687
+ <div class="text-indigo-600">Data Analyst, TechCorp</div>
688
+ </div>
689
+ </div>
690
+ <div class="mt-6">
691
+ <p class="text-gray-600 italic">
692
+ "AiKo transformed how I learn new concepts. The micro-lessons fit perfectly into my busy schedule, and the AI tutor adapts to my learning style. I've reduced my training time by 50% while improving retention."
693
+ </p>
694
+ </div>
695
+ <div class="mt-6 flex items-center">
696
+ <div class="flex">
697
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
698
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
699
+ </svg>
700
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
701
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
702
+ </svg>
703
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
704
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
705
+ </svg>
706
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
707
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
708
+ </svg>
709
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
710
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
711
+ </svg>
712
+ </div>
713
+ <div class="ml-3 text-sm text-gray-500">5.0 rating</div>
714
+ </div>
715
+ </div>
716
+
717
+ <!-- Testimonial 2 -->
718
+ <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
719
+ <div class="flex items-center">
720
+ <div class="flex-shrink-0">
721
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
722
+ </div>
723
+ <div class="ml-4">
724
+ <div class="text-lg font-medium text-gray-900">Michael Chen</div>
725
+ <div class="text-indigo-600">CTO, StartupX</div>
726
+ </div>
727
+ </div>
728
+ <div class="mt-6">
729
+ <p class="text-gray-600 italic">
730
+ "The ROLL8 feature has been a game-changer for our team. We generate daily learning tasks that keep everyone engaged and continuously improving. Our onboarding process is now 40% faster."
731
+ </p>
732
+ </div>
733
+ <div class="mt-6 flex items-center">
734
+ <div class="flex">
735
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
736
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
737
+ </svg>
738
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
739
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
740
+ </svg>
741
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
742
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
743
+ </svg>
744
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
745
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
746
+ </svg>
747
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
748
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
749
+ </svg>
750
+ </div>
751
+ <div class="ml-3 text-sm text-gray-500">5.0 rating</div>
752
+ </div>
753
+ </div>
754
+
755
+ <!-- Testimonial 3 -->
756
+ <div class="bg-white p-8 rounded-xl shadow-md card-hover transition duration-300">
757
+ <div class="flex items-center">
758
+ <div class="flex-shrink-0">
759
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
760
+ </div>
761
+ <div class="ml-4">
762
+ <div class="text-lg font-medium text-gray-900">David Rodriguez</div>
763
+ <div class="text-indigo-600">Learning & Development, EnterpriseCo</div>
764
+ </div>
765
+ </div>
766
+ <div class="mt-6">
767
+ <p class="text-gray-600 italic">
768
+ "AiKo Enterprise has revolutionized our corporate training. The ability to create custom content and track team progress has saved us thousands in training costs while improving outcomes."
769
+ </p>
770
+ </div>
771
+ <div class="mt-6 flex items-center">
772
+ <div class="flex">
773
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
774
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
775
+ </svg>
776
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
777
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
778
+ </svg>
779
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
780
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
781
+ </svg>
782
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
783
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
784
+ </svg>
785
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
786
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
787
+ </svg>
788
+ </div>
789
+ <div class="ml-3 text-sm text-gray-500">5.0 rating</div>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </div>
796
+
797
+ <!-- CTA Section -->
798
+ <div class="gradient-bg text-white">
799
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
800
+ <div class="md:flex md:items-center md:justify-between">
801
+ <div class="md:w-1/2 mb-10 md:mb-0">
802
+ <h2 class="text-3xl font-bold mb-6">Ready to transform your learning experience?</h2>
803
+ <p class="text-xl mb-8">Join thousands of learners who are mastering new skills with AiKo's innovative platform.</p>
804
+ </div>
805
+ <div class="md:w-1/2 md:pl-12">
806
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
807
+ <div class="p-8">
808
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Start Your Free Trial</h3>
809
+ <form>
810
+ <div class="mb-4">
811
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
812
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
813
+ </div>
814
+ <div class="mb-4">
815
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
816
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
817
+ </div>
818
+ <div class="mb-6">
819
+ <label for="plan" class="block text-sm font-medium text-gray-700 mb-1">Select Plan</label>
820
+ <select id="plan" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
821
+ <option>AiKo Free</option>
822
+ <option>AiKo Pro</option>
823
+ <option>AiKo Enterprise</option>
824
+ </select>
825
+ </div>
826
+ <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-md font-medium">Start 14-Day Free Trial</button>
827
+ <p class="mt-4 text-center text-sm text-gray-500">No credit card required</p>
828
+ </form>
829
+ </div>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ </div>
835
+
836
+ <!-- Footer -->
837
+ <footer class="bg-gray-800 text-white">
838
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
839
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
840
+ <div>
841
+ <h3 class="text-lg font-semibold mb-4">Product</h3>
842
+ <ul class="space-y-2">
843
+ <li><a href="#" class="text-gray-300 hover:text-white">Features</a></li>
844
+ <li><a href="#" class="text-gray-300 hover:text-white">Pricing</a></li>
845
+ <li><a href="#" class="text-gray-300 hover:text-white">Enterprise</a></li>
846
+ <li><a href="#" class="text-gray-300 hover:text-white">Integrations</a></li>
847
+ </ul>
848
+ </div>
849
+ <div>
850
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
851
+ <ul class="space-y-2">
852
+ <li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li>
853
+ <li><a href="#" class="text-gray-300 hover:text-white">Guides</a></li>
854
+ <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li>
855
+ <li><a href="#" class="text-gray-300 hover:text-white">Community</a></li>
856
+ </ul>
857
+ </div>
858
+ <div>
859
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
860
+ <ul class="space-y-2">
861
+ <li><a href="#" class="text-gray-300 hover:text-white">About</a></li>
862
+ <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li>
863
+ <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
864
+ <li><a href="#" class="text-gray-300 hover:text-white">Press</a></li>
865
+ </ul>
866
+ </div>
867
+ <div>
868
+ <h3 class="text-lg font-semibold mb-4">Legal</h3>
869
+ <ul class="space-y-2">
870
+ <li><a href="#" class="text-gray-300 hover:text-white">Privacy</a></li>
871
+ <li><a href="#" class="text-gray-300 hover:text-white">Terms</a></li>
872
+ <li><a href="#" class="text-gray-300 hover:text-white">Cookie Policy</a></li>
873
+ <li><a href="#" class="text-gray-300 hover:text-white">GDPR</a></li>
874
+ </ul>
875
+ </div>
876
+ </div>
877
+ <div class="mt-12 pt-
878
+ </html>
prompts.txt ADDED
File without changes