Back to Explore
#React 18#TypeScript#Vite 5 Tailwind CSS v3#CSS 변수 (HSL)

GTM 포트폴리오 프로젝트 섹션

GTM 포트폴리오 프로젝트 영역입니다.

GTM 포트폴리오 프로젝트 섹션

강의 수강생 전용 프롬프트가 포함되어 있어요

일부 핵심 프롬프트는 관련 멤버십 강의를 통해 열람할 수 있습니다.

Project Prompts1

Membership Lock
프롬프트를 보려면 클릭하세요

Case Studies 섹션을 만들어줘. id="cases", py-24, max-w-6xl mx-auto. 섹션 라벨: "GTM Case Studies" 헤드라인: "실무에서 증명한" + "GTM 전략"(primary-light italic), mb-12 아코디언 카드 3개 (space-y-4, 첫 번째 기본 열림): 각 카드 외곽: rounded-2xl, border border-border, bg-card, overflow-hidden 클릭 헤더 (p-6 md:p-8, flex justify-between): 카테고리 뱃지: text-xs, font-medium, primary/70, bg-primary/10, px-2 py-1, rounded-full 회사명 + 제품 단계: text-xs, foreground/30, 점(·)으로 구분 타이틀: text-xl md:text-2xl, font-extrabold, foreground/90 타깃 세그먼트: text-xs, foreground/40, "타깃: ..." 형식 펼침/접힘 아이콘: ChevronDown/ChevronUp, w-5, foreground/30 확장 컨텐츠 (px-6 md:px-8, pb-8): 2열 그리드 (md:grid-cols-2, gap-8, mb-8): 좌측: Background / Diagnosis / Hypothesis 블록 라벨: text-xs, font-semibold, foreground/40, uppercase tracking-wider, mb-2 내용: text-sm, foreground/60, leading-relaxed 우측: Execution 리스트 + Learnings 블록 Execution 리스트: CircleDot 아이콘(w-3.5, text-primary), text-sm foreground/60 결과 지표 그리드 (grid-cols-2 md:grid-cols-4, gap-3): 각 지표: rounded-xl, bg-secondary/30, border border-border, p-4 지표명: text-xs, foreground/40, mb-1 Before→After: Before(text-sm, foreground/30, line-through) → 화살표(text-xs, foreground/30) → After(text-xl, font-extrabold, text-primary) 단일 값: text-xl, font-extrabold, text-primary 케이스 데이터: "AI 회의 요약 SaaS의 SMB 시장 재포지셔닝" / NoteFlow AI / Market Entry / Series A 결과: 데모 전환율 2.9%→4.7%, SQL 전환율 14.8%→23.6%, 분기 파이프라인 4.2억원, 세일즈 사이클 34→27일 "데이터 협업 툴의 업셀 트리거 기반 수명주기 캠페인" / DataGrid Cloud / Expansion / Growth 결과: 이메일 오픈율 28.4%→41.2%, 미팅 수락률 6.2%→10.1%, 업셀 MRR 38% 증가, 확장 파이프라인 3.1억원 "개발자 대상 API 제품의 콘텐츠 기반 수요 창출 엔진 구축" / DevPort API / Demand Gen / PLG to Sales-assisted 결과: 유기적 MQL 61% 증가, 콘텐츠 파이프라인 18%→31%, 활성화율 21.5%→28.3%, MQL당 비용 22% 절감