88 lines
No EOL
4.5 KiB
Markdown
88 lines
No EOL
4.5 KiB
Markdown
---
|
||
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. |