generated from Paul.Kim/tpl-superclaude
Paul.Kim
90beecd91e
This commit marks a significant architectural overhaul, replacing the legacy SuperClaude and Taskmaster AI frameworks with the new Claude Flow orchestration system and the SPARC/Roo methodology.
The new framework emphasizes parallel, swarm-based execution and mandatory batch operations for improved efficiency and coordination.
Key Changes:
- **Framework Migration:** The entire `.claude` and `.cursor` directories, containing the old command, persona, and rule systems, have been removed. They are replaced by the new `.roomodes` configuration and a comprehensive `CLAUDE.md` guide for Claude Flow.
- **New Orchestration Engine:** Introduced Claude Flow as the primary MCP server. The updated `CLAUDE.md` defines new rules for swarm orchestration, mandatory concurrent execution, and a clear separation of concerns between coordination (MCP) and execution (Claude Code).
- **Project Initiation (AIROUM):** Added extensive planning, design, and specification documents for a new project: the "AIROUM" educational landing page. This includes:
- Mood boards and multiple HTML design iterations in `.superdesign` and `gallery`.
- Detailed planning documents, technical designs, and pseudocode specs in `.taskmaster`.
- **Configuration Updates:**
- `.mcp.json` now points to `claude-flow` and `ruv-swarm`.
- `.gitignore` is updated to support the new Claude Flow file structure.
238 lines
24 KiB
HTML
238 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AIROUM - 기술을 넘어 미래를 설계하는 교육 (v3)</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;700;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
body { font-family: 'Pretendard', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
|
:root {
|
|
--primary-color: #0A2A5B;
|
|
--accent-color: #00D1FF;
|
|
--text-primary: #1F2937;
|
|
--text-secondary: #4B5563;
|
|
--bg-light: #F9FAFB;
|
|
--bg-white: #FFFFFF;
|
|
}
|
|
.hero-gradient { background: linear-gradient(135deg, var(--primary-color) 0%, #1E40AF 100%); }
|
|
.cta-gradient { background: linear-gradient(135deg, #1E40AF 0%, var(--primary-color) 100%); }
|
|
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
|
|
.fade-in.visible { opacity: 1; transform: translateY(0); }
|
|
.swiper-pagination-bullet-active { background-color: var(--accent-color) !important; }
|
|
.nav-link { position: relative; color: var(--text-secondary); transition: color 0.3s; }
|
|
.nav-link:hover { color: var(--primary-color); }
|
|
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 50%; background-color: var(--accent-color); transition: all 0.3s ease-out; transform: translateX(-50%); }
|
|
.nav-link:hover::after { width: 100%; }
|
|
details > summary { list-style: none; }
|
|
details > summary::-webkit-details-marker { display: none; }
|
|
details .summary-icon { transition: transform 0.3s; }
|
|
details[open] .summary-icon { transform: rotate(45deg); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-bg-light text-text-primary">
|
|
|
|
<!-- Navigation -->
|
|
<nav id="navbar" class="bg-white/80 backdrop-blur-xl shadow-sm fixed w-full z-20 top-0 transition-all duration-300">
|
|
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
|
<a href="#" class="font-black text-3xl" style="color: var(--primary-color);">AIROUM</a>
|
|
<div class="hidden md:flex space-x-8 items-center">
|
|
<a href="#intro" class="nav-link font-bold">회사소개</a>
|
|
<a href="#programs" class="nav-link font-bold">교육 프로그램</a>
|
|
<a href="#contact" class="font-bold rounded-full py-2 px-6 transition-all duration-300 text-white" style="background-color: var(--primary-color);">문의 및 신청</a>
|
|
</div>
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-button"><i data-lucide="menu" class="w-6 h-6"></i></button>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="hidden md:hidden">
|
|
<a href="#intro" class="block py-2 px-6 text-sm hover:bg-gray-200">회사소개</a>
|
|
<a href="#programs" class="block py-2 px-6 text-sm hover:bg-gray-200">교육 프로그램</a>
|
|
<a href="#contact" class="block py-2 px-6 text-sm hover:bg-gray-200">문의 및 신청</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="hero-gradient text-white pt-32 pb-16">
|
|
<div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
|
|
<div class="text-center md:text-left">
|
|
<h1 class="text-4xl md:text-5xl font-black mb-4 leading-tight">생성형 AI 시대, <br/>기술을 넘어 <span style="color: var(--accent-color);">미래를 설계하는 사람</span>을 키웁니다.</h1>
|
|
<p class="text-lg opacity-90 max-w-xl mb-8 mx-auto md:mx-0">에이로움은 'AI(인공지능)'와 '새로움'의 가치를 융합한 AI 교육 전문 연구소입니다. AI 개발자와 교육 전문가가 함께 만든 현장 중심 교육으로 당신의 성장을 돕는 든든한 동반자가 되겠습니다.</p>
|
|
<a href="#contact" class="bg-white font-bold py-3 px-8 rounded-full text-lg hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 inline-block" style="color: var(--primary-color);">무료 상담 시작하기 <i data-lucide="arrow-right" class="inline-block w-5 h-5"></i></a>
|
|
</div>
|
|
<div class="w-full max-w-md mx-auto">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 shadow-2xl">
|
|
<div class="swiper-container-hero">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="flex flex-col items-center text-center">
|
|
<img src="https://placehold.co/150x150/E2E8F0/4A5568?text=Ayoung" alt="최아영 대표" class="w-32 h-32 rounded-full mb-4 border-4 border-white/20 shadow-lg">
|
|
<h3 class="font-bold text-xl">최아영 대표</h3>
|
|
<p class="text-white/80">AI 교육 기획 전문가</p>
|
|
<p class="mt-4 text-lg italic">"AI로 아이들의 상상력에 날개를 달아줍니다."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Why AIROUM? -->
|
|
<section id="intro" class="py-24 bg-white">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center max-w-3xl mx-auto">
|
|
<h2 class="text-3xl md:text-4xl font-black mb-4" style="color: var(--primary-color);">왜 에이로움인가?</h2>
|
|
<p class="text-lg text-text-secondary">생성형 AI 시대, 그저 ‘기술만 아는 사람’이 아니라 기술을 바르게 활용하고, 나아가 미래를 설계할 수 있는 사람이 더 중요해졌습니다. AI 교육 전문 연구소 '에이로움'은 그런 사람을 길러내기 위해 다음 4가지 가치를 중심으로 교육을 설계하고 운영합니다.</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
|
|
<!-- Value Cards -->
|
|
<div class="bg-bg-light p-8 rounded-xl shadow-lg text-center fade-in transform hover:-translate-y-2 transition-transform duration-300"><div class="bg-blue-100 inline-block p-4 rounded-full mb-4"><i data-lucide="zap" class="w-8 h-8 text-blue-800"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-color);">실천형 교육</h3><p class="text-text-secondary">"배우고 바로 쓴다"는 경험을 위해, 현장과 밀착된 실습 중심 교육을 제공합니다.</p></div>
|
|
<div class="bg-bg-light p-8 rounded-xl shadow-lg text-center fade-in transform hover:-translate-y-2 transition-transform duration-300" style="transition-delay: 100ms;"><div class="bg-blue-100 inline-block p-4 rounded-full mb-4"><i data-lucide="map" class="w-8 h-8 text-blue-800"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-color);">열린 교육</h3><p class="text-text-secondary">지역 거점 센터를 통해, 전국 어디서나 격차 없는 고품질 AI 교육을 받을 수 있습니다.</p></div>
|
|
<div class="bg-bg-light p-8 rounded-xl shadow-lg text-center fade-in transform hover:-translate-y-2 transition-transform duration-300" style="transition-delay: 200ms;"><div class="bg-blue-100 inline-block p-4 rounded-full mb-4"><i data-lucide="link" class="w-8 h-8 text-blue-800"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-color);">융합형 교육</h3><p class="text-text-secondary">진로, 교과, 실무를 유기적으로 엮어, AI와 자연스럽게 연결되는 융합 교육을 운영합니다.</p></div>
|
|
<div class="bg-bg-light p-8 rounded-xl shadow-lg text-center fade-in transform hover:-translate-y-2 transition-transform duration-300" style="transition-delay: 300ms;"><div class="bg-blue-100 inline-block p-4 rounded-full mb-4"><i data-lucide="verified" class="w-8 h-8 text-blue-800"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-color);">검증된 전문성</h3><p class="text-text-secondary">AI 개발자와 교육 전문가가 협업한 커리큘럼과 현장에서 다듬어진 강사진이 함께합니다.</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- For Whom? -->
|
|
<section class="py-24">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center max-w-3xl mx-auto">
|
|
<h2 class="text-3xl md:text-4xl font-black mb-12" style="color: var(--primary-color);">이런 분들께 에이로움이 필요합니다.</h2>
|
|
</div>
|
|
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
<div class="bg-white p-6 rounded-lg shadow-md flex items-start space-x-4 fade-in"><i data-lucide="user-check" class="w-12 h-12 mt-1 flex-shrink-0" style="color: var(--primary-color);"></i><div><h4 class="font-bold text-lg">AI 교육이 막막한 교사</h4><p class="text-text-secondary">“수업에 바로 쓸 수 있는 실전 콘텐츠”를 제공합니다.</p></div></div>
|
|
<div class="bg-white p-6 rounded-lg shadow-md flex items-start space-x-4 fade-in" style="transition-delay: 100ms;"><i data-lucide="lightbulb" class="w-12 h-12 mt-1 flex-shrink-0" style="color: var(--primary-color);"></i><div><h4 class="font-bold text-lg">수준 높은 교육을 기획하는 분</h4><p class="text-text-secondary">“지역 거점 운영 모델과 검증된 커리큘럼”이 준비돼 있습니다.</p></div></div>
|
|
<div class="bg-white p-6 rounded-lg shadow-md flex items-start space-x-4 fade-in" style="transition-delay: 200ms;"><i data-lucide="award" class="w-12 h-12 mt-1 flex-shrink-0" style="color: var(--primary-color);"></i><div><h4 class="font-bold text-lg">AI 강사가 되고 싶은 분</h4><p class="text-text-secondary">“수업 기획부터 강의 시연까지 실전형 양성과정”을 제공합니다.</p></div></div>
|
|
<div class="bg-white p-6 rounded-lg shadow-md flex items-start space-x-4 fade-in" style="transition-delay: 300ms;"><i data-lucide="graduation-cap" class="w-12 h-12 mt-1 flex-shrink-0" style="color: var(--primary-color);"></i><div><h4 class="font-bold text-lg">AI 시대를 살아갈 학생</h4><p class="text-text-secondary">“AI로 진로를 설계하고 아이디어를 실현하는 기회”를 제공합니다.</p></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Programs -->
|
|
<section id="programs" class="py-24 bg-white">
|
|
<div class="container mx-auto px-6">
|
|
<h2 class="text-3xl md:text-4xl font-black text-center mb-12" style="color: var(--primary-color);">교육 프로그램</h2>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Program Cards with Details -->
|
|
<div class="fade-in"><details class="bg-bg-light rounded-xl shadow-lg h-full flex flex-col"><summary class="p-8 cursor-pointer flex-grow"><div class="flex justify-between items-center"><p class="font-bold" style="color: var(--primary-color);">학생</p><i data-lucide="plus-circle" class="summary-icon w-6 h-6 text-gray-400"></i></div><h3 class="text-2xl font-bold my-3">AI 진로·직업 프로젝트</h3><p class="text-text-secondary text-sm">생성형 AI로 흥미와 강점을 탐색하고 진로를 설계하는 수업</p></summary><div class="p-8 border-t border-gray-200"><p class="font-bold text-sm mb-2">“AI와 함께 나를 설계하는 시간!”</p><p class="text-sm text-text-secondary"><strong>대상:</strong> 초·중·고·대학생<br><strong>기대효과:</strong> 진로 이해 증진, AI 기반 정보 탐색 및 활용 능력 향상, 주도적 진로 설계 경험</p></div></details></div>
|
|
<div class="fade-in" style="transition-delay: 100ms;"><details class="bg-bg-light rounded-xl shadow-lg h-full flex flex-col"><summary class="p-8 cursor-pointer flex-grow"><div class="flex justify-between items-center"><p class="font-bold" style="color: var(--primary-color);">학생</p><i data-lucide="plus-circle" class="summary-icon w-6 h-6 text-gray-400"></i></div><h3 class="text-2xl font-bold my-3">AI 교과 연계 프로젝트</h3><p class="text-text-secondary text-sm">국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트 수업</p></summary><div class="p-8 border-t border-gray-200"><p class="font-bold text-sm mb-2">“교과서를 넘어, 생각을 확장하는 AI 수업!”</p><p class="text-sm text-text-secondary"><strong>대상:</strong> 초·중·고 학생<br><strong>기대효과:</strong> 교과 내용 흥미 및 몰입도 향상, 생성형 AI 활용 능력 및 문제 해결력 강화</p></div></details></div>
|
|
<div class="fade-in" style="transition-delay: 200ms;"><details class="bg-bg-light rounded-xl shadow-lg h-full flex flex-col"><summary class="p-8 cursor-pointer flex-grow"><div class="flex justify-between items-center"><p class="font-bold" style="color: var(--primary-color);">모두</p><i data-lucide="plus-circle" class="summary-icon w-6 h-6 text-gray-400"></i></div><h3 class="text-2xl font-bold my-3">AI 윤리 교육</h3><p class="text-text-secondary text-sm">AI 시대에 필요한 디지털 윤리와 책임감을 배우는 시민 교육</p></summary><div class="p-8 border-t border-gray-200"><p class="font-bold text-sm mb-2">“생성형 AI를 바르고 똑똑하게 사용하기 위한 첫걸음!”</p><p class="text-sm text-text-secondary"><strong>대상:</strong> 학생, 교사, 공무원, 일반 성인<br><strong>기대효과:</strong> AI 윤리 의식 향상, 책임 있는 AI 활용 태도 함양</p></div></details></div>
|
|
<div class="fade-in" style="transition-delay: 300ms;"><details class="bg-bg-light rounded-xl shadow-lg h-full flex flex-col"><summary class="p-8 cursor-pointer flex-grow"><div class="flex justify-between items-center"><p class="font-bold" style="color: var(--primary-color);">교사, 일반인, 기업</p><i data-lucide="plus-circle" class="summary-icon w-6 h-6 text-gray-400"></i></div><h3 class="text-2xl font-bold my-3">생성형 AI 실무 활용</h3><p class="text-text-secondary text-sm">텍스트·이미지·영상 등 생성형 AI 도구를 실습하는 실무 중심 교육</p></summary><div class="p-8 border-t border-gray-200"><p class="font-bold text-sm mb-2">“일 잘하는 사람들의 AI 비밀 도구!”</p><p class="text-sm text-text-secondary"><strong>대상:</strong> 교사, 일반인, 직장인, 콘텐츠 제작자 등<br><strong>기대효과:</strong> 업무 효율 향상, 콘텐츠 제작 능력 향상</p></div></details></div>
|
|
<div class="fade-in" style="transition-delay: 400ms;"><details class="bg-bg-light rounded-xl shadow-lg h-full flex flex-col"><summary class="p-8 cursor-pointer flex-grow"><div class="flex justify-between items-center"><p class="font-bold" style="color: var(--primary-color);">교사, 공무원</p><i data-lucide="plus-circle" class="summary-icon w-6 h-6 text-gray-400"></i></div><h3 class="text-2xl font-bold my-3">교사·공무원 연수</h3><p class="text-text-secondary text-sm">현장 적용 중심의 워크숍형 AI 연수 프로그램</p></summary><div class="p-8 border-t border-gray-200"><p class="font-bold text-sm mb-2">“AI 활용법, 빠를수록 든든합니다!”</p><p class="text-sm text-text-secondary"><strong>대상:</strong> 초·중등 교사, 교육청·지자체 공무원<br><strong>기대효과:</strong> 수업 활용력 향상, AI 기반 교육 콘텐츠 개발 역량 강화</p></div></details></div>
|
|
<div class="fade-in" style="transition-delay: 500ms;"><details class="bg-bg-light rounded-xl shadow-lg h-full flex flex-col"><summary class="p-8 cursor-pointer flex-grow"><div class="flex justify-between items-center"><p class="font-bold" style="color: var(--primary-color);">학생, 일반인</p><i data-lucide="plus-circle" class="summary-icon w-6 h-6 text-gray-400"></i></div><h3 class="text-2xl font-bold my-3">AI 금융 활용 교육</h3><p class="text-text-secondary text-sm">생성형 AI로 금융 정보를 탐색하고 자산을 관리하는 실습 교육</p></summary><div class="p-8 border-t border-gray-200"><p class="font-bold text-sm mb-2">“금융 이해력에 생성형 AI를 더하면, 누구나 똑똑한 소비자가 됩니다.”</p><p class="text-sm text-text-secondary"><strong>대상:</strong> 초·중·고 학생, 금융교육이 필요한 기관<br><strong>기대효과:</strong> 실생활 중심 금융 리터러시 함양</p></div></details></div>
|
|
<div class="fade-in" style="transition-delay: 600ms;"><details class="bg-bg-light rounded-xl shadow-lg h-full flex flex-col"><summary class="p-8 cursor-pointer flex-grow"><div class="flex justify-between items-center"><p class="font-bold" style="color: var(--primary-color);">강사, 교육기획자</p><i data-lucide="plus-circle" class="summary-icon w-6 h-6 text-gray-400"></i></div><h3 class="text-2xl font-bold my-3">생성형 AI 강사 양성</h3><p class="text-text-secondary text-sm">생성형 AI 교육 전문가로 성장하기 위한 실전 중심 양성 과정</p></summary><div class="p-8 border-t border-gray-200"><p class="font-bold text-sm mb-2">“당신이 AI 교육의 기준이 될 수 있습니다.”</p><p class="text-sm text-text-secondary"><strong>대상:</strong> 강사, 교육기획자, AI 교육에 관심 있는 일반인<br><strong>기대효과:</strong> AI 기반 수업 기획 및 시연 역량 강화, 교육 전문가로서의 커리어 확장</p></div></details></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Track Record -->
|
|
<section class="py-24">
|
|
<div class="container mx-auto px-6 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-black mb-4" style="color: var(--primary-color);">교육 실적</h2>
|
|
<p class="text-lg text-text-secondary max-w-2xl mx-auto mb-12">에이로움은 수많은 교육 현장에서 그 전문성을 인정받고 있습니다.</p>
|
|
<div class="flex flex-wrap justify-center items-center gap-x-12 gap-y-8">
|
|
<img src="https://placehold.co/120x60/CBD5E1/94A3B8?text=Partner+A" alt="Partner A" class="h-12 opacity-60 hover:opacity-100 transition-opacity">
|
|
<img src="https://placehold.co/120x60/CBD5E1/94A3B8?text=Partner+B" alt="Partner B" class="h-12 opacity-60 hover:opacity-100 transition-opacity">
|
|
<img src="https://placehold.co/120x60/CBD5E1/94A3B8?text=Partner+C" alt="Partner C" class="h-12 opacity-60 hover:opacity-100 transition-opacity">
|
|
<img src="https://placehold.co/120x60/CBD5E1/94A3B8?text=Partner+D" alt="Partner D" class="h-12 opacity-60 hover:opacity-100 transition-opacity">
|
|
<img src="https://placehold.co/120x60/CBD5E1/94A3B8?text=Partner+E" alt="Partner E" class="h-12 opacity-60 hover:opacity-100 transition-opacity">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Closing CTA -->
|
|
<section class="cta-gradient text-white">
|
|
<div class="container mx-auto px-6 py-20 text-center max-w-3xl">
|
|
<h2 class="text-3xl font-bold mb-4">생성형 AI는 단순한 유행이 아니라<br/>미래 교육의 기본값입니다.</h2>
|
|
<p class="opacity-90 mb-6">에이로움은 교사와 기획자가 자신 있게 수업할 수 있도록, 강사 지망생이 교육 전문가로 성장할 수 있도록, 학생들이 상상력과 비전을 키워갈 수 있도록 현장 중심의 신뢰할 수 있는 교육을 제공합니다.</p>
|
|
<div class="inline-block bg-white/10 rounded-lg p-4 text-left text-lg">
|
|
<p class="mb-2 flex items-center"><i data-lucide="check-circle-2" class="w-5 h-5 mr-2 text-accent" style="color: var(--accent-color);"></i> 교육에 변화를 주고 싶다면</p>
|
|
<p class="flex items-center"><i data-lucide="check-circle-2" class="w-5 h-5 mr-2 text-accent" style="color: var(--accent-color);"></i> 더 실천적인 AI 교육을 찾고 있다면</p>
|
|
</div>
|
|
<p class="mt-6 font-bold text-xl">에이로움이 그 시작이 되어드리겠습니다.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Form -->
|
|
<section id="contact" class="py-24">
|
|
<div class="container mx-auto px-6">
|
|
<div class="bg-white p-8 md:p-12 rounded-2xl shadow-2xl max-w-3xl mx-auto">
|
|
<h2 class="text-3xl font-black text-center" style="color: var(--primary-color);">궁금한 점이 있다면, 지금 바로 문의하세요.</h2>
|
|
<p class="text-text-secondary text-center mt-2 mb-8">교육에 대한 자세한 내용이나 협업 제안 등 무엇이든 좋습니다.</p>
|
|
<form class="space-y-6">
|
|
<input type="text" placeholder="성함" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 transition-shadow" style="--tw-ring-color: var(--primary-color);">
|
|
<input type="tel" placeholder="전화번호" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 transition-shadow" style="--tw-ring-color: var(--primary-color);">
|
|
<input type="email" placeholder="이메일" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 transition-shadow" style="--tw-ring-color: var(--primary-color);">
|
|
<textarea placeholder="문의 내용" rows="5" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 transition-shadow" style="--tw-ring-color: var(--primary-color);"></textarea>
|
|
<button type="submit" class="w-full text-white font-bold py-4 px-6 rounded-lg hover:opacity-90 transition-opacity text-lg" style="background-color: var(--primary-color);">문의하기</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-text-primary text-white py-10">
|
|
<div class="container mx-auto px-6 text-center text-sm">
|
|
<p class="font-bold text-lg">에이로움 교육연구소</p>
|
|
<p class="mt-2">대표: 최아영 | 연락처: 010-5095-8821</p>
|
|
<p class="opacity-70 mt-1">주소: 서울특별시 송파구 오금로 11길 55, 214-88호</p>
|
|
<div class="flex justify-center space-x-6 mt-6">
|
|
<a href="https://blog.naver.com/ay8812" target="_blank" class="hover:opacity-75 transition-opacity">Naver Blog</a>
|
|
<a href="https://instagram.com/aiyi_choi" target="_blank" class="hover:opacity-75 transition-opacity">Instagram</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
// Mobile Menu Toggle
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
|
|
// Navbar scroll effect
|
|
window.addEventListener('scroll', () => {
|
|
const navbar = document.getElementById('navbar');
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('py-2');
|
|
navbar.classList.remove('py-4');
|
|
} else {
|
|
navbar.classList.add('py-4');
|
|
navbar.classList.remove('py-2');
|
|
}
|
|
});
|
|
|
|
var heroSwiper = new Swiper('.swiper-container-hero', {
|
|
effect: 'fade',
|
|
fadeEffect: { crossFade: true },
|
|
autoplay: { delay: 5000, disableOnInteraction: false },
|
|
loop: true,
|
|
});
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |