hmw1001
517 lines
25 KiB
PHP
517 lines
25 KiB
PHP
<?php
|
||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||
|
||
// 레이아웃 폴더내 style.css 파일
|
||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||
?>
|
||
|
||
<!-- Creative Portfolio Layout -->
|
||
<div class="creative-portfolio-container">
|
||
<!-- Hero Section -->
|
||
<section class="hero-section">
|
||
<div class="hero-background">
|
||
<div class="hero-shapes">
|
||
<div class="shape shape-1"></div>
|
||
<div class="shape shape-2"></div>
|
||
<div class="shape shape-3"></div>
|
||
<div class="shape shape-4"></div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-content">
|
||
<div class="hero-text">
|
||
<span class="hero-badge">CREATIVE STUDIO</span>
|
||
<h1 class="hero-title">
|
||
<span class="title-line">Where</span>
|
||
<span class="title-line gradient-text">Ideas</span>
|
||
<span class="title-line">Come to Life</span>
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
창의적인 아이디어와 혁신적인 디자인으로 브랜드의 가치를 극대화합니다.
|
||
우리는 단순한 디자인을 넘어 경험을 만듭니다.
|
||
</p>
|
||
<div class="hero-cta">
|
||
<a href="#portfolio" class="btn-primary">포트폴리오 보기</a>
|
||
<a href="#contact" class="btn-secondary">프로젝트 시작</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="creative-showcase">
|
||
<div class="showcase-item item-1">
|
||
<div class="item-content">
|
||
<div class="item-icon">🎨</div>
|
||
<h4>Brand Identity</h4>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-item item-2">
|
||
<div class="item-content">
|
||
<div class="item-icon">💻</div>
|
||
<h4>Web Design</h4>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-item item-3">
|
||
<div class="item-content">
|
||
<div class="item-icon">📱</div>
|
||
<h4>Mobile App</h4>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-item item-4">
|
||
<div class="item-content">
|
||
<div class="item-icon">🎬</div>
|
||
<h4>Motion Graphics</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Portfolio Section -->
|
||
<section class="portfolio-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">PORTFOLIO</span>
|
||
<h2 class="section-title">최근 작업</h2>
|
||
<p class="section-subtitle">창의적이고 혁신적인 프로젝트들을 만나보세요</p>
|
||
</div>
|
||
<div class="portfolio-filter">
|
||
<button class="filter-btn active" data-filter="all">전체</button>
|
||
<button class="filter-btn" data-filter="branding">브랜딩</button>
|
||
<button class="filter-btn" data-filter="web">웹 디자인</button>
|
||
<button class="filter-btn" data-filter="mobile">모바일</button>
|
||
<button class="filter-btn" data-filter="motion">모션</button>
|
||
</div>
|
||
<div class="portfolio-grid">
|
||
<div class="portfolio-item" data-category="branding">
|
||
<div class="portfolio-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="웹 애플리케이션 개발">
|
||
<div class="portfolio-overlay">
|
||
<div class="overlay-content">
|
||
<h3>스타트업 브랜딩</h3>
|
||
<p>혁신적인 로고와 브랜드 아이덴티티 디자인</p>
|
||
<a href="#" class="btn-view">자세히 보기</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-item" data-category="web">
|
||
<div class="portfolio-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="모바일 앱 디자인">
|
||
<div class="portfolio-overlay">
|
||
<div class="overlay-content">
|
||
<h3>이커머스 웹사이트</h3>
|
||
<p>사용자 경험을 중시한 온라인 쇼핑몰 디자인</p>
|
||
<a href="#" class="btn-view">자세히 보기</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-item" data-category="mobile">
|
||
<div class="portfolio-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="브랜드 아이덴티티">
|
||
<div class="portfolio-overlay">
|
||
<div class="overlay-content">
|
||
<h3>피트니스 앱</h3>
|
||
<p>직관적인 UI/UX를 적용한 모바일 애플리케이션</p>
|
||
<a href="#" class="btn-view">자세히 보기</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-item" data-category="motion">
|
||
<div class="portfolio-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1547394765-185e1e68f34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="데이터 시각화">
|
||
<div class="portfolio-overlay">
|
||
<div class="overlay-content">
|
||
<h3>프로모션 비디오</h3>
|
||
<p>브랜드 스토리를 담은 모션 그래픽 영상</p>
|
||
<a href="#" class="btn-view">자세히 보기</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-item" data-category="branding">
|
||
<div class="portfolio-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1516116216624-53e697fedbea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="클라우드 아키텍처">
|
||
<div class="portfolio-overlay">
|
||
<div class="overlay-content">
|
||
<h3>패키지 디자인</h3>
|
||
<p>지속가능한 소재를 활용한 친환경 패키징</p>
|
||
<a href="#" class="btn-view">자세히 보기</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-item" data-category="web">
|
||
<div class="portfolio-image">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="인공지능 챗봇">
|
||
<div class="portfolio-overlay">
|
||
<div class="overlay-content">
|
||
<h3>랜딩 페이지</h3>
|
||
<p>높은 전환율을 목표로 한 마케팅 페이지</p>
|
||
<a href="#" class="btn-view">자세히 보기</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Process Section -->
|
||
<section class="process-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">PROCESS</span>
|
||
<h2 class="section-title">우리의 작업 방식</h2>
|
||
<p class="section-subtitle">체계적이고 창의적인 프로세스로 최고의 결과를 만들어냅니다</p>
|
||
</div>
|
||
<div class="process-timeline">
|
||
<div class="process-step">
|
||
<div class="step-number">01</div>
|
||
<div class="step-content">
|
||
<h3>Discovery</h3>
|
||
<p>클라이언트의 니즈와 목표를 파악하고 프로젝트의 방향성을 설정합니다.</p>
|
||
<ul class="step-features">
|
||
<li>브리핑 및 요구사항 분석</li>
|
||
<li>경쟁사 분석</li>
|
||
<li>타겟 오디언스 정의</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="process-step">
|
||
<div class="step-number">02</div>
|
||
<div class="step-content">
|
||
<h3>Strategy</h3>
|
||
<p>데이터와 인사이트를 바탕으로 전략적인 접근 방식을 수립합니다.</p>
|
||
<ul class="step-features">
|
||
<li>브랜드 포지셔닝</li>
|
||
<li>컨셉 개발</li>
|
||
<li>전략 로드맵 수립</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="process-step">
|
||
<div class="step-number">03</div>
|
||
<div class="step-content">
|
||
<h3>Design</h3>
|
||
<p>창의적인 아이디어를 시각적으로 구현하고 사용자 경험을 설계합니다.</p>
|
||
<ul class="step-features">
|
||
<li>와이어프레임 제작</li>
|
||
<li>프로토타이핑</li>
|
||
<li>UI/UX 디자인</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="process-step">
|
||
<div class="step-number">04</div>
|
||
<div class="step-content">
|
||
<h3>Development</h3>
|
||
<p>최신 기술을 활용하여 디자인을 실제 제품으로 구현합니다.</p>
|
||
<ul class="step-features">
|
||
<li>프론트엔드 개발</li>
|
||
<li>백엔드 구축</li>
|
||
<li>테스트 및 최적화</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Skills Section -->
|
||
<section class="skills-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">SKILLS</span>
|
||
<h2 class="section-title">전문 분야</h2>
|
||
<p class="section-subtitle">다양한 분야의 전문성을 바탕으로 통합적인 솔루션을 제공합니다</p>
|
||
</div>
|
||
<div class="skills-grid">
|
||
<div class="skill-category">
|
||
<div class="skill-icon">🎨</div>
|
||
<h3>Visual Design</h3>
|
||
<div class="skill-items">
|
||
<div class="skill-item">
|
||
<span class="skill-name">Brand Identity</span>
|
||
<div class="skill-level">
|
||
<div class="skill-bar" style="width: 95%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">Logo Design</span>
|
||
<div class="skill-level">
|
||
<div class="skill-bar" style="width: 90%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">Print Design</span>
|
||
<div class="skill-level">
|
||
<div class="skill-bar" style="width: 85%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-category">
|
||
<div class="skill-icon">💻</div>
|
||
<h3>Digital Design</h3>
|
||
<div class="skill-items">
|
||
<div class="skill-item">
|
||
<span class="skill-name">UI/UX Design</span>
|
||
<div class="skill-level">
|
||
<div class="skill-bar" style="width: 92%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">Web Design</span>
|
||
<div class="skill-level">
|
||
<div class="skill-bar" style="width: 88%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">Mobile Design</span>
|
||
<div class="skill-level">
|
||
<div class="skill-bar" style="width: 90%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-category">
|
||
<div class="skill-icon">🎬</div>
|
||
<h3>Motion & Video</h3>
|
||
<div class="skill-items">
|
||
<div class="skill-item">
|
||
<span class="skill-name">Motion Graphics</span>
|
||
<div class="skill-level">
|
||
<div class="skill-bar" style="width: 85%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">Video Editing</span>
|
||
<div class="skill-level">
|
||
<div class="skill-bar" style="width: 80%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">3D Animation</span>
|
||
<div class="skill-level">
|
||
<div class="skill-bar" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials Section -->
|
||
<section class="testimonials-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">TESTIMONIALS</span>
|
||
<h2 class="section-title">클라이언트 후기</h2>
|
||
<p class="section-subtitle">함께 작업한 클라이언트들의 생생한 후기를 들어보세요</p>
|
||
</div>
|
||
<div class="testimonials-slider">
|
||
<div class="testimonial-slide active">
|
||
<div class="testimonial-content">
|
||
<div class="testimonial-text">
|
||
<p>"창의적이고 전문적인 접근으로 우리 브랜드의 가치를 완전히 새롭게 정의해주었습니다. 결과에 정말 만족합니다."</p>
|
||
</div>
|
||
<div class="testimonial-author">
|
||
<div class="author-photo">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="김대표">
|
||
</div>
|
||
<div class="author-info">
|
||
<h4>김대표</h4>
|
||
<p>스타트업 CEO</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-slide">
|
||
<div class="testimonial-content">
|
||
<div class="testimonial-text">
|
||
<p>"사용자 경험을 중시한 디자인으로 우리 서비스의 사용성이 크게 향상되었습니다. 정말 감사합니다."</p>
|
||
</div>
|
||
<div class="testimonial-author">
|
||
<div class="author-photo">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="이이사">
|
||
</div>
|
||
<div class="author-info">
|
||
<h4>이이사</h4>
|
||
<p>IT 기업 이사</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-slide">
|
||
<div class="testimonial-content">
|
||
<div class="testimonial-text">
|
||
<p>"혁신적인 아이디어와 완벽한 실행력으로 프로젝트를 성공적으로 마무리해주었습니다. 다음에도 함께 작업하고 싶습니다."</p>
|
||
</div>
|
||
<div class="testimonial-author">
|
||
<div class="author-photo">
|
||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||
<img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="박부장">
|
||
</div>
|
||
<div class="author-info">
|
||
<h4>박부장</h4>
|
||
<p>마케팅 부장</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-controls">
|
||
<button class="testimonial-prev">‹</button>
|
||
<button class="testimonial-next">›</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="cta-section">
|
||
<div class="container">
|
||
<div class="cta-content">
|
||
<div class="cta-text">
|
||
<h2>프로젝트를 시작할 준비가 되셨나요?</h2>
|
||
<p>창의적인 아이디어를 현실로 만들어드립니다. 지금 바로 연락해주세요.</p>
|
||
</div>
|
||
<div class="cta-buttons">
|
||
<a href="#contact" class="btn-primary-large">프로젝트 시작하기</a>
|
||
<a href="#portfolio" class="btn-secondary-large">포트폴리오 보기</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Creative Portfolio JavaScript -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Portfolio filtering
|
||
initPortfolioFilter();
|
||
|
||
// Testimonials slider
|
||
initTestimonialsSlider();
|
||
|
||
// Animated shapes
|
||
initAnimatedShapes();
|
||
|
||
// Smooth scrolling
|
||
initSmoothScrolling();
|
||
|
||
// Scroll animations
|
||
initScrollAnimations();
|
||
});
|
||
|
||
function initPortfolioFilter() {
|
||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||
const portfolioItems = document.querySelectorAll('.portfolio-item');
|
||
|
||
filterBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
// Remove active class from all buttons
|
||
filterBtns.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
const filter = btn.dataset.filter;
|
||
|
||
portfolioItems.forEach(item => {
|
||
if (filter === 'all' || item.dataset.category === filter) {
|
||
item.style.display = 'block';
|
||
setTimeout(() => {
|
||
item.style.opacity = '1';
|
||
item.style.transform = 'scale(1)';
|
||
}, 100);
|
||
} else {
|
||
item.style.opacity = '0';
|
||
item.style.transform = 'scale(0.8)';
|
||
setTimeout(() => {
|
||
item.style.display = 'none';
|
||
}, 300);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
function initTestimonialsSlider() {
|
||
const slides = document.querySelectorAll('.testimonial-slide');
|
||
const prevBtn = document.querySelector('.testimonial-prev');
|
||
const nextBtn = document.querySelector('.testimonial-next');
|
||
let currentSlide = 0;
|
||
|
||
function showSlide(index) {
|
||
slides.forEach(slide => slide.classList.remove('active'));
|
||
slides[index].classList.add('active');
|
||
}
|
||
|
||
function nextSlide() {
|
||
currentSlide = (currentSlide + 1) % slides.length;
|
||
showSlide(currentSlide);
|
||
}
|
||
|
||
function prevSlide() {
|
||
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
|
||
showSlide(currentSlide);
|
||
}
|
||
|
||
nextBtn.addEventListener('click', nextSlide);
|
||
prevBtn.addEventListener('click', prevSlide);
|
||
|
||
// Auto-slide
|
||
setInterval(nextSlide, 5000);
|
||
}
|
||
|
||
function initAnimatedShapes() {
|
||
const shapes = document.querySelectorAll('.shape');
|
||
|
||
shapes.forEach((shape, index) => {
|
||
shape.style.animationDelay = (index * 0.5) + 's';
|
||
});
|
||
}
|
||
|
||
function initSmoothScrolling() {
|
||
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'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
function initScrollAnimations() {
|
||
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);
|
||
|
||
// Observe elements for animation
|
||
document.querySelectorAll('.process-step, .skill-category, .portfolio-item').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
}
|
||
</script>
|