SaaS 랜딩 페이지 스킬
현대적이고 전환율을 높이는 SaaS 랜딩 페이지를 생성합니다.
규칙
- 단일 페이지 레이아웃, 스티키 네비게이션 사용
- 그라데이션 배경이 있는 히어로 섹션 (보라색/시안 그라데이션 금지)
- 3~4개의 기능이 포함된 기능 그리드 (3열 동일 카드 금지)
- 실제 회사 로고 또는 플레이스홀더 블록이 포함된 사회적 증명 섹션
- 3단계 가격표
- 뉴스레터 가입 양식이 포함된 푸터
- 제공된 회사 이름과 태그라인 사용
- 주요 색상은 악센트로 사용 (화면당 최대 2회)
- Inter 폰트는 금지. Geist, Satoshi, Cabinet Grotesk 사용
구조
- 네비게이션 (스티키, 블러 백드롭)
- 히어로 (왼쪽 텍스트 + 오른쪽 시각적 요소/지표)
- 사회적 증명 (로고 바)
- 기능 (번갈아 나타나는 레이아웃)
- 추천사 (1개 하이라이트 + 그리드)
- 가격표 (3단계, 중간 단계 강조)
- CTA 배너
- 푸터
기술 사항
- 인라인 CSS가 포함된 단일 HTML 파일
- 반응형: 모바일 우선 브레이크포인트
- CSS 커스텀 속성을 통한 테마 설정
- 부드러운 스크롤 동작