Mega Links Footer

<!--
  Five columns of links under a brand row. The grid steps 2 -> 3 -> 5 by
  breakpoint, never five abreast on a phone: at 320px five columns are 50px
  each, which is not a sitemap, it is confetti. The 3-column step at sm leaves
  two groups on a second row - an orphan row reads better than a squeeze.
-->
<footer class="border-t border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
  <div class="mx-auto max-w-6xl px-4 pb-8 pt-12">
    <div class="max-w-sm">
      <a href="/" class="text-lg font-bold text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-50 dark:focus-visible:ring-blue-400">Adysre</a>
      <p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
        One platform for planning, building and shipping product.
      </p>
    </div>

    <nav aria-label="Footer" class="mt-10">
      <div class="grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
        <div>
          <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 dark:text-gray-400">Product</h2>
          <ul class="flex flex-col gap-2">
            <li><a href="/features" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400">Features</a></li>
            <li><a href="/integrations" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Integrations</a></li>
            <li><a href="/pricing" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Pricing</a></li>
            <li><a href="/changelog" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Changelog</a></li>
          </ul>
        </div>

        <div>
          <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 dark:text-gray-400">Solutions</h2>
          <ul class="flex flex-col gap-2">
            <li><a href="/startups" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Startups</a></li>
            <li><a href="/enterprise" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Enterprise</a></li>
            <li><a href="/agencies" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Agencies</a></li>
            <li><a href="/education" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Education</a></li>
          </ul>
        </div>

        <div>
          <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 dark:text-gray-400">Resources</h2>
          <ul class="flex flex-col gap-2">
            <li><a href="/docs" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Docs</a></li>
            <li><a href="/guides" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Guides</a></li>
            <li><a href="/api" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">API reference</a></li>
            <li><a href="/community" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Community</a></li>
          </ul>
        </div>

        <div>
          <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 dark:text-gray-400">Company</h2>
          <ul class="flex flex-col gap-2">
            <li><a href="/about" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">About</a></li>
            <li><a href="/blog" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Blog</a></li>
            <li><a href="/careers" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Careers</a></li>
            <li><a href="/press" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Press</a></li>
          </ul>
        </div>

        <div>
          <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 dark:text-gray-400">Legal</h2>
          <ul class="flex flex-col gap-2">
            <li><a href="/privacy" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Privacy</a></li>
            <li><a href="/terms" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Terms</a></li>
            <li><a href="/security" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Security</a></li>
            <li><a href="/cookies" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Cookies</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

  <div class="border-t border-gray-200 dark:border-gray-800">
    <p class="mx-auto max-w-6xl p-4 text-[0.8125rem] text-gray-500 dark:text-gray-400">
      © <time datetime="2026">2026</time> Adysre Inc.
    </p>
  </div>
</footer>