Hugging Face's logo

Spaces:
Shashank2k3
/
eduvibe-learning-reimagined
Running

App Files Community
Shashank2k3 commited on
Commit
11af234
·
verified ·
1 Parent(s): 7d98736

I want a design for modern lms application

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +474 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Eduvibe Learning Reimagined
3
- emoji: 🌍
4
- colorFrom: indigo
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: EduVibe - Learning Reimagined 🚀
3
+ colorFrom: blue
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,474 @@
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>EduVibe - Modern LMS Platform</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ }
20
+ .course-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ .vanta-container {
25
+ position: absolute;
26
+ top: 0;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 100%;
30
+ z-index: 0;
31
+ }
32
+ .content-overlay {
33
+ position: relative;
34
+ z-index: 1;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50 min-h-screen">
39
+ <!-- Vanta.js Background -->
40
+ <div id="vanta-bg" class="vanta-container fixed"></div>
41
+
42
+ <!-- Navbar -->
43
+ <nav class="content-overlay bg-white/80 backdrop-blur-md shadow-sm fixed w-full z-10">
44
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
45
+ <div class="flex justify-between h-16">
46
+ <div class="flex items-center">
47
+ <div class="flex-shrink-0 flex items-center">
48
+ <i data-feather="book-open" class="text-indigo-600 h-6 w-6"></i>
49
+ <span class="ml-2 text-xl font-bold text-gray-900">EduVibe</span>
50
+ </div>
51
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
52
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
53
+ <a href="#" 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">Courses</a>
54
+ <a href="#" 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">Dashboard</a>
55
+ <a href="#" 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">Community</a>
56
+ </div>
57
+ </div>
58
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
59
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</button>
60
+ <button class="ml-4 border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-4 py-2 rounded-md text-sm font-medium">Sign Up</button>
61
+ </div>
62
+ <div class="-mr-2 flex items-center sm:hidden">
63
+ <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 focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
64
+ <i data-feather="menu" class="block h-6 w-6"></i>
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </nav>
70
+
71
+ <!-- Hero Section -->
72
+ <div class="content-overlay relative pt-24 pb-20 px-4 sm:px-6 lg:pt-32 lg:pb-28 lg:px-8">
73
+ <div class="max-w-7xl mx-auto">
74
+ <div class="text-center">
75
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
76
+ <span class="block">Learn Without</span>
77
+ <span class="block text-indigo-600">Limits</span>
78
+ </h1>
79
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
80
+ EduVibe transforms learning with interactive courses, live sessions, and a collaborative community. Start your journey today.
81
+ </p>
82
+ <div class="mt-10 sm:flex sm:justify-center">
83
+ <div class="rounded-md shadow">
84
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
85
+ Explore Courses
86
+ </a>
87
+ </div>
88
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
89
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
90
+ Live Demo
91
+ </a>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Features Section -->
99
+ <div class="content-overlay relative py-12 bg-white">
100
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
101
+ <div class="lg:text-center">
102
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
103
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
104
+ A better way to learn online
105
+ </p>
106
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
107
+ EduVibe combines the best learning tools with an engaging experience.
108
+ </p>
109
+ </div>
110
+
111
+ <div class="mt-20">
112
+ <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
113
+ <div class="pt-6">
114
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
115
+ <div class="-mt-6">
116
+ <div>
117
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
118
+ <i data-feather="video" class="h-6 w-6 text-white"></i>
119
+ </span>
120
+ </div>
121
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Interactive Videos</h3>
122
+ <p class="mt-5 text-base text-gray-500">
123
+ Engaging video lessons with quizzes and annotations to enhance your learning experience.
124
+ </p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="pt-6">
130
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
131
+ <div class="-mt-6">
132
+ <div>
133
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
134
+ <i data-feather="users" class="h-6 w-6 text-white"></i>
135
+ </span>
136
+ </div>
137
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Live Classes</h3>
138
+ <p class="mt-5 text-base text-gray-500">
139
+ Real-time interaction with instructors and peers through our live classroom feature.
140
+ </p>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="pt-6">
146
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
147
+ <div class="-mt-6">
148
+ <div>
149
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
150
+ <i data-feather="bar-chart-2" class="h-6 w-6 text-white"></i>
151
+ </span>
152
+ </div>
153
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Progress Tracking</h3>
154
+ <p class="mt-5 text-base text-gray-500">
155
+ Detailed analytics to track your learning progress and identify areas for improvement.
156
+ </p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="pt-6">
162
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
163
+ <div class="-mt-6">
164
+ <div>
165
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
166
+ <i data-feather="message-square" class="h-6 w-6 text-white"></i>
167
+ </span>
168
+ </div>
169
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Community Support</h3>
170
+ <p class="mt-5 text-base text-gray-500">
171
+ Connect with fellow learners through discussion forums and study groups.
172
+ </p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="pt-6">
178
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
179
+ <div class="-mt-6">
180
+ <div>
181
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
182
+ <i data-feather="smartphone" class="h-6 w-6 text-white"></i>
183
+ </span>
184
+ </div>
185
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Mobile Learning</h3>
186
+ <p class="mt-5 text-base text-gray-500">
187
+ Learn on the go with our mobile-friendly platform and dedicated apps.
188
+ </p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="pt-6">
194
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
195
+ <div class="-mt-6">
196
+ <div>
197
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
198
+ <i data-feather="award" class="h-6 w-6 text-white"></i>
199
+ </span>
200
+ </div>
201
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Certification</h3>
202
+ <p class="mt-5 text-base text-gray-500">
203
+ Earn verifiable certificates upon course completion to showcase your skills.
204
+ </p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Popular Courses -->
214
+ <div class="content-overlay relative py-16 bg-gray-50">
215
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
216
+ <div class="text-center">
217
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Learn Something New</h2>
218
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
219
+ Popular Courses
220
+ </p>
221
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
222
+ Explore our most popular courses across various domains.
223
+ </p>
224
+ </div>
225
+
226
+ <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
227
+ <!-- Course 1 -->
228
+ <div class="course-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">
229
+ <div class="px-4 py-5 sm:p-6">
230
+ <div class="flex items-center">
231
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
232
+ <i data-feather="code" class="h-6 w-6 text-white"></i>
233
+ </div>
234
+ <div class="ml-5 w-0 flex-1">
235
+ <dt class="text-lg font-medium text-gray-900 truncate">
236
+ Web Development Bootcamp
237
+ </dt>
238
+ <dd class="flex items-baseline">
239
+ <div class="text-sm text-gray-500">Beginner - Advanced</div>
240
+ </dd>
241
+ </div>
242
+ </div>
243
+ <div class="mt-4">
244
+ <p class="text-sm text-gray-500">
245
+ Master HTML, CSS, JavaScript and modern frameworks like React and Node.js.
246
+ </p>
247
+ </div>
248
+ <div class="mt-6 flex justify-between items-center">
249
+ <div class="flex items-center">
250
+ <i data-feather="clock" class="h-4 w-4 text-gray-400"></i>
251
+ <span class="ml-2 text-sm text-gray-500">32 hours</span>
252
+ </div>
253
+ <div class="flex items-center">
254
+ <i data-feather="user" class="h-4 w-4 text-gray-400"></i>
255
+ <span class="ml-2 text-sm text-gray-500">4,500+ students</span>
256
+ </div>
257
+ </div>
258
+ <div class="mt-6">
259
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
260
+ Enroll Now
261
+ </button>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Course 2 -->
267
+ <div class="course-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">
268
+ <div class="px-4 py-5 sm:p-6">
269
+ <div class="flex items-center">
270
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
271
+ <i data-feather="dollar-sign" class="h-6 w-6 text-white"></i>
272
+ </div>
273
+ <div class="ml-5 w-0 flex-1">
274
+ <dt class="text-lg font-medium text-gray-900 truncate">
275
+ Financial Markets
276
+ </dt>
277
+ <dd class="flex items-baseline">
278
+ <div class="text-sm text-gray-500">Intermediate</div>
279
+ </dd>
280
+ </div>
281
+ </div>
282
+ <div class="mt-4">
283
+ <p class="text-sm text-gray-500">
284
+ Understand financial markets, investment strategies, and risk management.
285
+ </p>
286
+ </div>
287
+ <div class="mt-6 flex justify-between items-center">
288
+ <div class="flex items-center">
289
+ <i data-feather="clock" class="h-4 w-4 text-gray-400"></i>
290
+ <span class="ml-2 text-sm text-gray-500">24 hours</span>
291
+ </div>
292
+ <div class="flex items-center">
293
+ <i data-feather="user" class="h-4 w-4 text-gray-400"></i>
294
+ <span class="ml-2 text-sm text-gray-500">3,200+ students</span>
295
+ </div>
296
+ </div>
297
+ <div class="mt-6">
298
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
299
+ Enroll Now
300
+ </button>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Course 3 -->
306
+ <div class="course-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">
307
+ <div class="px-4 py-5 sm:p-6">
308
+ <div class="flex items-center">
309
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
310
+ <i data-feather="cpu" class="h-6 w-6 text-white"></i>
311
+ </div>
312
+ <div class="ml-5 w-0 flex-1">
313
+ <dt class="text-lg font-medium text-gray-900 truncate">
314
+ Machine Learning Fundamentals
315
+ </dt>
316
+ <dd class="flex items-baseline">
317
+ <div class="text-sm text-gray-500">Advanced</div>
318
+ </dd>
319
+ </div>
320
+ </div>
321
+ <div class="mt-4">
322
+ <p class="text-sm text-gray-500">
323
+ Learn core concepts of machine learning and implement models using Python.
324
+ </p>
325
+ </div>
326
+ <div class="mt-6 flex justify-between items-center">
327
+ <div class="flex items-center">
328
+ <i data-feather="clock" class="h-4 w-4 text-gray-400"></i>
329
+ <span class="ml-2 text-sm text-gray-500">40 hours</span>
330
+ </div>
331
+ <div class="flex items-center">
332
+ <i data-feather="user" class="h-4 w-4 text-gray-400"></i>
333
+ <span class="ml-2 text-sm text-gray-500">2,800+ students</span>
334
+ </div>
335
+ </div>
336
+ <div class="mt-6">
337
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
338
+ Enroll Now
339
+ </button>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="mt-12 text-center">
346
+ <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
347
+ View All Courses
348
+ <i data-feather="arrow-right" class="ml-2 h-4 w-4"></i>
349
+ </a>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- Testimonials -->
355
+ <div class="content-overlay relative py-16 bg-white">
356
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
357
+ <div class="text-center">
358
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2>
359
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
360
+ What our students say
361
+ </p>
362
+ </div>
363
+
364
+ <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
365
+ <!-- Testimonial 1 -->
366
+ <div class="bg-gray-50 p-8 rounded-lg">
367
+ <div class="flex items-center">
368
+ <div class="flex-shrink-0">
369
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Sarah Johnson">
370
+ </div>
371
+ <div class="ml-4">
372
+ <div class="text-lg font-medium text-gray-900">Sarah Johnson</div>
373
+ <div class="text-indigo-600">Web Developer</div>
374
+ </div>
375
+ </div>
376
+ <div class="mt-4">
377
+ <p class="text-gray-500">
378
+ "The web development course completely transformed my career. The hands-on projects and mentor support were exceptional."
379
+ </p>
380
+ </div>
381
+ <div class="mt-4 flex">
382
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
383
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
384
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
385
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
386
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Testimonial 2 -->
391
+ <div class="bg-gray-50 p-8 rounded-lg">
392
+ <div class="flex items-center">
393
+ <div class="flex-shrink-0">
394
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Michael Chen">
395
+ </div>
396
+ <div class="ml-4">
397
+ <div class="text-lg font-medium text-gray-900">Michael Chen</div>
398
+ <div class="text-indigo-600">Data Scientist</div>
399
+ </div>
400
+ </div>
401
+ <div class="mt-4">
402
+ <p class="text-gray-500">
403
+ "The machine learning course provided me with practical skills that I could immediately apply at work. Highly recommended!"
404
+ </p>
405
+ </div>
406
+ <div class="mt-4 flex">
407
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
408
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
409
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
410
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
411
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- Testimonial 3 -->
416
+ <div class="bg-gray-50 p-8 rounded-lg">
417
+ <div class="flex items-center">
418
+ <div class="flex-shrink-0">
419
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Priya Patel">
420
+ </div>
421
+ <div class="ml-4">
422
+ <div class="text-lg font-medium text-gray-900">Priya Patel</div>
423
+ <div class="text-indigo-600">UX Designer</div>
424
+ </div>
425
+ </div>
426
+ <div class="mt-4">
427
+ <p class="text-gray-500">
428
+ "The UI/UX design course was exactly what I needed to transition into design. The community support was invaluable."
429
+ </p>
430
+ </div>
431
+ <div class="mt-4 flex">
432
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
433
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
434
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
435
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
436
+ <i data-feather="star" class="h-5 w-5 text-yellow-400"></i>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- CTA Section -->
444
+ <div class="content-overlay relative gradient-bg">
445
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-24 lg:px-8 lg:flex lg:items-center lg:justify-between">
446
+ <h2 class="text-3xl font-extrabold tracking-tight text-white md:text-4xl">
447
+ <span class="block">Ready to dive in?</span>
448
+ <span class="block">Start your learning journey today.</span>
449
+ </h2>
450
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
451
+ <div class="inline-flex rounded-md shadow">
452
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
453
+ Get started
454
+ </a>
455
+ </div>
456
+ <div class="ml-3 inline-flex rounded-md shadow">
457
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70">
458
+ Live demo
459
+ </a>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Footer -->
466
+ <footer class="content-overlay relative bg-gray-800">
467
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
468
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
469
+ <div>
470
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
471
+ <ul class="mt-4 space-y-4">
472
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Courses</a></li{"ok":false,"message":"terminated"}
473
+ </body>
474
+ </html>