@page "/about"

<div
  class="relative flex size-full w-full min-h-screen flex-col items-center bg-white group/design-root overflow-x-hidden"
  style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'>
  <div class="layout-container flex h-full grow flex-col">
    <div class="flex flex-1 justify-center">
      <div class="layout-content-container flex flex-col w-full max-w-[960px] flex-1 mx-auto">
        
        <!-- 상단 배너 영역 -->
        <div class="container">
          <div
            class="w-full flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat xs:gap-8 xs:rounded-lg items-start justify-end px-4 pb-10 xs:px-10"
            style='background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuDffY0eohqZnXKdWwIoiHloiYxZ1igyaJWtn7zdpfeze7pDhQuxV3MqvGueO1m-a38SDlXVEZUkd8es8cB8YvKHf8J-FIzTPFEHU4UnTNRBnX0XGv0EoZGrutA0kHnI_IA0k0SLtlU7NUK_7EcLabUHzALRgVZhcP98Bd-2GZl85-6ODqSHpe11pHXpyMz3RDDEzhDuHAwBBfJJaJG7zFC22X8Cc0K_V97Vf7jXfs-WYJ5CCrKAE3JpT2RUbdEJfiJHOkDh9yGWU1TB");'>
            <div class="flex flex-col w-full gap-2 text-right items-end">
              <h1
                class="text-white text-4xl font-black leading-tight tracking-[-0.033em] xs:text-5xl xs:font-black xs:leading-tight xs:tracking-[-0.033em] outline-none">
                모든 순간<br/>
                더 쉽고<br/>
                더 똑똑하게
              </h1>
              <h2 class="hidden md:block text-white text-sm font-normal leading-normal">
                AcaMate는 학원 관리를 더 쉽고, 학부모와의 소통을 더 가깝게, 학생의 성장을 더 든든하게 지원하는 통합 플랫폼입니다.
              </h2>
              <h2 class="block md:hidden text-white text-base font-normal leading-normal">
                AcaMate는 학원 관리를 더 쉽고, 학부모와의 소통을 더 가깝게,<br/>학생의 성장을 더 든든하게 지원하는 통합 플랫폼입니다.
              </h2>

              @* <button *@
              @*   class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 xs:h-12 xs:px-5 bg-[#0c7ff2] text-white text-sm font-bold leading-normal tracking-[0.015em] xs:text-base xs:font-bold xs:leading-normal xs:tracking-[0.015em]"> *@
              @*   <span class="truncate">Get Started</span> *@
              @* </button> *@
            </div>
          </div>
        </div>
        <!-- 상단 배너 영역 끝 -->

        <!-- 플랫폼 설명 영역 -->
        <div class="flex flex-col gap-10 px-4 py-10 container">
          <div class="flex flex-col gap-4">
            <h1
              class="hidden md:block text-text-title tracking-light text-[32px] font-bold leading-tight xs:text-4xl xs:font-black xs:leading-tight xs:tracking-[-0.033em] max-w-[720px]">
              AcaMate, 학원 운영의 새로운 기준
            </h1>
            <h1
              class="block md:hidden text-center text-text-title tracking-light text-[32px] font-bold leading-tight xs:text-4xl xs:font-black xs:leading-tight xs:tracking-[-0.033em] max-w-[720px]">
              학원 운영의 새로운 기준
            </h1>

            <p class="hidden md:block text-text-title text-base font-normal leading-normal max-w-[720px]">
              AcaMate는 학원 운영에 꼭 필요한 모든 기능을 하나의 플랫폼에 담아,
              사용자 관리부터 수업 일정, 출결 및 성과 추적까지 완벽하게 통합되어 있습니다.<br/>
              <br/>
              지
              금, 더 빠르고 스마트한 학원 운영을 경험해보세요.
            </p>
            <p class="block md:hidden text-text-title text-center text-base font-normal leading-normal max-w-[720px]">
              필요한 모든 기능을 하나로<br/>
              수업, 출결, 소통, 성과까지 모두 AcaMate에서<br/>
              지금, 스마트한 운영을 시작하세요.
            </p>
          </div>

          <div class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-0">
            <div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
              <img src="Resources/Images/Icon/Person.png" alt="Person" width="24px" height="24px">
              <div class="flex flex-col gap-1">
                <h2 class="text-[#111418] text-base font-bold leading-tight">사용자 통합 관리</h2>
                <p class="text-[#60758a] text-sm font-normal leading-normal">
                  학생, 교직원, 학부모를 한 곳에서 쉽고 빠르게 관리할 수 있습니다.
                </p>
              </div>
            </div>

            <div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
              <img src="Resources/Images/Icon/Calendar.png" alt="Calendar" width="24px" height="24px">
              <div class="flex flex-col gap-1">
                <h2 class="text-[#111418] text-base font-bold leading-tight">수업 & 일정 관리</h2>
                <p class="text-[#60758a] text-sm font-normal leading-normal">
                  드래그 앤 드롭 기반의 캘린더로 수업과 일정을 손쉽게 설정하세요.
                </p>
              </div>
            </div>

            <div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
              <img src="Resources/Images/Icon/Management.png" alt="Management" width="24px" height="24px">
              <div class="flex flex-col gap-1">
                <h2 class="text-[#111418] text-base font-bold leading-tight">출결 및 학습 추적</h2>
                <p class="text-[#60758a] text-sm font-normal leading-normal">
                  출결, 과제, 성과를 한눈에 확인하고 학생의 성장을 체계적으로 관리하세요.
                </p>
              </div>
            </div>

            <div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
              <img src="Resources/Images/Icon/Talk.png" alt="Talk" width="24px" height="24px">
              <div class="flex flex-col gap-1">
                <h2 class="text-[#111418] text-base font-bold leading-tight">통합 커뮤니케이션</h2>
                <p class="text-[#60758a] text-sm font-normal leading-normal">
                  공지, 상담, 실시간 알림은 물론
                  1:1 및 그룹 채팅까지 모든 소통이 가능합니다.
                </p>
              </div>
            </div>

          </div>
        </div>
        <!-- 플랫폼 설명 영역 끝 -->
        
        
        <div class="flex justify-center my-2">
          <span class="text-text-border text-6xl tracking-widest select-none">···</span>
        </div>


        <!-- 플랫폼 특징 영역 -->
        <div class="flex flex-col gap-10 px-4 py-10 container">
          <div class="flex flex-col gap-4">
            
            <div class="flex flex-col md:flex-row items-center gap-6">
              <div class="w-full md:w-1/2 h-64 bg-gray-200 rounded-xl flex items-center justify-center">
                <span class="text-gray-500">이미지 자리</span>
              </div>
              @* <img src="/images/feature1.png" alt="기능 이미지" class="w-full md:w-1/2 rounded-xl shadow"/> *@
              <div class="text-left md:w-1/2 space-y-2">
                <h3 class="text-xl font-semibold">사용자 통합 관리</h3>
                <p class="text-gray-600">학생, 교사, 학부모까지 한 화면에서 직관적으로 관리할 수 있습니다.</p>
              </div>
            </div>

            <div class="flex flex-col md:flex-row-reverse items-center gap-6">
              <div class="w-full md:w-1/2 h-64 bg-gray-200 rounded-xl flex items-center justify-center">
                <span class="text-gray-500">이미지 자리</span>
              </div>
              @* <img src="/images/feature2.png" alt="기능 이미지" class="w-full md:w-1/2 rounded-xl shadow"/> *@
              <div class="text-left md:w-1/2 space-y-2">
                <h3 class="text-xl font-semibold">수업 & 일정 관리</h3>
                <p class="text-gray-600">드래그 앤 드롭 기반의 캘린더로 수업과 일정을 손쉽게 설정하세요.</p>
              </div>
            </div>

            <div class="flex flex-col md:flex-row items-center gap-6">
              <div class="w-full md:w-1/2 h-64 bg-gray-200 rounded-xl flex items-center justify-center">
                <span class="text-gray-500">이미지 자리</span>
              </div>
              @* <img src="/images/feature1.png" alt="기능 이미지" class="w-full md:w-1/2 rounded-xl shadow"/> *@
              <div class="text-left md:w-1/2 space-y-2">
                <h3 class="text-xl font-semibold">출결 및 학습 추적</h3>
                <p class="text-gray-600">출결, 과제, 성과를 한눈에 확인하고 학생의 성장을 체계적으로 관리하세요.</p>
              </div>
            </div>

            <div class="flex flex-col md:flex-row-reverse items-center gap-6">
              <div class="w-full md:w-1/2 h-64 bg-gray-200 rounded-xl flex items-center justify-center">
                <span class="text-gray-500">이미지 자리</span>
              </div>
              @* <img src="/images/feature2.png" alt="기능 이미지" class="w-full md:w-1/2 rounded-xl shadow"/> *@
              <div class="text-left md:w-1/2 space-y-2">
                <h3 class="text-xl font-semibold">통합 커뮤니케이션</h3>
                <p class="text-gray-600">공지, 상담, 실시간 알림은 물론 1:1 및 그룹 채팅까지 모든 소통이 가능합니다.</p>
              </div>
            </div>

          </div>
        </div>
        <!-- 플랫폼 특징 영역 끝 -->
        
      </div>
    </div>

    <footer class="flex justify-center border-t border-text-border">
      <div class="flex max-w-[960px] flex-1 flex-col">
        <footer class="flex flex-col gap-6 px-5 py-10 text-center container">
          <div class="flex flex-wrap items-center justify-center gap-6 xs:flex-row xs:justify-around">
            <a class="text-[#60758a] text-base font-normal leading-normal min-w-40" href="#">Terms of Service</a>
            <a class="text-[#60758a] text-base font-normal leading-normal min-w-40" href="#">Privacy Policy</a>
            <a class="text-[#60758a] text-base font-normal leading-normal min-w-40" href="#">Contact Us</a>
          </div>
          <p class="text-[#60758a] text-base font-normal leading-normal">© 2024 AcaMate. All rights reserved.</p>
        </footer>
      </div>
    </footer>
  </div>
</div>