NawelMer/captcha-validator-pro

1class FooterComponent extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        :host {7          display: block;8          margin-top: auto;9        }10        11        footer {12          background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);13          color: #cbd5e1;14          padding: 3rem 0 2rem;15        }16        17        .container {18          max-width: 1200px;19          margin: 0 auto;20          padding: 0 1.5rem;21        }22        23        .footer-content {24          display: grid;25          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));26          gap: 2rem;27          margin-bottom: 2rem;28        }29        30        .footer-section h3 {31          color: white;32          margin-bottom: 1.5rem;33          font-size: 1.25rem;34        }35        36        .footer-section ul {37          list-style: none;38        }39        40        .footer-section ul li {41          margin-bottom: 0.75rem;42        }43        44        .footer-section ul li a {45          color: #94a3b8;46          text-decoration: none;47          transition: color 0.3s ease;48          display: flex;49          align-items: center;50          gap: 0.5rem;51        }52        53        .footer-section ul li a:hover {54          color: #6366f1;55        }56        57        .social-links {58          display: flex;59          gap: 1rem;60          margin-top: 1rem;61        }62        63        .social-link {64          display: inline-flex;65          align-items: center;66          justify-content: center;67          width: 40px;68          height: 40px;69          background: rgba(255, 255, 255, 0.05);70          border-radius: 50%;71          color: #cbd5e1;72          transition: all 0.3s ease;73        }74        75        .social-link:hover {76          background: #6366f1;77          transform: translateY(-3px);78        }79        80        .copyright {81          border-top: 1px solid rgba(255, 255, 255, 0.1);82          padding-top: 2rem;83          text-align: center;84          color: #94a3b8;85          font-size: 0.875rem;86        }87        88        @media (max-width: 768px) {89          .footer-content {90            grid-template-columns: 1fr;91          }92        }93      </style>94      95      <footer>96        <div class="container">97          <div class="footer-content">98            <div class="footer-section">99              <h3>CAPTCHA Validator Pro</h3>100              <p>Advanced human verification system with cutting-edge security features to protect your digital assets.</p>101              <div class="social-links">102                <a href="#" class="social-link"><i data-feather="twitter"></i></a>103                <a href="#" class="social-link"><i data-feather="github"></i></a>104                <a href="#" class="social-link"><i data-feather="linkedin"></i></a>105                <a href="#" class="social-link"><i data-feather="facebook"></i></a>106              </div>107            </div>108            109            <div class="footer-section">110              <h3>Quick Links</h3>111              <ul>112                <li><a href="/"><i data-feather="chevron-right"></i> Home</a></li>113                <li><a href="#"><i data-feather="chevron-right"></i> How It Works</a></li>114                <li><a href="#"><i data-feather="chevron-right"></i> API Documentation</a></li>115                <li><a href="#"><i data-feather="chevron-right"></i> Pricing</a></li>116              </ul>117            </div>118            119            <div class="footer-section">120              <h3>Resources</h3>121              <ul>122                <li><a href="#"><i data-feather="chevron-right"></i> Blog</a></li>123                <li><a href="#"><i data-feather="chevron-right"></i> Support Center</a></li>124                <li><a href="#"><i data-feather="chevron-right"></i> Community</a></li>125                <li><a href="#"><i data-feather="chevron-right"></i> Developers</a></li>126              </ul>127            </div>128            129            <div class="footer-section">130              <h3>Contact Us</h3>131              <ul>132                <li><a href="#"><i data-feather="mail"></i> support@captchapro.com</a></li>133                <li><a href="#"><i data-feather="phone"></i> +1 (555) 123-4567</a></li>134                <li><a href="#"><i data-feather="map-pin"></i> San Francisco, CA</a></li>135              </ul>136            </div>137          </div>138          139          <div class="copyright">140            <p>&copy; 2023 CAPTCHA Validator Pro. All rights reserved. Protecting the digital world one verification at a time.</p>141          </div>142        </div>143      </footer>144    `;145    146    // Load Feather Icons147    const script = document.createElement('script');148    script.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';149    script.onload = () => {150      feather.replace();151    };152    this.shadowRoot.appendChild(script);153  }154}155 156customElements.define('footer-component', FooterComponent);