Hugging Face's logo

Spaces:
berkemert
/
global-shopper-express-qatar-edition
Running

App Files Community
berkemert commited on
Commit
5a134a2
·
verified ·
1 Parent(s): d90af23

Services

Browse files

Package Forwarding
Consolidation
Warehouse Storage
Personal Shopper
Company
About Us
Contact
Careers
Blog
Support
Help Center
Shipping Info
Returns
Privacy Policy
Terms of Service görünümünü daha da güzelleştir

Files changed (1) hide show
  1. components/footer.js +119 -38
components/footer.js CHANGED
@@ -3,68 +3,149 @@ class CustomFooter extends HTMLElement {
3
  this.attachShadow({ mode: 'open' });
4
  this.shadowRoot.innerHTML = `
5
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  .footer-link:hover {
7
  color: #D4AF37;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  }
9
  </style>
10
- <footer class="bg-primary text-white pt-16 pb-8">
11
- <div class="container mx-auto px-6">
12
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
13
  <div>
14
- <h3 class="text-xl font-bold mb-6">BavulumKatar'da</h3>
15
- <p class="text-white/80 mb-4">Your trusted partner for global shopping and delivery in Qatar.</p>
16
  <div class="flex space-x-4">
17
- <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
18
- <i data-feather="facebook" class="w-5 h-5"></i>
19
  </a>
20
- <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
21
- <i data-feather="twitter" class="w-5 h-5"></i>
22
  </a>
23
- <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
24
- <i data-feather="instagram" class="w-5 h-5"></i>
25
  </a>
26
- <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
27
- <i data-feather="linkedin" class="w-5 h-5"></i>
28
  </a>
29
- </div>
 
 
 
30
  </div>
31
  <div>
32
- <h4 class="text-lg font-semibold mb-6">Services</h4>
33
- <ul class="space-y-3">
34
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Package Forwarding</a></li>
35
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Consolidation</a></li>
36
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Warehouse Storage</a></li>
37
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Personal Shopper</a></li>
38
  </ul>
39
  </div>
 
40
  <div>
41
- <h4 class="text-lg font-semibold mb-6">Company</h4>
42
- <ul class="space-y-3">
43
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">About Us</a></li>
44
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Contact</a></li>
45
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Careers</a></li>
46
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Blog</a></li>
47
  </ul>
48
  </div>
 
49
  <div>
50
- <h4 class="text-lg font-semibold mb-6">Support</h4>
51
- <ul class="space-y-3">
52
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Help Center</a></li>
53
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Shipping Info</a></li>
54
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Returns</a></li>
55
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Privacy Policy</a></li>
56
- <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Terms of Service</a></li>
57
  </ul>
58
- </div>
59
- </div>
60
- <div class="border-t border-white/20 mt-12 pt-8 text-center text-white/80">
61
- <p>&copy; ${new Date().getFullYear()} BavulumKatar'da. All rights reserved.</p>
62
  </div>
 
 
 
 
 
 
 
 
 
 
63
  </div>
64
  <script>
65
  feather.replace();
66
  </script>
67
- </footer>
 
 
 
 
 
 
 
 
68
  `;
69
  }
70
  }
 
3
  this.attachShadow({ mode: 'open' });
4
  this.shadowRoot.innerHTML = `
5
  <style>
6
+ :host {
7
+ display: block;
8
+ font-family: 'Poppins', sans-serif;
9
+ }
10
+
11
+ .footer-container {
12
+ background: linear-gradient(135deg, #002366 0%, #001a4d 100%);
13
+ }
14
+
15
+ .footer-link {
16
+ position: relative;
17
+ transition: all 0.3s ease;
18
+ display: inline-block;
19
+ }
20
+
21
  .footer-link:hover {
22
  color: #D4AF37;
23
+ transform: translateX(5px);
24
+ }
25
+
26
+ .footer-link:before {
27
+ content: '';
28
+ position: absolute;
29
+ width: 0;
30
+ height: 2px;
31
+ bottom: -2px;
32
+ left: 0;
33
+ background-color: #D4AF37;
34
+ transition: width 0.3s ease;
35
+ }
36
+
37
+ .footer-link:hover:before {
38
+ width: 100%;
39
+ }
40
+
41
+ .social-icon {
42
+ transition: all 0.3s ease;
43
+ width: 20px;
44
+ height: 20px;
45
+ }
46
+
47
+ .social-icon:hover {
48
+ transform: translateY(-3px) scale(1.1);
49
+ }
50
+
51
+ .footer-divider {
52
+ border-color: rgba(255,255,255,0.15);
53
+ }
54
+
55
+ .footer-heading {
56
+ position: relative;
57
+ padding-bottom: 12px;
58
+ margin-bottom: 20px;
59
+ }
60
+
61
+ .footer-heading:after {
62
+ content: '';
63
+ position: absolute;
64
+ width: 50px;
65
+ height: 2px;
66
+ bottom: 0;
67
+ left: 0;
68
+ background: #D4AF37;
69
  }
70
  </style>
71
+ <footer class="footer-container text-white pt-16 pb-8">
72
+ <div class="container mx-auto px-6">
73
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 px-6">
74
  <div>
75
+ <h3 class="text-xl font-bold mb-6 footer-heading">BavulumKatar'da</h3>
76
+ <p class="text-white/80 mb-6 leading-relaxed">Your trusted partner for global shopping and delivery in Qatar.</p>
77
  <div class="flex space-x-4">
78
+ <a href="#" class="text-white/80 hover:text-secondary">
79
+ <i data-feather="facebook" class="social-icon"></i>
80
  </a>
81
+ <a href="#" class="text-white/80 hover:text-secondary">
82
+ <i data-feather="twitter" class="social-icon"></i>
83
  </a>
84
+ <a href="#" class="text-white/80 hover:text-secondary">
85
+ <i data-feather="instagram" class="social-icon"></i>
86
  </a>
87
+ <a href="#" class="text-white/80 hover:text-secondary">
88
+ <i data-feather="linkedin" class="social-icon"></i>
89
  </a>
90
+ <a href="#" class="text-white/80 hover:text-secondary">
91
+ <i data-feather="youtube" class="social-icon"></i>
92
+ </a>
93
+ </div>
94
  </div>
95
  <div>
96
+ <h4 class="text-lg font-semibold mb-6 footer-heading">Services</h4>
97
+ <ul class="space-y-4">
98
+ <li><a href="#" class="footer-link text-white/80">Package Forwarding</a></li>
99
+ <li><a href="#" class="footer-link text-white/80">Consolidation</a></li>
100
+ <li><a href="#" class="footer-link text-white/80">Warehouse Storage</a></li>
101
+ <li><a href="#" class="footer-link text-white/80">Personal Shopper</a></li>
102
  </ul>
103
  </div>
104
+
105
  <div>
106
+ <h4 class="text-lg font-semibold mb-6 footer-heading">Company</h4>
107
+ <ul class="space-y-4">
108
+ <li><a href="#" class="footer-link text-white/80">About Us</a></li>
109
+ <li><a href="#" class="footer-link text-white/80">Contact</a></li>
110
+ <li><a href="#" class="footer-link text-white/80">Careers</a></li>
111
+ <li><a href="#" class="footer-link text-white/80">Blog</a></li>
112
  </ul>
113
  </div>
114
+
115
  <div>
116
+ <h4 class="text-lg font-semibold mb-6 footer-heading">Support</h4>
117
+ <ul class="space-y-4">
118
+ <li><a href="#" class="footer-link text-white/80">Help Center</a></li>
119
+ <li><a href="#" class="footer-link text-white/80">Shipping Info</a></li>
120
+ <li><a href="#" class="footer-link text-white/80">Returns</a></li>
121
+ <li><a href="#" class="footer-link text-white/80">Privacy Policy</a></li>
122
+ <li><a href="#" class="footer-link text-white/80">Terms of Service</a></li>
123
  </ul>
124
+ </div>
 
 
 
125
  </div>
126
+ <div class="footer-divider border-t mt-12 pt-8 text-center text-white/60">
127
+ <p class="text-sm">&copy; ${new Date().getFullYear()} BavulumKatar'da. All rights reserved.</p>
128
+ <div class="mt-2 flex justify-center space-x-4">
129
+ <a href="#" class="text-xs text-white/60 hover:text-white">Privacy Policy</a>
130
+ <span class="text-white/40">|</span>
131
+ <a href="#" class="text-xs text-white/60 hover:text-white">Terms of Service</a>
132
+ <span class="text-white/40">|</span>
133
+ <a href="#" class="text-xs text-white/60 hover:text-white">Sitemap</a>
134
+ </div>
135
+ </div>
136
  </div>
137
  <script>
138
  feather.replace();
139
  </script>
140
+ <script>
141
+ // Replace feather icons
142
+ document.addEventListener('DOMContentLoaded', function() {
143
+ if (window.feather) {
144
+ feather.replace();
145
+ }
146
+ });
147
+ </script>
148
+ </footer>
149
  `;
150
  }
151
  }