명령어 생성은 AI한테 부탁하기

cursor에서 홈페이지 만들건데 컨텍스트로 담을 내용 작성해줘

위 느낌의 명령과 블로그에 썼던 글을 함께 작성하니 이렇게 잘 만들어줌

더 많이 만들어줬는데 필요 없는 부분도 있어서 지우고 사용함

# Cursor Context (context.md)

## 프로젝트 개요
- 프로젝트 목표: **LikeGame.life** – 인생을 게임처럼 플레이할 수 있는 서비스를 위한 홈페이지 제작.
- 서비스 컨셉: 상태(스탯), 스킬(자격증), 업적(칭호/뱃지), 길드(퀘스트·파티), 상점(굿즈 구매)을 포함한 ‘현실 게임화 시스템’.
- 목적: 서비스 가치 소개, 유저 가입 유도, 커뮤니티 활성화.
- 타겟 사용자: 게임화된 자기계발, 퀘스트식 목표 달성을 즐기는 20~40대.

## 디자인 가이드
- 무드: 게임 UI와 현실적 느낌의 조화. 모던하고 직관적이며 몰입도 높은 디자인.
- 톤: 메타버스·RPG 스타일 감성 + 현대적 웹서비스 깔끔함.
- 메인 컬러: #111827(다크배경), #4ADE80(포인트), #F3F4F6(텍스트), #9333EA(서브 포인트).
- 폰트: Sans-serif (Pretendard, Inter), 굵은 헤더, 가독성 높은 본문.
- 비주얼 요소: RPG HUD, 스탯 게이지, 랭크 뱃지, 카드형 퀘스트 UI.
- 참고 사이트:
  - https://habitica.com (게임화 자기계발 서비스)
  - https://linear.app (모던한 SaaS 느낌)
  - https://raindrop.io (카드형 인터페이스 참고)

## 기능 요구사항
- 반응형 디자인 (모바일/데스크톱 대응)
- 스탯·랭크 UI를 직관적이고 게임답게 시각화
- 부드러운 스크롤 애니메이션, 카드 Hover 효과
- SEO 메타태그 및 OG 이미지 포함
- 가벼운 Lottie 애니메이션 적용 가능

## 개발 가이드
- Next.js 또는 React + TailwindCSS 기반
- Hero, Features(상태·스킬·업적·길드·상점), QuestDemo, Community, ShopPreview, CTA 섹션 컴포넌트화
- 성능 최적화 (Lazy-load, Lighthouse 80점 이상)
- 코드 주석으로 컴포넌트 구조 명확화

## 체크리스트
- [ ] 게임 감성 UI와 현대적 웹서비스 감각 조화 확인
- [ ] 모바일/데스크톱 UI 테스트 완료
- [ ] 스탯·랭크 시각화 정확성 확인
- [ ] CTA 정상 작동
- [ ] Lighthouse 80점 이상 확보
- [ ] SEO 메타태그, OG 이미지 적용 완료