카드형 레이아웃형 (섹션 1)

이 섹션은 서비스의 핵심 가치와 강점을 한눈에 전달하기 위한 소개 영역입니다. 상단에는 섹션 제목과 슬로건을 배치해 브랜드의 방향성을 명확히 보여주고, 하단에는 카드형 레이아웃으로 주요 역량을 시각적으로 정리했습니다. 각 카드에는 아이콘, 키워드형 제목, 간결한 설명을 구성해 디자인·기술·성장 파트너십이라는 서비스 성격을 직관적으로 이해할 수 있도록 설계되었습니다. 포트폴리오, 서비스 소개, 메인 페이지에 활용하기 적합한 구조입니다.

   <style>
        .intro-section-v1 {
            max-width: 1200px;
            margin: 80px auto;
            padding: 0 20px;
        }

        .intro-v1-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .intro-v1-header h2 {
            font-size: 42px;
            color: #1d1d1f;
            margin-bottom: 20px;
        }

        .intro-v1-header p {
            color: #86868b;
            font-size: 18px;
            line-height: 1.6;
        }

        .intro-v1-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .intro-v1-card {
            padding: 40px;
            background: #f5f5f7;
            border-radius: 20px;
            transition: 0.3s;
        }

        .intro-v1-card:hover {
            transform: translateY(-10px);
            background: #fff;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .intro-v1-card .icon {
            font-size: 40px;
            margin-bottom: 20px;
        }

        .intro-v1-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: #111;
        }

        .intro-v1-card p {
            color: #666;
            font-size: 16px;
            line-height: 1.7;
        }

        @media (max-width: 768px) {
            .intro-v1-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <section class="intro-section-v1">
        <div class="intro-v1-header">
            <h2>We Create Digital Value</h2>
            <p>단순한 웹사이트를 넘어 고객의 비즈니스 가치를 디자인합니다.</p>
        </div>
        <div class="intro-v1-grid">
            <div class="intro-v1-card">
                <div class="icon">🎨</div>
                <h3>Creative Design</h3>
                <p>브랜드의 정체성을 담은 독창적이고 감각적인 UI/UX 디자인을 제공합니다.</p>
            </div>
            <div class="intro-v1-card">
                <div class="icon">💻</div>
                <h3>High-Tech Dev</h3>
                <p>최신 기술 스택을 활용하여 빠르고 안정적인 웹 서비스 환경을 구축합니다.</p>
            </div>
            <div class="intro-v1-card">
                <div class="icon">📈</div>
                <h3>Growth Partner</h3>
                <p>제작 이후의 운영과 마케팅까지 고려한 성공적인 비즈니스 파트너가 됩니다.</p>
            </div>
        </div>
    </section>