Hugging Face's logo

Spaces:
ashutoshdhanda
/
soprano
Running

App Files Community
ashutoshdhanda commited on
Commit
17e030d
·
verified ·
1 Parent(s): 89a3273

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1050 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Soprano
3
- emoji: 🏢
4
- colorFrom: green
5
- colorTo: gray
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: soprano
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,1050 @@
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>Creatora | Multimodal AI Content Creation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6366f1',
15
+ secondary: '#8b5cf6',
16
+ dark: '#1e293b',
17
+ light: '#f8fafc',
18
+ },
19
+ fontFamily: {
20
+ sans: ['Inter', 'sans-serif'],
21
+ },
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ overflow-x: hidden;
32
+ }
33
+
34
+ .gradient-text {
35
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
36
+ -webkit-background-clip: text;
37
+ background-clip: text;
38
+ color: transparent;
39
+ }
40
+
41
+ .hero-gradient {
42
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
43
+ }
44
+
45
+ .feature-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
48
+ }
49
+
50
+ .tooltip {
51
+ position: relative;
52
+ display: inline-block;
53
+ }
54
+
55
+ .tooltip .tooltip-text {
56
+ visibility: hidden;
57
+ width: 200px;
58
+ background-color: #1e293b;
59
+ color: #fff;
60
+ text-align: center;
61
+ border-radius: 6px;
62
+ padding: 8px;
63
+ position: absolute;
64
+ z-index: 1;
65
+ bottom: 125%;
66
+ left: 50%;
67
+ transform: translateX(-50%);
68
+ opacity: 0;
69
+ transition: opacity 0.3s;
70
+ }
71
+
72
+ .tooltip:hover .tooltip-text {
73
+ visibility: visible;
74
+ opacity: 1;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-light text-dark">
79
+ <!-- Navigation -->
80
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
81
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
82
+ <div class="flex justify-between h-16">
83
+ <div class="flex items-center">
84
+ <div class="flex-shrink-0 flex items-center">
85
+ <i class="fas fa-brain text-primary text-2xl mr-2"></i>
86
+ <span class="text-xl font-bold text-dark">Creatora</span>
87
+ </div>
88
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
89
+ <a href="#features" class="border-primary text-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
90
+ <a href="#how-it-works" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a>
91
+ <a href="#pricing" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>
92
+ <a href="#testimonials" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Testimonials</a>
93
+ </div>
94
+ </div>
95
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
96
+ <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Get Started</button>
97
+ </div>
98
+ <div class="-mr-2 flex items-center sm:hidden">
99
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
100
+ <span class="sr-only">Open main menu</span>
101
+ <i class="fas fa-bars"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Mobile menu -->
108
+ <div id="mobile-menu" class="hidden sm:hidden">
109
+ <div class="pt-2 pb-3 space-y-1">
110
+ <a href="#features" class="bg-primary/10 border-primary text-dark block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a>
111
+ <a href="#how-it-works" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a>
112
+ <a href="#pricing" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Pricing</a>
113
+ <a href="#testimonials" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Testimonials</a>
114
+ <div class="mt-4 pl-3">
115
+ <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 w-full">Get Started</button>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </nav>
120
+
121
+ <!-- Hero Section -->
122
+ <section class="hero-gradient">
123
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
124
+ <div class="md:flex md:items-center md:justify-between">
125
+ <div class="md:w-1/2 mb-10 md:mb-0">
126
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
127
+ Create <span class="gradient-text">Multimodal</span> Content with AI
128
+ </h1>
129
+ <p class="text-lg text-gray-600 mb-8">
130
+ Creatora harnesses the power of multimodal AI to help you generate stunning visuals, compelling text, and engaging videos - all in one platform.
131
+ </p>
132
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
133
+ <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg text-md font-medium transition duration-300 shadow-lg hover:shadow-xl">
134
+ Start Creating Free
135
+ </button>
136
+ <button class="border border-primary text-primary hover:bg-primary/10 px-6 py-3 rounded-lg text-md font-medium transition duration-300">
137
+ Watch Demo <i class="fas fa-play ml-2"></i>
138
+ </button>
139
+ </div>
140
+ <div class="mt-8 flex items-center">
141
+ <div class="flex -space-x-2">
142
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
143
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
144
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
145
+ </div>
146
+ <p class="ml-4 text-gray-600">
147
+ <span class="font-semibold">10,000+</span> creators already creating
148
+ </p>
149
+ </div>
150
+ </div>
151
+ <div class="md:w-1/2 relative">
152
+ <div class="relative bg-white p-4 rounded-xl shadow-2xl">
153
+ <div class="absolute -top-4 -right-4 bg-secondary text-white rounded-full p-3 shadow-lg">
154
+ <i class="fas fa-magic text-xl"></i>
155
+ </div>
156
+ <div class="flex justify-between items-center mb-4">
157
+ <div class="flex space-x-2">
158
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
159
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
160
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
161
+ </div>
162
+ <div class="text-sm text-gray-500">Creatora AI</div>
163
+ </div>
164
+ <div class="bg-gray-50 rounded-lg p-4 mb-4">
165
+ <div class="flex items-start">
166
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
167
+ <i class="fas fa-robot text-primary"></i>
168
+ </div>
169
+ <div class="ml-3">
170
+ <div class="text-sm font-medium text-gray-900">Creatora AI</div>
171
+ <div class="mt-1 text-sm text-gray-700">
172
+ <p>I can help you create a social media post about your new product. Would you like me to generate:</p>
173
+ <div class="mt-2 space-y-2">
174
+ <div class="flex items-center">
175
+ <i class="fas fa-image text-secondary mr-2"></i>
176
+ <span>Product images</span>
177
+ </div>
178
+ <div class="flex items-center">
179
+ <i class="fas fa-font text-secondary mr-2"></i>
180
+ <span>Engaging captions</span>
181
+ </div>
182
+ <div class="flex items-center">
183
+ <i class="fas fa-video text-secondary mr-2"></i>
184
+ <span>Short promotional video</span>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ <div class="bg-gray-100 rounded-lg p-3">
192
+ <div class="flex">
193
+ <input type="text" class="flex-1 border-0 bg-white rounded-l-lg px-4 py-2 focus:ring-2 focus:ring-primary focus:outline-none" placeholder="Describe what you want to create...">
194
+ <button class="bg-primary text-white px-4 py-2 rounded-r-lg">
195
+ <i class="fas fa-paper-plane"></i>
196
+ </button>
197
+ </div>
198
+ <div class="mt-2 flex space-x-2">
199
+ <button class="text-xs bg-white px-2 py-1 rounded flex items-center">
200
+ <i class="fas fa-image text-xs mr-1"></i> Image
201
+ </button>
202
+ <button class="text-xs bg-white px-2 py-1 rounded flex items-center">
203
+ <i class="fas fa-font text-xs mr-1"></i> Text
204
+ </button>
205
+ <button class="text-xs bg-white px-2 py-1 rounded flex items-center">
206
+ <i class="fas fa-video text-xs mr-1"></i> Video
207
+ </button>
208
+ <button class="text-xs bg-white px-2 py-1 rounded flex items-center">
209
+ <i class="fas fa-music text-xs mr-1"></i> Audio
210
+ </button>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ <div class="absolute -bottom-6 -left-6 bg-white p-3 rounded-lg shadow-lg w-32">
215
+ <div class="text-xs text-gray-500 mb-1">Generated Content</div>
216
+ <div class="flex justify-between items-center">
217
+ <div class="text-sm font-medium">24 items</div>
218
+ <div class="text-green-500 text-xs">
219
+ <i class="fas fa-arrow-up"></i> 12%
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </section>
227
+
228
+ <!-- Logo Cloud -->
229
+ <section class="bg-white py-12">
230
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
231
+ <p class="text-center text-gray-500 mb-8">Trusted by creators at</p>
232
+ <div class="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
233
+ <div class="col-span-1 flex justify-center">
234
+ <img class="h-12 opacity-70 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/800px-Apple_logo_black.svg.png" alt="Apple">
235
+ </div>
236
+ <div class="col-span-1 flex justify-center">
237
+ <img class="h-12 opacity-70 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/2560px-Amazon_logo.svg.png" alt="Amazon">
238
+ </div>
239
+ <div class="col-span-1 flex justify-center">
240
+ <img class="h-12 opacity-70 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png" alt="Google">
241
+ </div>
242
+ <div class="col-span-1 flex justify-center">
243
+ <img class="h-12 opacity-70 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/2560px-Netflix_2015_logo.svg.png" alt="Netflix">
244
+ </div>
245
+ <div class="col-span-1 flex justify-center">
246
+ <img class="h-12 opacity-70 hover:opacity-100 transition" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/2560px-Microsoft_logo_%282012%29.svg.png" alt="Microsoft">
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </section>
251
+
252
+ <!-- Features Section -->
253
+ <section id="features" class="py-20 bg-gray-50">
254
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
255
+ <div class="text-center mb-16">
256
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
257
+ <span class="block">Powerful Multimodal Features</span>
258
+ </h2>
259
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
260
+ Creatora combines multiple AI models to give you the most comprehensive content creation experience.
261
+ </p>
262
+ </div>
263
+
264
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
265
+ <!-- Feature 1 -->
266
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 ease-in-out">
267
+ <div class="flex items-center mb-4">
268
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary">
269
+ <i class="fas fa-image text-xl"></i>
270
+ </div>
271
+ <h3 class="ml-4 text-lg font-medium text-gray-900">AI Image Generation</h3>
272
+ </div>
273
+ <p class="mt-2 text-gray-500">
274
+ Create stunning visuals from text prompts or by uploading reference images. Supports multiple art styles and resolutions.
275
+ </p>
276
+ <div class="mt-4 flex flex-wrap gap-2">
277
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">
278
+ Realistic
279
+ </span>
280
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">
281
+ Anime
282
+ </span>
283
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">
284
+ 3D Art
285
+ </span>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Feature 2 -->
290
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 ease-in-out">
291
+ <div class="flex items-center mb-4">
292
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-md bg-secondary/10 text-secondary">
293
+ <i class="fas fa-font text-xl"></i>
294
+ </div>
295
+ <h3 class="ml-4 text-lg font-medium text-gray-900">Smart Text Generation</h3>
296
+ </div>
297
+ <p class="mt-2 text-gray-500">
298
+ Generate high-quality content including blog posts, social media captions, product descriptions, and more.
299
+ </p>
300
+ <div class="mt-4 flex flex-wrap gap-2">
301
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary/10 text-secondary">
302
+ SEO Optimized
303
+ </span>
304
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary/10 text-secondary">
305
+ Multiple Languages
306
+ </span>
307
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary/10 text-secondary">
308
+ Tone Control
309
+ </span>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Feature 3 -->
314
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 ease-in-out">
315
+ <div class="flex items-center mb-4">
316
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-800">
317
+ <i class="fas fa-video text-xl"></i>
318
+ </div>
319
+ <h3 class="ml-4 text-lg font-medium text-gray-900">AI Video Creation</h3>
320
+ </div>
321
+ <p class="mt-2 text-gray-500">
322
+ Transform scripts into engaging videos with AI-generated visuals, voiceovers, and automatic editing.
323
+ </p>
324
+ <div class="mt-4 flex flex-wrap gap-2">
325
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
326
+ Animations
327
+ </span>
328
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
329
+ Voiceovers
330
+ </span>
331
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
332
+ Subtitles
333
+ </span>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Feature 4 -->
338
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 ease-in-out">
339
+ <div class="flex items-center mb-4">
340
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-800">
341
+ <i class="fas fa-music text-xl"></i>
342
+ </div>
343
+ <h3 class="ml-4 text-lg font-medium text-gray-900">Audio Generation</h3>
344
+ </div>
345
+ <p class="mt-2 text-gray-500">
346
+ Create custom music, sound effects, and realistic voiceovers in multiple languages and accents.
347
+ </p>
348
+ <div class="mt-4 flex flex-wrap gap-2">
349
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
350
+ Background Music
351
+ </span>
352
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
353
+ Voice Cloning
354
+ </span>
355
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
356
+ Sound Effects
357
+ </span>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Feature 5 -->
362
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 ease-in-out">
363
+ <div class="flex items-center mb-4">
364
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-800">
365
+ <i class="fas fa-random text-xl"></i>
366
+ </div>
367
+ <h3 class="ml-4 text-lg font-medium text-gray-900">Content Remixing</h3>
368
+ </div>
369
+ <p class="mt-2 text-gray-500">
370
+ Transform existing content into new formats - turn blog posts into videos, podcasts into articles, and more.
371
+ </p>
372
+ <div class="mt-4 flex flex-wrap gap-2">
373
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
374
+ Cross-format
375
+ </span>
376
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
377
+ Style Transfer
378
+ </span>
379
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
380
+ Summarization
381
+ </span>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Feature 6 -->
386
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 ease-in-out">
387
+ <div class="flex items-center mb-4">
388
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-md bg-yellow-100 text-yellow-800">
389
+ <i class="fas fa-users text-xl"></i>
390
+ </div>
391
+ <h3 class="ml-4 text-lg font-medium text-gray-900">Collaboration Tools</h3>
392
+ </div>
393
+ <p class="mt-2 text-gray-500">
394
+ Work with your team in real-time, leave feedback, and manage content workflows all in one place.
395
+ </p>
396
+ <div class="mt-4 flex flex-wrap gap-2">
397
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
398
+ Version Control
399
+ </span>
400
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
401
+ Comments
402
+ </span>
403
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
404
+ Approvals
405
+ </span>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </section>
411
+
412
+ <!-- How It Works Section -->
413
+ <section id="how-it-works" class="py-20 bg-white">
414
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
415
+ <div class="text-center mb-16">
416
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
417
+ <span class="block">How Creatora Works</span>
418
+ </h2>
419
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
420
+ Create amazing content in just a few simple steps
421
+ </p>
422
+ </div>
423
+
424
+ <div class="relative">
425
+ <!-- Timeline bar -->
426
+ <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-primary to-secondary"></div>
427
+
428
+ <!-- Step 1 -->
429
+ <div class="relative mb-16 md:flex md:items-center md:justify-between">
430
+ <div class="md:w-5/12 mb-8 md:mb-0">
431
+ <div class="flex items-center">
432
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary text-white font-bold text-lg">
433
+ 1
434
+ </div>
435
+ <h3 class="ml-4 text-xl font-medium text-gray-900">Describe Your Content</h3>
436
+ </div>
437
+ <p class="mt-4 text-gray-500">
438
+ Simply tell Creatora what you want to create. You can be as specific or as general as you like. Our AI understands natural language and will ask clarifying questions if needed.
439
+ </p>
440
+ </div>
441
+ <div class="hidden md:block md:w-2/12"></div>
442
+ <div class="md:w-5/12 bg-gray-50 p-6 rounded-xl">
443
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
444
+ <div class="flex items-center mb-3">
445
+ <div class="h-2 w-2 rounded-full bg-primary mr-2"></div>
446
+ <div class="h-2 w-2 rounded-full bg-primary/50 mr-2"></div>
447
+ <div class="h-2 w-2 rounded-full bg-primary/30"></div>
448
+ </div>
449
+ <div class="text-sm text-gray-600 mb-2">User input:</div>
450
+ <div class="bg-gray-100 p-3 rounded-lg mb-3">
451
+ "I need an Instagram post for my new coffee shop. The image should show a cozy interior with people working on laptops. The caption should be friendly and inviting."
452
+ </div>
453
+ <div class="text-sm text-gray-600 mb-2">AI response:</div>
454
+ <div class="bg-primary/10 p-3 rounded-lg">
455
+ "Got it! I'll generate 3 image options and 5 caption variations. Would you like the style to be realistic, artistic, or something else?"
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <!-- Step 2 -->
462
+ <div class="relative mb-16 md:flex md:flex-row-reverse md:items-center md:justify-between">
463
+ <div class="md:w-5/12 mb-8 md:mb-0">
464
+ <div class="flex items-center">
465
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-secondary text-white font-bold text-lg">
466
+ 2
467
+ </div>
468
+ <h3 class="ml-4 text-xl font-medium text-gray-900">AI Generates Options</h3>
469
+ </div>
470
+ <p class="mt-4 text-gray-500">
471
+ Creatora will generate multiple variations of your content across different modalities. You'll get to choose from different styles, tones, and formats.
472
+ </p>
473
+ </div>
474
+ <div class="hidden md:block md:w-2/12"></div>
475
+ <div class="md:w-5/12 bg-gray-50 p-6 rounded-xl">
476
+ <div class="grid grid-cols-3 gap-2">
477
+ <div class="bg-white p-2 rounded-lg shadow-sm border border-gray-200">
478
+ <div class="bg-gray-200 h-24 rounded mb-2"></div>
479
+ <div class="text-xs text-gray-500">Option 1</div>
480
+ </div>
481
+ <div class="bg-white p-2 rounded-lg shadow-sm border border-gray-200">
482
+ <div class="bg-gray-200 h-24 rounded mb-2"></div>
483
+ <div class="text-xs text-gray-500">Option 2</div>
484
+ </div>
485
+ <div class="bg-white p-2 rounded-lg shadow-sm border border-gray-200">
486
+ <div class="bg-gray-200 h-24 rounded mb-2"></div>
487
+ <div class="text-xs text-gray-500">Option 3</div>
488
+ </div>
489
+ </div>
490
+ <div class="mt-3 bg-white p-3 rounded-lg shadow-sm border border-gray-200">
491
+ <div class="text-xs text-gray-500 mb-1">Caption options:</div>
492
+ <ul class="text-sm space-y-1">
493
+ <li class="flex items-center">
494
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
495
+ "Your new favorite workspace is now open!"
496
+ </li>
497
+ <li>"Coffee, wifi, and good vibes ☕️💻"</li>
498
+ <li>"Where productivity meets perfect espresso"</li>
499
+ </ul>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <!-- Step 3 -->
505
+ <div class="relative md:flex md:items-center md:justify-between">
506
+ <div class="md:w-5/12 mb-8 md:mb-0">
507
+ <div class="flex items-center">
508
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-500 text-white font-bold text-lg">
509
+ 3
510
+ </div>
511
+ <h3 class="ml-4 text-xl font-medium text-gray-900">Refine & Publish</h3>
512
+ </div>
513
+ <p class="mt-4 text-gray-500">
514
+ Select your favorite options and make any final tweaks. Creatora can automatically format your content for different platforms or export in multiple formats.
515
+ </p>
516
+ </div>
517
+ <div class="hidden md:block md:w-2/12"></div>
518
+ <div class="md:w-5/12 bg-gray-50 p-6 rounded-xl">
519
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
520
+ <div class="flex justify-between items-center mb-4">
521
+ <div class="text-sm font-medium">Final Content</div>
522
+ <div class="flex space-x-2">
523
+ <button class="text-xs bg-gray-100 px-2 py-1 rounded flex items-center">
524
+ <i class="fas fa-instagram text-xs mr-1"></i>
525
+ </button>
526
+ <button class="text-xs bg-gray-100 px-2 py-1 rounded flex items-center">
527
+ <i class="fas fa-facebook text-xs mr-1"></i>
528
+ </button>
529
+ <button class="text-xs bg-gray-100 px-2 py-1 rounded flex items-center">
530
+ <i class="fas fa-link text-xs mr-1"></i>
531
+ </button>
532
+ </div>
533
+ </div>
534
+ <div class="bg-gray-200 h-40 rounded mb-3"></div>
535
+ <div class="text-sm mb-3">
536
+ "Your new favorite workspace is now open! Come enjoy our artisan coffee and comfy seating. Free high-speed wifi for all customers. #GrandOpening #CoffeeTime"
537
+ </div>
538
+ <div class="flex justify-between">
539
+ <button class="text-sm text-primary font-medium">Edit</button>
540
+ <button class="bg-primary text-white px-3 py-1 rounded text-sm">Publish</button>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </section>
548
+
549
+ <!-- Stats Section -->
550
+ <section class="py-16 bg-gradient-to-r from-primary to-secondary text-white">
551
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
552
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
553
+ <div class="p-6">
554
+ <div class="text-4xl font-bold mb-2">10M+</div>
555
+ <div class="text-lg">Content Pieces Created</div>
556
+ </div>
557
+ <div class="p-6">
558
+ <div class="text-4xl font-bold mb-2">50+</div>
559
+ <div class="text-lg">Content Types Supported</div>
560
+ </div>
561
+ <div class="p-6">
562
+ <div class="text-4xl font-bold mb-2">95%</div>
563
+ <div class="text-lg">Customer Satisfaction</div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </section>
568
+
569
+ <!-- Pricing Section -->
570
+ <section id="pricing" class="py-20 bg-gray-50">
571
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
572
+ <div class="text-center mb-16">
573
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
574
+ <span class="block">Simple, Transparent Pricing</span>
575
+ </h2>
576
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
577
+ Choose the plan that fits your creative needs
578
+ </p>
579
+ </div>
580
+
581
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
582
+ <!-- Free Tier -->
583
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
584
+ <div class="p-6">
585
+ <h3 class="text-lg font-medium text-gray-900">Starter</h3>
586
+ <div class="mt-4 flex items-baseline">
587
+ <span class="text-4xl font-extrabold">$0</span>
588
+ <span class="ml-1 text-lg font-medium text-gray-500">/month</span>
589
+ </div>
590
+ <p class="mt-2 text-gray-500">Perfect for trying out Creatora</p>
591
+ <div class="mt-6">
592
+ <button class="w-full bg-gray-100 text-gray-800 px-4 py-2 rounded-md text-sm font-medium">Get Started</button>
593
+ </div>
594
+ </div>
595
+ <div class="border-t border-gray-200 px-6 py-4">
596
+ <ul class="space-y-3">
597
+ <li class="flex items-start">
598
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
599
+ <span>100 AI generations/month</span>
600
+ </li>
601
+ <li class="flex items-start">
602
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
603
+ <span>Basic image & text generation</span>
604
+ </li>
605
+ <li class="flex items-start">
606
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
607
+ <span>Standard resolution</span>
608
+ </li>
609
+ <li class="flex items-start text-gray-400">
610
+ <i class="fas fa-times mt-1 mr-2"></i>
611
+ <span>No video generation</span>
612
+ </li>
613
+ <li class="flex items-start text-gray-400">
614
+ <i class="fas fa-times mt-1 mr-2"></i>
615
+ <span>No commercial license</span>
616
+ </li>
617
+ </ul>
618
+ </div>
619
+ </div>
620
+
621
+ <!-- Pro Tier -->
622
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-primary relative">
623
+ <div class="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
624
+ MOST POPULAR
625
+ </div>
626
+ <div class="p-6">
627
+ <h3 class="text-lg font-medium text-gray-900">Pro</h3>
628
+ <div class="mt-4 flex items-baseline">
629
+ <span class="text-4xl font-extrabold">$29</span>
630
+ <span class="ml-1 text-lg font-medium text-gray-500">/month</span>
631
+ </div>
632
+ <p class="mt-2 text-gray-500">For serious content creators</p>
633
+ <div class="mt-6">
634
+ <button class="w-full bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary/90">Upgrade Now</button>
635
+ </div>
636
+ </div>
637
+ <div class="border-t border-gray-200 px-6 py-4">
638
+ <ul class="space-y-3">
639
+ <li class="flex items-start">
640
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
641
+ <span>1,000 AI generations/month</span>
642
+ </li>
643
+ <li class="flex items-start">
644
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
645
+ <span>Advanced image & text generation</span>
646
+ </li>
647
+ <li class="flex items-start">
648
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
649
+ <span>High resolution outputs</span>
650
+ </li>
651
+ <li class="flex items-start">
652
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
653
+ <span>Basic video generation</span>
654
+ </li>
655
+ <li class="flex items-start">
656
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
657
+ <span>Commercial license</span>
658
+ </li>
659
+ </ul>
660
+ </div>
661
+ </div>
662
+
663
+ <!-- Enterprise Tier -->
664
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
665
+ <div class="p-6">
666
+ <h3 class="text-lg font-medium text-gray-900">Enterprise</h3>
667
+ <div class="mt-4 flex items-baseline">
668
+ <span class="text-4xl font-extrabold">$99</span>
669
+ <span class="ml-1 text-lg font-medium text-gray-500">/month</span>
670
+ </div>
671
+ <p class="mt-2 text-gray-500">For teams and businesses</p>
672
+ <div class="mt-6">
673
+ <button class="w-full bg-gray-100 text-gray-800 px-4 py-2 rounded-md text-sm font-medium">Contact Sales</button>
674
+ </div>
675
+ </div>
676
+ <div class="border-t border-gray-200 px-6 py-4">
677
+ <ul class="space-y-3">
678
+ <li class="flex items-start">
679
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
680
+ <span>10,000 AI generations/month</span>
681
+ </li>
682
+ <li class="flex items-start">
683
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
684
+ <span>All advanced features</span>
685
+ </li>
686
+ <li class="flex items-start">
687
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
688
+ <span>Ultra HD resolution</span>
689
+ </li>
690
+ <li class="flex items-start">
691
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
692
+ <span>Advanced video generation</span>
693
+ </li>
694
+ <li class="flex items-start">
695
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
696
+ <span>Team collaboration tools</span>
697
+ </li>
698
+ </ul>
699
+ </div>
700
+ </div>
701
+ </div>
702
+
703
+ <div class="mt-12 text-center">
704
+ <p class="text-gray-500">Need something custom? <a href="#" class="text-primary font-medium">Contact our sales team</a></p>
705
+ </div>
706
+ </div>
707
+ </section>
708
+
709
+ <!-- Testimonials Section -->
710
+ <section id="testimonials" class="py-20 bg-white">
711
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
712
+ <div class="text-center mb-16">
713
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
714
+ <span class="block">What Our Users Say</span>
715
+ </h2>
716
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
717
+ Don't just take our word for it
718
+ </p>
719
+ </div>
720
+
721
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
722
+ <!-- Testimonial 1 -->
723
+ <div class="bg-gray-50 p-6 rounded-xl">
724
+ <div class="flex items-center mb-4">
725
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
726
+ <div class="ml-4">
727
+ <div class="font-medium">Sarah Johnson</div>
728
+ <div class="text-gray-500 text-sm">Content Creator</div>
729
+ </div>
730
+ </div>
731
+ <div class="text-gray-700 mb-4">
732
+ "Creatora has completely transformed my content workflow. I can now create a week's worth of social media content in just a few hours. The AI understands exactly what I need!"
733
+ </div>
734
+ <div class="flex text-yellow-400">
735
+ <i class="fas fa-star"></i>
736
+ <i class="fas fa-star"></i>
737
+ <i class="fas fa-star"></i>
738
+ <i class="fas fa-star"></i>
739
+ <i class="fas fa-star"></i>
740
+ </div>
741
+ </div>
742
+
743
+ <!-- Testimonial 2 -->
744
+ <div class="bg-gray-50 p-6 rounded-xl">
745
+ <div class="flex items-center mb-4">
746
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael Chen">
747
+ <div class="ml-4">
748
+ <div class="font-medium">Michael Chen</div>
749
+ <div class="text-gray-500 text-sm">Marketing Director</div>
750
+ </div>
751
+ </div>
752
+ <div class="text-gray-700 mb-4">
753
+ "The multimodal capabilities are game-changing. We can create cohesive campaigns with matching visuals, copy, and even video - all from a single prompt. Our team's productivity has doubled."
754
+ </div>
755
+ <div class="flex text-yellow-400">
756
+ <i class="fas fa-star"></i>
757
+ <i class="fas fa-star"></i>
758
+ <i class="fas fa-star"></i>
759
+ <i class="fas fa-star"></i>
760
+ <i class="fas fa-star"></i>
761
+ </div>
762
+ </div>
763
+
764
+ <!-- Testimonial 3 -->
765
+ <div class="bg-gray-50 p-6 rounded-xl">
766
+ <div class="flex items-center mb-4">
767
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
768
+ <div class="ml-4">
769
+ <div class="font-medium">Emma Rodriguez</div>
770
+ <div class="text-gray-500 text-sm">Small Business Owner</div>
771
+ </div>
772
+ </div>
773
+ <div class="text-gray-700 mb-4">
774
+ "As a solopreneur, I don't have the budget for a design team. Creatora lets me create professional-quality content myself. The learning curve was minimal and the results are amazing."
775
+ </div>
776
+ <div class="flex text-yellow-400">
777
+ <i class="fas fa-star"></i>
778
+ <i class="fas fa-star"></i>
779
+ <i class="fas fa-star"></i>
780
+ <i class="fas fa-star"></i>
781
+ <i class="fas fa-star-half-alt"></i>
782
+ </div>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </section>
787
+
788
+ <!-- CTA Section -->
789
+ <section class="py-20 bg-gradient-to-r from-primary to-secondary text-white">
790
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
791
+ <h2 class="text-3xl font-extrabold sm:text-4xl mb-6">
792
+ Ready to revolutionize your content creation?
793
+ </h2>
794
+ <p class="text-xl mb-8 max-w-3xl mx-auto">
795
+ Join thousands of creators already using Creatora to save time and create better content.
796
+ </p>
797
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
798
+ <button class="bg-white text-primary px-8 py-3 rounded-lg text-lg font-medium shadow-lg hover:bg-gray-100 transition duration-300">
799
+ Start Free Trial
800
+ </button>
801
+ <button class="border-2 border-white text-white px-8 py-3 rounded-lg text-lg font-medium hover:bg-white/10 transition duration-300">
802
+ Book a Demo
803
+ </button>
804
+ </div>
805
+ </div>
806
+ </section>
807
+
808
+ <!-- FAQ Section -->
809
+ <section class="py-20 bg-gray-50">
810
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
811
+ <div class="text-center mb-16">
812
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
813
+ <span class="block">Frequently Asked Questions</span>
814
+ </h2>
815
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
816
+ Everything you need to know about Creatora
817
+ </p>
818
+ </div>
819
+
820
+ <div class="max-w-3xl mx-auto">
821
+ <div class="space-y-4">
822
+ <!-- FAQ Item 1 -->
823
+ <div class="bg-white shadow rounded-lg overflow-hidden">
824
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
825
+ <h3 class="text-lg font-medium text-gray-900">What exactly is multimodal AI content creation?</h3>
826
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
827
+ </button>
828
+ <div class="faq-content hidden px-6 pb-6">
829
+ <p class="text-gray-600">
830
+ Multimodal AI content creation refers to artificial intelligence systems that can understand and generate content across multiple modalities (text, images, video, audio) simultaneously. Unlike traditional AI tools that specialize in one type of content, Creatora can create cohesive content packages that include all these elements, maintaining consistency across formats.
831
+ </p>
832
+ </div>
833
+ </div>
834
+
835
+ <!-- FAQ Item 2 -->
836
+ <div class="bg-white shadow rounded-lg overflow-hidden">
837
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
838
+ <h3 class="text-lg font-medium text-gray-900">How does Creatora compare to single-purpose AI tools?</h3>
839
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
840
+ </button>
841
+ <div class="faq-content hidden px-6 pb-6">
842
+ <p class="text-gray-600">
843
+ While single-purpose tools might excel in one area (like just text or just images), Creatora offers several advantages:
844
+ </p>
845
+ <ul class="mt-2 space-y-2 text-gray-600 list-disc pl-5">
846
+ <li>Seamless integration between different content types</li>
847
+ <li>Consistent style and messaging across all content</li>
848
+ <li>Time savings from not having to switch between multiple tools</li>
849
+ <li>Ability to remix content between formats (e.g., turn a blog post into a video)</li>
850
+ <li>Unified workflow and collaboration features</li>
851
+ </ul>
852
+ </div>
853
+ </div>
854
+
855
+ <!-- FAQ Item 3 -->
856
+ <div class="bg-white shadow rounded-lg overflow-hidden">
857
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
858
+ <h3 class="text-lg font-medium text-gray-900">Can I use Creatora for commercial purposes?</h3>
859
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
860
+ </button>
861
+ <div class="faq-content hidden px-6 pb-6">
862
+ <p class="text-gray-600">
863
+ Yes! All content created with Creatora (except on the free plan) comes with full commercial rights. You can use the content for client work, marketing materials, products, and more. We recommend reviewing our <a href="#" class="text-primary">Content License Agreement</a> for complete details.
864
+ </p>
865
+ </div>
866
+ </div>
867
+
868
+ <!-- FAQ Item 4 -->
869
+ <div class="bg-white shadow rounded-lg overflow-hidden">
870
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
871
+ <h3 class="text-lg font-medium text-gray-900">What file formats does Creatora support?</h3>
872
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
873
+ </button>
874
+ <div class="faq-content hidden px-6 pb-6">
875
+ <p class="text-gray-600">
876
+ Creatora supports a wide range of export formats:
877
+ </p>
878
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
879
+ <div>
880
+ <h4 class="font-medium">Images:</h4>
881
+ <p class="text-sm text-gray-500">JPG, PNG, SVG, WEBP</p>
882
+ </div>
883
+ <div>
884
+ <h4 class="font-medium">Text:</h4>
885
+ <p class="text-sm text-gray-500">TXT, DOCX, PDF, HTML</p>
886
+ </div>
887
+ <div>
888
+ <h4 class="font-medium">Video:</h4>
889
+ <p class="text-sm text-gray-500">MP4, MOV, GIF</p>
890
+ </div>
891
+ <div>
892
+ <h4 class="font-medium">Audio:</h4>
893
+ <p class="text-sm text-gray-500">MP3, WAV</p>
894
+ </div>
895
+ </div>
896
+ </div>
897
+ </div>
898
+
899
+ <!-- FAQ Item 5 -->
900
+ <div class="bg-white shadow rounded-lg overflow-hidden">
901
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
902
+ <h3 class="text-lg font-medium text-gray-900">Is there a limit to how much content I can create?</h3>
903
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
904
+ </button>
905
+ <div class="faq-content hidden px-6 pb-6">
906
+ <p class="text-gray-600">
907
+ Creatora operates on a credit system where each generation (text, image, video segment, etc.) consumes a certain number of credits. Our free plan includes 100 credits per month, while paid plans offer more:
908
+ </p>
909
+ <ul class="mt-2 space-y-2 text-gray-600 list-disc pl-5">
910
+ <li>Pro: 1,000 credits/month</li>
911
+ <li>Enterprise: 10,000 credits/month</li>
912
+ </ul>
913
+ <p class="mt-2 text-gray-600">
914
+ Unused credits roll over for one month. You can always purchase additional credit packs if needed.
915
+ </p>
916
+ </div>
917
+ </div>
918
+ </div>
919
+
920
+ <div class="mt-12 text-center">
921
+ <p class="text-gray-500">Still have questions? <a href="#" class="text-primary font-medium">Contact our support team</a></p>
922
+ </div>
923
+ </div>
924
+ </div>
925
+ </section>
926
+
927
+ <!-- Footer -->
928
+ <footer class="bg-dark text-white py-12">
929
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
930
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
931
+ <div>
932
+ <h3 class="text-lg font-medium mb-4">Product</h3>
933
+ <ul class="space-y-2">
934
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
935
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
936
+ <li><a href="#" class="text-gray-400 hover:text-white">Changelog</a></li>
937
+ <li><a href="#" class="text-gray-400 hover:text-white">Roadmap</a></li>
938
+ </ul>
939
+ </div>
940
+ <div>
941
+ <h3 class="text-lg font-medium mb-4">Resources</h3>
942
+ <ul class="space-y-2">
943
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
944
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
945
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
946
+ <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
947
+ </ul>
948
+ </div>
949
+ <div>
950
+ <h3 class="text-lg font-medium mb-4">Company</h3>
951
+ <ul class="space-y-2">
952
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
953
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
954
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
955
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
956
+ </ul>
957
+ </div>
958
+ <div>
959
+ <h3 class="text-lg font-medium mb-4">Legal</h3>
960
+ <ul class="space-y-2">
961
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
962
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
963
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
964
+ <li><a href="#" class="text-gray-400 hover:text-white">License</a></li>
965
+ </ul>
966
+ </div>
967
+ </div>
968
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
969
+ <div class="flex items-center">
970
+ <i class="fas fa-brain text-primary text-2xl mr-2"></i>
971
+ <span class="text-xl font-bold">Creatora</span>
972
+ </div>
973
+ <div class="mt-4 md:mt-0 text-gray-400 text-sm">
974
+ © 2023 Creatora AI. All rights reserved.
975
+ </div>
976
+ <div class="mt-4 md:mt-0 flex space-x-6">
977
+ <a href="#" class="text-gray-400 hover:text-white">
978
+ <i class="fab fa-twitter"></i>
979
+ </a>
980
+ <a href="#" class="text-gray-400 hover:text-white">
981
+ <i class="fab fa-facebook"></i>
982
+ </a>
983
+ <a href="#" class="text-gray-400 hover:text-white">
984
+ <i class="fab fa-instagram"></i>
985
+ </a>
986
+ <a href="#" class="text-gray-400 hover:text-white">
987
+ <i class="fab fa-linkedin"></i>
988
+ </a>
989
+ </div>
990
+ </div>
991
+ </div>
992
+ </footer>
993
+
994
+ <script>
995
+ // Mobile menu toggle
996
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
997
+ const mobileMenu = document.getElementById('mobile-menu');
998
+
999
+ mobileMenuButton.addEventListener('click', () => {
1000
+ mobileMenu.classList.toggle('hidden');
1001
+ });
1002
+
1003
+ // FAQ accordion
1004
+ const faqToggles = document.querySelectorAll('.faq-toggle');
1005
+
1006
+ faqToggles.forEach(toggle => {
1007
+ toggle.addEventListener('click', () => {
1008
+ const content = toggle.nextElementSibling;
1009
+ const icon = toggle.querySelector('i');
1010
+
1011
+ content.classList.toggle('hidden');
1012
+ icon.classList.toggle('rotate-180');
1013
+ });
1014
+ });
1015
+
1016
+ // Smooth scrolling for anchor links
1017
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1018
+ anchor.addEventListener('click', function (e) {
1019
+ e.preventDefault();
1020
+
1021
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
1022
+ behavior: 'smooth'
1023
+ });
1024
+
1025
+ // Close mobile menu if open
1026
+ if (!mobileMenu.classList.contains('hidden')) {
1027
+ mobileMenu.classList.add('hidden');
1028
+ }
1029
+ });
1030
+ });
1031
+
1032
+ // Tooltip functionality
1033
+ const tooltips = document.querySelectorAll('.tooltip');
1034
+
1035
+ tooltips.forEach(tooltip => {
1036
+ tooltip.addEventListener('mouseenter', () => {
1037
+ const tooltipText = tooltip.querySelector('.tooltip-text');
1038
+ tooltipText.style.visibility = 'visible';
1039
+ tooltipText.style.opacity = '1';
1040
+ });
1041
+
1042
+ tooltip.addEventListener('mouseleave', () => {
1043
+ const tooltipText = tooltip.querySelector('.tooltip-text');
1044
+ tooltipText.style.visibility = 'hidden';
1045
+ tooltipText.style.opacity = '0';
1046
+ });
1047
+ });
1048
+ </script>
1049
+ <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=ashutoshdhanda/soprano" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1050
+ </html>