generated from Paul.Kim/tpl-superclaude
Paul.Kim
0716113975
주요 변경 사항: - 모바일 화면 하단에 플로팅 CTA 버튼을 추가하여 사용자 접근성을 높였습니다. 이 버튼은 '문의·신청' 섹션이 보일 때는 자동으로 숨겨집니다. - 내비게이션 메뉴 링크 클릭 시, 고정된 헤더에 의해 섹션 제목이 가려지는 문제를 `scroll-margin-top` 속성을 사용하여 해결했습니다. - 모바일 메뉴가 열린 상태에서 스크롤하면 자동으로 닫히도록 수정하여 사용성을 개선했습니다. - 일부 제목과 로고의 폰트 크기를 반응형으로 조정하여 가독성을 높였습니다. - 새로운 디자인 버전(airoum_1_6) 파일을 추가했습니다.
1047 lines
56 KiB
HTML
1047 lines
56 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);
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
/* Set scroll margin on sections to prevent them from being covered by the fixed nav */
|
|
section[id] {
|
|
scroll-margin-top: 5rem; /* 80px */
|
|
}
|
|
</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-8 sm:h-10">
|
|
<h1 class="text-xl 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 overflow-hidden transition-all duration-300 ease-in-out" id="mobile-menu" style="max-height: 0px;">
|
|
<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-gray-700 hover:text-[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 items-center transition-transform duration-700 ease-in-out" style="min-height: 40vh;">
|
|
<!-- Slide 1: Hero Content -->
|
|
<div class="w-full flex-shrink-0">
|
|
<div class="text-center">
|
|
<h1 class="text-3xl 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 hidden sm:block" 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 scroll-mt-16 sm:scroll-mt-20" 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 scroll-mt-16 sm:scroll-mt-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-2xl sm:text-3xl lg:text-4xl 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 scroll-mt-16 sm:scroll-mt-20" id="contact">
|
|
<div class="bg-white rounded-3xl p-8 sm:p-12 shadow-2xl">
|
|
<h3 class="text-xl sm:text-2xl 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>
|
|
|
|
<!-- Mobile Floating CTA -->
|
|
<div id="mobile-cta" class="md:hidden fixed bottom-0 left-0 right-0 p-4 bg-white/80 backdrop-blur-xl z-40 transition-transform duration-500" style="box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
|
|
<a href="#contact" class="w-full block text-center px-6 py-3 rounded-full text-white font-semibold transition-all"
|
|
style="background: var(--pumpkin);">
|
|
무료 상담 및 교육 문의
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 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 & Mobile Menu management
|
|
const navbar = document.getElementById('navbar');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('bg-white', 'shadow-lg');
|
|
} else {
|
|
navbar.classList.remove('bg-white', 'shadow-lg');
|
|
}
|
|
// Close mobile menu on scroll
|
|
if (mobileMenu && !mobileMenu.classList.contains('-translate-y-full')) {
|
|
mobileMenu.classList.add('-translate-y-full');
|
|
}
|
|
});
|
|
|
|
if (mobileMenuBtn) {
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
if (mobileMenu) {
|
|
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);
|
|
});
|
|
|
|
// Mobile CTA visibility
|
|
const mobileCta = document.getElementById('mobile-cta');
|
|
const contactSection = document.getElementById('contact');
|
|
|
|
const ctaObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
mobileCta.classList.add('translate-y-full');
|
|
} else {
|
|
mobileCta.classList.remove('translate-y-full');
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
if (contactSection) {
|
|
ctaObserver.observe(contactSection);
|
|
}
|
|
|
|
// 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> |