-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcorporate.html
More file actions
765 lines (681 loc) · 49.9 KB
/
corporate.html
File metadata and controls
765 lines (681 loc) · 49.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corporate Template - Enhanced Design</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<!-- Include Animation CSS for fadeIn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
body {
font-family: 'Poppins', sans-serif;
}
/* Keyframes for animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.fade-in {
animation: fadeIn 2s ease-out;
}
.bounce {
animation: bounce 1s infinite;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<header class=" fixed w-full z-50 bg-[#02062575]">
<div class="container mx-auto flex justify-between items-center py-4 px-6">
<!-- Logo Section -->
<div class="text-2xl font-bold text-white">
<a href="#" class="hover:text-blue-200">CorporateLogo</a>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex space-x-8 text-white">
<a href="#home" class="hover:text-yellow-300">Home</a>
<a href="#about" class="hover:text-yellow-300">About Us</a>
<a href="#services" class="hover:text-yellow-300">Services</a>
<a href="#portfolio" class="hover:text-yellow-300">Portfolio</a>
<a href="#contact" class="hover:text-yellow-300">Contact</a>
</nav>
<!-- Search Box and Newsletter Button -->
<div class="hidden md:flex items-center space-x-6">
<!-- Search Box -->
<div class="flex items-center bg-[#ffffffba] p-2 rounded-full shadow-md">
<input type="text" placeholder="Search..." class="px-4 py-2 rounded-full text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500" />
<button class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17l-4-4m0 0l-4-4m4 4h8m-8 4v-8m0 4l-4-4m0 0l-4 4"></path>
</svg>
</button>
</div>
<!-- Newsletter Button -->
<button class="bg-yellow-500 text-white py-2 px-6 rounded-full hover:bg-yellow-400 focus:outline-none">
Subscribe
</button>
</div>
<div class="md:hidden">
<button id="menu-toggle" class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</header>
<!-- Hero Section with Slider -->
<section id="home" class="relative bg-cover bg-center h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-gray-900 opacity-50"></div>
<div class="swiper-container absolute inset-0 z-0">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('assets/1.jpg');"></div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('assets/2.jpg');"></div>
</div>
<!-- Slide 3 -->
<div class="swiper-slide">
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('assets/3.jpg');"></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="container mx-auto text-center relative z-10">
<!-- Heading with Static Text and Animation -->
<h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6 animate__animated animate__fadeIn animate__delay-1s">
<span class="text-indigo-600">Empowering</span> <span class="text-teal-600">Your</span> <span class="text-orange-600">Business</span>
</h1>
<!-- Subheading with Animation -->
<p class="text-lg md:text-xl text-gray-600 mb-10 animate__animated animate__fadeIn animate__delay-2s">
We provide innovative solutions to help your business grow. Let us help you reach new heights.
</p>
<!-- Button with Hover Effect and Animation -->
<a href="#services" class="px-8 py-3 bg-gradient-to-r from-teal-500 via-blue-500 to-indigo-500 text-white rounded-lg shadow-lg hover:bg-gradient-to-r hover:from-teal-600 hover:via-blue-600 hover:to-indigo-600 transition transform hover:scale-105 animate__animated animate__fadeIn animate__delay-3s">
Explore Services
</a>
</div>
<div class="absolute bottom-10 animate-bounce z-10">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</section>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
effect: 'fade',
fadeEffect: {
crossFade: true
}
});
</script>
<!-- Services Section -->
<section id="services" class="py-16 bg-gradient-to-r from-blue-900 to-teal-900 bg-fixed bg-cover" style="background-image: url('assets/1.jpg');">
<div class="container mx-auto text-center mb-12 fade-in">
<h2 class="text-4xl font-extrabold text-white mb-4">Our Services</h2>
<p class="text-white text-lg mb-6">We offer a wide range of professional services to meet your needs.</p>
</div>
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Service Card -->
<div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-2xl transition transform hover:scale-105 hover:bg-blue-100">
<div class="bg-gradient-to-r from-teal-500 to-blue-500 p-4 rounded-full w-20 h-20 mx-auto mb-6 flex items-center justify-center">
<svg class="w-12 h-12 text-white animate-bounce" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2z"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Consulting</h3>
<p class="text-gray-600 text-lg">Expert consulting to help your business reach its full potential with tailored strategies.</p>
</div>
<!-- More service cards... -->
<div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-2xl transition transform hover:scale-105 hover:bg-teal-100">
<div class="bg-gradient-to-r from-purple-500 to-indigo-600 p-4 rounded-full w-20 h-20 mx-auto mb-6 flex items-center justify-center">
<svg class="w-12 h-12 text-white animate-bounce" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2z"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Web Design</h3>
<p class="text-gray-600 text-lg">Creative and responsive web design that drives results and enhances user experience.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-2xl transition transform hover:scale-105 hover:bg-pink-100">
<div class="bg-gradient-to-r from-pink-500 to-red-500 p-4 rounded-full w-20 h-20 mx-auto mb-6 flex items-center justify-center">
<svg class="w-12 h-12 text-white animate-bounce" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2z"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Digital Marketing</h3>
<p class="text-gray-600 text-lg">Effective digital marketing strategies that bring your brand to the forefront of your industry.</p>
</div>
</div>
</section>
<!-- About Us Section -->
<section id="about" class="py-16 bg-gradient-to-r from-blue-500 to-teal-500 text-white bg-fixed bg-cover" style="background-image: url('assets/2.jpg');">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 fade-in">
<!-- Left Column: Text Content -->
<div class="flex flex-col justify-center px-6 md:px-0">
<h2 class="text-4xl font-extrabold text-white mb-4 leading-tight">About Us</h2>
<p class="text-lg text-gray-200 mb-6">We are a team of professionals dedicated to helping businesses achieve their goals through innovative solutions. Our mission is to provide top-notch services that empower businesses and transform their operations.</p>
<a href="#"
class="px-8 py-4 bg-blue-700 text-white rounded-full shadow-lg hover:bg-blue-800 transition duration-300 transform hover:scale-105 flex items-center justify-center">
Learn More
<svg class="w-6 h-6 ml-3 animate-pulse" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M10 17l6-5-6-5v10z"></path>
</svg>
</a>
</div>
<!-- Right Column: Image -->
<div class="relative">
<img src="assets/2.jpg" alt="About Us" class="rounded-xl shadow-xl transition duration-300 transform hover:scale-105">
<a href="#"
class="absolute inset-0 flex items-center justify-center bg-gradient-to-r from-blue-900 via-transparent to-blue-900 opacity-40 hover:opacity-60 text-white rounded-xl transition-all">
<svg class="w-16 h-16 opacity-80 hover:opacity-100" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M10 17l6-5-6-5v10z"></path>
</svg>
</a>
</div>
</div>
</section>
<!-- 3-Column Call to Action (CTA) Section -->
<section id="cta" class="py-16 bg-gradient-to-r from-teal-600 to-blue-800 text-white text-center bg-fixed bg-cover relative" style="background-image: url('assets/2.jpg'); background-size: cover; background-position: center;">
<!-- Overlay for background color -->
<div class="absolute inset-0 bg-[#02062575]"></div>
<div class="container mx-auto mb-12 relative z-20">
<h2 class="text-4xl font-extrabold text-white mb-6">Ready to Get Started?</h2>
<p class="text-lg mb-12 opacity-80">Take the first step toward transforming your business today. Let’s make it happen together!</p>
</div>
<div class="container mx-auto grid grid-cols-1 sm:grid-cols-3 gap-8 z-20">
<!-- CTA Column 1 -->
<div class="bg-white p-10 rounded-3xl shadow-2xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl hover:rotate-3 hover:translate-y-2 hover:bg-teal-100 hover:shadow-lg">
<div class="mb-6 flex justify-center">
<!-- Consulting Icon (SVG) -->
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-teal-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v3m0 12v3m9-9h-3m-12 0H3m16.5 7.5l-2.25 2.25M6.75 6.75L4.5 9M9 12a3 3 0 100 6 3 3 0 000-6z"/>
</svg>
</div>
<h3 class="text-3xl font-semibold text-teal-600 mb-6 transition-all duration-300">Consulting</h3>
<p class="text-gray-700 mb-6 text-lg opacity-80 transition-all duration-300">Our expert consultants are ready to guide your business through every challenge.</p>
<a href="#!" class="text-teal-600 font-medium hover:text-teal-800 transition-all duration-300 text-lg">Start Your Consultation</a>
</div>
<!-- CTA Column 2 -->
<div class="bg-white p-10 rounded-3xl shadow-2xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl hover:rotate-3 hover:translate-y-2 hover:bg-teal-100 hover:shadow-lg">
<div class="mb-6 flex justify-center">
<!-- Web Design Icon (SVG) -->
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-teal-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 3H5c-1.1 0-1.99.89-1.99 1.99L3 19c0 1.1.89 1.99 1.99 1.99h14c1.1 0 1.99-.89 1.99-1.99L21 5c0-1.1-.89-1.99-1.99-1.99zM5 19V5h14v14H5z"/>
</svg>
</div>
<h3 class="text-3xl font-semibold text-teal-600 mb-6 transition-all duration-300">Web Design</h3>
<p class="text-gray-700 mb-6 text-lg opacity-80 transition-all duration-300">Let us design a stunning website that delivers seamless user experience and results.</p>
<a href="#!" class="text-teal-600 font-medium hover:text-teal-800 transition-all duration-300 text-lg">Get Your Website</a>
</div>
<!-- CTA Column 3 -->
<div class="bg-white p-10 rounded-3xl shadow-2xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl hover:rotate-3 hover:translate-y-2 hover:bg-teal-100 hover:shadow-lg">
<div class="mb-6 flex justify-center">
<!-- Marketing Icon (SVG) -->
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-teal-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 2v7l5-5m-5 5H4l5 5-5 5h9v-7l5 5-5-5h4l-5-5z"/>
</svg>
</div>
<h3 class="text-3xl font-semibold text-teal-600 mb-6 transition-all duration-300">Marketing</h3>
<p class="text-gray-700 mb-6 text-lg opacity-80 transition-all duration-300">Boost your business growth with our strategic marketing services and campaigns.</p>
<a href="#!" class="text-teal-600 font-medium hover:text-teal-800 transition-all duration-300 text-lg">Boost My Business</a>
</div>
</div>
</section>
<!-- Tailwind CSS Enhancements for Hover Effects -->
<style>
.transform:hover {
transform: translateY(-10px) scale(1.05);
}
.shadow-2xl {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
}
.hover:scale-105:hover {
transform: scale(1.05);
}
.hover:rotate-3:hover {
transform: rotate(3deg);
}
.hover:translate-y-2:hover {
transform: translateY(2px);
}
</style>
<!-- Portfolio Section -->
<section id="portfolio" class="py-16 bg-gradient-to-r from-teal-600 to-blue-800 text-white bg-fixed bg-cover" style="background-image: url('assets/1.jpg'); background-color: #02062575;">
<div class="container mx-auto text-center mb-12 fade-in">
<h2 class="text-4xl font-extrabold text-white mb-4">Our Portfolio</h2>
<p class="text-lg mb-6 opacity-80">A glimpse into our past projects and the impactful results we’ve delivered to our clients.</p>
</div>
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Portfolio Card -->
<div class="bg-white p-6 rounded-2xl shadow-xl hover:shadow-2xl transition transform hover:scale-105 hover:bg-teal-100">
<img src="assets/1.jpg" alt="Portfolio Item 1" class="w-full h-64 object-cover rounded-lg mb-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-semibold text-gray-800">Project One</h3>
<span class="text-sm text-gray-500">July 12, 2024</span>
</div>
<div class="flex items-center mb-4">
<span class="text-teal-500 font-semibold">Rating:</span>
<div class="flex ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-gray-300 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
</div>
</div>
<p class="text-gray-600 text-lg mb-6">A creative project designed to transform user experiences, showcasing innovation and vision.</p>
<a href="#!" class="bg-teal-600 text-white py-2 px-6 rounded-full hover:bg-teal-700 focus:outline-none transition duration-200 transform hover:scale-105">View Details</a>
</div>
<!-- Portfolio Card -->
<div class="bg-white p-6 rounded-2xl shadow-xl hover:shadow-2xl transition transform hover:scale-105 hover:bg-teal-100">
<img src="assets/2.jpg" alt="Portfolio Item 2" class="w-full h-64 object-cover rounded-lg mb-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-semibold text-gray-800">Project Two</h3>
<span class="text-sm text-gray-500">July 20, 2024</span>
</div>
<div class="flex items-center mb-4">
<span class="text-teal-500 font-semibold">Rating:</span>
<div class="flex ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-gray-300 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
</div>
</div>
<p class="text-gray-600 text-lg mb-6">A strategic design solution that increased engagement and improved performance for the client.</p>
<a href="#!" class="bg-teal-600 text-white py-2 px-6 rounded-full hover:bg-teal-700 focus:outline-none transition duration-200 transform hover:scale-105">View Details</a>
</div>
<!-- Portfolio Card -->
<div class="bg-white p-6 rounded-2xl shadow-xl hover:shadow-2xl transition transform hover:scale-105 hover:bg-teal-100">
<img src="assets/3.jpg" alt="Portfolio Item 3" class="w-full h-64 object-cover rounded-lg mb-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-semibold text-gray-800">Project Three</h3>
<span class="text-sm text-gray-500">August 5, 2024</span>
</div>
<div class="flex items-center mb-4">
<span class="text-teal-500 font-semibold">Rating:</span>
<div class="flex ml-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-yellow-400 w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
</div>
</div>
<p class="text-gray-600 text-lg mb-6">A successful launch with results exceeding expectations, leveraging both creativity and technical skills.</p>
<a href="#!" class="bg-teal-600 text-white py-2 px-6 rounded-full hover:bg-teal-700 focus:outline-none transition duration-200 transform hover:scale-105">View Details</a>
</div>
</div>
</section>
<!-- Blog Section -->
<section id="blog" class="py-16 bg-gradient-to-r from-teal-600 to-blue-800 text-white bg-fixed bg-cover relative" style="background-image: url('assets/3.jpg'); background-size: cover; background-position: center;">
<!-- Background overlay -->
<div class="absolute top-0 left-0 w-full h-full bg-[#02062575] z-10"></div>
<div class="container mx-auto text-center mb-12 fade-in relative z-20">
<h2 class="text-4xl font-extrabold text-gray-800 mb-4 text-white">Our Blog</h2>
<p class="text-lg mb-6 opacity-80">Stay up to date with the latest insights, trends, and news in the industry.</p>
</div>
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 relative z-20">
<!-- Blog Post -->
<div class="bg-white p-6 rounded-2xl shadow-xl transform hover:scale-105 transition-all duration-300 ease-in-out">
<div class="relative">
<img src="assets/3.jpg" alt="Blog Post 1" class="w-full h-48 object-cover rounded-lg mb-6 transition-all duration-300 ease-in-out hover:opacity-80">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-black to-transparent rounded-lg opacity-40"></div>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-400">Published on <span class="font-semibold text-teal-500">July 12, 2024</span></span>
<span class="text-xs font-semibold text-teal-500 bg-teal-100 px-3 py-1 rounded-full">Web Design</span>
</div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">The Future of Web Design</h3>
<p class="text-gray-600 text-lg mb-4">Explore the exciting future trends in web design and how they’re shaping the user experience.</p>
<div class="text-center">
<a href="#!" class="bg-teal-600 text-white py-2 px-6 rounded-full hover:bg-teal-700 focus:outline-none transition duration-200 transform hover:scale-105">Read More</a>
</div>
</div>
<!-- Blog Post -->
<div class="bg-white p-6 rounded-2xl shadow-xl transform hover:scale-105 transition-all duration-300 ease-in-out">
<div class="relative">
<img src="assets/2.jpg" alt="Blog Post 2" class="w-full h-48 object-cover rounded-lg mb-6 transition-all duration-300 ease-in-out hover:opacity-80">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-black to-transparent rounded-lg opacity-40"></div>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-400">Published on <span class="font-semibold text-teal-500">July 20, 2024</span></span>
<span class="text-xs font-semibold text-teal-500 bg-teal-100 px-3 py-1 rounded-full">Digital Marketing</span>
</div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Digital Marketing Strategies</h3>
<p class="text-gray-600 text-lg mb-4">Learn about the most effective digital marketing strategies to boost your online presence.</p>
<div class="text-center">
<a href="#!" class="bg-teal-600 text-white py-2 px-6 rounded-full hover:bg-teal-700 focus:outline-none transition duration-200 transform hover:scale-105">Read More</a>
</div>
</div>
<!-- Blog Post -->
<div class="bg-white p-6 rounded-2xl shadow-xl transform hover:scale-105 transition-all duration-300 ease-in-out">
<div class="relative">
<img src="assets/1.jpg" alt="Blog Post 3" class="w-full h-48 object-cover rounded-lg mb-6 transition-all duration-300 ease-in-out hover:opacity-80">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-black to-transparent rounded-lg opacity-40"></div>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-400">Published on <span class="font-semibold text-teal-500">August 5, 2024</span></span>
<span class="text-xs font-semibold text-teal-500 bg-teal-100 px-3 py-1 rounded-full">UX/UI Design</span>
</div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Why UX/UI Matters</h3>
<p class="text-gray-600 text-lg mb-4">Understand the critical role UX/UI design plays in building user-friendly and successful websites.</p>
<div class="text-center">
<a href="#!" class="bg-teal-600 text-white py-2 px-6 rounded-full hover:bg-teal-700 focus:outline-none transition duration-200 transform hover:scale-105">Read More</a>
</div>
</div>
</div>
<!-- Load More Button -->
<div class="text-center mt-8">
<button class="bg-teal-600 text-white py-3 px-10 rounded-full hover:bg-teal-700 focus:outline-none transition duration-200 transform hover:scale-105">
Load More
</button>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-16 bg-gradient-to-r from-indigo-600 to-purple-700 text-white bg-fixed bg-cover" style="background-image: url('assets/3.jpg');">
<div class="container mx-auto text-center mb-12">
<h2 class="text-4xl font-extrabold text-white mb-4">What Our Clients Say</h2>
<p class="text-lg text-gray-200">Hear from our satisfied clients about their experiences with our services.</p>
</div>
<div class="container mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
<!-- Testimonial Card 1 -->
<div class="bg-white p-8 rounded-xl shadow-lg transform transition-all hover:scale-105 hover:shadow-2xl bg-indigo-100">
<div class="flex items-center mb-6">
<img src="https://via.placeholder.com/80x80" alt="Client" class="rounded-full shadow-lg border-4 border-indigo-500 mr-4">
<div>
<h3 class="text-xl font-semibold text-indigo-700">Jane Doe</h3>
<p class="text-sm text-gray-600">CEO, Company X</p>
<p class="text-sm text-gray-500 mt-1">Project: Web Development</p>
</div>
<!-- Rating on the right -->
<div class="ml-auto flex items-center">
<span class="text-yellow-500 font-semibold text-lg mr-2">4.8</span>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
</div>
</div>
</div>
<p class="text-gray-700 mb-4">"The team exceeded our expectations and delivered outstanding results. We highly recommend their services!"</p>
<p class="text-gray-600 text-sm mb-4">"Their dedication to understanding our needs and providing tailored solutions is unmatched. A pleasure to work with!"</p>
<a href="#!" class="bg-indigo-600 text-white py-2 px-6 rounded-full hover:bg-indigo-700 focus:outline-none transition duration-200 transform hover:scale-105">View Details</a>
</div>
<!-- Testimonial Card 2 -->
<div class="bg-white p-8 rounded-xl shadow-lg transform transition-all hover:scale-105 hover:shadow-2xl bg-purple-100">
<div class="flex items-center mb-6">
<img src="https://via.placeholder.com/80x80" alt="Client" class="rounded-full shadow-lg border-4 border-purple-500 mr-4">
<div>
<h3 class="text-xl font-semibold text-purple-700">John Smith</h3>
<p class="text-sm text-gray-600">Founder, Tech Co.</p>
<p class="text-sm text-gray-500 mt-1">Project: Mobile App</p>
</div>
<!-- Rating on the right -->
<div class="ml-auto flex items-center">
<span class="text-yellow-500 font-semibold text-lg mr-2">5.0</span>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
</div>
</div>
</div>
<p class="text-gray-700 mb-4">"Amazing experience! The team's professionalism and expertise were key to our success. I would definitely work with them again!"</p>
<p class="text-gray-600 text-sm mb-4">"A strong partner in our growth journey. They helped us launch new initiatives that generated more business." </p>
<a href="#!" class="bg-purple-600 text-white py-2 px-6 rounded-full hover:bg-purple-700 focus:outline-none transition duration-200 transform hover:scale-105">View Details</a>
</div>
<!-- Testimonial Card 3 -->
<div class="bg-white p-8 rounded-xl shadow-lg transform transition-all hover:scale-105 hover:shadow-2xl bg-red-100">
<div class="flex items-center mb-6">
<img src="https://via.placeholder.com/80x80" alt="Client" class="rounded-full shadow-lg border-4 border-red-500 mr-4">
<div>
<h3 class="text-xl font-semibold text-red-700">Alice Johnson</h3>
<p class="text-sm text-gray-600">Marketing Director, Brand Y</p>
<p class="text-sm text-gray-500 mt-1">Project: Digital Marketing</p>
</div>
<!-- Rating on the right -->
<div class="ml-auto flex items-center">
<span class="text-yellow-500 font-semibold text-lg mr-2">4.7</span>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03 5.46-4.73-7.19-.61L12 2 9.19 8.63l-7.19.61 5.46 4.73-1.64 7.03L12 17.27z"/></svg>
</div>
</div>
</div>
<p class="text-gray-700 mb-4">"A professional team that truly cares about the results. We saw significant improvements thanks to their efforts!"</p>
<p class="text-gray-600 text-sm mb-4">"We trust them with all our projects. They always bring innovative ideas and execute them perfectly."</p>
<a href="#!" class="bg-red-600 text-white py-2 px-6 rounded-full hover:bg-red-700 focus:outline-none transition duration-200 transform hover:scale-105">View Details</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-cover bg-fixed bg-center text-white" style="background-image: url('assets/1.jpg');">
<div class="container mx-auto text-center mb-12">
<h2 class="text-4xl font-extrabold text-white mb-4">Contact Us</h2>
<p class="text-lg text-gray-200 mb-6">Have any questions? Reach out to us for support or inquiries. We’re here to assist you.</p>
</div>
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">
<!-- Contact Form -->
<div class="bg-white p-8 rounded-xl shadow-xl transform transition-all hover:scale-105 hover:shadow-2xl max-w-lg mx-auto">
<h3 class="text-3xl font-semibold text-gray-800 mb-8 text-center">Send Us a Message</h3>
<form class="space-y-6">
<!-- Email Input -->
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
<div class="relative">
<input type="email" id="email" class="mt-2 p-4 w-full border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition duration-300 placeholder:text-gray-400 pr-12">
<span class="absolute inset-y-0 right-4 flex items-center text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
</span>
</div>
</div>
<!-- Message Textarea -->
<div class="mb-4">
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea id="message" rows="6" class="mt-2 p-4 w-full border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition duration-300 placeholder:text-gray-400"></textarea>
</div>
<!-- File Uploads (Image, Voice, PDF) -->
<div class="mb-4 flex space-x-4">
<div class="flex items-center justify-between w-full">
<label for="image-upload" class="flex items-center space-x-2 bg-teal-600 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-teal-700 transition duration-300 w-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
<span>Image</span>
</label>
<input type="file" id="image-upload" class="hidden" accept="image/*">
</div>
<div class="flex items-center justify-between w-full">
<label for="pdf-upload" class="flex items-center space-x-2 bg-teal-600 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-teal-700 transition duration-300 w-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m7-7H5"></path>
</svg>
<span>PDF</span>
</label>
<input type="file" id="pdf-upload" class="hidden" accept="application/pdf">
</div>
<div class="flex items-center justify-between w-full">
<label for="voice-upload" class="flex items-center space-x-2 bg-teal-600 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-teal-700 transition duration-300 w-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v10m5-5h-1a5 5 0 00-10 0H7a7 7 0 0114 0z"></path>
</svg>
<span>Voice</span>
</label>
<input type="file" id="voice-upload" class="hidden" accept="audio/*">
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="w-full px-6 py-3 bg-teal-600 text-white rounded-lg shadow-lg hover:bg-teal-700 transition duration-300 flex items-center justify-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m7-7H5"></path>
</svg>
<span>Send Message</span>
</button>
</form>
</div>
<!-- Google Map Embed Section -->
<!-- Google Map Embed Section with Modern and Premium Design -->
<div class="relative bg-gradient-to-r from-blue-50 to-white rounded-2xl shadow-xl overflow-hidden transition-transform transform hover:scale-105 hover:shadow-2xl mb-8">
<!-- Map Container with Title and Address Information -->
<div class="absolute inset-0 bg-gradient-to-t from-black opacity-40"></div> <!-- Overlay for modern touch -->
<div class="relative z-10 p-8 bg-white bg-opacity-80 rounded-2xl shadow-xl">
<h3 class="text-3xl font-bold text-gray-800 mb-6 text-center">Our Location</h3>
<p class="text-lg text-gray-600 mb-6 text-center max-w-2xl mx-auto">We are located in the heart of the city. Easily accessible by all modes of transport, our office is just a few steps away from major landmarks.</p>
<!-- Contact Information -->
<div class="text-sm text-gray-500 mb-6 text-center space-y-3">
<p><strong class="text-gray-800">Address:</strong> 123 Main Street, Melbourne, VIC 3000, Australia</p>
<p><strong class="text-gray-800">Phone:</strong> +61 3 1234 5678</p>
<p><strong class="text-gray-800">Email:</strong> contact@yourcompany.com</p>
</div>
</div>
<!-- Google Map Embed -->
<iframe class="w-full h-96 rounded-2xl transition-transform transform hover:scale-105"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093747!2d144.95373531531845!3d-37.81627977975171!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577f76f5f62f9b1!2z5ZCJ5YWo55uu!5e0!3m2!1szh-CN!2sau!4v1614915024496!5m2!1szh-CN!2sau"
allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</section>
<!-- Premium Footer with Modern Design and Icons -->
<footer class="bg-gradient-to-r from-teal-800 to-blue-900 text-white py-20 relative">
<!-- SVG Wave Background -->
<div class="absolute top-0 left-0 w-full overflow-hidden">
<svg class="absolute block w-full h-24 -mt-24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#ffffff" fill-opacity="0.1" d="M0,64L1440,160L1440,320L0,320Z"></path>
</svg>
</div>
<!-- Footer Content -->
<div class="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-12 pt-16 text-center md:text-left">
<!-- About Us Section -->
<div>
<h3 class="text-3xl font-semibold mb-4">About Us</h3>
<p class="text-lg opacity-80">We provide innovative solutions that empower businesses to thrive. Our team is dedicated to delivering exceptional results with a customer-first approach.</p>
</div>
<!-- Quick Links Section -->
<div>
<h3 class="text-3xl font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#home" class="text-lg hover:text-teal-400 transition duration-300">Home</a></li>
<li><a href="#services" class="text-lg hover:text-teal-400 transition duration-300">Services</a></li>
<li><a href="#portfolio" class="text-lg hover:text-teal-400 transition duration-300">Portfolio</a></li>
<li><a href="#contact" class="text-lg hover:text-teal-400 transition duration-300">Contact</a></li>
</ul>
</div>
<!-- Connect with Us Section -->
<div>
<h3 class="text-3xl font-semibold mb-4">Connect with Us</h3>
<div class="flex justify-center space-x-6 text-xl">
<!-- Social Media Icons -->
<a href="#" class="text-white hover:text-teal-400 transition duration-300">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 2H4c-1.104 0-2 .896-2 2v16c0 1.104.896 2 2 2h16c1.104 0 2-.896 2-2V4c0-1.104-.896-2-2-2zm-9 14H7v-4h4v4zm-2-5.2C7.895 9.8 7 8.9 7 7.8 7 6.7 7.895 5.8 8.8 5.8c1 0 1.8.9 1.8 2s-.8 2-1.8 2zm9 5.2h-4v-4h4v4zm0-5.2c-.9 0-1.8-.9-1.8-2s.8-2 1.8-2c.9 0 1.8.9 1.8 2 0 1.1-.8 2-1.8 2z"></path>
</svg>
</a>
<a href="#" class="text-white hover:text-teal-400 transition duration-300">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h18M3 12h18M3 20h18"></path>
</svg>
</a>
<a href="#" class="text-white hover:text-teal-400 transition duration-300">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 1 0 0 12.728A9 9 0 0 0 18.364 5.636z"></path>
</svg>
</a>
</div>
</div>
<!-- Newsletter Section -->
<div>
<h3 class="text-3xl font-semibold mb-4">Newsletter</h3>
<p class="text-lg opacity-80 mb-4">Stay updated with the latest news, trends, and special offers. Subscribe to our newsletter.</p>
<form class="flex justify-center space-x-2">
<input type="email" placeholder="Enter your email" class="px-4 py-2 w-64 rounded-lg border-2 border-teal-500 text-gray-800 focus:outline-none focus:ring-2 focus:ring-teal-500 transition duration-300">
<button type="submit" class="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition duration-300">Subscribe</button>
</form>
</div>
</div>
<!-- Footer Bottom Section -->
<div class="text-center mt-12 text-sm opacity-70">
<p>© 2024 Corporate Template. All Rights Reserved.</p>
</div>
</footer>
<!-- Mobile Navigation -->
<div id="mobile-menu" class="fixed inset-0 bg-gray-800 bg-opacity-75 hidden">
<div class="p-8">
<button id="close-menu" class="text-white mb-6 focus:outline-none">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<nav class="space-y-4 text-white">
<a href="#home" class="block text-xl">Home</a>
<a href="#about" class="block text-xl">About Us</a>
<a href="#services" class="block text-xl">Services</a>
<a href="#portfolio" class="block text-xl">Portfolio</a>
<a href="#contact" class="block text-xl">Contact</a>
</nav>
</div>
</div>
<!-- JavaScript for Animations & Menu -->
<script>
// Mobile menu toggle
document.getElementById('menu-toggle').addEventListener('click', function () {
document.getElementById('mobile-menu').classList.toggle('hidden');
});
document.getElementById('close-menu').addEventListener('click', function () {
document.getElementById('mobile-menu').classList.add('hidden');
});
// Animate elements on scroll using IntersectionObserver
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
});
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>
</body>
</html>