# LANDING-PAGE — the standard for public pages that sell

> Read this before building any page whose reader is a **stranger deciding whether to trust you**, rather than
> a colleague trying to finish a task. `DESIGN-SYSTEM.md` governs internal tools; this file governs public
> selling pages. Where the two conflict, this file wins **for public pages only** — and section 1 below lists
> every conflict explicitly, so nothing is left to judgement.

---

## 1. Which `DESIGN-SYSTEM.md` rules apply here, and which do not

A selling page is not a small app. Applying the app rules to it produces a page that looks like an internal
admin screen — which is the single most common way these pages fail.

### Still binding, without exception

| Section | Rule |
|---|---|
| 1b | **No emoji anywhere** — not as bullets, not as section markers, not in buttons |
| 1c | **Every anti-AI-slop rule** — this matters more here than anywhere else, see section 5 |
| 1d | Ask about brand once, with a default stated; never invent a brand silently |
| 2 | Color discipline — one accent, chosen neutrals, never a purple-to-blue gradient hero |
| 3 | Spacing scale |
| 4 | Typography scale and the standard font stack |
| 5 | On-screen language — Thai, plain, short |
| 7 | Mobile first — **375px is the primary design target here, not a check at the end** |
| 10 | Accessibility minimum — contrast, focus states, real alt text |
| 11 | Motion restraint |
| 11c | `data-testid` on everything clickable |

### Deliberately does NOT apply

| Section | App rule | Why a selling page is the opposite |
|---|---|---|
| 6 | All 5 states must exist | There is no data to load. There is no empty state, no error state, no search |
| 9 | The four-band table screen | A selling page has no table. A spec comparison is a short two-column list, not a data grid |
| 12 | The whole-app shell — navbar, menu, footer that persist | A selling page has a logo and one action. **Every extra menu item is an exit** |
| 12b | Only the content region scrolls, the frame stays put | **The whole page scrolls.** Scrolling is how the argument unfolds — freezing a frame around it breaks the reading |
| 12c | Fixed-size dialogs | A selling page opens no dialogs. If you reached for one, the flow is wrong |
| 12d | Type-to-confirm on destructive actions | Nothing here is destructive |
| 13 | Skeletons | Nothing loads asynchronously. A skeleton on a static page is theatre |

**One exception on the sticky frame:** a slim bar carrying only the primary action may stick to the bottom on
mobile once the reader has scrolled past the first screen. That is a conversion device, not an app shell —
it holds the action and nothing else, never navigation.

---

## 2. What the page must do, in order

The reader arrives cold, gives you a few seconds, and is looking for a reason to leave. The page's job is to
answer four questions before they do, **in this order**:

1. **นี่คืออะไร** — what is this, said in one line, in the reader's own words
2. **มันแก้อะไรให้ฉัน** — what changes for me, stated as an outcome, not a feature
3. **ทำไมถึงเชื่อ** — why believe it: photos, numbers, real customers, guarantee
4. **ต้องทำยังไงต่อ** — exactly one next action, repeated where the reader is ready

Any section that does not serve one of these four is cut. "About us", "our vision", a founder's letter, and a
list of company values serve the seller, not the reader — leave them out unless the product is the person.

---

## 3. Section order that works

The order below is the default. Deviate only with a stated reason.

```
1  Hero            หัวข้อเดียว + ประโยคขยาย + รูปสินค้าจริง + ปุ่มเดียว
2  ปัญหา            สิ่งที่คนซื้อกำลังเจอ พูดด้วยคำของเขา ไม่ใช่คำของเรา
3  ทางออก           สินค้านี้เปลี่ยนอะไร — เป็นผลลัพธ์ ไม่ใช่รายการฟีเจอร์
4  หลักฐาน          รูปจริง ตัวเลขจริง รีวิวจริง ก่อน-หลัง
5  รายละเอียด       ขนาด วัสดุ สิ่งที่ได้ในกล่อง วิธีใช้ วิธีดูแล
6  ราคา             ชัด ไม่ซ่อน พร้อมค่าส่งและวิธีจ่าย
7  คำถามที่พบบ่อย    ตอบข้อกังวลที่ทำให้ไม่กล้าซื้อ โดยเฉพาะเรื่องคืน/เคลม
8  ปิดการขาย        ย้ำการกระทำเดียวอีกครั้ง + ช่องทางติดต่อ
```

**The primary action appears at least three times** — in the hero, in the middle after the proof, and at the
end. Same wording, same look, every time. A reader who is convinced at section 4 must not have to scroll
looking for the button.

**FAQ is not filler.** Every question in it must be one that actually stops someone from buying — shipping
time, returns, whether it fits, whether it is genuine, what happens if it breaks. Questions invented to fill
the section are worse than no section.

---

## 4. One action, and only one

The whole page points at a single next step. Naming it precisely is worth more than any design choice on the
page.

- **One primary action.** Not "buy or contact or follow or subscribe" — one.
- **A secondary action may exist only if it is genuinely lower commitment** (e.g. "ดูรูปเพิ่ม"), and it must
  look visibly quieter — never a second button of equal weight.
- **The button says what happens next**, in the reader's words: "ทักไลน์สอบถาม" beats "ติดต่อเรา", which beats
  "Contact". Never "เรียนรู้เพิ่มเติม" — nobody wants to learn more, they want to know if it fits.
- **Never put a menu in the header.** A logo, and at most the action. Every navigation link is a way out.
- **Never open with a popup**, an email capture over the content, or a countdown that resets on refresh.

### When the action is LINE

Most Thai small-business selling pages close in LINE, not in a cart. Treat the LINE link as the product of the
whole page:

- Use the owner's real link — `https://lin.ee/xxxxxxx` or `https://line.me/R/ti/p/@xxxxxxx`. **Ask for it;
  never invent one, never leave a placeholder in a page that is about to go live.**
- If the owner does not have it yet, put a clearly-marked placeholder AND say out loud that the page cannot be
  published until it is replaced. Do not bury this in a file.
- Open in a new tab (`target="_blank" rel="noopener"`).
- Put a short prefilled message where it helps the owner: a reader who taps and lands on an empty chat often
  says nothing. Pass `?text=` with something like "สนใจสินค้า {ชื่อสินค้า} ครับ/ค่ะ".
- Say what happens after they tap, right under the button — "ตอบกลับภายในเวลาทำการ" — so tapping feels safe.
- Show the LINE ID as text as well as a button. Some readers save it for later rather than tapping now.
- A QR code is for people reading on a **different** device than the one they will chat from. Include it near
  the closing section, never in the hero.

---

## 5. Anti-slop, applied to selling copy

`DESIGN-SYSTEM.md` section 1c covers visual slop. Selling pages fail on **words** far more often than layout.
Everything below is forbidden.

### Forbidden phrasing

- Empty superlatives: "ดีที่สุด", "อันดับ 1", "ปฏิวัติวงการ", "ล้ำสมัย", "โซลูชันครบวงจร"
- Hollow openers: "ในโลกที่เปลี่ยนแปลงอย่างรวดเร็ว", "คุณเคยรู้สึกไหมว่า", "ลองจินตนาการดูสิ"
- Rhetorical questions as headings — a heading should state, not ask
- Sentences that survive unchanged if you swap in a completely different product. If it fits any product, it
  sells none.
- Feature lists with no outcome attached: "วัสดุเกรดพรีเมียม" says nothing until it says what that means for
  the buyer

### Forbidden fabrication — this is the hard line

**Never invent any of these, for any reason, not even as a placeholder that "will be replaced later":**

- A customer review, a name, a photo of a person, a star rating, a review count
- A number of units sold, customers served, years in business, or awards
- A certification, standard, test result, or laboratory claim
- A before/after result
- A discount from an "original price" that was never charged

If the owner has none of these, the page is built without that section. Say so plainly and move on. A page
with three honest sentences outperforms one with a fabricated review, and a fabricated review is a claim the
owner is legally answerable for.

**Ask for real material once, with a stated fallback:** photos, real customer comments (a LINE screenshot is
fine), how many have sold, how long they have been selling. Take what is given; build without what is not.

### Product photography

- **Never generate a product image.** A physical product must be shown as it actually is. A generated picture
  of a product that does not look like that is misrepresentation, and buyers notice on arrival.
- If the owner has no photos yet: use a clearly-labelled grey placeholder box sized to the final image, state
  in the report that the page is not publishable until real photos replace them, and list exactly which shots
  are needed — the product alone on a plain background, the product in use, a scale reference, and the
  packaging.
- Real photos get real `alt` text describing the product, never "product image".

### Writing that works instead

- Lead with the outcome, then the reason: "ตากผ้าในห้องได้ ไม่ต้องรอแดด — พัดลมเป่าลมร้อนต่ำ ผ้าแห้งใน 2 ชั่วโมง"
- Use the buyer's vocabulary, taken from what the owner said their customers actually ask
- Specific beats large: "ซัก 30 นาที" beats "ประหยัดเวลา"
- Short sentences. One idea each. No paragraph over four lines on mobile.
- Say the price. A page that hides the price loses the readers who would have paid it.

---

## 6. Build rules

- **One self-contained HTML file** unless there is a reason not to. It is easier for the owner to move, host,
  and hand to anyone.
- Use the standard CDN block from `DESIGN-SYSTEM.md` section 1 — same Tailwind and icon setup as prototypes.
- **Images must not push the page around as they load.** Every `<img>` carries `width`/`height` (or an
  aspect-ratio box), `loading="lazy"` below the fold, and `decoding="async"`.
- **First screen must be readable before anything heavy arrives.** No full-screen video background, no
  animation gating the headline, no font that hides text while it loads.
- Set `<title>`, `<meta name="description">`, and Open Graph tags (`og:title`, `og:description`, `og:image`) —
  the OG image is what appears when the link is shared in LINE, which is exactly how this page will travel.
- Set `lang="th"`.
- Every section gets an `id` so a link can point at it.
- **No tracking scripts by default.** Add them only if the owner asks and provides their own ID.

---

## 7. Before calling it done

- [ ] Read at 375px first, then 1280px — not the other way round
- [ ] The single primary action appears at least three times, worded identically
- [ ] The header has no navigation menu
- [ ] Every claim on the page traces back to something the owner actually said or supplied
- [ ] No invented review, number, certificate, or generated product photo
- [ ] The LINE link is the owner's real link and opens correctly, or the page is explicitly marked not ready
- [ ] Price is visible without contacting anyone
- [ ] The page still makes its case with images blocked — meaning the words carry it
- [ ] No emoji, no rounded corners beyond the standard, standard font stack
- [ ] Nothing on the page would embarrass the owner if a customer quoted it back to them