Complete pattern #

'use client';

import { useId } from 'react';
import { MarketingHero, StatBlock } from '@coreux/ui';

const proofPoints = [
  { value: '24', unit: '%', label: 'Less manual work', caption: 'Weekly hours fell from 50 to 38.' },
  { value: '20', unit: '%', label: 'Shorter delivery', caption: 'A typical task fell from 10 to 8 days.' },
  { value: '8', label: 'Pilot participants', caption: 'One team, observed over 90 days.' },
];

export default function MarketingProofPoints() {
  const proofId = useId();
  return (
    <div style={{ width: 800, background: '#F4F1E9', color: '#0B1221' }}>
      <MarketingHero
        eyebrow="An illustrative systems pilot"
        headline="Make room for better work."
        underline="better work."
        body="A focused workflow can give a team time back. Explore a fictional 90-day pilot and the measures behind its story."
      />
      <div style={{ padding: '0 48px 40px' }}>
        <a href={`#${proofId}`} style={{ display: 'inline-block', color: '#F4F1E9', background: '#2457F5', borderRadius: 16, padding: '12px 20px', fontSize: 16, fontWeight: 600, textDecoration: 'underline', textUnderlineOffset: 4 }}>
          Review the proof points
        </a>
      </div>
      <section id={proofId} tabIndex={-1} aria-label="Illustrative pilot proof points" style={{ margin: '0 48px', borderTop: '1px solid #C7CDD6', padding: '32px 0 40px', scrollMarginTop: 96 }}>
        <h2 style={{ margin: '0 0 24px', fontSize: 24, fontWeight: 600, lineHeight: 1.3 }}>One pilot. Three points of context.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 24 }}>
          {proofPoints.map((point) => <StatBlock key={point.label} {...point} size="sm" />)}
        </div>
        <p style={{ margin: '24px 0 0', fontSize: 14, lineHeight: 1.6, color: '#596579' }}>Illustrative data only. These invented measures describe one fictional team; they are not CoreUX case-study results or evidence of causation.</p>
      </section>
    </div>
  );
}

Component selection & hierarchy #

MarketingHero supplies the introduction, display headline, underline, and supporting copy. Three small StatBlocks follow as proof points. Keeping the numbers at the small size makes the campaign promise the first thing a reader sees; the captions supply the comparison and timeframe before anyone interprets a number.

The plain HTML link connects the promise to the evidence in this same composition. This arrangement is a documentation convention for a campaign section, not a new export or a universal marketing layout.

Content & color #

Use one short headline and an underline that exactly matches a phrase in it. The hero applies its underline to the first matching substring. Keep the supporting paragraph to one idea and the three metric labels concise enough for their 219 px columns. Longer content changes the composition’s height and needs a new visual review.

Warm ivory is the structural surface, ink navy carries the hierarchy, and slate provides supporting copy. Cobalt marks the real link and the emphasis inherited from MarketingHero. The stats stay neutral so they support the headline.

Every value here is invented. The 24% figure compares 50 with 38 weekly hours; 20% compares 10 with 8 days. The eight-person sample is context, not a success rate. For a real case study, replace all values and captions together with attributable measurements and disclose the observation window.

Sizing & navigation #

The copied composition is 800 px wide with content-driven height. MarketingHero supplies 48 px padding; the following link and proof points align to that inset. The stat row uses three equal columns with 24 px gaps. Fit to canvas scales the whole preview; it does not introduce responsive component props. Actual size keeps the original width in a scrollable frame. A consumer must provide overflow containment or design a narrower arrangement and review the fixed hero type size.

“Review the proof points” is a working anchor to a focusable section in the copied file. Its destination uses React’s useId so separate instances do not share an ID. MarketingHero’s ctaLabel is omitted: its built-in CTA is presentation only and exposes no href or click-handler prop. The adjacent native link handles the real action.

MarketingHero renders an h1. Use this composition as the lead section of a consumer page and review the surrounding heading hierarchy. The complete file needs the client directive because of the installed package’s public barrel; the documentation, source highlighting, and explanations remain server-rendered.

Constituent components #

• MarketingHero — Introduce a campaign with a clear headline, optional supporting copy, and a cobalt CTA label.
• StatBlock — Give a meaningful number the context it deserves. Pair a value with a unit, label, and optional caption.

These are documentation compositions of the installed library. They do not add new library APIs. Follow the one-time consumer setup, including the repository-access and font-use requirements, before copying a complete file into your app.