---
import AstroIcon from './AstroIcon.astro';
import Icon from './AstroIcon.astro';
---

<div class='bg-slate-900 py-6 pb-10 text-white sm:py-16'>
  <div class='container'>
    <p
      class='mb-8 flex flex-col justify-center gap-0 font-medium text-gray-400 sm:mb-16 sm:flex-row sm:gap-4'
    >
      <a
        class='border-b border-b-gray-700 px-2 py-1.5 transition-colors hover:text-white sm:border-b-0 sm:px-0 sm:py-0'
        href='/roadmaps'>Roadmaps</a
      >
      <a
        class='border-b border-b-gray-700 px-2 py-1.5 transition-colors hover:text-white sm:border-b-0 sm:px-0 sm:py-0'
        href='/best-practices'>Best Practices</a
      >
      <a
        class='border-b border-b-gray-700 px-2 py-1.5 transition-colors hover:text-white sm:border-b-0 sm:px-0 sm:py-0'
        href='/guides'>Guides</a
      >
      <a
        class='border-b border-b-gray-700 px-2 py-1.5 transition-colors hover:text-white sm:border-b-0 sm:px-0 sm:py-0'
        href='/videos'>Videos</a
      >
      <a
        class='border-b border-b-gray-700 px-2 py-1.5 transition-colors hover:text-white sm:border-b-0 sm:px-0 sm:py-0'
        href='/about'>FAQs</a
      >
      <a
        class='px-2 py-1.5 transition-colors hover:text-white sm:border-b-0 sm:px-0 sm:py-0'
        href='https://youtube.com/theroadmap?sub_confirmation=1'
        target='_blank'>YouTube</a
      >
    </p>

    <div class='flex flex-col justify-between gap-12 sm:flex-row'>
      <div class='max-w-[365px]'>
        <p class='text-md flex items-center'>
          <a
            class='inline-flex items-center text-lg font-medium text-white transition-colors hover:text-gray-400'
            href='/'
          >
            <Icon icon='logo' />
            <span class='ml-2'>roadmap.sh</span>
          </a>
          <span class='mx-2 text-gray-400'>by</span>
          <a
            class='font-regular rounded-md bg-blue-600 px-1.5 py-1 text-sm hover:bg-blue-700'
            href='https://twitter.com/kamrify'
            target='_blank'
          >
            <span class='hidden sm:inline'>@kamrify</span>
            <span class='inline sm:hidden'>Kamran Ahmed</span>
          </a>
        </p>
        <p class='my-4 text-slate-300/60'>
          Community created roadmaps, articles, resources and journeys to help
          you choose your path and grow in your career.
        </p>
        <div class='text-sm text-gray-400'>
          <p>
            &copy; roadmap.sh
            <span class='mx-1.5'>&middot;</span>
            <a href='/terms' class='hover:text-white'>Terms</a>
            <span class='mx-1.5'>&middot;</span>
            <a href='/privacy' class='hover:text-white'>Privacy</a>
            <span class='mx-1.5'>&middot;</span>
            <a
              aria-label='Write us an email'
              href='mailto:info@roadmap.sh'
              class='hover:text-white'
            >
              <AstroIcon icon='letter' class='inline-block h-5 w-5' />
            </a>
            <a
              aria-label='Subscribe to YouTube channel'
              href='https://youtube.com/theroadmap?sub_confirmation=1'
              target='_blank'
              class='ml-2 hover:text-white'
            >
              <AstroIcon icon='youtube' class='inline-block h-5 w-5' />
            </a>
            <a
              aria-label='Follow on Twitter'
              href='https://twitter.com/roadmapsh'
              target='_blank'
              class='ml-2 hover:text-white'
            >
              <AstroIcon
                icon='twitter-fill'
                class='inline-block h-5 w-5 fill-current'
              />
            </a>
          </p>
        </div>
      </div>

      <div class='max-w-[365px] text-left sm:text-right'>
        <a href='https://thenewstack.io' target='_blank'>
          <img
            src='/images/tns-sm.png'
            alt='ThewNewStack'
            class='my-1.5 mr-auto sm:ml-auto sm:mr-0'
            width='200'
            height='24.8'
            loading="lazy"
          />
        </a>
        <p class='my-4 text-slate-300/60'>
          The leading DevOps resource for Kubernetes, cloud-native computing,
          and the latest in at-scale development, deployment, and management.
        </p>
        <div class='text-sm text-gray-400'>
          <p>
            <a
              href='https://thenewstack.io/category/devops?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Footer'
              target='_blank'
              class='text-gray-400 hover:text-white'>DevOps</a
            >
            <span class='mx-1.5'>&middot;</span>
            <a
              href='https://thenewstack.io/category/kubernetes?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Footer'
              target='_blank'
              class='text-gray-400 hover:text-white'>Kubernetes</a
            >
            <span class='mx-1.5'>&middot;</span>
            <a
              href='https://thenewstack.io/category/cloud-native?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Footer'
              target='_blank'
              class='text-gray-400 hover:text-white'>Cloud-Native</a
            >
          </p>
        </div>
      </div>
    </div>
  </div>
</div>