# InsuRo intro 페이지 히어로 섹션 — 2컬럼 레이아웃 + 로고 배치

## 작업 레벨: Lv.1

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`

## 현재 상태
- `src/pages/Intro.tsx` 히어로 섹션 (86-119줄)
- 현재: 단일 컬럼, `text-center` 가운데 정렬
- 로고 이미지: `/public/insuro-logo-new.jpg` (IR 메탈릭 로고, 흰 배경 호환)

## 수정 사항

### 히어로 섹션을 2컬럼 레이아웃으로 변경

**왼쪽 컬럼 (텍스트):**
- "올인원 AI 플랫폼" 배지
- "인슈로(InsuRo)" 타이틀
- "당신은 고객만 만나세요." 서브카피
- "'1인 대형 법인'으로 스케일업" 설명
- 배지 태그들 (AI 자동 창작, 금소법 자동 준수 등)
- 텍스트 정렬: **왼쪽 정렬** (text-left)

**오른쪽 컬럼 (로고):**
- `insuro-logo-new.jpg` 이미지 표시
- 세로 가운데 정렬
- 적절한 크기 (너무 크지 않게, 200-280px 정도)
- 흰 배경 서비스와 통일성 유지 (별도 배경색 없이)

**반응형:**
- 데스크탑(md+): 좌우 2컬럼 (텍스트 60% / 로고 40% 비율)
- 모바일: 단일 컬럼 (텍스트 → 로고 순서, 로고는 가운데 정렬)

### 구현 가이드

기존 코드 (Intro.tsx 86줄):
```tsx
<Card className="p-8 md:p-12 text-center border-border/60 relative overflow-hidden">
  <div className="relative z-10">
    {/* 배지, 타이틀, 서브카피, 배지태그 */}
  </div>
</Card>
```

변경 후:
```tsx
<Card className="p-8 md:p-12 border-border/60 relative overflow-hidden">
  <div className="relative z-10 flex flex-col md:flex-row items-center gap-8">
    {/* 왼쪽: 텍스트 */}
    <div className="flex-1 text-center md:text-left">
      {/* 기존 배지, 타이틀, 서브카피, 배지태그 — text-center 클래스를 md:text-left로 */}
      {/* mx-auto → md:mx-0 (왼쪽 정렬) */}
    </div>
    {/* 오른쪽: 로고 */}
    <div className="shrink-0">
      <img 
        src="/insuro-logo-new.jpg" 
        alt="InsuRo 로고" 
        className="w-48 md:w-64 h-auto"
      />
    </div>
  </div>
</Card>
```

### 주의 사항
- Radial glow 배경 효과는 유지
- motion 애니메이션(framer-motion) 유지
- 배지 태그의 `justify-center` → `md:justify-start`로 변경
- 로고 이미지의 배경이 약간 회색이므로 `rounded-xl` 등으로 자연스럽게 처리

## affected_files
- `src/pages/Intro.tsx` (수정 — 히어로 섹션 레이아웃 변경)

## 검증 시나리오
1. /intro 페이지 접속 → 히어로 섹션이 2컬럼 (왼쪽 텍스트 + 오른쪽 로고)
2. 텍스트가 왼쪽 정렬로 표시됨
3. IR 로고가 오른쪽에 적절한 크기로 표시됨
4. 모바일에서 단일 컬럼으로 자연스럽게 전환
5. 기존 애니메이션/스타일 유지
6. npm run build 성공