Footer Software Minimal

                <!--
@type: Footer
@industry: Software
@style: Minimal
@category: Navigation, Page Section, Contact
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  --color-white: #ffffff;
  --color-gray-100: #f3f4f6;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-900: #111827;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
}

* {
  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";
}

.footer-section {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray-100);
}

.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

.footer-content {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .footer-content {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .footer-content {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.top-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}

@media (min-width: 1024px) {
  .top-section {
    grid-template-columns: repeat(12, 1fr);
  }
}

.company-info {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .company-info {
    grid-column: span 4 / span 4;
  }
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-icon {
  height: 2rem;
  width: auto;
  color: var(--color-indigo-500);
}

.logo-text {
  margin-left: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

.company-description {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--color-gray-500);
  max-width: 20rem;
}

.footer-social-links {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.5rem;
}

.footer-social-link {
  color: var(--color-gray-400);
  transition: color 0.2s;
}

.footer-social-link:hover {
  color: var(--color-gray-500);
}

.footer-social-icon {
  height: 1.25rem;
  width: 1.25rem;
}

.newsletter {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .newsletter {
    grid-column: span 5 / span 5;
    grid-column-start: 8;
  }
}

.newsletter-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.newsletter-description {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

.newsletter-form {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  max-width: 28rem;
}

@media (min-width: 640px) {
  .newsletter-form {
    flex-direction: row;
  }
}

.newsletter-input {
  appearance: none;
  min-width: 0;
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: var(--color-gray-900);
}

.newsletter-input::placeholder {
  color: var(--color-gray-500);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--color-indigo-500);
  box-shadow: 0 0 0 2px var(--color-indigo-500);
}

.newsletter-input:focus::placeholder {
  color: var(--color-gray-400);
}

.newsletter-button-container {
  margin-top: 0.75rem;
}

@media (min-width: 640px) {
  .newsletter-button-container {
    margin-top: 0;
    margin-left: 0.75rem;
    flex-shrink: 0;
  }
}

.newsletter-button {
  width: 100%;
  background-color: var(--color-indigo-600);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-white);
  transition: background-color 0.2s;
  cursor: pointer;
}

.newsletter-button:hover {
  background-color: var(--color-indigo-700);
}

.newsletter-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}

.newsletter-disclaimer {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.nav-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--color-gray-100);
}

@media (min-width: 768px) {
  .nav-sections {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .nav-sections {
    grid-template-columns: repeat(5, 1fr);
  }
}

.nav-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-nav-list {
  margin-top: 1rem;
  list-style: none;
}

.footer-nav-item {
  margin-top: 0.75rem;
}

.footer-nav-item:first-child {
  margin-top: 0;
}

.footer-nav-link {
  font-size: 1rem;
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav-link:hover {
  color: var(--color-indigo-600);
}

.bottom-section {
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .bottom-section {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

@media (min-width: 768px) {
  .contact-info {
    flex-direction: row;
    gap: 2rem;
  }
}

.contact-item {
  display: flex;
  align-items: center;
}

.contact-icon {
  height: 1.25rem;
  width: 1.25rem;
  color: var(--color-gray-400);
  margin-right: 0.5rem;
}

.copyright {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

@media (min-width: 768px) {
  .copyright {
    margin-top: 0;
  }
}
</style>

<section class="footer-section" aria-labelledby="footer-heading">
  <div class="container">
    <div class="footer-content">
      <!-- Top section with logo and newsletter -->
      <div class="top-section">
        <!-- Logo and company info -->
        <div class="company-info">
          <div class="logo-container">
            <svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 2L4.094 6.938C3.432 7.294 3 7.978 3 8.72V15.28C3 16.022 3.432 16.706 4.094 17.062L13 22L21.906 17.062C22.568 16.706 23 16.022 23 15.28V8.72C23 7.978 22.568 7.294 21.906 6.938L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M3 7L13 12L23 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M13 12V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="logo-text">DevStack</span>
          </div>
          <p class="company-description">
            Streamlining business operations for small businesses with powerful, easy-to-use software solutions.
          </p>
          <div class="footer-social-links">
            <a href="#" class="footer-social-link" aria-label="Facebook">
              <svg class="footer-social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="footer-social-link" aria-label="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" />
              </svg>
            </a>
            <a href="#" class="footer-social-link" aria-label="LinkedIn">
              <svg class="footer-social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" 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" clip-rule="evenodd" />
              </svg>
            </a>
          </div>
        </div>
        
        <!-- Newsletter -->
        <div class="newsletter">
          <h3 class="newsletter-title">Subscribe to our newsletter</h3>
          <p class="newsletter-description">
            Get the latest updates, tips, and product news delivered straight to your inbox.
          </p>
          <form class="newsletter-form">
            <input type="email" name="email-address" id="email-address" autocomplete="email" required class="newsletter-input" placeholder="Enter your email">
            <div class="newsletter-button-container">
              <button type="submit" class="newsletter-button">
                Subscribe
              </button>
            </div>
          </form>
          <p class="newsletter-disclaimer">
            By subscribing, you agree to our Privacy Policy and consent to receive updates from our company.
          </p>
        </div>
      </div>
      
      <!-- Navigation sections -->
      <div class="nav-sections">
        <!-- Products -->
        <div>
          <h3 class="nav-section-title">
            Products
          </h3>
          <ul role="list" class="footer-nav-list">
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Business Suite
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Client Manager
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Finance Tools
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Project Tracker
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Reporting
              </a>
            </li>
          </ul>
        </div>
        
        <!-- Solutions -->
        <div>
          <h3 class="nav-section-title">
            Solutions
          </h3>
          <ul role="list" class="footer-nav-list">
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                For Startups
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                For Small Business
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                For Agencies
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                For E-commerce
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Enterprise
              </a>
            </li>
          </ul>
        </div>
        
        <!-- Resources -->
        <div>
          <h3 class="nav-section-title">
            Resources
          </h3>
          <ul role="list" class="footer-nav-list">
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Documentation
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Guides
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                API Reference
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Blog
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Community
              </a>
            </li>
          </ul>
        </div>
        
        <!-- Company -->
        <div>
          <h3 class="nav-section-title">
            Company
          </h3>
          <ul role="list" class="footer-nav-list">
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                About Us
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Careers
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Press
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Partners
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Contact
              </a>
            </li>
          </ul>
        </div>
        
        <!-- Legal -->
        <div>
          <h3 class="nav-section-title">
            Legal
          </h3>
          <ul role="list" class="footer-nav-list">
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Privacy Policy
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Terms of Service
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Cookie Policy
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                GDPR Compliance
              </a>
            </li>
            <li class="footer-nav-item">
              <a href="#" class="footer-nav-link">
                Security
              </a>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- Bottom section with copyright and contact -->
      <div class="bottom-section">
        <!-- Contact info -->
        <div class="contact-info">
          <div class="contact-item">
            <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <span>[email protected]</span>
          </div>
          <div class="contact-item">
            <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
            <span>+1 (555) 123-4567</span>
          </div>
          <div class="contact-item">
            <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <span>123 Business Ave, Suite 100, San Francisco, CA 94107</span>
          </div>
        </div>
        
        <!-- Copyright -->
        <p class="copyright">
          &copy; 2025 DevStack, Inc. All rights reserved.
        </p>
      </div>
    </div>
  </div>
</section>
            

                <!--
@type: Footer
@industry: Software
@style: Minimal
@category: Navigation, Page Section, Contact
@framework: Tailwind
@license: Free
-->
<section class="bg-white border-t border-gray-100" aria-labelledby="footer-heading">
  <h2 id="footer-heading" class="sr-only">Footer</h2>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="py-12 md:py-16 lg:py-20">
      <!-- Top section with logo and newsletter -->
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16">
        <!-- Logo and company info -->
        <div class="lg:col-span-4">
          <div class="flex items-center">
            <svg class="h-8 w-auto text-indigo-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 2L4.094 6.938C3.432 7.294 3 7.978 3 8.72V15.28C3 16.022 3.432 16.706 4.094 17.062L13 22L21.906 17.062C22.568 16.706 23 16.022 23 15.28V8.72C23 7.978 22.568 7.294 21.906 6.938L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M3 7L13 12L23 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M13 12V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="ml-2 text-xl font-semibold text-gray-900">DevStack</span>
          </div>
          <p class="mt-4 text-base text-gray-500 max-w-xs">
            Streamlining business operations for small businesses with powerful, easy-to-use software solutions.
          </p>
          <div class="mt-6 flex space-x-6">
            <a href="#" class="text-gray-400 hover:text-gray-500" aria-label="Facebook">
              <span class="sr-only">Facebook</span>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-gray-400 hover:text-gray-500" aria-label="Twitter">
              <span class="sr-only">Twitter</span>
              <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" />
              </svg>
            </a>
            <a href="#" class="text-gray-400 hover:text-gray-500" aria-label="LinkedIn">
              <span class="sr-only">LinkedIn</span>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" 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" clip-rule="evenodd" />
              </svg>
            </a>
          </div>
        </div>
        
        <!-- Newsletter -->
        <div class="lg:col-span-5 lg:col-start-8">
          <h3 class="text-base font-medium text-gray-900">Subscribe to our newsletter</h3>
          <p class="mt-2 text-sm text-gray-500">
            Get the latest updates, tips, and product news delivered straight to your inbox.
          </p>
          <form class="mt-4 sm:flex sm:max-w-md">
            <label for="email-address" class="sr-only">Email address</label>
            <input type="email" name="email-address" id="email-address" autocomplete="email" required class="appearance-none min-w-0 w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:placeholder-gray-400" placeholder="Enter your email">
            <div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
              <button type="submit" class="w-full bg-indigo-600 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Subscribe
              </button>
            </div>
          </form>
          <p class="mt-3 text-xs text-gray-500">
            By subscribing, you agree to our Privacy Policy and consent to receive updates from our company.
          </p>
        </div>
      </div>
      
      <!-- Navigation sections -->
      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 pb-12 border-b border-gray-100">
        <!-- Products -->
        <div>
          <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
            Products
          </h3>
          <ul role="list" class="mt-4 space-y-3">
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Business Suite
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Client Manager
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Finance Tools
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Project Tracker
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Reporting
              </a>
            </li>
          </ul>
        </div>
        
        <!-- Solutions -->
        <div>
          <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
            Solutions
          </h3>
          <ul role="list" class="mt-4 space-y-3">
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                For Startups
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                For Small Business
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                For Agencies
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                For E-commerce
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Enterprise
              </a>
            </li>
          </ul>
        </div>
        
        <!-- Resources -->
        <div>
          <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
            Resources
          </h3>
          <ul role="list" class="mt-4 space-y-3">
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Documentation
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Guides
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                API Reference
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Blog
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Community
              </a>
            </li>
          </ul>
        </div>
        
        <!-- Company -->
        <div>
          <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
            Company
          </h3>
          <ul role="list" class="mt-4 space-y-3">
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                About Us
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Careers
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Press
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Partners
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Contact
              </a>
            </li>
          </ul>
        </div>
        
        <!-- Legal -->
        <div>
          <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase">
            Legal
          </h3>
          <ul role="list" class="mt-4 space-y-3">
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Privacy Policy
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Terms of Service
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Cookie Policy
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                GDPR Compliance
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-600 hover:text-indigo-600 transition-colors duration-200">
                Security
              </a>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- Bottom section with copyright and contact -->
      <div class="pt-8 md:flex md:items-center md:justify-between">
        <!-- Contact info -->
        <div class="space-y-3 md:space-y-0 md:flex md:space-x-8 text-sm text-gray-500">
          <div class="flex items-center">
            <svg class="h-5 w-5 text-gray-400 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <span>[email protected]</span>
          </div>
          <div class="flex items-center">
            <svg class="h-5 w-5 text-gray-400 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
            <span>+1 (555) 123-4567</span>
          </div>
          <div class="flex items-center">
            <svg class="h-5 w-5 text-gray-400 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <span>123 Business Ave, Suite 100, San Francisco, CA 94107</span>
          </div>
        </div>
        
        <!-- Copyright -->
        <p class="mt-8 md:mt-0 text-sm text-gray-500">
          &copy; 2025 DevStack, Inc. All rights reserved.
        </p>
      </div>
    </div>
  </div>
</section>