Hugging Face's logo

Spaces:
bibbler
/
deepsite-elevate
Running

App Files Community
bibbler commited on
Commit
b7d876b
·
verified ·
1 Parent(s): 6d132f9

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +812 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite Elevate
3
- emoji: 📚
4
- colorFrom: gray
5
- colorTo: purple
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-elevate
3
+ emoji: 🐳
4
+ colorFrom: green
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,812 @@
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>Elevate | Premium Digital 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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#10B981',
16
+ dark: '#1F2937',
17
+ light: '#F9FAFB'
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
+ scroll-behavior: smooth;
32
+ }
33
+
34
+ .hero-gradient {
35
+ background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #10B981 100%);
36
+ }
37
+
38
+ .feature-card:hover {
39
+ transform: translateY(-5px);
40
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
41
+ }
42
+
43
+ .testimonial-card {
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .testimonial-card:hover {
48
+ transform: scale(1.02);
49
+ }
50
+
51
+ .cta-gradient {
52
+ background: linear-gradient(90deg, #4F46E5 0%, #7C3AED 100%);
53
+ }
54
+
55
+ .nav-link:hover {
56
+ color: #4F46E5;
57
+ }
58
+
59
+ .mobile-menu {
60
+ transition: all 0.3s ease;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="bg-light text-dark">
65
+ <!-- Navigation -->
66
+ <nav class="bg-white shadow-sm fixed w-full z-50">
67
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
68
+ <div class="flex justify-between h-20 items-center">
69
+ <div class="flex items-center">
70
+ <div class="flex-shrink-0 flex items-center">
71
+ <i class="fas fa-rocket text-primary text-2xl mr-2"></i>
72
+ <span class="text-xl font-bold text-dark">Elevate</span>
73
+ </div>
74
+ </div>
75
+
76
+ <div class="hidden md:block">
77
+ <div class="ml-10 flex items-center space-x-8">
78
+ <a href="#features" class="nav-link text-gray-600 hover:text-primary px-3 py-2 font-medium transition duration-300">Features</a>
79
+ <a href="#solutions" class="nav-link text-gray-600 hover:text-primary px-3 py-2 font-medium transition duration-300">Solutions</a>
80
+ <a href="#pricing" class="nav-link text-gray-600 hover:text-primary px-3 py-2 font-medium transition duration-300">Pricing</a>
81
+ <a href="#testimonials" class="nav-link text-gray-600 hover:text-primary px-3 py-2 font-medium transition duration-300">Testimonials</a>
82
+ <a href="#contact" class="nav-link text-gray-600 hover:text-primary px-3 py-2 font-medium transition duration-300">Contact</a>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="hidden md:block">
87
+ <div class="ml-4 flex items-center md:ml-6">
88
+ <a href="#pricing" class="bg-primary hover:bg-indigo-700 text-white px-6 py-2 rounded-md font-medium transition duration-300">Get Started</a>
89
+ </div>
90
+ </div>
91
+
92
+ <div class="md:hidden flex items-center">
93
+ <button id="mobile-menu-button" class="text-gray-500 hover:text-primary focus:outline-none">
94
+ <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
95
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
96
+ </svg>
97
+ </button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Mobile menu -->
103
+ <div id="mobile-menu" class="mobile-menu hidden md:hidden bg-white shadow-lg">
104
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
105
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary hover:bg-gray-50">Features</a>
106
+ <a href="#solutions" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary hover:bg-gray-50">Solutions</a>
107
+ <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary hover:bg-gray-50">Pricing</a>
108
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary hover:bg-gray-50">Testimonials</a>
109
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary hover:bg-gray-50">Contact</a>
110
+ <a href="#pricing" class="block w-full text-center bg-primary text-white px-3 py-2 rounded-md text-base font-medium mt-2">Get Started</a>
111
+ </div>
112
+ </div>
113
+ </nav>
114
+
115
+ <!-- Hero Section -->
116
+ <section class="hero-gradient pt-32 pb-20 text-white">
117
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
118
+ <div class="flex flex-col md:flex-row items-center">
119
+ <div class="md:w-1/2 mb-12 md:mb-0">
120
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Transform Your Business With Our <span class="text-secondary">Digital Solutions</span></h1>
121
+ <p class="text-xl text-gray-100 mb-8">Elevate your brand with our cutting-edge technology and expert services designed to drive growth and maximize your online presence.</p>
122
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
123
+ <a href="#pricing" class="bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-md font-bold text-lg transition duration-300 text-center">Get Started</a>
124
+ <a href="#features" class="border-2 border-white text-white hover:bg-white hover:text-primary px-8 py-3 rounded-md font-bold text-lg transition duration-300 text-center">Learn More</a>
125
+ </div>
126
+ <div class="mt-8 flex items-center">
127
+ <div class="flex -space-x-2">
128
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
129
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
130
+ <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/13.jpg" alt="">
131
+ </div>
132
+ <p class="ml-4 text-gray-100">Trusted by <span class="font-bold">5000+</span> businesses worldwide</p>
133
+ </div>
134
+ </div>
135
+ <div class="md:w-1/2">
136
+ <div class="relative">
137
+ <div class="absolute -top-8 -left-8 w-64 h-64 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
138
+ <div class="absolute -bottom-12 -right-8 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
139
+ <div class="absolute top-20 left-20 w-64 h-64 bg-emerald-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
140
+ <div class="relative">
141
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="Dashboard" class="rounded-lg shadow-2xl border-8 border-white transform rotate-1">
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </section>
148
+
149
+ <!-- Trusted By Section -->
150
+ <section class="bg-white py-12">
151
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
152
+ <p class="text-center text-gray-500 mb-8">TRUSTED BY INNOVATIVE COMPANIES WORLDWIDE</p>
153
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
154
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="Google" class="h-8 opacity-60 hover:opacity-100 transition duration-300">
155
+ <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Apple" class="h-8 opacity-60 hover:opacity-100 transition duration-300">
156
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg" alt="Amazon" class="h-6 opacity-60 hover:opacity-100 transition duration-300">
157
+ <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Microsoft_logo_%282012%29.svg" alt="Microsoft" class="h-8 opacity-60 hover:opacity-100 transition duration-300">
158
+ <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Slack_logo_2019.svg" alt="Slack" class="h-8 opacity-60 hover:opacity-100 transition duration-300">
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- Features Section -->
164
+ <section id="features" class="py-20 bg-gray-50">
165
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
166
+ <div class="text-center mb-16">
167
+ <h2 class="text-3xl font-bold text-dark mb-4">Powerful Features</h2>
168
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Our platform is packed with innovative features designed to help your business succeed in the digital age.</p>
169
+ </div>
170
+
171
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
172
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
173
+ <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
174
+ <i class="fas fa-bolt text-primary text-2xl"></i>
175
+ </div>
176
+ <h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
177
+ <p class="text-gray-600">Our optimized platform delivers unmatched speed and performance to keep your users engaged.</p>
178
+ </div>
179
+
180
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
181
+ <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
182
+ <i class="fas fa-shield-alt text-primary text-2xl"></i>
183
+ </div>
184
+ <h3 class="text-xl font-bold mb-3">Enterprise Security</h3>
185
+ <p class="text-gray-600">Military-grade encryption and security protocols to protect your valuable data and customer information.</p>
186
+ </div>
187
+
188
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
189
+ <div class="w-14 h-14 bg-emerald-100 rounded-lg flex items-center justify-center mb-6">
190
+ <i class="fas fa-chart-line text-primary text-2xl"></i>
191
+ </div>
192
+ <h3 class="text-xl font-bold mb-3">Advanced Analytics</h3>
193
+ <p class="text-gray-600">Gain deep insights with our powerful analytics dashboard to make data-driven decisions.</p>
194
+ </div>
195
+
196
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
197
+ <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
198
+ <i class="fas fa-mobile-alt text-primary text-2xl"></i>
199
+ </div>
200
+ <h3 class="text-xl font-bold mb-3">Mobile Optimized</h3>
201
+ <p class="text-gray-600">Fully responsive design that looks and works perfectly on any device or screen size.</p>
202
+ </div>
203
+
204
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
205
+ <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-6">
206
+ <i class="fas fa-cogs text-primary text-2xl"></i>
207
+ </div>
208
+ <h3 class="text-xl font-bold mb-3">Easy Integration</h3>
209
+ <p class="text-gray-600">Seamlessly connect with your favorite tools and services through our powerful API.</p>
210
+ </div>
211
+
212
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
213
+ <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-6">
214
+ <i class="fas fa-headset text-primary text-2xl"></i>
215
+ </div>
216
+ <h3 class="text-xl font-bold mb-3">24/7 Support</h3>
217
+ <p class="text-gray-600">Our dedicated support team is available around the clock to assist you with any issues.</p>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </section>
222
+
223
+ <!-- Solutions Section -->
224
+ <section id="solutions" class="py-20 bg-white">
225
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
226
+ <div class="flex flex-col md:flex-row items-center">
227
+ <div class="md:w-1/2 mb-12 md:mb-0">
228
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Solutions" class="rounded-lg shadow-xl">
229
+ </div>
230
+ <div class="md:w-1/2 md:pl-12">
231
+ <h2 class="text-3xl font-bold text-dark mb-6">Tailored Solutions for Your Business Needs</h2>
232
+ <p class="text-gray-600 mb-8">We understand that every business is unique. That's why we offer customizable solutions that adapt to your specific requirements and growth objectives.</p>
233
+
234
+ <div class="space-y-6">
235
+ <div class="flex">
236
+ <div class="flex-shrink-0">
237
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
238
+ <i class="fas fa-check"></i>
239
+ </div>
240
+ </div>
241
+ <div class="ml-4">
242
+ <h3 class="text-lg font-medium text-gray-900">Scalable Infrastructure</h3>
243
+ <p class="mt-2 text-gray-600">Grow without limits with our cloud-based infrastructure that scales with your business.</p>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="flex">
248
+ <div class="flex-shrink-0">
249
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
250
+ <i class="fas fa-check"></i>
251
+ </div>
252
+ </div>
253
+ <div class="ml-4">
254
+ <h3 class="text-lg font-medium text-gray-900">Custom Workflows</h3>
255
+ <p class="mt-2 text-gray-600">Automate and streamline your processes with our customizable workflow solutions.</p>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="flex">
260
+ <div class="flex-shrink-0">
261
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
262
+ <i class="fas fa-check"></i>
263
+ </div>
264
+ </div>
265
+ <div class="ml-4">
266
+ <h3 class="text-lg font-medium text-gray-900">AI-Powered Insights</h3>
267
+ <p class="mt-2 text-gray-600">Leverage artificial intelligence to uncover hidden opportunities and optimize performance.</p>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <a href="#contact" class="mt-8 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-indigo-700 transition duration-300">
273
+ Request Custom Solution
274
+ <i class="fas fa-arrow-right ml-2"></i>
275
+ </a>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </section>
280
+
281
+ <!-- Stats Section -->
282
+ <section class="py-16 bg-primary text-white">
283
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
284
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
285
+ <div class="p-6">
286
+ <div class="text-4xl font-bold mb-2">98%</div>
287
+ <div class="text-lg">Customer Satisfaction</div>
288
+ </div>
289
+ <div class="p-6">
290
+ <div class="text-4xl font-bold mb-2">24/7</div>
291
+ <div class="text-lg">Support Availability</div>
292
+ </div>
293
+ <div class="p-6">
294
+ <div class="text-4xl font-bold mb-2">5,000+</div>
295
+ <div class="text-lg">Happy Clients</div>
296
+ </div>
297
+ <div class="p-6">
298
+ <div class="text-4xl font-bold mb-2">3x</div>
299
+ <div class="text-lg">Average ROI</div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </section>
304
+
305
+ <!-- Pricing Section -->
306
+ <section id="pricing" class="py-20 bg-gray-50">
307
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
308
+ <div class="text-center mb-16">
309
+ <h2 class="text-3xl font-bold text-dark mb-4">Simple, Transparent Pricing</h2>
310
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Choose the perfect plan for your business needs. No hidden fees, cancel anytime.</p>
311
+ </div>
312
+
313
+ <div class="flex justify-center mb-8">
314
+ <div class="inline-flex rounded-md shadow-sm">
315
+ <button type="button" class="px-6 py-3 text-sm font-medium rounded-l-lg bg-primary text-white focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
316
+ Monthly
317
+ </button>
318
+ <button type="button" class="px-6 py-3 text-sm font-medium rounded-r-lg bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
319
+ Annual (Save 20%)
320
+ </button>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
325
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
326
+ <div class="p-8">
327
+ <h3 class="text-2xl font-bold text-gray-900 mb-2">Starter</h3>
328
+ <p class="text-gray-600 mb-6">Perfect for small businesses and startups</p>
329
+ <div class="mb-8">
330
+ <span class="text-4xl font-bold text-gray-900">$29</span>
331
+ <span class="text-gray-600">/month</span>
332
+ </div>
333
+ <ul class="space-y-4 mb-8">
334
+ <li class="flex items-center">
335
+ <i class="fas fa-check text-green-500 mr-3"></i>
336
+ <span>Up to 10 users</span>
337
+ </li>
338
+ <li class="flex items-center">
339
+ <i class="fas fa-check text-green-500 mr-3"></i>
340
+ <span>50GB storage</span>
341
+ </li>
342
+ <li class="flex items-center">
343
+ <i class="fas fa-check text-green-500 mr-3"></i>
344
+ <span>Basic analytics</span>
345
+ </li>
346
+ <li class="flex items-center text-gray-400">
347
+ <i class="fas fa-times text-red-400 mr-3"></i>
348
+ <span>Advanced features</span>
349
+ </li>
350
+ <li class="flex items-center text-gray-400">
351
+ <i class="fas fa-times text-red-400 mr-3"></i>
352
+ <span>Priority support</span>
353
+ </li>
354
+ </ul>
355
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-3 px-4 rounded-lg transition duration-300">
356
+ Get Started
357
+ </button>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transform scale-105 border-2 border-primary">
362
+ <div class="bg-primary text-white text-center py-2">
363
+ <span class="text-sm font-bold">MOST POPULAR</span>
364
+ </div>
365
+ <div class="p-8">
366
+ <h3 class="text-2xl font-bold text-gray-900 mb-2">Professional</h3>
367
+ <p class="text-gray-600 mb-6">Ideal for growing businesses</p>
368
+ <div class="mb-8">
369
+ <span class="text-4xl font-bold text-gray-900">$79</span>
370
+ <span class="text-gray-600">/month</span>
371
+ </div>
372
+ <ul class="space-y-4 mb-8">
373
+ <li class="flex items-center">
374
+ <i class="fas fa-check text-green-500 mr-3"></i>
375
+ <span>Up to 50 users</span>
376
+ </li>
377
+ <li class="flex items-center">
378
+ <i class="fas fa-check text-green-500 mr-3"></i>
379
+ <span>250GB storage</span>
380
+ </li>
381
+ <li class="flex items-center">
382
+ <i class="fas fa-check text-green-500 mr-3"></i>
383
+ <span>Advanced analytics</span>
384
+ </li>
385
+ <li class="flex items-center">
386
+ <i class="fas fa-check text-green-500 mr-3"></i>
387
+ <span>API access</span>
388
+ </li>
389
+ <li class="flex items-center text-gray-400">
390
+ <i class="fas fa-times text-red-400 mr-3"></i>
391
+ <span>Priority support</span>
392
+ </li>
393
+ </ul>
394
+ <button class="w-full bg-primary hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
395
+ Get Started
396
+ </button>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
401
+ <div class="p-8">
402
+ <h3 class="text-2xl font-bold text-gray-900 mb-2">Enterprise</h3>
403
+ <p class="text-gray-600 mb-6">For large organizations with complex needs</p>
404
+ <div class="mb-8">
405
+ <span class="text-4xl font-bold text-gray-900">$199</span>
406
+ <span class="text-gray-600">/month</span>
407
+ </div>
408
+ <ul class="space-y-4 mb-8">
409
+ <li class="flex items-center">
410
+ <i class="fas fa-check text-green-500 mr-3"></i>
411
+ <span>Unlimited users</span>
412
+ </li>
413
+ <li class="flex items-center">
414
+ <i class="fas fa-check text-green-500 mr-3"></i>
415
+ <span>1TB storage</span>
416
+ </li>
417
+ <li class="flex items-center">
418
+ <i class="fas fa-check text-green-500 mr-3"></i>
419
+ <span>Advanced analytics</span>
420
+ </li>
421
+ <li class="flex items-center">
422
+ <i class="fas fa-check text-green-500 mr-3"></i>
423
+ <span>API access</span>
424
+ </li>
425
+ <li class="flex items-center">
426
+ <i class="fas fa-check text-green-500 mr-3"></i>
427
+ <span>24/7 priority support</span>
428
+ </li>
429
+ </ul>
430
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-3 px-4 rounded-lg transition duration-300">
431
+ Get Started
432
+ </button>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="mt-12 text-center">
438
+ <p class="text-gray-600 mb-4">Need a custom solution for your enterprise?</p>
439
+ <a href="#contact" class="text-primary font-bold hover:underline">Contact our sales team <i class="fas fa-arrow-right ml-1"></i></a>
440
+ </div>
441
+ </div>
442
+ </section>
443
+
444
+ <!-- Testimonials Section -->
445
+ <section id="testimonials" class="py-20 bg-white">
446
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
447
+ <div class="text-center mb-16">
448
+ <h2 class="text-3xl font-bold text-dark mb-4">What Our Clients Say</h2>
449
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Don't just take our word for it. Here's what our clients have to say about working with us.</p>
450
+ </div>
451
+
452
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
453
+ <div class="testimonial-card bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md">
454
+ <div class="flex items-center mb-6">
455
+ <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
456
+ <div class="ml-4">
457
+ <h4 class="font-bold">Sarah Johnson</h4>
458
+ <p class="text-gray-600">CEO, TechSolutions</p>
459
+ </div>
460
+ </div>
461
+ <p class="text-gray-700 italic">"Elevate transformed our digital presence completely. Their platform is intuitive, powerful, and has helped us increase our online revenue by 200% in just six months."</p>
462
+ <div class="mt-6 flex text-yellow-400">
463
+ <i class="fas fa-star"></i>
464
+ <i class="fas fa-star"></i>
465
+ <i class="fas fa-star"></i>
466
+ <i class="fas fa-star"></i>
467
+ <i class="fas fa-star"></i>
468
+ </div>
469
+ </div>
470
+
471
+ <div class="testimonial-card bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md">
472
+ <div class="flex items-center mb-6">
473
+ <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Michael Chen">
474
+ <div class="ml-4">
475
+ <h4 class="font-bold">Michael Chen</h4>
476
+ <p class="text-gray-600">CTO, Global Innovations</p>
477
+ </div>
478
+ </div>
479
+ <p class="text-gray-700 italic">"The implementation was seamless and the results were immediate. Our team productivity increased by 40% after switching to Elevate's platform. Their support team is exceptional."</p>
480
+ <div class="mt-6 flex text-yellow-400">
481
+ <i class="fas fa-star"></i>
482
+ <i class="fas fa-star"></i>
483
+ <i class="fas fa-star"></i>
484
+ <i class="fas fa-star"></i>
485
+ <i class="fas fa-star"></i>
486
+ </div>
487
+ </div>
488
+
489
+ <div class="testimonial-card bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md">
490
+ <div class="flex items-center mb-6">
491
+ <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily Rodriguez">
492
+ <div class="ml-4">
493
+ <h4 class="font-bold">Emily Rodriguez</h4>
494
+ <p class="text-gray-600">Marketing Director, BrightFuture</p>
495
+ </div>
496
+ </div>
497
+ <p class="text-gray-700 italic">"We've tried several solutions before, but none delivered like Elevate. The analytics alone are worth the investment, giving us insights we never had before. Highly recommended!"</p>
498
+ <div class="mt-6 flex text-yellow-400">
499
+ <i class="fas fa-star"></i>
500
+ <i class="fas fa-star"></i>
501
+ <i class="fas fa-star"></i>
502
+ <i class="fas fa-star"></i>
503
+ <i class="fas fa-star"></i>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </section>
509
+
510
+ <!-- CTA Section -->
511
+ <section class="py-20 cta-gradient text-white">
512
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
513
+ <div class="text-center">
514
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business?</h2>
515
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of businesses that are already experiencing the Elevate difference. Start your journey today.</p>
516
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
517
+ <a href="#pricing" class="bg-white hover:bg-gray-100 text-primary px-8 py-4 rounded-md font-bold text-lg transition duration-300 text-center">Get Started Now</a>
518
+ <a href="#contact" class="border-2 border-white hover:bg-white hover:text-primary px-8 py-4 rounded-md font-bold text-lg transition duration-300 text-center">Contact Sales</a>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </section>
523
+
524
+ <!-- FAQ Section -->
525
+ <section class="py-20 bg-gray-50">
526
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
527
+ <div class="text-center mb-16">
528
+ <h2 class="text-3xl font-bold text-dark mb-4">Frequently Asked Questions</h2>
529
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Find answers to common questions about our platform and services.</p>
530
+ </div>
531
+
532
+ <div class="max-w-3xl mx-auto">
533
+ <div class="space-y-4">
534
+ <div class="bg-white p-6 rounded-lg shadow-sm">
535
+ <button class="flex justify-between items-center w-full text-left focus:outline-none">
536
+ <h3 class="text-lg font-medium text-gray-900">How quickly can I get started with Elevate?</h3>
537
+ <i class="fas fa-chevron-down text-primary"></i>
538
+ </button>
539
+ <div class="mt-4 text-gray-600">
540
+ <p>You can sign up and start using our platform in minutes. For enterprise plans, our onboarding team can have you fully set up within 24-48 hours depending on your requirements.</p>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="bg-white p-6 rounded-lg shadow-sm">
545
+ <button class="flex justify-between items-center w-full text-left focus:outline-none">
546
+ <h3 class="text-lg font-medium text-gray-900">Is there a free trial available?</h3>
547
+ <i class="fas fa-chevron-down text-primary"></i>
548
+ </button>
549
+ <div class="mt-4 text-gray-600">
550
+ <p>Yes, we offer a 14-day free trial for all our plans. No credit card required. You'll have full access to all features during your trial period.</p>
551
+ </div>
552
+ </div>
553
+
554
+ <div class="bg-white p-6 rounded-lg shadow-sm">
555
+ <button class="flex justify-between items-center w-full text-left focus:outline-none">
556
+ <h3 class="text-lg font-medium text-gray-900">What kind of support do you offer?</h3>
557
+ <i class="fas fa-chevron-down text-primary"></i>
558
+ </button>
559
+ <div class="mt-4 text-gray-600">
560
+ <p>We provide 24/7 email and chat support for all plans. Phone support is available for Professional and Enterprise plans. Our average response time is under 30 minutes for priority issues.</p>
561
+ </div>
562
+ </div>
563
+
564
+ <div class="bg-white p-6 rounded-lg shadow-sm">
565
+ <button class="flex justify-between items-center w-full text-left focus:outline-none">
566
+ <h3 class="text-lg font-medium text-gray-900">Can I upgrade or downgrade my plan?</h3>
567
+ <i class="fas fa-chevron-down text-primary"></i>
568
+ </button>
569
+ <div class="mt-4 text-gray-600">
570
+ <p>Absolutely! You can change your plan at any time. Upgrades take effect immediately, while downgrades take effect at your next billing cycle. We prorate any differences in cost.</p>
571
+ </div>
572
+ </div>
573
+
574
+ <div class="bg-white p-6 rounded-lg shadow-sm">
575
+ <button class="flex justify-between items-center w-full text-left focus:outline-none">
576
+ <h3 class="text-lg font-medium text-gray-900">How secure is my data with Elevate?</h3>
577
+ <i class="fas fa-chevron-down text-primary"></i>
578
+ </button>
579
+ <div class="mt-4 text-gray-600">
580
+ <p>Security is our top priority. We use enterprise-grade encryption, regular backups, and comply with industry-standard security protocols. Your data is always safe with us.</p>
581
+ </div>
582
+ </div>
583
+ </div>
584
+
585
+ <div class="mt-12 text-center">
586
+ <p class="text-gray-600 mb-4">Still have questions?</p>
587
+ <a href="#contact" class="text-primary font-bold hover:underline">Contact our support team <i class="fas fa-arrow-right ml-1"></i></a>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </section>
592
+
593
+ <!-- Contact Section -->
594
+ <section id="contact" class="py-20 bg-white">
595
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
596
+ <div class="flex flex-col md:flex-row">
597
+ <div class="md:w-1/2 mb-12 md:mb-0">
598
+ <h2 class="text-3xl font-bold text-dark mb-6">Get In Touch</h2>
599
+ <p class="text-gray-600 mb-8">Have questions or want to learn more about how Elevate can help your business? Our team is here to help.</p>
600
+
601
+ <div class="space-y-6">
602
+ <div class="flex items-start">
603
+ <div class="flex-shrink-0">
604
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
605
+ <i class="fas fa-map-marker-alt"></i>
606
+ </div>
607
+ </div>
608
+ <div class="ml-4">
609
+ <h3 class="text-lg font-medium text-gray-900">Our Office</h3>
610
+ <p class="mt-1 text-gray-600">123 Business Ave, Suite 500<br>San Francisco, CA 94107</p>
611
+ </div>
612
+ </div>
613
+
614
+ <div class="flex items-start">
615
+ <div class="flex-shrink-0">
616
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
617
+ <i class="fas fa-phone-alt"></i>
618
+ </div>
619
+ </div>
620
+ <div class="ml-4">
621
+ <h3 class="text-lg font-medium text-gray-900">Phone</h3>
622
+ <p class="mt-1 text-gray-600">+1 (555) 123-4567<br>Mon-Fri, 9am-6pm PST</p>
623
+ </div>
624
+ </div>
625
+
626
+ <div class="flex items-start">
627
+ <div class="flex-shrink-0">
628
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
629
+ <i class="fas fa-envelope"></i>
630
+ </div>
631
+ </div>
632
+ <div class="ml-4">
633
+ <h3 class="text-lg font-medium text-gray-900">Email</h3>
634
+ <p class="mt-1 text-gray-600">hello@elevate.com<br>We typically reply within 2 hours</p>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+
640
+ <div class="md:w-1/2 md:pl-12">
641
+ <form class="bg-gray-50 p-8 rounded-lg shadow-sm">
642
+ <div class="mb-6">
643
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
644
+ <input type="text" id="name" name="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary" placeholder="John Doe">
645
+ </div>
646
+
647
+ <div class="mb-6">
648
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
649
+ <input type="email" id="email" name="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary" placeholder="john@company.com">
650
+ </div>
651
+
652
+ <div class="mb-6">
653
+ <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company (Optional)</label>
654
+ <input type="text" id="company" name="company" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary" placeholder="Company Name">
655
+ </div>
656
+
657
+ <div class="mb-6">
658
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">How Can We Help?</label>
659
+ <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary" placeholder="Tell us about your project or questions..."></textarea>
660
+ </div>
661
+
662
+ <button type="submit" class="w-full bg-primary hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
663
+ Send Message
664
+ </button>
665
+ </form>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </section>
670
+
671
+ <!-- Footer -->
672
+ <footer class="bg-dark text-white pt-16 pb-8">
673
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
674
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
675
+ <div>
676
+ <div class="flex items-center mb-4">
677
+ <i class="fas fa-rocket text-primary text-2xl mr-2"></i>
678
+ <span class="text-xl font-bold">Elevate</span>
679
+ </div>
680
+ <p class="text-gray-400 mb-4">Transforming businesses through innovative digital solutions.</p>
681
+ <div class="flex space-x-4">
682
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
683
+ <i class="fab fa-facebook-f"></i>
684
+ </a>
685
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
686
+ <i class="fab fa-twitter"></i>
687
+ </a>
688
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
689
+ <i class="fab fa-linkedin-in"></i>
690
+ </a>
691
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
692
+ <i class="fab fa-instagram"></i>
693
+ </a>
694
+ </div>
695
+ </div>
696
+
697
+ <div>
698
+ <h3 class="text-lg font-semibold mb-4">Product</h3>
699
+ <ul class="space-y-2">
700
+ <li><a href="#features" class="text-gray-400 hover:text-white transition duration-300">Features</a></li>
701
+ <li><a href="#pricing" class="text-gray-400 hover:text-white transition duration-300">Pricing</a></li>
702
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Integrations</a></li>
703
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Updates</a></li>
704
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Roadmap</a></li>
705
+ </ul>
706
+ </div>
707
+
708
+ <div>
709
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
710
+ <ul class="space-y-2">
711
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
712
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
713
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
714
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Press</a></li>
715
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
716
+ </ul>
717
+ </div>
718
+
719
+ <div>
720
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
721
+ <ul class="space-y-2">
722
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Help Center</a></li>
723
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Community</a></li>
724
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Webinars</a></li>
725
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tutorials</a></li>
726
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">API Docs</a></li>
727
+ </ul>
728
+ </div>
729
+ </div>
730
+
731
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
732
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Elevate. All rights reserved.</p>
733
+ <div class="flex space-x-6">
734
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
735
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
736
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookie Policy</a>
737
+ </div>
738
+ </div>
739
+ </div>
740
+ </footer>
741
+
742
+ <script>
743
+ // Mobile menu toggle
744
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
745
+ const menu = document.getElementById('mobile-menu');
746
+ menu.classList.toggle('hidden');
747
+ });
748
+
749
+ // Smooth scrolling for anchor links
750
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
751
+ anchor.addEventListener('click', function (e) {
752
+ e.preventDefault();
753
+
754
+ const targetId = this.getAttribute('href');
755
+ if (targetId === '#') return;
756
+
757
+ const targetElement = document.querySelector(targetId);
758
+ if (targetElement) {
759
+ // Close mobile menu if open
760
+ const mobileMenu = document.getElementById('mobile-menu');
761
+ if (!mobileMenu.classList.contains('hidden')) {
762
+ mobileMenu.classList.add('hidden');
763
+ }
764
+
765
+ // Scroll to target
766
+ window.scrollTo({
767
+ top: targetElement.offsetTop - 80,
768
+ behavior: 'smooth'
769
+ });
770
+ }
771
+ });
772
+ });
773
+
774
+ // Form submission (example)
775
+ const contactForm = document.querySelector('form');
776
+ if (contactForm) {
777
+ contactForm.addEventListener('submit', function(e) {
778
+ e.preventDefault();
779
+ // Here you would typically send the form data to your server
780
+ alert('Thank you for your message! We will get back to you soon.');
781
+ this.reset();
782
+ });
783
+ }
784
+
785
+ // Scroll animation for elements
786
+ const animateOnScroll = function() {
787
+ const elements = document.querySelectorAll('.feature-card, .testimonial-card');
788
+
789
+ elements.forEach(element => {
790
+ const elementPosition = element.getBoundingClientRect().top;
791
+ const screenPosition = window.innerHeight / 1.2;
792
+
793
+ if (elementPosition < screenPosition) {
794
+ element.style.opacity = '1';
795
+ element.style.transform = 'translateY(0)';
796
+ }
797
+ });
798
+ };
799
+
800
+ // Set initial state for animation
801
+ document.querySelectorAll('.feature-card, .testimonial-card').forEach(element => {
802
+ element.style.opacity = '0';
803
+ element.style.transform = 'translateY(20px)';
804
+ element.style.transition = 'all 0.6s ease';
805
+ });
806
+
807
+ // Run on load and scroll
808
+ window.addEventListener('load', animateOnScroll);
809
+ window.addEventListener('scroll', animateOnScroll);
810
+ </script>
811
+ <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=bibbler/deepsite-elevate" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
812
+ </html>