Mina Choi
af391b4c56
`/` 가 곧장 위저드로 튀어서 이 제품이 무엇을 파는 물건인지 말할 자리가 없었다. 처음 온 사람이 업종 선택 화면부터 만난다. - router: `/` 는 비로그인 랜딩 · 로그인 /sites. /pricing · /showcase 추가 - MarketingShell: 사이드바 없는 문서형 껍데기. AppShell(작업 화면)과 나눴다 - 랜딩 상단은 상호명 한 칸. 문구는 SEO·AEO 축으로만 쓴다 — '쉽게·빠르게'로 말하면 홈페이지 빌더와 같은 자리에서 비교당한다(PRODUCT 1절) - ShowcaseGrid: 발행 썸네일을 그대로 건다. 예시 데이터로 채우지 않고, 없으면 섹션을 감춘다. ★ 생성 클라이언트를 안 쓴다 — 토큰 길목을 지나면 비로그인에서 못 부른다 - 요금은 플랜 하나(70만원/월) + 월 산출물. 비교표를 만들지 않는다 tsc·eslint·vite build 통과
38 lines
1.6 KiB
TypeScript
38 lines
1.6 KiB
TypeScript
import {Link} from 'react-router';
|
|
import {MarketingShell, Section} from '@/components/layout/MarketingShell';
|
|
import {ShowcaseGrid} from '@/features/marketing/ShowcaseGrid';
|
|
import {Button} from '@/components/ui/button';
|
|
|
|
/**
|
|
* 이렇게 나옵니다 — 실제로 발행된 홈페이지 목록.
|
|
*
|
|
* ★ 템플릿 갤러리가 아니다. 고르라고 보여주는 게 아니라 "진짜로 나갔다"는 증거를 거는 자리다.
|
|
* 그래서 예시 데이터로 채우지 않는다(ShowcaseGrid 주석) — 발행본이 없으면 빈 화면이 맞다.
|
|
*/
|
|
export function ShowcasePage() {
|
|
return (
|
|
<MarketingShell>
|
|
<Section>
|
|
<header className="mb-10 max-w-2xl">
|
|
<h1 className="text-3xl font-bold tracking-tight text-balance sm:text-4xl">이렇게 나옵니다</h1>
|
|
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
|
|
실제로 발행된 홈페이지입니다. 눌러서 그대로 열어 보세요 — 사장님 가게도 같은 방식으로 만들어집니다.
|
|
</p>
|
|
</header>
|
|
|
|
<ShowcaseGrid limit={24} />
|
|
</Section>
|
|
|
|
<Section muted className="text-center">
|
|
<h2 className="text-2xl font-bold tracking-tight text-balance">우리 가게도 만들어 볼까요?</h2>
|
|
<p className="mt-3 text-sm text-muted-foreground">가게 이름만 있으면 됩니다.</p>
|
|
<Link to="/builder?new=1" className="mt-7 inline-block">
|
|
<Button variant="primary" size="lg">
|
|
무료로 만들어 보기
|
|
</Button>
|
|
</Link>
|
|
</Section>
|
|
</MarketingShell>
|
|
);
|
|
}
|