Hugging Face's logo

Spaces:
mdarlen
/
learn-hub
Running

App Files Community
mdarlen commited on
Commit
7b5e479
·
verified ·
1 Parent(s): 2e932c6

Inicie agora - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +618 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Learn Hub
3
- emoji: ⚡
4
- colorFrom: red
5
- colorTo: gray
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: learn-hub
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,618 @@
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="pt-br">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LearnHub - Plataforma de Cursos Online</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
+ /* Custom CSS for animations and effects */
11
+ .hero-gradient {
12
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13
+ }
14
+
15
+ .course-card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ }
19
+
20
+ .course-card {
21
+ transition: all 0.3s ease;
22
+ }
23
+
24
+ .btn-primary {
25
+ background: linear-gradient(to right, #667eea, #764ba2);
26
+ transition: all 0.3s ease;
27
+ }
28
+
29
+ .btn-primary:hover {
30
+ transform: translateY(-2px);
31
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
32
+ }
33
+
34
+ @keyframes float {
35
+ 0% { transform: translateY(0px); }
36
+ 50% { transform: translateY(-10px); }
37
+ 100% { transform: translateY(0px); }
38
+ }
39
+
40
+ .floating {
41
+ animation: float 6s ease-in-out infinite;
42
+ }
43
+
44
+ .stats-item:hover {
45
+ transform: scale(1.05);
46
+ }
47
+
48
+ .stats-item {
49
+ transition: all 0.3s ease;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="font-sans antialiased text-gray-800">
54
+ <!-- Navigation -->
55
+ <nav class="bg-white shadow-lg fixed w-full z-10">
56
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
57
+ <div class="flex justify-between h-16">
58
+ <div class="flex">
59
+ <div class="flex-shrink-0 flex items-center">
60
+ <i class="fas fa-graduation-cap text-indigo-600 text-2xl mr-2"></i>
61
+ <span class="text-xl font-bold text-indigo-600">LearnHub</span>
62
+ </div>
63
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
64
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Início</a>
65
+ <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">Cursos</a>
66
+ <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">Instrutores</a>
67
+ <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">Sobre</a>
68
+ </div>
69
+ </div>
70
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
71
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Entrar</button>
72
+ <button class="ml-4 bg-white hover:bg-gray-50 text-indigo-600 px-4 py-2 rounded-md text-sm font-medium border border-indigo-600">Cadastrar</button>
73
+ </div>
74
+ <div class="-mr-2 flex items-center sm:hidden">
75
+ <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">
76
+ <span class="sr-only">Abrir menu</span>
77
+ <i class="fas fa-bars"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Mobile menu -->
84
+ <div id="mobile-menu" class="hidden sm:hidden">
85
+ <div class="pt-2 pb-3 space-y-1">
86
+ <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Início</a>
87
+ <a href="#" 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">Cursos</a>
88
+ <a href="#" 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">Instrutores</a>
89
+ <a href="#" 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">Sobre</a>
90
+ <div class="mt-4 pt-4 border-t border-gray-200">
91
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-base font-medium">Entrar</button>
92
+ <button class="w-full mt-2 bg-white hover:bg-gray-50 text-indigo-600 px-4 py-2 rounded-md text-base font-medium border border-indigo-600">Cadastrar</button>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </nav>
97
+
98
+ <!-- Hero Section -->
99
+ <div class="hero-gradient pt-24 pb-32 text-white">
100
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
101
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
102
+ <div class="px-4 sm:px-0 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
103
+ <div>
104
+ <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">
105
+ <span class="block">Aprenda novas habilidades</span>
106
+ <span class="block text-indigo-200">no seu próprio ritmo</span>
107
+ </h1>
108
+ <p class="mt-3 text-base text-indigo-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
109
+ Acesso ilimitado a mais de 5.000 cursos em tecnologia, negócios, design e muito mais. Aprenda com especialistas do mercado.
110
+ </p>
111
+ <div class="mt-10 sm:flex sm:justify-center lg:justify-start">
112
+ <div class="rounded-md shadow">
113
+ <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">
114
+ Inicie agora
115
+ </a>
116
+ </div>
117
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
118
+ <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-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
119
+ <i class="fas fa-play mr-2"></i> Ver vídeo
120
+ </a>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ <div class="mt-16 sm:mt-24 lg:mt-0 lg:col-span-6">
126
+ <div class="relative">
127
+ <div class="relative mx-auto w-full rounded-lg shadow-lg overflow-hidden">
128
+ <img class="w-full h-auto floating" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="Estudante aprendendo online">
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Stats Section -->
137
+ <div class="bg-white py-16 sm:py-24">
138
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
139
+ <div class="lg:text-center">
140
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Números que falam por si</h2>
141
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
142
+ A plataforma de aprendizado mais confiável
143
+ </p>
144
+ </div>
145
+
146
+ <div class="mt-10">
147
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
148
+ <div class="stats-item pt-6">
149
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
150
+ <div class="-mt-6">
151
+ <div>
152
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
153
+ <i class="fas fa-users text-white text-xl"></i>
154
+ </span>
155
+ </div>
156
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">+500K</h3>
157
+ <p class="mt-1 text-base text-gray-500">
158
+ Estudantes ativos
159
+ </p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="stats-item pt-6">
165
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
166
+ <div class="-mt-6">
167
+ <div>
168
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
169
+ <i class="fas fa-book text-white text-xl"></i>
170
+ </span>
171
+ </div>
172
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">5.000+</h3>
173
+ <p class="mt-1 text-base text-gray-500">
174
+ Cursos disponíveis
175
+ </p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="stats-item pt-6">
181
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
182
+ <div class="-mt-6">
183
+ <div>
184
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
185
+ <i class="fas fa-chalkboard-teacher text-white text-xl"></i>
186
+ </span>
187
+ </div>
188
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">1.200+</h3>
189
+ <p class="mt-1 text-base text-gray-500">
190
+ Instrutores especialistas
191
+ </p>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="stats-item pt-6">
197
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
198
+ <div class="-mt-6">
199
+ <div>
200
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
201
+ <i class="fas fa-globe-americas text-white text-xl"></i>
202
+ </span>
203
+ </div>
204
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">150+</h3>
205
+ <p class="mt-1 text-base text-gray-500">
206
+ Países atendidos
207
+ </p>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Featured Courses -->
217
+ <div class="bg-gray-50 py-16 sm:py-24">
218
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
219
+ <div class="lg:text-center">
220
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Cursos em destaque</h2>
221
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
222
+ Aprenda com os melhores
223
+ </p>
224
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
225
+ Cursos ministrados por especialistas do mercado com experiência prática.
226
+ </p>
227
+ </div>
228
+
229
+ <div class="mt-10">
230
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
231
+ <!-- Course 1 -->
232
+ <div class="course-card bg-white rounded-lg overflow-hidden shadow-md">
233
+ <div class="relative pb-48 overflow-hidden">
234
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Desenvolvimento Web">
235
+ </div>
236
+ <div class="p-6">
237
+ <div class="flex items-center">
238
+ <span class="inline-flex px-2 py-1 text-xs font-semibold leading-4 text-indigo-800 bg-indigo-100 rounded-full">Novo</span>
239
+ <span class="ml-2 text-xs text-gray-500">40 horas</span>
240
+ </div>
241
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">Desenvolvimento Web Moderno</h3>
242
+ <p class="mt-2 text-gray-600">Aprenda HTML5, CSS3, JavaScript e frameworks modernos como React e Vue.js.</p>
243
+ <div class="mt-4 flex items-center">
244
+ <div class="flex-shrink-0">
245
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Instrutora">
246
+ </div>
247
+ <div class="ml-3">
248
+ <p class="text-sm font-medium text-gray-900">Ana Silva</p>
249
+ <p class="text-sm text-gray-500">Engenheira de Software</p>
250
+ </div>
251
+ </div>
252
+ <div class="mt-6 flex items-center justify-between">
253
+ <span class="text-2xl font-bold text-gray-900">R$ 299,90</span>
254
+ <button class="btn-primary px-4 py-2 rounded-md text-white font-medium">Inscrever-se</button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Course 2 -->
260
+ <div class="course-card bg-white rounded-lg overflow-hidden shadow-md">
261
+ <div class="relative pb-48 overflow-hidden">
262
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Data Science">
263
+ </div>
264
+ <div class="p-6">
265
+ <div class="flex items-center">
266
+ <span class="inline-flex px-2 py-1 text-xs font-semibold leading-4 text-green-800 bg-green-100 rounded-full">Popular</span>
267
+ <span class="ml-2 text-xs text-gray-500">60 horas</span>
268
+ </div>
269
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">Data Science do Zero</h3>
270
+ <p class="mt-2 text-gray-600">Domine Python, Pandas, NumPy, Matplotlib, Machine Learning e análise de dados.</p>
271
+ <div class="mt-4 flex items-center">
272
+ <div class="flex-shrink-0">
273
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instrutor">
274
+ </div>
275
+ <div class="ml-3">
276
+ <p class="text-sm font-medium text-gray-900">Carlos Mendes</p>
277
+ <p class="text-sm text-gray-500">Cientista de Dados</p>
278
+ </div>
279
+ </div>
280
+ <div class="mt-6 flex items-center justify-between">
281
+ <span class="text-2xl font-bold text-gray-900">R$ 399,90</span>
282
+ <button class="btn-primary px-4 py-2 rounded-md text-white font-medium">Inscrever-se</button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Course 3 -->
288
+ <div class="course-card bg-white rounded-lg overflow-hidden shadow-md">
289
+ <div class="relative pb-48 overflow-hidden">
290
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="UX/UI Design">
291
+ </div>
292
+ <div class="p-6">
293
+ <div class="flex items-center">
294
+ <span class="inline-flex px-2 py-1 text-xs font-semibold leading-4 text-purple-800 bg-purple-100 rounded-full">Melhor avaliado</span>
295
+ <span class="ml-2 text-xs text-gray-500">35 horas</span>
296
+ </div>
297
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">UX/UI Design Completo</h3>
298
+ <p class="mt-2 text-gray-600">Aprenda design thinking, prototipagem, Figma e princípios de experiência do usuário.</p>
299
+ <div class="mt-4 flex items-center">
300
+ <div class="flex-shrink-0">
301
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Instrutora">
302
+ </div>
303
+ <div class="ml-3">
304
+ <p class="text-sm font-medium text-gray-900">Juliana Almeida</p>
305
+ <p class="text-sm text-gray-500">Designer de Produto</p>
306
+ </div>
307
+ </div>
308
+ <div class="mt-6 flex items-center justify-between">
309
+ <span class="text-2xl font-bold text-gray-900">R$ 349,90</span>
310
+ <button class="btn-primary px-4 py-2 rounded-md text-white font-medium">Inscrever-se</button>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="mt-10 text-center">
317
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
318
+ Ver todos os cursos
319
+ <i class="fas fa-arrow-right ml-2"></i>
320
+ </a>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Testimonials -->
327
+ <div class="bg-white py-16 sm:py-24">
328
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
329
+ <div class="lg:text-center">
330
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Depoimentos</h2>
331
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
332
+ O que nossos alunos dizem
333
+ </p>
334
+ </div>
335
+
336
+ <div class="mt-10">
337
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
338
+ <div class="bg-gray-50 p-6 rounded-lg">
339
+ <div class="flex items-center">
340
+ <div class="flex-shrink-0">
341
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/24.jpg" alt="Aluna">
342
+ </div>
343
+ <div class="ml-4">
344
+ <h3 class="text-lg font-medium text-gray-900">Mariana Costa</h3>
345
+ <p class="text-gray-500">Estudante de Desenvolvimento Web</p>
346
+ </div>
347
+ </div>
348
+ <div class="mt-4">
349
+ <p class="text-gray-600">
350
+ "Os cursos da LearnHub mudaram minha carreira. Em 6 meses consegui meu primeiro emprego como desenvolvedora front-end. O material é atualizado e os instrutores são excelentes!"
351
+ </p>
352
+ <div class="mt-4 flex text-yellow-400">
353
+ <i class="fas fa-star"></i>
354
+ <i class="fas fa-star ml-1"></i>
355
+ <i class="fas fa-star ml-1"></i>
356
+ <i class="fas fa-star ml-1"></i>
357
+ <i class="fas fa-star ml-1"></i>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <div class="bg-gray-50 p-6 rounded-lg">
363
+ <div class="flex items-center">
364
+ <div class="flex-shrink-0">
365
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/41.jpg" alt="Aluno">
366
+ </div>
367
+ <div class="ml-4">
368
+ <h3 class="text-lg font-medium text-gray-900">Ricardo Oliveira</h3>
369
+ <p class="text-gray-500">Analista de Dados</p>
370
+ </div>
371
+ </div>
372
+ <div class="mt-4">
373
+ <p class="text-gray-600">
374
+ "A plataforma tem uma abordagem prática que fez toda diferença no meu aprendizado. Consegui aplicar imediatamente no meu trabalho os conceitos aprendidos no curso de Data Science."
375
+ </p>
376
+ <div class="mt-4 flex text-yellow-400">
377
+ <i class="fas fa-star"></i>
378
+ <i class="fas fa-star ml-1"></i>
379
+ <i class="fas fa-star ml-1"></i>
380
+ <i class="fas fa-star ml-1"></i>
381
+ <i class="fas fa-star ml-1"></i>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="bg-gray-50 p-6 rounded-lg">
387
+ <div class="flex items-center">
388
+ <div class="flex-shrink-0">
389
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/63.jpg" alt="Aluna">
390
+ </div>
391
+ <div class="ml-4">
392
+ <h3 class="text-lg font-medium text-gray-900">Fernanda Santos</h3>
393
+ <p class="text-gray-500">Designer de UX</p>
394
+ </div>
395
+ </div>
396
+ <div class="mt-4">
397
+ <p class="text-gray-600">
398
+ "Depois de fazer o curso de UX/UI na LearnHub, consegui uma promoção na empresa onde trabalho. O conteúdo é completo e os projetos práticos foram essenciais para meu portfólio."
399
+ </p>
400
+ <div class="mt-4 flex text-yellow-400">
401
+ <i class="fas fa-star"></i>
402
+ <i class="fas fa-star ml-1"></i>
403
+ <i class="fas fa-star ml-1"></i>
404
+ <i class="fas fa-star ml-1"></i>
405
+ <i class="fas fa-star ml-1"></i>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- CTA Section -->
415
+ <div class="bg-indigo-700">
416
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
417
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
418
+ <span class="block">Pronto para transformar sua carreira?</span>
419
+ <span class="block text-indigo-200">Comece hoje mesmo.</span>
420
+ </h2>
421
+ <p class="mt-4 text-lg leading-6 text-indigo-200">
422
+ Acesso ilimitado a todos os cursos por um preço único. 7 dias de garantia ou seu dinheiro de volta.
423
+ </p>
424
+ <a href="#" class="mt-8 w-full 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 sm:w-auto">
425
+ Assinar agora
426
+ <i class="fas fa-arrow-right ml-2"></i>
427
+ </a>
428
+ </div>
429
+ </div>
430
+
431
+ <!-- FAQ Section -->
432
+ <div class="bg-gray-50 py-16 sm:py-24">
433
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
434
+ <div class="lg:text-center">
435
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Dúvidas frequentes</h2>
436
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
437
+ Perguntas mais comuns
438
+ </p>
439
+ </div>
440
+
441
+ <div class="mt-12 max-w-3xl mx-auto">
442
+ <div class="space-y-6">
443
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
444
+ <div class="px-4 py-5 sm:px-6">
445
+ <button class="faq-question flex justify-between w-full text-left focus:outline-none">
446
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Como funciona o acesso aos cursos?</h3>
447
+ <i class="fas fa-chevron-down text-indigo-600 transform transition-transform duration-200"></i>
448
+ </button>
449
+ </div>
450
+ <div class="faq-answer border-t border-gray-200 px-4 py-5 sm:p-0 hidden">
451
+ <div class="px-4 py-5 sm:p-6">
452
+ <p class="text-gray-600">
453
+ Após a compra ou assinatura, você terá acesso imediato a todos os cursos da plataforma. Os cursos incluem videoaulas, materiais complementares, exercícios práticos e certificados de conclusão. Você pode assistir quando e onde quiser, no seu próprio ritmo.
454
+ </p>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
460
+ <div class="px-4 py-5 sm:px-6">
461
+ <button class="faq-question flex justify-between w-full text-left focus:outline-none">
462
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Existe certificado de conclusão?</h3>
463
+ <i class="fas fa-chevron-down text-indigo-600 transform transition-transform duration-200"></i>
464
+ </button>
465
+ </div>
466
+ <div class="faq-answer border-t border-gray-200 px-4 py-5 sm:p-0 hidden">
467
+ <div class="px-4 py-5 sm:p-6">
468
+ <p class="text-gray-600">
469
+ Sim! Todos os cursos oferecem certificado de conclusão após você completar todas as aulas e atividades obrigatórias. Os certificados podem ser compartilhados no LinkedIn e adicionados ao seu currículo.
470
+ </p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
476
+ <div class="px-4 py-5 sm:px-6">
477
+ <button class="faq-question flex justify-between w-full text-left focus:outline-none">
478
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Posso assistir no celular?</h3>
479
+ <i class="fas fa-chevron-down text-indigo-600 transform transition-transform duration-200"></i>
480
+ </button>
481
+ </div>
482
+ <div class="faq-answer border-t border-gray-200 px-4 py-5 sm:p-0 hidden">
483
+ <div class="px-4 py-5 sm:p-6">
484
+ <p class="text-gray-600">
485
+ Com certeza! Nossa plataforma é totalmente responsiva e funciona perfeitamente em smartphones, tablets e computadores. Você pode baixar as aulas no app para assistir offline quando não tiver conexão com a internet.
486
+ </p>
487
+ </div>
488
+ </div>
489
+ </div>
490
+
491
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
492
+ <div class="px-4 py-5 sm:px-6">
493
+ <button class="faq-question flex justify-between w-full text-left focus:outline-none">
494
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Como funciona a garantia de 7 dias?</h3>
495
+ <i class="fas fa-chevron-down text-indigo-600 transform transition-transform duration-200"></i>
496
+ </button>
497
+ </div>
498
+ <div class="faq-answer border-t border-gray-200 px-4 py-5 sm:p-0 hidden">
499
+ <div class="px-4 py-5 sm:p-6">
500
+ <p class="text-gray-600">
501
+ Se por qualquer motivo você não ficar satisfeito com os cursos nos primeiros 7 dias após a compra, basta enviar um e-mail para nosso suporte que devolvemos 100% do seu dinheiro, sem burocracia. Não pedimos justificativa.
502
+ </p>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Footer -->
512
+ <footer class="bg-gray-800">
513
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
514
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
515
+ <div>
516
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">LearnHub</h3>
517
+ <ul class="mt-4 space-y-4">
518
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Sobre nós</a></li>
519
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Carreiras</a></li>
520
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
521
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Parcerias</a></li>
522
+ </ul>
523
+ </div>
524
+
525
+ <div>
526
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Cursos</h3>
527
+ <ul class="mt-4 space-y-4">
528
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Todos os cursos</a></li>
529
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Tecnologia</a></li>
530
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Negócios</a></li>
531
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Design</a></li>
532
+ </ul>
533
+ </div>
534
+
535
+ <div>
536
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Suporte</h3>
537
+ <ul class="mt-4 space-y-4">
538
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Central de Ajuda</a></li>
539
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contato</a></li>
540
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Termos de Uso</a></li>
541
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Política de Privacidade</a></li>
542
+ </ul>
543
+ </div>
544
+
545
+ <div>
546
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Inscreva-se</h3>
547
+ <p class="mt-4 text-base text-gray-300">
548
+ Receba novidades e ofertas exclusivas no seu e-mail.
549
+ </p>
550
+ <form class="mt-4 sm:flex">
551
+ <label for="email" class="sr-only">Email</label>
552
+ <input id="email" type="email" required class="w-full px-5 py-3 placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:outline-none sm:max-w-xs rounded-md" placeholder="Seu e-mail">
553
+ <button type="submit" class="mt-3 w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:flex-shrink-0">
554
+ Enviar
555
+ </button>
556
+ </form>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col items-center">
561
+ <div class="flex space-x-6">
562
+ <a href="#" class="text-gray-400 hover:text-white">
563
+ <i class="fab fa-facebook-f"></i>
564
+ </a>
565
+ <a href="#" class="text-gray-400 hover:text-white">
566
+ <i class="fab fa-instagram"></i>
567
+ </a>
568
+ <a href="#" class="text-gray-400 hover:text-white">
569
+ <i class="fab fa-twitter"></i>
570
+ </a>
571
+ <a href="#" class="text-gray-400 hover:text-white">
572
+ <i class="fab fa-linkedin-in"></i>
573
+ </a>
574
+ <a href="#" class="text-gray-400 hover:text-white">
575
+ <i class="fab fa-youtube"></i>
576
+ </a>
577
+ </div>
578
+ <p class="mt-8 text-base text-gray-400 text-center">
579
+ &copy; 2023 LearnHub. Todos os direitos reservados.
580
+ </p>
581
+ </div>
582
+ </div>
583
+ </footer>
584
+
585
+ <script>
586
+ // Mobile menu toggle
587
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
588
+ const menu = document.getElementById('mobile-menu');
589
+ menu.classList.toggle('hidden');
590
+ });
591
+
592
+ // FAQ accordion
593
+ document.querySelectorAll('.faq-question').forEach(button => {
594
+ button.addEventListener('click', () => {
595
+ const answer = button.nextElementSibling;
596
+ const icon = button.querySelector('i');
597
+
598
+ // Toggle answer visibility
599
+ answer.classList.toggle('hidden');
600
+
601
+ // Rotate icon
602
+ icon.classList.toggle('rotate-180');
603
+ });
604
+ });
605
+
606
+ // Smooth scrolling for anchor links
607
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
608
+ anchor.addEventListener('click', function (e) {
609
+ e.preventDefault();
610
+
611
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
612
+ behavior: 'smooth'
613
+ });
614
+ });
615
+ });
616
+ </script>
617
+ <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=mdarlen/learn-hub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
618
+ </html>