MatiSolina/gtm-skills

랜딩 페이지 GTM (Go-to-Market)

cer0.ai의 시각적 언어를 사용하여 프로덕션급 SaaS 랜딩 페이지를 구축하세요 — 다크 모드, 미니멀, 그라디언트 및 그레인 배경, Framer Motion 마이크로 상호작용, shadcn 기반 UI 프리미티브, 스페인어(리오 데 라 플라타 방언) 또는 영어로 된 전환 지향 카피.

이 스킬을 사용해야 하는 경우

• 사용자가 "armame una landing", "랜딩 페이지 만들어 줘", "마케팅 사이트", "SaaS 홈페이지", "página de producto"라고 요청할 때
• 사용자가 cer0.ai, Midday, Linear, Vercel을 디자인 영감으로 언급할 때
• 사용자가 B2B 또는 B2C SaaS 제품에 다크/미니멀 미학을 원할 때
• 사용자가 v0.dev를 사용 중이며 이 스타일에 맞는 프롬프트/컴포넌트를 원할 때

스택 (변경 불가 기본값)

• Next.js 15 App Router (기본적으로 서버 컴포넌트 사용)
• TypeScript (strict: true 설정)
• Tailwind CSS v4 (CSS 변수를 사용한 테마 설정: bg-background, text-foreground 등)
• shadcn/ui (프리미티브: 버튼, 카드, 아코디언, 다이얼로그)
• Framer Motion (framer-motion을 motion-provider에서 m으로 임포트하여 뷰 내 애니메이션에 사용)
• lucide-react (아이콘용, 제품 UI에서는 절대 이모지를 사용하지 않음)
• next/image (모든 이미지에 사용, 명시적인 width/height 지정)
• next/dynamic (폴드 아래 섹션에 사용, 지연 로딩)

필수 페이지 구조

모든 랜딩 페이지는 다음 섹션 순서를 따릅니다. 섹션을 건너뛰려면 명확한 근거가 필요합니다.

1. <Navbar /> — 고정, 투명 → 스크롤 시 블러 처리
2. <Hero /> — h1 + 부제목 + 2개의 CTA + 제품 목업 (오른쪽 열)
3. <LogoStrip /> — 고객/언론 로고, 단색 (filter: brightness(0) invert(1))
4. 제품 미리보기 — 프레임이 있는 큰 대시보드 스크린샷 카드, 하단에 페이드 아웃 그라디언트
5. 기능 섹션 (3-5개) — 왼쪽/오른쪽 번갈아 배치, 각각 = 헤드라인 + 문단 + 시각적 목업
6. <Benefits /> — 3열 그리드, 아이콘 + 헤드라인 + 1줄 설명
7. <Pricing /> — 3단계, 중간 단계에 "Más elegido" 배지 하이라이트
8. <Faq /> — 아코디언, 5-7개의 실제 반론, JSON-LD FAQPage 스키마
9. <Footer /> — 미니멀, 링크 + 소셜 + 법적 정보
10. JSON-LD 블록 — SoftwareApplication, Organization, FAQPage

시각적 시스템

전체 사양은 references/design-tokens.md를 참조하세요. 빠른 참조:

• 팔레트: --background: #000, --foreground: #fafafa, --muted-foreground: #a1a1aa, --border: rgba(250,250,250,0.08).
• 배경: 두 개의 radial-gradient 블러 (왼쪽 위 + 오른쪽 아래) 약 5% 불투명도, plus 노이즈 PNG 오버레이 0.03 불투명도에 mix-blend-overlay 적용.
• 타이포그래피: 헤드라인용 디스플레이 폰트 (Geist Sans 또는 로컬 --font-display). 본문은 Inter 사용. 헤드라인은 tracking-[-0.02em] 및 font-medium (이 미학에 font-bold는 너무 무거움).
• 헤드라인 크기: h1은 text-[clamp(2.5rem,5vw,4.5rem)], text-balance. 유동적 크기 조절을 위해 모든 곳에 클램프 사용.
• 테두리: 항상 border-border/50 (50% 불투명도). 단색 테두리는 절대 사용하지 않음 — 너무 강함.
• 표면: bg-secondary/20, bg-secondary/30, bg-secondary/50 — 항상 반투명하여 깊이감 제공.
• 버튼: 알약 모양 (rounded-full), h-12, px-8. 기본: bg-foreground text-background. 보조: border border-border/50 bg-secondary/30 backdrop-blur-sm.
• 카드: 외부 rounded-[24px], 내부 rounded-[20px] (러시안 인형). 1px 테두리. 미묘한 shadow-2xl shadow-black/20.
• 블러 효과: 배경 글로우는 blur-[100px] ~ blur-[120px] 사용. 목업의 장식용 내부 블러는 blur-2xl 사용.
• 모션: 페이드 + 10-40px 이동, duration: 0.6-1s, 0.1-0.15s 간격으로 스태거. 트리거에 useInView({ once: true, margin: "-100px" }) 사용.

카피 패턴

전체 가이드는 references/copy-patterns.md를 참조하세요. 빠른 규칙:

• Hero 헤드라인: 명령형 또는 선언형, 고통을 직접 언급 ("Dejá de aceptar cheques a ciegas."). 절대 "X에 오신 것을 환영합니다" 또는 "X는 ...를 위한 플랫폼입니다" 형태 사용 금지.
• Hero 부제목: 1-2문장. 무엇을 하는지 + 방법 + 중요한 이유.
• 기본 CTA: 동사 명령형. "Probar gratis", "Empezar", "Crear cuenta". 항상 행동 동사, 명사형 금지 ("Get started"는 되나 "Get started today!"는 금지).
• 보조 CTA: 진입 장벽이 낮은 옵션, 주로 정보 제공형. "Ver demo", "Cómo funciona".
• CTA 아래: 신뢰 문구. "+50.000 cheques analizados · Sin tarjeta de crédito". 가운데 점 · 사용.
• 섹션 헤드라인: 사실 진술형, 질문형 금지. "El análisis llega en 3 segundos." ("얼마나 빠른가요?" 형태 금지).
• 스페인어 톤: 대상 고객이 아르헨티나인 경우 Voseo 사용. 직설적, 회사원스러운 표현 금지. ("Sacale una foto", "Tome una fotografía" 금지).
• 사용 금지 단어: "Revolutionary", "cutting-edge", "synergy", "leverage", "world-class", "best-in-class".

빌드 순서

랜딩 페이지 생성 시:

1. 사용자에게 최대 3개의 질문 (컨텍스트상 명확하면 생략 가능):
   • 제품이 무엇을 하나요? (1문장)
   • 대상 고객은 누구인가요?
   • 주요 CTA 액션은 무엇인가요?
2. Hero를 먼저 생성하세요. 나머지를 만들기 전에 Hero 승인을 받으세요.
3. 섹션을 점진적으로 구축하세요 — 응답당 하나의 섹션, 사용자가 다음으로 넘어가기 전에 카피를 승인하도록 합니다.
4. 마지막에 JSON-LD를 추가하세요. 절대 건너뛰지 마세요 (SEO 중요).
5. 접근성 확인: 모든 이미지에 alt 속성, 모든 버튼은 실제 <button> 또는 <a>, 색상 대비가 WCAG AA를 통과하는지 확인.

안티패턴 (거절해야 할 것)

• "노트북 앞에서 웃는 다양한 팀" 스톡 사진이 있는 Hero.
• 제품 목업 없이 일반 그라디언트 Hero.
• 모든 단계에 "영업팀에 문의" 가격 책정 (초기 단계 SaaS에서).
• 가격을 완전히 숨기는 경우.
• 폴드 위에 3개 이상의 CTA (의사 결정 피로 유발).
• 평가를 위한 캐러셀 (낮은 참여도, LCP 저하).
• motion.div transition: { duration: 2 } 사용 — 너무 느림.
• 기본값이 라이트 모드인 경우 (이 스킬 = 다크 우선).

참고 자료

필요시 참조:

• references/sections.md — 각 섹션의 해부학 및 코드 패턴
• references/design-tokens.md — 전체 색상, 타이포그래피, 간격 토큰
• references/copy-patterns.md — 헤드라인 공식, CTA 라이브러리, FAQ 패턴
• references/seo-jsonld.md — SaaS 랜딩을 위한 schema.org 템플릿

템플릿

templates/ 디렉토리:

• page.tsx — 모든 섹션, 동적 임포트, JSON-LD를 포함한 루트 페이지
• hero.tsx — 오른쪽 열 목업 패턴이 있는 Hero 컴포넌트
• pricing.tsx — 중간 단계가 하이라이트된 3단계 가격 카드
• faq.tsx — JSON-LD가 포함된 아코디언 FAQ
• navbar.tsx — 스크롤 인식 내비게이션 바, 배경 블러 적용

템플릿을 복사하고 카피와 props를 조정하세요. 처음부터 다시 작성하지 마세요.

참조 코드베이스

실제 참조: /Users/mati/Clientes/rosental/radiant-compliance/apps/web/ (cer0.ai 소스). 의심스러울 때는 해당 코드베이스의 패턴을 정확히 미러링하세요. 프로덕션에서 검증된 코드입니다.