Hugging Face's logo

Spaces:
lattmamb
/
m1
Running

App Files Community
lattmamb commited on
Commit
65e0052
·
verified ·
1 Parent(s): 8c397ac

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +562 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: M1
3
- emoji: 📉
4
- colorFrom: purple
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: m1
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
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,562 @@
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>Taskade AI | Smart Task Management</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
9
+ <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
10
+ <script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
13
+ <style>
14
+ :root {
15
+ --primary: #5e56e7;
16
+ --secondary: #8a85ff;
17
+ --dark: #1a1a2e;
18
+ --light: #f8f9fa;
19
+ --neomorphic-shadow: 8px 8px 15px #d1d9e6, -8px -8px 15px #ffffff;
20
+ --neomorphic-inset: inset 3px 3px 5px #d1d9e6, inset -3px -3px 5px #ffffff;
21
+ }
22
+
23
+ body {
24
+ font-family: 'Inter', sans-serif;
25
+ background-color: #f0f2f5;
26
+ color: var(--dark);
27
+ overflow-x: hidden;
28
+ }
29
+
30
+ .neomorphic-card {
31
+ background: linear-gradient(145deg, #ffffff, #e6e6e6);
32
+ border-radius: 12px;
33
+ box-shadow: var(--neomorphic-shadow);
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .neomorphic-card:hover {
38
+ box-shadow: 12px 12px 24px #d1d9e6, -12px -12px 24px #ffffff;
39
+ transform: translateY(-5px);
40
+ }
41
+
42
+ .neomorphic-btn {
43
+ background: linear-gradient(145deg, #ffffff, #e6e6e6);
44
+ border-radius: 8px;
45
+ box-shadow: var(--neomorphic-shadow);
46
+ transition: all 0.3s ease;
47
+ border: none;
48
+ }
49
+
50
+ .neomorphic-btn:active {
51
+ box-shadow: var(--neomorphic-inset);
52
+ }
53
+
54
+ .neomorphic-input {
55
+ background: linear-gradient(145deg, #ffffff, #e6e6e6);
56
+ border-radius: 8px;
57
+ box-shadow: var(--neomorphic-inset);
58
+ border: none;
59
+ padding: 12px 20px;
60
+ }
61
+
62
+ .parallax-section {
63
+ position: relative;
64
+ overflow: hidden;
65
+ }
66
+
67
+ .parallax-bg {
68
+ position: absolute;
69
+ width: 100%;
70
+ height: 120%;
71
+ top: 0;
72
+ left: 0;
73
+ z-index: -1;
74
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
75
+ }
76
+
77
+ .floating-element {
78
+ animation: float 6s ease-in-out infinite;
79
+ }
80
+
81
+ @keyframes float {
82
+ 0% { transform: translateY(0px); }
83
+ 50% { transform: translateY(-20px); }
84
+ 100% { transform: translateY(0px); }
85
+ }
86
+
87
+ .gradient-text {
88
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
89
+ -webkit-background-clip: text;
90
+ background-clip: text;
91
+ color: transparent;
92
+ }
93
+
94
+ #threejs-container {
95
+ position: absolute;
96
+ top: 0;
97
+ left: 0;
98
+ width: 100%;
99
+ height: 100%;
100
+ z-index: -1;
101
+ }
102
+
103
+ .task-item {
104
+ transition: all 0.3s ease;
105
+ border-left: 3px solid transparent;
106
+ }
107
+
108
+ .task-item:hover {
109
+ background: rgba(94, 86, 231, 0.05);
110
+ border-left: 3px solid var(--primary);
111
+ }
112
+
113
+ .ai-assistant-bubble {
114
+ position: fixed;
115
+ bottom: 30px;
116
+ right: 30px;
117
+ width: 60px;
118
+ height: 60px;
119
+ border-radius: 50%;
120
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
121
+ box-shadow: 0 10px 25px rgba(94, 86, 231, 0.3);
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ cursor: pointer;
126
+ z-index: 1000;
127
+ transition: all 0.3s ease;
128
+ }
129
+
130
+ .ai-assistant-bubble:hover {
131
+ transform: scale(1.1);
132
+ }
133
+
134
+ .ai-assistant-panel {
135
+ position: fixed;
136
+ bottom: 100px;
137
+ right: 30px;
138
+ width: 350px;
139
+ height: 500px;
140
+ background: white;
141
+ border-radius: 20px;
142
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
143
+ z-index: 1000;
144
+ transform: translateY(20px);
145
+ opacity: 0;
146
+ pointer-events: none;
147
+ transition: all 0.3s ease;
148
+ display: flex;
149
+ flex-direction: column;
150
+ }
151
+
152
+ .ai-assistant-panel.active {
153
+ transform: translateY(0);
154
+ opacity: 1;
155
+ pointer-events: all;
156
+ }
157
+
158
+ .file-upload-container {
159
+ border: 2px dashed #ccc;
160
+ border-radius: 12px;
161
+ padding: 30px;
162
+ text-align: center;
163
+ transition: all 0.3s ease;
164
+ }
165
+
166
+ .file-upload-container:hover {
167
+ border-color: var(--primary);
168
+ background: rgba(94, 86, 231, 0.05);
169
+ }
170
+
171
+ .integration-badge {
172
+ display: inline-flex;
173
+ align-items: center;
174
+ background: rgba(255, 255, 255, 0.8);
175
+ border-radius: 20px;
176
+ padding: 5px 15px;
177
+ margin: 5px;
178
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
179
+ transition: all 0.3s ease;
180
+ }
181
+
182
+ .integration-badge:hover {
183
+ transform: translateY(-3px);
184
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
185
+ }
186
+ </style>
187
+ </head>
188
+ <body>
189
+ <!-- 3D Background -->
190
+ <div id="threejs-container"></div>
191
+
192
+ <!-- Navigation -->
193
+ <nav class="bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg shadow-sm fixed w-full z-50">
194
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
195
+ <div class="flex justify-between h-16">
196
+ <div class="flex items-center">
197
+ <div class="flex-shrink-0 flex items-center">
198
+ <svg class="h-8 w-8 text-indigo-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
199
+ <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
200
+ <path d="M12 16V16.01M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
201
+ </svg>
202
+ <span class="ml-2 text-xl font-bold gradient-text">Taskade AI</span>
203
+ </div>
204
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
205
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
206
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
207
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Templates</a>
208
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>
209
+ </div>
210
+ </div>
211
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
212
+ <button class="neomorphic-btn px-4 py-2 text-sm font-medium text-gray-700 mr-4">Log In</button>
213
+ <button class="bg-gradient-to-r from-indigo-500 to-purple-600 px-4 py-2 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition duration-300">Sign Up Free</button>
214
+ </div>
215
+ <div class="-mr-2 flex items-center sm:hidden">
216
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
217
+ <span class="sr-only">Open main menu</span>
218
+ <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
219
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
220
+ </svg>
221
+ </button>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </nav>
226
+
227
+ <!-- Hero Section -->
228
+ <section class="parallax-section pt-32 pb-20 px-4 sm:px-6 lg:px-8">
229
+ <div class="max-w-7xl mx-auto">
230
+ <div class="text-center">
231
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">
232
+ <span class="gradient-text">Supercharge</span> Your Productivity
233
+ </h1>
234
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">
235
+ The all-in-one workspace to manage tasks, notes, and collaborate with your team. Powered by AI to automate your workflow.
236
+ </p>
237
+ <div class="flex flex-col sm:flex-row justify-center gap-4 mb-16">
238
+ <button class="bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-3 text-lg font-medium text-white rounded-lg shadow-md hover:shadow-lg transition duration-300">
239
+ Get Started for Free
240
+ </button>
241
+ <button class="neomorphic-btn px-6 py-3 text-lg font-medium text-gray-700 rounded-lg">
242
+ Watch Demo
243
+ </button>
244
+ </div>
245
+ </div>
246
+ <div class="neomorphic-card max-w-6xl mx-auto p-6 mt-10">
247
+ <div class="flex items-center mb-6">
248
+ <div class="flex-1">
249
+ <input type="text" placeholder="What would you like to accomplish today?" class="neomorphic-input w-full text-lg">
250
+ </div>
251
+ <button class="ml-4 bg-indigo-500 text-white p-3 rounded-lg hover:bg-indigo-600 transition duration-300">
252
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
253
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
254
+ </svg>
255
+ </button>
256
+ </div>
257
+ <div class="space-y-3">
258
+ <div class="task-item p-4 rounded-lg flex items-center">
259
+ <div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3"></div>
260
+ <div class="flex-1">Complete project proposal for client</div>
261
+ <div class="text-gray-500 text-sm">Today</div>
262
+ </div>
263
+ <div class="task-item p-4 rounded-lg flex items-center">
264
+ <div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3"></div>
265
+ <div class="flex-1">Review team performance metrics</div>
266
+ <div class="text-gray-500 text-sm">Tomorrow</div>
267
+ </div>
268
+ <div class="task-item p-4 rounded-lg flex items-center">
269
+ <div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3"></div>
270
+ <div class="flex-1">Schedule meeting with marketing team</div>
271
+ <div class="text-gray-500 text-sm">Fri</div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </section>
277
+
278
+ <!-- Features Section -->
279
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
280
+ <div class="max-w-7xl mx-auto">
281
+ <div class="text-center mb-16">
282
+ <h2 class="text-3xl font-bold mb-4">Powerful Features</h2>
283
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
284
+ Everything you need to organize, automate, and collaborate on your work.
285
+ </p>
286
+ </div>
287
+
288
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
289
+ <!-- Feature 1 -->
290
+ <div class="neomorphic-card p-8 rounded-xl">
291
+ <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
292
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
293
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
294
+ </svg>
295
+ </div>
296
+ <h3 class="text-xl font-bold mb-3">Task Management</h3>
297
+ <p class="text-gray-600">
298
+ Organize tasks with lists, boards, and calendars. Set priorities, due dates, and reminders.
299
+ </p>
300
+ </div>
301
+
302
+ <!-- Feature 2 -->
303
+ <div class="neomorphic-card p-8 rounded-xl">
304
+ <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
305
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
306
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
307
+ </svg>
308
+ </div>
309
+ <h3 class="text-xl font-bold mb-3">AI Automation</h3>
310
+ <p class="text-gray-600">
311
+ Let AI suggest tasks, automate workflows, and generate content based on your patterns.
312
+ </p>
313
+ </div>
314
+
315
+ <!-- Feature 3 -->
316
+ <div class="neomorphic-card p-8 rounded-xl">
317
+ <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
318
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
319
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
320
+ </svg>
321
+ </div>
322
+ <h3 class="text-xl font-bold mb-3">Real-time Collaboration</h3>
323
+ <p class="text-gray-600">
324
+ Work together with your team in real-time with comments, mentions, and shared workspaces.
325
+ </p>
326
+ </div>
327
+
328
+ <!-- Feature 4 -->
329
+ <div class="neomorphic-card p-8 rounded-xl">
330
+ <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6">
331
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
332
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
333
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
334
+ </svg>
335
+ </div>
336
+ <h3 class="text-xl font-bold mb-3">Customizable UI</h3>
337
+ <p class="text-gray-600">
338
+ Personalize your workspace with themes, layouts, and AI-powered UI suggestions.
339
+ </p>
340
+ </div>
341
+
342
+ <!-- Feature 5 -->
343
+ <div class="neomorphic-card p-8 rounded-xl">
344
+ <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-6">
345
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
346
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
347
+ </svg>
348
+ </div>
349
+ <h3 class="text-xl font-bold mb-3">Browser Control</h3>
350
+ <p class="text-gray-600">
351
+ Automate browser tasks, control tabs, and integrate with web apps directly from Taskade.
352
+ </p>
353
+ </div>
354
+
355
+ <!-- Feature 6 -->
356
+ <div class="neomorphic-card p-8 rounded-xl">
357
+ <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-6">
358
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
359
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
360
+ </svg>
361
+ </div>
362
+ <h3 class="text-xl font-bold mb-3">API & Integrations</h3>
363
+ <p class="text-gray-600">
364
+ Connect with Zapier, Slack, Google Drive, and 1000+ apps through our powerful API.
365
+ </p>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- AI Integration Section -->
372
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
373
+ <div class="max-w-7xl mx-auto">
374
+ <div class="text-center mb-16">
375
+ <h2 class="text-3xl font-bold mb-4">AI-Powered Productivity</h2>
376
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
377
+ Our AI assistant learns from your workflow to provide intelligent suggestions and automation.
378
+ </p>
379
+ </div>
380
+
381
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
382
+ <div class="neomorphic-card p-8 rounded-xl">
383
+ <h3 class="text-2xl font-bold mb-6 gradient-text">Taskade AI Agent</h3>
384
+
385
+ <div class="mb-6">
386
+ <label class="block text-gray-700 mb-2">AI Prompt</label>
387
+ <textarea id="ai-prompt" class="neomorphic-input w-full h-32" placeholder="What would you like the AI to help with? (e.g., 'Create a project plan for launching our new product')"></textarea>
388
+ </div>
389
+
390
+ <div class="mb-6">
391
+ <label class="block text-gray-700 mb-2">AI Configuration</label>
392
+ <div class="grid grid-cols-2 gap-4">
393
+ <select class="neomorphic-input">
394
+ <option>General Assistant</option>
395
+ <option>Project Manager</option>
396
+ <option>Content Writer</option>
397
+ <option>Data Analyst</option>
398
+ <option>Custom Agent</option>
399
+ </select>
400
+ <select class="neomorphic-input">
401
+ <option>Balanced</option>
402
+ <option>Creative</option>
403
+ <option>Precise</option>
404
+ </select>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="flex justify-between items-center">
409
+ <div>
410
+ <label class="inline-flex items-center">
411
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600">
412
+ <span class="ml-2 text-gray-700">Connect to Browser</span>
413
+ </label>
414
+ </div>
415
+ <button class="bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-2 text-white rounded-lg shadow-md hover:shadow-lg transition duration-300">
416
+ Generate
417
+ </button>
418
+ </div>
419
+ </div>
420
+
421
+ <div>
422
+ <div class="neomorphic-card p-6 rounded-xl mb-6">
423
+ <h4 class="font-bold mb-3">AI Capabilities</h4>
424
+ <div class="space-y-3">
425
+ <div class="flex items-center">
426
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
427
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
428
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
429
+ </svg>
430
+ </div>
431
+ <span>Generate task lists and project plans</span>
432
+ </div>
433
+ <div class="flex items-center">
434
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
435
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
436
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
437
+ </svg>
438
+ </div>
439
+ <span>Automate browser tasks and workflows</span>
440
+ </div>
441
+ <div class="flex items-center">
442
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
443
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
444
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
445
+ </svg>
446
+ </div>
447
+ <span>Analyze and summarize documents</span>
448
+ </div>
449
+ <div class="flex items-center">
450
+ <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
451
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
452
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
453
+ </svg>
454
+ </div>
455
+ <span>Personalized productivity recommendations</span>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="neomorphic-card p-6 rounded-xl">
461
+ <h4 class="font-bold mb-3">API Integration</h4>
462
+ <div class="file-upload-container mb-4">
463
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
464
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
465
+ </svg>
466
+ <p class="text-gray-600 mb-2">Drag & drop files or click to browse</p>
467
+ <p class="text-sm text-gray-500">Supports PDF, DOCX, PPTX, XLSX, and images</p>
468
+ </div>
469
+ <div class="flex flex-wrap justify-center">
470
+ <div class="integration-badge">
471
+ <img src="https://cdn.worldvectorlogo.com/logos/zapier.svg" class="h-5 mr-2" alt="Zapier">
472
+ <span>Zapier</span>
473
+ </div>
474
+ <div class="integration-badge">
475
+ <img src="https://cdn.worldvectorlogo.com/logos/slack-new-logo.svg" class="h-5 mr-2" alt="Slack">
476
+ <span>Slack</span>
477
+ </div>
478
+ <div class="integration-badge">
479
+ <img src="https://cdn.worldvectorlogo.com/logos/google-drive-icon.svg" class="h-5 mr-2" alt="Google Drive">
480
+ <span>Google Drive</span>
481
+ </div>
482
+ <div class="integration-badge">
483
+ <img src="https://cdn.worldvectorlogo.com/logos/dropbox.svg" class="h-5 mr-2" alt="Dropbox">
484
+ <span>Dropbox</span>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </section>
492
+
493
+ <!-- Browser Control Section -->
494
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
495
+ <div class="max-w-7xl mx-auto">
496
+ <div class="text-center mb-16">
497
+ <h2 class="text-3xl font-bold mb-4">Browser Automation</h2>
498
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
499
+ Control your browser directly from Taskade to automate repetitive tasks and workflows.
500
+ </p>
501
+ </div>
502
+
503
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
504
+ <div>
505
+ <div class="neomorphic-card p-6 rounded-xl mb-6">
506
+ <div class="flex items-center mb-4">
507
+ <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
508
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
509
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
510
+ </svg>
511
+ </div>
512
+ <h3 class="text-xl font-bold">Browser Actions</h3>
513
+ </div>
514
+
515
+ <div class="space-y-4">
516
+ <div class="flex items-center">
517
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
518
+ <span class="ml-3">Open new tab with URL</span>
519
+ <input type="text" placeholder="https://" class="neomorphic-input ml-3 flex-1 text-sm">
520
+ </div>
521
+ <div class="flex items-center">
522
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
523
+ <span class="ml-3">Extract data from current page</span>
524
+ <select class="neomorphic-input ml-3 flex-1 text-sm">
525
+ <option>Text content</option>
526
+ <option>Links</option>
527
+ <option>Images</option>
528
+ <option>Tables</option>
529
+ </select>
530
+ </div>
531
+ <div class="flex items-center">
532
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
533
+ <span class="ml-3">Fill form fields</span>
534
+ <input type="text" placeholder="Field name" class="neomorphic-input ml-3 flex-1 text-sm">
535
+ <input type="text" placeholder="Value" class="neomorphic-input ml-2 flex-1 text-sm">
536
+ </div>
537
+ <div class="flex items-center">
538
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
539
+ <span class="ml-3">Take screenshot</span>
540
+ <select class="neomorphic-input ml-3 flex-1 text-sm">
541
+ <option>Visible area</option>
542
+ <option>Full page</option>
543
+ <option>Selected element</option>
544
+ </select>
545
+ </div>
546
+ </div>
547
+
548
+ <button class="mt-6 w-full bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-2 text-white rounded-lg shadow-md hover:shadow-lg transition duration-300">
549
+ Execute Browser Actions
550
+ </button>
551
+ </div>
552
+
553
+ <div class="neomorphic-card p-6 rounded-xl">
554
+ <h3 class="text-xl font-bold mb-4">Browser Automation Script</h3>
555
+ <textarea class="neomorphic-input w-full h-32 font-mono text-sm" placeholder="// Write your custom browser automation script here
556
+ async function automate() {
557
+ await page.goto('https://example.com');
558
+ await page.type('#search', 'Taskade');
559
+ await page.click('#submit');
560
+ const results = await page.evaluate(() => {
561
+ return
562
+ </html>