feat(landing): Add logo and implement hero slider with CEO profile

- 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.

.superdesign/design_iterations/airoum_1_5.html

@@ -169,7 +169,8 @@
             <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">
+                    <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>
@@ -209,81 +210,82 @@
     </nav>
     
     <!-- Hero Section -->
-    <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
+    <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" 
+            <div class="absolute top-20 left-10 w-20 h-20 rounded-full opacity-10" style="background: var(--dark-green);"></div>
-                 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 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="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex-grow flex flex-col justify-center">
-            <div class="grid lg:grid-cols-2 gap-12 items-center">
+            <!-- Slider Container -->
-                <!-- Hero Content -->
+            <div id="hero-slider-container" class="relative w-full max-w-4xl mx-auto overflow-hidden">
-                <div class="text-center lg:text-left">
+                <div id="hero-slider" class="flex transition-transform duration-700 ease-in-out">
-                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 animate-fade-in-up"
+                    <!-- Slide 1: Hero Content -->
-                        style="color: var(--dark-green);">
+                    <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;">
-                    <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 -->
+                    <!-- Slide 2: CEO Card -->
-                <div class="flex justify-center lg:justify-end animate-fade-in-right" style="animation-delay: 0.6s;">
+                    <div class="w-full flex-shrink-0">
-                    <div class="card-3d bg-white rounded-2xl p-8 shadow-2xl max-w-md">
+                        <div class="flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12">
-                        <div class="text-center">
+                            <div class="flex-shrink-0">
-                            <div class="w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden"
+                                <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);">
-                                 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>
+                            <div class="text-center md:text-left">
-                            <p class="text-gray-600 mb-4">AI 교육 기획 전문가</p>
+                                <h3 class="text-4xl md:text-5xl font-bold mb-3" style="color: var(--dark-green);">최아영 대표</h3>
-                            <p class="text-lg italic" style="color: var(--slate);">
+                                <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">
+        <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"
+            <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;">
-                     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"
+            <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;">
-                     style="animation-delay: -4s;">
                 <span class="text-xl">✨</span>
             </div>
         </div>
-        </div>
     </section>
     
     <!-- Why AIROUM Section -->
@@ -436,7 +438,7 @@
             <!-- 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="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>
@@ -468,7 +470,7 @@
                 </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="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>
@@ -532,7 +534,7 @@
                 </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"
+                <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">
@@ -799,13 +801,13 @@
                 <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">
+                    <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="#" class="text-white hover:text-[var(--pumpkin)] transition-colors">
+                    <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"/>
@@ -822,6 +824,68 @@
     
     <!-- 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;