디지털 크리에이티브 그룹 (섹션 2)

1. 시각적 압도감과 브랜드 아이덴티티의 결합

이 섹션은 세련된 감각과 기술적 정체성을 동시에 드러내도록 설계되었습니다. 심해를 연상시키는 깊은 다크 네이비 톤의 배경은 안정감과 전문성을 전달하며, 그 위에서 빛나는 블루 그라데이션 포인트는 ‘Innovation(혁신)’이라는 핵심 가치를 시각적으로 강조합니다. “상상을 현실로 만드는”이라는 강력한 메시지를 중앙에 배치함으로써, 방문자가 페이지에 접속하자마자 브랜드의 존재 목적을 명확히 인지할 수 있도록 유도합니다.

2. 사용자 중심의 정보 구조화

디자인의 핵심은 단순한 아름다움을 넘어선 ‘전달력’에 있습니다. “우리는 코드로 세상을 연결하고 디자인으로 마음을 움직입니다”라는 슬로건은 브랜드의 기술력과 감성을 한 문장으로 정의합니다. 이는 도어오브웹이 단순한 개발사가 아닌, 사용자의 경험을 디자인하는 전략적 파트너임을 시사합니다. 본문 텍스트는 가독성이 높은 고딕 계열의 폰트를 사용하여 모바일과 데스크톱 환경 모두에서 명확한 정보 전달이 가능하도록 최적화되었습니다.

   <style>
        .intro-section-v2 {
            background-color: #0f172a;
            color: #fff;
            padding: 100px 20px;
            text-align: center;
        }

        .intro-v2-container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .badge {
            background: linear-gradient(90deg, #38bdf8, #818cf8);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
            display: inline-block;
            margin-bottom: 20px;
        }

        .intro-v2-container h2 {
            font-size: 48px;
            line-height: 1.2;
            margin-bottom: 30px;
            color: #fff;
            font-weight: 600;
        }

        .intro-v2-container h2 .highlight {
            color: #38bdf8;
        }

        .stats-container {
            display: flex;
            justify-content: space-around;
            margin-top: 60px;
            border-top: 1px solid #334155;
            padding-top: 40px;
        }

        .intro-v2 h4 {
            font-size: 36px;
            color: #fff;
            margin-bottom: 5px;
        }

        .intro-v2 p {
            color: #94a3b8;
            font-size: 16px;
        }

        @media (max-width: 768px) {
            .intro-v2-container h2 {
                font-size: 32px;
            }

            .stats-container {
                flex-direction: column;
                gap: 30px;
            }
        }
    </style>

    <section class="intro-section-v2">
        <div class="intro-v2-container">
            <span class="badge">Innovation</span>
            <h2>상상을 <span class="highlight">현실</span>로 만드는<br>디지털 크리에이티브 그룹</h2>
            <p style="color: #94a3b8; font-size: 18px;">우리는 코드로 세상을 연결하고 디자인으로 마음을 움직입니다.</p>

            <div class="stats-container">
                <div class="intro-v2">
                    <h4>500+</h4>
                    <p>Project Done</p>
                </div>
                <div class="intro-v2">
                    <h4>98%</h4>
                    <p>Satisfaction</p>
                </div>
                <div class="intro-v2">
                    <h4>12yr</h4>
                    <p>Experience</p>
                </div>
            </div>
        </div>
    </section>