<!--
@type: Footer
@industry: SaaS
@style: Minimal
@category: Page Section, Navigation, Contact
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.footer-section {
background-color: var(--color-white);
padding: 3rem 1rem;
border-top: 1px solid var(--color-gray-200);
}
.footer-container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
/* Company Info */
.company-info {
margin-bottom: 1.5rem;
}
.logo-div {
display: flex;
align-items: center;
text-decoration: none;
margin-bottom: 1.5rem;
}
.logo-icon {
height: 2rem;
width: auto;
color: var(--color-blue-600);
}
.logo-text {
margin-left: 0.5rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-gray-900);
}
.company-description {
color: var(--color-gray-600);
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-link {
color: var(--color-gray-400);
transition: color 0.2s;
}
.social-link:hover {
color: var(--color-gray-600);
}
.social-icon {
height: 1.25rem;
width: 1.25rem;
}
/* Navigation Links */
.footer-nav h3 {
color: var(--color-gray-900);
font-weight: 600;
margin-bottom: 1rem;
font-size: 1rem;
}
.footer-nav ul {
list-style: none;
}
.footer-nav li {
margin-bottom: 0.75rem;
}
.footer-nav a {
color: var(--color-gray-600);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s;
}
.footer-nav a:hover {
color: var(--color-blue-600);
}
/* Newsletter Form */
.newsletter {
margin-bottom: 1.5rem;
}
.newsletter h3 {
color: var(--color-gray-900);
font-weight: 600;
margin-bottom: 1rem;
font-size: 1rem;
}
.newsletter p {
color: var(--color-gray-600);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.newsletter-input {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
border: 1px solid var(--color-gray-300);
border-radius: 0.25rem;
transition: all 0.2s;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-blue-500);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.newsletter-button {
width: 100%;
background-color: var(--color-blue-600);
color: var(--color-white);
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.2s;
}
.newsletter-button:hover {
background-color: var(--color-blue-700);
}
.newsletter-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
}
/* Bottom Bar */
.bottom-bar {
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid var(--color-gray-200);
}
.bottom-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.legal-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.legal-link {
color: var(--color-gray-600);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s;
}
.legal-link:hover {
color: var(--color-blue-600);
}
.copyright {
color: var(--color-gray-600);
font-size: 0.875rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.footer-container {
padding: 0 1.5rem;
}
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.bottom-container {
flex-direction: row;
justify-content: space-between;
gap: 0;
}
.legal-links {
justify-content: flex-start;
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.footer-container {
padding: 0 2rem;
}
}
</style>
<section class="footer-section" aria-label="Footer">
<div class="footer-container">
<!-- Main Footer Content -->
<div class="footer-grid">
<!-- Company Info -->
<div class="company-info">
<!-- Logo -->
<div class="logo-div" aria-label="Homepage">
<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">CloudFlow</span>
</div>
<p class="company-description">
Empowering teams with intelligent workflow automation. Transform your business processes with our cutting-edge SaaS platform.
</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Visit our Twitter">
<svg class="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="social-link" aria-label="Visit our LinkedIn">
<svg class="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="social-link" aria-label="Visit our GitHub">
<svg class="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 -->
<nav class="footer-nav">
<h3>Product</h3>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Integrations</a></li>
<li><a href="#">Enterprise</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</nav>
<!-- Company Links -->
<nav class="footer-nav">
<h3>Company</h3>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Press</a></li>
</ul>
</nav>
<!-- Newsletter Signup -->
<div class="newsletter">
<h3>Stay Updated</h3>
<p>Subscribe to our newsletter for product updates, industry insights, and company news.</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-container">
<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">Security</a>
</div>
<p class="copyright">
© 2025 CloudFlow. All rights reserved.
</p>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('h3').forEach(header => {
if (!header.hasAttribute('aria-expanded')) {
header.setAttribute('aria-expanded', 'true');
}
});
});
</script>
<!--
@type: Footer
@industry: SaaS
@style: Minimal
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 border-t border-gray-200" aria-label="Footer">
<div class="max-w-7xl mx-auto 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-8 lg:gap-12 mb-12">
<!-- Company Info -->
<div class="col-span-1 lg:col-span-1">
<!-- Logo -->
<div class="flex-shrink-0 mb-6">
<a href="#" class="flex items-center" aria-label="Homepage">
<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-semibold text-gray-900">CloudFlow</span>
</a>
</div>
<p class="text-gray-600 text-sm mb-6">
Empowering teams with intelligent workflow automation. Transform your business processes with our cutting-edge SaaS platform.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-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-400 hover:text-gray-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-400 hover:text-gray-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-gray-900 font-semibold mb-4">Product</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Features</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Integrations</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Enterprise</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Solutions</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Tutorials</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Pricing</a></li>
</ul>
</div>
<!-- Company Links -->
<div class="col-span-1">
<h3 class="text-gray-900 font-semibold mb-4">Company</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">About us</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Careers</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Partners</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Blog</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 text-sm">Press</a></li>
</ul>
</div>
<!-- Newsletter Signup -->
<div class="col-span-1">
<h3 class="text-gray-900 font-semibold mb-4">Stay Updated</h3>
<p class="text-sm text-gray-600 mb-4">Subscribe to our newsletter for product updates, industry insights, and company news.</p>
<form class="space-y-3">
<div>
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-3 py-2 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your email">
</div>
<button type="submit" class="w-full bg-blue-600 text-white px-4 py-2 text-sm font-medium rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
Subscribe
</button>
</form>
</div>
</div>
<!-- Bottom Bar -->
<div class="pt-8 mt-8 border-t border-gray-200">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="flex flex-wrap justify-center md:justify-start space-x-6 text-sm text-gray-600">
<a href="#" class="hover:text-blue-600">Terms</a>
<a href="#" class="hover:text-blue-600">Privacy</a>
<a href="#" class="hover:text-blue-600">Cookies</a>
<a href="#" class="hover:text-blue-600">Security</a>
</div>
<p class="text-sm text-gray-600">
© 2025 CloudFlow. All rights reserved.
</p>
</div>
</div>
</div>
</section>
<!-- Simple dropdown functionality for mobile menu -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add aria-expanded attribute to all h3 elements
document.querySelectorAll('h3').forEach(header => {
if (!header.hasAttribute('aria-expanded')) {
header.setAttribute('aria-expanded', 'true');
}
});
});
</script>
