Hugging Face's logo

Spaces:
mithil-07
/
suna-ai-autonomous-digital-workforce
Running

App Files Community
mithil-07 commited on
Commit
b9d667f
·
verified ·
1 Parent(s): f24e874

Redesign my website

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +516 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Suna Ai Autonomous Digital Workforce
3
- emoji: 😻
4
- colorFrom: blue
5
- colorTo: red
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: Suna AI - Autonomous Digital Workforce
3
+ colorFrom: green
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,517 @@
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>Suna AI - Autonomous Digital Workforce</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#3b82f6',
16
+ secondary: '#10b981',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ .hero-gradient {
24
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
25
+ }
26
+ .feature-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .feature-card:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
32
+ }
33
+ .pricing-card {
34
+ transition: all 0.3s ease;
35
+ }
36
+ .pricing-card:hover {
37
+ transform: scale(1.03);
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-900 text-gray-100">
42
+ <!-- Navigation -->
43
+ <nav class="bg-gray-800 py-4 px-6 shadow-lg">
44
+ <div class="container mx-auto flex justify-between items-center">
45
+ <div class="flex items-center space-x-2">
46
+ <i data-feather="sun" class="text-primary-500"></i>
47
+ <span class="text-xl font-bold">Suna</span>
48
+ </div>
49
+ <div class="hidden md:flex space-x-8">
50
+ <a href="#features" class="hover:text-primary-400">Features</a>
51
+ <a href="#how-it-works" class="hover:text-primary-400">How It Works</a>
52
+ <a href="#pricing" class="hover:text-primary-400">Pricing</a>
53
+ <a href="#opensource" class="hover:text-primary-400">Open Source</a>
54
+ </div>
55
+ <div>
56
+ <a href="https://github.com/Kortix-ai/Suna" class="bg-primary-600 hover:bg-primary-700 px-4 py-2 rounded-md font-medium">
57
+ View on GitHub
58
+ </a>
59
+ </div>
60
+ </div>
61
+ </nav>
62
+
63
+ <!-- Hero Section -->
64
+ <section class="hero-gradient py-20">
65
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
66
+ <div class="md:w-1/2 mb-10 md:mb-0">
67
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
68
+ Deploy AI Workers That Run Your Business Autonomously
69
+ </h1>
70
+ <p class="text-xl text-gray-300 mb-8">
71
+ From content creation to data analysis, Suna handles the work that takes you hours in just minutes.
72
+ </p>
73
+ <div class="flex space-x-4">
74
+ <a href="#pricing" class="bg-primary-600 hover:bg-primary-700 px-6 py-3 rounded-md font-medium">
75
+ Get Started
76
+ </a>
77
+ <a href="#how-it-works" class="border border-gray-500 hover:border-primary-500 px-6 py-3 rounded-md font-medium">
78
+ Learn More
79
+ </a>
80
+ </div>
81
+ </div>
82
+ <div class="md:w-1/2">
83
+ <img src="https://static.photos/technology/1024x576/1" alt="AI Worker Interface" class="rounded-lg shadow-2xl">
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Features Section -->
89
+ <section id="features" class="py-20 bg-gray-800">
90
+ <div class="container mx-auto px-6">
91
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
92
+ What Can Suna Do For You?
93
+ </h2>
94
+
95
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
96
+ <!-- Feature 1 -->
97
+ <div class="feature-card bg-gray-700 p-6 rounded-lg">
98
+ <div class="flex items-center mb-4">
99
+ <i data-feather="file-text" class="text-primary-500 mr-3"></i>
100
+ <h3 class="text-xl font-semibold">Create Professional Documents</h3>
101
+ </div>
102
+ <p class="text-gray-300">
103
+ Generate reports, proposals, contracts, and presentations that look like they came from a top agency.
104
+ </p>
105
+ </div>
106
+
107
+ <!-- Feature 2 -->
108
+ <div class="feature-card bg-gray-700 p-6 rounded-lg">
109
+ <div class="flex items-center mb-4">
110
+ <i data-feather="image" class="text-primary-500 mr-3"></i>
111
+ <h3 class="text-xl font-semibold">Design Graphics & Visuals</h3>
112
+ </div>
113
+ <p class="text-gray-300">
114
+ Create logos, social media graphics, infographics, and custom images from just a text description.
115
+ </p>
116
+ </div>
117
+
118
+ <!-- Feature 3 -->
119
+ <div class="feature-card bg-gray-700 p-6 rounded-lg">
120
+ <div class="flex items-center mb-4">
121
+ <i data-feather="layers" class="text-primary-500 mr-3"></i>
122
+ <h3 class="text-xl font-semibold">Build Stunning Presentations</h3>
123
+ </div>
124
+ <p class="text-gray-300">
125
+ Turn your ideas into polished slide decks with professional layouts, charts, and images sourced automatically.
126
+ </p>
127
+ </div>
128
+
129
+ <!-- Feature 4 -->
130
+ <div class="feature-card bg-gray-700 p-6 rounded-lg">
131
+ <div class="flex items-center mb-4">
132
+ <i data-feather="search" class="text-primary-500 mr-3"></i>
133
+ <h3 class="text-xl font-semibold">Research Anything Online</h3>
134
+ </div>
135
+ <p class="text-gray-300">
136
+ Get comprehensive research reports on competitors, markets, trends, or any topic with verified sources.
137
+ </p>
138
+ </div>
139
+
140
+ <!-- Feature 5 -->
141
+ <div class="feature-card bg-gray-700 p-6 rounded-lg">
142
+ <div class="flex items-center mb-4">
143
+ <i data-feather="bar-chart-2" class="text-primary-500 mr-3"></i>
144
+ <h3 class="text-xl font-semibold">Analyze Your Data</h3>
145
+ </div>
146
+ <p class="text-gray-300">
147
+ Upload spreadsheets, sales data, or any files and get insights, trends, forecasts, and beautiful charts in minutes.
148
+ </p>
149
+ </div>
150
+
151
+ <!-- Feature 6 -->
152
+ <div class="feature-card bg-gray-700 p-6 rounded-lg">
153
+ <div class="flex items-center mb-4">
154
+ <i data-feather="refresh-cw" class="text-primary-500 mr-3"></i>
155
+ <h3 class="text-xl font-semibold">Automate Online Tasks</h3>
156
+ </div>
157
+ <p class="text-gray-300">
158
+ Fill out forms, collect data from websites, monitor prices, schedule posts, and handle repetitive web tasks.
159
+ </p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+
165
+ <!-- How It Works Section -->
166
+ <section id="how-it-works" class="py-20 bg-gray-900">
167
+ <div class="container mx-auto px-6">
168
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
169
+ Create a New AI Worker in 3 Simple Steps
170
+ </h2>
171
+
172
+ <div class="flex flex-col md:flex-row items-center">
173
+ <div class="md:w-1/2 mb-10 md:mb-0">
174
+ <img src="https://static.photos/technology/1024x576/2" alt="AI Worker Creation Process" class="rounded-lg shadow-xl">
175
+ </div>
176
+ <div class="md:w-1/2 md:pl-12">
177
+ <div class="mb-8">
178
+ <div class="flex items-center mb-4">
179
+ <div class="bg-primary-600 rounded-full w-8 h-8 flex items-center justify-center mr-4">
180
+ <span class="font-bold">1</span>
181
+ </div>
182
+ <h3 class="text-xl font-semibold">Define Your Task</h3>
183
+ </div>
184
+ <p class="text-gray-300 ml-12">
185
+ Describe what you need done in natural language. Suna understands your requirements.
186
+ </p>
187
+ </div>
188
+
189
+ <div class="mb-8">
190
+ <div class="flex items-center mb-4">
191
+ <div class="bg-primary-600 rounded-full w-8 h-8 flex items-center justify-center mr-4">
192
+ <span class="font-bold">2</span>
193
+ </div>
194
+ <h3 class="text-xl font-semibold">Customize Your Worker</h3>
195
+ </div>
196
+ <p class="text-gray-300 ml-12">
197
+ Select skills, output formats, and set any specific parameters for your task.
198
+ </p>
199
+ </div>
200
+
201
+ <div>
202
+ <div class="flex items-center mb-4">
203
+ <div class="bg-primary-600 rounded-full w-8 h-8 flex items-center justify-center mr-4">
204
+ <span class="font-bold">3</span>
205
+ </div>
206
+ <h3 class="text-xl font-semibold">Deploy & Monitor</h3>
207
+ </div>
208
+ <p class="text-gray-300 ml-12">
209
+ Launch your AI worker and monitor progress in real-time or schedule for later.
210
+ </p>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </section>
216
+
217
+ <!-- Open Source Section -->
218
+ <section id="opensource" class="py-20 bg-gray-800">
219
+ <div class="container mx-auto px-6 text-center">
220
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
221
+ 100% Open AI
222
+ </h2>
223
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-12">
224
+ Deploy securely on your own infrastructure with complete control over your data and AI workflows.
225
+ </p>
226
+
227
+ <div class="flex flex-col md:flex-row justify-center items-center space-y-8 md:space-y-0 md:space-x-12">
228
+ <div class="bg-gray-700 p-6 rounded-lg w-full max-w-sm">
229
+ <i data-feather="server" class="text-primary-500 w-12 h-12 mx-auto mb-4"></i>
230
+ <h3 class="text-xl font-semibold mb-2">Secure Private Deployment</h3>
231
+ <p class="text-gray-300">
232
+ Deploy 100% on-premises with complete data sovereignty. Your AI workers run entirely on your infrastructure.
233
+ </p>
234
+ </div>
235
+
236
+ <div class="bg-gray-700 p-6 rounded-lg w-full max-w-sm">
237
+ <i data-feather="shield" class="text-primary-500 w-12 h-12 mx-auto mb-4"></i>
238
+ <h3 class="text-xl font-semibold mb-2">Enterprise-Grade Security</h3>
239
+ <p class="text-gray-300">
240
+ Open source transparency meets enterprise security. Deploy behind your firewall with full control.
241
+ </p>
242
+ </div>
243
+
244
+ <div class="bg-gray-700 p-6 rounded-lg w-full max-w-sm">
245
+ <i data-feather="github" class="text-primary-500 w-12 h-12 mx-auto mb-4"></i>
246
+ <h3 class="text-xl font-semibold mb-2">Apache 2.0 License</h3>
247
+ <p class="text-gray-300">
248
+ Free to use and modify. Contribute to the community and help shape the future of autonomous AI workers.
249
+ </p>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="mt-12">
254
+ <a href="https://github.com/Kortix-ai/Suna" class="bg-gray-700 hover:bg-gray-600 px-6 py-3 rounded-md font-medium inline-flex items-center">
255
+ <i data-feather="github" class="mr-2"></i>
256
+ kortix-ai/suna (TypeScript • Python • Apache 2.0 License)
257
+ </a>
258
+ </div>
259
+ </div>
260
+ </section>
261
+
262
+ <!-- Pricing Section -->
263
+ <section id="pricing" class="py-20 bg-gray-900">
264
+ <div class="container mx-auto px-6">
265
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
266
+ Choose the right plan for your needs
267
+ </h2>
268
+ <p class="text-xl text-gray-300 text-center mb-12">
269
+ Start with our free plan or upgrade for more AI token credits
270
+ </p>
271
+
272
+ <div class="flex justify-center mb-8">
273
+ <div class="bg-gray-800 rounded-full p-1">
274
+ <button class="bg-primary-600 px-6 py-2 rounded-full font-medium">Monthly</button>
275
+ <button class="px-6 py-2 rounded-full font-medium">Yearly (15% off)</button>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
280
+ <!-- Plus Plan -->
281
+ <div class="pricing-card bg-gray-800 rounded-lg p-6 border border-gray-700">
282
+ <div class="flex justify-between items-start mb-6">
283
+ <div>
284
+ <h3 class="text-xl font-semibold">Plus</h3>
285
+ <p class="text-gray-400">Popular</p>
286
+ </div>
287
+ <div class="text-right">
288
+ <span class="text-3xl font-bold">$17</span>
289
+ <span class="text-gray-400 line-through">$20</span>
290
+ <span class="block text-sm text-gray-400">/month for one year</span>
291
+ </div>
292
+ </div>
293
+ <p class="text-gray-300 mb-6">Best for individuals and small teams</p>
294
+ <div class="text-primary-500 mb-6">Save $36 per year</div>
295
+
296
+ <ul class="space-y-3 mb-8">
297
+ <li class="flex items-center">
298
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
299
+ <span>$20 AI token credits/m</span>
300
+ </li>
301
+ <li class="flex items-center">
302
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
303
+ <span>5 custom agents</span>
304
+ </li>
305
+ <li class="flex items-center">
306
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
307
+ <span>Private projects</span>
308
+ </li>
309
+ <li class="flex items-center">
310
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
311
+ <span>Custom abilities</span>
312
+ </li>
313
+ <li class="flex items-center">
314
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
315
+ <span>100+ integrations</span>
316
+ </li>
317
+ <li class="flex items-center">
318
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
319
+ <span>Premium AI Models</span>
320
+ </li>
321
+ <li class="flex items-center">
322
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
323
+ <span>Advanced AI Capabilities</span>
324
+ </li>
325
+ </ul>
326
+
327
+ <button class="w-full bg-primary-600 hover:bg-primary-700 py-3 rounded-md font-medium">
328
+ Get Started
329
+ </button>
330
+ </div>
331
+
332
+ <!-- Pro Plan -->
333
+ <div class="pricing-card bg-gray-800 rounded-lg p-6 border-2 border-primary-500 transform scale-105 relative">
334
+ <div class="absolute top-0 right-0 bg-primary-500 text-white px-3 py-1 text-xs font-bold rounded-bl-lg">
335
+ RECOMMENDED
336
+ </div>
337
+ <div class="flex justify-between items-start mb-6">
338
+ <div>
339
+ <h3 class="text-xl font-semibold">Pro</h3>
340
+ </div>
341
+ <div class="text-right">
342
+ <span class="text-3xl font-bold">$43</span>
343
+ <span class="text-gray-400 line-through">$50</span>
344
+ <span class="block text-sm text-gray-400">/month for one year</span>
345
+ </div>
346
+ </div>
347
+ <p class="text-gray-300 mb-6">Ideal for growing businesses</p>
348
+ <div class="text-primary-500 mb-6">Save $84 per year</div>
349
+
350
+ <ul class="space-y-3 mb-8">
351
+ <li class="flex items-center">
352
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
353
+ <span>$50 AI token credits/m</span>
354
+ </li>
355
+ <li class="flex items-center">
356
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
357
+ <span>20 custom agents</span>
358
+ </li>
359
+ <li class="flex items-center">
360
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
361
+ <span>Private projects</span>
362
+ </li>
363
+ <li class="flex items-center">
364
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
365
+ <span>Custom abilities</span>
366
+ </li>
367
+ <li class="flex items-center">
368
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
369
+ <span>100+ integrations</span>
370
+ </li>
371
+ <li class="flex items-center">
372
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
373
+ <span>Premium AI Models</span>
374
+ </li>
375
+ <li class="flex items-center">
376
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
377
+ <span>Advanced AI Capabilities</span>
378
+ </li>
379
+ </ul>
380
+
381
+ <button class="w-full bg-primary-600 hover:bg-primary-700 py-3 rounded-md font-medium">
382
+ Get Started
383
+ </button>
384
+ </div>
385
+
386
+ <!-- Ultra Plan -->
387
+ <div class="pricing-card bg-gray-800 rounded-lg p-6 border border-gray-700">
388
+ <div class="flex justify-between items-start mb-6">
389
+ <div>
390
+ <h3 class="text-xl font-semibold">Ultra</h3>
391
+ </div>
392
+ <div class="text-right">
393
+ <span class="text-3xl font-bold">$170</span>
394
+ <span class="text-gray-400 line-through">$200</span>
395
+ <span class="block text-sm text-gray-400">/month for one year</span>
396
+ </div>
397
+ </div>
398
+ <p class="text-gray-300 mb-6">For power users</p>
399
+ <div class="text-primary-500 mb-6">Save $360 per year</div>
400
+
401
+ <ul class="space-y-3 mb-8">
402
+ <li class="flex items-center">
403
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
404
+ <span>$200 AI token credits/m</span>
405
+ </li>
406
+ <li class="flex items-center">
407
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
408
+ <span>100 custom agents</span>
409
+ </li>
410
+ <li class="flex items-center">
411
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
412
+ <span>Private projects</span>
413
+ </li>
414
+ <li class="flex items-center">
415
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
416
+ <span>Custom abilities</span>
417
+ </li>
418
+ <li class="flex items-center">
419
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
420
+ <span>100+ integrations</span>
421
+ </li>
422
+ <li class="flex items-center">
423
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
424
+ <span>Premium AI Models</span>
425
+ </li>
426
+ <li class="flex items-center">
427
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
428
+ <span>Priority Support</span>
429
+ </li>
430
+ <li class="flex items-center">
431
+ <i data-feather="check" class="text-primary-500 mr-2"></i>
432
+ <span>Advanced AI Capabilities</span>
433
+ </li>
434
+ </ul>
435
+
436
+ <button class="w-full bg-primary-600 hover:bg-primary-700 py-3 rounded-md font-medium">
437
+ Get Started
438
+ </button>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="text-center mt-12 text-gray-400">
443
+ <p><strong>What are AI tokens?</strong> Tokens are units of text that AI models process. Your plan includes credits to spend on various AI models - the more complex the task, the more tokens used.</p>
444
+ </div>
445
+ </div>
446
+ </section>
447
+
448
+ <!-- Footer -->
449
+ <footer class="bg-gray-800 py-12">
450
+ <div class="container mx-auto px-6">
451
+ <div class="flex flex-col md:flex-row justify-between">
452
+ <div class="mb-8 md:mb-0">
453
+ <div class="flex items-center space-x-2 mb-4">
454
+ <i data-feather="sun" class="text-primary-500"></i>
455
+ <span class="text-xl font-bold">Suna</span>
456
+ </div>
457
+ <p class="text-gray-400 max-w-md">
458
+ Autonomous AI workers that handle your business tasks 24/7. Open source and enterprise-ready.
459
+ </p>
460
+ </div>
461
+
462
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
463
+ <div>
464
+ <h3 class="text-lg font-semibold mb-4">Product</h3>
465
+ <ul class="space-y-2">
466
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">Features</a></li>
467
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">Pricing</a></li>
468
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">Documentation</a></li>
469
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">Roadmap</a></li>
470
+ </ul>
471
+ </div>
472
+
473
+ <div>
474
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
475
+ <ul class="space-y-2">
476
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">About</a></li>
477
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">Blog</a></li>
478
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">Careers</a></li>
479
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">Contact</a></li>
480
+ </ul>
481
+ </div>
482
+
483
+ <div>
484
+ <h3 class="text-lg font-semibold mb-4">Legal</h3>
485
+ <ul class="space-y-2">
486
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">Privacy</a></li>
487
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">Terms</a></li>
488
+ <li><a href="#" class="text-gray-400 hover:text-primary-500">License</a></li>
489
+ </ul>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
495
+ <p class="text-gray-400 mb-4 md:mb-0">
496
+ © 2023 Suna AI. All rights reserved.
497
+ </p>
498
+ <div class="flex space-x-6">
499
+ <a href="#" class="text-gray-400 hover:text-primary-500">
500
+ <i data-feather="github"></i>
501
+ </a>
502
+ <a href="#" class="text-gray-400 hover:text-primary-500">
503
+ <i data-feather="twitter"></i>
504
+ </a>
505
+ <a href="#" class="text-gray-400 hover:text-primary-500">
506
+ <i data-feather="linkedin"></i>
507
+ </a>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </footer>
512
+
513
+ <script>
514
+ feather.replace();
515
+ </script>
516
+ </body>
517
  </html>