Paul.Kim/tst-claude-code-samples
1
0
Fork 0
generated from Paul.Kim/tpl-superclaude
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 모바일 UI/UX 개선 및 스크롤 기능 수정

Browse Source 
주요 변경 사항:
- 모바일 화면 하단에 플로팅 CTA 버튼을 추가하여 사용자 접근성을 높였습니다. 이 버튼은 '문의·신청' 섹션이 보일 때는 자동으로 숨겨집니다.
- 내비게이션 메뉴 링크 클릭 시, 고정된 헤더에 의해 섹션 제목이 가려지는 문제를 `scroll-margin-top` 속성을 사용하여 해결했습니다.
- 모바일 메뉴가 열린 상태에서 스크롤하면 자동으로 닫히도록 수정하여 사용성을 개선했습니다.
- 일부 제목과 로고의 폰트 크기를 반응형으로 조정하여 가독성을 높였습니다.
- 새로운 디자인 버전(airoum_1_6) 파일을 추가했습니다.
This commit is contained in:
Paul.Kim
2025-07-24 22:47:42 +09:00
parent 7cdba3dfc2
commit 0716113975
4 changed files with 1814 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
gallery/airoum_1_5.html
View File

@ -157,6 +157,13 @@
::-webkit-scrollbar-thumb:hover {
background: var(--pumpkin);
}
html {
scroll-behavior: smooth;
}
/* Set scroll margin on sections to prevent them from being covered by the fixed nav */
section[id] {
scroll-margin-top: 5rem; /* 80px */
}
</style>
</head>
<body class="bg-white">
@ -170,8 +177,8 @@
<div class="flex justify-between items-center h-16 sm:h-20">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center space-x-4">
<img src="images/logo.png" alt="AIROUM Logo" class="h-10">
<h1 class="text-2xl sm:text-3xl font-bold" style="color: var(--dark-green);">
<img src="images/logo.png" alt="AIROUM Logo" class="h-8 sm:h-10">
<h1 class="text-xl sm:text-3xl font-bold" style="color: var(--dark-green);">
AIROUM
</h1>
</div>
@ -197,14 +204,11 @@
</div>
<!-- Mobile Menu -->
<div class="md:hidden glass transform -translate-y-full transition-transform duration-300" id="mobile-menu">
<div class="md:hidden glass overflow-hidden transition-all duration-300 ease-in-out" id="mobile-menu" style="max-height: 0px;">
<div class="px-4 py-4 space-y-3">
<a href="#about" class="block px-4 py-2 text-gray-700 hover:text-[var(--pumpkin)]">회사소개</a>
<a href="#programs" class="block px-4 py-2 text-gray-700 hover:text-[var(--pumpkin)]">교육 프로그램</a>
<a href="#contact" class="block px-4 py-2 text-white rounded-full text-center"
style="background: var(--pumpkin);">
문의·신청
</a>
<a href="#contact" class="block px-4 py-2 text-gray-700 hover:text-[var(--pumpkin)]">문의·신청</a>
</div>
</div>
</nav>
@ -224,11 +228,11 @@
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex-grow flex flex-col justify-center">
<!-- Slider Container -->
<div id="hero-slider-container" class="relative w-full max-w-4xl mx-auto overflow-hidden">
<div id="hero-slider" class="flex transition-transform duration-700 ease-in-out">
<div id="hero-slider" class="flex items-center transition-transform duration-700 ease-in-out" style="min-height: 40vh;">
<!-- Slide 1: Hero Content -->
<div class="w-full flex-shrink-0">
<div class="text-center">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 animate-fade-in-up" style="color: var(--dark-green);">
<h1 class="text-3xl sm:text-5xl lg:text-6xl font-bold mb-6 animate-fade-in-up" style="color: var(--dark-green);">
생성형 AI 시대,<br>
<span class="gradient-text">기술을 넘어 미래를</span><br>
설계하는 사람을 키웁니다.
@ -260,7 +264,7 @@
<!-- CTA Buttons (Static) -->
<div class="flex flex-col sm:flex-row gap-4 justify-center mt-8 animate-fade-in-up" style="animation-delay: 0.4s;">
<button class="magnetic-btn px-8 py-3 rounded-full text-white font-semibold transition-all" style="background: var(--pumpkin);">
<button class="magnetic-btn px-8 py-3 rounded-full text-white font-semibold transition-all hidden sm:block" style="background: var(--pumpkin);">
무료 상담 신청
</button>
<button class="magnetic-btn px-8 py-3 rounded-full font-semibold transition-all" style="border: 2px solid var(--dark-green); color: var(--dark-green);">
@ -289,7 +293,7 @@
</section>
<!-- Why AIROUM Section -->
<section class="py-20 bg-gray-50" id="about">
<section class="py-20 bg-gray-50 scroll-mt-16 sm:scroll-mt-20" id="about">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4" style="color: var(--dark-green);">
@ -424,7 +428,7 @@
</section>
<!-- Programs Section -->
<section class="py-20" id="programs">
<section class="py-20 scroll-mt-16 sm:scroll-mt-20" id="programs">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 animate-on-scroll">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4" style="color: var(--dark-green);">
@ -729,7 +733,7 @@
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center text-white mb-12">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6">
생성형 AI는 단순한 유행이 아니라<br>
미래 교육의 기본값입니다.
</h2>
@ -754,9 +758,9 @@
</div>
<!-- Contact Form -->
<div class="max-w-2xl mx-auto" id="contact">
<div class="max-w-2xl mx-auto scroll-mt-16 sm:scroll-mt-20" id="contact">
<div class="bg-white rounded-3xl p-8 sm:p-12 shadow-2xl">
<h3 class="text-2xl sm:text-3xl font-bold text-center mb-8" style="color: var(--dark-green);">
<h3 class="text-xl sm:text-2xl font-bold text-center mb-8" style="color: var(--dark-green);">
무료 상담 및 교육 문의
</h3>
@ -807,7 +811,7 @@
<path d="M16.273 12.845L7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727v12.845z"/>
</svg>
</a>
<a href="https://instagram.com/aiyi\_choi" class="text-white hover:text-[var(--pumpkin)] transition-colors">
<a href="https://instagram.com/aiyi_choi" class="text-white hover:text-[var(--pumpkin)] transition-colors">
<span class="sr-only">Instagram</span>
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1112.324 0 6.162 6.162 0 01-12.324 0zM12 16a4 4 0 110-8 4 4 0 010 8zm4.965-10.405a1.44 1.44 0 112.881.001 1.44 1.44 0 01-2.881-.001z"/>
@ -821,6 +825,14 @@
</div>
</div>
</footer>
<!-- Mobile Floating CTA -->
<div id="mobile-cta" class="md:hidden fixed bottom-0 left-0 right-0 p-4 bg-white/80 backdrop-blur-xl z-40 transition-transform duration-500" style="box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
<a href="#contact" class="w-full block text-center px-6 py-3 rounded-full text-white font-semibold transition-all"
style="background: var(--pumpkin);">
무료 상담 및 교육 문의
</a>
</div>
<!-- Scripts -->
<script>
@ -894,23 +906,30 @@
document.querySelector('.scroll-progress').style.transform = `scaleX(${scrollPercent})`;
});
// Navbar Background on Scroll
// Navbar Background on Scroll & Mobile Menu management
const navbar = document.getElementById('navbar');
const mobileMenu = document.getElementById('mobile-menu');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('bg-white', 'shadow-lg');
} else {
navbar.classList.remove('bg-white', 'shadow-lg');
}
// Close mobile menu on scroll
if (mobileMenu && !mobileMenu.classList.contains('-translate-y-full')) {
mobileMenu.classList.add('-translate-y-full');
}
});
// Mobile Menu Toggle
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('-translate-y-full');
});
if (mobileMenuBtn) {
mobileMenuBtn.addEventListener('click', () => {
if (mobileMenu) {
mobileMenu.classList.toggle('-translate-y-full');
}
});
}
// Smooth Scroll for Anchor Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
@ -942,6 +961,24 @@
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
// Mobile CTA visibility
const mobileCta = document.getElementById('mobile-cta');
const contactSection = document.getElementById('contact');
const ctaObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
mobileCta.classList.add('translate-y-full');
} else {
mobileCta.classList.remove('translate-y-full');
}
});
}, { threshold: 0.1 });
if (contactSection) {
ctaObserver.observe(contactSection);
}
// Parallax Effect
const parallaxElements = document.querySelectorAll('.parallax-layer');