Saas Tech Company Footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SaaS & Tech Company Footer</title>
    <style>
        :root {
            --footer-bg: #1d1d1f;
            --footer-text: #a1a1a6;
            --footer-heading: #f5f5f7;
            --footer-link-hover: #ffffff;
            --footer-border: #3a3a3c;
            --app-badge-bg: #000000;
            --app-badge-text: #ffffff;
        }

/* Basic body styles */
        body {
            font-family: system-ui, -apple-system, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: #ffffff;
            color: #1d1d1f;
        }
        
        main {
            flex-grow: 1;
        }

.container {
            width: 90%;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

.main-content {
            padding: 2rem 0;
        }

/* FOOTER STYLES START HERE */
        
        .footer-saas {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            font-size: 0.9rem;
            padding: 3rem 0;
        }

.footer-saas__main {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem 1.5rem;
            padding-bottom: 2.5rem;
            border-bottom: 1px solid var(--footer-border);
        }

.footer-saas__heading {
            font-weight: 600;
            color: var(--footer-heading);
            margin: 0 0 1rem 0;
            font-size: 1rem;
        }

.footer-saas__links ul { margin: 0; padding: 0; list-style: none; }
        .footer-saas__links li:not(:last-child) { margin-bottom: 0.75rem; }
        .footer-saas__links a { color: var(--footer-text); text-decoration: none; transition: color 0.2s ease; }
        .footer-saas__links a:hover { color: var(--footer-link-hover); }

.footer-saas__bottom {
            padding-top: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
        }
        
        .footer-saas__copyright {
            margin: 0;
            font-size: 0.875rem;
            text-align: center;
        }

.footer-saas__app-badges {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

.footer-saas__app-badges a {
            display: inline-block;
            transition: opacity 0.2s ease;
        }
        .footer-saas__app-badges a:hover {
            opacity: 0.85;
        }
        .footer-saas__app-badges svg {
            height: 40px;
            width: auto;
        }
        
        /* Media query for larger screens */
        @media (min-width: 768px) {
            .footer-saas__main {
                grid-template-columns: repeat(4, 1fr);
            }
            .footer-saas__bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>SaaS & Tech Company Footer</h1>
            <p>This template is ideal for software products and tech startups.</p>
        </div>
    </main>

<footer class="footer-saas" role="contentinfo">
        <div class="container">
            <div class="footer-saas__main">
                <div class="footer-saas__links">
                    <h3 class="footer-saas__heading">Product</h3>
                    <ul>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">Integrations</a></li>
                        <li><a href="#">Changelog</a></li>
                        <li><a href="#">Security</a></li>
                    </ul>
                </div>
                <div class="footer-saas__links">
                    <h3 class="footer-saas__heading">Developers</h3>
                    <ul>
                        <li><a href="#">API Documentation</a></li>
                        <li><a href="#">SDKs</a></li>
                        <li><a href="#">API Status</a></li>
                        <li><a href="#">Open Source</a></li>
                    </ul>
                </div>
                <div class="footer-saas__links">
                    <h3 class="footer-saas__heading">Resources</h3>
                    <ul>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Help Center</a></li>
                        <li><a href="#">Case Studies</a></li>
                        <li><a href="#">Webinars</a></li>
                        <li><a href="#">Community</a></li>
                    </ul>
                </div>
                <div class="footer-saas__links">
                    <h3 class="footer-saas__heading">Company</h3>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Brand Assets</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-saas__bottom">
                <p class="footer-saas__copyright">&copy; 2025 TechCorp Inc.</p>
                <div class="footer-saas__app-badges">
                    <a href="#" aria-label="Download on the App Store">
                        <svg width="135" height="40" viewBox="0 0 135 40" xmlns="http://www.w3.org/2000/svg">
                            <rect width="135" height="40" rx="8" fill="var(--app-badge-bg)"/>
                            <g fill="var(--app-badge-text)">
                                
                                <circle cx="24" cy="20" r="10" />
                                <text x="45" y="17" font-size="10">Download on the</text>
                                <text x="45" y="33" font-size="14" font-weight="bold">App Store</text>
                            </g>
                        </svg>
                    </a>
                    <a href="#" aria-label="Get it on Google Play">
                        <svg width="135" height="40" viewBox="0 0 135 40" xmlns="http://www.w3.org/2000/svg">
                            <rect width="135" height="40" rx="8" fill="var(--app-badge-bg)"/>
                            <g fill="var(--app-badge-text)">
                                
                                <polygon points="18,10 34,20 18,30"/>
                                <text x="45" y="17" font-size="10">GET IT ON</text>
                                <text x="45" y="33" font-size="14" font-weight="bold">Google Play</text>
                            </g>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>