Paul.Kim/tst-claude-code-samples
1
0
Fork 0
generated from Paul.Kim/tpl-superclaude
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
Paul.Kim
2025-07-24 02:02:31 +09:00
parent 90beecd91e
commit 7cdba3dfc2
1 changed files with 128 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
.superdesign/design_iterations/airoum_1_5.html
View File

@ -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"
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 top-20 left-10 w-20 h-20 rounded-full opacity-10" style="background: var(--dark-green);"></div>
<div class="absolute bottom-20 right-10 w-32 h-32 rounded-full opacity-10" style="background: var(--slate);"></div>
</div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Hero Content -->
<div class="text-center lg:text-left">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 animate-fade-in-up"
style="color: var(--dark-green);">
<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 animate-fade-in-up" style="animation-delay: 0.2s;">
<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 class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start animate-fade-in-up"
style="animation-delay: 0.4s;">
<button class="magnetic-btn px-8 py-3 rounded-full text-white font-semibold transition-all"
style="background: var(--pumpkin);">
무료 상담 신청
</button>
<button class="magnetic-btn px-8 py-3 rounded-full font-semibold transition-all"
style="border: 2px solid var(--dark-green); color: var(--dark-green);">
프로그램 보기
</button>
</div>
</div>
<!-- CEO Card -->
<div class="flex justify-center lg:justify-end animate-fade-in-right" style="animation-delay: 0.6s;">
<div class="card-3d bg-white rounded-2xl p-8 shadow-2xl max-w-md">
<div class="text-center">
<div class="w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden"
style="border: 4px solid var(--pumpkin);">
<img src="https://via.placeholder.com/150" alt="최아영 대표" class="w-full h-full object-cover">
<!-- 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>
<h3 class="text-2xl font-bold mb-2" style="color: var(--dark-green);">최아영 대표</h3>
<p class="text-gray-600 mb-4">AI 교육 기획 전문가</p>
<p class="text-lg italic" style="color: var(--slate);">
<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">
<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;">
<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;">
<div class="float-animation absolute top-1/3 right-1/3 w-14 h-14 rounded-lg glass flex items-center justify-center" style="animation-delay: -4s;">
<span class="text-xl">✨</span>
</div>
</div>
</div>
</section>
<!-- Why AIROUM Section -->
@ -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;