Hugging Face's logo

Spaces:
Jkltrilogy1
/
pixelmotion-alchemy-studio
Running

App Files Community
Jkltrilogy1 commited on
Commit
d62ea66
·
verified ·
1 Parent(s): 2758e0a

https://makefilm.ai/workspace/image-to-video using this like make me a website like this that turns any images into porn videos using an already existing image from. Your gallery and a prompt system to have the image act out your desires and have the interface to have sexy images of ai having sex

Browse files
Files changed (3) hide show
  1. README.md +7 -4
  2. editor.html +266 -0
  3. index.html +245 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Pixelmotion Alchemy Studio
3
- emoji: 😻
4
  colorFrom: green
5
- colorTo: indigo
 
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: PixelMotion Alchemy Studio 🎬
 
3
  colorFrom: green
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
editor.html ADDED
@@ -0,0 +1,266 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>PixelMotion Editor | Transform Your Images</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .slider-thumb::-webkit-slider-thumb {
13
+ -webkit-appearance: none;
14
+ appearance: none;
15
+ width: 20px;
16
+ height: 20px;
17
+ background: #6366f1;
18
+ cursor: pointer;
19
+ border-radius: 50%;
20
+ }
21
+ .drop-zone {
22
+ border: 2px dashed #6366f1;
23
+ transition: all 0.3s ease;
24
+ }
25
+ .drop-zone:hover {
26
+ border-color: #a855f7;
27
+ background-color: rgba(99, 102, 241, 0.05);
28
+ }
29
+ .preview-container {
30
+ aspect-ratio: 16/9;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50">
35
+ <!-- Navigation -->
36
+ <nav class="bg-white shadow-sm py-4 px-6 flex justify-between items-center">
37
+ <div class="flex items-center space-x-2">
38
+ <div class="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center">
39
+ <i data-feather="film" class="text-white"></i>
40
+ </div>
41
+ <span class="text-xl font-bold text-indigo-500">PixelMotion</span>
42
+ </div>
43
+ <div class="hidden md:flex space-x-6">
44
+ <a href="#" class="text-gray-600 hover:text-indigo-500 font-medium">Editor</a>
45
+ <a href="#" class="text-gray-600 hover:text-indigo-500 font-medium">Tutorials</a>
46
+ <a href="#" class="text-gray-600 hover:text-indigo-500 font-medium">Help</a>
47
+ </div>
48
+ <div class="flex items-center space-x-4">
49
+ <button class="px-4 py-2 rounded-lg text-indigo-500 font-medium hover:bg-indigo-50">
50
+ <i data-feather="save" class="mr-2"></i> Save Project
51
+ </button>
52
+ <button class="px-4 py-2 bg-indigo-500 text-white rounded-lg font-medium hover:bg-indigo-600 transition flex items-center">
53
+ <i data-feather="download" class="mr-2"></i> Export
54
+ </button>
55
+ </div>
56
+ </nav>
57
+
58
+ <div class="container mx-auto px-6 py-8">
59
+ <div class="flex flex-col lg:flex-row gap-8">
60
+ <!-- Left Panel - Preview -->
61
+ <div class="lg:w-2/3">
62
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
63
+ <div class="preview-container bg-gray-100 flex items-center justify-center relative">
64
+ <div class="absolute inset-0 flex items-center justify-center">
65
+ <img id="preview-image" src="http://static.photos/technology/1200x630/42" alt="Preview" class="w-full h-full object-contain">
66
+ </div>
67
+ <div class="absolute bottom-4 left-4 right-4 bg-white bg-opacity-90 p-3 rounded-lg shadow-sm flex items-center justify-between">
68
+ <div class="flex items-center space-x-4">
69
+ <button class="w-10 h-10 bg-indigo-500 text-white rounded-full flex items-center justify-center">
70
+ <i data-feather="play"></i>
71
+ </button>
72
+ <div class="text-sm text-gray-600">0:00 / 0:10</div>
73
+ </div>
74
+ <div class="flex items-center space-x-2">
75
+ <button class="w-8 h-8 text-gray-500 hover:text-indigo-500">
76
+ <i data-feather="volume-2"></i>
77
+ </button>
78
+ <button class="w-8 h-8 text-gray-500 hover:text-indigo-500">
79
+ <i data-feather="settings"></i>
80
+ </button>
81
+ <button class="w-8 h-8 text-gray-500 hover:text-indigo-500">
82
+ <i data-feather="maximize"></i>
83
+ </button>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Right Panel - Controls -->
91
+ <div class="lg:w-1/3">
92
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
93
+ <div class="p-6 border-b border-gray-200">
94
+ <h2 class="text-xl font-semibold">Animation Settings</h2>
95
+ </div>
96
+
97
+ <div class="p-6 space-y-6">
98
+ <!-- Upload Section -->
99
+ <div class="drop-zone rounded-lg p-8 text-center cursor-pointer">
100
+ <div class="flex flex-col items-center">
101
+ <i data-feather="upload" class="w-10 h-10 text-indigo-500 mb-3"></i>
102
+ <h3 class="font-medium mb-1">Drag & Drop Image</h3>
103
+ <p class="text-sm text-gray-500 mb-3">or click to browse files</p>
104
+ <button class="px-4 py-2 bg-indigo-500 text-white rounded-lg text-sm hover:bg-indigo-600 transition">
105
+ Select Image
106
+ </button>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Animation Controls -->
111
+ <div>
112
+ <div class="flex justify-between items-center mb-2">
113
+ <label class="font-medium">Animation Intensity</label>
114
+ <span class="text-sm text-gray-500">70%</span>
115
+ </div>
116
+ <input type="range" min="0" max="100" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
117
+ </div>
118
+
119
+ <div>
120
+ <div class="flex justify-between items-center mb-2">
121
+ <label class="font-medium">Animation Duration</label>
122
+ <span class="text-sm text-gray-500">10 seconds</span>
123
+ </div>
124
+ <input type="range" min="1" max="30" value="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
125
+ </div>
126
+
127
+ <div>
128
+ <label class="font-medium block mb-2">Animation Style</label>
129
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
130
+ <option>Subtle Movement</option>
131
+ <option>Panning Effect</option>
132
+ <option>Zoom Effect</option>
133
+ <option>3D Parallax</option>
134
+ <option>Custom Path</option>
135
+ </select>
136
+ </div>
137
+
138
+ <div>
139
+ <label class="font-medium block mb-2">Background Style</label>
140
+ <div class="grid grid-cols-3 gap-3">
141
+ <button class="p-2 border border-gray-300 rounded-lg hover:border-indigo-500">
142
+ <div class="h-12 bg-gray-200 rounded"></div>
143
+ <div class="text-xs text-center mt-1">Blur</div>
144
+ </button>
145
+ <button class="p-2 border border-gray-300 rounded-lg hover:border-indigo-500">
146
+ <div class="h-12 bg-indigo-100 rounded"></div>
147
+ <div class="text-xs text-center mt-1">Color</div>
148
+ </button>
149
+ <button class="p-2 border border-gray-300 rounded-lg hover:border-indigo-500">
150
+ <div class="h-12 bg-gradient-to-r from-indigo-500 to-purple-500 rounded"></div>
151
+ <div class="text-xs text-center mt-1">Gradient</div>
152
+ </button>
153
+ <button class="p-2 border border-gray-300 rounded-lg hover:border-indigo-500">
154
+ <div class="h-12 bg-white border border-gray-300 rounded"></div>
155
+ <div class="text-xs text-center mt-1">Transparent</div>
156
+ </button>
157
+ <button class="p-2 border border-gray-300 rounded-lg hover:border-indigo-500">
158
+ <div class="h-12 bg-gray-900 rounded"></div>
159
+ <div class="text-xs text-center mt-1">Black</div>
160
+ </button>
161
+ <button class="p-2 border border-gray-300 rounded-lg hover:border-indigo-500">
162
+ <div class="h-12 bg-gray-100 rounded flex items-center justify-center">
163
+ <i data-feather="image" class="text-gray-400"></i>
164
+ </div>
165
+ <div class="text-xs text-center mt-1">Custom</div>
166
+ </button>
167
+ </div>
168
+ </div>
169
+
170
+ <div>
171
+ <label class="font-medium block mb-2">Advanced Options</label>
172
+ <div class="space-y-3">
173
+ <div class="flex items-center justify-between">
174
+ <span class="text-gray-700">Stabilize Image</span>
175
+ <label class="relative inline-flex items-center cursor-pointer">
176
+ <input type="checkbox" value="" class="sr-only peer" checked>
177
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500"></div>
178
+ </label>
179
+ </div>
180
+ <div class="flex items-center justify-between">
181
+ <span class="text-gray-700">Enhance Quality</span>
182
+ <label class="relative inline-flex items-center cursor-pointer">
183
+ <input type="checkbox" value="" class="sr-only peer">
184
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500"></div>
185
+ </label>
186
+ </div>
187
+ <div class="flex items-center justify-between">
188
+ <span class="text-gray-700">Add Soundtrack</span>
189
+ <label class="relative inline-flex items-center cursor-pointer">
190
+ <input type="checkbox" value="" class="sr-only peer">
191
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500"></div>
192
+ </label>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <button class="w-full py-3 bg-indigo-500 text-white rounded-lg font-medium hover:bg-indigo-600 transition flex items-center justify-center">
198
+ <i data-feather="play" class="mr-2"></i> Generate Video
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <script>
207
+ // Initialize feather icons
208
+ feather.replace();
209
+
210
+ // Image upload preview
211
+ document.querySelector('.drop-zone').addEventListener('click', function() {
212
+ // This would normally open a file dialog
213
+ console.log('File upload triggered');
214
+ });
215
+
216
+ // Drag and drop functionality
217
+ const dropZone = document.querySelector('.drop-zone');
218
+
219
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
220
+ dropZone.addEventListener(eventName, preventDefaults, false);
221
+ });
222
+
223
+ function preventDefaults(e) {
224
+ e.preventDefault();
225
+ e.stopPropagation();
226
+ }
227
+
228
+ ['dragenter', 'dragover'].forEach(eventName => {
229
+ dropZone.addEventListener(eventName, highlight, false);
230
+ });
231
+
232
+ ['dragleave', 'drop'].forEach(eventName => {
233
+ dropZone.addEventListener(eventName, unhighlight, false);
234
+ });
235
+
236
+ function highlight() {
237
+ dropZone.classList.add('border-indigo-500', 'bg-indigo-50');
238
+ }
239
+
240
+ function unhighlight() {
241
+ dropZone.classList.remove('border-indigo-500', 'bg-indigo-50');
242
+ }
243
+
244
+ dropZone.addEventListener('drop', handleDrop, false);
245
+
246
+ function handleDrop(e) {
247
+ const dt = e.dataTransfer;
248
+ const files = dt.files;
249
+ handleFiles(files);
250
+ }
251
+
252
+ function handleFiles(files) {
253
+ if (files.length) {
254
+ const file = files[0];
255
+ if (file.type.startsWith('image/')) {
256
+ const reader = new FileReader();
257
+ reader.onload = function(e) {
258
+ document.getElementById('preview-image').src = e.target.result;
259
+ };
260
+ reader.readAsDataURL(file);
261
+ }
262
+ }
263
+ }
264
+ </script>
265
+ </body>
266
+ </html>
index.html CHANGED
@@ -1,19 +1,246 @@
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>PixelMotion | Transform Images to Videos</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ .drop-zone {
20
+ border: 2px dashed #6366f1;
21
+ transition: all 0.3s ease;
22
+ }
23
+ .drop-zone:hover {
24
+ border-color: #a855f7;
25
+ background-color: rgba(99, 102, 241, 0.05);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50 text-gray-800">
30
+ <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
31
+
32
+ <!-- Navigation -->
33
+ <nav class="bg-white shadow-sm py-4 px-6 flex justify-between items-center">
34
+ <div class="flex items-center space-x-2">
35
+ <div class="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center">
36
+ <i data-feather="film" class="text-white"></i>
37
+ </div>
38
+ <span class="text-xl font-bold gradient-text">PixelMotion</span>
39
+ </div>
40
+ <div class="hidden md:flex space-x-6">
41
+ <a href="#" class="text-gray-600 hover:text-indigo-500 font-medium">Home</a>
42
+ <a href="#" class="text-gray-600 hover:text-indigo-500 font-medium">Features</a>
43
+ <a href="#" class="text-gray-600 hover:text-indigo-500 font-medium">Pricing</a>
44
+ <a href="#" class="text-gray-600 hover:text-indigo-500 font-medium">Examples</a>
45
+ </div>
46
+ <div class="flex items-center space-x-4">
47
+ <button class="px-4 py-2 rounded-lg text-indigo-500 font-medium hover:bg-indigo-50">Login</button>
48
+ <button class="px-4 py-2 bg-indigo-500 text-white rounded-lg font-medium hover:bg-indigo-600 transition">Get Started</button>
49
+ </div>
50
+ <button class="md:hidden">
51
+ <i data-feather="menu"></i>
52
+ </button>
53
+ </nav>
54
+
55
+ <!-- Hero Section -->
56
+ <section class="container mx-auto px-6 py-16 md:py-24">
57
+ <div class="flex flex-col md:flex-row items-center">
58
+ <div class="md:w-1/2 mb-12 md:mb-0">
59
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
60
+ Bring Your Images to Life with <span class="gradient-text">AI-Powered</span> Animation
61
+ </h1>
62
+ <p class="text-lg text-gray-600 mb-8">
63
+ Transform static images into dynamic videos with our advanced AI technology. Perfect for creators, marketers, and storytellers.
64
+ </p>
65
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
66
+ <button class="px-6 py-3 bg-indigo-500 text-white rounded-lg font-medium hover:bg-indigo-600 transition flex items-center justify-center">
67
+ <i data-feather="play" class="mr-2"></i> Try It Now
68
+ </button>
69
+ <button class="px-6 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition flex items-center justify-center">
70
+ <i data-feather="book-open" class="mr-2"></i> View Examples
71
+ </button>
72
+ </div>
73
+ </div>
74
+ <div class="md:w-1/2 flex justify-center">
75
+ <div class="relative w-full max-w-lg">
76
+ <div class="absolute -top-6 -left-6 w-full h-full bg-indigo-100 rounded-2xl -z-10"></div>
77
+ <div class="relative overflow-hidden rounded-2xl shadow-xl">
78
+ <img src="http://static.photos/technology/1024x576/42" alt="AI Video Example" class="w-full h-auto">
79
+ <div class="absolute inset-0 flex items-center justify-center">
80
+ <div class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center">
81
+ <i data-feather="play" class="text-indigo-500 w-8 h-8"></i>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </section>
89
+
90
+ <!-- Features Section -->
91
+ <section class="bg-gray-100 py-16">
92
+ <div class="container mx-auto px-6">
93
+ <div class="text-center mb-16">
94
+ <h2 class="text-3xl font-bold mb-4">Powerful Features</h2>
95
+ <p class="text-gray-600 max-w-2xl mx-auto">Discover what makes PixelMotion the best choice for image-to-video transformation</p>
96
+ </div>
97
+
98
+ <div class="grid md:grid-cols-3 gap-8">
99
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
100
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
101
+ <i data-feather="zap" class="text-indigo-500"></i>
102
+ </div>
103
+ <h3 class="text-xl font-semibold mb-2">Instant Processing</h3>
104
+ <p class="text-gray-600">Our AI works in seconds to transform your images into smooth, high-quality animations.</p>
105
+ </div>
106
+
107
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
108
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
109
+ <i data-feather="sliders" class="text-indigo-500"></i>
110
+ </div>
111
+ <h3 class="text-xl font-semibold mb-2">Customizable Effects</h3>
112
+ <p class="text-gray-600">Fine-tune animation styles, speeds, and transitions to match your creative vision.</p>
113
+ </div>
114
+
115
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
116
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
117
+ <i data-feather="download-cloud" class="text-indigo-500"></i>
118
+ </div>
119
+ <h3 class="text-xl font-semibold mb-2">Multiple Formats</h3>
120
+ <p class="text-gray-600">Export your creations in MP4, GIF, or WEBM formats ready for any platform.</p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </section>
125
+
126
+ <!-- How It Works -->
127
+ <section class="py-16">
128
+ <div class="container mx-auto px-6">
129
+ <div class="text-center mb-16">
130
+ <h2 class="text-3xl font-bold mb-4">How It Works</h2>
131
+ <p class="text-gray-600 max-w-2xl mx-auto">Transform your images into videos in just three simple steps</p>
132
+ </div>
133
+
134
+ <div class="flex flex-col md:flex-row justify-between items-center space-y-12 md:space-y-0">
135
+ <div class="flex flex-col items-center text-center max-w-xs">
136
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 text-indigo-500 font-bold text-xl">1</div>
137
+ <h3 class="text-xl font-semibold mb-2">Upload Your Image</h3>
138
+ <p class="text-gray-600">Drag and drop your image file or select from your device</p>
139
+ </div>
140
+
141
+ <div class="hidden md:block">
142
+ <i data-feather="chevron-right" class="text-gray-400 w-8 h-8"></i>
143
+ </div>
144
+
145
+ <div class="flex flex-col items-center text-center max-w-xs">
146
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 text-indigo-500 font-bold text-xl">2</div>
147
+ <h3 class="text-xl font-semibold mb-2">Customize Animation</h3>
148
+ <p class="text-gray-600">Adjust settings like motion intensity, direction, and duration</p>
149
+ </div>
150
+
151
+ <div class="hidden md:block">
152
+ <i data-feather="chevron-right" class="text-gray-400 w-8 h-8"></i>
153
+ </div>
154
+
155
+ <div class="flex flex-col items-center text-center max-w-xs">
156
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 text-indigo-500 font-bold text-xl">3</div>
157
+ <h3 class="text-xl font-semibold mb-2">Download & Share</h3>
158
+ <p class="text-gray-600">Get your video file instantly and share with the world</p>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </section>
163
+
164
+ <!-- CTA Section -->
165
+ <section class="bg-indigo-500 text-white py-16">
166
+ <div class="container mx-auto px-6 text-center">
167
+ <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Images?</h2>
168
+ <p class="text-indigo-100 max-w-2xl mx-auto mb-8">Join thousands of creators who are already bringing their images to life with PixelMotion</p>
169
+ <button class="px-8 py-3 bg-white text-indigo-500 rounded-lg font-medium hover:bg-gray-100 transition flex items-center mx-auto">
170
+ <i data-feather="arrow-right" class="mr-2"></i> Get Started Now
171
+ </button>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- Footer -->
176
+ <footer class="bg-gray-900 text-gray-400 py-12">
177
+ <div class="container mx-auto px-6">
178
+ <div class="flex flex-col md:flex-row justify-between">
179
+ <div class="mb-8 md:mb-0">
180
+ <div class="flex items-center space-x-2 mb-4">
181
+ <div class="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center">
182
+ <i data-feather="film" class="text-white"></i>
183
+ </div>
184
+ <span class="text-xl font-bold text-white">PixelMotion</span>
185
+ </div>
186
+ <p class="max-w-xs">The most advanced AI-powered image to video transformation platform.</p>
187
+ </div>
188
+
189
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
190
+ <div>
191
+ <h4 class="text-white font-medium mb-4">Product</h4>
192
+ <ul class="space-y-2">
193
+ <li><a href="#" class="hover:text-white transition">Features</a></li>
194
+ <li><a href="#" class="hover:text-white transition">Pricing</a></li>
195
+ <li><a href="#" class="hover:text-white transition">Examples</a></li>
196
+ </ul>
197
+ </div>
198
+
199
+ <div>
200
+ <h4 class="text-white font-medium mb-4">Company</h4>
201
+ <ul class="space-y-2">
202
+ <li><a href="#" class="hover:text-white transition">About</a></li>
203
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
204
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
205
+ </ul>
206
+ </div>
207
+
208
+ <div>
209
+ <h4 class="text-white font-medium mb-4">Legal</h4>
210
+ <ul class="space-y-2">
211
+ <li><a href="#" class="hover:text-white transition">Privacy</a></li>
212
+ <li><a href="#" class="hover:text-white transition">Terms</a></li>
213
+ <li><a href="#" class="hover:text-white transition">Cookie Policy</a></li>
214
+ </ul>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
220
+ <p>© 2023 PixelMotion. All rights reserved.</p>
221
+ <div class="flex space-x-4 mt-4 md:mt-0">
222
+ <a href="#"><i data-feather="twitter"></i></a>
223
+ <a href="#"><i data-feather="instagram"></i></a>
224
+ <a href="#"><i data-feather="facebook"></i></a>
225
+ <a href="#"><i data-feather="github"></i></a>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </footer>
230
+
231
+ <script>
232
+ // Initialize Vanta.js background
233
+ VANTA.NET({
234
+ el: "#vanta-bg",
235
+ color: 0x6366f1,
236
+ backgroundColor: 0xf8fafc,
237
+ points: 10,
238
+ maxDistance: 20,
239
+ spacing: 15
240
+ });
241
+
242
+ // Initialize feather icons
243
+ feather.replace();
244
+ </script>
245
+ </body>
246
  </html>