kubeload/templates/partials/_footer.jinja

<footer class="mt-auto bg-white">
 <div class="w-full max-w-6xl mx-auto pt-10 lg:pt-20 px-4 sm:px-6 lg:px-8">
  <!-- Grid -->
  <div class="grid grid-cols-2 md:grid-cols-5 gap-5 mb-6 md:mb-14">
   <div class="col-span-2 md:col-span-1 h-full flex flex-row md:flex-col justify-between gap-5">
    <div>
     <!-- Logo -->
     <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80"
        href="/"
        aria-label="Kubeload">
      <svg class="w-24 h-auto"
           width="116"
           height="32"
           viewBox="0 0 24 24"
           fill="none"
           xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M2 10C2 5.61631 5.43583 2 9.75 2C13.4633 2 16.5282 4.68197 17.3077 8.22257C19.9376 8.2545 22 10.465 22 13.1111C22 15.7766 19.9073 18 17.25 18H9.75C5.43583 18 2 14.3837 2 10Z" fill="#155dfc" />
      </svg>
     </a>
     <!-- End Logo -->
    </div>
    <div>
     <!-- Social Brands -->
     <div class="-mx-2.5 flex flex-wrap items-center gap-1">
      <a class="flex flex-col justify-center items-center size-7 md:size-9 rounded-full text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
         href="#">
       <svg class="shrink-0 size-3.5"
            width="48"
            height="50"
            viewBox="0 0 48 50"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
        <path d="M28.5665 20.7714L46.4356 0H42.2012L26.6855 18.0355L14.2931 0H0L18.7397 27.2728L0 49.0548H4.23464L20.6196 30.0087L33.7069 49.0548H48L28.5655 20.7714H28.5665ZM22.7666 27.5131L5.76044 3.18778H12.2646L42.2032 46.012H35.699L22.7666 27.5142V27.5131Z" fill="currentColor" />
       </svg>
       <span class="sr-only">X (Twitter)</span>
      </a>
      <a class="flex flex-col justify-center items-center size-7 md:size-9 rounded-full text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
         href="#">
       <svg class="shrink-0 size-4"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round">
        <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
        <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
        <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
       </svg>
       <span class="sr-only">Instagram</span>
      </a>
     </div>
     <!-- End Social Brands -->
    </div>
   </div>
   <!-- End Col -->
   <div>
    <h4 class="mb-1 md:mb-3 font-medium text-sm text-gray-800">기업</h4>
    <ul class="grid md:space-y-2">
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">소개</a>
     </li>
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">채용</a>
     </li>
    </ul>
   </div>
   <!-- End Col -->
   <div>
    <h4 class="mb-1 md:mb-3 font-medium text-sm text-gray-800">제품</h4>
    <ul class="grid md:space-y-2">
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">클라우드</a>
     </li>
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">AI</a>
     </li>
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">저장소</a>
     </li>
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">DNS</a>
     </li>
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">로드밸런서</a>
     </li>
    </ul>
   </div>
   <div class="space-y-10">
    <h4 class="mb-1 md:mb-3 font-medium text-sm text-gray-800">법률</h4>
    <ul class="grid md:space-y-2">
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">신고 (Report Abuse)</a>
     </li>
    </ul>
   </div>
   <!-- End Col -->
   <!-- End Col -->
   <div>
    <h4 class="mb-1 md:mb-3 font-medium text-sm text-gray-800">도움</h4>
    <ul class="grid md:space-y-2">
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">고객센터</a>
     </li>
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">자주하는 질문</a>
     </li>
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">환불 정책</a>
     </li>
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">공정 사용 정책</a>
     </li>
     <li>
      <a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
         href="#">문의하기</a>
     </li>
    </ul>
   </div>
   <!-- End Col -->
  </div>
  <!-- End Grid -->
 </div>
 <div class="w-full max-w-6xl pb-10 lg:pb-20 mx-auto px-4 sm:px-6 lg:px-8">
  <div class="flex flex-wrap justify-between items-center gap-3">
   <!-- List -->
   <ul class="flex flex-wrap items-center whitespace-nowrap gap-3">
    <li class="inline-flex items-center relative text-xs text-gray-500 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:size-[3px] after:bg-gray-400 after:rounded-full after:-translate-y-1/2">
     <a class="text-xs text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
        href="#">이용약관</a>
    </li>
    <li class="inline-flex items-center relative text-xs text-gray-500 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:size-[3px] after:bg-gray-400 after:rounded-full after:-translate-y-1/2">
     <a class="text-xs text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
        href="#">개인정보처리방침</a>
    </li>
   </ul>
   <!-- End List -->
   <p class="text-xs text-gray-500">© 2025-2026 Kubeload.</p>
  </div>
 </div>
</footer>