generated from Paul.Kim/tpl-superclaude
Paul.Kim
7cdba3dfc2
- Adds the AIROUM logo to the navigation bar for brand identity. - Refactors the hero section into an interactive, auto-playing slider that alternates between the main marketing message and a profile card for the CEO, creating a more dynamic introduction. - Implements JavaScript for slider functionality, including navigation dots and auto-play management. - Updates the CEO profile image and corrects the social media links in the footer to point to the official Naver Blog and Instagram pages.
1010 lines
54 KiB
HTML
1010 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AIROUM - AI 교육의 새로운 기준</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- 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 flex items-center space-x-4">
|
|
<img src="images/logo.png" alt="AIROUM Logo" class="h-10">
|
|
<h1 class="text-2xl sm:text-3xl font-bold" style="color: var(--dark-green);">
|
|
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 flex-col 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 flex-grow flex flex-col justify-center">
|
|
<!-- Slider Container -->
|
|
<div id="hero-slider-container" class="relative w-full max-w-4xl mx-auto overflow-hidden">
|
|
<div id="hero-slider" class="flex transition-transform duration-700 ease-in-out">
|
|
<!-- Slide 1: Hero Content -->
|
|
<div class="w-full flex-shrink-0">
|
|
<div class="text-center">
|
|
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 animate-fade-in-up" style="color: var(--dark-green);">
|
|
생성형 AI 시대,<br>
|
|
<span class="gradient-text">기술을 넘어 미래를</span><br>
|
|
설계하는 사람을 키웁니다.
|
|
</h1>
|
|
<p class="text-lg sm:text-xl mb-8 text-gray-700 max-w-3xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
|
|
에이로움은 'AI(인공지능)'와 '새로움'의 가치를 융합한 AI 교육 전문 연구소입니다.
|
|
AI 개발자와 교육 전문가가 함께 만든 현장 중심 교육으로 당신의 성장을 돕는 든든한 동반자가 되겠습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: CEO Card -->
|
|
<div class="w-full flex-shrink-0">
|
|
<div class="flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12">
|
|
<div class="flex-shrink-0">
|
|
<img src="images/profile.png" alt="최아영 대표" class="w-48 h-48 md:w-64 md:h-64 rounded-full object-cover shadow-2xl" style="border: 6px solid var(--pumpkin);">
|
|
</div>
|
|
<div class="text-center md:text-left">
|
|
<h3 class="text-4xl md:text-5xl font-bold mb-3" style="color: var(--dark-green);">최아영 대표</h3>
|
|
<p class="text-xl text-gray-600 mb-4">AI 교육 기획 전문가</p>
|
|
<p class="text-2xl italic" style="color: var(--slate);">
|
|
"AI로 아이들의 상상력에<br>날개를 달아줍니다"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Buttons (Static) -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center mt-8 animate-fade-in-up" style="animation-delay: 0.4s;">
|
|
<button class="magnetic-btn px-8 py-3 rounded-full text-white font-semibold transition-all" style="background: var(--pumpkin);">
|
|
무료 상담 신청
|
|
</button>
|
|
<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>
|
|
|
|
<!-- Slider Dots -->
|
|
<div id="hero-slider-dots" class="flex justify-center space-x-3 mt-8">
|
|
<!-- Dots will be generated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating 3D Icons -->
|
|
<div class="absolute inset-0 pointer-events-none z-0">
|
|
<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>
|
|
</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="col-span-1 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="col-span-1 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="col-span-1 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="https://blog.naver.com/ay8812" 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="https://instagram.com/aiyi\_choi" class="text-white hover:text-[var(--pumpkin)] transition-colors">
|
|
<span class="sr-only">Instagram</span>
|
|
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1112.324 0 6.162 6.162 0 01-12.324 0zM12 16a4 4 0 110-8 4 4 0 010 8zm4.965-10.405a1.44 1.44 0 112.881.001 1.44 1.44 0 01-2.881-.001z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<p class="mt-8 text-sm opacity-75">
|
|
© 2025 AIROUM. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
// Hero Slider
|
|
const sliderContainer = document.getElementById('hero-slider-container');
|
|
if (sliderContainer) {
|
|
const slider = document.getElementById('hero-slider');
|
|
const slides = slider.children;
|
|
const dotsContainer = document.getElementById('hero-slider-dots');
|
|
let currentSlide = 0;
|
|
let slideInterval;
|
|
|
|
// Create dots
|
|
if (dotsContainer) {
|
|
for (let i = 0; i < slides.length; i++) {
|
|
const dot = document.createElement('button');
|
|
dot.classList.add('w-3', 'h-3', 'rounded-full', 'transition-all', 'duration-300');
|
|
dot.classList.add(i === 0 ? 'bg-[var(--pumpkin)]' : 'bg-gray-300', 'hover:bg-[var(--pumpkin-light)]');
|
|
dot.addEventListener('click', () => {
|
|
goToSlide(i);
|
|
resetInterval();
|
|
});
|
|
dotsContainer.appendChild(dot);
|
|
}
|
|
}
|
|
|
|
const dots = dotsContainer ? dotsContainer.children : [];
|
|
|
|
function goToSlide(slideIndex) {
|
|
if (!slider) return;
|
|
slider.style.transform = `translateX(-${slideIndex * 100}%)`;
|
|
|
|
if(dots.length > 0) {
|
|
if (dots[currentSlide]) {
|
|
dots[currentSlide].classList.remove('bg-[var(--pumpkin)]');
|
|
dots[currentSlide].classList.add('bg-gray-300');
|
|
}
|
|
if (dots[slideIndex]) {
|
|
dots[slideIndex].classList.add('bg-[var(--pumpkin)]');
|
|
dots[slideIndex].classList.remove('bg-gray-300');
|
|
}
|
|
}
|
|
currentSlide = slideIndex;
|
|
}
|
|
|
|
function nextSlide() {
|
|
const next = (currentSlide + 1) % slides.length;
|
|
goToSlide(next);
|
|
}
|
|
|
|
function startInterval() {
|
|
slideInterval = setInterval(nextSlide, 5000); // Change slide every 5 seconds
|
|
}
|
|
|
|
function resetInterval() {
|
|
clearInterval(slideInterval);
|
|
startInterval();
|
|
}
|
|
|
|
sliderContainer.addEventListener('mouseenter', () => clearInterval(slideInterval));
|
|
sliderContainer.addEventListener('mouseleave', () => startInterval());
|
|
|
|
startInterval();
|
|
}
|
|
|
|
// 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> |