Hugging Face's logo

Spaces:
creative888
/
replit-clone
Running

App Files Community
creative888 commited on
Commit
ffed4ea
·
verified ·
1 Parent(s): 48f2bb6

make it interactive and fully functional, like how a multi page webapp should be.

Browse files
Files changed (6) hide show
  1. community.html +209 -0
  2. docs.html +140 -0
  3. editor.html +163 -0
  4. index.html +19 -22
  5. support.html +107 -0
  6. tutorials.html +181 -0
community.html ADDED
@@ -0,0 +1,209 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Community - Replit Clone</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#0088CC',
16
+ secondary: '#1F2937'
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ </head>
23
+ <body class="bg-gray-50">
24
+ <custom-navbar></custom-navbar>
25
+
26
+ <div class="container mx-auto px-4 py-8">
27
+ <div class="flex flex-col lg:flex-row gap-8">
28
+ <!-- Main Content -->
29
+ <div class="lg:w-3/4">
30
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
31
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Community</h1>
32
+ <p class="text-gray-600 mb-6">Connect with developers, share knowledge, and collaborate on projects</p>
33
+
34
+ <div class="flex flex-wrap gap-4 mb-8">
35
+ <button class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all">
36
+ <i data-feather="plus"></i>
37
+ New Post
38
+ </button>
39
+ <button class="bg-secondary hover:bg-gray-800 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all">
40
+ <i data-feather="users"></i>
41
+ Join Group
42
+ </button>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Community Posts -->
47
+ <div class="space-y-6">
48
+ <div class="bg-white rounded-xl shadow-md p-6">
49
+ <div class="flex items-start gap-4 mb-4">
50
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center text-white font-bold">JD</div>
51
+ <div>
52
+ <h3 class="font-bold">Jane Doe</h3>
53
+ <p class="text-gray-500 text-sm">Posted 2 hours ago</p>
54
+ </div>
55
+ </div>
56
+ <h2 class="text-xl font-bold text-gray-800 mb-3">Just built my first React app with Replit Clone!</h2>
57
+ <p class="text-gray-600 mb-4">I'm excited to share that I just completed my first React application using Replit Clone. The integrated environment made it so easy to get started without any setup. Check out my project and let me know what you think!</p>
58
+ <div class="flex gap-4 mb-4">
59
+ <button class="flex items-center gap-1 text-gray-500 hover:text-primary">
60
+ <i data-feather="heart" class="w-4 h-4"></i>
61
+ <span>24</span>
62
+ </button>
63
+ <button class="flex items-center gap-1 text-gray-500 hover:text-primary">
64
+ <i data-feather="message-circle" class="w-4 h-4"></i>
65
+ <span>8</span>
66
+ </button>
67
+ <button class="flex items-center gap-1 text-gray-500 hover:text-primary">
68
+ <i data-feather="share" class="w-4 h-4"></i>
69
+ <span>Share</span>
70
+ </button>
71
+ </div>
72
+ </div>
73
+
74
+ <div class="bg-white rounded-xl shadow-md p-6">
75
+ <div class="flex items-start gap-4 mb-4">
76
+ <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-teal-500 rounded-full flex items-center justify-center text-white font-bold">AS</div>
77
+ <div>
78
+ <h3 class="font-bold">Alex Smith</h3>
79
+ <p class="text-gray-500 text-sm">Posted yesterday</p>
80
+ </div>
81
+ </div>
82
+ <h2 class="text-xl font-bold text-gray-800 mb-3">Tips for optimizing Python code in Replit</h2>
83
+ <p class="text-gray-600 mb-4">After spending some time with Replit Clone, I've discovered several tips for making Python code run faster and more efficiently. Here are my top 5 recommendations for anyone working on data processing projects...</p>
84
+ <div class="flex gap-4 mb-4">
85
+ <button class="flex items-center gap-1 text-gray-500 hover:text-primary">
86
+ <i data-feather="heart" class="w-4 h-4"></i>
87
+ <span>42</span>
88
+ </button>
89
+ <button class="flex items-center gap-1 text-gray-500 hover:text-primary">
90
+ <i data-feather="message-circle" class="w-4 h-4"></i>
91
+ <span>15</span>
92
+ </button>
93
+ <button class="flex items-center gap-1 text-gray-500 hover:text-primary">
94
+ <i data-feather="share" class="w-4 h-4"></i>
95
+ <span>Share</span>
96
+ </button>
97
+ </div>
98
+ </div>
99
+
100
+ <div class="bg-white rounded-xl shadow-md p-6">
101
+ <div class="flex items-start gap-4 mb-4">
102
+ <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center text-white font-bold">MP</div>
103
+ <div>
104
+ <h3 class="font-bold">Michael Park</h3>
105
+ <p class="text-gray-500 text-sm">Posted 3 days ago</p>
106
+ </div>
107
+ </div>
108
+ <h2 class="text-xl font-bold text-gray-800 mb-3">Showcase: Interactive Data Visualization Dashboard</h2>
109
+ <p class="text-gray-600 mb-4">I've been working on a data visualization dashboard using D3.js and Replit Clone. The live preview feature was incredibly helpful during development. Here's a screenshot of the final product and some insights on the process...</p>
110
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-64 mb-4"></div>
111
+ <div class="flex gap-4 mb-4">
112
+ <button class="flex items-center gap-1 text-gray-500 hover:text-primary">
113
+ <i data-feather="heart" class="w-4 h-4"></i>
114
+ <span>56</span>
115
+ </button>
116
+ <button class="flex items-center gap-1 text-gray-500 hover:text-primary">
117
+ <i data-feather="message-circle" class="w-4 h-4"></i>
118
+ <span>22</span>
119
+ </button>
120
+ <button class="flex items-center gap-1 text-gray-500 hover:text-primary">
121
+ <i data-feather="share" class="w-4 h-4"></i>
122
+ <span>Share</span>
123
+ </button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Sidebar -->
130
+ <div class="lg:w-1/4">
131
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
132
+ <h3 class="font-bold text-lg mb-4">Trending Topics</h3>
133
+ <ul class="space-y-3">
134
+ <li>
135
+ <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
136
+ <span class="w-6 h-6 bg-blue-100 text-blue-800 rounded-full flex items-center justify-center text-xs">#</span>
137
+ <span>JavaScript</span>
138
+ </a>
139
+ </li>
140
+ <li>
141
+ <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
142
+ <span class="w-6 h-6 bg-green-100 text-green-800 rounded-full flex items-center justify-center text-xs">#</span>
143
+ <span>Python</span>
144
+ </a>
145
+ </li>
146
+ <li>
147
+ <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
148
+ <span class="w-6 h-6 bg-purple-100 text-purple-800 rounded-full flex items-center justify-center text-xs">#</span>
149
+ <span>React</span>
150
+ </a>
151
+ </li>
152
+ <li>
153
+ <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
154
+ <span class="w-6 h-6 bg-yellow-100 text-yellow-800 rounded-full flex items-center justify-center text-xs">#</span>
155
+ <span>CSS</span>
156
+ </a>
157
+ </li>
158
+ <li>
159
+ <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
160
+ <span class="w-6 h-6 bg-red-100 text-red-800 rounded-full flex items-center justify-center text-xs">#</span>
161
+ <span>Node.js</span>
162
+ </a>
163
+ </li>
164
+ </ul>
165
+ </div>
166
+
167
+ <div class="bg-white rounded-xl shadow-md p-6">
168
+ <h3 class="font-bold text-lg mb-4">Popular Groups</h3>
169
+ <div class="space-y-4">
170
+ <div class="flex items-center gap-3">
171
+ <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-lg"></div>
172
+ <div>
173
+ <h4 class="font-bold text-sm">Frontend Developers</h4>
174
+ <p class="text-gray-500 text-xs">12.4k members</p>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="flex items-center gap-3">
179
+ <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-emerald-500 rounded-lg"></div>
180
+ <div>
181
+ <h4 class="font-bold text-sm">Python Enthusiasts</h4>
182
+ <p class="text-gray-500 text-xs">8.7k members</p>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="flex items-center gap-3">
187
+ <div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-fuchsia-500 rounded-lg"></div>
188
+ <div>
189
+ <h4 class="font-bold text-sm">Full Stack Builders</h4>
190
+ <p class="text-gray-500 text-xs">15.2k members</p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ <button class="w-full mt-4 text-primary font-medium text-sm">View All Groups</button>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <custom-footer></custom-footer>
201
+
202
+ <script src="components/navbar.js"></script>
203
+ <script src="components/footer.js"></script>
204
+ <script src="script.js"></script>
205
+ <script>
206
+ feather.replace();
207
+ </script>
208
+ </body>
209
+ </html>
docs.html ADDED
@@ -0,0 +1,140 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Documentation - Replit Clone</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#0088CC',
16
+ secondary: '#1F2937'
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ </head>
23
+ <body class="bg-gray-50">
24
+ <custom-navbar></custom-navbar>
25
+
26
+ <div class="container mx-auto px-4 py-8">
27
+ <div class="flex flex-col lg:flex-row gap-8">
28
+ <!-- Sidebar Navigation -->
29
+ <div class="lg:w-1/4">
30
+ <div class="bg-white rounded-xl shadow-md p-6 sticky top-24">
31
+ <h3 class="font-bold text-lg mb-4">Documentation</h3>
32
+ <ul class="space-y-2">
33
+ <li><a href="#getting-started" class="text-primary font-medium">Getting Started</a></li>
34
+ <li><a href="#creating-repls" class="text-gray-600 hover:text-primary">Creating Repls</a></li>
35
+ <li><a href="#languages" class="text-gray-600 hover:text-primary">Supported Languages</a></li>
36
+ <li><a href="#collaboration" class="text-gray-600 hover:text-primary">Collaboration</a></li>
37
+ <li><a href="#deployment" class="text-gray-600 hover:text-primary">Deployment</a></li>
38
+ <li><a href="#templates" class="text-gray-600 hover:text-primary">Templates</a></li>
39
+ <li><a href="#api" class="text-gray-600 hover:text-primary">API Reference</a></li>
40
+ </ul>
41
+ </div>
42
+ </div>
43
+
44
+ <!-- Main Content -->
45
+ <div class="lg:w-3/4">
46
+ <div class="bg-white rounded-xl shadow-md p-8">
47
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Documentation</h1>
48
+ <p class="text-gray-600 mb-8">Learn how to use Replit Clone to build amazing applications</p>
49
+
50
+ <div id="getting-started" class="mb-12">
51
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Getting Started</h2>
52
+ <p class="text-gray-600 mb-4">Welcome to Replit Clone! This guide will help you get started with building your first application.</p>
53
+
54
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
55
+ <p class="text-blue-700">Tip: You don't need to install anything to get started. Everything runs in your browser!</p>
56
+ </div>
57
+
58
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Creating Your First Repl</h3>
59
+ <ol class="list-decimal list-inside space-y-2 text-gray-600 mb-6">
60
+ <li>Click the "Create Repl" button on the homepage</li>
61
+ <li>Choose a template or start from scratch</li>
62
+ <li>Name your project and select a programming language</li>
63
+ <li>Start coding in the editor</li>
64
+ </ol>
65
+
66
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Interface Overview</h3>
67
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
68
+ <div class="border border-gray-200 rounded-lg p-4">
69
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-3"></div>
70
+ <h4 class="font-bold mb-2">Editor</h4>
71
+ <p class="text-gray-600 text-sm">Write and edit your code with syntax highlighting</p>
72
+ </div>
73
+ <div class="border border-gray-200 rounded-lg p-4">
74
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-3"></div>
75
+ <h4 class="font-bold mb-2">Console</h4>
76
+ <p class="text-gray-600 text-sm">See output and debug information</p>
77
+ </div>
78
+ <div class="border border-gray-200 rounded-lg p-4">
79
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-3"></div>
80
+ <h4 class="font-bold mb-2">Preview</h4>
81
+ <p class="text-gray-600 text-sm">View your application in real-time</p>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <div id="creating-repls" class="mb-12">
87
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Creating Repls</h2>
88
+ <p class="text-gray-600 mb-4">Repls are the core of Replit Clone. Each repl contains all the files and configuration needed for your project.</p>
89
+
90
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">From Scratch</h3>
91
+ <p class="text-gray-600 mb-4">Start with a blank canvas and build your project from the ground up.</p>
92
+
93
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Using Templates</h3>
94
+ <p class="text-gray-600 mb-4">Jumpstart your development with pre-built templates for popular frameworks and languages.</p>
95
+
96
+ <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6">
97
+ <p class="text-green-700">Pro Tip: You can save your own projects as templates for future use!</p>
98
+ </div>
99
+ </div>
100
+
101
+ <div id="languages" class="mb-12">
102
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Supported Languages</h2>
103
+ <p class="text-gray-600 mb-4">Replit Clone supports over 50 programming languages:</p>
104
+
105
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
106
+ <div class="flex items-center gap-2">
107
+ <div class="w-3 h-3 bg-yellow-400 rounded-full"></div>
108
+ <span>JavaScript</span>
109
+ </div>
110
+ <div class="flex items-center gap-2">
111
+ <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
112
+ <span>Python</span>
113
+ </div>
114
+ <div class="flex items-center gap-2">
115
+ <div class="w-3 h-3 bg-red-500 rounded-full"></div>
116
+ <span>HTML/CSS</span>
117
+ </div>
118
+ <div class="flex items-center gap-2">
119
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
120
+ <span>Java</span>
121
+ </div>
122
+ </div>
123
+
124
+ <p class="text-gray-600">More languages are added regularly based on community demand.</p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <custom-footer></custom-footer>
132
+
133
+ <script src="components/navbar.js"></script>
134
+ <script src="components/footer.js"></script>
135
+ <script src="script.js"></script>
136
+ <script>
137
+ feather.replace();
138
+ </script>
139
+ </body>
140
+ </html>
editor.html ADDED
@@ -0,0 +1,163 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Editor - Replit Clone</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#0088CC',
17
+ secondary: '#1F2937'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-gray-900 text-gray-100">
25
+ <custom-navbar></custom-navbar>
26
+
27
+ <div class="flex h-screen">
28
+ <!-- Sidebar -->
29
+ <div class="w-64 bg-gray-800 flex flex-col">
30
+ <div class="p-4 border-b border-gray-700">
31
+ <h2 class="font-bold text-lg truncate" id="projectName">Project Name</h2>
32
+ <p class="text-gray-400 text-sm">JavaScript</p>
33
+ </div>
34
+
35
+ <div class="flex-1 overflow-y-auto">
36
+ <div class="p-2">
37
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded cursor-pointer">
38
+ <div class="flex items-center gap-2">
39
+ <i data-feather="folder" class="w-4 h-4 text-blue-400"></i>
40
+ <span>src</span>
41
+ </div>
42
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
43
+ </div>
44
+ <div class="ml-6">
45
+ <div class="flex items-center gap-2 p-2 hover:bg-gray-700 rounded cursor-pointer">
46
+ <i data-feather="file" class="w-4 h-4 text-yellow-400"></i>
47
+ <span>index.js</span>
48
+ </div>
49
+ <div class="flex items-center gap-2 p-2 hover:bg-gray-700 rounded cursor-pointer">
50
+ <i data-feather="file" class="w-4 h-4 text-blue-400"></i>
51
+ <span>styles.css</span>
52
+ </div>
53
+ </div>
54
+
55
+ <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded cursor-pointer">
56
+ <div class="flex items-center gap-2">
57
+ <i data-feather="folder" class="w-4 h-4 text-blue-400"></i>
58
+ <span>public</span>
59
+ </div>
60
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
61
+ </div>
62
+ <div class="ml-6">
63
+ <div class="flex items-center gap-2 p-2 hover:bg-gray-700 rounded cursor-pointer">
64
+ <i data-feather="file" class="w-4 h-4 text-green-400"></i>
65
+ <span>index.html</span>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="p-4 border-t border-gray-700">
72
+ <button class="w-full bg-primary hover:bg-blue-600 text-white py-2 rounded-lg flex items-center justify-center gap-2">
73
+ <i data-feather="play"></i>
74
+ Run
75
+ </button>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Main Editor Area -->
80
+ <div class="flex-1 flex flex-col">
81
+ <!-- Editor Tabs -->
82
+ <div class="flex bg-gray-800 border-b border-gray-700">
83
+ <div class="px-4 py-2 bg-gray-700 border-r border-gray-600 flex items-center gap-2">
84
+ <i data-feather="file" class="w-4 h-4"></i>
85
+ <span>index.js</span>
86
+ <i data-feather="x" class="w-4 h-4 cursor-pointer hover:bg-gray-600 rounded"></i>
87
+ </div>
88
+ <div class="px-4 py-2 flex items-center gap-2 text-gray-400 hover:bg-gray-700 cursor-pointer">
89
+ <i data-feather="plus" class="w-4 h-4"></i>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Monaco Editor Container -->
94
+ <div id="editor" class="flex-1"></div>
95
+
96
+ <!-- Console Output -->
97
+ <div class="h-48 bg-black border-t border-gray-700 flex flex-col">
98
+ <div class="flex items-center justify-between p-2 bg-gray-800">
99
+ <div class="flex items-center gap-4">
100
+ <span class="font-medium">Console</span>
101
+ <div class="flex gap-2">
102
+ <button class="text-gray-400 hover:text-white">
103
+ <i data-feather="terminal" class="w-4 h-4"></i>
104
+ </button>
105
+ <button class="text-gray-400 hover:text-white">
106
+ <i data-feather="layers" class="w-4 h-4"></i>
107
+ </button>
108
+ </div>
109
+ </div>
110
+ <button class="text-gray-400 hover:text-white">
111
+ <i data-feather="trash-2" class="w-4 h-4"></i>
112
+ </button>
113
+ </div>
114
+ <div class="flex-1 p-2 font-mono text-sm overflow-y-auto">
115
+ <div class="text-green-400">$ npm start</div>
116
+ <div>> Starting development server...</div>
117
+ <div>> Compiled successfully!</div>
118
+ <div>> Server running on http://localhost:3000</div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <custom-footer></custom-footer>
125
+
126
+ <script src="components/navbar.js"></script>
127
+ <script src="components/footer.js"></script>
128
+ <script src="script.js"></script>
129
+ <script>
130
+ feather.replace();
131
+
132
+ // Initialize Monaco Editor
133
+ require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs' }});
134
+ require(['vs/editor/editor.main'], function() {
135
+ var editor = monaco.editor.create(document.getElementById('editor'), {
136
+ value: [
137
+ '// Welcome to Replit Clone!',
138
+ '// Start coding your amazing project here.',
139
+ '',
140
+ 'console.log("Hello, World!");',
141
+ '',
142
+ 'function greet(name) {',
143
+ ' return `Hello, ${name}!`;',
144
+ '}',
145
+ '',
146
+ 'greet("Developer");'
147
+ ].join('\n'),
148
+ language: 'javascript',
149
+ theme: 'vs-dark',
150
+ automaticLayout: true,
151
+ minimap: {
152
+ enabled: false
153
+ }
154
+ });
155
+ });
156
+
157
+ // Update project name from URL params
158
+ const urlParams = new URLSearchParams(window.location.search);
159
+ const projectName = urlParams.get('project') || urlParams.get('template') || 'New Project';
160
+ document.getElementById('projectName').textContent = projectName.charAt(0).toUpperCase() + projectName.slice(1);
161
+ </script>
162
+ </body>
163
+ </html>
index.html CHANGED
@@ -30,20 +30,18 @@
30
  <div class="bg-white rounded-xl shadow-md p-6 mb-8">
31
  <h1 class="text-3xl font-bold text-gray-800 mb-2">Welcome to Replit Clone</h1>
32
  <p class="text-gray-600 mb-6">Build, collaborate, and ship software faster with our cloud-based IDE</p>
33
-
34
  <div class="flex flex-wrap gap-4 mb-8">
35
- <button class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all">
36
  <i data-feather="plus"></i>
37
  Create Repl
38
- </button>
39
  <button class="bg-secondary hover:bg-gray-800 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all">
40
  <i data-feather="folder"></i>
41
  Import from GitHub
42
  </button>
43
  </div>
44
  </div>
45
-
46
- <!-- Templates Section -->
47
  <div class="bg-white rounded-xl shadow-md p-6 mb-8">
48
  <h2 class="text-2xl font-bold text-gray-800 mb-6">Popular Templates</h2>
49
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -51,35 +49,34 @@
51
  <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-4"></div>
52
  <h3 class="font-bold text-lg mb-2">Python Starter</h3>
53
  <p class="text-gray-600 text-sm mb-4">Begin your Python journey with this template</p>
54
- <button class="text-primary font-medium flex items-center gap-1">
55
  Use Template
56
  <i data-feather="arrow-right" class="w-4 h-4"></i>
57
- </button>
58
  </div>
59
 
60
  <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
61
  <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-4"></div>
62
  <h3 class="font-bold text-lg mb-2">Web Development</h3>
63
  <p class="text-gray-600 text-sm mb-4">HTML, CSS, and JS template for web projects</p>
64
- <button class="text-primary font-medium flex items-center gap-1">
65
  Use Template
66
  <i data-feather="arrow-right" class="w-4 h-4"></i>
67
- </button>
68
  </div>
69
 
70
  <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
71
  <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-4"></div>
72
  <h3 class="font-bold text-lg mb-2">Node.js API</h3>
73
  <p class="text-gray-600 text-sm mb-4">Build REST APIs with Express.js</p>
74
- <button class="text-primary font-medium flex items-center gap-1">
75
  Use Template
76
  <i data-feather="arrow-right" class="w-4 h-4"></i>
77
- </button>
78
  </div>
79
  </div>
80
  </div>
81
-
82
- <!-- Recent Projects -->
83
  <div class="bg-white rounded-xl shadow-md p-6">
84
  <div class="flex justify-between items-center mb-6">
85
  <h2 class="text-2xl font-bold text-gray-800">Recent Projects</h2>
@@ -92,7 +89,7 @@
92
  <i data-feather="code" class="text-primary"></i>
93
  </div>
94
  <div>
95
- <h3 class="font-bold">My Website</h3>
96
  <p class="text-gray-600 text-sm">Last edited 2 hours ago</p>
97
  </div>
98
  </div>
@@ -107,7 +104,7 @@
107
  <i data-feather="database" class="text-green-600"></i>
108
  </div>
109
  <div>
110
- <h3 class="font-bold">Data Analysis</h3>
111
  <p class="text-gray-600 text-sm">Last edited yesterday</p>
112
  </div>
113
  </div>
@@ -122,7 +119,7 @@
122
  <i data-feather="smartphone" class="text-purple-600"></i>
123
  </div>
124
  <div>
125
- <h3 class="font-bold">Mobile App</h3>
126
  <p class="text-gray-600 text-sm">Last edited 3 days ago</p>
127
  </div>
128
  </div>
@@ -132,7 +129,7 @@
132
  </div>
133
  </div>
134
  </div>
135
- </div>
136
 
137
  <!-- Sidebar -->
138
  <div class="lg:w-1/4">
@@ -140,31 +137,31 @@
140
  <h3 class="font-bold text-lg mb-4">Getting Started</h3>
141
  <ul class="space-y-3">
142
  <li>
143
- <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
144
  <i data-feather="book" class="w-4 h-4"></i>
145
  <span>Documentation</span>
146
  </a>
147
  </li>
148
  <li>
149
- <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
150
  <i data-feather="play" class="w-4 h-4"></i>
151
  <span>Tutorials</span>
152
  </a>
153
  </li>
154
  <li>
155
- <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
156
  <i data-feather="users" class="w-4 h-4"></i>
157
  <span>Community</span>
158
  </a>
159
  </li>
160
  <li>
161
- <a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
162
  <i data-feather="help-circle" class="w-4 h-4"></i>
163
  <span>Support</span>
164
  </a>
165
  </li>
166
  </ul>
167
- </div>
168
 
169
  <div class="bg-white rounded-xl shadow-md p-6">
170
  <h3 class="font-bold text-lg mb-4">Upgrade to Pro</h3>
 
30
  <div class="bg-white rounded-xl shadow-md p-6 mb-8">
31
  <h1 class="text-3xl font-bold text-gray-800 mb-2">Welcome to Replit Clone</h1>
32
  <p class="text-gray-600 mb-6">Build, collaborate, and ship software faster with our cloud-based IDE</p>
 
33
  <div class="flex flex-wrap gap-4 mb-8">
34
+ <a href="editor.html" class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all">
35
  <i data-feather="plus"></i>
36
  Create Repl
37
+ </a>
38
  <button class="bg-secondary hover:bg-gray-800 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-all">
39
  <i data-feather="folder"></i>
40
  Import from GitHub
41
  </button>
42
  </div>
43
  </div>
44
+ <!-- Templates Section -->
 
45
  <div class="bg-white rounded-xl shadow-md p-6 mb-8">
46
  <h2 class="text-2xl font-bold text-gray-800 mb-6">Popular Templates</h2>
47
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 
49
  <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-4"></div>
50
  <h3 class="font-bold text-lg mb-2">Python Starter</h3>
51
  <p class="text-gray-600 text-sm mb-4">Begin your Python journey with this template</p>
52
+ <a href="editor.html?template=python" class="text-primary font-medium flex items-center gap-1">
53
  Use Template
54
  <i data-feather="arrow-right" class="w-4 h-4"></i>
55
+ </a>
56
  </div>
57
 
58
  <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
59
  <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-4"></div>
60
  <h3 class="font-bold text-lg mb-2">Web Development</h3>
61
  <p class="text-gray-600 text-sm mb-4">HTML, CSS, and JS template for web projects</p>
62
+ <a href="editor.html?template=web" class="text-primary font-medium flex items-center gap-1">
63
  Use Template
64
  <i data-feather="arrow-right" class="w-4 h-4"></i>
65
+ </a>
66
  </div>
67
 
68
  <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
69
  <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mb-4"></div>
70
  <h3 class="font-bold text-lg mb-2">Node.js API</h3>
71
  <p class="text-gray-600 text-sm mb-4">Build REST APIs with Express.js</p>
72
+ <a href="editor.html?template=node" class="text-primary font-medium flex items-center gap-1">
73
  Use Template
74
  <i data-feather="arrow-right" class="w-4 h-4"></i>
75
+ </a>
76
  </div>
77
  </div>
78
  </div>
79
+ <!-- Recent Projects -->
 
80
  <div class="bg-white rounded-xl shadow-md p-6">
81
  <div class="flex justify-between items-center mb-6">
82
  <h2 class="text-2xl font-bold text-gray-800">Recent Projects</h2>
 
89
  <i data-feather="code" class="text-primary"></i>
90
  </div>
91
  <div>
92
+ <a href="editor.html?project=my-website" class="font-bold hover:text-primary">My Website</a>
93
  <p class="text-gray-600 text-sm">Last edited 2 hours ago</p>
94
  </div>
95
  </div>
 
104
  <i data-feather="database" class="text-green-600"></i>
105
  </div>
106
  <div>
107
+ <a href="editor.html?project=data-analysis" class="font-bold hover:text-primary">Data Analysis</a>
108
  <p class="text-gray-600 text-sm">Last edited yesterday</p>
109
  </div>
110
  </div>
 
119
  <i data-feather="smartphone" class="text-purple-600"></i>
120
  </div>
121
  <div>
122
+ <a href="editor.html?project=mobile-app" class="font-bold hover:text-primary">Mobile App</a>
123
  <p class="text-gray-600 text-sm">Last edited 3 days ago</p>
124
  </div>
125
  </div>
 
129
  </div>
130
  </div>
131
  </div>
132
+ </div>
133
 
134
  <!-- Sidebar -->
135
  <div class="lg:w-1/4">
 
137
  <h3 class="font-bold text-lg mb-4">Getting Started</h3>
138
  <ul class="space-y-3">
139
  <li>
140
+ <a href="docs.html" class="flex items-center gap-2 text-gray-700 hover:text-primary">
141
  <i data-feather="book" class="w-4 h-4"></i>
142
  <span>Documentation</span>
143
  </a>
144
  </li>
145
  <li>
146
+ <a href="tutorials.html" class="flex items-center gap-2 text-gray-700 hover:text-primary">
147
  <i data-feather="play" class="w-4 h-4"></i>
148
  <span>Tutorials</span>
149
  </a>
150
  </li>
151
  <li>
152
+ <a href="community.html" class="flex items-center gap-2 text-gray-700 hover:text-primary">
153
  <i data-feather="users" class="w-4 h-4"></i>
154
  <span>Community</span>
155
  </a>
156
  </li>
157
  <li>
158
+ <a href="support.html" class="flex items-center gap-2 text-gray-700 hover:text-primary">
159
  <i data-feather="help-circle" class="w-4 h-4"></i>
160
  <span>Support</span>
161
  </a>
162
  </li>
163
  </ul>
164
+ </div>
165
 
166
  <div class="bg-white rounded-xl shadow-md p-6">
167
  <h3 class="font-bold text-lg mb-4">Upgrade to Pro</h3>
support.html ADDED
@@ -0,0 +1,107 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Support - Replit Clone</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#0088CC',
16
+ secondary: '#1F2937'
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ </head>
23
+ <body class="bg-gray-50">
24
+ <custom-navbar></custom-navbar>
25
+
26
+ <div class="container mx-auto px-4 py-8">
27
+ <div class="text-center mb-12">
28
+ <h1 class="text-3xl font-bold text-gray-800 mb-4">Support Center</h1>
29
+ <p class="text-gray-600 max-w-2xl mx-auto">Get help with Replit Clone or contact our support team</p>
30
+ </div>
31
+
32
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
33
+ <div class="bg-white rounded-xl shadow-md p-6">
34
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
35
+ <i data-feather="book" class="text-blue-600 w-6 h-6"></i>
36
+ </div>
37
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Documentation</h3>
38
+ <p class="text-gray-600 mb-4">Comprehensive guides and tutorials to help you get the most out of Replit Clone.</p>
39
+ <a href="docs.html" class="text-primary font-medium">Browse Documentation</a>
40
+ </div>
41
+
42
+ <div class="bg-white rounded-xl shadow-md p-6">
43
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
44
+ <i data-feather="help-circle" class="text-green-600 w-6 h-6"></i>
45
+ </div>
46
+ <h3 class="text-xl font-bold text-gray-800 mb-2">FAQ</h3>
47
+ <p class="text-gray-600 mb-4">Find answers to common questions about using Replit Clone and troubleshooting issues.</p>
48
+ <a href="#" class="text-primary font-medium">View FAQ</a>
49
+ </div>
50
+
51
+ <div class="bg-white rounded-xl shadow-md p-6">
52
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
53
+ <i data-feather="message-circle" class="text-purple-600 w-6 h-6"></i>
54
+ </div>
55
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Community Help</h3>
56
+ <p class="text-gray-600 mb-4">Connect with other developers in our community forums to get help and share knowledge.</p>
57
+ <a href="community.html" class="text-primary font-medium">Visit Community</a>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="bg-white rounded-xl shadow-md p-8">
62
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Contact Support</h2>
63
+ <form class="max-w-2xl">
64
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
65
+ <div>
66
+ <label class="block text-gray-700 font-medium mb-2" for="name">Name</label>
67
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your name">
68
+ </div>
69
+ <div>
70
+ <label class="block text-gray-700 font-medium mb-2" for="email">Email</label>
71
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="your.email@example.com">
72
+ </div>
73
+ </div>
74
+
75
+ <div class="mb-6">
76
+ <label class="block text-gray-700 font-medium mb-2" for="subject">Subject</label>
77
+ <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
78
+ <option>Technical Issue</option>
79
+ <option>Billing Question</option>
80
+ <option>Feature Request</option>
81
+ <option>Account Problem</option>
82
+ <option>Other</option>
83
+ </select>
84
+ </div>
85
+
86
+ <div class="mb-6">
87
+ <label class="block text-gray-700 font-medium mb-2" for="message">Message</label>
88
+ <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Describe your issue or question..."></textarea>
89
+ </div>
90
+
91
+ <button type="submit" class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-all">
92
+ Send Message
93
+ </button>
94
+ </form>
95
+ </div>
96
+ </div>
97
+
98
+ <custom-footer></custom-footer>
99
+
100
+ <script src="components/navbar.js"></script>
101
+ <script src="components/footer.js"></script>
102
+ <script src="script.js"></script>
103
+ <script>
104
+ feather.replace();
105
+ </script>
106
+ </body>
107
+ </html>
tutorials.html ADDED
@@ -0,0 +1,181 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Tutorials - Replit Clone</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#0088CC',
16
+ secondary: '#1F2937'
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ </head>
23
+ <body class="bg-gray-50">
24
+ <custom-navbar></custom-navbar>
25
+
26
+ <div class="container mx-auto px-4 py-8">
27
+ <div class="text-center mb-12">
28
+ <h1 class="text-3xl font-bold text-gray-800 mb-4">Tutorials & Guides</h1>
29
+ <p class="text-gray-600 max-w-2xl mx-auto">Learn how to build amazing applications with step-by-step tutorials</p>
30
+ </div>
31
+
32
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
33
+ <!-- Tutorial Cards -->
34
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
35
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600"></div>
36
+ <div class="p-6">
37
+ <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
38
+ <span>Beginner</span>
39
+ <span>•</span>
40
+ <span>30 min</span>
41
+ </div>
42
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Building Your First Web App</h3>
43
+ <p class="text-gray-600 mb-4">Learn how to create a complete web application from scratch using HTML, CSS, and JavaScript.</p>
44
+ <a href="#" class="text-primary font-medium flex items-center gap-1">
45
+ Start Tutorial
46
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
47
+ </a>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
52
+ <div class="h-48 bg-gradient-to-r from-green-400 to-green-600"></div>
53
+ <div class="p-6">
54
+ <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
55
+ <span>Intermediate</span>
56
+ <span>•</span>
57
+ <span>45 min</span>
58
+ </div>
59
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Python Data Analysis</h3>
60
+ <p class="text-gray-600 mb-4">Analyze datasets and create visualizations using Python libraries like Pandas and Matplotlib.</p>
61
+ <a href="#" class="text-primary font-medium flex items-center gap-1">
62
+ Start Tutorial
63
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
64
+ </a>
65
+ </div>
66
+ </div>
67
+
68
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
69
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-purple-600"></div>
70
+ <div class="p-6">
71
+ <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
72
+ <span>Advanced</span>
73
+ <span>•</span>
74
+ <span>60 min</span>
75
+ </div>
76
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Building REST APIs with Node.js</h3>
77
+ <p class="text-gray-600 mb-4">Create scalable APIs using Express.js and connect them to a MongoDB database.</p>
78
+ <a href="#" class="text-primary font-medium flex items-center gap-1">
79
+ Start Tutorial
80
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
81
+ </a>
82
+ </div>
83
+ </div>
84
+
85
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
86
+ <div class="h-48 bg-gradient-to-r from-yellow-400 to-orange-500"></div>
87
+ <div class="p-6">
88
+ <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
89
+ <span>Beginner</span>
90
+ <span>•</span>
91
+ <span>20 min</span>
92
+ </div>
93
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Introduction to React</h3>
94
+ <p class="text-gray-600 mb-4">Learn the fundamentals of React and build your first component-based user interface.</p>
95
+ <a href="#" class="text-primary font-medium flex items-center gap-1">
96
+ Start Tutorial
97
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
98
+ </a>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
103
+ <div class="h-48 bg-gradient-to-r from-red-400 to-pink-500"></div>
104
+ <div class="p-6">
105
+ <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
106
+ <span>Intermediate</span>
107
+ <span>•</span>
108
+ <span>40 min</span>
109
+ </div>
110
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Deploying Applications</h3>
111
+ <p class="text-gray-600 mb-4">Learn how to deploy your applications to the web and make them accessible to users.</p>
112
+ <a href="#" class="text-primary font-medium flex items-center gap-1">
113
+ Start Tutorial
114
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
115
+ </a>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
120
+ <div class="h-48 bg-gradient-to-r from-teal-400 to-cyan-600"></div>
121
+ <div class="p-6">
122
+ <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
123
+ <span>Beginner</span>
124
+ <span>•</span>
125
+ <span>25 min</span>
126
+ </div>
127
+ <h3 class="text-xl font-bold text-gray-800 mb-2">CSS Styling Techniques</h3>
128
+ <p class="text-gray-600 mb-4">Master modern CSS techniques including Flexbox, Grid, and responsive design.</p>
129
+ <a href="#" class="text-primary font-medium flex items-center gap-1">
130
+ Start Tutorial
131
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
132
+ </a>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="mt-12 bg-white rounded-xl shadow-md p-8">
138
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Learning Paths</h2>
139
+ <p class="text-gray-600 mb-6">Structured learning journeys to guide you from beginner to expert</p>
140
+
141
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
142
+ <div class="border border-gray-200 rounded-lg p-6 hover:border-primary transition-colors">
143
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
144
+ <i data-feather="code" class="text-primary w-6 h-6"></i>
145
+ </div>
146
+ <h3 class="font-bold text-lg mb-2">Frontend Developer</h3>
147
+ <p class="text-gray-600 text-sm mb-4">Learn HTML, CSS, JavaScript, and modern frameworks to build stunning user interfaces.</p>
148
+ <a href="#" class="text-primary font-medium text-sm">Explore Path</a>
149
+ </div>
150
+
151
+ <div class="border border-gray-200 rounded-lg p-6 hover:border-primary transition-colors">
152
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
153
+ <i data-feather="server" class="text-green-600 w-6 h-6"></i>
154
+ </div>
155
+ <h3 class="font-bold text-lg mb-2">Backend Developer</h3>
156
+ <p class="text-gray-600 text-sm mb-4">Master server-side programming, databases, and APIs to build powerful backend systems.</p>
157
+ <a href="#" class="text-primary font-medium text-sm">Explore Path</a>
158
+ </div>
159
+
160
+ <div class="border border-gray-200 rounded-lg p-6 hover:border-primary transition-colors">
161
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
162
+ <i data-feather="smartphone" class="text-purple-600 w-6 h-6"></i>
163
+ </div>
164
+ <h3 class="font-bold text-lg mb-2">Full Stack Developer</h3>
165
+ <p class="text-gray-600 text-sm mb-4">Combine frontend and backend skills to build complete web applications.</p>
166
+ <a href="#" class="text-primary font-medium text-sm">Explore Path</a>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <custom-footer></custom-footer>
173
+
174
+ <script src="components/navbar.js"></script>
175
+ <script src="components/footer.js"></script>
176
+ <script src="script.js"></script>
177
+ <script>
178
+ feather.replace();
179
+ </script>
180
+ </body>
181
+ </html>