Hugging Face's logo

Spaces:
wadidoank
/
content-creator-tools
Running

App Files Community
wadidoank commited on
Commit
1fe7ee2
·
verified ·
1 Parent(s): be6b616

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +952 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Content Creator Tools
3
- emoji: 🦀
4
- colorFrom: indigo
5
- colorTo: pink
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: content-creator-tools
3
+ emoji: 🐳
4
+ colorFrom: red
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,952 @@
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="id">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>KreatorKit - Toolkit Lengkap untuk Konten Kreator</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .tool-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .video-preview {
18
+ aspect-ratio: 16/9;
19
+ }
20
+ .dropzone {
21
+ border: 2px dashed #a0aec0;
22
+ transition: all 0.3s ease;
23
+ }
24
+ .dropzone.active {
25
+ border-color: #667eea;
26
+ background-color: rgba(102, 126, 234, 0.1);
27
+ }
28
+ .slider-thumb::-webkit-slider-thumb {
29
+ -webkit-appearance: none;
30
+ width: 15px;
31
+ height: 15px;
32
+ border-radius: 50%;
33
+ background: #4f46e5;
34
+ cursor: pointer;
35
+ }
36
+ @keyframes pulse {
37
+ 0%, 100% {
38
+ opacity: 1;
39
+ }
40
+ 50% {
41
+ opacity: 0.5;
42
+ }
43
+ }
44
+ .animate-pulse {
45
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 font-sans">
50
+ <!-- Navbar -->
51
+ <nav class="bg-white shadow-sm">
52
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
53
+ <div class="flex justify-between h-16">
54
+ <div class="flex items-center">
55
+ <div class="flex-shrink-0 flex items-center">
56
+ <i class="fas fa-magic text-indigo-600 text-2xl mr-2"></i>
57
+ <span class="text-xl font-bold text-gray-900">KreatorKit</span>
58
+ </div>
59
+ </div>
60
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
61
+ <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium">Beranda</a>
62
+ <a href="#tools" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Alat</a>
63
+ <a href="#features" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Fitur</a>
64
+ <a href="#pricing" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Harga</a>
65
+ </div>
66
+ <div class="flex items-center">
67
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
68
+ Masuk
69
+ </button>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </nav>
74
+
75
+ <!-- Hero Section -->
76
+ <div class="gradient-bg text-white">
77
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
78
+ <div class="text-center">
79
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
80
+ Toolkit Lengkap untuk Konten Kreator
81
+ </h1>
82
+ <p class="mt-6 max-w-lg mx-auto text-xl">
83
+ Potong podcast, buat thumbnail menakjubkan, hapus background, dan banyak lagi - semua dalam satu platform.
84
+ </p>
85
+ <div class="mt-10">
86
+ <button class="bg-white text-indigo-600 px-8 py-3 rounded-md text-lg font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white">
87
+ Mulai Gratis
88
+ </button>
89
+ <button class="ml-4 bg-transparent border border-white text-white px-8 py-3 rounded-md text-lg font-medium hover:bg-white hover:text-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white">
90
+ Lihat Demo
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Tools Section -->
98
+ <div id="tools" class="py-12 bg-white">
99
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
100
+ <div class="text-center">
101
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
102
+ Alat Kreator Profesional
103
+ </h2>
104
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
105
+ Semua alat yang Anda butuhkan untuk membuat konten berkualitas tinggi
106
+ </p>
107
+ </div>
108
+
109
+ <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
110
+ <!-- Podcast Clip Tool -->
111
+ <div class="tool-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
112
+ <div class="p-6">
113
+ <div class="flex items-center">
114
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
115
+ <i class="fas fa-cut text-white text-xl"></i>
116
+ </div>
117
+ <div class="ml-5">
118
+ <h3 class="text-lg font-medium text-gray-900">Pemotong Podcast</h3>
119
+ </div>
120
+ </div>
121
+ <div class="mt-6">
122
+ <p class="text-gray-500">
123
+ Potong bagian terbaik dari podcast Anda dan ekspor sebagai clip yang siap dibagikan.
124
+ </p>
125
+ </div>
126
+ <div class="mt-8">
127
+ <div class="relative bg-gray-100 rounded-lg p-4">
128
+ <div class="flex justify-between text-sm text-gray-500 mb-2">
129
+ <span>00:00</span>
130
+ <span>10:30</span>
131
+ </div>
132
+ <input type="range" min="0" max="630" value="120" class="slider-thumb w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer">
133
+ <div class="flex justify-between mt-4">
134
+ <button class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded text-sm font-medium">
135
+ <i class="fas fa-play mr-1"></i> Putar
136
+ </button>
137
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium">
138
+ <i class="fas fa-cut mr-1"></i> Potong
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Thumbnail Creator -->
147
+ <div class="tool-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
148
+ <div class="p-6">
149
+ <div class="flex items-center">
150
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
151
+ <i class="fas fa-image text-white text-xl"></i>
152
+ </div>
153
+ <div class="ml-5">
154
+ <h3 class="text-lg font-medium text-gray-900">Pembuat Thumbnail</h3>
155
+ </div>
156
+ </div>
157
+ <div class="mt-6">
158
+ <p class="text-gray-500">
159
+ Desain thumbnail menakjubkan dengan template profesional dan elemen kustom.
160
+ </p>
161
+ </div>
162
+ <div class="mt-8">
163
+ <div class="relative bg-gray-100 rounded-lg overflow-hidden">
164
+ <div class="video-preview bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
165
+ <div class="text-center p-4">
166
+ <p class="text-white font-bold text-xl">Judul Video Anda</p>
167
+ <p class="text-white text-sm mt-2">Channel Anda</p>
168
+ </div>
169
+ </div>
170
+ <div class="p-4">
171
+ <button class="w-full bg-indigo-600 text-white px-4 py-2 rounded text-sm font-medium">
172
+ <i class="fas fa-pencil-alt mr-2"></i> Edit Thumbnail
173
+ </button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Background Remover -->
181
+ <div class="tool-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
182
+ <div class="p-6">
183
+ <div class="flex items-center">
184
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
185
+ <i class="fas fa-eraser text-white text-xl"></i>
186
+ </div>
187
+ <div class="ml-5">
188
+ <h3 class="text-lg font-medium text-gray-900">Penghapus Background</h3>
189
+ </div>
190
+ </div>
191
+ <div class="mt-6">
192
+ <p class="text-gray-500">
193
+ Hapus background dari gambar Anda secara instan dengan AI canggih.
194
+ </p>
195
+ </div>
196
+ <div class="mt-8">
197
+ <div class="relative bg-gray-100 rounded-lg overflow-hidden">
198
+ <div class="grid grid-cols-2 gap-2 p-2">
199
+ <div class="bg-white p-2 rounded">
200
+ <div class="bg-gray-200 h-24 flex items-center justify-center">
201
+ <i class="fas fa-portrait text-gray-400 text-2xl"></i>
202
+ </div>
203
+ <p class="text-xs text-center mt-1">Sebelum</p>
204
+ </div>
205
+ <div class="bg-white p-2 rounded">
206
+ <div class="bg-gray-200 h-24 flex items-center justify-center relative">
207
+ <i class="fas fa-portrait text-gray-400 text-2xl"></i>
208
+ <div class="absolute inset-0 bg-gray-100 opacity-50" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2RkZCI+PC9yZWN0PjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZWVlIj48L3JlY3Q+PC9zdmc+')"></div>
209
+ </div>
210
+ <p class="text-xs text-center mt-1">Sesudah</p>
211
+ </div>
212
+ </div>
213
+ <div class="p-4">
214
+ <button class="w-full bg-indigo-600 text-white px-4 py-2 rounded text-sm font-medium">
215
+ <i class="fas fa-upload mr-2"></i> Unggah Gambar
216
+ </button>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Audio Enhancer -->
224
+ <div class="tool-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
225
+ <div class="p-6">
226
+ <div class="flex items-center">
227
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
228
+ <i class="fas fa-volume-up text-white text-xl"></i>
229
+ </div>
230
+ <div class="ml-5">
231
+ <h3 class="text-lg font-medium text-gray-900">Peningkat Audio</h3>
232
+ </div>
233
+ </div>
234
+ <div class="mt-6">
235
+ <p class="text-gray-500">
236
+ Bersihkan dan tingkatkan kualitas audio rekaman Anda secara otomatis.
237
+ </p>
238
+ </div>
239
+ <div class="mt-8">
240
+ <div class="relative bg-gray-100 rounded-lg p-4">
241
+ <div class="flex justify-center mb-4">
242
+ <div class="w-full bg-gray-200 h-8 rounded-full overflow-hidden">
243
+ <div class="bg-indigo-500 h-full" style="width: 70%; animation: audio-wave 2s infinite ease-in-out;"></div>
244
+ </div>
245
+ </div>
246
+ <div class="flex justify-between">
247
+ <button class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded text-sm font-medium">
248
+ <i class="fas fa-play mr-1"></i> Putar
249
+ </button>
250
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium">
251
+ <i class="fas fa-magic mr-1"></i> Tingkatkan
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Video Compressor -->
260
+ <div class="tool-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
261
+ <div class="p-6">
262
+ <div class="flex items-center">
263
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
264
+ <i class="fas fa-compress-alt text-white text-xl"></i>
265
+ </div>
266
+ <div class="ml-5">
267
+ <h3 class="text-lg font-medium text-gray-900">Kompresor Video</h3>
268
+ </div>
269
+ </div>
270
+ <div class="mt-6">
271
+ <p class="text-gray-500">
272
+ Kompres video tanpa kehilangan kualitas untuk menghemat ruang penyimpanan.
273
+ </p>
274
+ </div>
275
+ <div class="mt-8">
276
+ <div class="relative bg-gray-100 rounded-lg p-4">
277
+ <div class="flex items-center justify-between mb-4">
278
+ <div>
279
+ <p class="text-sm font-medium text-gray-700">Video.mp4</p>
280
+ <p class="text-xs text-gray-500">1280x720 • 25MB</p>
281
+ </div>
282
+ <div class="text-right">
283
+ <p class="text-sm font-medium text-gray-700">→</p>
284
+ <p class="text-xs text-gray-500">720x480 • 8MB</p>
285
+ </div>
286
+ </div>
287
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
288
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 45%"></div>
289
+ </div>
290
+ <div class="flex justify-center mt-4">
291
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded text-sm font-medium">
292
+ <i class="fas fa-upload mr-2"></i> Kompres Sekarang
293
+ </button>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Caption Generator -->
301
+ <div class="tool-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
302
+ <div class="p-6">
303
+ <div class="flex items-center">
304
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
305
+ <i class="fas fa-closed-captioning text-white text-xl"></i>
306
+ </div>
307
+ <div class="ml-5">
308
+ <h3 class="text-lg font-medium text-gray-900">Pembuat Caption</h3>
309
+ </div>
310
+ </div>
311
+ <div class="mt-6">
312
+ <p class="text-gray-500">
313
+ Buat caption otomatis untuk video Anda dengan transkripsi yang akurat.
314
+ </p>
315
+ </div>
316
+ <div class="mt-8">
317
+ <div class="relative bg-gray-100 rounded-lg p-4">
318
+ <div class="mb-4">
319
+ <textarea class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none" rows="3" placeholder="Unggah video untuk membuat caption otomatis..."></textarea>
320
+ </div>
321
+ <div class="flex justify-between">
322
+ <div class="flex space-x-2">
323
+ <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm">
324
+ <i class="fas fa-language"></i>
325
+ </button>
326
+ <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm">
327
+ <i class="fas fa-font"></i>
328
+ </button>
329
+ </div>
330
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium">
331
+ <i class="fas fa-upload mr-1"></i> Unggah Video
332
+ </button>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Features Section -->
343
+ <div id="features" class="py-12 bg-gray-50">
344
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
345
+ <div class="lg:text-center">
346
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
347
+ Fitur Unggulan Kami
348
+ </h2>
349
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
350
+ Semua yang Anda butuhkan untuk membuat konten profesional
351
+ </p>
352
+ </div>
353
+
354
+ <div class="mt-20">
355
+ <div class="space-y-10 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10">
356
+ <!-- Feature 1 -->
357
+ <div class="relative">
358
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
359
+ <i class="fas fa-bolt text-xl"></i>
360
+ </div>
361
+ <div class="ml-16">
362
+ <h3 class="text-lg font-medium text-gray-900">Proses Cepat</h3>
363
+ <p class="mt-2 text-base text-gray-500">
364
+ Gunakan teknologi terbaru untuk memproses video, audio, dan gambar dengan kecepatan tinggi.
365
+ </p>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Feature 2 -->
370
+ <div class="relative">
371
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
372
+ <i class="fas fa-cloud text-xl"></i>
373
+ </div>
374
+ <div class="ml-16">
375
+ <h3 class="text-lg font-medium text-gray-900">Penyimpanan Cloud</h3>
376
+ <p class="mt-2 text-base text-gray-500">
377
+ Semua file Anda disimpan dengan aman di cloud dan dapat diakses dari perangkat mana pun.
378
+ </p>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- Feature 3 -->
383
+ <div class="relative">
384
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
385
+ <i class="fas fa-share-alt text-xl"></i>
386
+ </div>
387
+ <div class="ml-16">
388
+ <h3 class="text-lg font-medium text-gray-900">Berbagi Mudah</h3>
389
+ <p class="mt-2 text-base text-gray-500">
390
+ Bagikan langsung ke platform sosial media atau unduh untuk digunakan di perangkat Anda.
391
+ </p>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Feature 4 -->
396
+ <div class="relative">
397
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
398
+ <i class="fas fa-templates text-xl"></i>
399
+ </div>
400
+ <div class="ml-16">
401
+ <h3 class="text-lg font-medium text-gray-900">Template Profesional</h3>
402
+ <p class="mt-2 text-base text-gray-500">
403
+ Akses ratusan template thumbnail, intro, dan outro yang dirancang oleh profesional.
404
+ </p>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Feature 5 -->
409
+ <div class="relative">
410
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
411
+ <i class="fas fa-robot text-xl"></i>
412
+ </div>
413
+ <div class="ml-16">
414
+ <h3 class="text-lg font-medium text-gray-900">AI Canggih</h3>
415
+ <p class="mt-2 text-base text-gray-500">
416
+ Manfaatkan kecerdasan buatan untuk pengeditan otomatis yang memberikan hasil menakjubkan.
417
+ </p>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Feature 6 -->
422
+ <div class="relative">
423
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
424
+ <i class="fas fa-mobile-alt text-xl"></i>
425
+ </div>
426
+ <div class="ml-16">
427
+ <h3 class="text-lg font-medium text-gray-900">Responsif</h3>
428
+ <p class="mt-2 text-base text-gray-500">
429
+ Platform yang sepenuhnya responsif dan bekerja dengan baik di semua perangkat.
430
+ </p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <!-- How It Works -->
439
+ <div class="py-12 bg-white">
440
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
441
+ <div class="lg:text-center">
442
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
443
+ Cara Kerjanya
444
+ </h2>
445
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
446
+ Hanya butuh 3 langkah sederhana untuk mendapatkan hasil profesional
447
+ </p>
448
+ </div>
449
+
450
+ <div class="mt-16">
451
+ <div class="lg:grid lg:grid-cols-3 lg:gap-8">
452
+ <!-- Step 1 -->
453
+ <div class="relative">
454
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white text-lg font-bold">
455
+ 1
456
+ </div>
457
+ <div class="mt-6">
458
+ <h3 class="text-lg font-medium text-gray-900">Unggah Konten Anda</h3>
459
+ <p class="mt-2 text-base text-gray-500">
460
+ Seret dan lepas file Anda atau klik untuk memilih dari perangkat Anda. Kami mendukung berbagai format file.
461
+ </p>
462
+ </div>
463
+ <div class="mt-6">
464
+ <div class="dropzone border-2 border-dashed rounded-lg p-8 text-center cursor-pointer">
465
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400"></i>
466
+ <p class="mt-2 text-sm text-gray-600">Seret file ke sini atau klik untuk mengunggah</p>
467
+ <p class="mt-1 text-xs text-gray-500">MP4, MOV, MP3, JPG, PNG hingga 1GB</p>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Step 2 -->
473
+ <div class="mt-10 lg:mt-0 relative">
474
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white text-lg font-bold">
475
+ 2
476
+ </div>
477
+ <div class="mt-6">
478
+ <h3 class="text-lg font-medium text-gray-900">Edit & Sesuaikan</h3>
479
+ <p class="mt-2 text-base text-gray-500">
480
+ Gunakan alat kami yang mudah digunakan untuk memotong, menyesuaikan, dan meningkatkan konten Anda.
481
+ </p>
482
+ </div>
483
+ <div class="mt-6">
484
+ <div class="bg-gray-100 rounded-lg p-4">
485
+ <div class="flex space-x-4 mb-4">
486
+ <button class="bg-white px-3 py-1 rounded text-sm font-medium shadow-sm">
487
+ <i class="fas fa-cut mr-1"></i> Potong
488
+ </button>
489
+ <button class="bg-white px-3 py-1 rounded text-sm font-medium shadow-sm">
490
+ <i class="fas fa-text-height mr-1"></i> Teks
491
+ </button>
492
+ <button class="bg-white px-3 py-1 rounded text-sm font-medium shadow-sm">
493
+ <i class="fas fa-filter mr-1"></i> Filter
494
+ </button>
495
+ </div>
496
+ <div class="bg-white rounded p-3">
497
+ <div class="flex justify-between text-xs text-gray-500 mb-2">
498
+ <span>00:00</span>
499
+ <span>05:30</span>
500
+ </div>
501
+ <input type="range" min="0" max="330" value="150" class="slider-thumb w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer">
502
+ <div class="flex justify-between mt-4">
503
+ <button class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded text-sm font-medium">
504
+ <i class="fas fa-play mr-1"></i> Putar
505
+ </button>
506
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium">
507
+ <i class="fas fa-save mr-1"></i> Simpan
508
+ </button>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Step 3 -->
516
+ <div class="mt-10 lg:mt-0 relative">
517
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white text-lg font-bold">
518
+ 3
519
+ </div>
520
+ <div class="mt-6">
521
+ <h3 class="text-lg font-medium text-gray-900">Ekspor & Bagikan</h3>
522
+ <p class="mt-2 text-base text-gray-500">
523
+ Unduh hasil akhir atau bagikan langsung ke platform sosial media favorit Anda.
524
+ </p>
525
+ </div>
526
+ <div class="mt-6">
527
+ <div class="bg-gray-100 rounded-lg p-4">
528
+ <div class="bg-white rounded p-4 text-center">
529
+ <i class="fas fa-check-circle text-4xl text-green-500 mb-3"></i>
530
+ <h4 class="font-medium text-gray-900">Edit Selesai!</h4>
531
+ <p class="text-sm text-gray-500 mt-1">Konten Anda siap dibagikan</p>
532
+
533
+ <div class="mt-6 grid grid-cols-3 gap-2">
534
+ <button class="p-2 bg-blue-500 text-white rounded">
535
+ <i class="fab fa-facebook-f"></i>
536
+ </button>
537
+ <button class="p-2 bg-blue-400 text-white rounded">
538
+ <i class="fab fa-twitter"></i>
539
+ </button>
540
+ <button class="p-2 bg-red-500 text-white rounded">
541
+ <i class="fab fa-youtube"></i>
542
+ </button>
543
+ <button class="p-2 bg-purple-500 text-white rounded">
544
+ <i class="fab fa-instagram"></i>
545
+ </button>
546
+ <button class="p-2 bg-black text-white rounded">
547
+ <i class="fab fa-tiktok"></i>
548
+ </button>
549
+ <button class="p-2 bg-gray-800 text-white rounded">
550
+ <i class="fas fa-download"></i>
551
+ </button>
552
+ </div>
553
+
554
+ <button class="mt-6 w-full bg-indigo-600 text-white px-4 py-2 rounded text-sm font-medium">
555
+ <i class="fas fa-external-link-alt mr-2"></i> Bagikan Sekarang
556
+ </button>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- Pricing Section -->
567
+ <div id="pricing" class="py-12 bg-gray-50">
568
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
569
+ <div class="lg:text-center">
570
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
571
+ Pilihan Harga
572
+ </h2>
573
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
574
+ Pilih paket yang sesuai dengan kebutuhan kreatif Anda
575
+ </p>
576
+ </div>
577
+
578
+ <div class="mt-16 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
579
+ <!-- Free Tier -->
580
+ <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
581
+ <div class="p-6">
582
+ <h3 class="text-lg font-medium text-gray-900">Gratis</h3>
583
+ <p class="mt-4 text-sm text-gray-500">
584
+ Cocok untuk pemula yang ingin mencoba fitur dasar
585
+ </p>
586
+ <div class="mt-8">
587
+ <p class="text-4xl font-extrabold text-gray-900">Rp0</p>
588
+ <p class="mt-1 text-sm text-gray-500">Selamanya gratis</p>
589
+ </div>
590
+ <button class="mt-8 block w-full bg-gray-200 border border-gray-200 rounded-md py-2 text-sm font-semibold text-gray-900 hover:bg-gray-100">
591
+ Mulai Sekarang
592
+ </button>
593
+ </div>
594
+ <div class="pt-6 pb-8 px-6">
595
+ <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">Apa yang termasuk</h4>
596
+ <ul class="mt-6 space-y-4">
597
+ <li class="flex items-start">
598
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
599
+ <i class="fas fa-check"></i>
600
+ </div>
601
+ <p class="ml-3 text-sm text-gray-700">5 proyek per bulan</p>
602
+ </li>
603
+ <li class="flex items-start">
604
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
605
+ <i class="fas fa-check"></i>
606
+ </div>
607
+ <p class="ml-3 text-sm text-gray-700">Pemotongan podcast dasar</p>
608
+ </li>
609
+ <li class="flex items-start">
610
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
611
+ <i class="fas fa-check"></i>
612
+ </div>
613
+ <p class="ml-3 text-sm text-gray-700">Template thumbnail terbatas</p>
614
+ </li>
615
+ <li class="flex items-start">
616
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
617
+ <i class="fas fa-check"></i>
618
+ </div>
619
+ <p class="ml-3 text-sm text-gray-700">Penyimpanan 1GB</p>
620
+ </li>
621
+ </ul>
622
+ </div>
623
+ </div>
624
+
625
+ <!-- Pro Tier -->
626
+ <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
627
+ <div class="p-6">
628
+ <h3 class="text-lg font-medium text-gray-900">Pro</h3>
629
+ <p class="mt-4 text-sm text-gray-500">
630
+ Untuk kreator serius yang membutuhkan lebih banyak alat
631
+ </p>
632
+ <div class="mt-8">
633
+ <p class="text-4xl font-extrabold text-gray-900">Rp99.000</p>
634
+ <p class="mt-1 text-sm text-gray-500">Per bulan, dibayar tahunan</p>
635
+ </div>
636
+ <button class="mt-8 block w-full bg-indigo-600 border border-transparent rounded-md py-2 text-sm font-semibold text-white hover:bg-indigo-700">
637
+ Mulai Uji Coba 7 Hari
638
+ </button>
639
+ </div>
640
+ <div class="pt-6 pb-8 px-6">
641
+ <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">Apa yang termasuk</h4>
642
+ <ul class="mt-6 space-y-4">
643
+ <li class="flex items-start">
644
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
645
+ <i class="fas fa-check"></i>
646
+ </div>
647
+ <p class="ml-3 text-sm text-gray-700">Proyek tidak terbatas</p>
648
+ </li>
649
+ <li class="flex items-start">
650
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
651
+ <i class="fas fa-check"></i>
652
+ </div>
653
+ <p class="ml-3 text-sm text-gray-700">Semua alat pemotongan podcast</p>
654
+ </li>
655
+ <li class="flex items-start">
656
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
657
+ <i class="fas fa-check"></i>
658
+ </div>
659
+ <p class="ml-3 text-sm text-gray-700">Akses ke semua template</p>
660
+ </li>
661
+ <li class="flex items-start">
662
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
663
+ <i class="fas fa-check"></i>
664
+ </div>
665
+ <p class="ml-3 text-sm text-gray-700">Penyimpanan 50GB</p>
666
+ </li>
667
+ <li class="flex items-start">
668
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
669
+ <i class="fas fa-check"></i>
670
+ </div>
671
+ <p class="ml-3 text-sm text-gray-700">Prioritas dukungan</p>
672
+ </li>
673
+ </ul>
674
+ </div>
675
+ </div>
676
+
677
+ <!-- Team Tier -->
678
+ <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
679
+ <div class="p-6">
680
+ <h3 class="text-lg font-medium text-gray-900">Tim</h3>
681
+ <p class="mt-4 text-sm text-gray-500">
682
+ Untuk tim kreatif yang membutuhkan kolaborasi
683
+ </p>
684
+ <div class="mt-8">
685
+ <p class="text-4xl font-extrabold text-gray-900">Rp249.000</p>
686
+ <p class="mt-1 text-sm text-gray-500">Per bulan, dibayar tahunan</p>
687
+ </div>
688
+ <button class="mt-8 block w-full bg-gray-200 border border-gray-200 rounded-md py-2 text-sm font-semibold text-gray-900 hover:bg-gray-100">
689
+ Hubungi Kami
690
+ </button>
691
+ </div>
692
+ <div class="pt-6 pb-8 px-6">
693
+ <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">Apa yang termasuk</h4>
694
+ <ul class="mt-6 space-y-4">
695
+ <li class="flex items-start">
696
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
697
+ <i class="fas fa-check"></i>
698
+ </div>
699
+ <p class="ml-3 text-sm text-gray-700">Semua fitur Pro</p>
700
+ </li>
701
+ <li class="flex items-start">
702
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
703
+ <i class="fas fa-check"></i>
704
+ </div>
705
+ <p class="ml-3 text-sm text-gray-700">Hingga 5 anggota tim</p>
706
+ </li>
707
+ <li class="flex items-start">
708
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
709
+ <i class="fas fa-check"></i>
710
+ </div>
711
+ <p class="ml-3 text-sm text-gray-700">Penyimpanan 200GB</p>
712
+ </li>
713
+ <li class="flex items-start">
714
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
715
+ <i class="fas fa-check"></i>
716
+ </div>
717
+ <p class="ml-3 text-sm text-gray-700">Alat kolaborasi tim</p>
718
+ </li>
719
+ <li class="flex items-start">
720
+ <div class="flex-shrink-0 h-5 w-5 text-green-500">
721
+ <i class="fas fa-check"></i>
722
+ </div>
723
+ <p class="ml-3 text-sm text-gray-700">Manajemen izin</p>
724
+ </li>
725
+ </ul>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ </div>
731
+
732
+ <!-- Testimonials -->
733
+ <div class="py-12 bg-white">
734
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
735
+ <div class="lg:text-center">
736
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
737
+ Kata Mereka yang Sudah Mencoba
738
+ </h2>
739
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
740
+ Ribuan kreator telah menggunakan alat kami untuk meningkatkan konten mereka
741
+ </p>
742
+ </div>
743
+
744
+ <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
745
+ <!-- Testimonial 1 -->
746
+ <div class="bg-gray-50 p-6 rounded-lg">
747
+ <div class="flex items-center">
748
+ <div class="flex-shrink-0">
749
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah">
750
+ </div>
751
+ <div class="ml-4">
752
+ <h4 class="text-sm font-bold text-gray-900">Sarah Wijaya</h4>
753
+ <p class="text-xs text-gray-500">Podcaster @CeritaMalam</p>
754
+ </div>
755
+ </div>
756
+ <div class="mt-4">
757
+ <p class="text-gray-600">
758
+ "Dengan KreatorKit, saya bisa dengan mudah memotong bagian menarik dari podcast 2 jam saya menjadi clip 1 menit yang viral. Hemat waktu banget!"
759
+ </p>
760
+ </div>
761
+ <div class="mt-4 flex">
762
+ <i class="fas fa-star text-yellow-400"></i>
763
+ <i class="fas fa-star text-yellow-400"></i>
764
+ <i class="fas fa-star text-yellow-400"></i>
765
+ <i class="fas fa-star text-yellow-400"></i>
766
+ <i class="fas fa-star text-yellow-400"></i>
767
+ </div>
768
+ </div>
769
+
770
+ <!-- Testimonial 2 -->
771
+ <div class="bg-gray-50 p-6 rounded-lg">
772
+ <div class="flex items-center">
773
+ <div class="flex-shrink-0">
774
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Budi">
775
+ </div>
776
+ <div class="ml-4">
777
+ <h4 class="text-sm font-bold text-gray-900">Budi Santoso</h4>
778
+ <p class="text-xs text-gray-500">Youtuber @TechWithBudi</p>
779
+ </div>
780
+ </div>
781
+ <div class="mt-4">
782
+ <p class="text-gray-600">
783
+ "Thumbnail dari template KreatorKit meningkatkan CTR video saya dari 5% ke 9%! Sekarang tidak perlu desainer lagi untuk thumbnail keren."
784
+ </p>
785
+ </div>
786
+ <div class="mt-4 flex">
787
+ <i class="fas fa-star text-yellow-400"></i>
788
+ <i class="fas fa-star text-yellow-400"></i>
789
+ <i class="fas fa-star text-yellow-400"></i>
790
+ <i class="fas fa-star text-yellow-400"></i>
791
+ <i class="fas fa-star text-yellow-400"></i>
792
+ </div>
793
+ </div>
794
+
795
+ <!-- Testimonial 3 -->
796
+ <div class="bg-gray-50 p-6 rounded-lg">
797
+ <div class="flex items-center">
798
+ <div class="flex-shrink-0">
799
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Dewi">
800
+ </div>
801
+ <div class="ml-4">
802
+ <h4 class="text-sm font-bold text-gray-900">Dewi Anggraeni</h4>
803
+ <p class="text-xs text-gray-500">Content Creator @DewiCooking</p>
804
+ </div>
805
+ </div>
806
+ <div class="mt-4">
807
+ <p class="text-gray-600">
808
+ "Fitur remove background sangat membantu untuk konten produk saya. Cukup upload foto, klik sekali, dan background langsung bersih tanpa edit manual."
809
+ </p>
810
+ </div>
811
+ <div class="mt-4 flex">
812
+ <i class="fas fa-star text-yellow-400"></i>
813
+ <i class="fas fa-star text-yellow-400"></i>
814
+ <i class="fas fa-star text-yellow-400"></i>
815
+ <i class="fas fa-star text-yellow-400"></i>
816
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
817
+ </div>
818
+ </div>
819
+ </div>
820
+ </div>
821
+ </div>
822
+
823
+ <!-- CTA Section -->
824
+ <div class="gradient-bg text-white">
825
+ <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">
826
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
827
+ <span class="block">Siap meningkatkan konten Anda?</span>
828
+ <span class="block text-indigo-200">Mulai gratis hari ini.</span>
829
+ </h2>
830
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
831
+ <div class="inline-flex rounded-md shadow">
832
+ <button class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
833
+ Daftar Sekarang
834
+ </button>
835
+ </div>
836
+ <div class="ml-3 inline-flex rounded-md shadow">
837
+ <button class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70">
838
+ <i class="fas fa-play mr-2"></i> Lihat Demo
839
+ </button>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ </div>
844
+
845
+ <!-- Footer -->
846
+ <footer class="bg-gray-800">
847
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
848
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
849
+ <div>
850
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Produk</h3>
851
+ <ul class="mt-4 space-y-4">
852
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Fitur</a></li>
853
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Harga</a></li>
854
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Template</a></li>
855
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Integrasi</a></li>
856
+ </ul>
857
+ </div>
858
+ <div>
859
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Sumber Daya</h3>
860
+ <ul class="mt-4 space-y-4">
861
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li>
862
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Panduan</a></li>
863
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Webinar</a></li>
864
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Dukungan</a></li>
865
+ </ul>
866
+ </div>
867
+ <div>
868
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Perusahaan</h3>
869
+ <ul class="mt-4 space-y-4">
870
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Tentang Kami</a></li>
871
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Karir</a></li>
872
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Kebijakan Privasi</a></li>
873
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Syarat Layanan</a></li>
874
+ </ul>
875
+ </div>
876
+ <div>
877
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Ikuti Kami</h3>
878
+ <div class="mt-4 flex space-x-6">
879
+ <a href="#" class="text-gray-400 hover:text-white">
880
+ <i class="fab fa-facebook-f"></i>
881
+ </a>
882
+ <a href="#" class="text-gray-400 hover:text-white">
883
+ <i class="fab fa-twitter"></i>
884
+ </a>
885
+ <a href="#" class="text-gray-400 hover:text-white">
886
+ <i class="fab fa-instagram"></i>
887
+ </a>
888
+ <a href="#" class="text-gray-400 hover:text-white">
889
+ <i class="fab fa-youtube"></i>
890
+ </a>
891
+ <a href="#" class="text-gray-400 hover:text-white">
892
+ <i class="fab fa-tiktok"></i>
893
+ </a>
894
+ </div>
895
+ <div class="mt-6">
896
+ <h4 class="text-sm font-medium text-gray-300">Langganan Newsletter</h4>
897
+ <div class="mt-2 flex">
898
+ <input type="email" placeholder="Email Anda" class="px-3 py-2 border border-gray-600 bg-gray-700 text-white rounded-l-md focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
899
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
900
+ <i class="fas fa-paper-plane"></i>
901
+ </button>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ </div>
906
+ <div class="mt-12 border-t border-gray-700 pt-8">
907
+ <p class="text-base text-gray-400 text-center">
908
+ &copy; 2023 KreatorKit. All rights reserved.
909
+ </p>
910
+ </div>
911
+ </div>
912
+ </footer>
913
+
914
+ <script>
915
+ // Simple demo functionality for the dropzone
916
+ document.querySelectorAll('.dropzone').forEach(dropzone => {
917
+ dropzone.addEventListener('dragover', (e) => {
918
+ e.preventDefault();
919
+ dropzone.classList.add('active');
920
+ });
921
+
922
+ dropzone.addEventListener('dragleave', () => {
923
+ dropzone.classList.remove('active');
924
+ });
925
+
926
+ dropzone.addEventListener('drop', (e) => {
927
+ e.preventDefault();
928
+ dropzone.classList.remove('active');
929
+ alert('File berhasil diunggah!');
930
+ });
931
+
932
+ dropzone.addEventListener('click', () => {
933
+ alert('File berhasil diunggah! (demo)');
934
+ });
935
+ });
936
+
937
+ // Demo functionality for buttons
938
+ document.querySelectorAll('button').forEach(button => {
939
+ if(button.textContent.includes('Unggah') || button.textContent.includes('Edit') ||
940
+ button.textContent.includes('Potong') || button.textContent.includes('Tingkatkan') ||
941
+ button.textContent.includes('Kompres') || button.textContent.includes('Bagikan')) {
942
+ button.addEventListener('click', (e) => {
943
+ e.preventDefault();
944
+ alert('Fitur ini akan membuka editor atau memproses file Anda. (demo)');
945
+ });
946
+ }
947
+ });
948
+
949
+ // Mobile menu toggle would go here in a real implementation
950
+ </script>
951
+ <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=wadidoank/content-creator-tools" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
952
+ </html>