<!--
@type: Footer
@industry: Product
@style: Light
@category: Page Section, Navigation, Contact
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-100: #dbeafe;
--color-blue-300: #93c5fd;
--color-blue-400: #60a5fa;
--color-blue-600: #2563eb;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
/* Container */
--container-max-width: 80rem; /* max-w-7xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.footer-section {
background-color: var(--color-gray-50);
color: var(--color-gray-800);
padding: var(--spacing-12) var(--spacing-4);
font-weight: 300;
border-top: 1px solid var(--color-gray-200);
}
.footer-container {
max-width: var(--container-max-width);
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-10);
margin-bottom: var(--spacing-12);
}
/* Company Info */
.company-info {
margin-bottom: var(--spacing-6);
}
.company-logo {
display: flex;
align-items: center;
margin-bottom: var(--spacing-6);
}
.logo-icon {
height: 2rem;
width: auto;
color: var(--color-blue-600);
}
.logo-text {
margin-left: var(--spacing-2);
font-size: 1.25rem;
font-weight: 500;
color: var(--color-gray-800);
}
.company-description {
color: var(--color-gray-600);
font-size: 1rem;
margin-bottom: var(--spacing-8);
}
.footer-social-links {
display: flex;
gap: var(--spacing-5);
}
.footer-social-link {
color: var(--color-gray-600);
transition: color 0.2s;
}
.footer-social-link:hover {
color: var(--color-blue-600);
}
.footer-social-icon {
width: 1.25rem;
height: 1.25rem;
}
/* Navigation Links */
.footer-nav-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-6);
}
.footer-nav-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.footer-nav-link {
color: var(--color-gray-600);
text-decoration: none;
font-size: 1rem;
transition: color 0.2s;
}
.footer-nav-link:hover {
color: var(--color-blue-600);
}
/* Newsletter */
.newsletter-description {
color: var(--color-gray-600);
font-size: 1rem;
margin-bottom: var(--spacing-6);
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
}
.newsletter-input {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
width: 100%;
padding: var(--spacing-3) var(--spacing-4);
font-size: 1rem;
color: var(--color-gray-800);
}
.newsletter-input::placeholder {
color: var(--color-gray-500);
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-blue-400);
box-shadow: 0 0 0 3px var(--color-blue-100);
}
.newsletter-button {
background-color: var(--color-white);
border: 1px solid var(--color-blue-300);
color: var(--color-gray-800);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
width: 100%;
transition: background-color 0.2s;
font-size: 1rem;
font-weight: 400;
cursor: pointer;
}
.newsletter-button:hover {
background-color: var(--color-gray-50);
}
/* Bottom Bar */
.bottom-bar {
padding-top: var(--spacing-8);
border-top: 1px solid var(--color-gray-200);
}
.bottom-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-6);
}
.legal-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-8);
font-size: 1rem;
color: var(--color-gray-600);
}
.legal-link {
color: var(--color-gray-600);
text-decoration: none;
transition: color 0.2s;
}
.legal-link:hover {
color: var(--color-blue-600);
}
.copyright {
font-size: 1rem;
color: var(--color-gray-600);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.footer-container {
padding: 0 var(--spacing-6);
}
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.bottom-content {
flex-direction: row;
justify-content: space-between;
gap: 0;
}
.legal-links {
justify-content: flex-start;
gap-y: var(--spacing-3);
}
}
@media (min-width: 1024px) {
.footer-container {
padding: 0 var(--spacing-8);
}
.footer-grid {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
<section class="footer-section" aria-label="Footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-grid">
<!-- Company Info -->
<div>
<!-- Logo -->
<div class="company-logo">
<svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="logo-text">ProductLab</span>
</div>
<p class="company-description">
Crafting exceptional digital products that solve real problems. Our platform helps product teams design, build, and ship amazing experiences.
</p>
<div class="footer-social-links">
<a href="#" class="footer-social-link" aria-label="Visit our Twitter">
<svg class="footer-social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a href="#" class="footer-social-link" aria-label="Visit our LinkedIn">
<svg class="footer-social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="footer-social-link" aria-label="Visit our Instagram">
<svg class="footer-social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<a href="#" class="footer-social-link" aria-label="Visit our GitHub">
<svg class="footer-social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<!-- Product Links -->
<div>
<h3 class="footer-nav-title">Product</h3>
<ul class="footer-nav-list">
<li><a href="#" class="footer-nav-link">Features</a></li>
<li><a href="#" class="footer-nav-link">Pricing</a></li>
<li><a href="#" class="footer-nav-link">Integrations</a></li>
<li><a href="#" class="footer-nav-link">Roadmap</a></li>
<li><a href="#" class="footer-nav-link">Changelog</a></li>
<li><a href="#" class="footer-nav-link">Documentation</a></li>
</ul>
</div>
<!-- Company Links -->
<div>
<h3 class="footer-nav-title">Company</h3>
<ul class="footer-nav-list">
<li><a href="#" class="footer-nav-link">About</a></li>
<li><a href="#" class="footer-nav-link">Blog</a></li>
<li><a href="#" class="footer-nav-link">Careers</a></li>
<li><a href="#" class="footer-nav-link">Customers</a></li>
<li><a href="#" class="footer-nav-link">Press</a></li>
</ul>
</div>
<!-- Newsletter -->
<div>
<h3 class="footer-nav-title">Stay in the loop</h3>
<p class="newsletter-description">
Subscribe to our newsletter for the latest product updates, design tips, and exclusive offers.
</p>
<form class="newsletter-form">
<div>
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required
class="newsletter-input"
placeholder="Enter your email">
</div>
<button type="submit" class="newsletter-button">
Subscribe
</button>
</form>
</div>
</div>
<!-- Bottom Bar -->
<div class="bottom-bar">
<div class="bottom-content">
<div class="legal-links">
<a href="#" class="legal-link">Terms</a>
<a href="#" class="legal-link">Privacy</a>
<a href="#" class="legal-link">Cookies</a>
<a href="#" class="legal-link">Accessibility</a>
</div>
<p class="copyright">
© 2025 ProductLab. All rights reserved.
</p>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add keyboard navigation support for footer links
const footerLinks = document.querySelectorAll('section a');
footerLinks.forEach(link => {
link.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
this.click();
}
});
});
// Ensure all interactive elements are properly accessible
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
const email = this.querySelector('input[type="email"]').value;
if (email) {
// Simulate form submission feedback
const button = this.querySelector('button');
const originalText = button.textContent;
button.textContent = 'Subscribed!';
button.style.backgroundColor = 'var(--color-gray-100)';
// Reset after 2 seconds
setTimeout(() => {
button.textContent = originalText;
button.style.backgroundColor = '';
this.reset();
}, 2000);
}
});
});
});
</script>
<!--
@type: Footer
@industry: Product
@style: Light
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 text-gray-800 py-12 font-light border-t border-gray-200" aria-label="Footer">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Main Footer Content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
<!-- Company Info -->
<div class="col-span-1 lg:col-span-1">
<!-- Logo -->
<div class="flex items-center mb-6">
<svg class="h-8 w-auto text-blue-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="ml-2 text-xl font-medium text-gray-800">ProductLab</span>
</div>
<p class="text-gray-600 text-base mb-8">
Crafting exceptional digital products that solve real problems. Our platform helps product teams design, build, and ship amazing experiences.
</p>
<div class="flex space-x-5">
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors" aria-label="Visit our Twitter">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors" aria-label="Visit our LinkedIn">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors" aria-label="Visit our Instagram">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors" aria-label="Visit our GitHub">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<!-- Product Links -->
<div class="col-span-1">
<h3 class="text-lg font-medium text-gray-800 mb-6">Product</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Features</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Pricing</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Integrations</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Roadmap</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Changelog</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Documentation</a></li>
</ul>
</div>
<!-- Company Links -->
<div class="col-span-1">
<h3 class="text-lg font-medium text-gray-800 mb-6">Company</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">About</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Blog</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Careers</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Customers</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors text-base">Press</a></li>
</ul>
</div>
<!-- Newsletter -->
<div class="col-span-1">
<h3 class="text-lg font-medium text-gray-800 mb-6">Stay in the loop</h3>
<p class="text-gray-600 text-base mb-6">
Subscribe to our newsletter for the latest product updates, design tips, and exclusive offers.
</p>
<form class="space-y-3">
<div class="relative">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required
class="bg-white border border-gray-200 rounded-lg w-full px-4 py-3 text-base text-gray-800 placeholder-gray-500 focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
placeholder="Enter your email">
</div>
<button type="submit"
class="bg-white border border-blue-300 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm w-full transition-colors text-base font-normal">
Subscribe
</button>
</form>
</div>
</div>
<!-- Bottom Bar -->
<div class="pt-8 border-t border-gray-200">
<div class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
<div class="flex flex-wrap justify-center md:justify-start gap-x-8 gap-y-3 text-base text-gray-600">
<a href="#" class="hover:text-blue-600 transition-colors">Terms</a>
<a href="#" class="hover:text-blue-600 transition-colors">Privacy</a>
<a href="#" class="hover:text-blue-600 transition-colors">Cookies</a>
<a href="#" class="hover:text-blue-600 transition-colors">Accessibility</a>
</div>
<p class="text-base text-gray-600">
© 2025 ProductLab. All rights reserved.
</p>
</div>
</div>
</div>
</section>
<!-- Simple script for accessibility improvements -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add keyboard navigation support for footer links
const footerLinks = document.querySelectorAll('section a');
footerLinks.forEach(link => {
link.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
this.click();
}
});
});
// Ensure all interactive elements are properly accessible
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
const email = this.querySelector('input[type="email"]').value;
if (email) {
// Simulate form submission feedback
const button = this.querySelector('button');
const originalText = button.textContent;
button.textContent = 'Subscribed!';
button.classList.add('bg-gray-100');
// Reset after 2 seconds
setTimeout(() => {
button.textContent = originalText;
button.classList.remove('bg-gray-100');
this.reset();
}, 2000);
}
});
});
});
</script>
