Hugging Face's logo

Spaces:
kritsanan
/
instructa
Running

App Files Community
kritsanan commited on
Commit
58444dd
·
verified ·
1 Parent(s): fbacd58

- Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +500 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Instructa
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: pink
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: instructa
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
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,500 @@
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>Instructa Academy - Learn AI Software Development</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6366f1',
15
+ secondary: '#8b5cf6',
16
+ accent: '#ec4899',
17
+ dark: '#0f172a',
18
+ light: '#f8fafc'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
26
+
27
+ body {
28
+ font-family: 'Inter', sans-serif;
29
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
30
+ color: #f8fafc;
31
+ }
32
+
33
+ .hero-gradient {
34
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
35
+ }
36
+
37
+ .card-gradient {
38
+ background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
39
+ border: 1px solid rgba(99, 102, 241, 0.2);
40
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
41
+ }
42
+
43
+ .btn-primary {
44
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
45
+ transition: all 0.3s ease;
46
+ }
47
+
48
+ .btn-primary:hover {
49
+ transform: translateY(-3px);
50
+ box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.4), 0 8px 10px -6px rgba(99, 102, 241, 0.4);
51
+ }
52
+
53
+ .btn-secondary {
54
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
55
+ border: 1px solid rgba(99, 102, 241, 0.3);
56
+ }
57
+
58
+ .btn-secondary:hover {
59
+ background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
60
+ }
61
+
62
+ .feature-card:hover {
63
+ transform: translateY(-5px);
64
+ border-color: rgba(99, 102, 241, 0.5);
65
+ }
66
+
67
+ .lesson-card {
68
+ transition: all 0.3s ease;
69
+ }
70
+
71
+ .lesson-card:hover {
72
+ transform: translateY(-8px);
73
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -6px rgba(0, 0, 0, 0.25);
74
+ }
75
+
76
+ .instructor-card {
77
+ background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
78
+ border: 1px solid rgba(99, 102, 241, 0.2);
79
+ }
80
+
81
+ .newsletter-gradient {
82
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
83
+ border: 1px solid rgba(99, 102, 241, 0.3);
84
+ }
85
+
86
+ .pulse {
87
+ animation: pulse 2s infinite;
88
+ }
89
+
90
+ @keyframes pulse {
91
+ 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
92
+ 70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
93
+ 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
94
+ }
95
+
96
+ .scroll-gradient {
97
+ background: linear-gradient(90deg, transparent, #0f172a, transparent);
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="min-h-screen">
102
+ <!-- Header -->
103
+ <header class="py-6 px-4 sm:px-6 lg:px-8">
104
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
105
+ <div class="flex items-center space-x-2">
106
+ <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
107
+ <i class="fas fa-graduation-cap text-white text-xl"></i>
108
+ </div>
109
+ <span class="text-2xl font-bold">Instructa<span class="text-primary">.</span></span>
110
+ </div>
111
+
112
+ <nav class="hidden md:flex space-x-8">
113
+ <a href="#" class="text-gray-300 hover:text-white transition">Courses</a>
114
+ <a href="#" class="text-gray-300 hover:text-white transition">Prompts</a>
115
+ <a href="#" class="text-gray-300 hover:text-white transition">Community</a>
116
+ <a href="#" class="text-gray-300 hover:text-white transition">Blog</a>
117
+ </nav>
118
+
119
+ <div class="flex items-center space-x-4">
120
+ <button class="hidden md:block text-gray-300 hover:text-white transition">Sign In</button>
121
+ <button class="px-5 py-2 rounded-lg btn-primary text-white font-medium">Get Started</button>
122
+ </div>
123
+ </div>
124
+ </header>
125
+
126
+ <!-- Hero Section -->
127
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
128
+ <div class="max-w-7xl mx-auto">
129
+ <div class="text-center max-w-3xl mx-auto">
130
+ <h1 class="text-4xl md:text-6xl font-extrabold leading-tight">
131
+ Learn to build software with <span class="hero-gradient bg-clip-text text-transparent">AI</span>, ship fast and see real results
132
+ </h1>
133
+ <p class="mt-6 text-xl text-gray-300 max-w-2xl mx-auto">
134
+ Join the Instructa Academy to master AI-powered development and build real-world applications faster than ever before.
135
+ </p>
136
+ <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
137
+ <button class="px-8 py-4 rounded-xl btn-primary text-white font-bold text-lg pulse">
138
+ Enter the Academy
139
+ </button>
140
+ <button class="px-8 py-4 rounded-xl btn-secondary text-white font-bold text-lg">
141
+ Get Instant Access
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Features Section -->
149
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
150
+ <div class="max-w-7xl mx-auto">
151
+ <div class="text-center mb-16">
152
+ <h2 class="text-3xl md:text-4xl font-bold">Ship projects faster with Instructa Academy</h2>
153
+ <p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto">
154
+ The Instructa Academy is for those who want to build real-world applications and games with AI. You'll find here courses, guides, and a helpful community.
155
+ </p>
156
+ </div>
157
+
158
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
159
+ <!-- Feature 1 -->
160
+ <div class="card-gradient rounded-2xl p-6 feature-card">
161
+ <div class="w-14 h-14 rounded-xl bg-primary/20 flex items-center justify-center mb-6">
162
+ <i class="fas fa-video text-primary text-2xl"></i>
163
+ </div>
164
+ <h3 class="text-2xl font-bold mb-3">More than 80 Video lessons</h3>
165
+ <p class="text-gray-300">Learn what actually matters to work with AI and get results.</p>
166
+ </div>
167
+
168
+ <!-- Feature 2 -->
169
+ <div class="card-gradient rounded-2xl p-6 feature-card">
170
+ <div class="w-14 h-14 rounded-xl bg-secondary/20 flex items-center justify-center mb-6">
171
+ <i class="fas fa-sync-alt text-secondary text-2xl"></i>
172
+ </div>
173
+ <h3 class="text-2xl font-bold mb-3">Ongoing Updates</h3>
174
+ <p class="text-gray-300">New content delivered regularly to keep you current.</p>
175
+ </div>
176
+
177
+ <!-- Feature 3 -->
178
+ <div class="card-gradient rounded-2xl p-6 feature-card">
179
+ <div class="w-14 h-14 rounded-xl bg-accent/20 flex items-center justify-center mb-6">
180
+ <i class="fas fa-tasks text-accent text-2xl"></i>
181
+ </div>
182
+ <h3 class="text-2xl font-bold mb-3">Pro Planning Prompts</h3>
183
+ <p class="text-gray-300">From idea to roadmap with industry-tested prompts.</p>
184
+ </div>
185
+
186
+ <!-- Feature 4 -->
187
+ <div class="card-gradient rounded-2xl p-6 feature-card">
188
+ <div class="w-14 h-14 rounded-xl bg-indigo-500/20 flex items-center justify-center mb-6">
189
+ <i class="fas fa-users text-indigo-500 text-2xl"></i>
190
+ </div>
191
+ <h3 class="text-2xl font-bold mb-3">Private Community Access</h3>
192
+ <p class="text-gray-300">Connect, ask questions and swap ideas with members.</p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- New Lessons Section -->
199
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
200
+ <div class="max-w-7xl mx-auto">
201
+ <div class="flex justify-between items-center mb-12">
202
+ <h2 class="text-3xl md:text-4xl font-bold">New Video Lessons</h2>
203
+ <button class="px-5 py-2 rounded-lg btn-secondary text-white font-medium">
204
+ View All Courses
205
+ </button>
206
+ </div>
207
+
208
+ <div class="relative">
209
+ <div class="scroll-gradient absolute top-0 left-0 right-0 h-32 z-10 pointer-events-none"></div>
210
+ <div class="scroll-gradient absolute bottom-0 left-0 right-0 h-32 z-10 pointer-events-none rotate-180"></div>
211
+
212
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
213
+ <!-- Lesson 1 -->
214
+ <div class="lesson-card card-gradient rounded-2xl overflow-hidden">
215
+ <div class="h-48 bg-gradient-to-r from-blue-500 to-purple-600 relative">
216
+ <div class="absolute top-4 right-4 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm">
217
+ <i class="fas fa-play-circle mr-1"></i> New
218
+ </div>
219
+ </div>
220
+ <div class="p-6">
221
+ <h3 class="text-xl font-bold mb-2">Add Cursor Rules (Fast)</h3>
222
+ <div class="flex items-center mt-4">
223
+ <img src="https://a.storyblok.com/f/316774/320x320/e07f300c40/kevinkernegger.jpg" alt="Kevin Kern" class="w-10 h-10 rounded-full">
224
+ <div class="ml-3">
225
+ <p class="font-medium">Kevin Kern</p>
226
+ <p class="text-sm text-gray-400">Ultimate Cursor AI Course</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Lesson 2 -->
233
+ <div class="lesson-card card-gradient rounded-2xl overflow-hidden">
234
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-600 relative">
235
+ <div class="absolute top-4 right-4 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm">
236
+ <i class="fas fa-sync-alt mr-1"></i> Updated
237
+ </div>
238
+ </div>
239
+ <div class="p-6">
240
+ <h3 class="text-xl font-bold mb-2">Learn how to work with latest docs and data in Cursor</h3>
241
+ <div class="flex items-center mt-4">
242
+ <img src="https://a.storyblok.com/f/316774/320x320/e07f300c40/kevinkernegger.jpg" alt="Kevin Kern" class="w-10 h-10 rounded-full">
243
+ <div class="ml-3">
244
+ <p class="font-medium">Kevin Kern</p>
245
+ <p class="text-sm text-gray-400">Ultimate Cursor AI Course</p>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Lesson 3 -->
252
+ <div class="lesson-card card-gradient rounded-2xl overflow-hidden">
253
+ <div class="h-48 bg-gradient-to-r from-indigo-500 to-blue-600 relative">
254
+ <div class="absolute top-4 right-4 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm">
255
+ <i class="fas fa-star mr-1"></i> Popular
256
+ </div>
257
+ </div>
258
+ <div class="p-6">
259
+ <h3 class="text-xl font-bold mb-2">MCP (Model Context Protocol) Course</h3>
260
+ <div class="flex items-center mt-4">
261
+ <img src="https://a.storyblok.com/f/316774/320x320/e07f300c40/kevinkernegger.jpg" alt="Kevin Kern" class="w-10 h-10 rounded-full">
262
+ <div class="ml-3">
263
+ <p class="font-medium">Kevin Kern</p>
264
+ <p class="text-sm text-gray-400">MCP Course</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Lesson 4 -->
271
+ <div class="lesson-card card-gradient rounded-2xl overflow-hidden">
272
+ <div class="h-48 bg-gradient-to-r from-pink-500 to-rose-600 relative">
273
+ <div class="absolute top-4 right-4 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm">
274
+ <i class="fas fa-bolt mr-1"></i> Quick
275
+ </div>
276
+ </div>
277
+ <div class="p-6">
278
+ <h3 class="text-xl font-bold mb-2">Project Plans & Specs (PRD, Roadmap, API)</h3>
279
+ <div class="flex items-center mt-4">
280
+ <img src="https://a.storyblok.com/f/316774/320x320/e07f300c40/kevinkernegger.jpg" alt="Kevin Kern" class="w-10 h-10 rounded-full">
281
+ <div class="ml-3">
282
+ <p class="font-medium">Kevin Kern</p>
283
+ <p class="text-sm text-gray-400">Ultimate Cursor AI Course</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </section>
292
+
293
+ <!-- AI Prompts Section -->
294
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
295
+ <div class="max-w-7xl mx-auto">
296
+ <div class="text-center mb-16">
297
+ <h2 class="text-3xl md:text-4xl font-bold">AI Prompts</h2>
298
+ <p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto">
299
+ Improve your Coding Agent with powerful curated Prompts, Cursor Rules & Guidelines
300
+ </p>
301
+ <button class="mt-8 px-6 py-3 rounded-lg btn-primary text-white font-medium">
302
+ Browse Prompts
303
+ </button>
304
+ </div>
305
+
306
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
307
+ <!-- Top Prompt 1 -->
308
+ <div class="card-gradient rounded-2xl p-6">
309
+ <div class="flex items-start">
310
+ <div class="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center flex-shrink-0">
311
+ <i class="fas fa-code text-primary text-xl"></i>
312
+ </div>
313
+ <div class="ml-4">
314
+ <h3 class="text-xl font-bold mb-2">Code Generation Prompt</h3>
315
+ <p class="text-gray-300">Generate clean, efficient code based on your requirements.</p>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Top Prompt 2 -->
321
+ <div class="card-gradient rounded-2xl p-6">
322
+ <div class="flex items-start">
323
+ <div class="w-12 h-12 rounded-lg bg-secondary/20 flex items-center justify-center flex-shrink-0">
324
+ <i class="fas fa-bug text-secondary text-xl"></i>
325
+ </div>
326
+ <div class="ml-4">
327
+ <h3 class="text-xl font-bold mb-2">Debugging Assistant</h3>
328
+ <p class="text-gray-300">Identify and fix errors in your code with detailed explanations.</p>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Top Prompt 3 -->
334
+ <div class="card-gradient rounded-2xl p-6">
335
+ <div class="flex items-start">
336
+ <div class="w-12 h-12 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0">
337
+ <i class="fas fa-project-diagram text-accent text-xl"></i>
338
+ </div>
339
+ <div class="ml-4">
340
+ <h3 class="text-xl font-bold mb-2">System Architecture</h3>
341
+ <p class="text-gray-300">Design scalable system architectures for your applications.</p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- Guides Section -->
350
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
351
+ <div class="max-w-7xl mx-auto">
352
+ <div class="text-center mb-16">
353
+ <h2 class="text-3xl md:text-4xl font-bold">Top Guides</h2>
354
+ <p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto">
355
+ Proven AI Skills for Profitable Projects
356
+ </p>
357
+ </div>
358
+
359
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
360
+ <!-- Guide 1 -->
361
+ <div class="card-gradient rounded-2xl p-6">
362
+ <div class="flex items-center mb-4">
363
+ <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
364
+ <i class="fas fa-robot text-blue-500"></i>
365
+ </div>
366
+ <h3 class="text-xl font-bold ml-3">AI Tool Mastery</h3>
367
+ </div>
368
+ <p class="text-gray-300">Master the latest AI tools and techniques to accelerate your development workflow.</p>
369
+ </div>
370
+
371
+ <!-- Guide 2 -->
372
+ <div class="card-gradient rounded-2xl p-6">
373
+ <div class="flex items-center mb-4">
374
+ <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
375
+ <i class="fas fa-brain text-purple-500"></i>
376
+ </div>
377
+ <h3 class="text-xl font-bold ml-3">Prompt Engineering</h3>
378
+ </div>
379
+ <p class="text-gray-300">Learn advanced prompt techniques to get better results from AI models.</p>
380
+ </div>
381
+
382
+ <!-- Guide 3 -->
383
+ <div class="card-gradient rounded-2xl p-6">
384
+ <div class="flex items-center mb-4">
385
+ <div class="w-10 h-10 rounded-lg bg-pink-500/20 flex items-center justify-center">
386
+ <i class="fas fa-chart-line text-pink-500"></i>
387
+ </div>
388
+ <h3 class="text-xl font-bold ml-3">AI Project Profitability</h3>
389
+ </div>
390
+ <p class="text-gray-300">Strategies for monetizing your AI projects and building profitable applications.</p>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- Newsletter Section -->
397
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
398
+ <div class="max-w-7xl mx-auto">
399
+ <div class="newsletter-gradient rounded-3xl p-8 md:p-12">
400
+ <div class="flex flex-col md:flex-row items-center">
401
+ <div class="md:w-1/2 mb-10 md:mb-0">
402
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Learn to build software with AI, ship fast, and see real results.</h2>
403
+ <p class="text-gray-300 text-lg">
404
+ Every Friday, AI builders learn something new to keep their projects profitable and their skills in demand.
405
+ </p>
406
+ </div>
407
+ <div class="md:w-1/2 md:pl-12">
408
+ <div class="flex flex-col sm:flex-row gap-4">
409
+ <input type="email" placeholder="Your email address" class="flex-grow px-5 py-4 rounded-xl bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
410
+ <button class="px-6 py-4 rounded-xl btn-primary text-white font-bold whitespace-nowrap">
411
+ Subscribe
412
+ </button>
413
+ </div>
414
+ <p class="mt-4 text-gray-400 text-sm">Join 10,000+ developers learning AI skills every week</p>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </section>
420
+
421
+ <!-- CTA Section -->
422
+ <section class="py-20 px-4 sm:px-6 lg:px-8">
423
+ <div class="max-w-4xl mx-auto text-center">
424
+ <div class="flex justify-center mb-8">
425
+ <div class="w-32 h-32 rounded-full overflow-hidden border-4 border-primary/30">
426
+ <img src="https://a.storyblok.com/f/316774/930x978/0c2893775d/kevin_kern.png" alt="Kevin Kern" class="w-full h-full object-cover">
427
+ </div>
428
+ </div>
429
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Start Learning Today</h2>
430
+ <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
431
+ Master Cursor AI and accelerate your development workflow
432
+ </p>
433
+ <button class="px-8 py-4 rounded-xl btn-primary text-white font-bold text-lg pulse">
434
+ Get instant access
435
+ </button>
436
+ </div>
437
+ </section>
438
+
439
+ <!-- Footer -->
440
+ <footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800">
441
+ <div class="max-w-7xl mx-auto">
442
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
443
+ <div>
444
+ <div class="flex items-center space-x-2 mb-6">
445
+ <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
446
+ <i class="fas fa-graduation-cap text-white text-lg"></i>
447
+ </div>
448
+ <span class="text-xl font-bold">Instructa<span class="text-primary">.</span></span>
449
+ </div>
450
+ <p class="text-gray-400">
451
+ Learn to build software with AI, ship fast and see real results.
452
+ </p>
453
+ </div>
454
+
455
+ <div>
456
+ <h3 class="text-lg font-bold mb-4">Platform</h3>
457
+ <ul class="space-y-3">
458
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Courses</a></li>
459
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Prompts</a></li>
460
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li>
461
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
462
+ </ul>
463
+ </div>
464
+
465
+ <div>
466
+ <h3 class="text-lg font-bold mb-4">Company</h3>
467
+ <ul class="space-y-3">
468
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
469
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
470
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
471
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Partners</a></li>
472
+ </ul>
473
+ </div>
474
+
475
+ <div>
476
+ <h3 class="text-lg font-bold mb-4">Connect</h3>
477
+ <div class="flex space-x-4">
478
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition">
479
+ <i class="fab fa-twitter"></i>
480
+ </a>
481
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition">
482
+ <i class="fab fa-discord"></i>
483
+ </a>
484
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition">
485
+ <i class="fab fa-youtube"></i>
486
+ </a>
487
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition">
488
+ <i class="fab fa-linkedin-in"></i>
489
+ </a>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
495
+ <p>© 2023 Instructa Academy. All rights reserved.</p>
496
+ </div>
497
+ </div>
498
+ </footer>
499
+ <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=kritsanan/instructa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
500
+ </html>