AcaMate_Web/Program/Views/Project/About.razor
Seonkyu.kim f4d0138fec [] 페이지 개발
1. about 페이지 개발
2. 반응형 적용
3. 버튼 동작 적용
2025-05-28 15:05:52 +09:00

185 lines
11 KiB
Plaintext

@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>