Hugging Face's logo

Spaces:
aops02
/
serverlesstools
Running

App Files Community
aops02 commited on
Commit
05ba0a1
·
verified ·
1 Parent(s): 78c36f0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +544 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Serverlesstools
3
- emoji: 🏢
4
- colorFrom: gray
5
- colorTo: blue
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: serverlesstools
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,544 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Serverless Tool Platform</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 animations */
11
+ @keyframes float {
12
+ 0%, 100% { transform: translateY(0); }
13
+ 50% { transform: translateY(-10px); }
14
+ }
15
+ .floating {
16
+ animation: float 3s ease-in-out infinite;
17
+ }
18
+ /* Smooth scroll */
19
+ html {
20
+ scroll-behavior: smooth;
21
+ }
22
+ /* Gradient text */
23
+ .gradient-text {
24
+ background: linear-gradient(45deg, #3b82f6, #8b5cf6);
25
+ -webkit-background-clip: text;
26
+ background-clip: text;
27
+ color: transparent;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="font-sans bg-gray-50">
32
+ <!-- Navigation -->
33
+ <nav class="fixed w-full bg-white/90 backdrop-blur-md shadow-sm z-50 transition-all duration-300">
34
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35
+ <div class="flex justify-between h-20 items-center">
36
+ <div class="flex items-center">
37
+ <div class="flex-shrink-0 flex items-center">
38
+ <div class="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center">
39
+ <i class="fas fa-bolt text-white"></i>
40
+ </div>
41
+ <span class="ml-3 text-xl font-bold text-gray-900">Serverless<span class="gradient-text">Tools</span></span>
42
+ </div>
43
+ </div>
44
+ <div class="hidden md:block">
45
+ <div class="ml-10 flex items-center space-x-8">
46
+ <a href="#features" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md font-medium transition-colors">Features</a>
47
+ <a href="#how-it-works" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md font-medium transition-colors">How It Works</a>
48
+ <a href="#why-choose-us" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md font-medium transition-colors">Why Choose Us</a>
49
+ <a href="#testimonials" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md font-medium transition-colors">Testimonials</a>
50
+ </div>
51
+ </div>
52
+ <div class="flex items-center space-x-4">
53
+ <a href="/login" class="px-4 py-2 rounded-md font-medium text-indigo-600 border border-indigo-600 hover:bg-indigo-50 transition-colors">Sign In</a>
54
+ <a href="/register" class="px-4 py-2 rounded-md font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors shadow-sm">Get Started</a>
55
+ </div>
56
+ <div class="md:hidden">
57
+ <button id="menu-toggle" class="text-gray-500 hover:text-gray-900 focus:outline-none">
58
+ <i class="fas fa-bars text-xl"></i>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ <!-- Mobile menu -->
64
+ <div id="mobile-menu" class="md:hidden hidden pb-4 px-4">
65
+ <div class="space-y-2 pt-2">
66
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Features</a>
67
+ <a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">How It Works</a>
68
+ <a href="#why-choose-us" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Why Choose Us</a>
69
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Testimonials</a>
70
+ <div class="pt-4 border-t border-gray-200 flex space-x-4">
71
+ <a href="/login" class="w-full px-4 py-2 rounded-md font-medium text-indigo-600 border border-indigo-600 hover:bg-indigo-50 text-center">Sign In</a>
72
+ <a href="/register" class="w-full px-4 py-2 rounded-md font-medium text-white bg-indigo-600 hover:bg-indigo-700 text-center">Get Started</a>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </nav>
77
+
78
+ <!-- Hero Section -->
79
+ <section class="pt-32 pb-20 md:pt-40 md:pb-28 bg-gradient-to-br from-indigo-50 to-white">
80
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
81
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
82
+ <div class="text-center lg:text-left">
83
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
84
+ Build & Deploy <span class="gradient-text">Serverless Tools</span> in Minutes
85
+ </h1>
86
+ <p class="text-lg md:text-xl text-gray-600 max-w-lg mb-8">
87
+ Our platform provides everything you need to create, deploy, and manage serverless applications without infrastructure hassles.
88
+ </p>
89
+ <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
90
+ <a href="/register" class="px-8 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-lg shadow-md hover:shadow-lg transition-all">
91
+ Get Started for Free
92
+ </a>
93
+ <a href="#features" class="px-8 py-3 rounded-lg border border-gray-300 hover:bg-gray-50 font-medium text-lg transition-colors shadow-sm flex items-center justify-center gap-2">
94
+ <i class="fas fa-play"></i> See Demo
95
+ </a>
96
+ </div>
97
+ <div class="mt-8 flex flex-wrap justify-center lg:justify-start gap-4">
98
+ <span class="text-gray-500 flex items-center gap-2">
99
+ <i class="fas fa-check-circle text-green-500"></i> No credit card required
100
+ </span>
101
+ <span class="text-gray-500 flex items-center gap-2">
102
+ <i class="fas fa-check-circle text-green-500"></i> 99.9% uptime
103
+ </span>
104
+ </div>
105
+ </div>
106
+ <div class="hidden lg:block relative">
107
+ <div class="relative floating">
108
+ <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
109
+ <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
110
+ <div class="relative">
111
+ <div class="rounded-2xl shadow-2xl overflow-hidden border-8 border-white">
112
+ <img src="https://placehold.co/600x400/f3f4f6/9ca3af?text=Dashboard+Preview" alt="Dashboard Preview" class="w-full">
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Trusted By Section -->
122
+ <div class="py-12 bg-gray-100/50">
123
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
124
+ <p class="text-center text-sm uppercase tracking-wider text-gray-500 mb-8">Trusted by leading companies</p>
125
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center justify-center">
126
+ <div class="flex justify-center">
127
+ <img src="https://placehold.co/160x40/fff/ccc?text=Company+1" alt="Company 1" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
128
+ </div>
129
+ <div class="flex justify-center">
130
+ <img src="https://placehold.co/160x40/fff/ccc?text=Company+2" alt="Company 2" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
131
+ </div>
132
+ <div class="flex justify-center">
133
+ <img src="https://placehold.co/160x40/fff/ccc?text=Company+3" alt="Company 3" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
134
+ </div>
135
+ <div class="flex justify-center">
136
+ <img src="https://placehold.co/160x40/fff/ccc?text=Company+4" alt="Company 4" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
137
+ </div>
138
+ <div class="flex justify-center">
139
+ <img src="https://placehold.co/160x40/fff/ccc?text=Company+5" alt="Company 5" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Features Section -->
146
+ <section id="features" class="py-20 bg-white">
147
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
148
+ <div class="text-center max-w-4xl mx-auto mb-16">
149
+ <span class="inline-block px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-100 rounded-full mb-4">Features</span>
150
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Everything You Need for Serverless Development</h2>
151
+ <p class="text-lg text-gray-600">
152
+ Build, deploy, and scale serverless tools with our comprehensive platform designed for developers of all skill levels.
153
+ </p>
154
+ </div>
155
+
156
+ <div class="grid md:grid-cols-3 gap-8">
157
+ <!-- Feature 1 -->
158
+ <div class="group rounded-xl border border-gray-200 p-6 transition-all hover:border-indigo-100 hover:shadow-lg">
159
+ <div class="w-12 h-12 rounded-lg bg-indigo-600 flex items-center justify-center mb-4 group-hover:bg-indigo-700 transition-colors">
160
+ <i class="fas fa-tachometer-alt text-white text-xl"></i>
161
+ </div>
162
+ <h3 class="text-xl font-semibold mb-2">Tool Dashboard</h3>
163
+ <p class="text-gray-600 mb-4">
164
+ Intuitive interface to manage all your serverless tools in one place with real-time monitoring.
165
+ </p>
166
+ <a href="/tool_list" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium group">
167
+ Learn more
168
+ <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
169
+ </a>
170
+ </div>
171
+
172
+ <!-- Feature 2 -->
173
+ <div class="group rounded-xl border border-gray-200 p-6 transition-all hover:border-indigo-100 hover:shadow-lg">
174
+ <div class="w-12 h-12 rounded-lg bg-indigo-600 flex items-center justify-center mb-4 group-hover:bg-indigo-700 transition-colors">
175
+ <i class="fas fa-code text-white text-xl"></i>
176
+ </div>
177
+ <h3 class="text-xl font-semibold mb-2">API Management</h3>
178
+ <p class="text-gray-600 mb-4">
179
+ Create and manage RESTful APIs with built-in authentication, rate limiting, and analytics.
180
+ </p>
181
+ <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium group">
182
+ Coming soon
183
+ </a>
184
+ </div>
185
+
186
+ <!-- Feature 3 -->
187
+ <div class="group rounded-xl border border-gray-200 p-6 transition-all hover:border-indigo-100 hover:shadow-lg">
188
+ <div class="w-12 h-12 rounded-lg bg-indigo-600 flex items-center justify-center mb-4 group-hover:bg-indigo-700 transition-colors">
189
+ <i class="fas fa-cubes text-white text-xl"></i>
190
+ </div>
191
+ <h3 class="text-xl font-semibold mb-2">Function Hub</h3>
192
+ <p class="text-gray-600 mb-4">
193
+ Deploy pre-built functions or your own code in multiple languages with just a few clicks.
194
+ </p>
195
+ <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium group">
196
+ Coming soon
197
+ </a>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- How It Works Section -->
204
+ <section id="how-it-works" class="py-20 bg-gray-50">
205
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
206
+ <div class="text-center max-w-4xl mx-auto mb-16">
207
+ <span class="inline-block px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-100 rounded-full mb-4">Process</span>
208
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">How Our Platform Works</h2>
209
+ <p class="text-lg text-gray-600">
210
+ Get your serverless tools up and running in just a few simple steps.
211
+ </p>
212
+ </div>
213
+
214
+ <div class="relative">
215
+ <!-- Vertical line -->
216
+ <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 transform -translate-x-1/2"></div>
217
+
218
+ <div class="space-y-8 md:space-y-0">
219
+ <!-- Step 1 -->
220
+ <div class="group flex flex-col md:flex-row items-center">
221
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-white border-2 border-indigo-600 flex items-center justify-center relative z-10 shadow-md md:mr-8">
222
+ <span class="text-xl font-bold text-indigo-600">1</span>
223
+ </div>
224
+ <div class="mt-4 md:mt-0 md:w-1/2 md:pr-8">
225
+ <h3 class="text-xl font-semibold mb-2">Create Your Account</h3>
226
+ <p class="text-gray-600">
227
+ Sign up for free in just a few seconds. No credit card required to get started.
228
+ </p>
229
+ </div>
230
+ <div class="hidden md:block md:w-1/2 md:pl-8 text-right">
231
+ <div class="h-56 rounded-lg overflow-hidden border border-gray-200 shadow-sm">
232
+ <img src="https://placehold.co/400x240/f3f4f6/9ca3af?text=Sign+Up+Form" alt="Sign Up Form" class="w-full h-full object-cover">
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Step 2 -->
238
+ <div class="group flex flex-col md:flex-row items-center">
239
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-white border-2 border-indigo-600 flex items-center justify-center relative z-10 shadow-md md:mr-8">
240
+ <span class="text-xl font-bold text-indigo-600">2</span>
241
+ </div>
242
+ <div class="hidden md:block md:w-1/2 md:pr-8">
243
+ <div class="h-56 rounded-lg overflow-hidden border border-gray-200 shadow-sm">
244
+ <img src="https://placehold.co/400x240/f3f4f6/9ca3af?text=Service+Selection" alt="Service Selection" class="w-full h-full object-cover">
245
+ </div>
246
+ </div>
247
+ <div class="mt-4 md:mt-0 md:w-1/2 md:pl-8">
248
+ <h3 class="text-xl font-semibold mb-2">Select a Service</h3>
249
+ <p class="text-gray-600">
250
+ Choose from our range of serverless tools or bring your own functions and APIs.
251
+ </p>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Step 3 -->
256
+ <div class="group flex flex-col md:flex-row items-center">
257
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-white border-2 border-indigo-600 flex items-center justify-center relative z-10 shadow-md md:mr-8">
258
+ <span class="text-xl font-bold text-indigo-600">3</span>
259
+ </div>
260
+ <div class="mt-4 md:mt-0 md:w-1/2 md:pr-8">
261
+ <h3 class="text-xl font-semibold mb-2">Configure Your Tool</h3>
262
+ <p class="text-gray-600">
263
+ Customize settings, environment variables, and triggers with our easy-to-use interface.
264
+ </p>
265
+ </div>
266
+ <div class="hidden md:block md:w-1/2 md:pl-8 text-right">
267
+ <div class="h-56 rounded-lg overflow-hidden border border-gray-200 shadow-sm">
268
+ <img src="https://placehold.co/400x240/f3f4f6/9ca3af?text=Configuration" alt="Configuration" class="w-full h-full object-cover">
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Step 4 -->
274
+ <div class="group flex flex-col md:flex-row items-center">
275
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-white border-2 border-indigo-600 flex items-center justify-center relative z-10 shadow-md md:mr-8">
276
+ <span class="text-xl font-bold text-indigo-600">4</span>
277
+ </div>
278
+ <div class="hidden md:block md:w-1/2 md:pr-8">
279
+ <div class="h-56 rounded-lg overflow-hidden border border-gray-200 shadow-sm">
280
+ <img src="https://placehold.co/400x240/f3f4f6/9ca3af?text=Deployment" alt="Deployment" class="w-full h-full object-cover">
281
+ </div>
282
+ </div>
283
+ <div class="mt-4 md:mt-0 md:w-1/2 md:pl-8">
284
+ <h3 class="text-xl font-semibold mb-2">Deploy & Monitor</h3>
285
+ <p class="text-gray-600">
286
+ Deploy instantly and monitor performance with real-time analytics.
287
+ </p>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </section>
294
+
295
+ <!-- Why Choose Us Section -->
296
+ <section id="why-choose-us" class="py-20 bg-white">
297
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
298
+ <div class="text-center max-w-4xl mx-auto mb-16">
299
+ <span class="inline-block px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-100 rounded-full mb-4">Benefits</span>
300
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Why Developers Choose Our Platform</h2>
301
+ <p class="text-lg text-gray-600">
302
+ We're committed to providing the best serverless development experience.
303
+ </p>
304
+ </div>
305
+
306
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
307
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
308
+ <div class="w-12 h-12 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4">
309
+ <i class="fas fa-rocket text-xl"></i>
310
+ </div>
311
+ <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
312
+ <p class="text-gray-600">
313
+ Deploy in milliseconds with our optimized infrastructure designed for serverless workloads.
314
+ </p>
315
+ </div>
316
+
317
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
318
+ <div class="w-12 h-12 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4">
319
+ <i class="fas fa-lock text-xl"></i>
320
+ </div>
321
+ <h3 class="text-xl font-semibold mb-2">Enterprise Security</h3>
322
+ <p class="text-gray-600">
323
+ Built with security best practices including automatic TLS, IAM, and VPC networking.
324
+ </p>
325
+ </div>
326
+
327
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
328
+ <div class="w-12 h-12 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4">
329
+ <i class="fas fa-dollar-sign text-xl"></i>
330
+ </div>
331
+ <h3 class="text-xl font-semibold mb-2">Cost Effective</h3>
332
+ <p class="text-gray-600">
333
+ Only pay for what you use with per-millisecond billing and a generous free tier.
334
+ </p>
335
+ </div>
336
+
337
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow">
338
+ <div class="w-12 h-12 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4">
339
+ <i class="fas fa-share-alt text-xl"></i>
340
+ </div>
341
+ <h3 class="text-xl font-semibold mb-2">Seamless Integrations</h3>
342
+ <p class="text-gray-600">
343
+ Connect with other services like databases, APIs, and third-party platforms.
344
+ </p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </section>
349
+
350
+ <!-- Testimonials Section -->
351
+ <section id="testimonials" class="py-20 bg-indigo-50">
352
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
353
+ <div class="text-center max-w-4xl mx-auto mb-16">
354
+ <span class="inline-block px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-100 rounded-full mb-4">Testimonials</span>
355
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Users Say</h2>
356
+ <p class="text-lg text-gray-600">
357
+ Don't just take our word for it - hear from developers who love our platform.
358
+ </p>
359
+ </div>
360
+
361
+ <div class="grid md:grid-cols-2 gap-8">
362
+ <!-- Testimonial 1 -->
363
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
364
+ <div class="flex items-center mb-4">
365
+ <img src="https://placehold.co/80x80/eee/999?text=JS" alt="User" class="w-12 h-12 rounded-full">
366
+ <div class="ml-4">
367
+ <h4 class="font-semibold">James Smith</h4>
368
+ <p class="text-sm text-gray-500">CTO @TechCorp</p>
369
+ </div>
370
+ </div>
371
+ <div class="flex mb-2 text-yellow-400">
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star"></i>
374
+ <i class="fas fa-star"></i>
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ </div>
378
+ <p class="text-gray-700 mb-4">
379
+ "We've reduced our infrastructure costs by 60% while improving reliability since moving our APIs to ServerlessTools. The team has been incredible to work with."
380
+ </p>
381
+ <div class="text-indigo-600 text-sm">
382
+ <i class="fas fa-check-circle mr-1"></i> Verified User
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Testimonial 2 -->
387
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
388
+ <div class="flex items-center mb-4">
389
+ <img src="https://placehold.co/80x80/eee/999?text=MW" alt="User" class="w-12 h-12 rounded-full">
390
+ <div class="ml-4">
391
+ <h4 class="font-semibold">Maria Wilson</h4>
392
+ <p class="text-sm text-gray-500">Lead Developer @AppFactory</p>
393
+ </div>
394
+ </div>
395
+ <div class="flex mb-2 text-yellow-400">
396
+ <i class="fas fa-star"></i>
397
+ <i class="fas fa-star"></i>
398
+ <i class="fas fa-star"></i>
399
+ <i class="fas fa-star"></i>
400
+ <i class="fas fa-star-half-alt"></i>
401
+ </div>
402
+ <p class="text-gray-700 mb-4">
403
+ "The dashboard makes it so easy to manage all our serverless functions in one place. Deployment times are significantly faster than our previous setup."
404
+ </p>
405
+ <div class="text-indigo-600 text-sm">
406
+ <i class="fas fa-check-circle mr-1"></i> Verified User
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- CTA Section -->
414
+ <section class="py-16 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
415
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
416
+ <div class="text-center">
417
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build Something Amazing?</h2>
418
+ <p class="text-xl max-w-3xl mx-auto mb-8">
419
+ Join thousands of developers who trust our platform for their serverless needs.
420
+ </p>
421
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
422
+ <a href="/register" class="px-8 py-3 rounded-lg bg-white text-indigo-600 hover:bg-gray-100 font-semibold text-lg shadow-md hover:shadow-lg transition-all">
423
+ Get Started for Free
424
+ </a>
425
+ <a href="/login" class="px-8 py-3 rounded-lg border border-white hover:bg-white/10 font-medium text-lg transition-colors shadow-sm">
426
+ Sign In to Your Account
427
+ </a>
428
+ </div>
429
+ <p class="mt-6 text-sm text-white/80">
430
+ No credit card required • 14-day free trial
431
+ </p>
432
+ </div>
433
+ </div>
434
+ </section>
435
+
436
+ <!-- Footer -->
437
+ <footer class="bg-gray-900 text-gray-300 py-12">
438
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
439
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
440
+ <div class="col-span-2">
441
+ <div class="flex items-center mb-4">
442
+ <div class="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center">
443
+ <i class="fas fa-bolt text-white"></i>
444
+ </div>
445
+ <span class="ml-3 text-xl font-bold text-white">Serverless<span class="text-indigo-400">Tools</span></span>
446
+ </div>
447
+ <p class="mb-4">
448
+ The easiest way to build, deploy, and manage serverless applications.
449
+ </p>
450
+ <div class="flex space-x-4">
451
+ <a href="#" class="text-gray-400 hover:text-white">
452
+ <i class="fab fa-twitter text-xl"></i>
453
+ </a>
454
+ <a href="#" class="text-gray-400 hover:text-white">
455
+ <i class="fab fa-github text-xl"></i>
456
+ </a>
457
+ <a href="#" class="text-gray-400 hover:text-white">
458
+ <i class="fab fa-discord text-xl"></i>
459
+ </a>
460
+ <a href="#" class="text-gray-400 hover:text-white">
461
+ <i class="fab fa-linkedin text-xl"></i>
462
+ </a>
463
+ </div>
464
+ </div>
465
+
466
+ <div>
467
+ <h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Product</h3>
468
+ <ul class="space-y-3">
469
+ <li><a href="#features" class="hover:text-white transition-colors">Features</a></li>
470
+ <li><a href="/pricing" class="hover:text-white transition-colors">Pricing</a></li>
471
+ <li><a href="/integrations" class="hover:text-white transition-colors">Integrations</a></li>
472
+ <li><a href="/docs" class="hover:text-white transition-colors">Documentation</a></li>
473
+ </ul>
474
+ </div>
475
+
476
+ <div>
477
+ <h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Company</h3>
478
+ <ul class="space-y-3">
479
+ <li><a href="/about" class="hover:text-white transition-colors">About</a></li>
480
+ <li><a href="/blog" class="hover:text-white transition-colors">Blog</a></li>
481
+ <li><a href="/careers" class="hover:text-white transition-colors">Careers</a></li>
482
+ <li><a href="/contact" class="hover:text-white transition-colors">Contact</a></li>
483
+ </ul>
484
+ </div>
485
+
486
+ <div>
487
+ <h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Legal</h3>
488
+ <ul class="space-y-3">
489
+ <li><a href="/privacy" class="hover:text-white transition-colors">Privacy</a></li>
490
+ <li><a href="/terms" class="hover:text-white transition-colors">Terms</a></li>
491
+ <li><a href="/security" class="hover:text-white transition-colors">Security</a></li>
492
+ <li><a href="/policy" class="hover:text-white transition-colors">Cookie Policy</a></li>
493
+ </ul>
494
+ </div>
495
+ </div>
496
+
497
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
498
+ <p class="text-sm text-gray-500">
499
+ &copy; 2023 ServerlessTools. All rights reserved.
500
+ </p>
501
+ <div class="mt-4 md:mt-0 flex space-x-6">
502
+ <a href="/status" class="text-sm text-gray-500 hover:text-white">Status</a>
503
+ <a href="/changelog" class="text-sm text-gray-500 hover:text-white">Changelog</a>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </footer>
508
+
509
+ <script>
510
+ // Mobile menu toggle
511
+ document.getElementById('menu-toggle').addEventListener('click', function() {
512
+ const menu = document.getElementById('mobile-menu');
513
+ menu.classList.toggle('hidden');
514
+ });
515
+
516
+ // Sticky navbar
517
+ window.addEventListener('scroll', function() {
518
+ const nav = document.querySelector('nav');
519
+ if (window.scrollY > 50) {
520
+ nav.classList.add('shadow-md');
521
+ } else {
522
+ nav.classList.remove('shadow-md');
523
+ }
524
+ });
525
+
526
+ // Smooth scroll for anchor links
527
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
528
+ anchor.addEventListener('click', function (e) {
529
+ e.preventDefault();
530
+
531
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
532
+ behavior: 'smooth'
533
+ });
534
+
535
+ // Close mobile menu if open
536
+ const mobileMenu = document.getElementById('mobile-menu');
537
+ if (!mobileMenu.classList.contains('hidden')) {
538
+ mobileMenu.classList.add('hidden');
539
+ }
540
+ });
541
+ });
542
+ </script>
543
+ <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=aops02/serverlesstools" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
544
+ </html>