@page "/about"

@* <div class="bg-blue-500 text-white p-4"> *@
@*     <h2 class="text-2xl font-bold">About Us</h2> *@
@*     <p class="mt-2">We are a team of passionate developers.</p> *@
@*     <p>이건 그냥 일반 텍스트텍스트텍스트텍스트텍스트</p> *@
@*      *@
@*     $1$ 클릭시 onClick 이벤트 발생 #1# *@
@*      *@
@*      *@
@*     <button class="bg-blue-700 text-white px-4 py-2 rounded hover:bg-blue-800"  *@
@*             @onclick="OnClickEvent"> *@
@*         Click Me *@
@*     </button> *@
@*      *@
@* </div> *@

@* <html> *@
@* <head> *@
@*   <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" /> *@
@*   <link *@
@*     rel="stylesheet" *@
@*     as="style" *@
@*     onload="this.rel='stylesheet'" *@
@*     href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800" *@
@*   /> *@
@* *@
@*   <title>Stitch Design</title> *@
@*   <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," /> *@
@* *@
@*   <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> *@
@* </head> *@

  @* <body> *@
    <div class="relative flex size-full min-h-screen flex-col 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 max-w-[960px] flex-1">
            <div class="container">
              <div class="[480px]:p-4">
                <div
                  class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat [480px]:gap-8 [480px]:rounded-lg items-start justify-end px-4 pb-10 [480px]: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 gap-2 text-left">
                    <h1
                      class="text-white text-4xl font-black leading-tight tracking-[-0.033em] [480px]:text-5xl [480px]:font-black [480px]:leading-tight [480px]:tracking-[-0.033em] outline-none"
                    >
                      Empowering Education, Together
                    </h1>
                    <h2 class="text-white text-sm font-normal leading-normal [480px]:text-base [480px]:font-normal [480px]:leading-normal">
                      AcaMate is your all-in-one platform for managing your academy, connecting with parents, and supporting student success.
                    </h2>
                  </div>
                  <button
                    class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 [480px]:h-12 [480px]:px-5 bg-[#0c7ff2] text-white text-sm font-bold leading-normal tracking-[0.015em] [480px]:text-base [480px]:font-bold [480px]:leading-normal [480px]: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="text-[#111418] tracking-light text-[32px] font-bold leading-tight [480px]:text-4xl [480px]:font-black [480px]:leading-tight [480px]:tracking-[-0.033em] max-w-[720px]"
                >
                  Streamline Your Academy Management
                </h1>
                <p class="text-[#111418] text-base font-normal leading-normal max-w-[720px]">
                  AcaMate offers a comprehensive suite of tools designed to simplify administrative tasks, enhance communication, and foster a collaborative learning environment.
                </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">
                  <div class="text-[#111418]" data-icon="Users" data-size="24px" data-weight="regular">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                      <path
                        d="M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z"
                      ></path>
                    </svg>
                  </div>
                  <div class="flex flex-col gap-1">
                    <h2 class="text-[#111418] text-base font-bold leading-tight">Manage Users</h2>
                    <p class="text-[#60758a] text-sm font-normal leading-normal">
                      Easily manage students, teachers, and administrators with intuitive user profiles and access controls.
                    </p>
                  </div>
                </div>
                <div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
                  <div class="text-[#111418]" data-icon="Calendar" data-size="24px" data-weight="regular">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                      <path
                        d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"
                      ></path>
                    </svg>
                  </div>
                  <div class="flex flex-col gap-1">
                    <h2 class="text-[#111418] text-base font-bold leading-tight">Schedule Classes</h2>
                    <p class="text-[#60758a] text-sm font-normal leading-normal">Organize and schedule classes, workshops, and events with a user-friendly calendar interface.</p>
                  </div>
                </div>
                <div class="flex flex-1 gap-3 rounded-lg border border-[#dbe0e6] bg-white p-4 flex-col">
                  <div class="text-[#111418]" data-icon="Presentation" data-size="24px" data-weight="regular">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                      <path
                        d="M216,40H136V24a8,8,0,0,0-16,0V40H40A16,16,0,0,0,24,56V176a16,16,0,0,0,16,16H79.36L57.75,219a8,8,0,0,0,12.5,10l29.59-37h56.32l29.59,37a8,8,0,1,0,12.5-10l-21.61-27H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,136H40V56H216V176Z"
                      ></path>
                    </svg>
                  </div>
                  <div class="flex flex-col gap-1">
                    <h2 class="text-[#111418] text-base font-bold leading-tight">Track Progress</h2>
                    <p class="text-[#60758a] text-sm font-normal leading-normal">Monitor student performance, attendance, and assignments to ensure academic success.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <footer class="flex justify-center">
          <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 [480px]:flex-row [480px]: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>
  @* </body> *@
@* </html> *@
