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/components/ui/hero-section.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import { Button } from "./button";
+import { Card, CardContent } from "./card";
+import { cn } from "../../lib/utils";
+
+interface HeroSectionProps {
+  className?: string;
+  onGetStarted?: () => void;
+}
+
+const HeroSection = React.forwardRef<HTMLElement, HeroSectionProps>(
+  ({ className, onGetStarted, ...props }, ref) => {
+    return (
+      <section
+        ref={ref}
+        className={cn(
+          "relative overflow-hidden bg-gradient-to-br from-slate-50 to-blue-50 py-20 sm:py-32",
+          className,
+        )}
+        {...props}
+      >
+        {/* Background decoration */}
+        <div className="absolute inset-0 bg-grid-slate-100 [mask-image:linear-gradient(0deg,transparent,black)]" />
+
+        <div className="container relative">
+          <div className="mx-auto max-w-4xl text-center">
+            {/* Badge */}
+            <div className="mb-8 inline-flex items-center rounded-full bg-blue-50 px-6 py-2 text-sm font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
+              🎉 AI 기반 Excel 편집 도구 출시!
+            </div>
+
+            {/* Main heading */}
+            <h1 className="mb-6 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+              All in One{" "}
+              <span className="bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
+                Excel AI
+              </span>
+            </h1>
+
+            {/* Subtitle */}
+            <p className="mx-auto mb-10 max-w-2xl text-lg leading-8 text-gray-600">
+              자연어로 Excel을 편집하세요. AI가 수식, 차트, 분석을 자동으로
+              생성합니다.
+              <br />
+              <strong className="text-gray-900">
+                모든 처리는 브라우저에서 안전하게!
+              </strong>
+            </p>
+
+            {/* CTA buttons */}
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
+              <Button
+                size="lg"
+                onClick={onGetStarted}
+                className="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white px-8 py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
+                aria-label="sheetEasy AI 시작하기"
+              >
+                시작하기 →
+              </Button>
+
+              <Button
+                variant="outline"
+                size="lg"
+                className="px-8 py-3 text-lg font-semibold"
+                aria-label="기능 둘러보기"
+              >
+                기능 둘러보기
+              </Button>
+            </div>
+
+            {/* Features preview */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
+              <Card className="border-0 shadow-md bg-white/50 backdrop-blur-sm hover:shadow-lg transition-shadow duration-300">
+                <CardContent className="p-6 text-center">
+                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-green-100">
+                    <span className="text-2xl">🔒</span>
+                  </div>
+                  <h3 className="mb-2 text-lg font-semibold text-gray-900">
+                    완전한 프라이버시
+                  </h3>
+                  <p className="text-sm text-gray-600">
+                    파일이 서버로 전송되지 않습니다.
+                    <br />
+                    모든 처리는 브라우저에서 안전하게!
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card className="border-0 shadow-md bg-white/50 backdrop-blur-sm hover:shadow-lg transition-shadow duration-300">
+                <CardContent className="p-6 text-center">
+                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100">
+                    <span className="text-2xl">🤖</span>
+                  </div>
+                  <h3 className="mb-2 text-lg font-semibold text-gray-900">
+                    AI 자동 처리
+                  </h3>
+                  <p className="text-sm text-gray-600">
+                    자연어로 명령하면 AI가
+                    <br />
+                    수식과 차트를 자동 생성합니다.
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card className="border-0 shadow-md bg-white/50 backdrop-blur-sm hover:shadow-lg transition-shadow duration-300">
+                <CardContent className="p-6 text-center">
+                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100">
+                    <span className="text-2xl">⚡</span>
+                  </div>
+                  <h3 className="mb-2 text-lg font-semibold text-gray-900">
+                    3-스텝 간편함
+                  </h3>
+                  <p className="text-sm text-gray-600">
+                    업로드 → 프롬프트 → 다운로드
+                    <br />
+                    복잡한 설정 없이 바로 사용!
+                  </p>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  },
+);
+
+HeroSection.displayName = "HeroSection";
+
+export { HeroSection };