kubeload/templates/partials/_contacts.jinja

<!-- Contact -->
<div id="contact" class="bg-neutral-50">
 <div class="max-w-5xl px-4 xl:px-0 py-10 lg:py-20 mx-auto">
  <!-- Title -->
  <div class="max-w-3xl mb-10 lg:mb-14">
   <h2 class="text-neutral-900 font-semibold text-2xl md:text-4xl md:leading-tight">이용문의</h2>
   <p class="mt-1 text-neutral-600">서비스 관련 어려운 점이나, 관심있는 서비스를 알려주세요.</p>
  </div>
  <!-- End Title -->
  <!-- Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-x-10 lg:gap-x-16">
   <div class="md:order-2 border-b border-neutral-200 pb-10 mb-10 md:border-b-0 md:pb-0 md:mb-0">
    <form>
     <div class="space-y-4">
      <!-- Input -->
      <div class="relative">
       <input type="text"
              id="hs-tac-input-name"
              class="peer p-3 sm:p-4 block w-full bg-neutral-100 border border-neutral-200 rounded-lg sm:text-sm text-neutral-900 placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-blue-500 disabled:opacity-50 disabled:pointer-events-none focus:pt-6 focus:pb-2 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 autofill:pt-6 autofill:pb-2"
              placeholder="Name">
       <label for="hs-tac-input-name"
              class="absolute top-0 start-0 p-3 sm:p-4 h-full text-neutral-500 text-sm truncate pointer-events-none transition ease-in-out duration-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-blue-500 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:text-neutral-500">
        이름
       </label>
      </div>
      <!-- End Input -->
      <!-- Input -->
      <div class="relative">
       <input type="email"
              id="hs-tac-input-email"
              class="peer p-3 sm:p-4 block w-full bg-neutral-100 border border-neutral-200 rounded-lg sm:text-sm text-neutral-900 placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-blue-500 disabled:opacity-50 disabled:pointer-events-none focus:pt-6 focus:pb-2 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 autofill:pt-6 autofill:pb-2"
              placeholder="Email">
       <label for="hs-tac-input-email"
              class="absolute top-0 start-0 p-3 sm:p-4 h-full text-neutral-500 text-sm truncate pointer-events-none transition ease-in-out duration-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-blue-500 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:text-neutral-500">
        이메일
       </label>
      </div>
      <!-- End Input -->
      <!-- Textarea -->
      <div class="relative">
       <textarea id="hs-tac-message"
                 class="peer p-3 sm:p-4 block w-full bg-neutral-100 border border-neutral-200 rounded-lg sm:text-sm text-neutral-900 placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-blue-500 disabled:opacity-50 disabled:pointer-events-none focus:pt-6 focus:pb-2 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 autofill:pt-6 autofill:pb-2"
                 placeholder="This is a textarea placeholder"
                 data-hs-textarea-auto-height></textarea>
       <label for="hs-tac-message"
              class="absolute top-0 start-0 p-3 sm:p-4 h-full text-neutral-500 text-sm truncate pointer-events-none transition ease-in-out duration-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-blue-500 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:text-neutral-500">
        프로젝트에 대해 알려주세요
       </label>
      </div>
      <!-- End Textarea -->
     </div>
     <div class="mt-2">
      <p class="text-xs text-neutral-500">평균 답변 시간은 평일 기준 1일 이내에요.</p>
      <p class="mt-5">
       <a class="group inline-flex items-center gap-x-2 py-2 px-3 bg-blue-600 font-medium text-sm text-white rounded-full focus:outline-hidden"
          href="#">
        보내기
        <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-0.5"
             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">
         <path d="M5 12h14" />
         <path d="m12 5 7 7-7 7" />
        </svg>
       </a>
      </p>
     </div>
    </form>
   </div>
   <!-- End Col -->
   <div class="space-y-14">
    <!-- Item -->
    <div class="flex gap-x-5">
     <svg class="shrink-0 size-6 text-neutral-400"
          xmlns="http://www.w3.org/2000/svg"
          프로젝트에
          대해
          알려주세요
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
      <circle cx="12" cy="10" r="3" />
     </svg>
     <div class="grow">
      <h4 class="text-neutral-900 font-semibold">주소:</h4>
      <address class="mt-1 text-neutral-600 text-sm not-italic">
       X
       <br>
       서울, 한국
      </address>
     </div>
    </div>
    <!-- End Item -->
    <!-- Item -->
    <div class="flex gap-x-5">
     <svg class="shrink-0 size-6 text-neutral-400"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
      <path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z" />
      <path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" />
     </svg>
     <div class="grow">
      <h4 class="text-neutral-900 font-semibold">이메일:</h4>
      <a class="mt-1 text-neutral-600 text-sm hover:text-neutral-800 focus:outline-hidden focus:text-neutral-800"
         href="#mailto:support@kubeload.com"
         target="_blank">support@kubeload.com</a>
     </div>
    </div>
    <!-- End Item -->
   </div>
   <!-- End Col -->
  </div>
  <!-- End Grid -->
 </div>
</div>
<!-- End Contact -->