|
|
|
@ -1,145 +1,184 @@
|
|
|
|
|
@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> *@
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
|
|
@* <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&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&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> *@
|
|
|
|
|
<!-- 상단 배너 영역 -->
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
@* <body> *@
|
|
|
|
|
<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 [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 w-full gap-2 text-right items-end">
|
|
|
|
|
<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">
|
|
|
|
|
모든 순간<br />
|
|
|
|
|
더 쉽고<br />
|
|
|
|
|
더 똑똑하게
|
|
|
|
|
</h1>
|
|
|
|
|
<h2 class="text-white text-sm font-normal leading-normal [480px]:text-base [480px]:font-normal [480px]:leading-normal">
|
|
|
|
|
AcaMate는 학원 관리를 더 쉽고, 학부모와의 소통을 더 가깝게, 학생의 성장을 더 든든하게 지원하는 통합 플랫폼입니다.
|
|
|
|
|
</h2>
|
|
|
|
|
<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]">
|
|
|
|
|
AcaMate, 학원 운영의 새로운 기준
|
|
|
|
|
</h1>
|
|
|
|
|
<p class="text-[#111418] text-base font-normal leading-normal max-w-[720px]">
|
|
|
|
|
AcaMate로 복잡한 행정 업무를 간단히 처리하고, 학부모·학생과의 소통을 원활하게, 협력 중심의 교육 환경을 쉽게 만들어보세요.
|
|
|
|
|
</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 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>
|
|
|
|
|
@* <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>
|
|
|
|
|
<!-- 상단 배너 영역 끝 -->
|
|
|
|
|
|
|
|
|
|
<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 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>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
@* </body> *@
|
|
|
|
|
@* </html> *@
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|