Hugging Face's logo

Spaces:
akram2019
/
deepsite
Running

App Files Community
akram2019 commited on
Commit
0d0d486
·
verified ·
1 Parent(s): e5f4c3e

akram2019/https-enzostvs-deepsite-hf-space - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +650 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite
3
- emoji: 📉
4
- colorFrom: pink
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: deepsite
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
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,650 @@
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>DeepSite | AI Solutions</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 0%, #a777e3 100%);
12
+ }
13
+ .card-hover: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
+ .wave-shape {
18
+ position: absolute;
19
+ bottom: 0;
20
+ left: 0;
21
+ width: 100%;
22
+ overflow: hidden;
23
+ line-height: 0;
24
+ }
25
+ .wave-shape svg {
26
+ position: relative;
27
+ display: block;
28
+ width: calc(100% + 1.3px);
29
+ height: 150px;
30
+ }
31
+ .wave-shape .shape-fill {
32
+ fill: #FFFFFF;
33
+ }
34
+ @keyframes float {
35
+ 0% { transform: translateY(0px); }
36
+ 50% { transform: translateY(-10px); }
37
+ 100% { transform: translateY(0px); }
38
+ }
39
+ .floating {
40
+ animation: float 6s ease-in-out infinite;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="font-sans antialiased text-gray-800">
45
+ <!-- Navigation -->
46
+ <nav class="bg-white shadow-sm fixed w-full z-10">
47
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
48
+ <div class="flex justify-between h-16">
49
+ <div class="flex items-center">
50
+ <div class="flex-shrink-0 flex items-center">
51
+ <i class="fas fa-brain text-purple-600 text-2xl mr-2"></i>
52
+ <span class="text-xl font-bold text-gray-900">DeepSite</span>
53
+ </div>
54
+ </div>
55
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
56
+ <a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a>
57
+ <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Solutions</a>
58
+ <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">API</a>
59
+ <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Docs</a>
60
+ <a href="#" class="text-gray-500 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contact</a>
61
+ <button class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
62
+ Get Started
63
+ </button>
64
+ </div>
65
+ <div class="-mr-2 flex items-center md:hidden">
66
+ <button type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-expanded="false">
67
+ <span class="sr-only">Open main menu</span>
68
+ <i class="fas fa-bars"></i>
69
+ </button>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </nav>
74
+
75
+ <!-- Hero Section -->
76
+ <div class="gradient-bg pt-32 pb-20 relative overflow-hidden">
77
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
78
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
79
+ <div class="mt-10 mx-auto max-w-md sm:max-w-lg lg:mt-0 lg:mx-0">
80
+ <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl sm:leading-tight lg:text-6xl">
81
+ Advanced AI <br>
82
+ <span class="text-purple-200">Solutions</span> for Everyone
83
+ </h1>
84
+ <p class="mt-3 text-base text-purple-100 sm:mt-5 sm:text-lg sm:max-w-xl">
85
+ Harness the power of deep learning with our cutting-edge models and APIs. Simple integration, powerful results.
86
+ </p>
87
+ <div class="mt-10 sm:flex sm:justify-start">
88
+ <div class="rounded-md shadow">
89
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
90
+ Explore API
91
+ </a>
92
+ </div>
93
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
94
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
95
+ Live Demo
96
+ </a>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ <div class="hidden lg:block relative floating">
101
+ <img class="w-full max-w-lg mx-auto" src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI illustration">
102
+ </div>
103
+ </div>
104
+ </div>
105
+ <div class="wave-shape">
106
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
107
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
108
+ </svg>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Features Section -->
113
+ <div class="py-12 bg-white">
114
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
115
+ <div class="lg:text-center">
116
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Features</h2>
117
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
118
+ Powerful AI Capabilities
119
+ </p>
120
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
121
+ Our platform offers state-of-the-art deep learning models ready for integration.
122
+ </p>
123
+ </div>
124
+
125
+ <div class="mt-10">
126
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
127
+ <!-- Feature 1 -->
128
+ <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6">
129
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
130
+ <i class="fas fa-bolt text-xl"></i>
131
+ </div>
132
+ <div class="mt-5">
133
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Fast Processing</h3>
134
+ <p class="mt-2 text-base text-gray-500">
135
+ Optimized models deliver results in milliseconds, perfect for real-time applications.
136
+ </p>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Feature 2 -->
141
+ <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6">
142
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
143
+ <i class="fas fa-shield-alt text-xl"></i>
144
+ </div>
145
+ <div class="mt-5">
146
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Secure API</h3>
147
+ <p class="mt-2 text-base text-gray-500">
148
+ Enterprise-grade security with OAuth 2.0 and encrypted data transmission.
149
+ </p>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Feature 3 -->
154
+ <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6">
155
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
156
+ <i class="fas fa-chart-line text-xl"></i>
157
+ </div>
158
+ <div class="mt-5">
159
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Scalable</h3>
160
+ <p class="mt-2 text-base text-gray-500">
161
+ Automatically scales to handle millions of requests without performance degradation.
162
+ </p>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Feature 4 -->
167
+ <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6">
168
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
169
+ <i class="fas fa-code text-xl"></i>
170
+ </div>
171
+ <div class="mt-5">
172
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Multiple SDKs</h3>
173
+ <p class="mt-2 text-base text-gray-500">
174
+ Client libraries available for Python, JavaScript, Java, and more.
175
+ </p>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Feature 5 -->
180
+ <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6">
181
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
182
+ <i class="fas fa-cogs text-xl"></i>
183
+ </div>
184
+ <div class="mt-5">
185
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Custom Models</h3>
186
+ <p class="mt-2 text-base text-gray-500">
187
+ Need something specific? We can train custom models for your unique requirements.
188
+ </p>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Feature 6 -->
193
+ <div class="card-hover transition-all duration-300 ease-in-out bg-gray-50 rounded-lg p-6">
194
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
195
+ <i class="fas fa-headset text-xl"></i>
196
+ </div>
197
+ <div class="mt-5">
198
+ <h3 class="text-lg leading-6 font-medium text-gray-900">24/7 Support</h3>
199
+ <p class="mt-2 text-base text-gray-500">
200
+ Our team of AI experts is available around the clock to assist you.
201
+ </p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- API Demo Section -->
210
+ <div class="py-16 bg-gray-50 overflow-hidden">
211
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
212
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
213
+ <div class="relative lg:row-start-1">
214
+ <div class="relative text-base mx-auto max-w-prose lg:max-w-none">
215
+ <figure>
216
+ <div class="aspect-w-12 aspect-h-7 lg:aspect-none">
217
+ <img class="rounded-lg shadow-lg object-cover object-center" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Code example" width="1184" height="1376">
218
+ </div>
219
+ </figure>
220
+ </div>
221
+ </div>
222
+ <div class="mt-8 lg:mt-0">
223
+ <div class="text-base max-w-prose mx-auto lg:max-w-none">
224
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Try it now</h2>
225
+ <h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
226
+ Simple API Integration
227
+ </h3>
228
+ </div>
229
+ <div class="mt-5 prose prose-purple text-gray-500 mx-auto lg:max-w-none lg:row-start-1 lg:col-start-1">
230
+ <p>
231
+ Our API is designed for developers who need powerful AI capabilities without the complexity. Here's how easy it is to get started:
232
+ </p>
233
+ <div class="mt-6 bg-gray-800 rounded-lg p-4 overflow-x-auto">
234
+ <pre class="text-gray-200 text-sm"><code>import requests
235
+
236
+ url = "https://api.deepsite.ai/v1/predict"
237
+ headers = {
238
+ "Authorization": "Bearer YOUR_API_KEY",
239
+ "Content-Type": "application/json"
240
+ }
241
+ data = {
242
+ "input": "Your input data here"
243
+ }
244
+
245
+ response = requests.post(url, headers=headers, json=data)
246
+ print(response.json())</code></pre>
247
+ </div>
248
+ <p class="mt-4">
249
+ With just a few lines of code, you can integrate our AI models into your application.
250
+ </p>
251
+ </div>
252
+ <div class="mt-8 flex flex-col sm:flex-row gap-4">
253
+ <a href="#" class="inline-flex items-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white gradient-bg hover:opacity-90">
254
+ Get API Key
255
+ <i class="fas fa-arrow-right ml-2"></i>
256
+ </a>
257
+ <a href="#" class="inline-flex items-center px-4 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50 border-gray-300 shadow-sm">
258
+ <i class="fas fa-book mr-2"></i>
259
+ Documentation
260
+ </a>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Pricing Section -->
268
+ <div class="py-16 bg-white">
269
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
270
+ <div class="sm:flex sm:flex-col sm:align-center">
271
+ <h2 class="text-3xl font-extrabold text-gray-900 text-center">Flexible Pricing Plans</h2>
272
+ <p class="mt-5 text-xl text-gray-500 text-center max-w-2xl mx-auto">
273
+ Choose the plan that fits your needs. Scale up or down as required.
274
+ </p>
275
+ <div class="relative mt-6 bg-gray-100 rounded-lg p-0.5 flex self-center">
276
+ <button type="button" class="relative bg-white border-gray-200 rounded-md shadow-sm py-2 px-6 border text-sm font-medium text-gray-900 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-purple-500 focus:z-10 sm:w-auto sm:px-8">
277
+ Monthly billing
278
+ </button>
279
+ <button type="button" class="ml-0.5 relative border border-transparent rounded-md py-2 px-6 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-purple-500 focus:z-10 sm:w-auto sm:px-8">
280
+ Yearly billing
281
+ </button>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0">
286
+ <!-- Starter Plan -->
287
+ <div class="card-hover border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
288
+ <div class="p-6">
289
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Starter</h3>
290
+ <p class="mt-4 text-sm text-gray-500">
291
+ Perfect for small projects and testing.
292
+ </p>
293
+ <p class="mt-8">
294
+ <span class="text-4xl font-extrabold text-gray-900">$29</span>
295
+ <span class="text-base font-medium text-gray-500">/mo</span>
296
+ </p>
297
+ <button class="mt-8 block w-full py-3 px-6 border border-gray-300 rounded-md text-center text-sm font-medium text-gray-700 hover:bg-gray-50">
298
+ Get started
299
+ </button>
300
+ </div>
301
+ <div class="pt-6 pb-8 px-6">
302
+ <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4>
303
+ <ul class="mt-6 space-y-4">
304
+ <li class="flex items-start">
305
+ <div class="flex-shrink-0">
306
+ <i class="fas fa-check text-green-500"></i>
307
+ </div>
308
+ <p class="ml-3 text-sm text-gray-500">10,000 API calls/month</p>
309
+ </li>
310
+ <li class="flex items-start">
311
+ <div class="flex-shrink-0">
312
+ <i class="fas fa-check text-green-500"></i>
313
+ </div>
314
+ <p class="ml-3 text-sm text-gray-500">Standard models</p>
315
+ </li>
316
+ <li class="flex items-start">
317
+ <div class="flex-shrink-0">
318
+ <i class="fas fa-check text-green-500"></i>
319
+ </div>
320
+ <p class="ml-3 text-sm text-gray-500">Email support</p>
321
+ </li>
322
+ <li class="flex items-start">
323
+ <div class="flex-shrink-0">
324
+ <i class="fas fa-check text-green-500"></i>
325
+ </div>
326
+ <p class="ml-3 text-sm text-gray-500">Basic analytics</p>
327
+ </li>
328
+ </ul>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Pro Plan -->
333
+ <div class="card-hover border-2 border-purple-500 rounded-lg shadow-sm divide-y divide-gray-200 transform scale-105 z-10">
334
+ <div class="p-6">
335
+ <div class="absolute top-0 right-0 -mt-4 -mr-4 bg-purple-500 text-white text-xs font-semibold px-3 py-1 rounded-full">
336
+ Popular
337
+ </div>
338
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Pro</h3>
339
+ <p class="mt-4 text-sm text-gray-500">
340
+ For growing businesses with higher demands.
341
+ </p>
342
+ <p class="mt-8">
343
+ <span class="text-4xl font-extrabold text-gray-900">$99</span>
344
+ <span class="text-base font-medium text-gray-500">/mo</span>
345
+ </p>
346
+ <button class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center text-sm font-medium text-white gradient-bg hover:opacity-90">
347
+ Get started
348
+ </button>
349
+ </div>
350
+ <div class="pt-6 pb-8 px-6">
351
+ <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4>
352
+ <ul class="mt-6 space-y-4">
353
+ <li class="flex items-start">
354
+ <div class="flex-shrink-0">
355
+ <i class="fas fa-check text-green-500"></i>
356
+ </div>
357
+ <p class="ml-3 text-sm text-gray-500">100,000 API calls/month</p>
358
+ </li>
359
+ <li class="flex items-start">
360
+ <div class="flex-shrink-0">
361
+ <i class="fas fa-check text-green-500"></i>
362
+ </div>
363
+ <p class="ml-3 text-sm text-gray-500">Advanced models</p>
364
+ </li>
365
+ <li class="flex items-start">
366
+ <div class="flex-shrink-0">
367
+ <i class="fas fa-check text-green-500"></i>
368
+ </div>
369
+ <p class="ml-3 text-sm text-gray-500">Priority support</p>
370
+ </li>
371
+ <li class="flex items-start">
372
+ <div class="flex-shrink-0">
373
+ <i class="fas fa-check text-green-500"></i>
374
+ </div>
375
+ <p class="ml-3 text-sm text-gray-500">Detailed analytics</p>
376
+ </li>
377
+ <li class="flex items-start">
378
+ <div class="flex-shrink-0">
379
+ <i class="fas fa-check text-green-500"></i>
380
+ </div>
381
+ <p class="ml-3 text-sm text-gray-500">Custom SLA</p>
382
+ </li>
383
+ </ul>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Enterprise Plan -->
388
+ <div class="card-hover border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
389
+ <div class="p-6">
390
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Enterprise</h3>
391
+ <p class="mt-4 text-sm text-gray-500">
392
+ For organizations with mission-critical needs.
393
+ </p>
394
+ <p class="mt-8">
395
+ <span class="text-4xl font-extrabold text-gray-900">Custom</span>
396
+ </p>
397
+ <button class="mt-8 block w-full py-3 px-6 border border-gray-300 rounded-md text-center text-sm font-medium text-gray-700 hover:bg-gray-50">
398
+ Contact sales
399
+ </button>
400
+ </div>
401
+ <div class="pt-6 pb-8 px-6">
402
+ <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4>
403
+ <ul class="mt-6 space-y-4">
404
+ <li class="flex items-start">
405
+ <div class="flex-shrink-0">
406
+ <i class="fas fa-check text-green-500"></i>
407
+ </div>
408
+ <p class="ml-3 text-sm text-gray-500">Unlimited API calls</p>
409
+ </li>
410
+ <li class="flex items-start">
411
+ <div class="flex-shrink-0">
412
+ <i class="fas fa-check text-green-500"></i>
413
+ </div>
414
+ <p class="ml-3 text-sm text-gray-500">Premium models</p>
415
+ </li>
416
+ <li class="flex items-start">
417
+ <div class="flex-shrink-0">
418
+ <i class="fas fa-check text-green-500"></i>
419
+ </div>
420
+ <p class="ml-3 text-sm text-gray-500">24/7 dedicated support</p>
421
+ </li>
422
+ <li class="flex items-start">
423
+ <div class="flex-shrink-0">
424
+ <i class="fas fa-check text-green-500"></i>
425
+ </div>
426
+ <p class="ml-3 text-sm text-gray-500">Custom analytics</p>
427
+ </li>
428
+ <li class="flex items-start">
429
+ <div class="flex-shrink-0">
430
+ <i class="fas fa-check text-green-500"></i>
431
+ </div>
432
+ <p class="ml-3 text-sm text-gray-500">On-premise options</p>
433
+ </li>
434
+ <li class="flex items-start">
435
+ <div class="flex-shrink-0">
436
+ <i class="fas fa-check text-green-500"></i>
437
+ </div>
438
+ <p class="ml-3 text-sm text-gray-500">Custom model training</p>
439
+ </li>
440
+ </ul>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- CTA Section -->
448
+ <div class="gradient-bg">
449
+ <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">
450
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
451
+ <span class="block">Ready to dive in?</span>
452
+ <span class="block text-purple-200">Start your free trial today.</span>
453
+ </h2>
454
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
455
+ <div class="inline-flex rounded-md shadow">
456
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50">
457
+ Get started
458
+ </a>
459
+ </div>
460
+ <div class="ml-3 inline-flex rounded-md shadow">
461
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-500 bg-opacity-60 hover:bg-opacity-70">
462
+ Live demo
463
+ </a>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <!-- Footer -->
470
+ <footer class="bg-white">
471
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
472
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
473
+ <div class="space-y-8 xl:col-span-1">
474
+ <div class="flex items-center">
475
+ <i class="fas fa-brain text-purple-600 text-2xl mr-2"></i>
476
+ <span class="text-xl font-bold text-gray-900">DeepSite</span>
477
+ </div>
478
+ <p class="text-gray-500 text-base">
479
+ Advanced AI solutions for developers and businesses.
480
+ </p>
481
+ <div class="flex space-x-6">
482
+ <a href="#" class="text-gray-400 hover:text-gray-500">
483
+ <i class="fab fa-twitter text-xl"></i>
484
+ </a>
485
+ <a href="#" class="text-gray-400 hover:text-gray-500">
486
+ <i class="fab fa-github text-xl"></i>
487
+ </a>
488
+ <a href="#" class="text-gray-400 hover:text-gray-500">
489
+ <i class="fab fa-linkedin text-xl"></i>
490
+ </a>
491
+ </div>
492
+ </div>
493
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
494
+ <div class="md:grid md:grid-cols-2 md:gap-8">
495
+ <div>
496
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
497
+ Solutions
498
+ </h3>
499
+ <ul class="mt-4 space-y-4">
500
+ <li>
501
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
502
+ Computer Vision
503
+ </a>
504
+ </li>
505
+ <li>
506
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
507
+ Natural Language
508
+ </a>
509
+ </li>
510
+ <li>
511
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
512
+ Recommendation
513
+ </a>
514
+ </li>
515
+ <li>
516
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
517
+ Forecasting
518
+ </a>
519
+ </li>
520
+ </ul>
521
+ </div>
522
+ <div class="mt-12 md:mt-0">
523
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
524
+ Support
525
+ </h3>
526
+ <ul class="mt-4 space-y-4">
527
+ <li>
528
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
529
+ Documentation
530
+ </a>
531
+ </li>
532
+ <li>
533
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
534
+ Guides
535
+ </a>
536
+ </li>
537
+ <li>
538
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
539
+ API Status
540
+ </a>
541
+ </li>
542
+ <li>
543
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
544
+ Contact
545
+ </a>
546
+ </li>
547
+ </ul>
548
+ </div>
549
+ </div>
550
+ <div class="md:grid md:grid-cols-2 md:gap-8">
551
+ <div>
552
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
553
+ Company
554
+ </h3>
555
+ <ul class="mt-4 space-y-4">
556
+ <li>
557
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
558
+ About
559
+ </a>
560
+ </li>
561
+ <li>
562
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
563
+ Blog
564
+ </a>
565
+ </li>
566
+ <li>
567
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
568
+ Careers
569
+ </a>
570
+ </li>
571
+ <li>
572
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
573
+ Press
574
+ </a>
575
+ </li>
576
+ </ul>
577
+ </div>
578
+ <div class="mt-12 md:mt-0">
579
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
580
+ Legal
581
+ </h3>
582
+ <ul class="mt-4 space-y-4">
583
+ <li>
584
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
585
+ Privacy
586
+ </a>
587
+ </li>
588
+ <li>
589
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
590
+ Terms
591
+ </a>
592
+ </li>
593
+ <li>
594
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
595
+ Security
596
+ </a>
597
+ </li>
598
+ </ul>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ <div class="mt-12 border-t border-gray-200 pt-8">
604
+ <p class="text-base text-gray-400 xl:text-center">
605
+ &copy; 2023 DeepSite AI. All rights reserved.
606
+ </p>
607
+ </div>
608
+ </div>
609
+ </footer>
610
+
611
+ <script>
612
+ // Mobile menu toggle
613
+ document.querySelector('[aria-expanded="false"]').addEventListener('click', function() {
614
+ const expanded = this.getAttribute('aria-expanded') === 'true' || false;
615
+ this.setAttribute('aria-expanded', !expanded);
616
+ // You would toggle your mobile menu here
617
+ });
618
+
619
+ // Smooth scrolling for anchor links
620
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
621
+ anchor.addEventListener('click', function (e) {
622
+ e.preventDefault();
623
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
624
+ behavior: 'smooth'
625
+ });
626
+ });
627
+ });
628
+
629
+ // Pricing toggle functionality
630
+ const monthlyButton = document.querySelector('button:first-of-type');
631
+ const yearlyButton = document.querySelector('button:last-of-type');
632
+
633
+ monthlyButton.addEventListener('click', function() {
634
+ this.classList.add('bg-white', 'border-gray-200', 'text-gray-900');
635
+ this.classList.remove('border-transparent', 'text-gray-700');
636
+ yearlyButton.classList.add('border-transparent', 'text-gray-700');
637
+ yearlyButton.classList.remove('bg-white', 'border-gray-200', 'text-gray-900');
638
+ // Update prices to monthly here
639
+ });
640
+
641
+ yearlyButton.addEventListener('click', function() {
642
+ this.classList.add('bg-white', 'border-gray-200', 'text-gray-900');
643
+ this.classList.remove('border-transparent', 'text-gray-700');
644
+ monthlyButton.classList.add('border-transparent', 'text-gray-700');
645
+ monthlyButton.classList.remove('bg-white', 'border-gray-200', 'text-gray-900');
646
+ // Update prices to yearly here
647
+ });
648
+ </script>
649
+ <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=akram2019/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
650
+ </html>