first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,139 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!-- Modern Minimal Layout -->
|
||||
<div class="modern-minimal-container">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Simple. Beautiful. Effective.</h1>
|
||||
<p class="hero-subtitle">최소한의 디자인으로 최대한의 임팩트를 전달합니다.</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#about" class="btn-primary">시작하기</a>
|
||||
<a href="#learn" class="btn-secondary">더 알아보기</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-image-placeholder">
|
||||
<div class="minimal-shape"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">핵심 기능</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>모듈화된 구조</h3>
|
||||
<p>재사용 가능한 컴포넌트로 효율적인 개발</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M9 9H15V15H9V9Z" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>반응형 디자인</h3>
|
||||
<p>모든 디바이스에서 완벽한 경험</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>성능 최적화</h3>
|
||||
<p>빠른 로딩과 부드러운 애니메이션</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-grid">
|
||||
<div class="content-text">
|
||||
<h2>미니멀리즘의 힘</h2>
|
||||
<p>불필요한 요소를 제거하고 핵심에 집중하는 디자인 철학을 통해 사용자에게 명확하고 직관적인 경험을 제공합니다.</p>
|
||||
<ul class="benefits-list">
|
||||
<li>빠른 로딩 속도</li>
|
||||
<li>직관적인 사용자 경험</li>
|
||||
<li>브랜드 메시지 강화</li>
|
||||
<li>유지보수 용이성</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-visual">
|
||||
<div class="visual-placeholder">
|
||||
<div class="minimal-geometry"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>지금 시작하세요</h2>
|
||||
<p>미니멀한 디자인으로 브랜드의 가치를 전달하세요</p>
|
||||
<a href="#contact" class="btn-primary-large">프로젝트 시작하기</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Modern Minimal JavaScript -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Smooth scrolling 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'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Intersection Observer for 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);
|
||||
|
||||
// Observe elements for animation
|
||||
document.querySelectorAll('.feature-card, .content-grid, .cta-content').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user