Hugging Face's logo

Spaces:
Hamado
/
iba-h
Running

App Files Community
Hamado commited on
Commit
22787e6
·
verified ·
1 Parent(s): 028f2da

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +596 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Iba H
3
- emoji: 📈
4
- colorFrom: purple
5
- colorTo: yellow
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: iba-h
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
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,596 @@
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>IBA H SERVICE - Business Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom animations */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ @keyframes float {
17
+ 0% { transform: translateY(0px); }
18
+ 50% { transform: translateY(-10px); }
19
+ 100% { transform: translateY(0px); }
20
+ }
21
+
22
+ .animate-fade-in {
23
+ animation: fadeIn 0.8s ease-out forwards;
24
+ }
25
+
26
+ .animate-float {
27
+ animation: float 3s ease-in-out infinite;
28
+ }
29
+
30
+ .delay-100 { animation-delay: 0.1s; }
31
+ .delay-200 { animation-delay: 0.2s; }
32
+ .delay-300 { animation-delay: 0.3s; }
33
+
34
+ /* Custom scrollbar */
35
+ ::-webkit-scrollbar {
36
+ width: 8px;
37
+ }
38
+
39
+ ::-webkit-scrollbar-track {
40
+ background: #f1f1f1;
41
+ }
42
+
43
+ ::-webkit-scrollbar-thumb {
44
+ background: #3b82f6;
45
+ border-radius: 4px;
46
+ }
47
+
48
+ /* Mobile menu transition */
49
+ .mobile-menu {
50
+ transition: all 0.3s ease;
51
+ }
52
+
53
+ /* Gradient text */
54
+ .gradient-text {
55
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
56
+ -webkit-background-clip: text;
57
+ background-clip: text;
58
+ color: transparent;
59
+ }
60
+
61
+ /* Custom button glow */
62
+ .btn-glow:hover {
63
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);
64
+ }
65
+
66
+ /* Custom card hover effect */
67
+ .card-hover:hover {
68
+ transform: translateY(-5px);
69
+ transition: all 0.3s ease;
70
+ }
71
+ </style>
72
+ </head>
73
+ <body class="font-sans bg-gray-50 text-gray-800">
74
+ <!-- Navigation -->
75
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77
+ <div class="flex justify-between h-16">
78
+ <div class="flex items-center">
79
+ <div class="flex-shrink-0 flex items-center">
80
+ <i class="fas fa-handshake text-blue-500 text-2xl mr-2"></i>
81
+ <span class="text-xl font-bold gradient-text">IBA H SERVICE</span>
82
+ </div>
83
+ <div class="hidden md:block">
84
+ <div class="ml-10 flex items-baseline space-x-4">
85
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-blue-600 bg-blue-50">Home</a>
86
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">Services</a>
87
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">Solutions</a>
88
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">Pricing</a>
89
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">Contact</a>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ <div class="hidden md:flex items-center">
94
+ <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 btn-glow">
95
+ Get Started
96
+ </button>
97
+ </div>
98
+ <div class="-mr-2 flex items-center md:hidden">
99
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
100
+ <span class="sr-only">Open main menu</span>
101
+ <i class="fas fa-bars"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Mobile menu -->
108
+ <div id="mobile-menu" class="mobile-menu hidden md:hidden bg-white border-t border-gray-200">
109
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
110
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600 bg-blue-50">Home</a>
111
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">Services</a>
112
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">Solutions</a>
113
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">Pricing</a>
114
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50">Contact</a>
115
+ <button class="w-full mt-2 px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 btn-glow">
116
+ Get Started
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </nav>
121
+
122
+ <!-- Hero Section -->
123
+ <div class="relative bg-white overflow-hidden">
124
+ <div class="max-w-7xl mx-auto">
125
+ <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
126
+ <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
127
+ <div class="sm:text-center lg:text-left">
128
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl animate-fade-in">
129
+ <span class="block">Premium Business</span>
130
+ <span class="block gradient-text">Services & Solutions</span>
131
+ </h1>
132
+ <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0 animate-fade-in delay-100">
133
+ IBA H SERVICE delivers exceptional business solutions tailored to your unique needs. Experience unparalleled service quality.
134
+ </p>
135
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start animate-fade-in delay-200">
136
+ <div class="rounded-md shadow">
137
+ <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-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 btn-glow">
138
+ Get started
139
+ </a>
140
+ </div>
141
+ <div class="mt-3 sm:mt-0 sm:ml-3">
142
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 md:py-4 md:text-lg md:px-10">
143
+ <i class="fas fa-play-circle mr-2"></i> Watch demo
144
+ </a>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </main>
149
+ </div>
150
+ </div>
151
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block">
152
+ <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full animate-float" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="Business meeting">
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Features Section -->
157
+ <div class="py-12 bg-gray-50">
158
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
+ <div class="lg:text-center">
160
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Advantages</h2>
161
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
162
+ Why Choose IBA H SERVICE
163
+ </p>
164
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
165
+ We combine innovation with reliability to deliver outstanding results.
166
+ </p>
167
+ </div>
168
+
169
+ <div class="mt-10">
170
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
171
+ <div class="relative group bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 animate-fade-in delay-100 card-hover">
172
+ <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
173
+ <div class="relative flex items-start">
174
+ <div class="flex-shrink-0 bg-blue-50 p-2 rounded-md">
175
+ <i class="fas fa-star text-blue-600 text-xl"></i>
176
+ </div>
177
+ <div class="ml-4">
178
+ <h3 class="text-lg font-medium text-gray-900">Premium Quality</h3>
179
+ <p class="mt-1 text-sm text-gray-500">
180
+ We deliver only the highest quality services with meticulous attention to detail.
181
+ </p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="relative group bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 animate-fade-in delay-200 card-hover">
187
+ <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
188
+ <div class="relative flex items-start">
189
+ <div class="flex-shrink-0 bg-blue-50 p-2 rounded-md">
190
+ <i class="fas fa-user-tie text-blue-600 text-xl"></i>
191
+ </div>
192
+ <div class="ml-4">
193
+ <h3 class="text-lg font-medium text-gray-900">Expert Team</h3>
194
+ <p class="mt-1 text-sm text-gray-500">
195
+ Our professionals have years of experience and industry-specific knowledge.
196
+ </p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="relative group bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 animate-fade-in delay-300 card-hover">
202
+ <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
203
+ <div class="relative flex items-start">
204
+ <div class="flex-shrink-0 bg-blue-50 p-2 rounded-md">
205
+ <i class="fas fa-lightbulb text-blue-600 text-xl"></i>
206
+ </div>
207
+ <div class="ml-4">
208
+ <h3 class="text-lg font-medium text-gray-900">Innovative Approach</h3>
209
+ <p class="mt-1 text-sm text-gray-500">
210
+ We constantly innovate to provide cutting-edge solutions for your business.
211
+ </p>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="relative group bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 animate-fade-in delay-400 card-hover">
217
+ <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
218
+ <div class="relative flex items-start">
219
+ <div class="flex-shrink-0 bg-blue-50 p-2 rounded-md">
220
+ <i class="fas fa-headset text-blue-600 text-xl"></i>
221
+ </div>
222
+ <div class="ml-4">
223
+ <h3 class="text-lg font-medium text-gray-900">Dedicated Support</h3>
224
+ <p class="mt-1 text-sm text-gray-500">
225
+ Our customer support team is available 24/7 to assist you with any questions.
226
+ </p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Stats Section -->
236
+ <div class="bg-blue-600">
237
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
238
+ <div class="max-w-4xl mx-auto text-center">
239
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
240
+ Trusted by Businesses Worldwide
241
+ </h2>
242
+ <p class="mt-3 text-xl text-blue-100 sm:mt-4">
243
+ IBA H SERVICE has helped companies across industries achieve their goals.
244
+ </p>
245
+ </div>
246
+ <div class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-3 sm:gap-8">
247
+ <div class="animate-fade-in delay-100">
248
+ <div class="text-5xl font-extrabold text-white">
249
+ 500+
250
+ </div>
251
+ <div class="mt-2 text-base font-medium text-blue-100">
252
+ Satisfied Clients
253
+ </div>
254
+ </div>
255
+ <div class="mt-10 sm:mt-0 animate-fade-in delay-200">
256
+ <div class="text-5xl font-extrabold text-white">
257
+ 95%
258
+ </div>
259
+ <div class="mt-2 text-base font-medium text-blue-100">
260
+ Retention Rate
261
+ </div>
262
+ </div>
263
+ <div class="mt-10 sm:mt-0 animate-fade-in delay-300">
264
+ <div class="text-5xl font-extrabold text-white">
265
+ 24/7
266
+ </div>
267
+ <div class="mt-2 text-base font-medium text-blue-100">
268
+ Support Availability
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Testimonials -->
276
+ <div class="bg-white py-16 lg:py-24">
277
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
278
+ <div class="lg:text-center">
279
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Client Testimonials</h2>
280
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
281
+ What Our Clients Say
282
+ </p>
283
+ </div>
284
+
285
+ <div class="mt-16 grid gap-8 lg:grid-cols-3">
286
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 animate-fade-in delay-100 card-hover">
287
+ <div class="flex items-center">
288
+ <div class="flex-shrink-0">
289
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
290
+ </div>
291
+ <div class="ml-4">
292
+ <div class="text-lg font-medium text-gray-900">Sarah Johnson</div>
293
+ <div class="text-blue-600">CEO, TechSolutions</div>
294
+ </div>
295
+ </div>
296
+ <div class="mt-4 text-gray-600">
297
+ <p>"IBA H SERVICE transformed our operations. Their innovative approach helped us increase efficiency by 40% in just six months."</p>
298
+ </div>
299
+ <div class="mt-4 flex text-yellow-400">
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ <i class="fas fa-star"></i>
303
+ <i class="fas fa-star"></i>
304
+ <i class="fas fa-star"></i>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 animate-fade-in delay-200 card-hover">
309
+ <div class="flex items-center">
310
+ <div class="flex-shrink-0">
311
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
312
+ </div>
313
+ <div class="ml-4">
314
+ <div class="text-lg font-medium text-gray-900">Michael Chen</div>
315
+ <div class="text-blue-600">Director, Global Corp</div>
316
+ </div>
317
+ </div>
318
+ <div class="mt-4 text-gray-600">
319
+ <p>"The expertise of IBA H SERVICE's team is unmatched. They delivered solutions that perfectly matched our complex requirements."</p>
320
+ </div>
321
+ <div class="mt-4 flex text-yellow-400">
322
+ <i class="fas fa-star"></i>
323
+ <i class="fas fa-star"></i>
324
+ <i class="fas fa-star"></i>
325
+ <i class="fas fa-star"></i>
326
+ <i class="fas fa-star-half-alt"></i>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 animate-fade-in delay-300 card-hover">
331
+ <div class="flex items-center">
332
+ <div class="flex-shrink-0">
333
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
334
+ </div>
335
+ <div class="ml-4">
336
+ <div class="text-lg font-medium text-gray-900">Emma Rodriguez</div>
337
+ <div class="text-blue-600">Founder, StartupX</div>
338
+ </div>
339
+ </div>
340
+ <div class="mt-4 text-gray-600">
341
+ <p>"As a startup, we needed affordable but premium services. IBA H SERVICE delivered beyond our expectations with their scalable solutions."</p>
342
+ </div>
343
+ <div class="mt-4 flex text-yellow-400">
344
+ <i class="fas fa-star"></i>
345
+ <i class="fas fa-star"></i>
346
+ <i class="fas fa-star"></i>
347
+ <i class="fas fa-star"></i>
348
+ <i class="far fa-star"></i>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- CTA Section -->
356
+ <div class="bg-gray-900">
357
+ <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">
358
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl animate-fade-in">
359
+ <span class="block">Ready to elevate your business?</span>
360
+ <span class="block text-blue-400">Contact IBA H SERVICE today.</span>
361
+ </h2>
362
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0 animate-fade-in delay-100">
363
+ <div class="inline-flex rounded-md shadow">
364
+ <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-blue-600 hover:bg-blue-700 btn-glow">
365
+ Get started
366
+ </a>
367
+ </div>
368
+ <div class="ml-3 inline-flex rounded-md shadow">
369
+ <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-gray-800 hover:bg-gray-700">
370
+ <i class="fas fa-phone-alt mr-2"></i> Contact us
371
+ </a>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Footer -->
378
+ <footer class="bg-gray-800">
379
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
380
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
381
+ <div class="space-y-8 xl:col-span-1">
382
+ <div class="flex items-center">
383
+ <i class="fas fa-handshake text-blue-500 text-2xl mr-2"></i>
384
+ <span class="text-xl font-bold text-white">IBA H SERVICE</span>
385
+ </div>
386
+ <p class="text-gray-300 text-base">
387
+ Delivering premium business services and solutions since 2010.
388
+ </p>
389
+ <div class="flex space-x-6">
390
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
391
+ <i class="fab fa-facebook-f"></i>
392
+ </a>
393
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
394
+ <i class="fab fa-twitter"></i>
395
+ </a>
396
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
397
+ <i class="fab fa-instagram"></i>
398
+ </a>
399
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
400
+ <i class="fab fa-linkedin-in"></i>
401
+ </a>
402
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
403
+ <i class="fab fa-youtube"></i>
404
+ </a>
405
+ </div>
406
+ </div>
407
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
408
+ <div class="md:grid md:grid-cols-2 md:gap-8">
409
+ <div>
410
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
411
+ Services
412
+ </h3>
413
+ <ul class="mt-4 space-y-4">
414
+ <li>
415
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
416
+ Business Consulting
417
+ </a>
418
+ </li>
419
+ <li>
420
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
421
+ Digital Transformation
422
+ </a>
423
+ </li>
424
+ <li>
425
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
426
+ Process Optimization
427
+ </a>
428
+ </li>
429
+ <li>
430
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
431
+ Strategic Planning
432
+ </a>
433
+ </li>
434
+ </ul>
435
+ </div>
436
+ <div class="mt-12 md:mt-0">
437
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
438
+ Support
439
+ </h3>
440
+ <ul class="mt-4 space-y-4">
441
+ <li>
442
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
443
+ Pricing Plans
444
+ </a>
445
+ </li>
446
+ <li>
447
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
448
+ Documentation
449
+ </a>
450
+ </li>
451
+ <li>
452
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
453
+ Help Center
454
+ </a>
455
+ </li>
456
+ <li>
457
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
458
+ Contact Support
459
+ </a>
460
+ </li>
461
+ </ul>
462
+ </div>
463
+ </div>
464
+ <div class="md:grid md:grid-cols-2 md:gap-8">
465
+ <div>
466
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
467
+ Company
468
+ </h3>
469
+ <ul class="mt-4 space-y-4">
470
+ <li>
471
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
472
+ About Us
473
+ </a>
474
+ </li>
475
+ <li>
476
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
477
+ Our Team
478
+ </a>
479
+ </li>
480
+ <li>
481
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
482
+ Careers
483
+ </a>
484
+ </li>
485
+ <li>
486
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
487
+ Press
488
+ </a>
489
+ </li>
490
+ </ul>
491
+ </div>
492
+ <div class="mt-12 md:mt-0">
493
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
494
+ Legal
495
+ </h3>
496
+ <ul class="mt-4 space-y-4">
497
+ <li>
498
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
499
+ Privacy Policy
500
+ </a>
501
+ </li>
502
+ <li>
503
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
504
+ Terms of Service
505
+ </a>
506
+ </li>
507
+ <li>
508
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
509
+ Cookie Policy
510
+ </a>
511
+ </li>
512
+ <li>
513
+ <a href="#" class="text-base text-gray-400 hover:text-white transition-colors duration-300">
514
+ GDPR Compliance
515
+ </a>
516
+ </li>
517
+ </ul>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
523
+ <p class="text-base text-gray-400">
524
+ &copy; 2023 IBA H SERVICE. All rights reserved.
525
+ </p>
526
+ <div class="mt-4 md:mt-0 flex space-x-6">
527
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 text-sm">
528
+ Sitemap
529
+ </a>
530
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 text-sm">
531
+ Accessibility
532
+ </a>
533
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 text-sm">
534
+ Status
535
+ </a>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </footer>
540
+
541
+ <script>
542
+ // Mobile menu toggle
543
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
544
+ const menu = document.getElementById('mobile-menu');
545
+ if (menu.classList.contains('hidden')) {
546
+ menu.classList.remove('hidden');
547
+ } else {
548
+ menu.classList.add('hidden');
549
+ }
550
+ });
551
+
552
+ // Smooth scrolling for anchor links
553
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
554
+ anchor.addEventListener('click', function (e) {
555
+ e.preventDefault();
556
+
557
+ const targetId = this.getAttribute('href');
558
+ if (targetId === '#') return;
559
+
560
+ const targetElement = document.querySelector(targetId);
561
+ if (targetElement) {
562
+ targetElement.scrollIntoView({
563
+ behavior: 'smooth'
564
+ });
565
+ }
566
+ });
567
+ });
568
+
569
+ // Add animation class when elements come into view
570
+ const observerOptions = {
571
+ threshold: 0.1
572
+ };
573
+
574
+ const observer = new IntersectionObserver((entries, observer) => {
575
+ entries.forEach(entry => {
576
+ if (entry.isIntersecting) {
577
+ entry.target.classList.add('animate-fade-in');
578
+ observer.unobserve(entry.target);
579
+ }
580
+ });
581
+ }, observerOptions);
582
+
583
+ document.querySelectorAll('.animate-fade-in').forEach(element => {
584
+ observer.observe(element);
585
+ });
586
+
587
+ // Add hover effects to cards
588
+ const cards = document.querySelectorAll('.card-hover');
589
+ cards.forEach(card => {
590
+ card.addEventListener('mouseenter', () => {
591
+ card.style.transition = 'all 0.3s ease';
592
+ });
593
+ });
594
+ </script>
595
+ <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=Hamado/iba-h" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
596
+ </html>