b2b-landinglisted

# B2B SaaS Landing Page Builder 검증된 전환 최적화 구조 기반 B2B SaaS 랜딩 페이지 생성 스킬. ## Page Structure (10 Sections) ``` 1. Header — 로고 + Trust Badges (인증/수상 뱃지) 2. Hero — 대형 헤드라인 + 서브헤딩 + CTA 버튼 + 제품 이미지 3. Problem — Pain Point 3개 4. Solution — Feature & Benefit 3개 5. Social Proof — Trusted By 기업 로고 5개+ 6. How It Works — 3단계 프로세스 플로우 7. Product Detail — 제품 이미지 + 핵심 혜택 체크리스트 8. FAQ — 아코디언 Q&A 3~5개 9. Final CTA — 마무리 CTA + 안심 문구 10. Footer — 로고 + 법적 링크 ``` ## Workflow ### Phase 1: 요구사항 확인 사용자에게 다음 정보를 확인한다 (제공되지 않은 항목만 질문): | 항목 | 필수 | 예시 | |------|:----:|------| | 서비스명 | O | "TeamFlow" | | 한 줄 설명 | O | "팀 협업 자동화 플랫폼" | | 타겟 고객 | O | "50인 이상 IT 기업" | | 핵심 Pain Point 3개 | O | "수동 보고, 정보 분산, 느린 의사결정" | | 핵심 기능/혜택 3개 | O | "자동 리포트, 통합 대시보드, 실시간 알림" | | CTA 목표 | O | "무료 체험 시작" / "데모 신청" | | 브랜드 색상 | - | "#2563EB" | | 기존 고객/로고 | - | "삼성, LG, 카카오" | ### Phase 2: 페이지 생성 `references/section-guide.md`를 참조하여 각 섹션을 순서대로 구현한다. **필수 준수 규칙:** - 시맨틱 HTML (`<header>`, `<main>`, `<section>`, `<footer>`) - 모바일 퍼스트 반응형 - 라이트/다크 모드 지원 - Pretendard 폰트 - 화이트/블랙 제외 최대 3색 - CSS 변수로 테마 관리 - 모든 이미지에 `alt` 속성 - CTA 버튼 최소 44x44px 터치 타겟 - `prefers-reduced-motion` 존중 **섹션별 구현 순서:** 1. CSS 변수 및 기본 스타일 정의 2. Header → Hero → Problem → Solution 순서 3. Social Proof → How It Works → Product Detail 4. FAQ → Final CTA → Footer 5. 반응형 미디어 쿼리 적용 6. 다크 모드 스타일 적용 ### Phase 3: 카피 작성 `references/copy-patterns.md`를 참조하여 한국어 카피를 작성한다. **카피 규칙:** - 헤드라인/CTA: 비격식체 (해