---
name: presale-landing
description: Use when making or reworking a presale/product landing (Simbiot, coop products): structure, sections, honest product mockups, Stripe CTA. Ensures a selling page with a distinct non-AI-look and provable quality instead of a generic template.
metadata:
  origin: t-261002151630-84bd7f (Лэндос Simbiot), first skill born via meta-skill-factory
  scope: Simbiot presale/product pages; adapted per product
---

# Presale landing: from content to a selling page

## Trigger rule

- [ ] Task: make a landing / rework a presale / a v2 version of a page exists
- [ ] There is an offer (or it's given by the task setting)
- [ ] Payment provider link (Stripe or similar) is available, or it's known that
      a placeholder link is temporarily put with a P0 remark

## Steps

### 1. Sources

Gather before the layout: base page (`docs/simbiot_presale_landing.html`), the current
site (simbiot.cil.by), pricing directive (`docs/PRICE-DIRECTIVE-SIMBIOT.md`), the sales
plan (`docs/SALES-PLAN-PRESALE-PAGE.md`), packaging (`docs/PACKAGE-SIMBIOT-PRESALE.md`),
live Telegram threads (sales/presale) — don't rewrite the texts from scratch if
they already exist.

### 2. Locked structure

Mandatory sections in this order (each — a specific promise to the visitor):

1. **Hero** — one specific offer (who it's for + result + form of delivery). H1 ≤ 10
   words, under it 1 sentence + CTA button.
2. **«Что это»** — 2–3 blocks «problem → mechanism → outcome».
3. **«Что включено»** — a specific list (Stripe-equipping, AI inference, agents in
   the product, hosting, etc. — taken from «Что включено», not «a suite of possibilities»).
4. **«Как это работает»** — 3 steps from the visitor's side.
5. **Visuals of the product** — honest mockups: real UI, real TG-dialog. No
   «sleek abstract renders» — each mockup is labeled and recognizable.
6. **Social proof** — who did it, statuses, numbers (only confirmed items; nothing invented).
7. **Tariff plans** — 2–3 plans, the price and limits from the pricing directive,
   a CTA per plan.
8. **Final CTA** — the same Stripe-link.
9. Footer: who makes it, contacts, legal minimum.

### 3. Visual language (per ui-skills frontend-design)

- One accent color per page, a calm scale of backgrounds, no «rainbow» gradients.
- Typography: a distinct heading font (not «default Inter in default weight»),
  font sizes: 1 H1 / page, h2 2× smaller, body 1×.
- Layout grids: max-width ~1100px, alternating bands (light / dark / light) give
  the page a rhythm; on mobile — a single column, no horizontal scroll.
- Motion: 1–2 animations with meaning (the appearance of blocks in the viewport,
  a smooth hover on CTA), no decorative bounces. `prefers-reduced-motion` — mandatory.
- Not-AI-look: don't use a standard set of icons, no «emoji-steps», real numbers
  instead of adjectives ("2494 у.е." not "недорогой").

### 4. Quality gates (mandatory checks before handing the result)

- [ ] CTA is clicked (the Stripe-link is alive — no 404; the opening checked).
- [ ] Places counter and other numbers are up-to-date (if a live billing — from
      the API/billing, not hardcoded).
- [ ] No «lorem ipsum» or unfinished blocks.
- [ ] Lighthouse (or equivalent): Performance ≥ 70 / Accessibility ≥ 90.
- [ ] The layout doesn't break on 375px width and 1440px (screenshot or resize).
- [ ] Each section answers: "What do I, the visitor, do with this?" — if there's no
      reply to a section, it gets removed or merged into another one.
- [ ] `prefers-reduced-motion` handled, animations not «forever».

## Common mistakes

- «Vague» hero (an offer without a number/verb) — the visitor leaves without scrolling.
- A fake count, hardcoded «10 мест» — kills trust (P1 t-...08ba09).
- AI-look: a standard set of icons, emoji-steps, gradients «to make it pretty».
- Sections without a promise («Our advantages» with 4 cards of platitudes) — merge or remove.
- Visuals «not from the product» — renders unrelated to the real UI.

## Done when

- [ ] Page lives on the URL/hosting (or in the repo under docs/site/).
- [ ] Quality gates are passed and recorded in the task report.
- [ ] The CTA leads to a living Stripe-link (or a P0-remark is left).
- [ ] A v2 version of the page is in the repo history (or the diff is in the commit).

## Related skills

- `meta-skill-factory` — how skills like this are born (don't produce single-use ones).
- `improve-ui` / `improve-animations` (ui-skills) — audits of the ready page.