Hugging Face's logo

Spaces:
Kobish44
/
pdf-site
Running

App Files Community
Kobish44 commited on
Commit
b2792be
·
verified ·
1 Parent(s): 2eac0a9

design a website for pdf online tools like ilovepdf or pdf2 but make it modern ui/ux - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +639 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pdf Site
3
- emoji: ⚡
4
  colorFrom: green
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: pdf-site
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,639 @@
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>PDFMagic - Modern Online PDF Tools</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
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
19
+ }
20
+
21
+ .tool-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .dropzone {
27
+ border: 2px dashed #cbd5e1;
28
+ transition: all 0.3s ease;
29
+ }
30
+
31
+ .dropzone.active {
32
+ border-color: #6366f1;
33
+ background-color: #eef2ff;
34
+ }
35
+
36
+ .feature-icon {
37
+ width: 48px;
38
+ height: 48px;
39
+ display: flex;
40
+ align-items: center;
41
+ justify-content: center;
42
+ border-radius: 12px;
43
+ background: rgba(99, 102, 241, 0.1);
44
+ }
45
+
46
+ .file-item:hover .file-actions {
47
+ opacity: 1;
48
+ }
49
+
50
+ .file-actions {
51
+ opacity: 0;
52
+ transition: opacity 0.2s ease;
53
+ }
54
+
55
+ /* Animation for tool cards */
56
+ @keyframes fadeInUp {
57
+ from {
58
+ opacity: 0;
59
+ transform: translateY(20px);
60
+ }
61
+ to {
62
+ opacity: 1;
63
+ transform: translateY(0);
64
+ }
65
+ }
66
+
67
+ .animate-fadeInUp {
68
+ animation: fadeInUp 0.5s ease forwards;
69
+ }
70
+
71
+ /* Delay animations for staggered effect */
72
+ .delay-100 {
73
+ animation-delay: 0.1s;
74
+ }
75
+
76
+ .delay-200 {
77
+ animation-delay: 0.2s;
78
+ }
79
+
80
+ .delay-300 {
81
+ animation-delay: 0.3s;
82
+ }
83
+
84
+ .delay-400 {
85
+ animation-delay: 0.4s;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body>
90
+ <!-- Header/Navigation -->
91
+ <header class="bg-white shadow-sm sticky top-0 z-50">
92
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
93
+ <div class="flex items-center space-x-2">
94
+ <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
95
+ <i class="fas fa-file-pdf text-white text-xl"></i>
96
+ </div>
97
+ <span class="text-xl font-bold text-gray-800">PDFMagic</span>
98
+ </div>
99
+
100
+ <nav class="hidden md:flex space-x-8">
101
+ <a href="#" class="text-indigo-600 font-medium">Home</a>
102
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Tools</a>
103
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Pricing</a>
104
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Blog</a>
105
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Help</a>
106
+ </nav>
107
+
108
+ <div class="flex items-center space-x-4">
109
+ <button class="hidden md:block text-gray-600 hover:text-indigo-600 transition">
110
+ <i class="fas fa-user"></i> Sign In
111
+ </button>
112
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
113
+ Get Started
114
+ </button>
115
+ <button class="md:hidden text-gray-600">
116
+ <i class="fas fa-bars text-xl"></i>
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </header>
121
+
122
+ <!-- Hero Section -->
123
+ <section class="gradient-bg text-white py-16 md:py-24">
124
+ <div class="container mx-auto px-4 text-center">
125
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Your Complete PDF Toolkit</h1>
126
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 opacity-90">
127
+ Edit, convert, compress, and sign PDF files online. Fast, secure, and completely free.
128
+ </p>
129
+ <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden">
130
+ <div class="p-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
131
+ <div class="bg-white p-4 rounded">
132
+ <div class="flex flex-wrap justify-center gap-3">
133
+ <button class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-md font-medium hover:bg-indigo-200 transition">
134
+ <i class="fas fa-file-import mr-2"></i> Merge PDF
135
+ </button>
136
+ <button class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-md font-medium hover:bg-indigo-200 transition">
137
+ <i class="fas fa-compress-alt mr-2"></i> Compress
138
+ </button>
139
+ <button class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-md font-medium hover:bg-indigo-200 transition">
140
+ <i class="fas fa-exchange-alt mr-2"></i> Convert
141
+ </button>
142
+ <button class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-md font-medium hover:bg-indigo-200 transition">
143
+ <i class="fas fa-edit mr-2"></i> Edit
144
+ </button>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Tools Grid Section -->
153
+ <section class="py-16 bg-white">
154
+ <div class="container mx-auto px-4">
155
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">All PDF Tools You Need</h2>
156
+
157
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
158
+ <!-- Tool Card 1 -->
159
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300 animate-fadeInUp delay-100">
160
+ <div class="p-6">
161
+ <div class="w-12 h-12 rounded-lg bg-indigo-50 flex items-center justify-center mb-4">
162
+ <i class="fas fa-file-import text-indigo-600 text-xl"></i>
163
+ </div>
164
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Merge PDF</h3>
165
+ <p class="text-gray-600 mb-4">Combine multiple PDF files into one document in seconds.</p>
166
+ <button class="text-indigo-600 font-medium flex items-center">
167
+ Try now <i class="fas fa-arrow-right ml-2"></i>
168
+ </button>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Tool Card 2 -->
173
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300 animate-fadeInUp delay-200">
174
+ <div class="p-6">
175
+ <div class="w-12 h-12 rounded-lg bg-purple-50 flex items-center justify-center mb-4">
176
+ <i class="fas fa-compress-alt text-purple-600 text-xl"></i>
177
+ </div>
178
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Compress PDF</h3>
179
+ <p class="text-gray-600 mb-4">Reduce file size while keeping quality. Perfect for sharing.</p>
180
+ <button class="text-indigo-600 font-medium flex items-center">
181
+ Try now <i class="fas fa-arrow-right ml-2"></i>
182
+ </button>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Tool Card 3 -->
187
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300 animate-fadeInUp delay-300">
188
+ <div class="p-6">
189
+ <div class="w-12 h-12 rounded-lg bg-pink-50 flex items-center justify-center mb-4">
190
+ <i class="fas fa-exchange-alt text-pink-600 text-xl"></i>
191
+ </div>
192
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">PDF to Word</h3>
193
+ <p class="text-gray-600 mb-4">Convert PDF to Word documents with perfect formatting.</p>
194
+ <button class="text-indigo-600 font-medium flex items-center">
195
+ Try now <i class="fas fa-arrow-right ml-2"></i>
196
+ </button>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Tool Card 4 -->
201
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300 animate-fadeInUp delay-400">
202
+ <div class="p-6">
203
+ <div class="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center mb-4">
204
+ <i class="fas fa-edit text-blue-600 text-xl"></i>
205
+ </div>
206
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Edit PDF</h3>
207
+ <p class="text-gray-600 mb-4">Edit text, images, and pages in your PDF document.</p>
208
+ <button class="text-indigo-600 font-medium flex items-center">
209
+ Try now <i class="fas fa-arrow-right ml-2"></i>
210
+ </button>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Tool Card 5 -->
215
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300 animate-fadeInUp delay-100">
216
+ <div class="p-6">
217
+ <div class="w-12 h-12 rounded-lg bg-green-50 flex items-center justify-center mb-4">
218
+ <i class="fas fa-lock text-green-600 text-xl"></i>
219
+ </div>
220
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Protect PDF</h3>
221
+ <p class="text-gray-600 mb-4">Add passwords and permissions to your PDF files.</p>
222
+ <button class="text-indigo-600 font-medium flex items-center">
223
+ Try now <i class="fas fa-arrow-right ml-2"></i>
224
+ </button>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Tool Card 6 -->
229
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300 animate-fadeInUp delay-200">
230
+ <div class="p-6">
231
+ <div class="w-12 h-12 rounded-lg bg-yellow-50 flex items-center justify-center mb-4">
232
+ <i class="fas fa-signature text-yellow-600 text-xl"></i>
233
+ </div>
234
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Sign PDF</h3>
235
+ <p class="text-gray-600 mb-4">Add digital signatures to documents securely.</p>
236
+ <button class="text-indigo-600 font-medium flex items-center">
237
+ Try now <i class="fas fa-arrow-right ml-2"></i>
238
+ </button>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Tool Card 7 -->
243
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300 animate-fadeInUp delay-300">
244
+ <div class="p-6">
245
+ <div class="w-12 h-12 rounded-lg bg-red-50 flex items-center justify-center mb-4">
246
+ <i class="fas fa-file-excel text-red-600 text-xl"></i>
247
+ </div>
248
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">PDF to Excel</h3>
249
+ <p class="text-gray-600 mb-4">Extract tables from PDF to Excel spreadsheets.</p>
250
+ <button class="text-indigo-600 font-medium flex items-center">
251
+ Try now <i class="fas fa-arrow-right ml-2"></i>
252
+ </button>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Tool Card 8 -->
257
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition duration-300 animate-fadeInUp delay-400">
258
+ <div class="p-6">
259
+ <div class="w-12 h-12 rounded-lg bg-teal-50 flex items-center justify-center mb-4">
260
+ <i class="fas fa-file-image text-teal-600 text-xl"></i>
261
+ </div>
262
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">PDF to JPG</h3>
263
+ <p class="text-gray-600 mb-4">Convert each PDF page to JPG images.</p>
264
+ <button class="text-indigo-600 font-medium flex items-center">
265
+ Try now <i class="fas fa-arrow-right ml-2"></i>
266
+ </button>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <div class="text-center mt-12">
272
+ <button class="px-6 py-3 border border-indigo-600 text-indigo-600 rounded-lg font-medium hover:bg-indigo-50 transition">
273
+ View All Tools (24+)
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </section>
278
+
279
+ <!-- File Upload Section -->
280
+ <section class="py-16 bg-gray-50">
281
+ <div class="container mx-auto px-4">
282
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
283
+ <div class="md:flex">
284
+ <div class="md:w-1/2 p-8 gradient-bg text-white">
285
+ <h2 class="text-2xl font-bold mb-4">Upload & Process Your Files</h2>
286
+ <p class="mb-6 opacity-90">Drag and drop your PDF files or click to browse. Your files are secure and will be automatically deleted after processing.</p>
287
+
288
+ <div class="flex items-center space-x-4 mb-6">
289
+ <div class="flex items-center">
290
+ <i class="fas fa-shield-alt mr-2"></i>
291
+ <span>Secure</span>
292
+ </div>
293
+ <div class="flex items-center">
294
+ <i class="fas fa-bolt mr-2"></i>
295
+ <span>Fast</span>
296
+ </div>
297
+ <div class="flex items-center">
298
+ <i class="fas fa-cloud mr-2"></i>
299
+ <span>Cloud-based</span>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="flex flex-wrap gap-2">
304
+ <div class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">PDF</div>
305
+ <div class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">DOCX</div>
306
+ <div class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">PPTX</div>
307
+ <div class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">XLSX</div>
308
+ <div class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">JPG</div>
309
+ <div class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">PNG</div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="md:w-1/2 p-8">
314
+ <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6">
315
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
316
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Drag & drop files here</h3>
317
+ <p class="text-gray-500 mb-4">or</p>
318
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 transition">
319
+ Select Files
320
+ </button>
321
+ <p class="text-xs text-gray-500 mt-4">By uploading your files, you agree to our <a href="#" class="text-indigo-600">Terms of Service</a></p>
322
+ </div>
323
+
324
+ <div id="file-list" class="space-y-3 hidden">
325
+ <div class="file-item flex items-center justify-between p-3 bg-gray-50 rounded-lg">
326
+ <div class="flex items-center">
327
+ <i class="fas fa-file-pdf text-red-500 mr-3"></i>
328
+ <div>
329
+ <p class="font-medium text-gray-800">document.pdf</p>
330
+ <p class="text-xs text-gray-500">2.4 MB</p>
331
+ </div>
332
+ </div>
333
+ <div class="file-actions flex space-x-2">
334
+ <button class="text-gray-400 hover:text-gray-600">
335
+ <i class="fas fa-times"></i>
336
+ </button>
337
+ </div>
338
+ </div>
339
+
340
+ <button class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">
341
+ Process Files
342
+ </button>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </section>
349
+
350
+ <!-- Features Section -->
351
+ <section class="py-16 bg-white">
352
+ <div class="container mx-auto px-4">
353
+ <div class="text-center mb-12">
354
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Why Choose PDFMagic?</h2>
355
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">All the tools you need to work with PDFs in one place</p>
356
+ </div>
357
+
358
+ <div class="grid md:grid-cols-3 gap-8">
359
+ <div class="feature p-6 rounded-xl bg-gray-50">
360
+ <div class="feature-icon mb-4">
361
+ <i class="fas fa-bolt text-indigo-600 text-xl"></i>
362
+ </div>
363
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Lightning Fast</h3>
364
+ <p class="text-gray-600">Our cloud-based processing is optimized for speed. Handle large files in seconds.</p>
365
+ </div>
366
+
367
+ <div class="feature p-6 rounded-xl bg-gray-50">
368
+ <div class="feature-icon mb-4">
369
+ <i class="fas fa-shield-alt text-indigo-600 text-xl"></i>
370
+ </div>
371
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Secure Processing</h3>
372
+ <p class="text-gray-600">Files are encrypted during transfer and automatically deleted after 2 hours.</p>
373
+ </div>
374
+
375
+ <div class="feature p-6 rounded-xl bg-gray-50">
376
+ <div class="feature-icon mb-4">
377
+ <i class="fas fa-desktop text-indigo-600 text-xl"></i>
378
+ </div>
379
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">No Installation</h3>
380
+ <p class="text-gray-600">Works in your browser on any device. No software to download or install.</p>
381
+ </div>
382
+
383
+ <div class="feature p-6 rounded-xl bg-gray-50">
384
+ <div class="feature-icon mb-4">
385
+ <i class="fas fa-infinity text-indigo-600 text-xl"></i>
386
+ </div>
387
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">No Limits</h3>
388
+ <p class="text-gray-600">Unlimited usage. Process as many files as you need, whenever you need.</p>
389
+ </div>
390
+
391
+ <div class="feature p-6 rounded-xl bg-gray-50">
392
+ <div class="feature-icon mb-4">
393
+ <i class="fas fa-thumbs-up text-indigo-600 text-xl"></i>
394
+ </div>
395
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Easy to Use</h3>
396
+ <p class="text-gray-600">Simple, intuitive interface that anyone can use without training.</p>
397
+ </div>
398
+
399
+ <div class="feature p-6 rounded-xl bg-gray-50">
400
+ <div class="feature-icon mb-4">
401
+ <i class="fas fa-globe text-indigo-600 text-xl"></i>
402
+ </div>
403
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Access Anywhere</h3>
404
+ <p class="text-gray-600">Works on all devices and platforms. Access your files from anywhere.</p>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </section>
409
+
410
+ <!-- Testimonials -->
411
+ <section class="py-16 bg-gray-50">
412
+ <div class="container mx-auto px-4">
413
+ <div class="text-center mb-12">
414
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Trusted by Millions</h2>
415
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Join thousands of happy users worldwide</p>
416
+ </div>
417
+
418
+ <div class="grid md:grid-cols-3 gap-8">
419
+ <div class="bg-white p-6 rounded-xl shadow-sm">
420
+ <div class="flex items-center mb-4">
421
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
422
+ <span class="text-indigo-600 font-bold">JD</span>
423
+ </div>
424
+ <div>
425
+ <h4 class="font-medium">John D.</h4>
426
+ <div class="flex text-yellow-400">
427
+ <i class="fas fa-star"></i>
428
+ <i class="fas fa-star"></i>
429
+ <i class="fas fa-star"></i>
430
+ <i class="fas fa-star"></i>
431
+ <i class="fas fa-star"></i>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ <p class="text-gray-600">"I use PDFMagic daily for my business. The compression tool saves me hours of emailing large files to clients. Super reliable!"</p>
436
+ </div>
437
+
438
+ <div class="bg-white p-6 rounded-xl shadow-sm">
439
+ <div class="flex items-center mb-4">
440
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
441
+ <span class="text-purple-600 font-bold">SM</span>
442
+ </div>
443
+ <div>
444
+ <h4 class="font-medium">Sarah M.</h4>
445
+ <div class="flex text-yellow-400">
446
+ <i class="fas fa-star"></i>
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star"></i>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ <p class="text-gray-600">"As a teacher, I convert lots of worksheets to PDF. This site makes it effortless and the quality is always perfect."</p>
455
+ </div>
456
+
457
+ <div class="bg-white p-6 rounded-xl shadow-sm">
458
+ <div class="flex items-center mb-4">
459
+ <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mr-4">
460
+ <span class="text-pink-600 font-bold">AR</span>
461
+ </div>
462
+ <div>
463
+ <h4 class="font-medium">Alex R.</h4>
464
+ <div class="flex text-yellow-400">
465
+ <i class="fas fa-star"></i>
466
+ <i class="fas fa-star"></i>
467
+ <i class="fas fa-star"></i>
468
+ <i class="fas fa-star"></i>
469
+ <i class="fas fa-star-half-alt"></i>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ <p class="text-gray-600">"The merge tool saved me during tax season! Combined 20+ documents into one PDF with just a few clicks. Lifesaver!"</p>
474
+ </div>
475
+ </div>
476
+
477
+ <div class="mt-12 flex flex-wrap justify-center gap-4">
478
+ <div class="flex items-center px-4 py-2 bg-white rounded-lg shadow-sm">
479
+ <i class="fas fa-users text-gray-400 mr-2"></i>
480
+ <span class="font-medium">5M+</span>
481
+ <span class="text-gray-500 ml-1">Users</span>
482
+ </div>
483
+ <div class="flex items-center px-4 py-2 bg-white rounded-lg shadow-sm">
484
+ <i class="fas fa-file-alt text-gray-400 mr-2"></i>
485
+ <span class="font-medium">100M+</span>
486
+ <span class="text-gray-500 ml-1">Files Processed</span>
487
+ </div>
488
+ <div class="flex items-center px-4 py-2 bg-white rounded-lg shadow-sm">
489
+ <i class="fas fa-globe-americas text-gray-400 mr-2"></i>
490
+ <span class="font-medium">190+</span>
491
+ <span class="text-gray-500 ml-1">Countries</span>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </section>
496
+
497
+ <!-- CTA Section -->
498
+ <section class="py-16 gradient-bg text-white">
499
+ <div class="container mx-auto px-4 text-center">
500
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your PDF Workflow?</h2>
501
+ <p class="text-xl max-w-2xl mx-auto mb-8 opacity-90">Join millions of professionals and students who use PDFMagic every day</p>
502
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
503
+ <button class="px-8 py-4 bg-white text-indigo-600 rounded-lg font-bold hover:bg-gray-100 transition">
504
+ Get Started - It's Free
505
+ </button>
506
+ <button class="px-8 py-4 border border-white border-opacity-30 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition">
507
+ Learn More
508
+ </button>
509
+ </div>
510
+ </div>
511
+ </section>
512
+
513
+ <!-- Footer -->
514
+ <footer class="bg-gray-900 text-gray-400 py-12">
515
+ <div class="container mx-auto px-4">
516
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-8">
517
+ <div class="col-span-2">
518
+ <div class="flex items-center space-x-2 mb-4">
519
+ <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
520
+ <i class="fas fa-file-pdf text-white text-xl"></i>
521
+ </div>
522
+ <span class="text-xl font-bold text-white">PDFMagic</span>
523
+ </div>
524
+ <p class="mb-4">The complete online PDF solution for individuals and businesses.</p>
525
+ <div class="flex space-x-4">
526
+ <a href="#" class="text-gray-400 hover:text-white transition">
527
+ <i class="fab fa-twitter"></i>
528
+ </a>
529
+ <a href="#" class="text-gray-400 hover:text-white transition">
530
+ <i class="fab fa-facebook-f"></i>
531
+ </a>
532
+ <a href="#" class="text-gray-400 hover:text-white transition">
533
+ <i class="fab fa-instagram"></i>
534
+ </a>
535
+ <a href="#" class="text-gray-400 hover:text-white transition">
536
+ <i class="fab fa-linkedin-in"></i>
537
+ </a>
538
+ </div>
539
+ </div>
540
+
541
+ <div>
542
+ <h4 class="text-white font-medium mb-4">Tools</h4>
543
+ <ul class="space-y-2">
544
+ <li><a href="#" class="hover:text-white transition">Merge PDF</a></li>
545
+ <li><a href="#" class="hover:text-white transition">Split PDF</a></li>
546
+ <li><a href="#" class="hover:text-white transition">Compress PDF</a></li>
547
+ <li><a href="#" class="hover:text-white transition">PDF to Word</a></li>
548
+ <li><a href="#" class="hover:text-white transition">PDF to Excel</a></li>
549
+ </ul>
550
+ </div>
551
+
552
+ <div>
553
+ <h4 class="text-white font-medium mb-4">Company</h4>
554
+ <ul class="space-y-2">
555
+ <li><a href="#" class="hover:text-white transition">About Us</a></li>
556
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
557
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
558
+ <li><a href="#" class="hover:text-white transition">Press</a></li>
559
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
560
+ </ul>
561
+ </div>
562
+
563
+ <div>
564
+ <h4 class="text-white font-medium mb-4">Support</h4>
565
+ <ul class="space-y-2">
566
+ <li><a href="#" class="hover:text-white transition">Help Center</a></li>
567
+ <li><a href="#" class="hover:text-white transition">Privacy Policy</a></li>
568
+ <li><a href="#" class="hover:text-white transition">Terms of Service</a></li>
569
+ <li><a href="#" class="hover:text-white transition">Cookies</a></li>
570
+ <li><a href="#" class="hover:text-white transition">Status</a></li>
571
+ </ul>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="pt-8 border-t border-gray-800 text-sm text-center">
576
+ <p>© 2023 PDFMagic. All rights reserved.</p>
577
+ </div>
578
+ </div>
579
+ </footer>
580
+
581
+ <script>
582
+ // Dropzone functionality
583
+ const dropzone = document.getElementById('dropzone');
584
+ const fileList = document.getElementById('file-list');
585
+
586
+ // Highlight dropzone when dragging over
587
+ ['dragenter', 'dragover'].forEach(eventName => {
588
+ dropzone.addEventListener(eventName, (e) => {
589
+ e.preventDefault();
590
+ dropzone.classList.add('active');
591
+ });
592
+ });
593
+
594
+ // Remove highlight when dragging leaves
595
+ ['dragleave', 'dragend'].forEach(eventName => {
596
+ dropzone.addEventListener(eventName, () => {
597
+ dropzone.classList.remove('active');
598
+ });
599
+ });
600
+
601
+ // Handle file drop
602
+ dropzone.addEventListener('drop', (e) => {
603
+ e.preventDefault();
604
+ dropzone.classList.remove('active');
605
+
606
+ // Show file list
607
+ fileList.classList.remove('hidden');
608
+
609
+ // In a real app, you would process the files here
610
+ // const files = e.dataTransfer.files;
611
+ // console.log(files);
612
+ });
613
+
614
+ // Click to select files
615
+ dropzone.addEventListener('click', () => {
616
+ // In a real app, this would trigger a file input
617
+ fileList.classList.remove('hidden');
618
+ });
619
+
620
+ // Tool card animations
621
+ document.addEventListener('DOMContentLoaded', () => {
622
+ const toolCards = document.querySelectorAll('.tool-card');
623
+
624
+ const observer = new IntersectionObserver((entries) => {
625
+ entries.forEach(entry => {
626
+ if (entry.isIntersecting) {
627
+ entry.target.classList.add('animate-fadeInUp');
628
+ observer.unobserve(entry.target);
629
+ }
630
+ });
631
+ }, { threshold: 0.1 });
632
+
633
+ toolCards.forEach(card => {
634
+ observer.observe(card);
635
+ });
636
+ });
637
+ </script>
638
+ <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=Kobish44/pdf-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
639
+ </html>