Hugging Face's logo

Spaces:
hamadali
/
saad1
Running

App Files Community
hamadali commited on
Commit
a24fcd1
·
verified ·
1 Parent(s): 3ff599c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +568 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Saad1
3
- emoji: 🚀
4
  colorFrom: blue
5
- colorTo: indigo
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: saad1
3
+ emoji: 🐳
4
  colorFrom: blue
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,568 @@
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>Saad Ullah Buttar | Banking Professional</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
+ @keyframes fadeIn {
11
+ from { opacity: 0; transform: translateY(20px); }
12
+ to { opacity: 1; transform: translateY(0); }
13
+ }
14
+ .fade-in {
15
+ animation: fadeIn 0.8s ease-out forwards;
16
+ }
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #1a4b8c, #0a8fd6);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+ .card-hover {
24
+ transition: all 0.3s ease;
25
+ }
26
+ .card-hover:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 10px 25px rgba(10, 143, 214, 0.1);
29
+ }
30
+ .tab-active {
31
+ position: relative;
32
+ }
33
+ .tab-active::after {
34
+ content: '';
35
+ position: absolute;
36
+ bottom: -1px;
37
+ left: 0;
38
+ width: 100%;
39
+ height: 2px;
40
+ background: linear-gradient(90deg, #1a4b8c, #0a8fd6);
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50 font-sans">
45
+ <!-- Header -->
46
+ <header class="bg-white shadow-sm fixed w-full z-50">
47
+ <div class="container mx-auto px-6 py-4">
48
+ <div class="flex justify-between items-center">
49
+ <div class="flex items-center">
50
+ <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mr-3">
51
+ <i class="fas fa-university text-white text-xl"></i>
52
+ </div>
53
+ <h1 class="text-2xl font-bold gradient-text">Saad Ullah Buttar</h1>
54
+ </div>
55
+
56
+ <nav class="hidden md:flex space-x-8">
57
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">Home</a>
58
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">Services</a>
59
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">About</a>
60
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">Testimonials</a>
61
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">Contact</a>
62
+ </nav>
63
+
64
+ <div class="md:hidden">
65
+ <button id="mobile-menu-button" class="text-gray-600 hover:text-blue-600">
66
+ <i class="fas fa-bars text-2xl"></i>
67
+ </button>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Mobile Menu -->
73
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
74
+ <div class="container mx-auto px-6 py-4 flex flex-col space-y-4">
75
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">Home</a>
76
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">Services</a>
77
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">About</a>
78
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">Testimonials</a>
79
+ <a href="#" class="text-gray-700 font-medium hover:text-blue-600 transition">Contact</a>
80
+ <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-center font-medium hover:bg-blue-700 transition">Schedule Meeting</a>
81
+ </div>
82
+ </div>
83
+ </header>
84
+
85
+ <!-- Hero Section -->
86
+ <section class="pt-32 pb-20 bg-gradient-to-b from-blue-50 to-white">
87
+ <div class="container mx-auto px-6 flex flex-col lg:flex-row items-center">
88
+ <div class="lg:w-1/2 mb-12 lg:mb-0 fade-in">
89
+ <span class="text-sm font-medium text-blue-600 mb-2 inline-block">Senior Banking Officer</span>
90
+ <h2 class="text-4xl lg:text-5xl font-bold text-gray-800 mb-6 leading-tight">
91
+ Your Trusted <span class="gradient-text">Financial Advisor</span> for Wealth Management
92
+ </h2>
93
+ <p class="text-lg text-gray-600 mb-8 max-w-lg">
94
+ With over 12 years of banking experience, I help clients navigate complex financial landscapes and achieve their long-term financial goals.
95
+ </p>
96
+ <div class="flex space-x-4">
97
+ <a href="#" class="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition shadow-md">
98
+ Get Started <i class="fas fa-arrow-right ml-2"></i>
99
+ </a>
100
+ <a href="#" class="px-8 py-3 border border-blue-600 text-blue-600 rounded-lg font-medium hover:bg-blue-50 transition">
101
+ Learn More
102
+ </a>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="lg:w-1/2 flex justify-center fade-in" style="animation-delay: 0.3s;">
107
+ <div class="relative">
108
+ <img src="https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"
109
+ alt="Saad Ullah Buttar"
110
+ class="w-full max-w-md rounded-xl shadow-lg">
111
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-md">
112
+ <div class="flex items-center space-x-3">
113
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center">
114
+ <i class="fas fa-medal text-blue-600 text-xl"></i>
115
+ </div>
116
+ <div>
117
+ <p class="text-sm font-medium text-gray-500">Awards Won</p>
118
+ <p class="text-xl font-bold text-gray-800">12+</p>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Trusted By Section -->
128
+ <section class="py-12 bg-white">
129
+ <div class="container mx-auto px-6">
130
+ <p class="text-center text-gray-500 mb-8">Trusted by leading financial institutions</p>
131
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
132
+ <img src="https://logo.clearbit.com/hsbc.com" alt="HSBC" class="h-8">
133
+ <img src="https://logo.clearbit.com/standardchartered.com" alt="Standard Chartered" class="h-10">
134
+ <img src="https://logo.clearbit.com/citibank.com" alt="CitiBank" class="h-8">
135
+ <img src="https://logo.clearbit.com/ubl.com.pk" alt="UBL" class="h-10">
136
+ <img src="https://logo.clearbit.com/hbl.com" alt="HBL" class="h-10">
137
+ </div>
138
+ </div>
139
+ </section>
140
+
141
+ <!-- Services Section -->
142
+ <section class="py-20 bg-gray-50">
143
+ <div class="container mx-auto px-6">
144
+ <div class="text-center mb-16 fade-in">
145
+ <span class="text-sm font-medium text-blue-600">SERVICES</span>
146
+ <h2 class="text-3xl font-bold mt-2 text-gray-800">Customized <span class="gradient-text">Banking Solutions</span></h2>
147
+ <p class="max-w-2xl mx-auto text-gray-600 mt-4">Tailored financial services designed to meet your unique needs and objectives</p>
148
+ </div>
149
+
150
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
151
+ <!-- Service 1 -->
152
+ <div class="bg-white rounded-xl p-8 shadow-sm card-hover fade-in">
153
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
154
+ <i class="fas fa-chart-line text-blue-600 text-2xl"></i>
155
+ </div>
156
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Wealth Management</h3>
157
+ <p class="text-gray-600 mb-4">Comprehensive strategies for wealth preservation, growth, and transfer tailored to your goals.</p>
158
+ <ul class="space-y-2 text-gray-600 text-sm">
159
+ <li class="flex items-start">
160
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
161
+ <span>Investment portfolio analysis</span>
162
+ </li>
163
+ <li class="flex items-start">
164
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
165
+ <span>Retirement planning</span>
166
+ </li>
167
+ <li class="flex items-start">
168
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
169
+ <span>Tax-efficient strategies</span>
170
+ </li>
171
+ </ul>
172
+ </div>
173
+
174
+ <!-- Service 2 -->
175
+ <div class="bg-white rounded-xl p-8 shadow-sm card-hover fade-in" style="animation-delay: 0.2s;">
176
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
177
+ <i class="fas fa-hand-holding-usd text-blue-600 text-2xl"></i>
178
+ </div>
179
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Loan Advisory</h3>
180
+ <p class="text-gray-600 mb-4">Expert guidance to secure the most favorable loan terms for personal and business needs.</p>
181
+ <ul class="space-y-2 text-gray-600 text-sm">
182
+ <li class="flex items-start">
183
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
184
+ <span>Mortgage optimization</span>
185
+ </li>
186
+ <li class="flex items-start">
187
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
188
+ <span>Business financing solutions</span>
189
+ </li>
190
+ <li class="flex items-start">
191
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
192
+ <span>Debt restructuring</span>
193
+ </li>
194
+ </ul>
195
+ </div>
196
+
197
+ <!-- Service 3 -->
198
+ <div class="bg-white rounded-xl p-8 shadow-sm card-hover fade-in" style="animation-delay: 0.4s;">
199
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
200
+ <i class="fas fa-briefcase text-blue-600 text-2xl"></i>
201
+ </div>
202
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Business Banking</h3>
203
+ <p class="text-gray-600 mb-4">Specialized corporate banking services to streamline your business finances.</p>
204
+ <ul class="space-y-2 text-gray-600 text-sm">
205
+ <li class="flex items-start">
206
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
207
+ <span>Cash flow management</span>
208
+ </li>
209
+ <li class="flex items-start">
210
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
211
+ <span>Trade finance solutions</span>
212
+ </li>
213
+ <li class="flex items-start">
214
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
215
+ <span>Corporate credit facilities</span>
216
+ </li>
217
+ </ul>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </section>
222
+
223
+ <!-- About Section -->
224
+ <section class="py-20 bg-white">
225
+ <div class="container mx-auto px-6 flex flex-col lg:flex-row items-center">
226
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12 fade-in">
227
+ <img src="https://images.unsplash.com/photo-1573497491208-6b1acb260507?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
228
+ alt="Saad Ullah Buttar at work"
229
+ class="w-full rounded-xl shadow-lg">
230
+ </div>
231
+
232
+ <div class="lg:w-1/2 fade-in" style="animation-delay: 0.3s;">
233
+ <span class="text-sm font-medium text-blue-600 mb-2 inline-block">ABOUT ME</span>
234
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">12+ Years of <span class="gradient-text">Banking Excellence</span></h2>
235
+ <p class="text-gray-600 mb-6">
236
+ I'm Saad Ullah Buttar, a seasoned banking professional with extensive experience in retail banking, wealth management, and corporate finance. My mission is to provide clients with personalized financial solutions that align with their aspirations.
237
+ </p>
238
+
239
+ <div class="space-y-6 mb-8">
240
+ <div class="flex">
241
+ <div class="mr-6">
242
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center">
243
+ <i class="fas fa-award text-blue-600"></i>
244
+ </div>
245
+ </div>
246
+ <div>
247
+ <h4 class="font-bold text-gray-800 mb-2">Professional Certification</h4>
248
+ <p class="text-gray-600">Certified Financial Analyst (CFA) with specialized training from Harvard Business School.</p>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="flex">
253
+ <div class="mr-6">
254
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center">
255
+ <i class="fas fa-users text-blue-600"></i>
256
+ </div>
257
+ </div>
258
+ <div>
259
+ <h4 class="font-bold text-gray-800 mb-2">Client-Centric Approach</h4>
260
+ <p class="text-gray-600">Served over 500 satisfied clients with portfolios ranging from $50K to $5M+.</p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="bg-blue-50 rounded-xl p-6">
266
+ <div class="flex flex-col sm:flex-row sm:items-center">
267
+ <div class="flex items-center mb-4 sm:mb-0 sm:mr-8">
268
+ <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center">
269
+ <i class="fas fa-phone-alt text-white"></i>
270
+ </div>
271
+ <div class="ml-4">
272
+ <p class="text-sm text-gray-600">Ready to talk?</p>
273
+ <p class="font-bold text-gray-800">+92 300 1234567</p>
274
+ </div>
275
+ </div>
276
+ <a href="#" class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition text-center">
277
+ Schedule Consultation
278
+ </a>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </section>
284
+
285
+ <!-- Testimonials Section -->
286
+ <section class="py-20 bg-gray-50">
287
+ <div class="container mx-auto px-6">
288
+ <div class="text-center mb-16 fade-in">
289
+ <span class="text-sm font-medium text-blue-600">TESTIMONIALS</span>
290
+ <h2 class="text-3xl font-bold mt-2 text-gray-800">What My <span class="gradient-text">Clients Say</span></h2>
291
+ <p class="max-w-2xl mx-auto text-gray-600 mt-4">Hear from individuals and businesses who have benefitted from my financial advisory services</p>
292
+ </div>
293
+
294
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
295
+ <!-- Testimonial 1 -->
296
+ <div class="bg-white rounded-xl p-8 shadow-sm fade-in">
297
+ <div class="flex items-center mb-4">
298
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
299
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover">
300
+ </div>
301
+ <div>
302
+ <h4 class="font-bold text-gray-800">Ahmed Khan</h4>
303
+ <p class="text-sm text-gray-600">Business Owner</p>
304
+ </div>
305
+ </div>
306
+ <p class="text-gray-600 mb-4">
307
+ "Saad's strategic advice helped our company secure a loan with favorable terms that saved us thousands in interest payments. His deep industry knowledge is unmatched."
308
+ </p>
309
+ <div class="flex text-yellow-400">
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star"></i>
312
+ <i class="fas fa-star"></i>
313
+ <i class="fas fa-star"></i>
314
+ <i class="fas fa-star"></i>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Testimonial 2 -->
319
+ <div class="bg-white rounded-xl p-8 shadow-sm fade-in" style="animation-delay: 0.2s;">
320
+ <div class="flex items-center mb-4">
321
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
322
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-full h-full object-cover">
323
+ </div>
324
+ <div>
325
+ <h4 class="font-bold text-gray-800">Farah Siddiqui</h4>
326
+ <p class="text-sm text-gray-600">Private Investor</p>
327
+ </div>
328
+ </div>
329
+ <p class="text-gray-600 mb-4">
330
+ "Working with Saad transformed my investment approach. His personalized wealth management plan increased my portfolio by 22% in just 18 months."
331
+ </p>
332
+ <div class="flex text-yellow-400">
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ <i class="fas fa-star"></i>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Testimonial 3 -->
342
+ <div class="bg-white rounded-xl p-8 shadow-sm fade-in" style="animation-delay: 0.4s;">
343
+ <div class="flex items-center mb-4">
344
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
345
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-full h-full object-cover">
346
+ </div>
347
+ <div>
348
+ <h4 class="font-bold text-gray-800">Imran Sheikh</h4>
349
+ <p class="text-sm text-gray-600">CEO, Textile Firm</p>
350
+ </div>
351
+ </div>
352
+ <p class="text-gray-600 mb-4">
353
+ "Saad's corporate banking solutions streamlined our international transactions and reduced our operational costs significantly. A true professional."
354
+ </p>
355
+ <div class="flex text-yellow-400">
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star"></i>
359
+ <i class="fas fa-star"></i>
360
+ <i class="fas fa-star-half-alt"></i>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </section>
366
+
367
+ <!-- Contact Section -->
368
+ <section class="py-20 bg-blue-600 text-white">
369
+ <div class="container mx-auto px-6">
370
+ <div class="text-center mb-16 fade-in">
371
+ <span class="text-sm font-medium text-blue-200">GET IN TOUCH</span>
372
+ <h2 class="text-3xl font-bold mt-2">Schedule a <span class="text-blue-200">Consultation</span></h2>
373
+ <p class="max-w-2xl mx-auto text-blue-100 mt-4">I'm available for in-person meetings at my office or virtual consultations via Zoom</p>
374
+ </div>
375
+
376
+ <div class="grid lg:grid-cols-2 gap-12">
377
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden fade-in">
378
+ <div class="p-8">
379
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Contact Form</h3>
380
+ <form class="space-y-6">
381
+ <div>
382
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
383
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
384
+ </div>
385
+
386
+ <div>
387
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
388
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
389
+ </div>
390
+
391
+ <div>
392
+ <label for="service" class="block text-sm font-medium text-gray-700 mb-1">Service Interest</label>
393
+ <select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
394
+ <option value="">Select a service</option>
395
+ <option value="wealth">Wealth Management</option>
396
+ <option value="loans">Loan Advisory</option>
397
+ <option value="business">Business Banking</option>
398
+ <option value="other">Other</option>
399
+ </select>
400
+ </div>
401
+
402
+ <div>
403
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Your Message</label>
404
+ <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
405
+ </div>
406
+
407
+ <button type="submit" class="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">
408
+ Send Message <i class="fas fa-paper-plane ml-2"></i>
409
+ </button>
410
+ </form>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="fade-in" style="animation-delay: 0.3s;">
415
+ <div class="mb-8">
416
+ <h3 class="text-xl font-bold mb-4">Contact Information</h3>
417
+ <div class="space-y-4">
418
+ <div class="flex items-start">
419
+ <div class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center mt-1 mr-4">
420
+ <i class="fas fa-map-marker-alt text-blue-200"></i>
421
+ </div>
422
+ <div>
423
+ <p class="font-medium">Office Address</p>
424
+ <p class="text-blue-100">12th Floor, UBL Tower,</p>
425
+ <p class="text-blue-100">Jinnah Avenue, Islamabad, Pakistan</p>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="flex items-start">
430
+ <div class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center mt-1 mr-4">
431
+ <i class="fas fa-envelope text-blue-200"></i>
432
+ </div>
433
+ <div>
434
+ <p class="font-medium">Email Address</p>
435
+ <p class="text-blue-100">saad.buttar@example.com</p>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="flex items-start">
440
+ <div class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center mt-1 mr-4">
441
+ <i class="fas fa-phone-alt text-blue-200"></i>
442
+ </div>
443
+ <div>
444
+ <p class="font-medium">Phone Number</p>
445
+ <p class="text-blue-100">+92 300 1234567 (Mobile)</p>
446
+ <p class="text-blue-100">+92 51 2345678 (Office)</p>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <div>
453
+ <h3 class="text-xl font-bold mb-4">Office Hours</h3>
454
+ <div class="bg-blue-700 rounded-xl p-6">
455
+ <ul class="space-y-3">
456
+ <li class="flex justify-between">
457
+ <span class="text-blue-200">Monday - Friday</span>
458
+ <span class="font-medium">9:00 AM - 5:00 PM</span>
459
+ </li>
460
+ <li class="flex justify-between">
461
+ <span class="text-blue-200">Saturday</span>
462
+ <span class="font-medium">10:00 AM - 2:00 PM</span>
463
+ </li>
464
+ <li class="flex justify-between">
465
+ <span class="text-blue-200">Sunday</span>
466
+ <span class="font-medium">Closed</span>
467
+ </li>
468
+ </ul>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </section>
475
+
476
+ <!-- Footer -->
477
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
478
+ <div class="container mx-auto px-6">
479
+ <div class="grid md:grid-cols-4 gap-8 mb-12">
480
+ <div>
481
+ <h3 class="text-lg font-bold mb-4 flex items-center">
482
+ <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center mr-2">
483
+ <i class="fas fa-university text-xs"></i>
484
+ </div>
485
+ Saad Ullah Buttar
486
+ </h3>
487
+ <p class="text-gray-400 text-sm mb-4">Providing expert banking and financial advisory services with integrity and professionalism.</p>
488
+ <div class="flex space-x-4">
489
+ <a href="#" class="w-8 h-8 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition">
490
+ <i class="fab fa-linkedin-in"></i>
491
+ </a>
492
+ <a href="#" class="w-8 h-8 bg-gray-800 hover:bg-blue-400 rounded-full flex items-center justify-center transition">
493
+ <i class="fab fa-twitter"></i>
494
+ </a>
495
+ <a href="#" class="w-8 h-8 bg-gray-800 hover:bg-blue-800 rounded-full flex items-center justify-center transition">
496
+ <i class="fab fa-facebook-f"></i>
497
+ </a>
498
+ </div>
499
+ </div>
500
+
501
+ <div>
502
+ <h4 class="font-bold mb-4">Services</h4>
503
+ <ul class="space-y-2">
504
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Wealth Management</a></li>
505
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Loan Advisory</a></li>
506
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Business Banking</a></li>
507
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Retirement Planning</a></li>
508
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Investment Strategies</a></li>
509
+ </ul>
510
+ </div>
511
+
512
+ <div>
513
+ <h4 class="font-bold mb-4">Quick Links</h4>
514
+ <ul class="space-y-2">
515
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">About Me</a></li>
516
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Testimonials</a></li>
517
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">FAQs</a></li>
518
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Privacy Policy</a></li>
519
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Terms of Service</a></li>
520
+ </ul>
521
+ </div>
522
+
523
+ <div>
524
+ <h4 class="font-bold mb-4">Newsletter</h4>
525
+ <p class="text-gray-400 text-sm mb-4">Subscribe to receive financial tips and updates.</p>
526
+ <div class="flex">
527
+ <input type="email" placeholder="Your email" class="bg-gray-800 rounded-l-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 w-full">
528
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg text-sm transition">
529
+ <i class="fas fa-paper-plane"></i>
530
+ </button>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="pt-8 border-t border-gray-800 text-center text-sm text-gray-500">
536
+ <p>© 2023 Saad Ullah Buttar. All rights reserved.</p>
537
+ </div>
538
+ </div>
539
+ </footer>
540
+
541
+ <script>
542
+ // Mobile Menu Toggle
543
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
544
+ const mobileMenu = document.getElementById('mobile-menu');
545
+
546
+ mobileMenuButton.addEventListener('click', function() {
547
+ mobileMenu.classList.toggle('hidden');
548
+ });
549
+
550
+ // Fade animation on scroll
551
+ const fadeElements = document.querySelectorAll('.fade-in');
552
+
553
+ const fadeInOnScroll = function() {
554
+ fadeElements.forEach(element => {
555
+ const elementTop = element.getBoundingClientRect().top;
556
+ const windowHeight = window.innerHeight;
557
+
558
+ if (elementTop < windowHeight - 100) {
559
+ element.style.opacity = '1';
560
+ }
561
+ });
562
+ };
563
+
564
+ window.addEventListener('scroll', fadeInOnScroll);
565
+ window.addEventListener('load', fadeInOnScroll);
566
+ </script>
567
+ <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=hamadali/saad1" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
568
+ </html>