dnssash/theme/rd.dnssash/rb.layout/modern_minimal/index.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);
?>

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