Which framework does this target?

The supplied source uses React/TypeScript and Next Image with utility styling. Other frameworks need a deliberate image/component port; a self-contained HTML version is an optional adaptation, not a bundled runtime.

Does it call any external service?

No explicit testimonial or content API is present. It references local image/mark paths that are absent from the archive. Supply local files and check requests in the completed host page.

Can I swap the imagery?

Yes, and the sample needs careful replacement: its avatar path does not establish the billed illustration or cited person. Use accurate local visual material, appropriate alternative text and deliberate light/dark variants.

Will testimonials rotate automatically?

No. This spread contains one static quotation and surrounding editorial content. Switching, pagination or motion would be additional implementation.

Does the performance claim come from a real test?

The component only contains demonstration text. Replace it with a sourced approved claim or remove it; no measurement or validation is performed by this Skill.

Editorial Testimonial Spread

Previews from the publisher

Pair one large visual with a short editorial explanation and a single attributed quote. The layout stacks on small screens and becomes two columns from the small breakpoint, with a restrained heading and a left-rule quotation. This is a static React/Next.js content spread to adapt with your own evidence and imagery, not an animated carousel or a collection of verified testimonials.

What you get

A ContentSection component and minimal usage example. The source gives you a heading, large visual area, two explanatory paragraphs, quote, citation and organization-mark slot. Copy and maintain it within your project rather than treating it as a versioned block package.
A centered container with stacked mobile content, two columns from the small breakpoint and wider spacing at medium/large widths. Separate light/dark Image elements use the same sample avatar path; no animation or testimonial-switching logic is implemented.
The written visual contract defines warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. It specifies restrained entrances and inline SVG icons with 1.5 px square-cap strokes; real vendor marks should be monochrome and visibly named. Reconcile the source’s fixed styles with those references rather than assuming every color or dimension already follows one token.
Imagery/icon guidance, third-party notes and a source checker. Local image/wordmark paths are referenced but the archive contains no actual media or WOFF2 fonts. React/Next Image and the host’s theme/utility styling remain integration requirements.

Before you choose

Give the quote enough context for readers to judge what changed and for whom. Choose an image that actually belongs to that story and keep attribution precise; the quiet layout works best when its evidence is equally clear.

Good fit

A service or product story that benefits from one substantial quote alongside supporting editorial context.
A page needing an existing image/text/attribution composition with a quieter reading rhythm than a carousel.
A team wanting editable source and prepared responsive structure while supplying accurate assets and content itself.

Not for

Review collection, rating aggregation, carousel controls or automatic verification of the quoted performance improvement.
A dependency-free/versioned block or a guaranteed visual match with an established design system.
A complete page with navigation, forms, authentication or checkout, or proof that the sample person, company and image belong together.

How to use

You say

/testimonial-editorial-spread Add the Editorial Testimonial Spread section to the landing page for [product name]. Use the quotes, names and portraits I provide; do not invent testimonials. Follow the existing page framework and styling.

Inspect the target repository and copy ContentSection/demo into its framework and styling conventions. Resolve Next Image or port it to the host’s image handling. A non-React implementation is adaptation work, while standalone HTML is suitable only for a requested standalone deliverable.
Rewrite the heading and two paragraphs around your actual story, then insert one approved quote and its accurate citation. The sample ecosystem copy and nearly-half mobile performance claim are illustrative, not measured outcomes supplied by the component. Remove redundant explanatory text rather than presenting it as additional evidence.
Choose a meaningful visual for the story and supply local light/dark assets plus an authorized organization mark. The example labels an avatar path as a billing illustration and cites a different person, so do not inherit its image/name association. Use portraits for real people, appropriate photos/illustrations for scenes, and abstract plates only for special blend/invert/contain slots.
Keep attribution and any person/image pairing accurate. Supply local WebP/fonts at suitable display size and meaningful alternative text; check both light/dark branches even though the sample currently repeats one path. Apply the written tokens and icon/vendor-label rules to fixed styling and any logo treatment.
Run node scripts/check-blocks.mjs TARGET, build the host page and inspect mobile reading order, visual crop, quote length and both themes. The source checker does not confirm asset presence, truth of the quote, image identity, responsive quality or actual network behavior.

Requirements and costs

You bring: Not collected yet
Dependencies: Not collected yet
Outside costs: Not collected yet
Publisher testing: v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT