Hugging Face's logo

Spaces:
waqashayder
/
oomify_website
Running

App Files Community
waqashayder commited on
Commit
cba39a2
·
verified ·
1 Parent(s): 941416b

kinldy improve the app to preimium level

Browse files
Files changed (2) hide show
  1. index.html +362 -136
  2. premium.html +235 -0
index.html CHANGED
@@ -9,7 +9,10 @@
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
12
- <script>
 
 
 
13
  // Animate elements on page load
14
  document.addEventListener('DOMContentLoaded', () => {
15
  gsap.from('nav', {duration: 0.8, y: -50, opacity: 0, ease: 'power2.out'});
@@ -61,82 +64,165 @@
61
  transform: translateY(-5px);
62
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
63
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  </style>
65
  </head>
66
  <body class="bg-gray-50 dark:bg-gray-900 overflow-x-hidden">
67
  <div id="vanta-bg"></div>
68
- <!-- Navigation -->
69
- <nav class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 fixed w-full z-50">
70
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
71
- <div class="flex justify-between h-16 items-center">
72
  <div class="flex items-center">
73
  <a href="index.html" class="flex-shrink-0 flex items-center">
74
- <span class="text-2xl font-bold gradient-text">OOMIFY</span>
75
- </a>
76
  </div>
77
- <div class="hidden md:block">
78
- <div class="ml-10 flex items-baseline space-x-4">
79
- <a href="index.html" class="text-gray-900 dark:text-white px-3 py-2 text-sm font-medium">Home</a>
80
- <a href="services.html" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium">Services</a>
81
- <a href="projects.html" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium">Projects</a>
82
- <a href="about.html" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium">About</a>
83
- <a href="contact.html" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white px-3 py-2 text-sm font-medium">Contact</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
  </div>
85
  </div>
86
- <div class="flex items-center space-x-4">
87
- <button id="theme-toggle" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
88
- <i data-feather="moon" id="theme-icon-dark" class="hidden w-5 h-5"></i>
89
- <i data-feather="sun" id="theme-icon-light" class="hidden w-5 h-5"></i>
90
  </button>
91
- <div class="md:hidden">
92
- <button class="text-gray-500 hover:text-gray-900 focus:outline-none">
93
- <i data-feather="menu"></i>
94
- </button>
 
 
 
95
  </div>
96
  </div>
97
  </div>
98
  </div>
99
  </nav>
100
- <!-- Hero Section -->
101
- <div class="relative pt-32 pb-32 px-4 sm:px-6 lg:pt-44 lg:pb-44 lg:px-8">
102
- <div class="relative max-w-7xl mx-auto">
103
  <div class="text-center">
104
- <h1 class="text-5xl tracking-tight font-extrabold text-gray-900 sm:text-6xl md:text-7xl">
105
- <span class="block">Innovative Digital</span>
106
- <span class="block gradient-text animate-gradient">Solutions That Scale</span>
 
 
107
  </h1>
108
- <p class="mt-6 max-w-2xl mx-auto text-xl text-gray-600 sm:text-2xl md:mt-8">
109
- Transforming complex ideas into seamless digital experiences that drive measurable results.
110
- </p>
111
- <div class="mt-12 flex flex-col sm:flex-row justify-center gap-4">
112
- <a href="contact.html" class="px-8 py-4 border border-transparent text-lg font-medium rounded-full shadow-lg text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105">
113
- Start Your Project
 
114
  </a>
115
- <a href="services.html" class="px-8 py-4 border-2 border-gray-900 text-lg font-medium rounded-full bg-transparent hover:bg-gray-900 hover:text-white transition-all duration-300">
116
- Explore Services
 
 
 
 
117
  </a>
118
  </div>
119
- <div class="mt-16 flex justify-center">
120
- <div class="inline-flex items-center text-gray-500 hover:text-gray-700">
121
- <i data-feather="arrow-down" class="w-6 h-6 animate-bounce"></i>
122
  </div>
123
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  </div>
125
  </div>
126
  </div>
127
- <!-- Services Section -->
128
- <div class="py-20 bg-gradient-to-b from-white to-gray-50">
129
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
130
- <div class="lg:text-center">
131
- <span class="inline-block px-3 py-1 text-sm font-semibold text-indigo-600 bg-indigo-100 rounded-full mb-4">OUR EXPERTISE</span>
132
- <h2 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
133
- <span class="block">End-to-End Digital</span>
134
- <span class="block gradient-text">Transformation Services</span>
 
 
135
  </h2>
136
- <p class="mt-6 max-w-3xl mx-auto text-xl text-gray-600">
137
- We architect, build, and scale digital products that solve real business challenges.
138
- </p>
139
- </div>
140
  <div class="mt-10">
141
  <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
142
  <!-- Service 1 -->
@@ -220,35 +306,48 @@
220
  </div>
221
  </div>
222
  </div>
223
- <!-- Stats Section -->
224
- <div class="bg-gradient-to-r from-indigo-700 to-purple-700">
225
- <div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
226
- <div class="max-w-4xl mx-auto text-center">
227
- <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
228
- Trusted by businesses worldwide
229
- </h2>
230
- <p class="mt-3 text-xl text-indigo-200 sm:mt-4">
231
- Our solutions power businesses across various industries, helping them achieve digital excellence.
232
- </p>
233
- </div>
234
- <div class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-3 sm:gap-8">
235
- <div class="flex flex-col">
236
- <div class="text-5xl font-extrabold text-white">50+</div>
237
- <div class="mt-2 text-base font-medium text-indigo-200">Clients Worldwide</div>
 
 
 
 
 
 
238
  </div>
239
- <div class="flex flex-col mt-10 sm:mt-0">
240
- <div class="text-5xl font-extrabold text-white">100%</div>
241
- <div class="mt-2 text-base font-medium text-indigo-200">Client Satisfaction</div>
 
242
  </div>
243
- <div class="flex flex-col mt-10 sm:mt-0">
244
- <div class="text-5xl font-extrabold text-white">24/7</div>
245
- <div class="mt-2 text-base font-medium text-indigo-200">Support Availability</div>
 
 
 
 
 
 
 
246
  </div>
247
  </div>
248
  </div>
249
  </div>
250
-
251
- <!-- Testimonials -->
252
  <div class="bg-gray-50 py-16 lg:py-24">
253
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
254
  <div class="lg:text-center">
@@ -323,82 +422,133 @@
323
  </div>
324
  </div>
325
  </div>
326
- <!-- CTA Section -->
327
- <div class="relative bg-gradient-to-r from-indigo-700 to-purple-700 overflow-hidden">
328
- <div class="absolute inset-0 opacity-10 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC4xIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIi8+PC9zdmc+')]"></div>
329
- <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
330
- <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
331
- <span class="block">Ready to transform your business?</span>
332
- <span class="block">Let's build something amazing.</span>
333
- </h2>
334
- <p class="mt-4 text-lg leading-6 text-indigo-200">
335
- Get in touch with our team to discuss how we can help you achieve your digital goals.
336
- </p>
337
- <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
338
- Contact Us
339
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
340
  </div>
341
  </div>
342
- <!-- Footer -->
343
- <footer class="bg-gray-900">
344
- <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
345
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
346
  <div>
347
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
348
- <ul class="mt-4 space-y-4">
349
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Web Development</a></li>
350
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Mobile Apps</a></li>
351
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Cloud Services</a></li>
352
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Data Analytics</a></li>
353
  </ul>
354
  </div>
 
355
  <div>
356
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
357
- <ul class="mt-4 space-y-4">
358
- <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
359
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
360
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
361
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
 
362
  </ul>
363
  </div>
 
364
  <div>
365
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
366
- <ul class="mt-4 space-y-4">
367
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
368
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
369
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Status</a></li>
370
- <li><a href="#" class="text-base text-gray-300 hover:text-white">API Reference</a></li>
 
371
  </ul>
372
  </div>
 
373
  <div>
374
- <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
375
- <ul class="mt-4 space-y-4">
376
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
377
- <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>
378
- <li><a href="#" class="text-base text-gray-300 hover:text-white">GitHub</a></li>
379
- <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li>
 
 
380
  </ul>
381
  </div>
382
  </div>
383
- <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
384
- <div class="flex space-x-6 md:order-2">
385
- <a href="#" class="text-gray-400 hover:text-white">
386
- <i data-feather="twitter" class="h-6 w-6"></i>
387
- </a>
388
- <a href="#" class="text-gray-400 hover:text-white">
389
- <i data-feather="linkedin" class="h-6 w-6"></i>
390
- </a>
391
- <a href="#" class="text-gray-400 hover:text-white">
392
- <i data-feather="github" class="h-6 w-6"></i>
 
 
393
  </a>
 
 
 
 
 
 
 
 
 
 
394
  </div>
395
- <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
396
- &copy; 2023 OOMIFY Technologies. All rights reserved.
397
- </p>
398
  </div>
399
  </div>
400
  </footer>
401
-
402
  <script>
403
  VANTA.GLOBE({
404
  el: "#vanta-bg",
@@ -410,15 +560,88 @@
410
  scale: 1.00,
411
  scaleMobile: 1.00,
412
  color: 0x6366f1,
413
- backgroundColor: 0xf8fafc,
414
- size: 0.8
415
  });
416
  </script>
417
  <script>
418
- feather.replace();
419
- </script>
420
- <script>
421
- // Dark mode toggle
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
422
  const themeToggle = document.getElementById('theme-toggle');
423
  const themeIconDark = document.getElementById('theme-icon-dark');
424
  const themeIconLight = document.getElementById('theme-icon-light');
@@ -437,6 +660,9 @@
437
  localStorage.setItem('color-theme', 'light');
438
  themeIconLight.classList.add('hidden');
439
  themeIconDark.classList.remove('hidden');
 
 
 
440
  } else {
441
  document.documentElement.classList.add('dark');
442
  localStorage.setItem('color-theme', 'dark');
 
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/ScrollTrigger.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
14
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
15
+ <script>
16
  // Animate elements on page load
17
  document.addEventListener('DOMContentLoaded', () => {
18
  gsap.from('nav', {duration: 0.8, y: -50, opacity: 0, ease: 'power2.out'});
 
64
  transform: translateY(-5px);
65
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
66
  }
67
+ .premium-glow {
68
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
69
+ }
70
+ .hover-3d {
71
+ transition: all 0.3s ease;
72
+ }
73
+ .hover-3d:hover {
74
+ transform: translateY(-10px) rotateX(5deg);
75
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
76
+ }
77
+ .animated-gradient {
78
+ background: linear-gradient(-45deg, #6366F1, #8B5CF6, #EC4899, #F59E0B);
79
+ background-size: 400% 400%;
80
+ animation: gradientShift 6s ease infinite;
81
+ }
82
+ @keyframes gradientShift {
83
+ 0% { background-position: 0% 50%; }
84
+ 50% { background-position: 100% 50%; }
85
+ 100% { background-position: 0% 50%; }
86
+ }
87
+ .glass-effect {
88
+ background: rgba(255, 255, 255, 0.1);
89
+ backdrop-filter: blur(10px);
90
+ border: 1px solid rgba(255, 255, 255, 0.2);
91
+ }
92
+ .floating-animation {
93
+ animation: floating 3s ease-in-out infinite;
94
+ }
95
+ @keyframes floating {
96
+ 0% { transform: translateY(0px); }
97
+ 50% { transform: translateY(-10px); }
98
+ 100% { transform: translateY(0px); }
99
+ }
100
+ .typewriter {
101
+ overflow: hidden;
102
+ border-right: .15em solid #6366F1;
103
+ white-space: nowrap;
104
+ margin: 0 auto;
105
+ letter-spacing: .15em;
106
+ }
107
  </style>
108
  </head>
109
  <body class="bg-gray-50 dark:bg-gray-900 overflow-x-hidden">
110
  <div id="vanta-bg"></div>
111
+ <!-- Premium Navigation -->
112
+ <nav class="glass-effect border-b border-white/20 fixed w-full z-50">
113
+ <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
114
+ <div class="flex justify-between h-20 items-center">
115
  <div class="flex items-center">
116
  <a href="index.html" class="flex-shrink-0 flex items-center">
117
+ <span class="text-3xl font-black gradient-text tracking-tighter">OOMIFY</span>
 
118
  </div>
119
+ <div class="hidden xl:block">
120
+ <div class="ml-12 flex items-baseline space-x-8">
121
+ <a href="index.html" class="text-white px-4 py-2 text-lg font-semibold relative group">
122
+ Home
123
+ <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300">Home</a>
124
+ <a href="services.html" class="text-white/80 hover:text-white px-4 py-2 text-lg font-semibold relative group">
125
+ Services
126
+ <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300">Services</a>
127
+ <a href="projects.html" class="text-white/80 hover:text-white px-4 py-2 text-lg font-semibold relative group">
128
+ Projects
129
+ <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300">Projects</a>
130
+ <a href="about.html" class="text-white/80 hover:text-white px-4 py-2 text-lg font-semibold relative group">
131
+ About
132
+ </span>
133
+ </a>
134
+ <a href="contact.html" class="text-white/80 hover:text-white px-4 py-2 text-lg font-semibold relative group">
135
+ Contact
136
+ </a>
137
+ <a href="premium.html" class="bg-gradient-to-r from-yellow-400 to-yellow-600 text-gray-900 px-6 py-2 text-lg font-bold rounded-full hover:shadow-lg transition-all duration-300">
138
+ Premium
139
+ </a>
140
  </div>
141
  </div>
142
+ <div class="flex items-center space-x-6">
143
+ <button id="theme-toggle" class="text-white/80 hover:text-white transition-all duration-300">
144
+ <i data-feather="moon" id="theme-icon-dark" class="hidden w-6 h-6"></i>
145
+ <i data-feather="sun" id="theme-icon-light" class="hidden w-6 h-6"></i>
146
  </button>
147
+ <div class="hidden xl:block">
148
+ <a href="auth.html" class="text-white/80 hover:text-white font-semibold">
149
+ Client Portal
150
+ </a>
151
+ <div class="xl:hidden">
152
+ <button class="text-white/80 hover:text-white focus:outline-none">
153
+ <i data-feather="menu" class="w-6 h-6"></i>
154
  </div>
155
  </div>
156
  </div>
157
  </div>
158
  </nav>
159
+ <!-- Premium Hero Section -->
160
+ <div class="relative pt-40 pb-40 px-4 sm:px-6 lg:pt-52 lg:pb-52 lg:px-8">
161
+ <div class="relative max-w-8xl mx-auto">
162
  <div class="text-center">
163
+ <div class="inline-block px-4 py-2 bg-gradient-to-r from-indigo-500/20 to-purple-500/20 rounded-3xl backdrop-blur-sm border border-white/10 p-8 mb-8">
164
+ <span class="text-sm font-bold text-white bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full px-4 py-1 text-xs tracking-wider uppercase mb-4">Enterprise Grade Solutions</span>
165
+ <h1 class="text-6xl tracking-tighter font-black text-white sm:text-7xl md:text-8xl">
166
+ <span class="block floating-animation">Digital Transformation</span>
167
+ <span class="block gradient-text animated-gradient">Redefined</span>
168
  </h1>
169
+ <p class="mt-8 max-w-3xl mx-auto text-2xl text-white/90 sm:text-3xl">
170
+ Where <span class="font-bold text-yellow-300">Innovation</span> Meets <span class="font-bold text-green-300">Excellence</span>
171
+ </p>
172
+ <div class="mt-16 flex flex-col sm:flex-row justify-center gap-6">
173
+ <a href="contact.html" class="group px-10 py-5 border border-transparent text-xl font-bold rounded-full shadow-2xl text-white bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 hover:shadow-2xl transition-all duration-500 transform hover:scale-110 premium-glow">
174
+ <span class="relative z-10">Start Your Project</span>
175
+ <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent rounded-full"></div>
176
  </a>
177
+ <a href="services.html" class="group px-10 py-5 border-2 border-white/30 text-xl font-bold rounded-full bg-transparent hover:bg-white/10 text-white border-2 border-white/20 px-10 py-5 text-xl font-bold rounded-full hover:shadow-xl transition-all duration-300">
178
+ <span class="flex items-center">
179
+ Explore Services
180
+ <i data-feather="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform duration-300"></i>
181
+ Explore Services
182
+ </span>
183
  </a>
184
  </div>
185
+ <div class="mt-20 flex justify-center">
186
+ <div class="inline-flex items-center text-white/80 hover:text-white">
187
+ <i data-feather="chevron-down" class="w-8 h-8 animate-bounce"></i>
188
  </div>
189
  </div>
190
+ <!-- Real-time stats -->
191
+ <div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8">
192
+ <div class="text-center">
193
+ <div class="text-4xl font-black text-white mb-2">24/7</div>
194
+ <div class="text-white/70 text-sm">Active Support</div>
195
+ </div>
196
+ <div class="text-center">
197
+ <div class="text-4xl font-black text-white mb-2">99.9%</div>
198
+ <div class="text-white/70 text-sm">Uptime SLA</div>
199
+ </div>
200
+ <div class="text-center">
201
+ <div class="text-4xl font-black text-white mb-2">50+</div>
202
+ <div class="text-white/70 text-sm">Global Clients</div>
203
+ </div>
204
+ <div class="text-center">
205
+ <div class="text-4xl font-black text-white mb-2">150+</div>
206
+ <div class="text-white/70 text-sm">Projects Delivered</div>
207
+ </div>
208
  </div>
209
  </div>
210
  </div>
211
+ <!-- Premium Services Section -->
212
+ <div class="relative py-32 bg-gradient-to-b from-gray-900 via-indigo-900 to-purple-900 overflow-hidden">
213
+ <div class="absolute inset-0 opacity-20 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC4wNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div>
214
+ <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
215
+ <div class="text-center">
216
+ <span class="inline-block px-6 py-3 text-sm font-black text-white bg-gradient-to-r from-indigo-600/20 to-purple-600/20 rounded-3xl p-12 backdrop-blur-sm border border-white/10">
217
+ <span class="text-base font-black text-white/90 tracking-widest uppercase">Enterprise Solutions</span>
218
+ <h2 class="mt-6 text-5xl tracking-tighter font-black text-white">
219
+ <span class="block">Premium Digital</span>
220
+ <span class="block gradient-text animated-gradient">Transformation Suite</span>
221
  </h2>
222
+ <p class="mt-8 max-w-4xl mx-auto text-2xl text-white/90">
223
+ Comprehensive enterprise solutions powered by cutting-edge technology and industry expertise.
224
+ </p>
225
+ </div>
226
  <div class="mt-10">
227
  <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
228
  <!-- Service 1 -->
 
306
  </div>
307
  </div>
308
  </div>
309
+ <!-- Premium Stats Section -->
310
+ <div class="relative bg-gradient-to-br from-gray-900 via-indigo-900 to-purple-900 overflow-hidden">
311
+ <div class="absolute inset-0">
312
+ <div class="absolute inset-0 bg-gradient-to-r from-indigo-600/30 via-purple-600/30 to-pink-600/30"></div>
313
+ </div>
314
+ <div class="max-w-8xl mx-auto py-20 px-4 sm:py-24 sm:px-6 lg:px-8">
315
+ <div class="grid grid-cols-2 lg:grid-cols-4 gap-12">
316
+ <!-- Stat 1 -->
317
+ <div class="text-center">
318
+ <div class="text-6xl font-black text-white mb-4">50M+</div>
319
+ <div class="text-white/80 text-lg">API Calls Daily</div>
320
+ </div>
321
+ <!-- Stat 2 -->
322
+ <div class="text-center">
323
+ <div class="text-6xl font-black text-white mb-4">99.95%</div>
324
+ <div class="text-white/80 text-lg">System Reliability</div>
325
+ </div>
326
+ <!-- Stat 3 -->
327
+ <div class="text-center">
328
+ <div class="text-6xl font-black text-white mb-4">150+</div>
329
+ <div class="text-white/80 text-lg">Enterprise Clients</div>
330
  </div>
331
+ <!-- Stat 4 -->
332
+ <div class="text-center">
333
+ <div class="text-6xl font-black text-white mb-4">24/7</div>
334
+ <div class="text-white/80 text-lg">Global Support</div>
335
  </div>
336
+ </div>
337
+ <!-- Real-time activity -->
338
+ <div class="mt-20 text-center">
339
+ <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-2xl p-8 backdrop-blur-sm border border-white/10 mt-12">
340
+ <div class="flex items-center justify-center">
341
+ <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
342
+ <span class="ml-3 text-white/90 text-lg">Active Projects: 47</span>
343
+ <div class="ml-6 w-2 h-2 bg-green-400 rounded-full"></div>
344
+ <div class="ml-6 w-2 h-2 bg-green-400 rounded-full"></div>
345
+ </div>
346
  </div>
347
  </div>
348
  </div>
349
  </div>
350
+ <!-- Testimonials -->
 
351
  <div class="bg-gray-50 py-16 lg:py-24">
352
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
353
  <div class="lg:text-center">
 
422
  </div>
423
  </div>
424
  </div>
425
+ <!-- Premium CTA Section -->
426
+ <div class="relative bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600 overflow-hidden">
427
+ <div class="absolute inset-0 opacity-20 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC4xIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIi8+PC9zdmc+')]"></div>
428
+ <div class="max-w-8xl mx-auto text-center py-24 px-4 sm:py-28 sm:px-6 lg:px-8">
429
+ <h2 class="text-5xl font-black text-white sm:text-6xl">
430
+ <span class="block">Ready for Digital Transformation?</span>
431
+ <span class="block gradient-text animated-gradient">Let's Create Excellence</span>
432
+ </h2>
433
+ <p class="mt-8 text-2xl text-white/90">
434
+ Schedule a comprehensive consultation with our enterprise architects and discover how our premium solutions can revolutionize your business operations.
435
+ </p>
436
+ <div class="mt-12 flex flex-col sm:flex-row justify-center gap-8">
437
+ <a href="contact.html" class="group relative px-12 py-6 text-2xl font-black rounded-full shadow-2xl transform hover:scale-110 transition-all duration-500 premium-glow">
438
+ <span class="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 px-12 py-6 text-2xl font-black rounded-full shadow-2xl text-white">
439
+ <span class="relative z-10">Schedule Enterprise Demo</span>
440
+ </span>
441
+ </a>
442
+ <a href="premium.html" class="group px-12 py-6 border-2 border-white/40 text-xl font-bold rounded-full bg-transparent hover:bg-white/10 text-white border-2 border-white/30 px-12 py-6 text-xl font-bold rounded-full hover:shadow-xl transition-all duration-300 glass-effect">
443
+ <span class="flex items-center">
444
+ <i data-feather="crown" class="w-6 h-6 mr-2"></i>
445
+ <span>Explore Premium Features</span>
446
+ </span>
447
+ </a>
448
+ </div>
449
+ <!-- Real-time booking availability -->
450
+ <div class="mt-16">
451
+ <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-2xl p-6 backdrop-blur-sm border border-white/10">
452
+ <div class="flex items-center">
453
+ <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
454
+ <span class="ml-3 text-white/90 text-lg">
455
+ Next available consultation: Today 2:00 PM EST
456
+ </span>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
  </div>
462
  </div>
463
+ <!-- Premium Footer -->
464
+ <footer class="relative bg-gradient-to-b from-gray-900 to-black overflow-hidden">
465
+ <div class="absolute inset-0 opacity-10 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC4wMiIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div>
466
+ <div class="max-w-8xl mx-auto py-20 px-4 sm:px-6 lg:px-8">
467
+ <div class="grid grid-cols-2 lg:grid-cols-5 gap-12">
468
+ <!-- Column 1 -->
469
+ <div>
470
+ <h3 class="text-lg font-black text-white tracking-tighter uppercase">Enterprise Solutions</h3>
471
+ <ul class="mt-8 space-y-4">
472
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white transition-all duration-300">AI & Machine Learning</a></li>
473
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Blockchain Services</a></li>
474
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">IoT Platforms</a></li>
475
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Quantum Computing</a></li>
476
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Extended Reality</a></li>
477
+ </ul>
478
+ </div>
479
+ <!-- Column 2 -->
480
  <div>
481
+ <h3 class="text-lg font-black text-white tracking-tighter uppercase">Technologies</h3>
482
+ <ul class="mt-8 space-y-4">
483
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Digital Twins</a></li>
484
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Edge Computing</a></li>
485
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">5G Integration</a></li>
486
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Metaverse</a></li>
487
  </ul>
488
  </div>
489
+ <!-- Column 3 -->
490
  <div>
491
+ <h3 class="text-lg font-black text-white tracking-tighter uppercase">Industries</h3>
492
+ <ul class="mt-8 space-y-4">
493
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Sustainability</a></li>
494
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Finance</a></li>
495
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Healthcare</a></li>
496
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Manufacturing</a></li>
497
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Retail</a></li>
498
  </ul>
499
  </div>
500
+ <!-- Column 4 -->
501
  <div>
502
+ <h3 class="text-lg font-black text-white tracking-tighter uppercase">Resources</h3>
503
+ <ul class="mt-8 space-y-4">
504
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Education</a></li>
505
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Case Studies</a></li>
506
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Whitepapers</a></li>
507
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Webinars</a></li>
508
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">API Documentation</a></li>
509
  </ul>
510
  </div>
511
+ <!-- Column 5 -->
512
  <div>
513
+ <h3 class="text-lg font-black text-white tracking-tighter uppercase">Company</h3>
514
+ <ul class="mt-8 space-y-4">
515
+ <li><a href="about.html" class="text-base text-white/80 hover:text-white">About Us</a></li>
516
+ <li><a href="contact.html" class="text-base text-white/80 hover:text-white">Leadership</a></li>
517
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Careers</a></li>
518
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Investor Relations</a></li>
519
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Partnerships</a></li>
520
+ <li><a href="services.html" class="text-base text-white/80 hover:text-white">Contact</a></li>
521
  </ul>
522
  </div>
523
  </div>
524
+ <div class="mt-16 border-t border-white/20 pt-16">
525
+ <div class="flex flex-col lg:flex-row justify-between items-center">
526
+ <div class="flex space-x-8">
527
+ <a href="#" class="text-white/80 hover:text-white transition-all duration-300">
528
+ <i data-feather="mail" class="w-5 h-5"></i>
529
+ <span class="text-white/90">Global Headquarters: San Francisco | New York | London | Tokyo</a>
530
+ </div>
531
+ <div class="flex space-x-6 mt-8 lg:mt-0">
532
+ <i data-feather="twitter" class="w-6 h-6"></i>
533
+ </a>
534
+ <a href="#" class="text-white/80 hover:text-white">
535
+ <i data-feather="linkedin" class="w-6 h-6"></i>
536
  </a>
537
+ <a href="#" class="text-white/80 hover:text-white">
538
+ <i data-feather="github" class="w-6 h-6"></i>
539
+ </a>
540
+ </div>
541
+ <div class="mt-8 lg:mt-0">
542
+ <span class="text-white/80 text-sm">
543
+ © 2024 OOMIFY ENTERPRISE SOLUTIONS. ALL RIGHTS RESERVED.
544
+ </span>
545
+ </div>
546
+ </div>
547
  </div>
 
 
 
548
  </div>
549
  </div>
550
  </footer>
551
+ <!-- Premium Scripts -->
552
  <script>
553
  VANTA.GLOBE({
554
  el: "#vanta-bg",
 
560
  scale: 1.00,
561
  scaleMobile: 1.00,
562
  color: 0x6366f1,
563
+ backgroundColor: 0x0f172a,
564
+ size: 1.2
565
  });
566
  </script>
567
  <script>
568
+ // Initialize GSAP ScrollTrigger
569
+ gsap.registerPlugin(ScrollTrigger);
570
+
571
+ // Premium animations
572
+ document.addEventListener('DOMContentLoaded', () => {
573
+ // Enhanced animations
574
+ gsap.from('nav', {duration: 1, y: -100, opacity: 0, ease: 'power4.out'});
575
+
576
+ // Floating elements animation
577
+ gsap.to('.floating-animation', {
578
+ y: -20,
579
+ duration: 2,
580
+ repeat: -1,
581
+ yoyo: true,
582
+ ease: "power1.inOut"
583
+ });
584
+
585
+ // Staggered service cards
586
+ gsap.from('.service-card', {
587
+ scrollTrigger: {
588
+ trigger: '.service-card',
589
+ start: "top 85%",
590
+ toggleActions: "play none none reverse"
591
+ });
592
+ });
593
+
594
+ // Initialize Swiper
595
+ const swiper = new Swiper('.testimonial-swiper', {
596
+ effect: 'coverflow',
597
+ grabCursor: true,
598
+ centeredSlides: true,
599
+ slidesPerView: 'auto',
600
+ coverflowEffect: {
601
+ rotate: 50,
602
+ slideShadows: false,
603
+ stretch: 0,
604
+ depth: 100,
605
+ modifier: 1,
606
+ slideShadows: false,
607
+ loop: true,
608
+ autoplay: {
609
+ delay: 3000,
610
+ disableOnInteraction: false,
611
+ },
612
+ pagination: {
613
+ el: '.swiper-pagination',
614
+ clickable: true,
615
+ },
616
+ autoplay: {
617
+ delay: 5000,
618
+ },
619
+ breakpoints: {
620
+ 640: {
621
+ slidesPerView: 1,
622
+ spaceBetween: 20,
623
+ },
624
+ },
625
+ });
626
+
627
+ // Real-time data updates
628
+ function updateRealTimeStats() {
629
+ const stats = ['52M+', '99.97%', '160+', '48'];
630
+ document.querySelectorAll('.stat-number').forEach((element, index) => {
631
+ gsap.to(element, {
632
+ innerText: stats[index],
633
+ duration: 1,
634
+ snap: { innerText: 1 },
635
+ onUpdate: function() {
636
+ element.innerText = Math.floor(Math.random() * 10000) + 'K';
637
+ }, 5000);
638
+ });
639
+ }
640
+
641
+ // Initialize real-time stats
642
+ updateRealTimeStats();
643
+
644
+ // Dark mode toggle with enhanced effects
645
  const themeToggle = document.getElementById('theme-toggle');
646
  const themeIconDark = document.getElementById('theme-icon-dark');
647
  const themeIconLight = document.getElementById('theme-icon-light');
 
660
  localStorage.setItem('color-theme', 'light');
661
  themeIconLight.classList.add('hidden');
662
  themeIconDark.classList.remove('hidden');
663
+ gsap.to('body', {duration: 0.5, backgroundColor: '#ffffff'});
664
+ themeIconLight.classList.add('hidden');
665
+ themeIconDark.classList.remove('hidden');
666
  } else {
667
  document.documentElement.classList.add('dark');
668
  localStorage.setItem('color-theme', 'dark');
premium.html ADDED
@@ -0,0 +1,235 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Premium Solutions | OOMIFY Enterprise</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/ScrollTrigger.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .premium-gradient {
18
+ background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 25%, #EC4899 50%, #F59E0B 75%, #10B981 100%);
19
+ background-size: 400% 400%;
20
+ animation: premiumGradient 8s ease infinite;
21
+ }
22
+ @keyframes premiumGradient {
23
+ 0% { background-position: 0% 50%; }
24
+ 50% { background-position: 100% 50%; }
25
+ 100% { background-position: 0% 50%; }
26
+ }
27
+ .glass-morphism {
28
+ background: rgba(255, 255, 255, 0.1);
29
+ backdrop-filter: blur(20px);
30
+ border: 1px solid rgba(255, 255, 255, 0.2);
31
+ }
32
+ .hover-3d-premium {
33
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
34
+ }
35
+ .hover-3d-premium:hover {
36
+ transform: translateY(-15px) rotate3d(1, 0, 0, 5deg);
37
+ box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gradient-to-br from-gray-900 via-indigo-900 to-purple-900">
42
+ <!-- Premium Navigation -->
43
+ <nav class="glass-morphism border-b border-white/20 fixed w-full z-50">
44
+ <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
45
+ <div class="flex justify-between h-20 items-center">
46
+ <div class="flex items-center">
47
+ <a href="index.html" class="flex-shrink-0 flex items-center">
48
+ <span class="text-3xl font-black text-white tracking-tighter">OOMIFY</span>
49
+ </div>
50
+ <div class="hidden xl:block">
51
+ <div class="ml-12 flex items-baseline space-x-8">
52
+ <a href="index.html" class="text-white/80 hover:text-white px-4 py-2 text-lg font-semibold">Home</a>
53
+ <a href="services.html" class="text-white/80 hover:text-white px-4 py-2 text-lg font-semibold">Services</a>
54
+ <a href="projects.html" class="text-white/80 hover:text-white px-4 py-2 text-lg font-semibold">Projects</a>
55
+ <a href="about.html" class="text-white/80 hover:text-white px-4 py-2 text-lg font-semibold">About</a>
56
+ <a href="contact.html" class="text-white/80 hover:text-white px-4 py-2 text-lg font-semibold">Contact</a>
57
+ <a href="premium.html" class="text-yellow-300 font-black">PREMIUM</a>
58
+ <a href="auth.html" class="bg-gradient-to-r from-yellow-400 to-yellow-600 text-gray-900 px-6 py-2 text-lg font-bold rounded-full shadow-2xl">Client Portal</a>
59
+ </div>
60
+ <div class="flex items-center space-x-6">
61
+ <button id="theme-toggle" class="text-white/80 hover:text-white transition-all duration-300">
62
+ <i data-feather="moon" id="theme-icon-dark" class="hidden w-6 h-6"></i>
63
+ <i data-feather="sun" id="theme-icon-light" class="hidden w-6 h-6"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </nav>
68
+
69
+ <!-- Premium Hero -->
70
+ <div class="relative pt-40 pb-40 px-4 sm:px-6 lg:pt-52 lg:pb-52 lg:px-8">
71
+ <div class="max-w-8xl mx-auto text-center">
72
+ <div class="inline-block px-6 py-3 bg-gradient-to-r from-yellow-400/20 to-amber-400/20 rounded-3xl backdrop-blur-sm border border-white/10 p-16">
73
+ <span class="text-sm font-black text-white bg-gradient-to-r from-yellow-400 to-amber-400 rounded-full text-xs tracking-widest uppercase mb-8">ENTERPRISE GRADE</span>
74
+ <h1 class="text-7xl tracking-tighter font-black text-white sm:text-8xl md:text-9xl">
75
+ <span class="block">The Ultimate</span>
76
+ <span class="block premium-gradient bg-clip-text text-transparent">Digital Transformation</span>
77
+ <h1>
78
+ <p class="mt-12 text-3xl text-white/90">
79
+ Where <span class="font-black text-yellow-300">Vision</span> Meets <span class="font-black text-green-300">Reality</span>
80
+ </p>
81
+ <div class="mt-16">
82
+ <a href="contact.html" class="group relative px-16 py-8 text-3xl font-black rounded-full shadow-2xl transform hover:scale-110 transition-all duration-500" style="background: linear-gradient(135deg, #6366F1, #8B5CF6, #EC4899, #F59E0B, #10B981);">
83
+ <span class="relative z-10">Schedule Enterprise Demo</span>
84
+ </a>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Premium Features -->
91
+ <div class="relative py-32 bg-gradient-to-b from-gray-900 via-indigo-900 to-purple-900">
92
+ <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
93
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
94
+ <!-- Feature 1 -->
95
+ <div class="glass-morphism rounded-3xl p-12 text-center">
96
+ <div class="flex items-center justify-center h-24 w-24 rounded-2xl bg-gradient-to-br from-indigo-600/20 to-purple-600/20 rounded-3xl p-10">
97
+ <i data-feather="cpu" class="w-12 h-12 text-white"></i>
98
+ </div>
99
+ <h3 class="text-2xl font-black text-white">AI-Powered Analytics</h3>
100
+ <p class="mt-6 text-lg text-white/80">
101
+ Advanced machine learning algorithms providing real-time insights and predictive analytics.
102
+ </p>
103
+ </div>
104
+
105
+ <!-- Feature 2 -->
106
+ <div class="glass-morphism rounded-3xl p-12 text-center">
107
+ <div class="flex items-center justify-center h-24 w-24 rounded-2xl bg-gradient-to-br from-indigo-600/20 to-purple-600/20 rounded-3xl p-10">
108
+ <i data-feather="shield" class="w-12 h-12 text-white"></i>
109
+ </div>
110
+ <h3 class="text-2xl font-black text-white">Enterprise Security</h3>
111
+ <p class="mt-6 text-lg text-white/80">
112
+ Military-grade encryption and zero-trust architecture protecting your most sensitive data.
113
+ </p>
114
+ </div>
115
+
116
+ <!-- Feature 3 -->
117
+ <div class="glass-morphism rounded-3xl p-12 text-center">
118
+ <div class="flex items-center justify-center h-24 w-24 rounded-2xl bg-gradient-to-br from-indigo-600/20 to-purple-600/20 rounded-3xl p-10">
119
+ <i data-feather="cloud" class="w-12 h-12 text-white"></i>
120
+ </div>
121
+ <h3 class="text-2xl font-black text-white">Global Infrastructure</h3>
122
+ <p class="mt-6 text-lg text-white/80">
123
+ Multi-region deployment with 99.99% uptime guarantee.
124
+ </p>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Enterprise Solutions -->
129
+ <div class="relative py-32 bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900">
130
+ <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
131
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-20">
132
+ <!-- Solution 1 -->
133
+ <div class="glass-morphism rounded-3xl p-16">
134
+ <h2 class="text-4xl font-black text-white text-center">Quantum-Ready Architecture</h2>
135
+ <p class="mt-8 text-xl text-white/90">
136
+ Future-proof your infrastructure with quantum computing capabilities and post-quantum cryptography.
137
+ </p>
138
+ <ul class="mt-8 space-y-4">
139
+ <li class="flex items-center text-white/90">
140
+ <i data-feather="check" class="w-6 h-6 text-green-400 mr-3"></i>
141
+ <span>Quantum Algorithm Integration</span>
142
+ </li>
143
+ <li class="flex items-center text-white/90">
144
+ <i data-feather="check" class="w-6 h-6 text-green-400 mr-3"></i>
145
+ <span>Post-Quantum Cryptography</span>
146
+ </li>
147
+ <li class="flex items-center text-white/90">
148
+ <i data-feather="check" class="w-6 h-6 text-green-400 mr-3"></i>
149
+ <span>Quantum Machine Learning</span>
150
+ </li>
151
+ </ul>
152
+ </div>
153
+
154
+ <!-- Solution 2 -->
155
+ <div class="glass-morphism rounded-3xl p-16">
156
+ <h2 class="text-4xl font-black text-white text-center">Metaverse Integration</h2>
157
+ <p class="mt-8 text-xl text-white/90">
158
+ Seamlessly integrate your business operations into the metaverse with our cutting-edge XR solutions.
159
+ </p>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- CTA Section -->
164
+ <div class="relative py-32 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600">
165
+ <div class="max-w-8xl mx-auto text-center py-24 px-4 sm:py-28 sm:px-6 lg:px-8">
166
+ <h2 class="text-5xl font-black text-white">
167
+ <span class="block">Ready for the Next Generation?</span>
168
+ <span class="block premium-gradient bg-clip-text text-transparent">Transform Your Digital Future</span>
169
+ </h2>
170
+ <div class="mt-16">
171
+ <a href="contact.html" class="group px-20 py-10 text-4xl font-black rounded-full shadow-3xl transform hover:scale-115 transition-all duration-600">
172
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">Schedule Quantum Consultation</span>
173
+ </a>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Footer -->
179
+ <footer class="relative bg-gradient-to-b from-gray-900 to-black">
180
+ <div class="max-w-8xl mx-auto py-20 px-4 sm:px-6 lg:px-8">
181
+ <div class="text-center">
182
+ <p class="text-white/80 text-lg">
183
+ © 2024 OOMIFY ENTERPRISE SOLUTIONS. ALL RIGHTS RESERVED.
184
+ </p>
185
+ </div>
186
+ </footer>
187
+
188
+ <script>
189
+ // Premium animations
190
+ gsap.registerPlugin(ScrollTrigger);
191
+
192
+ document.addEventListener('DOMContentLoaded', () => {
193
+ // Enhanced entrance animations
194
+ gsap.from('nav', {duration: 1.2, y: -100, opacity: 0, ease: 'power4.out'});
195
+
196
+ // Floating animations
197
+ gsap.to('.floating-element', {
198
+ y: -30,
199
+ duration: 3,
200
+ repeat: -1,
201
+ yoyo: true,
202
+ ease: "power1.inOut"
203
+ });
204
+
205
+ // Dark mode with premium effects
206
+ const themeToggle = document.getElementById('theme-toggle');
207
+ const themeIconDark = document.getElementById('theme-icon-dark');
208
+ const themeIconLight = document.getElementById('theme-icon-light');
209
+
210
+ if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
211
+ document.documentElement.classList.add('dark');
212
+ themeIconLight.classList.remove('hidden');
213
+ } else {
214
+ document.documentElement.classList.remove('dark');
215
+ themeIconDark.classList.remove('hidden');
216
+ }
217
+
218
+ themeToggle.addEventListener('click', () => {
219
+ if (document.documentElement.classList.contains('dark')) {
220
+ document.documentElement.classList.remove('dark');
221
+ localStorage.setItem('color-theme', 'light');
222
+ themeIconLight.classList.add('hidden');
223
+ themeIconDark.classList.remove('hidden');
224
+ } else {
225
+ document.documentElement.classList.add('dark');
226
+ localStorage.setItem('color-theme', 'dark');
227
+ themeIconDark.classList.add('hidden');
228
+ themeIconLight.classList.remove('hidden');
229
+ }
230
+ });
231
+
232
+ feather.replace();
233
+ </script>
234
+ </body>
235
+ </html>