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:
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>
|
||||
Reference in New Issue
Block a user