generated from Paul.Kim/tpl-superclaude
refactor(framework): Replace SuperClaude with Claude Flow & SPARC
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.
This commit is contained in:
187
.superdesign/design_iterations/airoum_1.html
Normal file
187
.superdesign/design_iterations/airoum_1.html
Normal file
@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AIROUM - AI로 여는 새로운 교육 (v2)</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
}
|
||||
: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%);
|
||||
}
|
||||
.card-gradient {
|
||||
background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%);
|
||||
}
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
}
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg-light text-text-primary">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-white/90 backdrop-blur-lg shadow-sm fixed w-full z-10">
|
||||
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="#" class="font-bold text-2xl" style="color: var(--primary-color);">AIROUM</a>
|
||||
<div class="hidden md:flex space-x-8 items-center">
|
||||
<a href="#intro" class="text-text-secondary hover:text-primary transition-colors">회사소개</a>
|
||||
<a href="#programs" class="text-text-secondary hover:text-primary transition-colors">교육 프로그램</a>
|
||||
<a href="#contact" class="bg-primary text-white font-bold rounded-lg py-2 px-5 hover:opacity-90 transition-opacity">문의 및 신청</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="hero-gradient text-white min-h-screen flex items-center">
|
||||
<div class="container mx-auto px-6 grid md:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<h1 class="text-4xl md:text-5xl font-bold 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">AI 개발자와 교육 전문가가 설계한 실천 중심 교육, 당신의 미래를 지금 준비하세요.</p>
|
||||
<a href="#contact" class="bg-white text-primary font-bold py-3 px-8 rounded-lg text-lg hover:bg-gray-100 transition-colors">무료 상담 신청</a>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="w-full h-96 bg-white/10 rounded-2xl flex items-center justify-center">
|
||||
<p class="text-white/50">Abstract AI Graphic</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Differentiation -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-primary mb-12">AIROUM만의 차별점</h2>
|
||||
<div class="max-w-3xl mx-auto space-y-8">
|
||||
<div class="flex items-start space-x-6 fade-in">
|
||||
<div class="text-4xl font-bold" style="color: var(--accent-color);">01</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-primary mb-2">실천 중심 교육</h3>
|
||||
<p class="text-text-secondary">수업, 연수, 업무에 곧바로 활용 가능한 실천 중심 맞춤형 교육을 설계합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-6 fade-in">
|
||||
<div class="text-4xl font-bold" style="color: var(--accent-color);">02</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-primary mb-2">열린 교육 기회</h3>
|
||||
<p class="text-text-secondary">지역 거점 센터 운영을 통해 전문성 있는 AI 교육 기회를 확대합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-6 fade-in">
|
||||
<div class="text-4xl font-bold" style="color: var(--accent-color);">03</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-primary mb-2">미래 연결 교육</h3>
|
||||
<p class="text-text-secondary">진로·교과·현장을 유기적으로 연결하는 융합적 사고 기반 교육을 제공합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-6 fade-in">
|
||||
<div class="text-4xl font-bold" style="color: var(--accent-color);">04</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-primary mb-2">검증된 커리큘럼과 강사</h3>
|
||||
<p class="text-text-secondary">교육 현장 경험과 성과로 증명된 전문가 중심의 콘텐츠를 제공합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programs -->
|
||||
<section id="programs" class="py-20 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-primary mb-12">교육 프로그램</h2>
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper pb-12">
|
||||
<!-- Card 1 -->
|
||||
<div class="swiper-slide h-auto">
|
||||
<div class="card-gradient rounded-xl shadow-lg p-8 flex flex-col h-full transform hover:-translate-y-2 transition-transform duration-300">
|
||||
<p class="font-bold" style="color: var(--primary-color);">학생 대상</p>
|
||||
<h3 class="text-2xl font-bold my-3">AI 진로·직업 프로젝트</h3>
|
||||
<p class="text-text-secondary text-sm flex-grow">생성형 AI를 활용해 흥미와 강점을 탐색하고 진로를 설계하는 수업</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add other cards -->
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<section id="contact" class="py-20">
|
||||
<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-bold text-center text-primary">무료 상담 및 교육 문의</h2>
|
||||
<p class="text-text-secondary text-center mt-2 mb-8">AI 시대, 더 이상 망설일 이유가 없습니다.</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 focus:ring-primary">
|
||||
<input type="tel" placeholder="전화번호" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary">
|
||||
<input type="email" placeholder="이메일" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary">
|
||||
<textarea placeholder="문의 내용" rows="5" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary"></textarea>
|
||||
<button type="submit" class="w-full bg-primary text-white font-bold py-4 px-6 rounded-lg hover:opacity-90 transition-opacity text-lg">문의하기</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>(주)에이로움 | 대표: OOO | 사업자등록번호: 000-00-00000</p>
|
||||
<p class="opacity-70 mt-2">주소: OOO</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>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
slidesPerView: 1.2,
|
||||
spaceBetween: 20,
|
||||
centeredSlides: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
breakpoints: {
|
||||
640: { slidesPerView: 2.5 },
|
||||
1024: { slidesPerView: 3.5 },
|
||||
}
|
||||
});
|
||||
|
||||
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>
|
||||
238
.superdesign/design_iterations/airoum_1_2.html
Normal file
238
.superdesign/design_iterations/airoum_1_2.html
Normal file
@ -0,0 +1,238 @@
|
||||
<!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>
|
||||
221
.superdesign/design_iterations/airoum_1_3.html
Normal file
221
.superdesign/design_iterations/airoum_1_3.html
Normal file
@ -0,0 +1,221 @@
|
||||
<!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 - 기술을 넘어 미래를 설계하는 교육 (v4)</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">
|
||||
<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-main: #0A2A5B;
|
||||
--primary-light: #1E40AF;
|
||||
--primary-dark: #051A3A;
|
||||
--secondary-main: #00D1FF;
|
||||
--accent-main: #E5408F;
|
||||
--text-primary: #111827;
|
||||
--text-secondary: #4B5563;
|
||||
--bg-light: #F9FAFB;
|
||||
--bg-white: #FFFFFF;
|
||||
--bg-dark: #111827;
|
||||
}
|
||||
.hero-gradient { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-main) 100%); }
|
||||
.cta-gradient { background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-main) 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); }
|
||||
.nav-link { position: relative; color: var(--text-secondary); transition: color 0.3s; }
|
||||
.nav-link:hover { color: var(--primary-main); }
|
||||
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 50%; background-color: var(--secondary-main); 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(135deg); }
|
||||
</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 py-4">
|
||||
<div class="container mx-auto px-6 flex justify-between items-center">
|
||||
<a href="#" class="font-black text-3xl" style="color: var(--primary-main);">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-main);">문의 및 신청</a>
|
||||
</div>
|
||||
<div class="md:hidden">
|
||||
<button id="mobile-menu-button"><i data-lucide="menu" class="w-6 h-6"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-white">
|
||||
<a href="#intro" class="block py-2 px-6 text-sm hover:bg-gray-100">회사소개</a>
|
||||
<a href="#programs" class="block py-2 px-6 text-sm hover:bg-gray-100">교육 프로그램</a>
|
||||
<a href="#contact" class="block py-2 px-6 text-sm hover:bg-gray-100">문의 및 신청</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="hero-gradient text-white pt-32 pb-20 overflow-hidden">
|
||||
<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(--secondary-main);">미래를 설계하는 사람</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-200 transition-all duration-300 transform hover:scale-105 inline-block" style="color: var(--primary-main);">무료 상담 시작하기 <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="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>
|
||||
</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-main);">왜 에이로움인가?</h2>
|
||||
<p class="text-lg text-text-secondary">생성형 AI 시대, 기술만 아는 사람을 넘어 기술을 바르게 활용하고 미래를 설계하는 인재가 필요합니다. 에이로움은 4가지 핵심 가치를 통해 그 인재를 길러냅니다.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
|
||||
<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" style="color: var(--primary-main);"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-main);">실천형 교육</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" style="color: var(--primary-main);"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-main);">열린 교육</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" style="color: var(--primary-main);"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-main);">융합형 교육</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" style="color: var(--primary-main);"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-main);">검증된 전문성</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-main);">이런 분들께 에이로움이 필요합니다.</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-main);"></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-main);"></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-main);"></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-main);"></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-main);">교육 프로그램</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<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-main);">학생</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-main);">학생</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-main);">모두</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-main);">교사, 일반인, 기업</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-main);">교사, 공무원</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-main);">학생, 일반인</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-main);">강사, 교육기획자</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-main);">교육 실적</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" style="color: var(--secondary-main);"></i> 교육에 변화를 주고 싶다면</p>
|
||||
<p class="flex items-center"><i data-lucide="check-circle-2" class="w-5 h-5 mr-2" style="color: var(--secondary-main);"></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-main);">궁금한 점이 있다면, 지금 바로 문의하세요.</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-main);">
|
||||
<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-main);">
|
||||
<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-main);">
|
||||
<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-main);"></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-main);">문의하기</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-bg-dark 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>
|
||||
lucide.createIcons();
|
||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
mobileMenuButton.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
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');
|
||||
}
|
||||
});
|
||||
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>
|
||||
219
.superdesign/design_iterations/airoum_1_4.html
Normal file
219
.superdesign/design_iterations/airoum_1_4.html
Normal file
@ -0,0 +1,219 @@
|
||||
<!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 - 새로운 교육의 시작 (v5)</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">
|
||||
<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-main: #16332D; /* Dark green */
|
||||
--primary-light: #3C5751; /* Dark slate gray */
|
||||
--accent-main: #F4762F; /* Pumpkin */
|
||||
--neutral-light: #FEFEFE; /* White */
|
||||
--neutral-mid: #BCC4C2; /* Silver */
|
||||
--neutral-dark: #3C5751;
|
||||
--text-primary: #16332D;
|
||||
--text-on-dark: #FEFEFE;
|
||||
}
|
||||
.hero-gradient { background: linear-gradient(135deg, var(--primary-main) 0%, var(--primary-light) 100%); }
|
||||
.cta-gradient { background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-main) 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); }
|
||||
.nav-link { position: relative; color: var(--text-secondary); transition: color 0.3s; }
|
||||
.nav-link:hover { color: var(--primary-main); }
|
||||
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 50%; background-color: var(--accent-main); 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(135deg); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-neutral-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 py-4">
|
||||
<div class="container mx-auto px-6 flex justify-between items-center">
|
||||
<a href="#" class="font-black text-3xl" style="color: var(--primary-main);">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(--accent-main);">문의 및 신청</a>
|
||||
</div>
|
||||
<div class="md:hidden">
|
||||
<button id="mobile-menu-button"><i data-lucide="menu" class="w-6 h-6"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-white">
|
||||
<a href="#intro" class="block py-2 px-6 text-sm hover:bg-gray-100">회사소개</a>
|
||||
<a href="#programs" class="block py-2 px-6 text-sm hover:bg-gray-100">교육 프로그램</a>
|
||||
<a href="#contact" class="block py-2 px-6 text-sm hover:bg-gray-100">문의 및 신청</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="hero-gradient text-white pt-32 pb-20 overflow-hidden">
|
||||
<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-main);">미래를 설계하는 사람</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-200 transition-all duration-300 transform hover:scale-105 inline-block" style="color: var(--primary-main);">무료 상담 시작하기 <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="flex flex-col items-center text-center">
|
||||
<img src="https://placehold.co/150x150/FEFEFE/16332D?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>
|
||||
</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-main);">왜 에이로움인가?</h2>
|
||||
<p class="text-lg" style="color: var(--text-secondary);">생성형 AI 시대, 기술만 아는 사람을 넘어 기술을 바르게 활용하고 미래를 설계하는 인재가 필요합니다. 에이로움은 4가지 핵심 가치를 통해 그 인재를 길러냅니다.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
|
||||
<div class="bg-neutral-light p-8 rounded-xl shadow-lg text-center fade-in transform hover:-translate-y-2 transition-transform duration-300"><div class="bg-orange-100 inline-block p-4 rounded-full mb-4"><i data-lucide="zap" class="w-8 h-8" style="color: var(--accent-main);"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-main);">실천형 교육</h3><p style="color: var(--text-secondary);">"배우고 바로 쓴다"는 경험을 위해, 현장과 밀착된 실습 중심 교육을 제공합니다.</p></div>
|
||||
<div class="bg-neutral-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-orange-100 inline-block p-4 rounded-full mb-4"><i data-lucide="map" class="w-8 h-8" style="color: var(--accent-main);"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-main);">열린 교육</h3><p style="color: var(--text-secondary);">지역 거점 센터를 통해, 전국 어디서나 격차 없는 고품질 AI 교육을 받을 수 있습니다.</p></div>
|
||||
<div class="bg-neutral-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-orange-100 inline-block p-4 rounded-full mb-4"><i data-lucide="link" class="w-8 h-8" style="color: var(--accent-main);"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-main);">융합형 교육</h3><p style="color: var(--text-secondary);">진로, 교과, 실무를 유기적으로 엮어, AI와 자연스럽게 연결되는 융합 교육을 운영합니다.</p></div>
|
||||
<div class="bg-neutral-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-orange-100 inline-block p-4 rounded-full mb-4"><i data-lucide="verified" class="w-8 h-8" style="color: var(--accent-main);"></i></div><h3 class="font-bold text-xl mb-2" style="color: var(--primary-main);">검증된 전문성</h3><p style="color: var(--text-secondary);">AI 개발자와 교육 전문가가 협업한 커리큘럼과 현장에서 다듬어진 강사진이 함께합니다.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- For Whom? -->
|
||||
<section class="py-24" style="background-color: #F7F5F2;">
|
||||
<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-main);">이런 분들께 에이로움이 필요합니다.</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(--accent-main);"></i><div><h4 class="font-bold text-lg">AI 교육이 막막한 교사</h4><p style="color: var(--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(--accent-main);"></i><div><h4 class="font-bold text-lg">수준 높은 교육을 기획하는 분</h4><p style="color: var(--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(--accent-main);"></i><div><h4 class="font-bold text-lg">AI 강사가 되고 싶은 분</h4><p style="color: var(--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(--accent-main);"></i><div><h4 class="font-bold text-lg">AI 시대를 살아갈 학생</h4><p style="color: var(--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-main);">교육 프로그램</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="fade-in"><details class="bg-neutral-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-main);">학생</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 style="color: var(--text-secondary);" class="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" style="color: var(--text-secondary);"><strong>대상:</strong> 초·중·고·대학생<br><strong>기대효과:</strong> 진로 이해 증진, AI 기반 정보 탐색 및 활용 능력 향상, 주도적 진로 설계 경험</p></div></details></div>
|
||||
<div class="fade-in" style="transition-delay: 100ms;"><details class="bg-neutral-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-main);">학생</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 style="color: var(--text-secondary);" class="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" style="color: var(--text-secondary);"><strong>대상:</strong> 초·중·고 학생<br><strong>기대효과:</strong> 교과 내용 흥미 및 몰입도 향상, 생성형 AI 활용 능력 및 문제 해결력 강화</p></div></details></div>
|
||||
<div class="fade-in" style="transition-delay: 200ms;"><details class="bg-neutral-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-main);">모두</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 style="color: var(--text-secondary);" class="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" style="color: var(--text-secondary);"><strong>대상:</strong> 학생, 교사, 공무원, 일반 성인<br><strong>기대효과:</strong> AI 윤리 의식 향상, 책임 있는 AI 활용 태도 함양</p></div></details></div>
|
||||
<div class="fade-in" style="transition-delay: 300ms;"><details class="bg-neutral-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-main);">교사, 일반인, 기업</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 style="color: var(--text-secondary);" class="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" style="color: var(--text-secondary);"><strong>대상:</strong> 교사, 일반인, 직장인, 콘텐츠 제작자 등<br><strong>기대효과:</strong> 업무 효율 향상, 콘텐츠 제작 능력 향상</p></div></details></div>
|
||||
<div class="fade-in" style="transition-delay: 400ms;"><details class="bg-neutral-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-main);">교사, 공무원</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 style="color: var(--text-secondary);" class="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" style="color: var(--text-secondary);"><strong>대상:</strong> 초·중등 교사, 교육청·지자체 공무원<br><strong>기대효과:</strong> 수업 활용력 향상, AI 기반 교육 콘텐츠 개발 역량 강화</p></div></details></div>
|
||||
<div class="fade-in" style="transition-delay: 500ms;"><details class="bg-neutral-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-main);">학생, 일반인</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 style="color: var(--text-secondary);" class="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" style="color: var(--text-secondary);"><strong>대상:</strong> 초·중·고 학생, 금융교육이 필요한 기관<br><strong>기대효과:</strong> 실생활 중심 금융 리터러시 함양</p></div></details></div>
|
||||
<div class="fade-in" style="transition-delay: 600ms;"><details class="bg-neutral-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-main);">강사, 교육기획자</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 style="color: var(--text-secondary);" class="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" style="color: var(--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-main);">교육 실적</h2>
|
||||
<p class="text-lg max-w-2xl mx-auto mb-12" style="color: var(--text-secondary);">에이로움은 수많은 교육 현장에서 그 전문성을 인정받고 있습니다.</p>
|
||||
<div class="flex flex-wrap justify-center items-center gap-x-12 gap-y-8">
|
||||
<img src="https://placehold.co/120x60/BCC4C2/FEFEFE?text=Partner+A" alt="Partner A" class="h-12 opacity-60 hover:opacity-100 transition-opacity">
|
||||
<img src="https://placehold.co/120x60/BCC4C2/FEFEFE?text=Partner+B" alt="Partner B" class="h-12 opacity-60 hover:opacity-100 transition-opacity">
|
||||
<img src="https://placehold.co/120x60/BCC4C2/FEFEFE?text=Partner+C" alt="Partner C" class="h-12 opacity-60 hover:opacity-100 transition-opacity">
|
||||
<img src="https://placehold.co/120x60/BCC4C2/FEFEFE?text=Partner+D" alt="Partner D" class="h-12 opacity-60 hover:opacity-100 transition-opacity">
|
||||
<img src="https://placehold.co/120x60/BCC4C2/FEFEFE?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" style="color: var(--accent-main);"></i> 교육에 변화를 주고 싶다면</p>
|
||||
<p class="flex items-center"><i data-lucide="check-circle-2" class="w-5 h-5 mr-2" style="color: var(--accent-main);"></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-main);">궁금한 점이 있다면, 지금 바로 문의하세요.</h2>
|
||||
<p class="text-center mt-2 mb-8" style="color: var(--text-secondary);">교육에 대한 자세한 내용이나 협업 제안 등 무엇이든 좋습니다.</p>
|
||||
<form class="space-y-6">
|
||||
<input type="text" placeholder="성함" class="w-full p-4 bg-neutral-light border border-neutral-mid rounded-lg focus:ring-2 transition-shadow" style="--tw-ring-color: var(--primary-main);">
|
||||
<input type="tel" placeholder="전화번호" class="w-full p-4 bg-neutral-light border border-neutral-mid rounded-lg focus:ring-2 transition-shadow" style="--tw-ring-color: var(--primary-main);">
|
||||
<input type="email" placeholder="이메일" class="w-full p-4 bg-neutral-light border border-neutral-mid rounded-lg focus:ring-2 transition-shadow" style="--tw-ring-color: var(--primary-main);">
|
||||
<textarea placeholder="문의 내용" rows="5" class="w-full p-4 bg-neutral-light border border-neutral-mid rounded-lg focus:ring-2 transition-shadow" style="--tw-ring-color: var(--primary-main);"></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(--accent-main); color: var(--neutral-light);">문의하기</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="text-white py-10" style="background-color: var(--primary-dark);">
|
||||
<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>
|
||||
lucide.createIcons();
|
||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
mobileMenuButton.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
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');
|
||||
}
|
||||
});
|
||||
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>
|
||||
946
.superdesign/design_iterations/airoum_1_5.html
Normal file
946
.superdesign/design_iterations/airoum_1_5.html
Normal file
@ -0,0 +1,946 @@
|
||||
<!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>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
@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';
|
||||
src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Pretendard', 'Inter', -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: 'GmarketSansMedium', sans-serif !important;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--black);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Glass Effect */
|
||||
.glass {
|
||||
background: rgba(254, 254, 254, 0.1);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(188, 196, 194, 0.2);
|
||||
}
|
||||
|
||||
/* 3D Card Effect */
|
||||
.card-3d {
|
||||
transform-style: preserve-3d;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-3d:hover {
|
||||
transform: translateY(-8px) translateZ(20px) rotateX(-5deg) rotateY(10deg);
|
||||
}
|
||||
|
||||
/* Floating Animation */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px) translateZ(0px); }
|
||||
50% { transform: translateY(-20px) translateZ(10px); }
|
||||
}
|
||||
|
||||
.float-animation {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Gradient Text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--pumpkin) 0%, var(--pumpkin-light) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Morph Background */
|
||||
.morph-bg {
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, var(--pumpkin) 0%, transparent 70%);
|
||||
filter: blur(100px);
|
||||
opacity: 0.1;
|
||||
animation: morph 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes morph {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(100px, -100px) scale(1.2); }
|
||||
66% { transform: translate(-100px, 100px) scale(0.8); }
|
||||
}
|
||||
|
||||
/* Parallax Layer */
|
||||
.parallax-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Magnetic Button */
|
||||
.magnetic-btn {
|
||||
position: relative;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.magnetic-btn:hover {
|
||||
transform: translateZ(10px);
|
||||
box-shadow: 0 20px 40px -8px rgba(244, 118, 47, 0.3);
|
||||
}
|
||||
|
||||
/* Scroll Progress */
|
||||
.scroll-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
background: var(--pumpkin);
|
||||
transform-origin: left;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.1s linear;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--silver);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--dark-green);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--pumpkin);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white">
|
||||
<!-- Scroll Progress Bar -->
|
||||
<div class="scroll-progress"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 transition-all duration-300" id="navbar">
|
||||
<div class="glass">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16 sm:h-20">
|
||||
<!-- Logo -->
|
||||
<div class="flex-shrink-0">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold" style="color: var(--dark-green);">
|
||||
AIROUM
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="#about" class="text-gray-700 hover:text-[var(--pumpkin)] transition-colors">회사소개</a>
|
||||
<a href="#programs" class="text-gray-700 hover:text-[var(--pumpkin)] transition-colors">교육 프로그램</a>
|
||||
<a href="#contact" class="magnetic-btn px-6 py-2 rounded-full text-white transition-all"
|
||||
style="background: var(--pumpkin);">
|
||||
문의·신청
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button class="md:hidden p-2" id="mobile-menu-btn">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div class="md:hidden glass transform -translate-y-full transition-transform duration-300" id="mobile-menu">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
|
||||
<!-- Background Morphing Elements -->
|
||||
<div class="morph-bg top-0 right-0"></div>
|
||||
<div class="morph-bg bottom-0 left-0" style="animation-delay: -10s;"></div>
|
||||
|
||||
<!-- Parallax Layers -->
|
||||
<div class="parallax-layer" data-speed="0.1">
|
||||
<div class="absolute top-20 left-10 w-20 h-20 rounded-full opacity-10"
|
||||
style="background: var(--dark-green);"></div>
|
||||
<div class="absolute bottom-20 right-10 w-32 h-32 rounded-full opacity-10"
|
||||
style="background: var(--slate);"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Hero Content -->
|
||||
<div class="text-center lg:text-left">
|
||||
<h1 class="text-4xl 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>
|
||||
설계하는 사람을 키웁니다.
|
||||
</h1>
|
||||
|
||||
<p class="text-lg sm:text-xl mb-8 text-gray-700 animate-fade-in-up" style="animation-delay: 0.2s;">
|
||||
에이로움은 'AI(인공지능)'와 '새로움'의 가치를 융합한 AI 교육 전문 연구소입니다.
|
||||
AI 개발자와 교육 전문가가 함께 만든 현장 중심 교육으로 당신의 성장을 돕는 든든한 동반자가 되겠습니다.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start 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>
|
||||
<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);">
|
||||
프로그램 보기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CEO Card -->
|
||||
<div class="flex justify-center lg:justify-end animate-fade-in-right" style="animation-delay: 0.6s;">
|
||||
<div class="card-3d bg-white rounded-2xl p-8 shadow-2xl max-w-md">
|
||||
<div class="text-center">
|
||||
<div class="w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden"
|
||||
style="border: 4px solid var(--pumpkin);">
|
||||
<img src="https://via.placeholder.com/150" alt="최아영 대표" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2" style="color: var(--dark-green);">최아영 대표</h3>
|
||||
<p class="text-gray-600 mb-4">AI 교육 기획 전문가</p>
|
||||
<p class="text-lg italic" style="color: var(--slate);">
|
||||
"AI로 아이들의 상상력에<br>날개를 달아줍니다"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating 3D Icons -->
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div class="float-animation absolute top-1/4 left-1/4 w-16 h-16 rounded-lg glass flex items-center justify-center">
|
||||
<span class="text-2xl">🤖</span>
|
||||
</div>
|
||||
<div class="float-animation absolute bottom-1/4 right-1/4 w-20 h-20 rounded-lg glass flex items-center justify-center"
|
||||
style="animation-delay: -2s;">
|
||||
<span class="text-3xl">📚</span>
|
||||
</div>
|
||||
<div class="float-animation absolute top-1/3 right-1/3 w-14 h-14 rounded-lg glass flex items-center justify-center"
|
||||
style="animation-delay: -4s;">
|
||||
<span class="text-xl">✨</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why AIROUM Section -->
|
||||
<section class="py-20 bg-gray-50" 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);">
|
||||
왜 에이로움인가?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-700 max-w-3xl mx-auto">
|
||||
생성형 AI 시대, 그저 '기술만 아는 사람'이 아니라 기술을 바르게 활용하고,
|
||||
나아가 미래를 설계할 수 있는 사람이 더 중요해졌습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value Cards - Zigzag Layout -->
|
||||
<div class="space-y-16">
|
||||
<!-- Value 1 -->
|
||||
<div class="grid md:grid-cols-2 gap-8 items-center animate-on-scroll">
|
||||
<div class="order-2 md:order-1">
|
||||
<div class="card-3d bg-white rounded-2xl p-8 shadow-xl">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="text-4xl font-bold gradient-text mr-4">01</span>
|
||||
<h3 class="text-2xl font-bold" style="color: var(--dark-green);">실천형 교육</h3>
|
||||
</div>
|
||||
<p class="text-xl font-semibold mb-3" style="color: var(--pumpkin);">"배우고 바로 쓴다"</p>
|
||||
<p class="text-gray-700">
|
||||
이론 중심 교육을 넘어, 수업, 연수, 실무에 바로 적용할 수 있는 현장 밀착형 교육을 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 md:order-2 flex justify-center">
|
||||
<div class="w-64 h-64 rounded-full glass flex items-center justify-center">
|
||||
<span class="text-6xl">💡</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Value 2 -->
|
||||
<div class="grid md:grid-cols-2 gap-8 items-center animate-on-scroll">
|
||||
<div class="flex justify-center">
|
||||
<div class="w-64 h-64 rounded-full glass flex items-center justify-center">
|
||||
<span class="text-6xl">🌍</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-3d bg-white rounded-2xl p-8 shadow-xl">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="text-4xl font-bold gradient-text mr-4">02</span>
|
||||
<h3 class="text-2xl font-bold" style="color: var(--dark-green);">열린 교육</h3>
|
||||
</div>
|
||||
<p class="text-xl font-semibold mb-3" style="color: var(--pumpkin);">"지역 격차 없는 기회"</p>
|
||||
<p class="text-gray-700">
|
||||
서울, 수도권에 집중된 교육 기회를 넘어, 지역 거점 센터를 통해 전국 어디서나 고품질 교육을 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Value 3 -->
|
||||
<div class="grid md:grid-cols-2 gap-8 items-center animate-on-scroll">
|
||||
<div class="order-2 md:order-1">
|
||||
<div class="card-3d bg-white rounded-2xl p-8 shadow-xl">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="text-4xl font-bold gradient-text mr-4">03</span>
|
||||
<h3 class="text-2xl font-bold" style="color: var(--dark-green);">융합형 교육</h3>
|
||||
</div>
|
||||
<p class="text-xl font-semibold mb-3" style="color: var(--pumpkin);">"경계를 허무는 연결"</p>
|
||||
<p class="text-gray-700">
|
||||
진로 설계, 교과 프로젝트, 업무 실무까지 생성형 AI와 자연스럽게 연결하여 유기적으로 엮은 융합 교육을 운영합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 md:order-2 flex justify-center">
|
||||
<div class="w-64 h-64 rounded-full glass flex items-center justify-center">
|
||||
<span class="text-6xl">🔗</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Value 4 -->
|
||||
<div class="grid md:grid-cols-2 gap-8 items-center animate-on-scroll">
|
||||
<div class="flex justify-center">
|
||||
<div class="w-64 h-64 rounded-full glass flex items-center justify-center">
|
||||
<span class="text-6xl">🏆</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-3d bg-white rounded-2xl p-8 shadow-xl">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="text-4xl font-bold gradient-text mr-4">04</span>
|
||||
<h3 class="text-2xl font-bold" style="color: var(--dark-green);">검증된 전문성</h3>
|
||||
</div>
|
||||
<p class="text-xl font-semibold mb-3" style="color: var(--pumpkin);">"전문가들의 협업"</p>
|
||||
<p class="text-gray-700">
|
||||
AI 개발자와 교육 전문가가 협업하여 제작한 신뢰도 높은 커리큘럼과 현장에서 다듬어진 전문 강사진이 직접 수업합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Target Audience -->
|
||||
<div class="mt-20 bg-white rounded-3xl p-8 sm:p-12 shadow-2xl animate-on-scroll">
|
||||
<h3 class="text-2xl sm:text-3xl font-bold text-center mb-12" style="color: var(--dark-green);">
|
||||
이런 분들께 필요합니다
|
||||
</h3>
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="text-center p-6 rounded-2xl transition-all hover:shadow-lg hover:-translate-y-2"
|
||||
style="background: linear-gradient(135deg, rgba(22,51,45,0.05) 0%, rgba(244,118,47,0.05) 100%);">
|
||||
<div class="text-4xl mb-4">👩🏫</div>
|
||||
<h4 class="font-bold mb-2" style="color: var(--dark-green);">AI 교육이 막막한 교사</h4>
|
||||
<p class="text-sm text-gray-600">수업에 바로 쓸 수 있는 실전 콘텐츠</p>
|
||||
</div>
|
||||
<div class="text-center p-6 rounded-2xl transition-all hover:shadow-lg hover:-translate-y-2"
|
||||
style="background: linear-gradient(135deg, rgba(22,51,45,0.05) 0%, rgba(244,118,47,0.05) 100%);">
|
||||
<div class="text-4xl mb-4">📍</div>
|
||||
<h4 class="font-bold mb-2" style="color: var(--dark-green);">지역 교육 기획자</h4>
|
||||
<p class="text-sm text-gray-600">지역 거점 운영 모델과 검증된 커리큘럼</p>
|
||||
</div>
|
||||
<div class="text-center p-6 rounded-2xl transition-all hover:shadow-lg hover:-translate-y-2"
|
||||
style="background: linear-gradient(135deg, rgba(22,51,45,0.05) 0%, rgba(244,118,47,0.05) 100%);">
|
||||
<div class="text-4xl mb-4">🎯</div>
|
||||
<h4 class="font-bold mb-2" style="color: var(--dark-green);">AI 강사 지망생</h4>
|
||||
<p class="text-sm text-gray-600">수업 기획부터 강의 시연까지 실전형 양성과정</p>
|
||||
</div>
|
||||
<div class="text-center p-6 rounded-2xl transition-all hover:shadow-lg hover:-translate-y-2"
|
||||
style="background: linear-gradient(135deg, rgba(22,51,45,0.05) 0%, rgba(244,118,47,0.05) 100%);">
|
||||
<div class="text-4xl mb-4">🎓</div>
|
||||
<h4 class="font-bold mb-2" style="color: var(--dark-green);">AI 시대의 학생들</h4>
|
||||
<p class="text-sm text-gray-600">AI로 진로를 설계하고 아이디어를 실현하는 기회</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programs Section -->
|
||||
<section class="py-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);">
|
||||
교육 프로그램
|
||||
</h2>
|
||||
<p class="text-lg text-gray-700">
|
||||
현장에서 검증된 다양한 AI 교육 프로그램을 만나보세요
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Bento Grid Layout -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-on-scroll">
|
||||
<!-- Program 1 - Large Card -->
|
||||
<div class="md:col-span-2 lg:col-span-1 card-3d bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm">학생</span>
|
||||
<span class="text-3xl group-hover:scale-110 transition-transform">🚀</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3" style="color: var(--dark-green);">AI 진로·직업 프로젝트</h3>
|
||||
<p class="text-gray-700 mb-4">생성형 AI로 흥미와 강점을 탐색하고 진로를 설계하는 수업</p>
|
||||
<div class="flex items-center text-sm" style="color: var(--pumpkin);">
|
||||
<span>자세히 보기</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Program 2 -->
|
||||
<div class="card-3d bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">학생</span>
|
||||
<span class="text-3xl group-hover:scale-110 transition-transform">📚</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3" style="color: var(--dark-green);">AI 교과 연계 프로젝트</h3>
|
||||
<p class="text-gray-700 mb-4">국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트 수업</p>
|
||||
<div class="flex items-center text-sm" style="color: var(--pumpkin);">
|
||||
<span>자세히 보기</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Program 3 - Wide Card -->
|
||||
<div class="md:col-span-2 lg:col-span-1 card-3d bg-gradient-to-br from-gray-900 to-gray-700 text-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="px-3 py-1 bg-white/20 backdrop-blur text-white rounded-full text-sm">모두</span>
|
||||
<span class="text-3xl group-hover:scale-110 transition-transform">⚖️</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">AI 윤리 교육</h3>
|
||||
<p class="text-gray-200 mb-4">AI 시대에 필요한 디지털 윤리와 책임감을 배우는 시민 교육</p>
|
||||
<div class="flex items-center text-sm text-orange-300">
|
||||
<span>자세히 보기</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Program 4 -->
|
||||
<div class="card-3d bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">교사/기업</span>
|
||||
<span class="text-3xl group-hover:scale-110 transition-transform">💼</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3" style="color: var(--dark-green);">생성형 AI 실무 활용</h3>
|
||||
<p class="text-gray-700 mb-4">텍스트·이미지·영상 등 생성형 AI 도구를 실습하는 실무 중심 교육</p>
|
||||
<div class="flex items-center text-sm" style="color: var(--pumpkin);">
|
||||
<span>자세히 보기</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Program 5 -->
|
||||
<div class="card-3d bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">교사/공무원</span>
|
||||
<span class="text-3xl group-hover:scale-110 transition-transform">🎯</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3" style="color: var(--dark-green);">교사·공무원 연수</h3>
|
||||
<p class="text-gray-700 mb-4">현장 적용 중심의 워크숍형 AI 연수 프로그램</p>
|
||||
<div class="flex items-center text-sm" style="color: var(--pumpkin);">
|
||||
<span>자세히 보기</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Program 6 -->
|
||||
<div class="card-3d bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all cursor-pointer group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-sm">학생/일반인</span>
|
||||
<span class="text-3xl group-hover:scale-110 transition-transform">💰</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3" style="color: var(--dark-green);">AI 금융 활용 교육</h3>
|
||||
<p class="text-gray-700 mb-4">생성형 AI로 금융 정보를 탐색하고 자산을 관리하는 실습 교육</p>
|
||||
<div class="flex items-center text-sm" style="color: var(--pumpkin);">
|
||||
<span>자세히 보기</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Program 7 - Large Featured Card -->
|
||||
<div class="md:col-span-2 lg:col-span-3 card-3d rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all cursor-pointer group"
|
||||
style="background: linear-gradient(135deg, var(--pumpkin) 0%, var(--pumpkin-light) 100%);">
|
||||
<div class="grid md:grid-cols-2 gap-8 items-center">
|
||||
<div class="text-white">
|
||||
<div class="flex items-start mb-4">
|
||||
<span class="px-3 py-1 bg-white/20 backdrop-blur text-white rounded-full text-sm">강사/교육기획자</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold mb-4">생성형 AI 강사 양성</h3>
|
||||
<p class="text-white/90 mb-6">생성형 AI 교육 전문가로 성장하기 위한 실전 중심 양성 과정</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li class="flex items-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
교육 기획부터 실제 강의까지
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
현장 실습 및 멘토링 제공
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
수료 후 강의 기회 연계
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-center text-white font-semibold">
|
||||
<span>지금 신청하기</span>
|
||||
<svg class="w-5 h-5 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div class="relative">
|
||||
<div class="w-48 h-48 rounded-full bg-white/10 backdrop-blur flex items-center justify-center">
|
||||
<span class="text-8xl">🎓</span>
|
||||
</div>
|
||||
<div class="absolute -top-4 -right-4 w-20 h-20 rounded-full bg-white/20 backdrop-blur flex items-center justify-center animate-pulse">
|
||||
<span class="text-2xl">⭐</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Partners Section -->
|
||||
<section class="py-16 bg-gray-50 overflow-hidden">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h3 class="text-2xl font-bold text-center mb-8" style="color: var(--dark-green);">
|
||||
함께하는 파트너
|
||||
</h3>
|
||||
|
||||
<!-- Infinite Scroll Container -->
|
||||
<div class="relative">
|
||||
<div class="flex space-x-8 animate-scroll">
|
||||
<!-- Partner logos - duplicated for seamless loop -->
|
||||
<div class="flex space-x-8">
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 1</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 2</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 3</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 4</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 5</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Duplicate for seamless loop -->
|
||||
<div class="flex space-x-8">
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 1</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 2</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 3</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 4</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 w-32 h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
|
||||
<span class="text-gray-400">Partner 5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.animate-scroll {
|
||||
animation: scroll 20s linear infinite;
|
||||
}
|
||||
|
||||
.animate-scroll:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
</style>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h3 class="text-2xl sm:text-3xl font-bold text-center mb-12" style="color: var(--dark-green);">
|
||||
수강생 후기
|
||||
</h3>
|
||||
|
||||
<!-- 3D Card Carousel -->
|
||||
<div class="relative overflow-hidden">
|
||||
<div class="flex space-x-6 pb-8" id="testimonial-carousel">
|
||||
<!-- Testimonial 1 -->
|
||||
<div class="flex-shrink-0 w-80 card-3d bg-white rounded-2xl p-6 shadow-xl">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
|
||||
<div>
|
||||
<h4 class="font-bold">김선생님</h4>
|
||||
<p class="text-sm text-gray-600">중학교 교사</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700">
|
||||
"AI를 어떻게 수업에 활용해야 할지 막막했는데, 에이로움 연수를 통해 바로 적용할 수 있는 실전 방법을 배웠습니다."
|
||||
</p>
|
||||
<div class="flex mt-4">
|
||||
<span class="text-yellow-400">★★★★★</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 2 -->
|
||||
<div class="flex-shrink-0 w-80 card-3d bg-white rounded-2xl p-6 shadow-xl">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
|
||||
<div>
|
||||
<h4 class="font-bold">이학생</h4>
|
||||
<p class="text-sm text-gray-600">고등학생</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700">
|
||||
"AI로 제 진로를 구체적으로 설계할 수 있었어요. 단순히 기술을 배우는 게 아니라 미래를 그려볼 수 있었습니다."
|
||||
</p>
|
||||
<div class="flex mt-4">
|
||||
<span class="text-yellow-400">★★★★★</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 3 -->
|
||||
<div class="flex-shrink-0 w-80 card-3d bg-white rounded-2xl p-6 shadow-xl">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
|
||||
<div>
|
||||
<h4 class="font-bold">박기획자</h4>
|
||||
<p class="text-sm text-gray-600">교육 기획자</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700">
|
||||
"지역에서도 수준 높은 AI 교육을 운영할 수 있게 되었습니다. 체계적인 커리큘럼과 지원이 큰 도움이 되었어요."
|
||||
</p>
|
||||
<div class="flex mt-4">
|
||||
<span class="text-yellow-400">★★★★★</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-20 relative overflow-hidden" style="background: linear-gradient(135deg, var(--dark-green) 0%, var(--slate) 100%);">
|
||||
<!-- Background Pattern -->
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute top-0 left-0 w-96 h-96 rounded-full"
|
||||
style="background: radial-gradient(circle, var(--pumpkin) 0%, transparent 70%);"></div>
|
||||
<div class="absolute bottom-0 right-0 w-96 h-96 rounded-full"
|
||||
style="background: radial-gradient(circle, var(--pumpkin) 0%, transparent 70%);"></div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
생성형 AI는 단순한 유행이 아니라<br>
|
||||
미래 교육의 기본값입니다.
|
||||
</h2>
|
||||
<p class="text-xl mb-8 opacity-90">
|
||||
에이로움이 그 시작이 되어드리겠습니다.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center justify-center space-x-4 text-lg">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
교육에 변화를 주고 싶다면
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
더 실천적인 AI 교육을 찾고 있다면
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<div class="max-w-2xl mx-auto" 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>
|
||||
|
||||
<form class="space-y-6">
|
||||
<div class="grid sm:grid-cols-2 gap-6">
|
||||
<div class="form-group">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--slate);">이름</label>
|
||||
<input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-[var(--dark-green)] focus:ring-2 focus:ring-[var(--dark-green)] focus:ring-opacity-20 transition-all">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--slate);">연락처</label>
|
||||
<input type="tel" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-[var(--dark-green)] focus:ring-2 focus:ring-[var(--dark-green)] focus:ring-opacity-20 transition-all">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--slate);">이메일</label>
|
||||
<input type="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-[var(--dark-green)] focus:ring-2 focus:ring-[var(--dark-green)] focus:ring-opacity-20 transition-all">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--slate);">문의 내용</label>
|
||||
<textarea rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-[var(--dark-green)] focus:ring-2 focus:ring-[var(--dark-green)] focus:ring-opacity-20 transition-all resize-none"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full magnetic-btn py-4 rounded-full text-white font-bold text-lg transition-all"
|
||||
style="background: var(--pumpkin);">
|
||||
문의하기
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12" style="background: var(--dark-green);">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center text-white">
|
||||
<h3 class="text-2xl font-bold mb-4">에이로움 교육연구소</h3>
|
||||
<p class="mb-2">대표: 최아영 | 연락처: 010-5095-8821</p>
|
||||
<p class="mb-6">서울특별시 송파구 오금로 11길 55, 214-88호</p>
|
||||
|
||||
<div class="flex justify-center space-x-6">
|
||||
<a href="#" class="text-white hover:text-[var(--pumpkin)] transition-colors">
|
||||
<span class="sr-only">Naver Blog</span>
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M16.273 12.845L7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727v12.845z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" 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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="mt-8 text-sm opacity-75">
|
||||
© 2025 AIROUM. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Scroll Progress Bar
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollTop = window.scrollY;
|
||||
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||
const scrollPercent = scrollTop / docHeight;
|
||||
document.querySelector('.scroll-progress').style.transform = `scaleX(${scrollPercent})`;
|
||||
});
|
||||
|
||||
// Navbar Background on Scroll
|
||||
const navbar = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('bg-white', 'shadow-lg');
|
||||
} else {
|
||||
navbar.classList.remove('bg-white', 'shadow-lg');
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile Menu Toggle
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
mobileMenuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('-translate-y-full');
|
||||
});
|
||||
|
||||
// Smooth Scroll for Anchor Links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
// Close mobile menu if open
|
||||
mobileMenu.classList.add('-translate-y-full');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Intersection Observer for Scroll Animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Parallax Effect
|
||||
const parallaxElements = document.querySelectorAll('.parallax-layer');
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
const mouseX = e.clientX / window.innerWidth - 0.5;
|
||||
const mouseY = e.clientY / window.innerHeight - 0.5;
|
||||
|
||||
parallaxElements.forEach(el => {
|
||||
const speed = el.dataset.speed || 0.1;
|
||||
const x = mouseX * 100 * speed;
|
||||
const y = mouseY * 100 * speed;
|
||||
el.style.transform = `translate(${x}px, ${y}px)`;
|
||||
});
|
||||
});
|
||||
|
||||
// Animation Classes
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-right {
|
||||
opacity: 0;
|
||||
animation: fadeInRight 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animate-on-scroll.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
132
.superdesign/design_system/design-system.json
Normal file
132
.superdesign/design_system/design-system.json
Normal file
@ -0,0 +1,132 @@
|
||||
{
|
||||
"colors": {
|
||||
"primary": {
|
||||
"main": "#0A2A5B",
|
||||
"light": "#1E40AF",
|
||||
"dark": "#051A3A",
|
||||
"contrastText": "#FFFFFF"
|
||||
},
|
||||
"secondary": {
|
||||
"main": "#00D1FF",
|
||||
"light": "#77F1FF",
|
||||
"dark": "#00A8CC",
|
||||
"contrastText": "#0A2A5B"
|
||||
},
|
||||
"accent": {
|
||||
"main": "#E5408F",
|
||||
"light": "#F472B6",
|
||||
"dark": "#C72B77",
|
||||
"contrastText": "#FFFFFF"
|
||||
},
|
||||
"neutrals": {
|
||||
"black": "#111827",
|
||||
"dark_gray": "#374151",
|
||||
"gray": "#9CA3AF",
|
||||
"light_gray": "#E5E7EB",
|
||||
"white": "#FFFFFF"
|
||||
},
|
||||
"background": {
|
||||
"default": "#F9FAFB",
|
||||
"paper": "#FFFFFF",
|
||||
"dark": "#111827",
|
||||
"gradient_dark": "linear-gradient(135deg, #051A3A 0%, #111827 100%)"
|
||||
},
|
||||
"text": {
|
||||
"primary": "#1F2937",
|
||||
"secondary": "#4B5563",
|
||||
"disabled": "#9CA3AF",
|
||||
"primary_on_dark": "#F9FAFB",
|
||||
"secondary_on_dark": "#9CA3AF"
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"fontFamilies": {
|
||||
"primary": "\"Pretendard\", \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
|
||||
"monospace": "\"Roboto Mono\", monospace"
|
||||
},
|
||||
"sizes": {
|
||||
"h1": "2.5rem",
|
||||
"h2": "2rem",
|
||||
"h3": "1.75rem",
|
||||
"h4": "1.5rem",
|
||||
"h5": "1.25rem",
|
||||
"h6": "1rem",
|
||||
"body1": "1rem",
|
||||
"body2": "0.875rem",
|
||||
"caption": "0.75rem"
|
||||
},
|
||||
"weights": {
|
||||
"light": 300,
|
||||
"regular": 400,
|
||||
"medium": 500,
|
||||
"bold": 700,
|
||||
"black": 900
|
||||
},
|
||||
"lineHeights": {
|
||||
"h1": "1.2",
|
||||
"h2": "1.25",
|
||||
"h3": "1.3",
|
||||
"body": "1.6"
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"base": 8,
|
||||
"units": {
|
||||
"1x": "8px",
|
||||
"2x": "16px",
|
||||
"3x": "24px",
|
||||
"4x": "32px",
|
||||
"5x": "40px",
|
||||
"6x": "48px"
|
||||
}
|
||||
},
|
||||
"components": {
|
||||
"buttons": {
|
||||
"primary": {
|
||||
"backgroundColor": "#0A2A5B",
|
||||
"color": "#FFFFFF",
|
||||
"padding": "12px 24px",
|
||||
"borderRadius": "9999px",
|
||||
"fontWeight": 700
|
||||
},
|
||||
"secondary": {
|
||||
"backgroundColor": "#00D1FF",
|
||||
"color": "#0A2A5B",
|
||||
"padding": "12px 24px",
|
||||
"borderRadius": "9999px",
|
||||
"fontWeight": 700
|
||||
}
|
||||
},
|
||||
"inputs": {
|
||||
"outlined": {
|
||||
"borderColor": "#D1D5DB",
|
||||
"borderRadius": "8px",
|
||||
"padding": "12px 16px",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
"cards": {
|
||||
"default": {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"borderRadius": "16px",
|
||||
"boxShadow": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
||||
"padding": "24px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"effects": {
|
||||
"borderRadius": {
|
||||
"small": "4px",
|
||||
"medium": "8px",
|
||||
"large": "12px",
|
||||
"xlarge": "16px",
|
||||
"full": "9999px"
|
||||
},
|
||||
"boxShadows": {
|
||||
"small": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
"medium": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
||||
"large": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
||||
"xlarge": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
.superdesign/mood_board/card news.png
Normal file
BIN
.superdesign/mood_board/card news.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
.superdesign/mood_board/card news2.png
Normal file
BIN
.superdesign/mood_board/card news2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
.superdesign/mood_board/logo.png
Normal file
BIN
.superdesign/mood_board/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Reference in New Issue
Block a user