Hugging Face's logo

Spaces:
murali418
/
deepsite
Running

App Files Community
murali418 commited on
Commit
b1369fb
·
verified ·
1 Parent(s): b79fe47

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +802 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite
3
- emoji: 🐢
4
- colorFrom: pink
5
- colorTo: green
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: blue
5
+ colorTo: pink
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,802 @@
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 - Next Generation Web Experience</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 {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .wave-shape {
21
+ position: absolute;
22
+ bottom: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ overflow: hidden;
26
+ line-height: 0;
27
+ }
28
+ .wave-shape svg {
29
+ position: relative;
30
+ display: block;
31
+ width: calc(100% + 1.3px);
32
+ height: 100px;
33
+ }
34
+ .wave-shape .shape-fill {
35
+ fill: #FFFFFF;
36
+ }
37
+ @keyframes float {
38
+ 0% { transform: translateY(0px); }
39
+ 50% { transform: translateY(-20px); }
40
+ 100% { transform: translateY(0px); }
41
+ }
42
+ .floating {
43
+ animation: float 6s ease-in-out infinite;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="font-sans antialiased text-gray-800">
48
+ <!-- Navigation -->
49
+ <nav class="bg-white shadow-sm fixed w-full z-10">
50
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
51
+ <div class="flex justify-between h-16">
52
+ <div class="flex items-center">
53
+ <div class="flex-shrink-0 flex items-center">
54
+ <i class="fas fa-code text-purple-600 text-2xl mr-2"></i>
55
+ <span class="text-xl font-bold text-gray-900">DeepSite</span>
56
+ </div>
57
+ </div>
58
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
59
+ <a href="#" class="text-purple-600 px-3 py-2 text-sm font-medium">Home</a>
60
+ <a href="#features" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Features</a>
61
+ <a href="#technology" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Technology</a>
62
+ <a href="#pricing" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Pricing</a>
63
+ <a href="#contact" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Contact</a>
64
+ </div>
65
+ <div class="flex items-center md:hidden">
66
+ <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
67
+ <i class="fas fa-bars text-xl"></i>
68
+ </button>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </nav>
73
+
74
+ <!-- Hero Section -->
75
+ <div class="gradient-bg pt-32 pb-20 relative overflow-hidden">
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
78
+ <div class="mt-10 mx-auto max-w-md sm:max-w-lg lg:mt-0 lg:mx-0 lg:max-w-none">
79
+ <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl sm:leading-tight lg:text-6xl">
80
+ <span class="block">DeepSite Technology</span>
81
+ <span class="block text-purple-200">Beyond the Surface</span>
82
+ </h1>
83
+ <p class="mt-3 text-lg text-purple-100 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
84
+ Experience the next generation of web applications with our deep learning powered platform that adapts to your needs in real-time.
85
+ </p>
86
+ <div class="mt-10 sm:flex sm:justify-start">
87
+ <div class="rounded-md shadow">
88
+ <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-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
89
+ Get Started
90
+ </a>
91
+ </div>
92
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
93
+ <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">
94
+ Live Demo
95
+ </a>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ <div class="hidden lg:block relative">
100
+ <div class="floating">
101
+ <img class="w-full max-w-lg mx-auto" src="https://cdn-icons-png.flaticon.com/512/3271/3271488.png" alt="DeepSite illustration">
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div class="wave-shape">
107
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
108
+ <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>
109
+ </svg>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Features Section -->
114
+ <div id="features" class="py-16 bg-white">
115
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
116
+ <div class="lg:text-center">
117
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Features</h2>
118
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
119
+ A better way to experience the web
120
+ </p>
121
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
122
+ DeepSite leverages cutting-edge technologies to deliver unparalleled performance and user experience.
123
+ </p>
124
+ </div>
125
+
126
+ <div class="mt-20">
127
+ <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
128
+ <!-- Feature 1 -->
129
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md">
130
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
131
+ <i class="fas fa-brain text-xl"></i>
132
+ </div>
133
+ <div class="mt-5">
134
+ <h3 class="text-lg font-medium text-gray-900">AI-Powered Insights</h3>
135
+ <p class="mt-2 text-base text-gray-500">
136
+ Our deep learning algorithms analyze user behavior to provide personalized content recommendations and predictive navigation.
137
+ </p>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Feature 2 -->
142
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md">
143
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
144
+ <i class="fas fa-bolt text-xl"></i>
145
+ </div>
146
+ <div class="mt-5">
147
+ <h3 class="text-lg font-medium text-gray-900">Lightning Fast</h3>
148
+ <p class="mt-2 text-base text-gray-500">
149
+ Optimized performance with edge computing and serverless architecture ensures sub-second load times globally.
150
+ </p>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Feature 3 -->
155
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md">
156
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
157
+ <i class="fas fa-shield-alt text-xl"></i>
158
+ </div>
159
+ <div class="mt-5">
160
+ <h3 class="text-lg font-medium text-gray-900">Military-Grade Security</h3>
161
+ <p class="mt-2 text-base text-gray-500">
162
+ End-to-end encryption, biometric authentication, and continuous threat monitoring protect your data 24/7.
163
+ </p>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Feature 4 -->
168
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md">
169
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
170
+ <i class="fas fa-sync-alt text-xl"></i>
171
+ </div>
172
+ <div class="mt-5">
173
+ <h3 class="text-lg font-medium text-gray-900">Real-Time Sync</h3>
174
+ <p class="mt-2 text-base text-gray-500">
175
+ Changes propagate instantly across all devices with our proprietary synchronization protocol.
176
+ </p>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Feature 5 -->
181
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md">
182
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
183
+ <i class="fas fa-chart-line text-xl"></i>
184
+ </div>
185
+ <div class="mt-5">
186
+ <h3 class="text-lg font-medium text-gray-900">Advanced Analytics</h3>
187
+ <p class="mt-2 text-base text-gray-500">
188
+ Comprehensive dashboards with actionable insights help you understand and optimize your digital presence.
189
+ </p>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Feature 6 -->
194
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md">
195
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
196
+ <i class="fas fa-infinity text-xl"></i>
197
+ </div>
198
+ <div class="mt-5">
199
+ <h3 class="text-lg font-medium text-gray-900">Limitless Scalability</h3>
200
+ <p class="mt-2 text-base text-gray-500">
201
+ Our infrastructure automatically scales to handle traffic spikes without compromising performance.
202
+ </p>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Technology Stack -->
211
+ <div id="technology" class="py-16 bg-gray-50">
212
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
213
+ <div class="lg:text-center">
214
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Technology Stack</h2>
215
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
216
+ Built with modern technologies
217
+ </p>
218
+ </div>
219
+
220
+ <div class="mt-10">
221
+ <div class="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-6">
222
+ <div class="col-span-1 flex justify-center">
223
+ <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md">
224
+ <i class="fab fa-react text-4xl text-blue-500"></i>
225
+ </div>
226
+ </div>
227
+ <div class="col-span-1 flex justify-center">
228
+ <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md">
229
+ <i class="fab fa-node-js text-4xl text-green-500"></i>
230
+ </div>
231
+ </div>
232
+ <div class="col-span-1 flex justify-center">
233
+ <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md">
234
+ <i class="fab fa-python text-4xl text-blue-700"></i>
235
+ </div>
236
+ </div>
237
+ <div class="col-span-1 flex justify-center">
238
+ <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md">
239
+ <i class="fas fa-database text-4xl text-purple-500"></i>
240
+ </div>
241
+ </div>
242
+ <div class="col-span-1 flex justify-center">
243
+ <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md">
244
+ <i class="fab fa-aws text-4xl text-orange-500"></i>
245
+ </div>
246
+ </div>
247
+ <div class="col-span-1 flex justify-center">
248
+ <div class="flex items-center justify-center h-24 w-24 rounded-full bg-white shadow-md">
249
+ <i class="fas fa-robot text-4xl text-indigo-500"></i>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="mt-16">
256
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
257
+ <div class="relative lg:pr-8">
258
+ <div class="relative overflow-hidden rounded-lg shadow-lg">
259
+ <img class="w-full" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI technology">
260
+ <div class="absolute inset-0 bg-purple-600 opacity-25"></div>
261
+ <div class="absolute inset-0 flex items-center justify-center">
262
+ <h3 class="text-3xl font-bold text-white">Deep Learning Core</h3>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div class="mt-10 lg:mt-0">
267
+ <h3 class="text-2xl font-bold text-gray-900">Advanced Neural Networks</h3>
268
+ <p class="mt-4 text-lg text-gray-500">
269
+ Our proprietary neural network architecture processes complex patterns in real-time, enabling adaptive interfaces that learn from user interactions.
270
+ </p>
271
+ <div class="mt-8">
272
+ <div class="flex items-start">
273
+ <div class="flex-shrink-0">
274
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
275
+ <i class="fas fa-project-diagram"></i>
276
+ </div>
277
+ </div>
278
+ <div class="ml-4">
279
+ <h4 class="text-lg font-medium text-gray-900">Graph-Based Processing</h4>
280
+ <p class="mt-2 text-base text-gray-500">
281
+ Data flows through interconnected nodes that dynamically reconfigure based on context and usage patterns.
282
+ </p>
283
+ </div>
284
+ </div>
285
+ <div class="mt-8">
286
+ <div class="flex items-start">
287
+ <div class="flex-shrink-0">
288
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
289
+ <i class="fas fa-cloud"></i>
290
+ </div>
291
+ </div>
292
+ <div class="ml-4">
293
+ <h4 class="text-lg font-medium text-gray-900">Distributed Cloud Architecture</h4>
294
+ <p class="mt-2 text-base text-gray-500">
295
+ Computation happens at the edge for minimal latency, with centralized coordination for global consistency.
296
+ </p>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Pricing Section -->
308
+ <div id="pricing" class="py-16 bg-white">
309
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
310
+ <div class="sm:text-center">
311
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Pricing</h2>
312
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
313
+ Simple, transparent pricing
314
+ </p>
315
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 sm:mx-auto">
316
+ Choose the plan that fits your needs. No hidden fees, cancel anytime.
317
+ </p>
318
+ </div>
319
+
320
+ <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">
321
+ <!-- Basic Plan -->
322
+ <div class="card-hover border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
323
+ <div class="p-6">
324
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Basic</h3>
325
+ <p class="mt-4 text-sm text-gray-500">
326
+ Perfect for individuals and small projects
327
+ </p>
328
+ <p class="mt-8">
329
+ <span class="text-4xl font-extrabold text-gray-900">$9</span>
330
+ <span class="text-base font-medium text-gray-500">/month</span>
331
+ </p>
332
+ <a href="#" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">
333
+ Get started
334
+ </a>
335
+ </div>
336
+ <div class="pt-6 pb-8 px-6">
337
+ <h4 class="sr-only">Features</h4>
338
+ <ul class="space-y-4">
339
+ <li class="flex items-start">
340
+ <div class="flex-shrink-0">
341
+ <i class="fas fa-check-circle text-green-500"></i>
342
+ </div>
343
+ <p class="ml-3 text-sm text-gray-700">
344
+ Up to 10,000 monthly visits
345
+ </p>
346
+ </li>
347
+ <li class="flex items-start">
348
+ <div class="flex-shrink-0">
349
+ <i class="fas fa-check-circle text-green-500"></i>
350
+ </div>
351
+ <p class="ml-3 text-sm text-gray-700">
352
+ Basic AI recommendations
353
+ </p>
354
+ </li>
355
+ <li class="flex items-start">
356
+ <div class="flex-shrink-0">
357
+ <i class="fas fa-check-circle text-green-500"></i>
358
+ </div>
359
+ <p class="ml-3 text-sm text-gray-700">
360
+ Standard security
361
+ </p>
362
+ </li>
363
+ <li class="flex items-start">
364
+ <div class="flex-shrink-0">
365
+ <i class="fas fa-check-circle text-green-500"></i>
366
+ </div>
367
+ <p class="ml-3 text-sm text-gray-700">
368
+ Email support
369
+ </p>
370
+ </li>
371
+ </ul>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Pro Plan -->
376
+ <div class="card-hover border border-purple-500 rounded-lg shadow-sm divide-y divide-gray-200 relative">
377
+ <div class="absolute top-0 inset-x-0 h-2 bg-purple-500 rounded-t-lg"></div>
378
+ <div class="p-6">
379
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Pro</h3>
380
+ <p class="mt-4 text-sm text-gray-500">
381
+ For growing businesses with advanced needs
382
+ </p>
383
+ <p class="mt-8">
384
+ <span class="text-4xl font-extrabold text-gray-900">$29</span>
385
+ <span class="text-base font-medium text-gray-500">/month</span>
386
+ </p>
387
+ <a href="#" class="mt-8 block w-full bg-purple-600 border border-purple-600 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-purple-700">
388
+ Get started
389
+ </a>
390
+ </div>
391
+ <div class="pt-6 pb-8 px-6">
392
+ <h4 class="sr-only">Features</h4>
393
+ <ul class="space-y-4">
394
+ <li class="flex items-start">
395
+ <div class="flex-shrink-0">
396
+ <i class="fas fa-check-circle text-green-500"></i>
397
+ </div>
398
+ <p class="ml-3 text-sm text-gray-700">
399
+ Up to 100,000 monthly visits
400
+ </p>
401
+ </li>
402
+ <li class="flex items-start">
403
+ <div class="flex-shrink-0">
404
+ <i class="fas fa-check-circle text-green-500"></i>
405
+ </div>
406
+ <p class="ml-3 text-sm text-gray-700">
407
+ Advanced AI personalization
408
+ </p>
409
+ </li>
410
+ <li class="flex items-start">
411
+ <div class="flex-shrink-0">
412
+ <i class="fas fa-check-circle text-green-500"></i>
413
+ </div>
414
+ <p class="ml-3 text-sm text-gray-700">
415
+ Enhanced security
416
+ </p>
417
+ </li>
418
+ <li class="flex items-start">
419
+ <div class="flex-shrink-0">
420
+ <i class="fas fa-check-circle text-green-500"></i>
421
+ </div>
422
+ <p class="ml-3 text-sm text-gray-700">
423
+ Priority email support
424
+ </p>
425
+ </li>
426
+ <li class="flex items-start">
427
+ <div class="flex-shrink-0">
428
+ <i class="fas fa-check-circle text-green-500"></i>
429
+ </div>
430
+ <p class="ml-3 text-sm text-gray-700">
431
+ Basic analytics dashboard
432
+ </p>
433
+ </li>
434
+ </ul>
435
+ </div>
436
+ </div>
437
+
438
+ <!-- Enterprise Plan -->
439
+ <div class="card-hover border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
440
+ <div class="p-6">
441
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Enterprise</h3>
442
+ <p class="mt-4 text-sm text-gray-500">
443
+ For large organizations with custom needs
444
+ </p>
445
+ <p class="mt-8">
446
+ <span class="text-4xl font-extrabold text-gray-900">$99</span>
447
+ <span class="text-base font-medium text-gray-500">/month</span>
448
+ </p>
449
+ <a href="#" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">
450
+ Get started
451
+ </a>
452
+ </div>
453
+ <div class="pt-6 pb-8 px-6">
454
+ <h4 class="sr-only">Features</h4>
455
+ <ul class="space-y-4">
456
+ <li class="flex items-start">
457
+ <div class="flex-shrink-0">
458
+ <i class="fas fa-check-circle text-green-500"></i>
459
+ </div>
460
+ <p class="ml-3 text-sm text-gray-700">
461
+ Unlimited visits
462
+ </p>
463
+ </li>
464
+ <li class="flex items-start">
465
+ <div class="flex-shrink-0">
466
+ <i class="fas fa-check-circle text-green-500"></i>
467
+ </div>
468
+ <p class="ml-3 text-sm text-gray-700">
469
+ Custom AI models
470
+ </p>
471
+ </li>
472
+ <li class="flex items-start">
473
+ <div class="flex-shrink-0">
474
+ <i class="fas fa-check-circle text-green-500"></i>
475
+ </div>
476
+ <p class="ml-3 text-sm text-gray-700">
477
+ Enterprise-grade security
478
+ </p>
479
+ </li>
480
+ <li class="flex items-start">
481
+ <div class="flex-shrink-0">
482
+ <i class="fas fa-check-circle text-green-500"></i>
483
+ </div>
484
+ <p class="ml-3 text-sm text-gray-700">
485
+ 24/7 dedicated support
486
+ </p>
487
+ </li>
488
+ <li class="flex items-start">
489
+ <div class="flex-shrink-0">
490
+ <i class="fas fa-check-circle text-green-500"></i>
491
+ </div>
492
+ <p class="ml-3 text-sm text-gray-700">
493
+ Advanced analytics suite
494
+ </p>
495
+ </li>
496
+ <li class="flex items-start">
497
+ <div class="flex-shrink-0">
498
+ <i class="fas fa-check-circle text-green-500"></i>
499
+ </div>
500
+ <p class="ml-3 text-sm text-gray-700">
501
+ Custom integrations
502
+ </p>
503
+ </li>
504
+ </ul>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Testimonials -->
512
+ <div class="py-16 bg-gray-50">
513
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
514
+ <div class="lg:text-center">
515
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Testimonials</h2>
516
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
517
+ Trusted by industry leaders
518
+ </p>
519
+ </div>
520
+
521
+ <div class="mt-10">
522
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
523
+ <!-- Testimonial 1 -->
524
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md">
525
+ <div class="flex items-center">
526
+ <div class="flex-shrink-0">
527
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
528
+ </div>
529
+ <div class="ml-4">
530
+ <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
531
+ <p class="text-purple-600">CEO, TechSolutions</p>
532
+ </div>
533
+ </div>
534
+ <div class="mt-4">
535
+ <p class="text-gray-500 italic">
536
+ "DeepSite transformed our digital presence. The AI-powered recommendations increased our engagement by 300% in just two months."
537
+ </p>
538
+ </div>
539
+ <div class="mt-4 flex text-yellow-400">
540
+ <i class="fas fa-star"></i>
541
+ <i class="fas fa-star"></i>
542
+ <i class="fas fa-star"></i>
543
+ <i class="fas fa-star"></i>
544
+ <i class="fas fa-star"></i>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- Testimonial 2 -->
549
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md">
550
+ <div class="flex items-center">
551
+ <div class="flex-shrink-0">
552
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Michael Chen">
553
+ </div>
554
+ <div class="ml-4">
555
+ <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
556
+ <p class="text-purple-600">CTO, Global Innovations</p>
557
+ </div>
558
+ </div>
559
+ <div class="mt-4">
560
+ <p class="text-gray-500 italic">
561
+ "The performance improvements we saw after migrating to DeepSite were beyond our expectations. Page load times dropped by 80%."
562
+ </p>
563
+ </div>
564
+ <div class="mt-4 flex text-yellow-400">
565
+ <i class="fas fa-star"></i>
566
+ <i class="fas fa-star"></i>
567
+ <i class="fas fa-star"></i>
568
+ <i class="fas fa-star"></i>
569
+ <i class="fas fa-star"></i>
570
+ </div>
571
+ </div>
572
+
573
+ <!-- Testimonial 3 -->
574
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md">
575
+ <div class="flex items-center">
576
+ <div class="flex-shrink-0">
577
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
578
+ </div>
579
+ <div class="ml-4">
580
+ <h4 class="text-lg font-medium text-gray-900">Emma Rodriguez</h4>
581
+ <p class="text-purple-600">Digital Director, RetailCorp</p>
582
+ </div>
583
+ </div>
584
+ <div class="mt-4">
585
+ <p class="text-gray-500 italic">
586
+ "The personalization features have revolutionized our e-commerce platform. Conversion rates are up 45% quarter over quarter."
587
+ </p>
588
+ </div>
589
+ <div class="mt-4 flex text-yellow-400">
590
+ <i class="fas fa-star"></i>
591
+ <i class="fas fa-star"></i>
592
+ <i class="fas fa-star"></i>
593
+ <i class="fas fa-star"></i>
594
+ <i class="fas fa-star-half-alt"></i>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+
602
+ <!-- CTA Section -->
603
+ <div class="gradient-bg">
604
+ <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">
605
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
606
+ <span class="block">Ready to dive in?</span>
607
+ <span class="block text-purple-200">Start your free trial today.</span>
608
+ </h2>
609
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
610
+ <div class="inline-flex rounded-md shadow">
611
+ <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">
612
+ Get started
613
+ </a>
614
+ </div>
615
+ <div class="ml-3 inline-flex rounded-md shadow">
616
+ <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">
617
+ Learn more
618
+ </a>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
+ <!-- Contact Section -->
625
+ <div id="contact" class="py-16 bg-white">
626
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
627
+ <div class="lg:text-center">
628
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Contact Us</h2>
629
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
630
+ Let's talk about your project
631
+ </p>
632
+ </div>
633
+
634
+ <div class="mt-10">
635
+ <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
636
+ <div class="bg-gray-50 p-8 rounded-lg">
637
+ <h3 class="text-lg font-medium text-gray-900">Get in touch</h3>
638
+ <p class="mt-2 text-gray-500">
639
+ Have questions about DeepSite? Want to see a demo? Fill out the form and our team will get back to you within 24 hours.
640
+ </p>
641
+ <div class="mt-6">
642
+ <div class="flex items-start">
643
+ <div class="flex-shrink-0">
644
+ <i class="fas fa-map-marker-alt text-purple-500"></i>
645
+ </div>
646
+ <div class="ml-3">
647
+ <p class="text-sm font-medium text-gray-900">Address</p>
648
+ <p class="text-sm text-gray-500">123 Tech Street, San Francisco, CA 94107</p>
649
+ </div>
650
+ </div>
651
+ <div class="mt-4 flex items-start">
652
+ <div class="flex-shrink-0">
653
+ <i class="fas fa-phone-alt text-purple-500"></i>
654
+ </div>
655
+ <div class="ml-3">
656
+ <p class="text-sm font-medium text-gray-900">Phone</p>
657
+ <p class="text-sm text-gray-500">+1 (555) 123-4567</p>
658
+ </div>
659
+ </div>
660
+ <div class="mt-4 flex items-start">
661
+ <div class="flex-shrink-0">
662
+ <i class="fas fa-envelope text-purple-500"></i>
663
+ </div>
664
+ <div class="ml-3">
665
+ <p class="text-sm font-medium text-gray-900">Email</p>
666
+ <p class="text-sm text-gray-500">hello@deepsite.com</p>
667
+ </div>
668
+ </div>
669
+ </div>
670
+ </div>
671
+
672
+ <div>
673
+ <form class="space-y-6">
674
+ <div>
675
+ <label for="name" class="block text-sm font-medium text-gray-700">Full name</label>
676
+ <div class="mt-1">
677
+ <input type="text" name="name" id="name" autocomplete="name" class="py-3 px-4 block w-full shadow-sm focus:ring-purple-500 focus:border-purple-500 border-gray-300 rounded-md">
678
+ </div>
679
+ </div>
680
+ <div>
681
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
682
+ <div class="mt-1">
683
+ <input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-purple-500 focus:border-purple-500 border-gray-300 rounded-md">
684
+ </div>
685
+ </div>
686
+ <div>
687
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone</label>
688
+ <div class="mt-1">
689
+ <input type="text" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-purple-500 focus:border-purple-500 border-gray-300 rounded-md">
690
+ </div>
691
+ </div>
692
+ <div>
693
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
694
+ <div class="mt-1">
695
+ <textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-purple-500 focus:border-purple-500 border-gray-300 rounded-md"></textarea>
696
+ </div>
697
+ </div>
698
+ <div>
699
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
700
+ Submit
701
+ </button>
702
+ </div>
703
+ </form>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ </div>
709
+
710
+ <!-- Footer -->
711
+ <footer class="bg-gray-800">
712
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
713
+ <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
714
+ <div>
715
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
716
+ <ul class="mt-4 space-y-4">
717
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>
718
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
719
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>
720
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
721
+ </ul>
722
+ </div>
723
+ <div>
724
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
725
+ <ul class="mt-4 space-y-4">
726
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
727
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
728
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
729
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
730
+ </ul>
731
+ </div>
732
+ <div>
733
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
734
+ <ul class="mt-4 space-y-4">
735
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
736
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
737
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Security</a></li>
738
+ </ul>
739
+ </div>
740
+ <div>
741
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
742
+ <div class="mt-4 flex space-x-6">
743
+ <a href="#" class="text-gray-400 hover:text-white">
744
+ <i class="fab fa-facebook-f"></i>
745
+ </a>
746
+ <a href="#" class="text-gray-400 hover:text-white">
747
+ <i class="fab fa-twitter"></i>
748
+ </a>
749
+ <a href="#" class="text-gray-400 hover:text-white">
750
+ <i class="fab fa-instagram"></i>
751
+ </a>
752
+ <a href="#" class="text-gray-400 hover:text-white">
753
+ <i class="fab fa-linkedin-in"></i>
754
+ </a>
755
+ </div>
756
+ <div class="mt-6">
757
+ <p class="text-gray-300 text-sm">
758
+ Subscribe to our newsletter for the latest updates.
759
+ </p>
760
+ <form class="mt-2 sm:flex">
761
+ <label for="email" class="sr-only">Email</label>
762
+ <input type="email" name="email" id="email" required class="w-full px-4 py-2 rounded-md border border-gray-700 bg-gray-700 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-purple-500" placeholder="Enter your email">
763
+ <button type="submit" class="mt-2 sm:mt-0 sm:ml-2 px-4 py-2 rounded-md bg-purple-600 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
764
+ Subscribe
765
+ </button>
766
+ </form>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ <div class="mt-12 border-t border-gray-700 pt-8">
771
+ <p class="text-base text-gray-400 text-center">
772
+ &copy; 2023 DeepSite Technologies. All rights reserved.
773
+ </p>
774
+ </div>
775
+ </div>
776
+ </footer>
777
+
778
+ <script>
779
+ // Simple form submission handler
780
+ document.querySelector('form').addEventListener('submit', function(e) {
781
+ e.preventDefault();
782
+ alert('Thank you for your message! We will get back to you soon.');
783
+ this.reset();
784
+ });
785
+
786
+ // Mobile menu toggle (would need more implementation)
787
+ document.querySelector('.md\\:hidden button').addEventListener('click', function() {
788
+ alert('Mobile menu would open here in a full implementation');
789
+ });
790
+
791
+ // Smooth scrolling for anchor links
792
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
793
+ anchor.addEventListener('click', function (e) {
794
+ e.preventDefault();
795
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
796
+ behavior: 'smooth'
797
+ });
798
+ });
799
+ });
800
+ </script>
801
+ <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=murali418/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
802
+ </html>