# Feature-Rich Showcase

> A long, organised product tour: a feature index, an overview grid, alternating deep-dive rows, tabbed screenshots and a plan comparison table.

- Nickname: Feature tour
- Also called: Product tour page, Feature-heavy landing, SaaS feature page
- Category: Landing Page Patterns
- Moods: Trustworthy, Techy, Friendly
- Industries: SaaS, Startup & Tech, Corporate & B2B, AI Products, Education
- Style page: https://uilingo.dev/styles/feature-rich-showcase/

A landing pattern for products with a lot to explain. Instead of one big promise it walks the visitor through everything: a split hero with a product shot and a clickable feature index, a compact grid of all features, then alternating left/right rows that zoom into the top three (each with its own colour and a framed product window), a tabbed product tour, and a plan-by-plan comparison table with checkmarks. Density is higher than usual, but every block is boxed, labelled and colour-coded so the page stays scannable.

## Best for
- B2B SaaS and productivity tools
- Platforms with many modules or integrations
- Product pages that must compare plans
- Developer and data products

## Avoid for
- Single-offer campaigns and paid-ads pages
- Brands that sell a feeling more than features
- Very early products with two features

## Do
- Give every feature a numbered label (01, 02…) and its own tint from the chart palette, with a darker text shade for small labels (amber → #B45309, pink → #BE185D, teal → #0B7F75, blue → #2563EB) so numbers and links stay ≥ 4.5:1
- Frame screenshots in a window with a 36px title bar and three dots
- Alternate image/text sides every row, with a 96px vertical gap between deep-dive rows (56px below 960px)
- End with a comparison table: plans as columns, features as rows, check or dash in every cell
- Six features cycle back to the first colour; never add a 6th hue

## Don't
- Don’t make every section the same 3-card grid — vary grid, rows, tabs and table
- Don’t use full-bleed photography; the product UI is the imagery
- Don’t hide the plan differences in prose

## Audit
Passed after 3 rounds · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Feature-Rich Showcase" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light

## The style in one line
A long, organised product tour: a feature index, an overview grid, alternating deep-dive rows, tabbed screenshots and a plan comparison table.
Design keywords: alternating feature rows, feature index chips, overview feature grid, tabbed product tour, comparison table with checkmarks, framed product screenshots, colour-coded features, numbered mono feature labels (01, 02…).

## Visual language
A bright, well-organised SaaS product tour on white and very pale grey-lavender. The page is long and dense but never messy: every block is a clean bordered box with soft layered shadows, every feature has its own number (01, 02…) and its own colour from a five-colour palette (indigo, teal, amber, pink, blue), and the product itself is the only imagery — shown in framed app windows with a 36px title bar and three traffic-light dots. Sections deliberately change shape as you scroll: a chip index, a 3×2 grid, alternating left/right deep dives, a segmented tab tour and a checkmark comparison table.

## Signature details (must be visible)
- Feature index under the hero: a white rounded bar (radius 16px, shadow-md) with '6 features' / '6 ฟีเจอร์' and one chip per feature; each chip is an anchor link to its overview card (#feature-01…#feature-06) with its icon in that feature's --fc colour; the first chip is active (filled #5B4CF0, white icon)
- Framed product windows: 1px #E3E6EF border, radius 16px, shadow 0 24px 64px rgba(15,23,42,.14), a 36px #F5F6FA title bar with traffic dots #F87171, #FBBF24, #34D399 (10px, 6px apart) and a label in JetBrains Mono 0.72rem #536075. Inner pages carry it too: the form's aside card and article figures get the same 36px dot bar
- Overview grid = 6 features in 3×2. Feature colours cycle chart-1…chart-5, so feature 06 reuses indigo. Each card, deep-dive row and table row sets two variables. --fc (fills, borders, icon tiles, dots, bars): #5B4CF0, #0D9488, #F59E0B, #EC4899, #3B82F6. --fc-ink (small text: mono number, row label, 'Learn more →' link, flow-node kind label): #5B4CF0, #0B7F75, #B45309, #BE185D, #2563EB — each ≥ 4.5:1 on white and on #F5F6FA. Never set small text in raw --fc (amber is 2.2:1). Card = 3px --fc top border, icon tile color-mix(in srgb, var(--fc) 13%, #FFFFFF) with the glyph in --fc
- Monospace numbering (JetBrains Mono 500, 0.75rem) on every feature: 01, 02, 03…
- JetBrains Mono has no Thai glyphs. Use mono only for numbers and Latin window labels (01, app.flowboard.co); set Thai labels in the body font
- Alternating deep-dive rows on the #F5F6FA band with a 96px vertical gap between rows (56px below 960px). Each row's window gets a 3px --fc top border, its title-bar label stays muted #536075 (never --fc), and it shows a different mini-UI (kanban, automation flow, report); area fills use the row colour, e.g. #5B4CF0 at 25% → 0% vertical gradient
- Comparison table: plans as columns with price in the header, features as rows with --fc icons. Included = 26px circle in success #16A34A at 15% tint holding a 15px #16A34A check; not included = muted #536075 em dash. The featured plan column is tinted 6% primary with a 3px #5B4CF0 top rule and has the table's only filled indigo button; the other columns get secondary buttons (white, 1px #E3E6EF border, shadow-sm)
- Hero headline: linear-gradient(100deg, #0F172A 40%, #5B4CF0) clipped to text, applied to the last line. In Thai, use solid #0F172A and put the last phrase in #5B4CF0 on its own line (display:block or <br>) — no clipped gradient. Hero product window tilt: transform: perspective(1600px) rotateY(-6deg); remove it below 960px
- Labels: uppercase tracked eyebrows (0.75rem, 700, 0.1em, #5B4CF0) are Latin only; Thai eyebrows are 0.85rem weight 600 in #5B4CF0 with no tracking or uppercase. The nav 'NEW' pill stays Latin; the Thai hero pill reads 'ใหม่ · …'

## Design tokens — use these exact values
Colours (light mode):
  - background #FFFFFF
  - surface #FFFFFF
  - surface-2 #F5F6FA
  - text #0F172A
  - text-muted #536075
  - primary #5B4CF0 (text on it #FFFFFF)
  - secondary #0F172A (text on it #FFFFFF)
  - accent #0D9488
  - border #E3E6EF
  - success #16A34A · warning #B45309 · danger #DC2626
  - chart series #5B4CF0, #0D9488, #F59E0B, #EC4899, #3B82F6
Radius: sm 6px, md 10px, lg 16px, xl 24px, pill 999px
Border width: 1px
Shadows: sm `0 1px 2px rgba(15,23,42,0.06)`, md `0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.08)`, lg `0 2px 4px rgba(15,23,42,0.04), 0 24px 64px rgba(15,23,42,0.14)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 0.9 density
Motion: 220ms cubic-bezier(.2,.8,.2,1)

## Typography (Latin + Thai)
- Headings: Plus Jakarta Sans 600/700/800 with Thai fallback Prompt 600/700/800
- Body: Plus Jakarta Sans 400/500/600/700 with Thai fallback Anuphan 400/500/600/700
- Mono: JetBrains Mono
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&family=Prompt:wght@600;700;800&family=Anuphan:wght@400;500;600;700&display=swap
- CSS stacks: heading `"Plus Jakarta Sans", "Prompt", system-ui, sans-serif`; body `"Plus Jakarta Sans", "Anuphan", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Anuphan — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(2.5rem, 5.2vw, 4.25rem), heading weight 800, heading tracking -0.03em (Latin only), uppercase small labels (Latin only).
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: Prompt’s clean geometric loopless forms match Plus Jakarta’s modern geometric headings; Anuphan keeps long Thai feature copy friendly and compact at body sizes.

## Components
- Buttons: radius 10px, weight 600; primary indigo with a faint inner top highlight (0 1px 0 rgba(255,255,255,.25) inset) and a 0 6px 16px glow at 30% indigo; secondary white with 1px border and shadow-sm; a 'play' icon on demo buttons
- Feature cards (overview grid): icon tile left (color-mix(in srgb, var(--fc) 13%, #FFFFFF)), mono --fc-ink number + title + one line right, 3px --fc top border; hover = shadow-md and border color-mix(in srgb, var(--fc) 40%, var(--c-border))
- Tabs + tab tour: segmented track on #F5F6FA with 4px padding; selected tab is a white pill with shadow-sm and indigo text. The tour has 3–4 tabs (e.g. Board / Timeline / Reports) and each tab shows a different mini-UI in the one big window (never a copy of the hero mock), with its own mono label such as app.flowboard.co/timeline. Use radio inputs + CSS or about 10 lines of vanilla JS; no frameworks
- Inputs: radius 10px, shadow-sm; focus = indigo border + 4px indigo halo at 16%
- Nav: frosted white bar (bg at 88%) with 4–5 links and a small 'NEW' pill next to one link
- Badges: soft tinted pills; solid badge = indigo
- Charts: multi-colour bars (each bar a different chart colour, Thai bar labels on one line), indigo line with a #5B4CF0 25% → 0% area, heatmap in indigo tints; dashboard cards get rotating 3px coloured top borders (chart-1, 2, 3)
- FAQ: two columns — heading and one testimonial at left, hairline-separated accordion at right
- CTA band: radial-gradient(60% 120% at 100% 0%, rgba(59,130,246,.55), transparent) over linear-gradient(135deg, #5B4CF0, #3B2BC4), radius 24px, white text, white button with #0F172A text

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → features → logos → showcase → pricing → faq → cta. Feature section as alternating.
Landing order (authoritative): bar nav → split hero (copy left, tilted framed product window right) → feature index chip bar → logo strip → overview grid of all 6 features (3×2) → three alternating deep-dive rows on a pale band → centred tabbed product tour in one big window → comparison table on a pale band → two-column FAQ → indigo gradient CTA → footer. There is no steps section. Expect 1.5–2× the length of a typical landing page; vary the shape of each section so it stays scannable. Dashboards are equally rich: sidebar shell, KPI row, line + bars, heatmap + donut, table + activity. Form and article pages keep the framed-window idea: the form aside and article figures sit in a window with the 36px dot bar and a mono Latin label.

## Content
Use realistic product copy (fictional brand) suited to: B2B SaaS and productivity tools. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## Do
- Give every feature a numbered label (01, 02…) and its own tint from the chart palette, with a darker text shade for small labels (amber → #B45309, pink → #BE185D, teal → #0B7F75, blue → #2563EB) so numbers and links stay ≥ 4.5:1
- Frame screenshots in a window with a 36px title bar and three dots
- Alternate image/text sides every row, with a 96px vertical gap between deep-dive rows (56px below 960px)
- End with a comparison table: plans as columns, features as rows, check or dash in every cell
- Six features cycle back to the first colour; never add a 6th hue

## Don't
- Don’t make every section the same 3-card grid — vary grid, rows, tabs and table
- Don’t use full-bleed photography; the product UI is the imagery
- Don’t hide the plan differences in prose
- Repeating the same 3-card grid for every section
- Full-bleed lifestyle photography or illustrations instead of product UI
- One giant hero with nothing below (that is hero-centric) or a single form-and-button page (conversion-optimized)
- A single bento mosaic holding all features (that is a bento grid)
- Plan differences written as prose instead of a table
- More than five distinct feature colours, or colouring body text
- Setting Thai text in JetBrains Mono (it has no Thai glyphs)
- Small text (numbers, labels, links) in the raw amber/pink/teal/blue chart colours — use the --fc-ink shades

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Feature-Rich Showcase" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```