Skip to main content
GitHub
2 min read

가이드

랜딩 페이지 (SaaS 스타일)

Barodoc에 내장된 컴포넌트와 풀폭 레이아웃으로 마케팅형 랜딩을 만듭니다

@barodoc/theme-docs랜딩용 블록이 포함되어 있어, 홈과 같은 SaaS 느낌의 히어로·기능 그리드·CTA·푸터를 재사용할 수 있습니다.

옵시디언 스타일 위키링크도 동작합니다. 예: 같은 가이드 폴더의 i18n 문서로 연결 (빌드·개발 서버 모두 동일 규칙).

풀폭 레이아웃

일반 standalone 페이지는 좁은 읽기 폭(~720px)을 씁니다. 마케팅 랜딩은 frontmatter에 **pageLayout: landing**을 넣어 풀폭 셸을 씁니다. Astro 5에서는 layout 키가 예약되어 있어 **pageLayout**을 씁니다.

YAML로 섹션만 채우려면 landingPage: 블록을 쓰세요. 렌더 순서는 히어로 → 로고 스트립 → 스탯 → 기능 → 후기 → 요금제 → FAQ → CTA → 푸터입니다. 실제 SaaS 수준 예시는 /yaml-landing-demo 와 영문 가이드를 보세요.

---
title: 요금제
description: 플랜 및 가격
pageLayout: landing
---

컴포넌트

import {
  LandingHero,
  LandingFeatures,
  LandingCta,
  LandingFooter,
} from "@barodoc/theme-docs";

LandingHero의 설치 명령 복사 버튼을 쓰려면 MDX에서 **client:load**를 붙이세요.

Info

영어 가이드에는 예시와 체크리스트가 더 자세히 있습니다: Landing pages (SaaS-style) (영문 페이지).