Hugging Face's logo

Spaces:
GXSNetwork
/
BlueTrans
Running

App Files Community
BlueTrans
File size: 3,870 Bytes
8c78f48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
797277b
8c78f48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
797277b
8c78f48
 
 
 
 
 
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
class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        footer {
          background: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(10px);
          color: #4a5568;
          padding: 3rem 2rem;
          text-align: center;
          margin-top: 4rem;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .footer-content {
          max-width: 1200px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 2rem;
          text-align: left;
        }
        
        .footer-column h3 {
          font-size: 1.2rem;
          font-weight: 700;
          margin-bottom: 1.5rem;
          background: linear-gradient(to right, #9a6bff, #ff6b9a);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        
        .footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        
        .footer-links li {
          margin-bottom: 0.75rem;
        }
        
        .footer-links a {
          color: #4a5568;
          text-decoration: none;
          transition: color 0.3s ease;
        }
        
        .footer-links a:hover {
          color: #9a6bff;
        }
        
        .social-links {
          display: flex;
          gap: 1rem;
          justify-content: center;
          margin-top: 2rem;
        }
        
        .social-links a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: linear-gradient(to right, #9a6bff, #ff6b9a);
          color: white;
          transition: transform 0.3s ease;
        }
        
        .social-links a:hover {
          transform: translateY(-5px);
        }
        
        .copyright {
          margin-top: 3rem;
          padding-top: 1.5rem;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
          .footer-content {
            grid-template-columns: 1fr;
            text-align: center;
          }
          
          .social-links {
            justify-content: center;
          }
        }
      </style>
      <footer>
        <div class="footer-content">
          <div class="footer-column">
            <h3>GXS Blue Transformation - Chuyển Đổi Xanh Dương</h3>
            <p>Committed to environmental excellence since 2023.</p>
</div>
          
          <div class="footer-column">
            <h3>Quick Links</h3>
            <ul class="footer-links">
              <li><a href="/">Home</a></li>
              <li><a href="/about.html">About</a></li>
              <li><a href="/solutions.html">Our Solutions</a></li>
              <li><a href="/projects.html">Global Projects</a></li>
<li><a href="/contact.html">Contact Us</a></li>
            </ul>
          </div>
          
          <div class="footer-column">
            <h3>Connect With Us</h3>
            <div class="social-links">
              <a href="#"><i data-feather="twitter"></i></a>
              <a href="#"><i data-feather="instagram"></i></a>
              <a href="#"><i data-feather="facebook"></i></a>
              <a href="#"><i data-feather="github"></i></a>
            </div>
          </div>
        </div>
        
        <div class="copyright">
          &copy; 2026 GXS Blue Transformation. All rights reserved. Made with <i data-feather="heart" class="inline" style="width: 14px; height: 14px; color: #ff6b9a;"></i> and magic.
        </div>
      </footer>
    `;
  }
}
customElements.define('custom-footer', CustomFooter);