generated from Paul.Kim/tpl-superclaude
Paul.Kim
0716113975
주요 변경 사항: - 모바일 화면 하단에 플로팅 CTA 버튼을 추가하여 사용자 접근성을 높였습니다. 이 버튼은 '문의·신청' 섹션이 보일 때는 자동으로 숨겨집니다. - 내비게이션 메뉴 링크 클릭 시, 고정된 헤더에 의해 섹션 제목이 가려지는 문제를 `scroll-margin-top` 속성을 사용하여 해결했습니다. - 모바일 메뉴가 열린 상태에서 스크롤하면 자동으로 닫히도록 수정하여 사용성을 개선했습니다. - 일부 제목과 로고의 폰트 크기를 반응형으로 조정하여 가독성을 높였습니다. - 새로운 디자인 버전(airoum_1_6) 파일을 추가했습니다.
846 lines
42 KiB
HTML
846 lines
42 KiB
HTML
<!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> |