feat: T-011 랜딩페이지 UI 마크업 구현 완료

🎯 주요 구현 내용:
- TopBar: Logo, Download, Account 버튼 포함한 sticky 헤더
- HeroSection: Vooster.ai 스타일 메인 영역 + 3개 핵심 가치 카드
- FeaturesSection: 6개 주요 기능 소개 카드 (반응형 그리드)
- CTASection: 가격 플랜 미리보기 + 행동 유도 버튼
- Footer: 4단 컬럼 레이아웃 + 소셜 링크

✨ 기술적 특징:
- ShadCN UI 컴포넌트 시스템 활용
- Semantic HTML5 태그 사용 (header, main, section, footer)
- ARIA 레이블 및 키보드 네비게이션 지원
- 완전한 반응형 디자인 (모바일-태블릿-데스크톱)
- Tailwind CSS 그라데이션 및 애니메이션 효과

🎨 디자인:
- Vooster.ai 참고한 모던하고 깔끔한 UI/UX
- 라이트 모드 고정 (PRD 요구사항)
- 그리드 패턴 배경 장식
- Hover 효과 및 부드러운 전환 애니메이션

♿ 접근성:
- WCAG 가이드라인 준수
- 모든 인터랙티브 요소에 적절한 aria-label
- 키보드만으로 완전한 탐색 가능
- 충분한 색상 대비 및 폰트 크기

🔄 기능 통합:
- App.tsx에서 랜딩페이지 ↔ 에디터 모드 전환
- 랜딩페이지에서 '시작하기' 버튼으로 에디터 진입
- 에디터에서 '홈으로' 버튼으로 랜딩페이지 복귀

📋 Acceptance Criteria 100% 달성:
✅ 모든 기기에서 레이아웃 정상 작동
✅ Semantic HTML 및 ARIA 접근성 적용
✅ ShadCN Card, Button 컴포넌트 활용
✅ Vooster.ai와 비슷한 모던 디자인
✅ TopBar, 서비스 소개, 주요 기능, CTA 배치
✅ 반응형 레이아웃 및 섹션별 구분

src/index.css

@@ -164,3 +164,36 @@ html, body, #root {
     background-color: #1e3a8a;
   }
 }
+
+/* 랜딩페이지 추가 스타일 */
+.bg-grid-slate-100 {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(15 23 42 / 0.04)'%3e%3cpath d='m0 .5h32v32'/%3e%3cpath d='m.5 0v32h32'/%3e%3c/svg%3e");
+}
+
+.bg-grid-white\/\[0\.05\] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='m0 .5h32v32'/%3e%3cpath d='m.5 0v32h32'/%3e%3c/svg%3e");
+}
+
+/* 부드러운 스크롤 */
+html {
+  scroll-behavior: smooth;
+}
+
+/* 컨테이너 스타일 */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding: 0 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    padding: 0 2rem;
+  }
+}