# Landing Pages

> Marketing pages — heroes, pricing, testimonials, bento grids, social proof, CTAs, empty states, onboarding. Use when building a full marketing or product page and its sections — hero, features, pricing, testimonials, logo wall, comparison table, FAQ, CTA bar, footer — plus empty states and onboarding. Not for a single reusable component (react-components).

- **Type:** Skill
- **Install:** `agentstack add skill-krishna-modi12-frontend-design-pro-landing-pages`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Krishna-Modi12](https://agentstack.voostack.com/s/krishna-modi12)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Krishna-Modi12](https://github.com/Krishna-Modi12)
- **Source:** https://github.com/Krishna-Modi12/frontend-design-pro/tree/main/skills/landing-pages
- **Website:** https://krishna-modi12.github.io/frontend-design-pro/

## Install

```sh
agentstack add skill-krishna-modi12-frontend-design-pro-landing-pages
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Landing Pages

## When to Use
Full marketing or product pages and their sections: hero, features, pricing, testimonials, logo wall, comparison table, FAQ, CTA bar, footer. Also empty states and onboarding flows. For a single reusable component use `react-components`; for the form inside a page use `forms`.

## Stack
React 19 · TypeScript strict · Tailwind v4 · Next.js App Router (default)

## Core Rules
1. **One job per section.** Every section answers exactly one question. Hero: "what is this?" Pricing: "what do I pay?" A section answering two must be split.
2. **CTA gravity.** The primary CTA is the visually heaviest element above the fold. One primary CTA style per page. Pair it with a ghost secondary — never two solids.
3. **Never an equal-height card grid.** Use bento with spans, editorial asymmetry, or a data list. At least one element per major section breaks the column grid.
4. **Social proof proximity.** Trust signals sit within 40px of the CTA they support.
5. **Scannable rhythm.** Break the pattern every 3–4 sections: full-bleed dark → light card grid → feature spotlight → CTA bar.
6. **Hero type ≥48px desktop.** At least two type sizes with ≥3× difference per section. `text-wrap: balance` on headings.
7. **Organic content.** Real diverse names (Ana Ngugi, Kenji Tanaka), non-round figures (47.2%, $12,847). Never lorem ipsum, John Doe, or "Elevate/Seamless/Unleash".
8. **Mobile-first is content-first.** At 375px the headline, CTA and social proof survive; everything else earns its place.
9. **Empty states are designed.** Icon + headline + one sentence + action. Never a bare "No data".

## Patterns
- **HERO** = eyebrow + headline(≥48px) + subtext(≤2 lines) + CTA pair + proof bar + visual.
- **PRICING** = headline + monthly/annual toggle + exactly 3 tiers + trust note. Enterprise is "Custom", never a fake number.
- **BENTO** = one hero cell spanning 2×2, remainder 1×1, max 6 cells, aspect-anchored.
- **TESTIMONIAL** = pull-quote + avatar + name + company; masonry or peek-scroll, never uniform cards.
- **CTA-BAR** = short headline + 1–2 CTAs + risk-reversal microcopy.

## Examples
`examples/good-landing.tsx` · `examples/good-brand-linear.tsx` (Linear-style dark precision) · `examples/good-design-md-round-trip.tsx` (DESIGN.md token injection, pricing tiers).

## Reference Index
Load only for the specific task:

| Task | Load |
|---|---|
| Pattern anatomy P-01…P-08, anti-patterns, decision guides | `references/design-patterns.md` |
| 34 full landing specs with conversion copy | `references/landing-patterns.md` |
| Vertical-specific rules (fintech, health, SaaS…) | `references/industry-rules.md` |
| Auditing and upgrading an existing page | `references/redesign-framework.md` |
| Button labels, error copy, microcopy | `references/ux-writing.md` |
| Generating a DESIGN.md for Google Stitch | `references/stitch-design.md` |

## Constraints
No equal-card grids · no banned display fonts · no purple→pink→blue gradients · OKLCH tokens only · `min-h-[100dvh]` · organic data values · four states · WCAG 2.2 AA with one `` and no skipped heading levels · `prefers-reduced-motion`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Krishna-Modi12](https://github.com/Krishna-Modi12)
- **Source:** [Krishna-Modi12/frontend-design-pro](https://github.com/Krishna-Modi12/frontend-design-pro)
- **License:** MIT
- **Homepage:** https://krishna-modi12.github.io/frontend-design-pro/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-landing-pages
- Seller: https://agentstack.voostack.com/s/krishna-modi12
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.