sample1213 commited on
Commit
48dd6e4
·
verified ·
1 Parent(s): ed0643c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +766 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Samole Clutter V1
3
- emoji: 🦀
4
- colorFrom: red
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: samole-clutter-v1
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
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,766 @@
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>ClutterClear AI | Your Intelligent Digital Librarian</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 50: '#f0f9ff',
16
+ 100: '#e0f2fe',
17
+ 200: '#bae6fd',
18
+ 300: '#7dd3fc',
19
+ 400: '#38bdf8',
20
+ 500: '#0ea5e9',
21
+ 600: '#0284c7',
22
+ 700: '#0369a1',
23
+ 800: '#075985',
24
+ 900: '#0c4a6e',
25
+ },
26
+ secondary: {
27
+ 50: '#faf5ff',
28
+ 100: '#f3e8ff',
29
+ 200: '#e9d5ff',
30
+ 300: '#d8b4fe',
31
+ 400: '#c084fc',
32
+ 500: '#a855f7',
33
+ 600: '#9333ea',
34
+ 700: '#7e22ce',
35
+ 800: '#6b21a8',
36
+ 900: '#581c87',
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
42
+ </script>
43
+ <style>
44
+ .hero-gradient {
45
+ background: linear-gradient(135deg, rgba(14,165,233,0.1) 0%, rgba(168,85,247,0.1) 100%);
46
+ }
47
+ .feature-card:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
50
+ }
51
+ .glow {
52
+ box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
53
+ }
54
+ .wave-shape {
55
+ position: absolute;
56
+ bottom: 0;
57
+ left: 0;
58
+ width: 100%;
59
+ overflow: hidden;
60
+ line-height: 0;
61
+ }
62
+ .wave-shape svg {
63
+ position: relative;
64
+ display: block;
65
+ width: calc(100% + 1.3px);
66
+ height: 150px;
67
+ }
68
+ .wave-shape .shape-fill {
69
+ fill: #FFFFFF;
70
+ }
71
+ .animated-underline {
72
+ position: relative;
73
+ display: inline-block;
74
+ }
75
+ .animated-underline::after {
76
+ content: '';
77
+ position: absolute;
78
+ width: 100%;
79
+ transform: scaleX(0);
80
+ height: 2px;
81
+ bottom: 0;
82
+ left: 0;
83
+ background-color: #a855f7;
84
+ transform-origin: bottom right;
85
+ transition: transform 0.25s ease-out;
86
+ }
87
+ .animated-underline:hover::after {
88
+ transform: scaleX(1);
89
+ transform-origin: bottom left;
90
+ }
91
+ </style>
92
+ </head>
93
+ <body class="font-sans antialiased text-gray-800">
94
+ <!-- Navigation -->
95
+ <nav class="bg-white shadow-sm fixed w-full z-10">
96
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
97
+ <div class="flex justify-between h-16">
98
+ <div class="flex items-center">
99
+ <div class="flex-shrink-0 flex items-center">
100
+ <i class="fas fa-brain text-secondary-500 text-2xl mr-2"></i>
101
+ <span class="text-xl font-bold text-gray-900">ClutterClear<span class="text-primary-600">AI</span></span>
102
+ </div>
103
+ </div>
104
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
105
+ <a href="#features" class="animated-underline px-3 py-2 text-sm font-medium">Features</a>
106
+ <a href="#how-it-works" class="animated-underline px-3 py-2 text-sm font-medium">How It Works</a>
107
+ <a href="#pricing" class="animated-underline px-3 py-2 text-sm font-medium">Pricing</a>
108
+ <a href="#testimonials" class="animated-underline px-3 py-2 text-sm font-medium">Testimonials</a>
109
+ </div>
110
+ <div class="flex items-center">
111
+ <a href="#" class="ml-4 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-primary-600 to-secondary-500 hover:from-primary-700 hover:to-secondary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500">
112
+ Get Early Access
113
+ </a>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </nav>
118
+
119
+ <!-- Hero Section -->
120
+ <section class="hero-gradient pt-32 pb-20 relative overflow-hidden">
121
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
122
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
123
+ <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
124
+ <div>
125
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
126
+ <span class="block">Your Digital</span>
127
+ <span class="block text-primary-600">Librarian</span>
128
+ </h1>
129
+ <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
130
+ AI-powered file management that understands your content, not just filenames. Find anything instantly with natural language search.
131
+ </p>
132
+ <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
133
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
134
+ <div class="rounded-md shadow">
135
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-primary-600 to-secondary-500 hover:from-primary-700 hover:to-secondary-600 md:py-4 md:text-lg md:px-10">
136
+ Start Free Trial
137
+ </a>
138
+ </div>
139
+ <div class="mt-3 sm:mt-0 sm:ml-3">
140
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-secondary-700 bg-secondary-100 hover:bg-secondary-200 md:py-4 md:text-lg md:px-10">
141
+ Watch Demo
142
+ </a>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
149
+ <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
150
+ <div class="relative block w-full bg-white rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500">
151
+ <img class="w-full" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Digital organization">
152
+ <div class="absolute inset-0 bg-gradient-to-t from-secondary-500 to-primary-600 opacity-30"></div>
153
+ <div class="absolute bottom-0 left-0 p-6">
154
+ <p class="text-white text-lg font-semibold">"Find that document from last year about..."</p>
155
+ <p class="mt-1 text-white">Just describe what you're looking for in plain English</p>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ <div class="wave-shape">
163
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
164
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
165
+ </svg>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- Logo Cloud -->
170
+ <div class="bg-white py-12">
171
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
172
+ <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide">
173
+ Trusted by teams at
174
+ </p>
175
+ <div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
176
+ <div class="col-span-1 flex justify-center items-center">
177
+ <img class="h-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png" alt="Google">
178
+ </div>
179
+ <div class="col-span-1 flex justify-center items-center">
180
+ <img class="h-8" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Dropbox_Icon.svg/1200px-Dropbox_Icon.svg.png" alt="Dropbox">
181
+ </div>
182
+ <div class="col-span-1 flex justify-center items-center">
183
+ <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/1200px-Microsoft_logo_%282012%29.svg.png" alt="Microsoft">
184
+ </div>
185
+ <div class="col-span-1 flex justify-center items-center">
186
+ <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Slack_Technologies_Logo.svg/1200px-Slack_Technologies_Logo.svg.png" alt="Slack">
187
+ </div>
188
+ <div class="col-span-1 flex justify-center items-center">
189
+ <img class="h-8" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Airbnb_Logo_B%C3%A9lo.svg/1200px-Airbnb_Logo_B%C3%A9lo.svg.png" alt="Airbnb">
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Features Section -->
196
+ <section id="features" class="py-20 bg-white">
197
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
198
+ <div class="lg:text-center">
199
+ <h2 class="text-base text-secondary-600 font-semibold tracking-wide uppercase">Features</h2>
200
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
201
+ A better way to manage your files
202
+ </p>
203
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
204
+ ClutterClear AI understands what your files contain, not just what they're named.
205
+ </p>
206
+ </div>
207
+
208
+ <div class="mt-20">
209
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
210
+ <!-- Feature 1 -->
211
+ <div class="feature-card relative bg-white p-6 rounded-xl transition-all duration-300 ease-in-out">
212
+ <div class="absolute -top-6 left-6 bg-secondary-500 rounded-full p-3 text-white">
213
+ <i class="fas fa-tags text-xl"></i>
214
+ </div>
215
+ <h3 class="text-lg font-medium text-gray-900 pt-4">Smart Indexing & Organization</h3>
216
+ <p class="mt-2 text-base text-gray-500">
217
+ Our AI analyzes file content to categorize and tag automatically. No more cryptic filenames - your PDF becomes "Tax Document 2022" automatically.
218
+ </p>
219
+ </div>
220
+
221
+ <!-- Feature 2 -->
222
+ <div class="feature-card relative bg-white p-6 rounded-xl transition-all duration-300 ease-in-out">
223
+ <div class="absolute -top-6 left-6 bg-primary-500 rounded-full p-3 text-white">
224
+ <i class="fas fa-search text-xl"></i>
225
+ </div>
226
+ <h3 class="text-lg font-medium text-gray-900 pt-4">Natural Language Search</h3>
227
+ <p class="mt-2 text-base text-gray-500">
228
+ Find files by describing them. Search "presentation about solar energy from last fall" and get exactly what you need, even if you forgot the title.
229
+ </p>
230
+ </div>
231
+
232
+ <!-- Feature 3 -->
233
+ <div class="feature-card relative bg-white p-6 rounded-xl transition-all duration-300 ease-in-out">
234
+ <div class="absolute -top-6 left-6 bg-secondary-500 rounded-full p-3 text-white">
235
+ <i class="fas fa-file-alt text-xl"></i>
236
+ </div>
237
+ <h3 class="text-lg font-medium text-gray-900 pt-4">Instant Previews & Summaries</h3>
238
+ <p class="mt-2 text-base text-gray-500">
239
+ Get one-paragraph summaries of long documents or key details on the fly. Your personal research assistant for all your files.
240
+ </p>
241
+ </div>
242
+
243
+ <!-- Feature 4 -->
244
+ <div class="feature-card relative bg-white p-6 rounded-xl transition-all duration-300 ease-in-out">
245
+ <div class="absolute -top-6 left-6 bg-primary-500 rounded-full p-3 text-white">
246
+ <i class="fas fa-lock text-xl"></i>
247
+ </div>
248
+ <h3 class="text-lg font-medium text-gray-900 pt-4">Privacy-Focused</h3>
249
+ <p class="mt-2 text-base text-gray-500">
250
+ All analysis happens with your permission. Configure to run locally or on encrypted servers. You control which files to index.
251
+ </p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- How It Works -->
259
+ <section id="how-it-works" class="py-20 bg-gray-50">
260
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
261
+ <div class="lg:text-center">
262
+ <h2 class="text-base text-secondary-600 font-semibold tracking-wide uppercase">Process</h2>
263
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
264
+ How ClutterClear AI Works
265
+ </p>
266
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
267
+ Three simple steps to transform your digital chaos into organized clarity.
268
+ </p>
269
+ </div>
270
+
271
+ <div class="mt-16">
272
+ <div class="lg:grid lg:grid-cols-3 lg:gap-8">
273
+ <!-- Step 1 -->
274
+ <div class="relative mb-10 lg:mb-0">
275
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
276
+ <span class="text-xl font-bold">1</span>
277
+ </div>
278
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Connect Your Storage</h3>
279
+ <p class="mt-2 text-base text-gray-500">
280
+ Link your Google Drive, Dropbox, or upload files directly. Choose exactly which folders to include.
281
+ </p>
282
+ </div>
283
+
284
+ <!-- Step 2 -->
285
+ <div class="relative mb-10 lg:mb-0">
286
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary-500 text-white">
287
+ <span class="text-xl font-bold">2</span>
288
+ </div>
289
+ <h3 class="mt-6 text-lg font-medium text-gray-900">AI Processes Your Files</h3>
290
+ <p class="mt-2 text-base text-gray-500">
291
+ Our AI reads and understands content, creating a semantic index of your digital world.
292
+ </p>
293
+ </div>
294
+
295
+ <!-- Step 3 -->
296
+ <div class="relative">
297
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
298
+ <span class="text-xl font-bold">3</span>
299
+ </div>
300
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Search & Organize Naturally</h3>
301
+ <p class="mt-2 text-base text-gray-500">
302
+ Find anything instantly with plain English queries. Let AI suggest better organization.
303
+ </p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </section>
309
+
310
+ <!-- Demo Video -->
311
+ <section class="py-20 bg-white">
312
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
313
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
314
+ <div class="mb-8 lg:mb-0">
315
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
316
+ See ClutterClear AI in Action
317
+ </h2>
318
+ <p class="mt-3 text-lg text-gray-500">
319
+ Watch how our AI transforms chaotic file storage into an organized, searchable digital library that understands what you need.
320
+ </p>
321
+ <div class="mt-8">
322
+ <a href="#" class="inline-flex items-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-gradient-to-r from-primary-600 to-secondary-500 hover:from-primary-700 hover:to-secondary-600">
323
+ <i class="fas fa-play mr-2"></i> Watch Full Demo
324
+ </a>
325
+ </div>
326
+ </div>
327
+ <div class="relative" style="padding-bottom: 56.25%; height: 0; overflow: hidden;">
328
+ <div class="absolute inset-0 bg-gray-200 rounded-lg overflow-hidden">
329
+ <div class="absolute inset-0 flex items-center justify-center">
330
+ <button class="bg-white rounded-full p-4 shadow-lg glow">
331
+ <i class="fas fa-play text-secondary-500 text-2xl"></i>
332
+ </button>
333
+ </div>
334
+ <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Demo video placeholder">
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </section>
340
+
341
+ <!-- Testimonials -->
342
+ <section id="testimonials" class="py-20 bg-gray-50">
343
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
344
+ <div class="lg:text-center">
345
+ <h2 class="text-base text-secondary-600 font-semibold tracking-wide uppercase">Testimonials</h2>
346
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
347
+ Loved by professionals worldwide
348
+ </p>
349
+ </div>
350
+
351
+ <div class="mt-16">
352
+ <div class="space-y-12 lg:grid lg:grid-cols-3 lg:gap-8 lg:space-y-0">
353
+ <!-- Testimonial 1 -->
354
+ <div class="bg-white p-8 rounded-xl shadow-sm">
355
+ <div class="flex items-center">
356
+ <div class="flex-shrink-0">
357
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson">
358
+ </div>
359
+ <div class="ml-4">
360
+ <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
361
+ <p class="text-secondary-500">Research Scientist</p>
362
+ </div>
363
+ </div>
364
+ <p class="mt-4 text-gray-500">
365
+ "I manage hundreds of research papers and ClutterClear AI has completely transformed my workflow. Finding references by concept instead of filename is revolutionary."
366
+ </p>
367
+ <div class="mt-4 flex">
368
+ <i class="fas fa-star text-yellow-400"></i>
369
+ <i class="fas fa-star text-yellow-400"></i>
370
+ <i class="fas fa-star text-yellow-400"></i>
371
+ <i class="fas fa-star text-yellow-400"></i>
372
+ <i class="fas fa-star text-yellow-400"></i>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Testimonial 2 -->
377
+ <div class="bg-white p-8 rounded-xl shadow-sm">
378
+ <div class="flex items-center">
379
+ <div class="flex-shrink-0">
380
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
381
+ </div>
382
+ <div class="ml-4">
383
+ <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
384
+ <p class="text-secondary-500">Financial Consultant</p>
385
+ </div>
386
+ </div>
387
+ <p class="mt-4 text-gray-500">
388
+ "The document summaries save me hours each week. I can instantly recall details from client files without reopening them. Game changer for client meetings."
389
+ </p>
390
+ <div class="mt-4 flex">
391
+ <i class="fas fa-star text-yellow-400"></i>
392
+ <i class="fas fa-star text-yellow-400"></i>
393
+ <i class="fas fa-star text-yellow-400"></i>
394
+ <i class="fas fa-star text-yellow-400"></i>
395
+ <i class="fas fa-star text-yellow-400"></i>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Testimonial 3 -->
400
+ <div class="bg-white p-8 rounded-xl shadow-sm">
401
+ <div class="flex items-center">
402
+ <div class="flex-shrink-0">
403
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emma Rodriguez">
404
+ </div>
405
+ <div class="ml-4">
406
+ <h4 class="text-lg font-medium text-gray-900">Emma Rodriguez</h4>
407
+ <p class="text-secondary-500">Marketing Director</p>
408
+ </div>
409
+ </div>
410
+ <p class="mt-4 text-gray-500">
411
+ "Our team's creative assets were a mess. Now we can search 'summer campaign beach visuals' and instantly find what we need. The AI suggestions for organization are brilliant."
412
+ </p>
413
+ <div class="mt-4 flex">
414
+ <i class="fas fa-star text-yellow-400"></i>
415
+ <i class="fas fa-star text-yellow-400"></i>
416
+ <i class="fas fa-star text-yellow-400"></i>
417
+ <i class="fas fa-star text-yellow-400"></i>
418
+ <i class="fas fa-star text-yellow-400"></i>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </section>
425
+
426
+ <!-- Pricing -->
427
+ <section id="pricing" class="py-20 bg-white">
428
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
429
+ <div class="lg:text-center">
430
+ <h2 class="text-base text-secondary-600 font-semibold tracking-wide uppercase">Pricing</h2>
431
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
432
+ Simple, transparent pricing
433
+ </p>
434
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
435
+ Start organizing your digital life today. No credit card required for the free plan.
436
+ </p>
437
+ </div>
438
+
439
+ <div class="mt-16 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
440
+ <!-- Free Tier -->
441
+ <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
442
+ <div class="p-6">
443
+ <h2 class="text-lg leading-6 font-medium text-gray-900">Free</h2>
444
+ <p class="mt-4">
445
+ <span class="text-4xl font-extrabold text-gray-900">$0</span>
446
+ <span class="text-base font-medium text-gray-500">/month</span>
447
+ </p>
448
+ <p class="mt-4 text-sm text-gray-500">
449
+ Perfect for trying out basic features
450
+ </p>
451
+ <a href="#" class="mt-8 block w-full bg-gray-50 border border-gray-200 rounded-md py-2 text-sm font-semibold text-gray-900 text-center hover:bg-gray-100">
452
+ Get started
453
+ </a>
454
+ </div>
455
+ <div class="pt-6 pb-8 px-6">
456
+ <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
457
+ <ul class="mt-6 space-y-4">
458
+ <li class="flex">
459
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
460
+ <span class="text-base text-gray-500">Up to 1,000 files</span>
461
+ </li>
462
+ <li class="flex">
463
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
464
+ <span class="text-base text-gray-500">Basic search & organization</span>
465
+ </li>
466
+ <li class="flex">
467
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
468
+ <span class="text-base text-gray-500">1 connected storage account</span>
469
+ </li>
470
+ <li class="flex">
471
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
472
+ <span class="text-base text-gray-500">Community support</span>
473
+ </li>
474
+ </ul>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Pro Tier -->
479
+ <div class="bg-white border-2 border-secondary-500 rounded-lg shadow-lg divide-y divide-gray-200 transform scale-105 z-10">
480
+ <div class="p-6">
481
+ <div class="flex justify-between">
482
+ <h2 class="text-lg leading-6 font-medium text-gray-900">Pro</h2>
483
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-secondary-100 text-secondary-800">
484
+ Most popular
485
+ </span>
486
+ </div>
487
+ <p class="mt-4">
488
+ <span class="text-4xl font-extrabold text-gray-900">$9</span>
489
+ <span class="text-base font-medium text-gray-500">/month</span>
490
+ </p>
491
+ <p class="mt-4 text-sm text-gray-500">
492
+ For professionals and small teams
493
+ </p>
494
+ <a href="#" class="mt-8 block w-full bg-gradient-to-r from-primary-600 to-secondary-500 border border-transparent rounded-md py-2 text-sm font-semibold text-white text-center hover:from-primary-700 hover:to-secondary-600">
495
+ Get started
496
+ </a>
497
+ </div>
498
+ <div class="pt-6 pb-8 px-6">
499
+ <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
500
+ <ul class="mt-6 space-y-4">
501
+ <li class="flex">
502
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
503
+ <span class="text-base text-gray-500">Up to 10,000 files</span>
504
+ </li>
505
+ <li class="flex">
506
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
507
+ <span class="text-base text-gray-500">Advanced AI search & suggestions</span>
508
+ </li>
509
+ <li class="flex">
510
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
511
+ <span class="text-base text-gray-500">Document summaries</span>
512
+ </li>
513
+ <li class="flex">
514
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
515
+ <span class="text-base text-gray-500">3 connected storage accounts</span>
516
+ </li>
517
+ <li class="flex">
518
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
519
+ <span class="text-base text-gray-500">Priority email support</span>
520
+ </li>
521
+ </ul>
522
+ </div>
523
+ </div>
524
+
525
+ <!-- Enterprise Tier -->
526
+ <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
527
+ <div class="p-6">
528
+ <h2 class="text-lg leading-6 font-medium text-gray-900">Enterprise</h2>
529
+ <p class="mt-4">
530
+ <span class="text-4xl font-extrabold text-gray-900">$29</span>
531
+ <span class="text-base font-medium text-gray-500">/month</span>
532
+ </p>
533
+ <p class="mt-4 text-sm text-gray-500">
534
+ For businesses with extensive needs
535
+ </p>
536
+ <a href="#" class="mt-8 block w-full bg-gray-50 border border-gray-200 rounded-md py-2 text-sm font-semibold text-gray-900 text-center hover:bg-gray-100">
537
+ Get started
538
+ </a>
539
+ </div>
540
+ <div class="pt-6 pb-8 px-6">
541
+ <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
542
+ <ul class="mt-6 space-y-4">
543
+ <li class="flex">
544
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
545
+ <span class="text-base text-gray-500">Unlimited files</span>
546
+ </li>
547
+ <li class="flex">
548
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
549
+ <span class="text-base text-gray-500">All Pro features plus:</span>
550
+ </li>
551
+ <li class="flex">
552
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
553
+ <span class="text-base text-gray-500">Team collaboration</span>
554
+ </li>
555
+ <li class="flex">
556
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
557
+ <span class="text-base text-gray-500">Unlimited storage accounts</span>
558
+ </li>
559
+ <li class="flex">
560
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
561
+ <span class="text-base text-gray-500">Dedicated account manager</span>
562
+ </li>
563
+ <li class="flex">
564
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
565
+ <span class="text-base text-gray-500">24/7 phone support</span>
566
+ </li>
567
+ </ul>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </section>
573
+
574
+ <!-- CTA Section -->
575
+ <section class="bg-gradient-to-r from-primary-600 to-secondary-500">
576
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
577
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
578
+ <span class="block">Ready to declutter your digital life?</span>
579
+ <span class="block">Start your free trial today.</span>
580
+ </h2>
581
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
582
+ <div class="inline-flex rounded-md shadow">
583
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-secondary-600 bg-white hover:bg-gray-50">
584
+ Get started
585
+ </a>
586
+ </div>
587
+ <div class="ml-3 inline-flex rounded-md shadow">
588
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-500 bg-opacity-60 hover:bg-opacity-70">
589
+ Live demo
590
+ </a>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </section>
595
+
596
+ <!-- Footer -->
597
+ <footer class="bg-gray-50">
598
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
599
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
600
+ <div class="space-y-8 xl:col-span-1">
601
+ <div class="flex items-center">
602
+ <i class="fas fa-brain text-secondary-500 text-2xl mr-2"></i>
603
+ <span class="text-xl font-bold text-gray-900">ClutterClear<span class="text-primary-600">AI</span></span>
604
+ </div>
605
+ <p class="text-gray-500 text-base">
606
+ Your AI-powered digital librarian, helping you find and organize files with the power of natural language.
607
+ </p>
608
+ <div class="flex space-x-6">
609
+ <a href="#" class="text-gray-400 hover:text-gray-500">
610
+ <i class="fab fa-twitter text-xl"></i>
611
+ </a>
612
+ <a href="#" class="text-gray-400 hover:text-gray-500">
613
+ <i class="fab fa-facebook text-xl"></i>
614
+ </a>
615
+ <a href="#" class="text-gray-400 hover:text-gray-500">
616
+ <i class="fab fa-linkedin text-xl"></i>
617
+ </a>
618
+ <a href="#" class="text-gray-400 hover:text-gray-500">
619
+ <i class="fab fa-github text-xl"></i>
620
+ </a>
621
+ </div>
622
+ </div>
623
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
624
+ <div class="md:grid md:grid-cols-2 md:gap-8">
625
+ <div>
626
+ <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase">
627
+ Product
628
+ </h3>
629
+ <ul class="mt-4 space-y-4">
630
+ <li>
631
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
632
+ Features
633
+ </a>
634
+ </li>
635
+ <li>
636
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
637
+ Pricing
638
+ </a>
639
+ </li>
640
+ <li>
641
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
642
+ Integrations
643
+ </a>
644
+ </li>
645
+ <li>
646
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
647
+ Roadmap
648
+ </a>
649
+ </li>
650
+ </ul>
651
+ </div>
652
+ <div class="mt-12 md:mt-0">
653
+ <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase">
654
+ Support
655
+ </h3>
656
+ <ul class="mt-4 space-y-4">
657
+ <li>
658
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
659
+ Documentation
660
+ </a>
661
+ </li>
662
+ <li>
663
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
664
+ Guides
665
+ </a>
666
+ </li>
667
+ <li>
668
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
669
+ API Status
670
+ </a>
671
+ </li>
672
+ <li>
673
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
674
+ Contact
675
+ </a>
676
+ </li>
677
+ </ul>
678
+ </div>
679
+ </div>
680
+ <div class="md:grid md:grid-cols-2 md:gap-8">
681
+ <div>
682
+ <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase">
683
+ Company
684
+ </h3>
685
+ <ul class="mt-4 space-y-4">
686
+ <li>
687
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
688
+ About
689
+ </a>
690
+ </li>
691
+ <li>
692
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
693
+ Blog
694
+ </a>
695
+ </li>
696
+ <li>
697
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
698
+ Careers
699
+ </a>
700
+ </li>
701
+ <li>
702
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
703
+ Press
704
+ </a>
705
+ </li>
706
+ </ul>
707
+ </div>
708
+ <div class="mt-12 md:mt-0">
709
+ <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase">
710
+ Legal
711
+ </h3>
712
+ <ul class="mt-4 space-y-4">
713
+ <li>
714
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
715
+ Privacy
716
+ </a>
717
+ </li>
718
+ <li>
719
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
720
+ Terms
721
+ </a>
722
+ </li>
723
+ <li>
724
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
725
+ Security
726
+ </a>
727
+ </li>
728
+ </ul>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ </div>
733
+ <div class="mt-12 border-t border-gray-200 pt-8">
734
+ <p class="text-base text-gray-400 text-center">
735
+ &copy; 2023 ClutterClear AI. All rights reserved.
736
+ </p>
737
+ </div>
738
+ </div>
739
+ </footer>
740
+
741
+ <script>
742
+ // Smooth scrolling for anchor links
743
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
744
+ anchor.addEventListener('click', function (e) {
745
+ e.preventDefault();
746
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
747
+ behavior: 'smooth'
748
+ });
749
+ });
750
+ });
751
+
752
+ // Animation for feature cards on scroll
753
+ const observer = new IntersectionObserver((entries) => {
754
+ entries.forEach(entry => {
755
+ if (entry.isIntersecting) {
756
+ entry.target.classList.add('feature-card-visible');
757
+ }
758
+ });
759
+ }, {threshold: 0.1});
760
+
761
+ document.querySelectorAll('.feature-card').forEach(card => {
762
+ observer.observe(card);
763
+ });
764
+ </script>
765
+ <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=sample1213/samole-clutter-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
766
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ can you add some advanced animations to this and convert it into tsx file . please