Component:
Footer Product Light
Colors:
Description:
This carefully crafted Footer component is perfect for Product landing pages, featuring a Light design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@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>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page