Social carousel sequence

Complete pattern #

'use client';

import { useId } from 'react';
import { SocialCarouselSlide } from '@coreux/ui';

const stats = [
  { value: '50', unit: 'h', label: 'January', caption: 'Weekly manual work.' },
  { value: '38', unit: 'h', label: 'April', caption: 'Weekly manual work.' },
  { value: '24', unit: '%', label: 'Reduction', caption: 'April versus January.' },
];
const steps = [
  { number: 1, label: 'Name the work', description: 'Choose one repeatable task.', color: '#0B1221' },
  { number: 2, label: 'Set a baseline', description: 'Record time before changing it.', color: '#0B1221' },
  { number: 3, label: 'Try one change', description: 'Keep the scope small.', color: '#0B1221' },
  { number: 4, label: 'Measure again', description: 'Compare the same weekly unit.', color: '#0B1221' },
];

export default function SocialCarouselSequence() {
  const sequenceId = useId();
  const evidenceId = `${sequenceId}-evidence`;
  const stepsId = `${sequenceId}-steps`;
  const linkStyle = { color: '#2457F5', textDecoration: 'underline', textUnderlineOffset: 4, fontSize: 14 };
  return (
    <div style={{ width: 480, background: '#F4F1E9', color: '#0B1221' }}>
      <p style={{ margin: '0 0 16px', fontSize: 14, lineHeight: 1.6, color: '#596579' }}>An illustrative three-slide story. All measures and the pilot are fictional.</p>
      <nav aria-label="Navigate this slide sequence" style={{ display: 'flex', gap: 24, marginBottom: 24 }}>
        <a href={`#${evidenceId}`} style={linkStyle}>Jump to the evidence</a>
        <a href={`#${stepsId}`} style={linkStyle}>Jump to the next steps</a>
      </nav>
      <div style={{ display: 'grid', gap: 24 }}>
        <section aria-label="Slide 1 of 3: hook">
          <SocialCarouselSlide variant="hook" index={1} total={3} eyebrow="Illustrative systems pilot" headline="Give good work more time." underline="more time." />
        </section>
        <section id={evidenceId} tabIndex={-1} aria-label="Slide 2 of 3: evidence" style={{ scrollMarginTop: 96 }}>
          <SocialCarouselSlide variant="stat-breakdown" index={2} total={3} headline="Fewer hours of manual work." stats={stats} />
        </section>
        <section id={stepsId} tabIndex={-1} aria-label="Slide 3 of 3: next steps" style={{ scrollMarginTop: 96 }}>
          <SocialCarouselSlide variant="process" index={3} total={3} headline="Start with one workflow." steps={steps} />
        </section>
      </div>
      <p style={{ margin: '24px 0 0', fontSize: 14, lineHeight: 1.6, color: '#596579' }}>January: 50 weekly hours. April: 38 weekly hours. The illustrative reduction is (50 − 38) ÷ 50 = 24%. This sequence is static; the links above navigate between slides.</p>
    </div>
  );
}

Component selection & hierarchy #

Three SocialCarouselSlide instances provide a complete story: hook, stat-breakdown, then process. The hook makes one promise; the second slide gives the baseline, endpoint, and calculated reduction; the last suggests four concrete steps. The slide component supplies the wordmark, progress numbering, crosshair, and variant layouts. StatBlock and ProcessSteps are used internally by its evidence and process variants.

This is an ordered, static sequence. Displaying all slides vertically preserves reading order and supports direct navigation without inventing a slider API. The two working jump links move to the evidence or next steps in the same file.

Content & color #

Use one short headline per slide. The stat-breakdown variant always uses three columns; its concise labels and captions need to fit that space. ProcessSteps always uses two columns. Four brief steps form a balanced two-by-two sequence without crowding the footer. These counts are composition choices; they do not imply undocumented runtime validation.

The complete stats and steps arrays are included in the source. All values describe the same fictional pilot: 50 weekly manual-work hours in January and 38 in April, a 24% reduction. The opening label and ending caption identify the data as illustrative even when the sequence is copied away from this reference.

Ink text on warm ivory keeps the series consistent. The hook uses the supported cobalt underline; navy process badges preserve readable ivory numbers. Avoid assigning categorical colors to sequential steps unless they explain a meaningful distinction. There are no photos, external media, or site-only assets.

Sizing & navigation #

Each slide is 480 × 640 px at the template’s 3:4 ratio. The sequence is 480 px wide, with 24 px between slides plus its opening navigation and closing data caption. The total height follows this content. Fit to canvas scales the sequence as one presentation; Actual size retains the slide width and scrolls inside the preview. Consumers need their own containment on a narrow screen.

The native links target focusable sections with IDs created by useId. They remain functional in a copied consumer without documentation routes or event handlers. Every slide has its correct one-based index and the same total of three. The footer’s coreux.com text is branding rendered by the library, not a clickable destination.

The process variant supplies the closing invitation without a button. SocialCarouselSlide’s CTA variant is presentation only and has no link or click-handler API; if a campaign needs an external action, add a real link with the intended destination beside it. This copied file deliberately includes only functional navigation and no inert CTA.

Constituent components #

• SocialCarouselSlide — Tell one story across a sequence of slides. Choose a hook, headline, set of metrics, process, or closing invitation.
• StatBlock — Give a meaningful number the context it deserves. Pair a value with a unit, label, and optional caption.
• ProcessSteps — Explain a short workflow with numbered steps in a fixed two-column layout.

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.