Hugging Face's logo

Spaces:
saeidmp
/
codecraft-academy
Running

App Files Community
saeidmp commited on
Commit
5bd3ce9
·
verified ·
1 Parent(s): b7af838

a tuturial front end platform. for learn html css js nextjs react steleve and all of the js framworks

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +444 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codecraft Academy
3
- emoji: 🏢
4
- colorFrom: green
5
- colorTo: yellow
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: CodeCraft Academy 🚀
3
+ colorFrom: yellow
4
+ colorTo: blue
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,445 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeCraft Academy | Master Frontend Development</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 500: '#f97316',
18
+ },
19
+ secondary: {
20
+ 500: '#f59e0b',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ .hero-gradient {
29
+ background: linear-gradient(135deg, rgba(249,115,22,0.1) 0%, rgba(0,0,0,0) 60%);
30
+ }
31
+ .card-hover:hover {
32
+ transform: translateY(-5px);
33
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
34
+ }
35
+ .scroll-snap {
36
+ scroll-snap-type: y mandatory;
37
+ }
38
+ .scroll-snap > section {
39
+ scroll-snap-align: start;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-900 text-gray-100 min-h-screen scroll-snap">
44
+ <!-- Navigation -->
45
+ <nav class="fixed w-full bg-gray-800/90 backdrop-blur-md z-50 border-b border-gray-700">
46
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
47
+ <div class="flex items-center justify-between h-16">
48
+ <div class="flex items-center">
49
+ <div class="flex-shrink-0 flex items-center">
50
+ <i data-feather="code" class="text-amber-500"></i>
51
+ <span class="ml-2 text-xl font-bold text-orange-500">CodeCraft</span>
52
+ </div>
53
+ <div class="hidden md:block">
54
+ <div class="ml-10 flex items-baseline space-x-4">
55
+ <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
56
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Courses</a>
57
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tutorials</a>
58
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Resources</a>
59
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Community</a>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ <div class="hidden md:block">
64
+ <div class="ml-4 flex items-center md:ml-6">
65
+ <button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
66
+ <i data-feather="search"></i>
67
+ </button>
68
+ <button class="ml-4 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
69
+ Sign In
70
+ </button>
71
+ </div>
72
+ </div>
73
+ <div class="-mr-2 flex md:hidden">
74
+ <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
75
+ <i data-feather="menu"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </nav>
81
+
82
+ <!-- Hero Section -->
83
+ <section class="min-h-screen flex items-center hero-gradient pt-16">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
85
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
86
+ <div class="mb-12 lg:mb-0">
87
+ <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-white">
88
+ <span class="block">Master Modern</span>
89
+ <span class="block text-orange-500">Frontend Development</span>
90
+ </h1>
91
+ <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl md:mt-5 md:text-xl">
92
+ Learn HTML, CSS, JavaScript and modern frameworks like React, Next.js and Svelte through interactive tutorials and real-world projects.
93
+ </p>
94
+ <div class="mt-8 flex flex-col sm:flex-row gap-4">
95
+ <a href="#" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-orange-500 hover:bg-orange-600 md:py-4 md:text-lg md:px-10 transition-colors duration-200">
96
+ Start Learning
97
+ </a>
98
+ <a href="#" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-orange-500 bg-gray-800 hover:bg-gray-700 md:py-4 md:text-lg md:px-10 transition-colors duration-200">
99
+ Explore Courses
100
+ </a>
101
+ </div>
102
+ </div>
103
+ <div class="relative">
104
+ <div class="relative bg-gray-800 rounded-xl p-4 shadow-xl">
105
+ <div class="flex items-center bg-gray-700 rounded-t-lg px-4 py-2">
106
+ <div class="flex space-x-2">
107
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
108
+ <div class="w-3 h-3 rounded-full bg-amber-500"></div>
109
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
110
+ </div>
111
+ <div class="text-xs text-gray-400 ml-4">tutorial.js</div>
112
+ </div>
113
+ <pre class="text-xs md:text-sm p-4 overflow-x-auto text-gray-100 font-mono">
114
+ <span class="text-purple-400">import</span> { useState } <span class="text-purple-400">from</span> <span class="text-amber-400">'react'</span>;
115
+
116
+ <span class="text-purple-400">export default</span> <span class="text-blue-400">function</span> <span class="text-yellow-300">Counter</span>() {
117
+ <span class="text-purple-400">const</span> [count, setCount] = useState(<span class="text-amber-400">0</span>);
118
+
119
+ <span class="text-purple-400">return</span> (
120
+ &lt;div className=<span class="text-amber-400">"flex items-center space-x-4"</span>&gt;
121
+ &lt;button
122
+ onClick={<span class="text-blue-400">()</span> <span class="text-purple-400">=></span> setCount(count - <span class="text-amber-400">1</span>)}
123
+ className=<span class="text-amber-400">"px-4 py-2 bg-orange-500 text-white rounded"</span>
124
+ &gt;
125
+ Decrement
126
+ &lt;/button&gt;
127
+ &lt;span className=<span class="text-amber-400">"text-xl"</span>&gt;{count}&lt;/span&gt;
128
+ &lt;button
129
+ onClick={<span class="text-blue-400">()</span> <span class="text-purple-400">=></span> setCount(count + <span class="text-amber-400">1</span>)}
130
+ className=<span class="text-amber-400">"px-4 py-2 bg-orange-500 text-white rounded"</span>
131
+ &gt;
132
+ Increment
133
+ &lt;/button&gt;
134
+ &lt;/div&gt;
135
+ );
136
+ }</pre>
137
+ <div class="absolute -bottom-4 -right-4 bg-gray-900 p-4 rounded-lg shadow-lg border border-gray-700">
138
+ <div class="flex items-center space-x-2">
139
+ <div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center">
140
+ <i data-feather="play" class="w-4 h-4 text-white"></i>
141
+ </div>
142
+ <span class="text-sm font-medium">Run Code</span>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </section>
150
+
151
+ <!-- Technologies Section -->
152
+ <section class="min-h-screen bg-gray-800 flex items-center py-16">
153
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
154
+ <div class="text-center mb-16">
155
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
156
+ <span class="block">Learn the Modern</span>
157
+ <span class="block text-orange-500">Web Development Stack</span>
158
+ </h2>
159
+ <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto">
160
+ From fundamentals to advanced concepts, we cover everything you need to become a professional frontend developer.
161
+ </p>
162
+ </div>
163
+
164
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
165
+ <div class="bg-gray-700 rounded-lg p-6 flex flex-col items-center transition-transform duration-300 card-hover">
166
+ <div class="w-16 h-16 bg-gray-600 rounded-full flex items-center justify-center mb-4">
167
+ <i data-feather="file-text" class="text-orange-500 w-8 h-8"></i>
168
+ </div>
169
+ <h3 class="text-lg font-medium text-white mb-2">HTML5</h3>
170
+ <p class="text-gray-300 text-center text-sm">The foundation of all web content</p>
171
+ </div>
172
+ <div class="bg-gray-700 rounded-lg p-6 flex flex-col items-center transition-transform duration-300 card-hover">
173
+ <div class="w-16 h-16 bg-gray-600 rounded-full flex items-center justify-center mb-4">
174
+ <i data-feather="layers" class="text-orange-500 w-8 h-8"></i>
175
+ </div>
176
+ <h3 class="text-lg font-medium text-white mb-2">CSS3</h3>
177
+ <p class="text-gray-300 text-center text-sm">Styling and layout for modern websites</p>
178
+ </div>
179
+ <div class="bg-gray-700 rounded-lg p-6 flex flex-col items-center transition-transform duration-300 card-hover">
180
+ <div class="w-16 h-16 bg-gray-600 rounded-full flex items-center justify-center mb-4">
181
+ <i data-feather="code" class="text-orange-500 w-8 h-8"></i>
182
+ </div>
183
+ <h3 class="text-lg font-medium text-white mb-2">JavaScript</h3>
184
+ <p class="text-gray-300 text-center text-sm">The language of the web</p>
185
+ </div>
186
+ <div class="bg-gray-700 rounded-lg p-6 flex flex-col items-center transition-transform duration-300 card-hover">
187
+ <div class="w-16 h-16 bg-gray-600 rounded-full flex items-center justify-center mb-4">
188
+ <i data-feather="react" class="text-orange-500 w-8 h-8"></i>
189
+ </div>
190
+ <h3 class="text-lg font-medium text-white mb-2">React</h3>
191
+ <p class="text-gray-300 text-center text-sm">The most popular frontend library</p>
192
+ </div>
193
+ <div class="bg-gray-700 rounded-lg p-6 flex flex-col items-center transition-transform duration-300 card-hover">
194
+ <div class="w-16 h-16 bg-gray-600 rounded-full flex items-center justify-center mb-4">
195
+ <i data-feather="arrow-right-circle" class="text-orange-500 w-8 h-8"></i>
196
+ </div>
197
+ <h3 class="text-lg font-medium text-white mb-2">Next.js</h3>
198
+ <p class="text-gray-300 text-center text-sm">React framework for production</p>
199
+ </div>
200
+ <div class="bg-gray-700 rounded-lg p-6 flex flex-col items-center transition-transform duration-300 card-hover">
201
+ <div class="w-16 h-16 bg-gray-600 rounded-full flex items-center justify-center mb-4">
202
+ <i data-feather="zap" class="text-orange-500 w-8 h-8"></i>
203
+ </div>
204
+ <h3 class="text-lg font-medium text-white mb-2">Svelte</h3>
205
+ <p class="text-gray-300 text-center text-sm">Cybernetically enhanced web apps</p>
206
+ </div>
207
+ <div class="bg-gray-700 rounded-lg p-6 flex flex-col items-center transition-transform duration-300 card-hover">
208
+ <div class="w-16 h-16 bg-gray-600 rounded-full flex items-center justify-center mb-4">
209
+ <i data-feather="package" class="text-orange-500 w-8 h-8"></i>
210
+ </div>
211
+ <h3 class="text-lg font-medium text-white mb-2">Node.js</h3>
212
+ <p class="text-gray-300 text-center text-sm">JavaScript runtime environment</p>
213
+ </div>
214
+ <div class="bg-gray-700 rounded-lg p-6 flex flex-col items-center transition-transform duration-300 card-hover">
215
+ <div class="w-16 h-16 bg-gray-600 rounded-full flex items-center justify-center mb-4">
216
+ <i data-feather="git-merge" class="text-orange-500 w-8 h-8"></i>
217
+ </div>
218
+ <h3 class="text-lg font-medium text-white mb-2">Git & GitHub</h3>
219
+ <p class="text-gray-300 text-center text-sm">Version control and collaboration</p>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </section>
224
+
225
+ <!-- Features Section -->
226
+ <section class="min-h-screen bg-gray-900 flex items-center py-16">
227
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
228
+ <div class="lg:text-center">
229
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
230
+ <span class="block">Why Learn With</span>
231
+ <span class="block text-orange-500">CodeCraft Academy?</span>
232
+ </h2>
233
+ <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">
234
+ Our approach to learning frontend development is different from traditional methods.
235
+ </p>
236
+ </div>
237
+
238
+ <div class="mt-20">
239
+ <div class="space-y-10 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10">
240
+ <div class="bg-gray-800 rounded-xl p-8 transition-transform duration-300 card-hover">
241
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mb-4">
242
+ <i data-feather="monitor" class="w-6 h-6"></i>
243
+ </div>
244
+ <h3 class="text-lg leading-6 font-medium text-white mb-2">Interactive Coding</h3>
245
+ <p class="mt-2 text-base text-gray-300">
246
+ Learn by doing with our in-browser coding environment. See results instantly as you write code.
247
+ </p>
248
+ </div>
249
+
250
+ <div class="bg-gray-800 rounded-xl p-8 transition-transform duration-300 card-hover">
251
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mb-4">
252
+ <i data-feather="book-open" class="w-6 h-6"></i>
253
+ </div>
254
+ <h3 class="text-lg leading-6 font-medium text-white mb-2">Project-Based Learning</h3>
255
+ <p class="mt-2 text-base text-gray-300">
256
+ Build real-world projects that you can add to your portfolio and show to employers.
257
+ </p>
258
+ </div>
259
+
260
+ <div class="bg-gray-800 rounded-xl p-8 transition-transform duration-300 card-hover">
261
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mb-4">
262
+ <i data-feather="users" class="w-6 h-6"></i>
263
+ </div>
264
+ <h3 class="text-lg leading-6 font-medium text-white mb-2">Community Support</h3>
265
+ <p class="mt-2 text-base text-gray-300">
266
+ Join our active community of learners and get help when you're stuck.
267
+ </p>
268
+ </div>
269
+
270
+ <div class="bg-gray-800 rounded-xl p-8 transition-transform duration-300 card-hover">
271
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mb-4">
272
+ <i data-feather="clock" class="w-6 h-6"></i>
273
+ </div>
274
+ <h3 class="text-lg leading-6 font-medium text-white mb-2">Self-Paced Learning</h3>
275
+ <p class="mt-2 text-base text-gray-300">
276
+ Learn at your own pace with our structured curriculum. No deadlines, no pressure.
277
+ </p>
278
+ </div>
279
+
280
+ <div class="bg-gray-800 rounded-xl p-8 transition-transform duration-300 card-hover">
281
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mb-4">
282
+ <i data-feather="award" class="w-6 h-6"></i>
283
+ </div>
284
+ <h3 class="text-lg leading-6 font-medium text-white mb-2">Certification</h3>
285
+ <p class="mt-2 text-base text-gray-300">
286
+ Earn certificates to showcase your skills to potential employers.
287
+ </p>
288
+ </div>
289
+
290
+ <div class="bg-gray-800 rounded-xl p-8 transition-transform duration-300 card-hover">
291
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mb-4">
292
+ <i data-feather="briefcase" class="w-6 h-6"></i>
293
+ </div>
294
+ <h3 class="text-lg leading-6 font-medium text-white mb-2">Career Guidance</h3>
295
+ <p class="mt-2 text-base text-gray-300">
296
+ Get career advice and interview preparation to land your dream job.
297
+ </p>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </section>
303
+
304
+ <!-- CTA Section -->
305
+ <section class="bg-gray-800 py-16">
306
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
307
+ <div class="bg-gradient-to-r from-orange-500 to-amber-500 rounded-xl shadow-xl overflow-hidden">
308
+ <div class="px-6 py-12 sm:px-16 sm:py-20 lg:py-24 lg:px-24">
309
+ <div class="lg:flex lg:items-center lg:justify-between">
310
+ <div class="lg:w-0 lg:flex-1">
311
+ <h2 class="text-3xl font-extrabold text-white">
312
+ Ready to start your coding journey?
313
+ </h2>
314
+ <p class="mt-4 max-w-3xl text-lg text-amber-100">
315
+ Join thousands of students who have transformed their careers with CodeCraft Academy.
316
+ </p>
317
+ </div>
318
+ <div class="mt-8 lg:mt-0 lg:ml-8">
319
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-orange-500 bg-white hover:bg-gray-50 transition-colors duration-200">
320
+ Get Started for Free
321
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
322
+ </a>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </section>
329
+
330
+ <!-- Footer -->
331
+ <footer class="bg-gray-900 border-t border-gray-800">
332
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
333
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
334
+ <div class="col-span-2">
335
+ <div class="flex items-center">
336
+ <i data-feather="code" class="text-amber-500"></i>
337
+ <span class="ml-2 text-xl font-bold text-orange-500">CodeCraft</span>
338
+ </div>
339
+ <p class="mt-4 text-gray-300 text-sm">
340
+ The most effective way to learn modern frontend development. Join our community of over 50,000 developers.
341
+ </p>
342
+ <div class="mt-6 flex space-x-6">
343
+ <a href="#" class="text-gray-400 hover:text-white">
344
+ <i data-feather="twitter" class="w-5 h-5"></i>
345
+ </a>
346
+ <a href="#" class="text-gray-400 hover:text-white">
347
+ <i data-feather="github" class="w-5 h-5"></i>
348
+ </a>
349
+ <a href="#" class="text-gray-400 hover:text-white">
350
+ <i data-feather="youtube" class="w-5 h-5"></i>
351
+ </a>
352
+ <a href="#" class="text-gray-400 hover:text-white">
353
+ <i data-feather="linkedin" class="w-5 h-5"></i>
354
+ </a>
355
+ </div>
356
+ </div>
357
+ <div>
358
+ <h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
359
+ Learn
360
+ </h3>
361
+ <ul class="mt-4 space-y-4">
362
+ <li>
363
+ <a href="#" class="text-base text-gray-300 hover:text-white">
364
+ Courses
365
+ </a>
366
+ </li>
367
+ <li>
368
+ <a href="#" class="text-base text-gray-300 hover:text-white">
369
+ Tutorials
370
+ </a>
371
+ </li>
372
+ <li>
373
+ <a href="#" class="text-base text-gray-300 hover:text-white">
374
+ Roadmaps
375
+ </a>
376
+ </li>
377
+ <li>
378
+ <a href="#" class="text-base text-gray-300 hover:text-white">
379
+ Challenges
380
+ </a>
381
+ </li>
382
+ </ul>
383
+ </div>
384
+ <div>
385
+ <h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
386
+ Community
387
+ </h3>
388
+ <ul class="mt-4 space-y-4">
389
+ <li>
390
+ <a href="#" class="text-base text-gray-300 hover:text-white">
391
+ Forum
392
+ </a>
393
+ </li>
394
+ <li>
395
+ <a href="#" class="text-base text-gray-300 hover:text-white">
396
+ Discord
397
+ </a>
398
+ </li>
399
+ <li>
400
+ <a href="#" class="text-base text-gray-300 hover:text-white">
401
+ Events
402
+ </a>
403
+ </li>
404
+ <li>
405
+ <a href="#" class="text-base text-gray-300 hover:text-white">
406
+ Blog
407
+ </a>
408
+ </li>
409
+ </ul>
410
+ </div>
411
+ </div>
412
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
413
+ <p class="text-gray-400 text-sm">
414
+ &copy; 2023 CodeCraft Academy. All rights reserved.
415
+ </p>
416
+ <div class="mt-4 md:mt-0 flex space-x-6">
417
+ <a href="#" class="text-gray-400 hover:text-white text-sm">
418
+ Privacy Policy
419
+ </a>
420
+ <a href="#" class="text-gray-400 hover:text-white text-sm">
421
+ Terms of Service
422
+ </a>
423
+ <a href="#" class="text-gray-400 hover:text-white text-sm">
424
+ Contact Us
425
+ </a>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </footer>
430
+
431
+ <script>
432
+ feather.replace();
433
+
434
+ // Smooth scrolling for anchor links
435
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
436
+ anchor.addEventListener('click', function (e) {
437
+ e.preventDefault();
438
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
439
+ behavior: 'smooth'
440
+ });
441
+ });
442
+ });
443
+ </script>
444
+ </body>
445
  </html>