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

Compare commits

base: Paul.Kim:7cdba3dfc24158607bb483f90a07deafa5c36c33
Branches Tags
Paul.Kim:main
...
compare: Paul.Kim:main
Branches Tags
Paul.Kim:main

1 Commits
7cdba3dfc2 ... main

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

79
.superdesign/design_iterations/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"/>
@ -822,6 +826,14 @@
</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>
// Hero Slider
@ -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');
if (mobileMenuBtn) {
mobileMenuBtn.addEventListener('click', () => {
if (mobileMenu) {
mobileMenu.classList.toggle('-translate-y-full');
}
});
}
// Smooth Scroll for Anchor Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
@ -943,6 +962,24 @@
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');

846
.superdesign/design_iterations/airoum_1_6.html Normal file
View File

@ -0,0 +1,846 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIROUM - AI 교육의 새로운 기준</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<style>
/* Custom Fonts */
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
/* Custom Properties */
:root {
--pumpkin: #F4762F;
--pumpkin-light: #F69258;
--pumpkin-dark: #DD580C;
--dark-green: #16332D;
--dark-green-light: #306F63;
--dark-green-darker: #0D1E1B;
--slate: #3C5751;
--slate-light: #5A8279;
--slate-dark: #243431;
--silver: #BCC4C2;
--white: #FEFEFE;
--black: #111827;
--gray-dark: #374151;
--gray: #6B7280;
--gray-light: #9CA3AF;
}
/* Base Styles */
body {
font-family: 'Pretendard-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
color: var(--gray-dark) !important;
background-color: var(--white) !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'GmarketSansMedium', sans-serif !important;
color: var(--dark-green) !important;
line-height: 1.2 !important;
}
/* Custom Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-fadeInUp {
animation: fadeInUp 0.8s ease-out forwards;
opacity: 0;
}
.animate-slideInLeft {
animation: slideInLeft 0.6s ease-out forwards;
opacity: 0;
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 2s ease-in-out infinite;
}
/* Gradient Backgrounds */
.gradient-light {
background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFB 100%);
}
.gradient-dark {
background: linear-gradient(135deg, var(--dark-green) 0%, var(--dark-green-light) 100%);
}
/* Button Styles */
.btn-primary {
background-color: var(--pumpkin) !important;
color: var(--white) !important;
padding: 1rem 2rem !important;
border-radius: 9999px !important;
font-weight: 500 !important;
transition: all 0.3s ease-out !important;
box-shadow: 0 4px 14px rgba(244, 118, 47, 0.25) !important;
}
.btn-primary:hover {
background-color: var(--pumpkin-dark) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(244, 118, 47, 0.35) !important;
}
.btn-secondary {
background-color: transparent !important;
color: var(--dark-green) !important;
padding: 1rem 2rem !important;
border: 2px solid var(--silver) !important;
border-radius: 9999px !important;
font-weight: 500 !important;
transition: all 0.3s ease-out !important;
}
.btn-secondary:hover {
background-color: var(--dark-green-light) !important;
color: var(--white) !important;
border-color: var(--dark-green-light) !important;
}
/* Card Styles */
.card-elegant {
background: white;
border-radius: 1.5rem;
padding: 2rem;
transition: all 0.3s ease-out;
box-shadow: 0 4px 6px -1px rgba(22, 51, 45, 0.08),
0 2px 4px -1px rgba(22, 51, 45, 0.04);
}
.card-elegant:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(22, 51, 45, 0.10),
0 10px 10px -5px rgba(22, 51, 45, 0.04);
}
/* Input Styles */
.input-elegant {
width: 100%;
padding: 1rem 1.5rem;
background-color: white;
border: 2px solid var(--silver);
border-radius: 1rem;
color: var(--gray-dark);
transition: all 0.2s ease-out;
box-shadow: inset 0 2px 4px rgba(22, 51, 45, 0.04);
}
.input-elegant:focus {
border-color: var(--dark-green-light);
outline: none;
box-shadow: inset 0 2px 4px rgba(22, 51, 45, 0.04),
0 0 0 4px rgba(48, 111, 99, 0.1);
}
/* Slider Styles */
.slider-container {
position: relative;
overflow: hidden;
}
.slider-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.slider-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.slider-button:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* Scroll Animations */
.scroll-animate {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.scroll-animate.active {
opacity: 1;
transform: translateY(0);
}
/* Header Scroll Effect */
.header-scrolled {
background-color: rgba(254, 254, 254, 0.95) !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
</style>
</head>
<body>
<!-- Header -->
<header id="header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<nav class="container mx-auto px-6 py-6">
<div class="flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center">
<h1 class="text-2xl font-bold" style="color: var(--pumpkin)">AIROUM</h1>
</div>
<!-- Navigation -->
<div class="hidden md:flex items-center space-x-8">
<a href="#about" class="text-gray-700 hover:text-pumpkin transition">회사소개</a>
<a href="#programs" class="text-gray-700 hover:text-pumpkin transition">교육 프로그램</a>
<a href="#contact" class="btn-primary">문의·신청</a>
</div>
<!-- Mobile Menu Button -->
<button class="md:hidden" onclick="toggleMobileMenu()">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Hero Section with Slider -->
<section class="pt-24 pb-16 px-6">
<div class="container mx-auto max-w-6xl">
<div class="relative overflow-hidden rounded-3xl gradient-light" style="min-height: 500px;">
<div class="slider-container">
<div class="slider-track" id="heroSlider">
<!-- Slide 1: Hero -->
<div class="w-full flex-shrink-0 p-12 md:p-20 animate-fadeInUp">
<div class="max-w-3xl">
<h2 class="text-4xl md:text-6xl mb-6 leading-tight">
생성형 AI 시대,<br>
기술을 넘어 미래를 설계하는<br>
<span style="color: var(--pumpkin)">사람을 키웁니다</span>
</h2>
<div class="w-20 h-1 mb-6 rounded-full" style="background-color: var(--pumpkin)"></div>
<p class="text-lg md:text-xl mb-8 text-gray-600 leading-relaxed">
에이로움은 'AI(인공지능)'와 '새로움'의 가치를 융합한 AI 교육 전문 연구소입니다.<br>
AI 개발자와 교육 전문가가 함께 만든 현장 중심 교육으로<br>
당신의 성장을 돕는 든든한 동반자가 되겠습니다.
</p>
<div class="flex flex-wrap gap-4">
<button class="btn-primary">무료 상담 신청</button>
<button class="btn-secondary">프로그램 보기</button>
</div>
</div>
</div>
<!-- Slide 2: CEO Introduction -->
<div class="w-full flex-shrink-0 p-12 md:p-20">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="w-48 h-48 rounded-full overflow-hidden shadow-xl">
<img src="https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?w=400&h=400&fit=crop"
alt="최아영 대표" class="w-full h-full object-cover">
</div>
<div class="flex-1 text-center md:text-left">
<h3 class="text-3xl mb-2">최아영 대표</h3>
<p class="text-xl mb-4" style="color: var(--dark-green-light)">AI 교육 기획 전문가</p>
<blockquote class="text-2xl mb-6 italic" style="color: var(--pumpkin)">
"AI로 아이들의 상상력에 날개를 달아줍니다"
</blockquote>
<p class="text-gray-600 leading-relaxed">
10년 이상의 교육 기획 경험과 AI 기술 전문성을 바탕으로<br>
실질적이고 혁신적인 AI 교육 프로그램을 개발하고 있습니다.
</p>
</div>
</div>
</div>
</div>
<!-- Slider Controls -->
<button class="slider-button left-4" onclick="previousSlide()">
<i data-lucide="chevron-left" class="w-6 h-6"></i>
</button>
<button class="slider-button right-4" onclick="nextSlide()">
<i data-lucide="chevron-right" class="w-6 h-6"></i>
</button>
<!-- Slider Indicators -->
<div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex gap-2">
<button class="w-2 h-2 rounded-full bg-pumpkin transition-all duration-300" id="indicator-0"></button>
<button class="w-2 h-2 rounded-full bg-gray-300 transition-all duration-300" id="indicator-1"></button>
</div>
</div>
</div>
</div>
</section>
<!-- Why AIROUM Section -->
<section id="about" class="py-20 scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl mb-4">왜 에이로움인가?</h2>
<div class="w-20 h-1 mx-auto rounded-full" style="background-color: var(--pumpkin)"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Value Card 1 -->
<div class="card-elegant text-center scroll-animate" style="animation-delay: 0.1s">
<div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background-color: rgba(244, 118, 47, 0.1)">
<i data-lucide="zap" class="w-8 h-8" style="color: var(--pumpkin)"></i>
</div>
<h3 class="text-xl mb-2">실천형 교육</h3>
<p class="text-lg mb-3" style="color: var(--pumpkin)">"배우고 바로 쓴다"</p>
<p class="text-gray-600">이론 중심 교육을 넘어, 수업, 연수, 실무에 바로 적용할 수 있는 현장 밀착형 교육을 제공합니다.</p>
</div>
<!-- Value Card 2 -->
<div class="card-elegant text-center scroll-animate" style="animation-delay: 0.2s">
<div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background-color: rgba(48, 111, 99, 0.1)">
<i data-lucide="map-pin" class="w-8 h-8" style="color: var(--dark-green-light)"></i>
</div>
<h3 class="text-xl mb-2">열린 교육</h3>
<p class="text-lg mb-3" style="color: var(--dark-green-light)">"지역 격차 없는 기회"</p>
<p class="text-gray-600">서울, 수도권에 집중된 교육 기회를 넘어, 지역 거점 센터를 통해 전국 어디서나 고품질 교육을 제공합니다.</p>
</div>
<!-- Value Card 3 -->
<div class="card-elegant text-center scroll-animate" style="animation-delay: 0.3s">
<div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background-color: rgba(244, 118, 47, 0.1)">
<i data-lucide="share-2" class="w-8 h-8" style="color: var(--pumpkin)"></i>
</div>
<h3 class="text-xl mb-2">융합형 교육</h3>
<p class="text-lg mb-3" style="color: var(--pumpkin)">"경계를 허무는 연결"</p>
<p class="text-gray-600">진로 설계, 교과 프로젝트, 업무 실무까지 생성형 AI와 자연스럽게 연결하여 유기적으로 엮은 융합 교육을 운영합니다.</p>
</div>
<!-- Value Card 4 -->
<div class="card-elegant text-center scroll-animate" style="animation-delay: 0.4s">
<div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background-color: rgba(48, 111, 99, 0.1)">
<i data-lucide="award" class="w-8 h-8" style="color: var(--dark-green-light)"></i>
</div>
<h3 class="text-xl mb-2">검증된 전문성</h3>
<p class="text-lg mb-3" style="color: var(--dark-green-light)">"전문가들의 협업"</p>
<p class="text-gray-600">AI 개발자와 교육 전문가가 협업하여 제작한 신뢰도 높은 커리큘럼과 현장에서 다듬어진 전문 강사진이 직접 수업합니다.</p>
</div>
</div>
</div>
</section>
<!-- Programs Section -->
<section id="programs" class="py-20 gradient-light scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl mb-4">교육 프로그램</h2>
<div class="w-20 h-1 mx-auto rounded-full" style="background-color: var(--pumpkin)"></div>
</div>
<!-- Program Slider -->
<div class="relative">
<div class="slider-container overflow-hidden">
<div class="slider-track flex gap-6" id="programSlider">
<!-- Program Card 1 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop"
alt="AI 진로·직업 프로젝트" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(244, 118, 47, 0.1); color: var(--pumpkin)">학생</span>
<h3 class="text-xl mt-3 mb-2">AI 진로·직업 프로젝트</h3>
<p class="text-gray-600 mb-4">생성형 AI로 흥미와 강점을 탐색하고 진로를 설계하는 수업</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 2 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?w=400&h=300&fit=crop"
alt="AI 교과 연계 프로젝트" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(244, 118, 47, 0.1); color: var(--pumpkin)">학생</span>
<h3 class="text-xl mt-3 mb-2">AI 교과 연계 프로젝트</h3>
<p class="text-gray-600 mb-4">국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트 수업</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 3 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1531482615713-2afd69097998?w=400&h=300&fit=crop"
alt="AI 윤리 교육" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(48, 111, 99, 0.1); color: var(--dark-green-light)">모두</span>
<h3 class="text-xl mt-3 mb-2">AI 윤리 교육</h3>
<p class="text-gray-600 mb-4">AI 시대에 필요한 디지털 윤리와 책임감을 배우는 시민 교육</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 4 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=400&h=300&fit=crop"
alt="생성형 AI 실무 활용" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(48, 111, 99, 0.1); color: var(--dark-green-light)">교사·기업</span>
<h3 class="text-xl mt-3 mb-2">생성형 AI 실무 활용</h3>
<p class="text-gray-600 mb-4">텍스트·이미지·영상 등 생성형 AI 도구를 실습하는 실무 중심 교육</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 5 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=400&h=300&fit=crop"
alt="교사·공무원 연수" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(48, 111, 99, 0.1); color: var(--dark-green-light)">교사·공무원</span>
<h3 class="text-xl mt-3 mb-2">교사·공무원 연수</h3>
<p class="text-gray-600 mb-4">현장 적용 중심의 워크숍형 AI 연수 프로그램</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 6 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1559526324-4b87b5e36e44?w=400&h=300&fit=crop"
alt="AI 금융 활용 교육" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(244, 118, 47, 0.1); color: var(--pumpkin)">학생·일반인</span>
<h3 class="text-xl mt-3 mb-2">AI 금융 활용 교육</h3>
<p class="text-gray-600 mb-4">생성형 AI로 금융 정보를 탐색하고 자산을 관리하는 실습 교육</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 7 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1573166364524-d9dbfd8bbf83?w=400&h=300&fit=crop"
alt="생성형 AI 강사 양성" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(48, 111, 99, 0.1); color: var(--dark-green-light)">강사</span>
<h3 class="text-xl mt-3 mb-2">생성형 AI 강사 양성</h3>
<p class="text-gray-600 mb-4">생성형 AI 교육 전문가로 성장하기 위한 실전 중심 양성 과정</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
</div>
</div>
<!-- Program Slider Controls -->
<button class="slider-button -left-6" onclick="programSliderPrev()">
<i data-lucide="chevron-left" class="w-6 h-6"></i>
</button>
<button class="slider-button -right-6" onclick="programSliderNext()">
<i data-lucide="chevron-right" class="w-6 h-6"></i>
</button>
</div>
</div>
</section>
<!-- Target Audience Section -->
<section class="py-20 scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl mb-4">이런 분들께 필요합니다</h2>
<div class="w-20 h-1 mx-auto rounded-full" style="background-color: var(--pumpkin)"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="text-center scroll-animate" style="animation-delay: 0.1s">
<div class="w-24 h-24 mx-auto mb-4 rounded-full flex items-center justify-center gradient-light">
<i data-lucide="book-open" class="w-12 h-12" style="color: var(--dark-green)"></i>
</div>
<h3 class="text-lg font-semibold mb-2">AI 교육이 막막한 교사</h3>
<p class="text-pumpkin font-medium mb-2">"수업에 바로 쓸 수 있는 실전 콘텐츠"</p>
<p class="text-gray-600">를 제공합니다.</p>
</div>
<div class="text-center scroll-animate" style="animation-delay: 0.2s">
<div class="w-24 h-24 mx-auto mb-4 rounded-full flex items-center justify-center gradient-light">
<i data-lucide="map" class="w-12 h-12" style="color: var(--dark-green)"></i>
</div>
<h3 class="text-lg font-semibold mb-2">지역에서도 수준 높은 교육을 만들고 싶은 기획자</h3>
<p class="text-pumpkin font-medium mb-2">"지역 거점 운영 모델과 검증된 커리큘럼"</p>
<p class="text-gray-600">이 준비돼 있습니다.</p>
</div>
<div class="text-center scroll-animate" style="animation-delay: 0.3s">
<div class="w-24 h-24 mx-auto mb-4 rounded-full flex items-center justify-center gradient-light">
<i data-lucide="presentation" class="w-12 h-12" style="color: var(--dark-green)"></i>
</div>
<h3 class="text-lg font-semibold mb-2">AI 강사가 되고 싶은 분</h3>
<p class="text-pumpkin font-medium mb-2">"실전형 양성과정"</p>
<p class="text-gray-600">을 제공합니다.</p>
</div>
<div class="text-center scroll-animate" style="animation-delay: 0.4s">
<div class="w-24 h-24 mx-auto mb-4 rounded-full flex items-center justify-center gradient-light">
<i data-lucide="sparkles" class="w-12 h-12" style="color: var(--dark-green)"></i>
</div>
<h3 class="text-lg font-semibold mb-2">AI 시대를 살아갈 학생들</h3>
<p class="text-pumpkin font-medium mb-2">"진로 설계와 아이디어 실현 기회"</p>
<p class="text-gray-600">를 제공합니다.</p>
</div>
</div>
</div>
</section>
<!-- Track Record Section -->
<section class="py-20 gradient-light scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl mb-4">교육 실적</h2>
<div class="w-20 h-1 mx-auto rounded-full" style="background-color: var(--pumpkin)"></div>
</div>
<!-- Partner Logos -->
<div class="flex flex-wrap justify-center items-center gap-8 mb-12">
<div class="w-32 h-16 bg-gray-200 rounded-lg animate-pulse-slow"></div>
<div class="w-32 h-16 bg-gray-200 rounded-lg animate-pulse-slow" style="animation-delay: 0.2s"></div>
<div class="w-32 h-16 bg-gray-200 rounded-lg animate-pulse-slow" style="animation-delay: 0.4s"></div>
<div class="w-32 h-16 bg-gray-200 rounded-lg animate-pulse-slow" style="animation-delay: 0.6s"></div>
</div>
<!-- Statistics -->
<div class="grid md:grid-cols-3 gap-8 text-center">
<div class="scroll-animate" style="animation-delay: 0.1s">
<h3 class="text-5xl font-bold mb-2" style="color: var(--pumpkin)">
<span class="counter" data-target="1000">0</span>+
</h3>
<p class="text-xl text-gray-700">수강생</p>
</div>
<div class="scroll-animate" style="animation-delay: 0.2s">
<h3 class="text-5xl font-bold mb-2" style="color: var(--dark-green-light)">
<span class="counter" data-target="50">0</span>+
</h3>
<p class="text-xl text-gray-700">협력기관</p>
</div>
<div class="scroll-animate" style="animation-delay: 0.3s">
<h3 class="text-5xl font-bold mb-2" style="color: var(--pumpkin)">
<span class="counter" data-target="98">0</span>%
</h3>
<p class="text-xl text-gray-700">만족도</p>
</div>
</div>
</div>
</section>
<!-- Closing Message -->
<section class="py-20 scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center max-w-3xl mx-auto">
<h2 class="text-2xl md:text-3xl mb-6">마무리</h2>
<div class="w-20 h-1 mx-auto mb-8 rounded-full" style="background-color: var(--pumpkin)"></div>
<p class="text-xl mb-6 leading-relaxed text-gray-700">
생성형 AI는 단순한 유행이 아니라<br>
<span class="font-semibold" style="color: var(--dark-green)">미래 교육의 기본값입니다.</span>
</p>
<p class="text-lg mb-8 text-gray-600">
에이로움이 그 시작이 되어드리겠습니다.
</p>
<div class="text-left max-w-md mx-auto">
<p class="flex items-center mb-2">
<i data-lucide="check" class="w-5 h-5 mr-2" style="color: var(--pumpkin)"></i>
교육에 변화를 주고 싶다면
</p>
<p class="flex items-center">
<i data-lucide="check" class="w-5 h-5 mr-2" style="color: var(--pumpkin)"></i>
더 실천적인 AI 교육을 찾고 있다면
</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 gradient-light scroll-animate">
<div class="container mx-auto px-6 max-w-2xl">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl mb-4">궁금한 점이 있다면, 지금 바로 문의하세요</h2>
</div>
<form class="card-elegant" onsubmit="handleSubmit(event)">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium mb-2" style="color: var(--dark-green)">이름</label>
<input type="text" class="input-elegant" placeholder="성함을 입력해주세요" required>
</div>
<div>
<label class="block text-sm font-medium mb-2" style="color: var(--dark-green)">연락처</label>
<input type="tel" class="input-elegant" placeholder="010-0000-0000" required>
</div>
<div>
<label class="block text-sm font-medium mb-2" style="color: var(--dark-green)">이메일</label>
<input type="email" class="input-elegant" placeholder="email@example.com" required>
</div>
<div>
<label class="block text-sm font-medium mb-2" style="color: var(--dark-green)">문의내용</label>
<textarea rows="4" class="input-elegant" placeholder="문의하실 내용을 자유롭게 작성해주세요" required></textarea>
</div>
<button type="submit" class="btn-primary w-full">
문의하기
</button>
</div>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="py-12 bg-gray-50">
<div class="container mx-auto px-6 text-center">
<h3 class="text-xl font-bold mb-4" style="color: var(--dark-green)">에이로움 교육연구소</h3>
<p class="text-gray-600 mb-2">대표: 최아영 | 연락처: 010-5095-8821</p>
<p class="text-gray-600 mb-6">서울특별시 송파구 오금로 11길 55, 214-88호</p>
<div class="flex justify-center gap-4">
<a href="#" class="text-gray-600 hover:text-pumpkin transition">
<span class="flex items-center gap-2">
<i data-lucide="pen-square" class="w-5 h-5"></i>
Blog
</span>
</a>
<a href="#" class="text-gray-600 hover:text-pumpkin transition">
<span class="flex items-center gap-2">
<i data-lucide="instagram" class="w-5 h-5"></i>
Instagram
</span>
</a>
</div>
</div>
</footer>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Hero Slider
let currentSlide = 0;
const heroSlider = document.getElementById('heroSlider');
const totalSlides = 2;
function updateSlider() {
heroSlider.style.transform = `translateX(-${currentSlide * 100}%)`;
// Update indicators
for (let i = 0; i < totalSlides; i++) {
const indicator = document.getElementById(`indicator-${i}`);
if (i === currentSlide) {
indicator.classList.add('bg-pumpkin', 'w-8');
indicator.classList.remove('bg-gray-300', 'w-2');
} else {
indicator.classList.remove('bg-pumpkin', 'w-8');
indicator.classList.add('bg-gray-300', 'w-2');
}
}
}
function nextSlide() {
currentSlide = (currentSlide + 1) % totalSlides;
updateSlider();
}
function previousSlide() {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
updateSlider();
}
// Auto-slide every 5 seconds
setInterval(nextSlide, 5000);
// Program Slider
let programSlideIndex = 0;
const programSlider = document.getElementById('programSlider');
const programCards = programSlider.children.length;
const cardsPerView = window.innerWidth >= 1024 ? 3 : window.innerWidth >= 768 ? 2 : 1;
function programSliderNext() {
if (programSlideIndex < programCards - cardsPerView) {
programSlideIndex++;
updateProgramSlider();
}
}
function programSliderPrev() {
if (programSlideIndex > 0) {
programSlideIndex--;
updateProgramSlider();
}
}
function updateProgramSlider() {
const slideWidth = 100 / cardsPerView;
programSlider.style.transform = `translateX(-${programSlideIndex * slideWidth}%)`;
}
// Scroll Animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
// Counter animation for statistics
if (entry.target.querySelector('.counter')) {
const counters = entry.target.querySelectorAll('.counter');
counters.forEach(counter => {
const target = parseInt(counter.dataset.target);
const increment = target / 100;
let current = 0;
const updateCounter = () => {
current += increment;
if (current < target) {
counter.textContent = Math.ceil(current);
requestAnimationFrame(updateCounter);
} else {
counter.textContent = target;
}
};
updateCounter();
});
}
}
});
}, observerOptions);
// Observe all scroll-animate elements
document.querySelectorAll('.scroll-animate').forEach(el => {
observer.observe(el);
});
// Header scroll effect
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
// Form submission
function handleSubmit(event) {
event.preventDefault();
alert('문의가 접수되었습니다. 빠른 시일 내에 연락드리겠습니다.');
event.target.reset();
}
// Mobile menu toggle
function toggleMobileMenu() {
// Implementation for mobile menu
console.log('Mobile menu toggle');
}
// Initialize on load
window.addEventListener('load', () => {
updateSlider();
updateProgramSlider();
});
// Handle resize
window.addEventListener('resize', () => {
updateProgramSlider();
});
</script>
</body>
</html>

79
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"/>
@ -822,6 +826,14 @@
</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>
// Hero Slider
@ -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');
if (mobileMenuBtn) {
mobileMenuBtn.addEventListener('click', () => {
if (mobileMenu) {
mobileMenu.classList.toggle('-translate-y-full');
}
});
}
// Smooth Scroll for Anchor Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
@ -943,6 +962,24 @@
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');

846
gallery/airoum_1_6.html Normal file
View File

@ -0,0 +1,846 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIROUM - AI 교육의 새로운 기준</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<style>
/* Custom Fonts */
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
/* Custom Properties */
:root {
--pumpkin: #F4762F;
--pumpkin-light: #F69258;
--pumpkin-dark: #DD580C;
--dark-green: #16332D;
--dark-green-light: #306F63;
--dark-green-darker: #0D1E1B;
--slate: #3C5751;
--slate-light: #5A8279;
--slate-dark: #243431;
--silver: #BCC4C2;
--white: #FEFEFE;
--black: #111827;
--gray-dark: #374151;
--gray: #6B7280;
--gray-light: #9CA3AF;
}
/* Base Styles */
body {
font-family: 'Pretendard-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
color: var(--gray-dark) !important;
background-color: var(--white) !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'GmarketSansMedium', sans-serif !important;
color: var(--dark-green) !important;
line-height: 1.2 !important;
}
/* Custom Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-fadeInUp {
animation: fadeInUp 0.8s ease-out forwards;
opacity: 0;
}
.animate-slideInLeft {
animation: slideInLeft 0.6s ease-out forwards;
opacity: 0;
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 2s ease-in-out infinite;
}
/* Gradient Backgrounds */
.gradient-light {
background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFB 100%);
}
.gradient-dark {
background: linear-gradient(135deg, var(--dark-green) 0%, var(--dark-green-light) 100%);
}
/* Button Styles */
.btn-primary {
background-color: var(--pumpkin) !important;
color: var(--white) !important;
padding: 1rem 2rem !important;
border-radius: 9999px !important;
font-weight: 500 !important;
transition: all 0.3s ease-out !important;
box-shadow: 0 4px 14px rgba(244, 118, 47, 0.25) !important;
}
.btn-primary:hover {
background-color: var(--pumpkin-dark) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(244, 118, 47, 0.35) !important;
}
.btn-secondary {
background-color: transparent !important;
color: var(--dark-green) !important;
padding: 1rem 2rem !important;
border: 2px solid var(--silver) !important;
border-radius: 9999px !important;
font-weight: 500 !important;
transition: all 0.3s ease-out !important;
}
.btn-secondary:hover {
background-color: var(--dark-green-light) !important;
color: var(--white) !important;
border-color: var(--dark-green-light) !important;
}
/* Card Styles */
.card-elegant {
background: white;
border-radius: 1.5rem;
padding: 2rem;
transition: all 0.3s ease-out;
box-shadow: 0 4px 6px -1px rgba(22, 51, 45, 0.08),
0 2px 4px -1px rgba(22, 51, 45, 0.04);
}
.card-elegant:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(22, 51, 45, 0.10),
0 10px 10px -5px rgba(22, 51, 45, 0.04);
}
/* Input Styles */
.input-elegant {
width: 100%;
padding: 1rem 1.5rem;
background-color: white;
border: 2px solid var(--silver);
border-radius: 1rem;
color: var(--gray-dark);
transition: all 0.2s ease-out;
box-shadow: inset 0 2px 4px rgba(22, 51, 45, 0.04);
}
.input-elegant:focus {
border-color: var(--dark-green-light);
outline: none;
box-shadow: inset 0 2px 4px rgba(22, 51, 45, 0.04),
0 0 0 4px rgba(48, 111, 99, 0.1);
}
/* Slider Styles */
.slider-container {
position: relative;
overflow: hidden;
}
.slider-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.slider-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.slider-button:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* Scroll Animations */
.scroll-animate {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.scroll-animate.active {
opacity: 1;
transform: translateY(0);
}
/* Header Scroll Effect */
.header-scrolled {
background-color: rgba(254, 254, 254, 0.95) !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
</style>
</head>
<body>
<!-- Header -->
<header id="header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<nav class="container mx-auto px-6 py-6">
<div class="flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center">
<h1 class="text-2xl font-bold" style="color: var(--pumpkin)">AIROUM</h1>
</div>
<!-- Navigation -->
<div class="hidden md:flex items-center space-x-8">
<a href="#about" class="text-gray-700 hover:text-pumpkin transition">회사소개</a>
<a href="#programs" class="text-gray-700 hover:text-pumpkin transition">교육 프로그램</a>
<a href="#contact" class="btn-primary">문의·신청</a>
</div>
<!-- Mobile Menu Button -->
<button class="md:hidden" onclick="toggleMobileMenu()">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Hero Section with Slider -->
<section class="pt-24 pb-16 px-6">
<div class="container mx-auto max-w-6xl">
<div class="relative overflow-hidden rounded-3xl gradient-light" style="min-height: 500px;">
<div class="slider-container">
<div class="slider-track" id="heroSlider">
<!-- Slide 1: Hero -->
<div class="w-full flex-shrink-0 p-12 md:p-20 animate-fadeInUp">
<div class="max-w-3xl">
<h2 class="text-4xl md:text-6xl mb-6 leading-tight">
생성형 AI 시대,<br>
기술을 넘어 미래를 설계하는<br>
<span style="color: var(--pumpkin)">사람을 키웁니다</span>
</h2>
<div class="w-20 h-1 mb-6 rounded-full" style="background-color: var(--pumpkin)"></div>
<p class="text-lg md:text-xl mb-8 text-gray-600 leading-relaxed">
에이로움은 'AI(인공지능)'와 '새로움'의 가치를 융합한 AI 교육 전문 연구소입니다.<br>
AI 개발자와 교육 전문가가 함께 만든 현장 중심 교육으로<br>
당신의 성장을 돕는 든든한 동반자가 되겠습니다.
</p>
<div class="flex flex-wrap gap-4">
<button class="btn-primary">무료 상담 신청</button>
<button class="btn-secondary">프로그램 보기</button>
</div>
</div>
</div>
<!-- Slide 2: CEO Introduction -->
<div class="w-full flex-shrink-0 p-12 md:p-20">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="w-48 h-48 rounded-full overflow-hidden shadow-xl">
<img src="https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?w=400&h=400&fit=crop"
alt="최아영 대표" class="w-full h-full object-cover">
</div>
<div class="flex-1 text-center md:text-left">
<h3 class="text-3xl mb-2">최아영 대표</h3>
<p class="text-xl mb-4" style="color: var(--dark-green-light)">AI 교육 기획 전문가</p>
<blockquote class="text-2xl mb-6 italic" style="color: var(--pumpkin)">
"AI로 아이들의 상상력에 날개를 달아줍니다"
</blockquote>
<p class="text-gray-600 leading-relaxed">
10년 이상의 교육 기획 경험과 AI 기술 전문성을 바탕으로<br>
실질적이고 혁신적인 AI 교육 프로그램을 개발하고 있습니다.
</p>
</div>
</div>
</div>
</div>
<!-- Slider Controls -->
<button class="slider-button left-4" onclick="previousSlide()">
<i data-lucide="chevron-left" class="w-6 h-6"></i>
</button>
<button class="slider-button right-4" onclick="nextSlide()">
<i data-lucide="chevron-right" class="w-6 h-6"></i>
</button>
<!-- Slider Indicators -->
<div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex gap-2">
<button class="w-2 h-2 rounded-full bg-pumpkin transition-all duration-300" id="indicator-0"></button>
<button class="w-2 h-2 rounded-full bg-gray-300 transition-all duration-300" id="indicator-1"></button>
</div>
</div>
</div>
</div>
</section>
<!-- Why AIROUM Section -->
<section id="about" class="py-20 scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl mb-4">왜 에이로움인가?</h2>
<div class="w-20 h-1 mx-auto rounded-full" style="background-color: var(--pumpkin)"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Value Card 1 -->
<div class="card-elegant text-center scroll-animate" style="animation-delay: 0.1s">
<div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background-color: rgba(244, 118, 47, 0.1)">
<i data-lucide="zap" class="w-8 h-8" style="color: var(--pumpkin)"></i>
</div>
<h3 class="text-xl mb-2">실천형 교육</h3>
<p class="text-lg mb-3" style="color: var(--pumpkin)">"배우고 바로 쓴다"</p>
<p class="text-gray-600">이론 중심 교육을 넘어, 수업, 연수, 실무에 바로 적용할 수 있는 현장 밀착형 교육을 제공합니다.</p>
</div>
<!-- Value Card 2 -->
<div class="card-elegant text-center scroll-animate" style="animation-delay: 0.2s">
<div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background-color: rgba(48, 111, 99, 0.1)">
<i data-lucide="map-pin" class="w-8 h-8" style="color: var(--dark-green-light)"></i>
</div>
<h3 class="text-xl mb-2">열린 교육</h3>
<p class="text-lg mb-3" style="color: var(--dark-green-light)">"지역 격차 없는 기회"</p>
<p class="text-gray-600">서울, 수도권에 집중된 교육 기회를 넘어, 지역 거점 센터를 통해 전국 어디서나 고품질 교육을 제공합니다.</p>
</div>
<!-- Value Card 3 -->
<div class="card-elegant text-center scroll-animate" style="animation-delay: 0.3s">
<div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background-color: rgba(244, 118, 47, 0.1)">
<i data-lucide="share-2" class="w-8 h-8" style="color: var(--pumpkin)"></i>
</div>
<h3 class="text-xl mb-2">융합형 교육</h3>
<p class="text-lg mb-3" style="color: var(--pumpkin)">"경계를 허무는 연결"</p>
<p class="text-gray-600">진로 설계, 교과 프로젝트, 업무 실무까지 생성형 AI와 자연스럽게 연결하여 유기적으로 엮은 융합 교육을 운영합니다.</p>
</div>
<!-- Value Card 4 -->
<div class="card-elegant text-center scroll-animate" style="animation-delay: 0.4s">
<div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
style="background-color: rgba(48, 111, 99, 0.1)">
<i data-lucide="award" class="w-8 h-8" style="color: var(--dark-green-light)"></i>
</div>
<h3 class="text-xl mb-2">검증된 전문성</h3>
<p class="text-lg mb-3" style="color: var(--dark-green-light)">"전문가들의 협업"</p>
<p class="text-gray-600">AI 개발자와 교육 전문가가 협업하여 제작한 신뢰도 높은 커리큘럼과 현장에서 다듬어진 전문 강사진이 직접 수업합니다.</p>
</div>
</div>
</div>
</section>
<!-- Programs Section -->
<section id="programs" class="py-20 gradient-light scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl mb-4">교육 프로그램</h2>
<div class="w-20 h-1 mx-auto rounded-full" style="background-color: var(--pumpkin)"></div>
</div>
<!-- Program Slider -->
<div class="relative">
<div class="slider-container overflow-hidden">
<div class="slider-track flex gap-6" id="programSlider">
<!-- Program Card 1 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop"
alt="AI 진로·직업 프로젝트" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(244, 118, 47, 0.1); color: var(--pumpkin)">학생</span>
<h3 class="text-xl mt-3 mb-2">AI 진로·직업 프로젝트</h3>
<p class="text-gray-600 mb-4">생성형 AI로 흥미와 강점을 탐색하고 진로를 설계하는 수업</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 2 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?w=400&h=300&fit=crop"
alt="AI 교과 연계 프로젝트" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(244, 118, 47, 0.1); color: var(--pumpkin)">학생</span>
<h3 class="text-xl mt-3 mb-2">AI 교과 연계 프로젝트</h3>
<p class="text-gray-600 mb-4">국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트 수업</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 3 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1531482615713-2afd69097998?w=400&h=300&fit=crop"
alt="AI 윤리 교육" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(48, 111, 99, 0.1); color: var(--dark-green-light)">모두</span>
<h3 class="text-xl mt-3 mb-2">AI 윤리 교육</h3>
<p class="text-gray-600 mb-4">AI 시대에 필요한 디지털 윤리와 책임감을 배우는 시민 교육</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 4 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=400&h=300&fit=crop"
alt="생성형 AI 실무 활용" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(48, 111, 99, 0.1); color: var(--dark-green-light)">교사·기업</span>
<h3 class="text-xl mt-3 mb-2">생성형 AI 실무 활용</h3>
<p class="text-gray-600 mb-4">텍스트·이미지·영상 등 생성형 AI 도구를 실습하는 실무 중심 교육</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 5 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=400&h=300&fit=crop"
alt="교사·공무원 연수" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(48, 111, 99, 0.1); color: var(--dark-green-light)">교사·공무원</span>
<h3 class="text-xl mt-3 mb-2">교사·공무원 연수</h3>
<p class="text-gray-600 mb-4">현장 적용 중심의 워크숍형 AI 연수 프로그램</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 6 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1559526324-4b87b5e36e44?w=400&h=300&fit=crop"
alt="AI 금융 활용 교육" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(244, 118, 47, 0.1); color: var(--pumpkin)">학생·일반인</span>
<h3 class="text-xl mt-3 mb-2">AI 금융 활용 교육</h3>
<p class="text-gray-600 mb-4">생성형 AI로 금융 정보를 탐색하고 자산을 관리하는 실습 교육</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
<!-- Program Card 7 -->
<div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0">
<div class="card-elegant h-full">
<div class="h-48 rounded-lg overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1573166364524-d9dbfd8bbf83?w=400&h=300&fit=crop"
alt="생성형 AI 강사 양성" class="w-full h-full object-cover">
</div>
<span class="text-sm font-medium px-3 py-1 rounded-full"
style="background-color: rgba(48, 111, 99, 0.1); color: var(--dark-green-light)">강사</span>
<h3 class="text-xl mt-3 mb-2">생성형 AI 강사 양성</h3>
<p class="text-gray-600 mb-4">생성형 AI 교육 전문가로 성장하기 위한 실전 중심 양성 과정</p>
<button class="text-pumpkin font-medium hover:underline">자세히보기 →</button>
</div>
</div>
</div>
</div>
<!-- Program Slider Controls -->
<button class="slider-button -left-6" onclick="programSliderPrev()">
<i data-lucide="chevron-left" class="w-6 h-6"></i>
</button>
<button class="slider-button -right-6" onclick="programSliderNext()">
<i data-lucide="chevron-right" class="w-6 h-6"></i>
</button>
</div>
</div>
</section>
<!-- Target Audience Section -->
<section class="py-20 scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl mb-4">이런 분들께 필요합니다</h2>
<div class="w-20 h-1 mx-auto rounded-full" style="background-color: var(--pumpkin)"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="text-center scroll-animate" style="animation-delay: 0.1s">
<div class="w-24 h-24 mx-auto mb-4 rounded-full flex items-center justify-center gradient-light">
<i data-lucide="book-open" class="w-12 h-12" style="color: var(--dark-green)"></i>
</div>
<h3 class="text-lg font-semibold mb-2">AI 교육이 막막한 교사</h3>
<p class="text-pumpkin font-medium mb-2">"수업에 바로 쓸 수 있는 실전 콘텐츠"</p>
<p class="text-gray-600">를 제공합니다.</p>
</div>
<div class="text-center scroll-animate" style="animation-delay: 0.2s">
<div class="w-24 h-24 mx-auto mb-4 rounded-full flex items-center justify-center gradient-light">
<i data-lucide="map" class="w-12 h-12" style="color: var(--dark-green)"></i>
</div>
<h3 class="text-lg font-semibold mb-2">지역에서도 수준 높은 교육을 만들고 싶은 기획자</h3>
<p class="text-pumpkin font-medium mb-2">"지역 거점 운영 모델과 검증된 커리큘럼"</p>
<p class="text-gray-600">이 준비돼 있습니다.</p>
</div>
<div class="text-center scroll-animate" style="animation-delay: 0.3s">
<div class="w-24 h-24 mx-auto mb-4 rounded-full flex items-center justify-center gradient-light">
<i data-lucide="presentation" class="w-12 h-12" style="color: var(--dark-green)"></i>
</div>
<h3 class="text-lg font-semibold mb-2">AI 강사가 되고 싶은 분</h3>
<p class="text-pumpkin font-medium mb-2">"실전형 양성과정"</p>
<p class="text-gray-600">을 제공합니다.</p>
</div>
<div class="text-center scroll-animate" style="animation-delay: 0.4s">
<div class="w-24 h-24 mx-auto mb-4 rounded-full flex items-center justify-center gradient-light">
<i data-lucide="sparkles" class="w-12 h-12" style="color: var(--dark-green)"></i>
</div>
<h3 class="text-lg font-semibold mb-2">AI 시대를 살아갈 학생들</h3>
<p class="text-pumpkin font-medium mb-2">"진로 설계와 아이디어 실현 기회"</p>
<p class="text-gray-600">를 제공합니다.</p>
</div>
</div>
</div>
</section>
<!-- Track Record Section -->
<section class="py-20 gradient-light scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl mb-4">교육 실적</h2>
<div class="w-20 h-1 mx-auto rounded-full" style="background-color: var(--pumpkin)"></div>
</div>
<!-- Partner Logos -->
<div class="flex flex-wrap justify-center items-center gap-8 mb-12">
<div class="w-32 h-16 bg-gray-200 rounded-lg animate-pulse-slow"></div>
<div class="w-32 h-16 bg-gray-200 rounded-lg animate-pulse-slow" style="animation-delay: 0.2s"></div>
<div class="w-32 h-16 bg-gray-200 rounded-lg animate-pulse-slow" style="animation-delay: 0.4s"></div>
<div class="w-32 h-16 bg-gray-200 rounded-lg animate-pulse-slow" style="animation-delay: 0.6s"></div>
</div>
<!-- Statistics -->
<div class="grid md:grid-cols-3 gap-8 text-center">
<div class="scroll-animate" style="animation-delay: 0.1s">
<h3 class="text-5xl font-bold mb-2" style="color: var(--pumpkin)">
<span class="counter" data-target="1000">0</span>+
</h3>
<p class="text-xl text-gray-700">수강생</p>
</div>
<div class="scroll-animate" style="animation-delay: 0.2s">
<h3 class="text-5xl font-bold mb-2" style="color: var(--dark-green-light)">
<span class="counter" data-target="50">0</span>+
</h3>
<p class="text-xl text-gray-700">협력기관</p>
</div>
<div class="scroll-animate" style="animation-delay: 0.3s">
<h3 class="text-5xl font-bold mb-2" style="color: var(--pumpkin)">
<span class="counter" data-target="98">0</span>%
</h3>
<p class="text-xl text-gray-700">만족도</p>
</div>
</div>
</div>
</section>
<!-- Closing Message -->
<section class="py-20 scroll-animate">
<div class="container mx-auto px-6 max-w-6xl">
<div class="text-center max-w-3xl mx-auto">
<h2 class="text-2xl md:text-3xl mb-6">마무리</h2>
<div class="w-20 h-1 mx-auto mb-8 rounded-full" style="background-color: var(--pumpkin)"></div>
<p class="text-xl mb-6 leading-relaxed text-gray-700">
생성형 AI는 단순한 유행이 아니라<br>
<span class="font-semibold" style="color: var(--dark-green)">미래 교육의 기본값입니다.</span>
</p>
<p class="text-lg mb-8 text-gray-600">
에이로움이 그 시작이 되어드리겠습니다.
</p>
<div class="text-left max-w-md mx-auto">
<p class="flex items-center mb-2">
<i data-lucide="check" class="w-5 h-5 mr-2" style="color: var(--pumpkin)"></i>
교육에 변화를 주고 싶다면
</p>
<p class="flex items-center">
<i data-lucide="check" class="w-5 h-5 mr-2" style="color: var(--pumpkin)"></i>
더 실천적인 AI 교육을 찾고 있다면
</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 gradient-light scroll-animate">
<div class="container mx-auto px-6 max-w-2xl">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl mb-4">궁금한 점이 있다면, 지금 바로 문의하세요</h2>
</div>
<form class="card-elegant" onsubmit="handleSubmit(event)">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium mb-2" style="color: var(--dark-green)">이름</label>
<input type="text" class="input-elegant" placeholder="성함을 입력해주세요" required>
</div>
<div>
<label class="block text-sm font-medium mb-2" style="color: var(--dark-green)">연락처</label>
<input type="tel" class="input-elegant" placeholder="010-0000-0000" required>
</div>
<div>
<label class="block text-sm font-medium mb-2" style="color: var(--dark-green)">이메일</label>
<input type="email" class="input-elegant" placeholder="email@example.com" required>
</div>
<div>
<label class="block text-sm font-medium mb-2" style="color: var(--dark-green)">문의내용</label>
<textarea rows="4" class="input-elegant" placeholder="문의하실 내용을 자유롭게 작성해주세요" required></textarea>
</div>
<button type="submit" class="btn-primary w-full">
문의하기
</button>
</div>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="py-12 bg-gray-50">
<div class="container mx-auto px-6 text-center">
<h3 class="text-xl font-bold mb-4" style="color: var(--dark-green)">에이로움 교육연구소</h3>
<p class="text-gray-600 mb-2">대표: 최아영 | 연락처: 010-5095-8821</p>
<p class="text-gray-600 mb-6">서울특별시 송파구 오금로 11길 55, 214-88호</p>
<div class="flex justify-center gap-4">
<a href="#" class="text-gray-600 hover:text-pumpkin transition">
<span class="flex items-center gap-2">
<i data-lucide="pen-square" class="w-5 h-5"></i>
Blog
</span>
</a>
<a href="#" class="text-gray-600 hover:text-pumpkin transition">
<span class="flex items-center gap-2">
<i data-lucide="instagram" class="w-5 h-5"></i>
Instagram
</span>
</a>
</div>
</div>
</footer>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Hero Slider
let currentSlide = 0;
const heroSlider = document.getElementById('heroSlider');
const totalSlides = 2;
function updateSlider() {
heroSlider.style.transform = `translateX(-${currentSlide * 100}%)`;
// Update indicators
for (let i = 0; i < totalSlides; i++) {
const indicator = document.getElementById(`indicator-${i}`);
if (i === currentSlide) {
indicator.classList.add('bg-pumpkin', 'w-8');
indicator.classList.remove('bg-gray-300', 'w-2');
} else {
indicator.classList.remove('bg-pumpkin', 'w-8');
indicator.classList.add('bg-gray-300', 'w-2');
}
}
}
function nextSlide() {
currentSlide = (currentSlide + 1) % totalSlides;
updateSlider();
}
function previousSlide() {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
updateSlider();
}
// Auto-slide every 5 seconds
setInterval(nextSlide, 5000);
// Program Slider
let programSlideIndex = 0;
const programSlider = document.getElementById('programSlider');
const programCards = programSlider.children.length;
const cardsPerView = window.innerWidth >= 1024 ? 3 : window.innerWidth >= 768 ? 2 : 1;
function programSliderNext() {
if (programSlideIndex < programCards - cardsPerView) {
programSlideIndex++;
updateProgramSlider();
}
}
function programSliderPrev() {
if (programSlideIndex > 0) {
programSlideIndex--;
updateProgramSlider();
}
}
function updateProgramSlider() {
const slideWidth = 100 / cardsPerView;
programSlider.style.transform = `translateX(-${programSlideIndex * slideWidth}%)`;
}
// Scroll Animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
// Counter animation for statistics
if (entry.target.querySelector('.counter')) {
const counters = entry.target.querySelectorAll('.counter');
counters.forEach(counter => {
const target = parseInt(counter.dataset.target);
const increment = target / 100;
let current = 0;
const updateCounter = () => {
current += increment;
if (current < target) {
counter.textContent = Math.ceil(current);
requestAnimationFrame(updateCounter);
} else {
counter.textContent = target;
}
};
updateCounter();
});
}
}
});
}, observerOptions);
// Observe all scroll-animate elements
document.querySelectorAll('.scroll-animate').forEach(el => {
observer.observe(el);
});
// Header scroll effect
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
// Form submission
function handleSubmit(event) {
event.preventDefault();
alert('문의가 접수되었습니다. 빠른 시일 내에 연락드리겠습니다.');
event.target.reset();
}
// Mobile menu toggle
function toggleMobileMenu() {
// Implementation for mobile menu
console.log('Mobile menu toggle');
}
// Initialize on load
window.addEventListener('load', () => {
updateSlider();
updateProgramSlider();
});
// Handle resize
window.addEventListener('resize', () => {
updateProgramSlider();
});
</script>
</body>
</html>