NativeON/aesthetic-haven
0
1class AestheticFooter extends HTMLElement {2 connectedCallback() {3 this.attachShadow({ mode: 'open' });4 this.shadowRoot.innerHTML = `5 <style>6 :host {7 display: block;8 width: 100%;9 background-color: #f8f9fa;10 color: #4a5568;11 border-top: 1px solid #e2e8f0;12 }13 14 .footer-container {15 max-width: 1280px;16 margin: 0 auto;17 padding: 3rem 1.5rem;18 }19 20 .footer-grid {21 display: grid;22 grid-template-columns: repeat(1, 1fr);23 gap: 2rem;24 }25 26 @media (min-width: 640px) {27 .footer-grid {28 grid-template-columns: repeat(2, 1fr);29 }30 }31 32 @media (min-width: 1024px) {33 .footer-grid {34 grid-template-columns: repeat(4, 1fr);35 }36 }37 38 .footer-section h3 {39 font-family: 'Playfair Display', serif;40 font-size: 1.25rem;41 font-weight: 500;42 color: #1a202c;43 margin-bottom: 1.5rem;44 }45 46 .footer-links {47 list-style: none;48 }49 50 .footer-link {51 margin-bottom: 0.75rem;52 }53 54 .footer-link a {55 color: #4a5568;56 text-decoration: none;57 font-size: 0.9rem;58 transition: color 0.2s;59 }60 61 .footer-link a:hover {62 color: #1a202c;63 }64 65 .social-links {66 display: flex;67 gap: 1rem;68 margin-top: 1.5rem;69 }70 71 .social-link {72 color: #4a5568;73 transition: color 0.2s, transform 0.2s;74 display: flex;75 align-items: center;76 justify-content: center;77 width: 36px;78 height: 36px;79 border-radius: 50%;80 background: white;81 box-shadow: 0 2px 4px rgba(0,0,0,0.1);82 }83 84 .social-link:hover {85 color: #1a202c;86 transform: translateY(-2px);87 box-shadow: 0 4px 8px rgba(0,0,0,0.15);88 }89 90 .newsletter-form {91 margin-top: 1.5rem;92 }93 94 .newsletter-input {95 width: 100%;96 padding: 0.75rem 1rem;97 border: 1px solid #e2e8f0;98 border-radius: 0.375rem;99 font-size: 0.9rem;100 margin-bottom: 1rem;101 }102 103 .newsletter-input:focus {104 outline: none;105 border-color: #a0aec0;106 }107 108 .newsletter-btn {109 width: 100%;110 padding: 0.75rem 1rem;111 background-color: #1a202c;112 color: white;113 border: none;114 border-radius: 0.375rem;115 font-size: 0.9rem;116 font-weight: 500;117 cursor: pointer;118 transition: background-color 0.2s;119 }120 121 .newsletter-btn:hover {122 background-color: #2d3748;123 }124 125 .footer-bottom {126 margin-top: 3rem;127 padding-top: 2rem;128 border-top: 1px solid #e2e8f0;129 text-align: center;130 font-size: 0.85rem;131 color: #718096;132 }133 134 .payment-methods {135 display: flex;136 justify-content: center;137 gap: 1rem;138 margin-top: 1rem;139 }140 141 .payment-icon {142 width: 32px;143 height: 24px;144 background: white;145 border-radius: 4px;146 display: flex;147 align-items: center;148 justify-content: center;149 box-shadow: 0 1px 3px rgba(0,0,0,0.1);150 }151 </style>152 153 <footer class="footer-container">154 <div class="footer-grid">155 <div class="footer-section">156 <h3>Aesthetic Haven</h3>157 <p style="font-size: 0.9rem; line-height: 1.6; color: #718096;">158 Creating serene spaces through mindful design. We believe in simplicity, quality, and sustainable living.159 </p>160 <div class="social-links">161 <a href="https://instagram.com" class="social-link" aria-label="Instagram">162 <i data-feather="instagram"></i>163 </a>164 <a href="https://pinterest.com" class="social-link" aria-label="Pinterest">165 <i data-feather="heart"></i>166 </a>167 <a href="https://twitter.com" class="social-link" aria-label="Twitter">168 <i data-feather="twitter"></i>169 </a>170 <a href="https://facebook.com" class="social-link" aria-label="Facebook">171 <i data-feather="facebook"></i>172 </a>173 </div>174 </div>175 176 <div class="footer-section">177 <h3>Shop</h3>178 <ul class="footer-links">179 <li class="footer-link"><a href="/furniture.html">Furniture</a></li>180 <li class="footer-link"><a href="/lighting.html">Lighting</a></li>181 <li class="footer-link"><a href="/decor.html">Home Decor</a></li>182 <li class="footer-link"><a href="/textiles.html">Textiles</a></li>183 <li class="footer-link"><a href="/new.html">New Arrivals</a></li>184 <li class="footer-link"><a href="/sale.html">Sale</a></li>185 </ul>186 </div>187 188 <div class="footer-section">189 <h3>Information</h3>190 <ul class="footer-links">191 <li class="footer-link"><a href="/about.html">About Us</a></li>192 <li class="footer-link"><a href="/contact.html">Contact</a></li>193 <li class="footer-link"><a href="/shipping.html">Shipping & Delivery</a></li>194 <li class="footer-link"><a href="/returns.html">Returns & Exchanges</a></li>195 <li class="footer-link"><a href="/privacy.html">Privacy Policy</a></li>196 <li class="footer-link"><a href="/terms.html">Terms of Service</a></li>197 </ul>198 </div>199 200 <div class="footer-section">201 <h3>Newsletter</h3>202 <p style="font-size: 0.9rem; line-height: 1.6; color: #718096;">203 Subscribe for styling tips, exclusive offers, and new collection previews.204 </p>205 <form class="newsletter-form">206 <input type="email" placeholder="Your email" class="newsletter-input" required>207 <button type="submit" class="newsletter-btn">Subscribe</button>208 </form>209 </div>210 </div>211 212 <div class="footer-bottom">213 <p>© ${new Date().getFullYear()} Aesthetic Haven. All rights reserved.</p>214 <div class="payment-methods">215 <div class="payment-icon"><i data-feather="credit-card"></i></div>216 <div class="payment-icon"><i data-feather="dollar-sign"></i></div>217 <div class="payment-icon"><i data-feather="shield"></i></div>218 </div>219 </div>220 </footer>221 `;222 223 // Initialize feather icons in shadow DOM224 setTimeout(() => {225 if (window.feather) {226 window.feather.replace({ 'stroke-width': 1.5 });227 }228 }, 100);229 230 // Handle newsletter form in footer231 const newsletterForm = this.shadowRoot.querySelector('.newsletter-form');232 if (newsletterForm) {233 newsletterForm.addEventListener('submit', (e) => {234 e.preventDefault();235 const input = newsletterForm.querySelector('.newsletter-input');236 if (input.value.trim()) {237 input.value = '';238 // Show success state239 const btn = newsletterForm.querySelector('.newsletter-btn');240 const originalText = btn.textContent;241 btn.textContent = 'Subscribed!';242 btn.style.backgroundColor = '#48bb78';243 setTimeout(() => {244 btn.textContent = originalText;245 btn.style.backgroundColor = '';246 }, 3000);247 }248 });249 }250 }251}252 253customElements.define('aesthetic-footer', AestheticFooter);