메인 화면 레이아웃 가이드

이 문서는 메인(홈) 페이지의 레이아웃을 구체적으로 설명하고, 원하는 구성을 쉽게 적어주실 수 있는 템플릿을 제공합니다. 아래 템플릿을 복사해서 채워 주세요.

---

Layout 구성요소 (예시 목록)

• Header (네비게이션, 로고, 토글)
• Hero (큰 배너: 제목, 서브타이틀, CTA 버튼)
• Feature / Highlights (카드형, 2~4개)
• Latest posts (블로그 목록, 카드 또는 리스트)
• Projects showcase (프로젝트 카드 슬라이더 또는 그리드)
• Newsletter / CTA (가입 폼)
• Footer (연락처, 소셜, 저작권)

템플릿 — 복사해서 채우세요

1. 헤더

• 로고 텍스트/이미지: (예: heo.best)
• 메뉴(상단 표시): (예: 홈, 블로그, 프로젝트, 문서)
• 모바일: 햄버거 메뉴 사용 여부 (예: 사용)

2. 히어로

• 제목(한 줄):
• 서브타이틀(한 줄 또는 두 줄):
• CTA 버튼(라벨 + 링크):
• 히어로 유형: centered(중앙), split(텍스트-이미지), fullwidth(전체 폭)

3. 주요 기능 카드 (Feature)

• 카드 수: (예: 3)
• 카드 내용 요약: (각 카드 제목 + 1줄 설명)

4. 블로그 목록

• 표시 방식: cards 또는 list
• 항목 수: (예: 5)
• 정렬: 최신순 / 인기순

5. 프로젝트 섹션

• 표시 방식: grid 또는 carousel
• 항목 수: (예: 3)

6. 색상/분위기

• 분위기: modern-dark / clean-light / 기타
• 주요 색상(HEX):
• 보조 색상(HEX):

7. 반응형/우선순위

• 모바일에서 히어로를 간단히(제목+CTA만)로 보여줄지 여부
• 데스크톱에서 사이드바(블로그 목록)을 표시할지 여부

8. 샘플 사이트(선택)

• 링크 1:
• 링크 2:

---

예시(작성 예):

1) 헤더
- 로고 텍스트: heo.best
- 메뉴: 홈, 블로그, 프로젝트, 문서, 소개
- 모바일: 햄버거 사용

2) 히어로
- 제목: "간결하고 빠른 개발 블로그"
- 서브타이틀: "실전 예제, 템플릿, 팁을 공유합니다"
- CTA: "시작하기" -> /docs
- 히어로 유형: centered

3) 주요 기능 카드
- 카드 수: 3
- 카드 1: "블로그" - 최신 기사
- 카드 2: "프로젝트" - 샘플 프로젝트
- 카드 3: "Docs" - 개발 문서

4) 블로그 목록
- 방식: cards
- 항목 수: 5
- 정렬: 최신순

5) 프로젝트 섹션
- 방식: grid
- 항목 수: 3

6) 분위기
- modern-dark
- 주요 색상: #0ea5a4
- 보조 색상: #111827

작성해주시면 제가 바로 pages/index.js(또는 레이아웃 컴포넌트)를 수정해 적용하겠습니다.

현재 상태: 기본 홈 레이아웃(히어로 + 3개 기능 카드 + 최근 글 리스트)을 적용했습니다. 확인 후 수정할 항목을 알려주세요.