xertica-ui 2.7.0 → 2.9.6

package/components/assistant/xertica-assistant/xertica-assistant.tsx

@@ -441,7 +441,7 @@ export function XerticaAssistant({
       {/* Main Assistant Container */}
       <div
         className={cn(
-          `${containerHeight} flex flex-col bg-background relative`,
+          `${containerHeight} flex flex-col bg-card relative`,
           !isFullPage && 'border-l border-border shadow-sm',
           isMobile && isExpanded && 'fixed inset-0 z-[100] h-[100dvh] w-full border-l-0 shadow-2xl',
           className

package/components/blocks/auth/AuthPageShell.tsx

@@ -1,35 +1,80 @@
 import React from 'react';
 import { ImageWithFallback } from '../../figma/ImageWithFallback';
 import { LanguageSelector } from '../../brand/language-selector';
+import { IsotypeTwist } from '../../brand/isotype';
+import { cn } from '../../shared/utils';
 
-export interface AuthPageShellProps {
-  imageSrc: string;
-  imageAlt: string;
-  children: React.ReactNode;
-}
+export type AuthPageShellProps =
+  | {
+      /** Hero photo on the left (default). Requires `imageSrc`/`imageAlt`. */
+      leftPanel?: 'image';
+      imageSrc: string;
+      imageAlt: string;
+      /**
+       * Background classes for the hero image overlay gradient. Defaults to the
+       * shared `--gradient-diagonal` theme token; pass a Tailwind gradient to
+       * override it for a specific auth page without affecting the others.
+       */
+      gradientClassName?: string;
+      children: React.ReactNode;
+    }
+  | {
+      /**
+       * Brand isotype mark on a solid `bg-muted` panel — no photo, no
+       * gradient. Pairs with a lighter `bg-card` form panel on the right,
+       * the inverse of the `image` variant's `bg-muted` form panel.
+       */
+      leftPanel: 'isotype';
+      children: React.ReactNode;
+    };
 
 /**
  * Shared two-column shell used by every auth page (Login, ForgotPassword,
- * ResetPassword, VerifyEmail): hero image on the left, centered form panel
- * with a language selector on the right.
+ * ResetPassword, VerifyEmail): a left panel (hero image or brand isotype) and
+ * a centered form panel with a language selector on the right.
  */
-export function AuthPageShell({ imageSrc, imageAlt, children }: AuthPageShellProps) {
+export function AuthPageShell(props: AuthPageShellProps) {
+  const { children } = props;
+
   return (
     <div className="h-screen w-full flex overflow-y-auto">
-      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
-        <ImageWithFallback
-          src={imageSrc}
-          alt={imageAlt}
-          className="absolute inset-0 w-full h-full object-cover"
-        />
-        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
-      </div>
+      {props.leftPanel === 'isotype' ? (
+        <div className="hidden lg:flex lg:flex-1 items-center justify-center bg-muted">
+          <IsotypeTwist variant="magenta-blue" className="w-full max-w-sm" />
+        </div>
+      ) : (
+        <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
+          <ImageWithFallback
+            src={props.imageSrc}
+            alt={props.imageAlt}
+            className="absolute inset-0 w-full h-full object-cover"
+          />
+          <div
+            className={cn(
+              'absolute inset-0 opacity-80',
+              props.gradientClassName ?? 'bg-[image:var(--gradient-diagonal)]'
+            )}
+          />
+        </div>
+      )}
 
-      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted">
+      <div
+        className={cn(
+          'flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative',
+          props.leftPanel === 'isotype' ? 'bg-card' : 'bg-muted'
+        )}
+      >
         <div className="absolute top-4 right-4 z-20">
           <LanguageSelector variant="minimal" showIcon={false} />
         </div>
-        <div className="absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" />
+        {props.leftPanel !== 'isotype' && (
+          <div
+            className={cn(
+              'absolute inset-0 lg:hidden opacity-10 dark:opacity-5',
+              props.gradientClassName ?? 'bg-[image:var(--gradient-diagonal)]'
+            )}
+          />
+        )}
         <div className="w-full max-w-sm space-y-6 relative z-10">{children}</div>
       </div>
     </div>

package/components/blocks/auth/SocialLoginButtons.tsx

@@ -37,7 +37,7 @@ export function SocialLoginButtons({
           <Button
             type="button"
             variant="outline"
-            className="w-full justify-center"
+            className="w-full justify-center shadow-xs"
             onClick={() => onSocialLogin('Google')}
           >
             <svg className="w-5 h-5 mr-2" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
@@ -67,7 +67,7 @@ export function SocialLoginButtons({
           <Button
             type="button"
             variant="outline"
-            className="w-full justify-center"
+            className="w-full justify-center shadow-xs"
             onClick={() => onSocialLogin('MT Login')}
           >
             <Lock className="w-5 h-5 mr-2 text-[var(--chart-4)]" />
@@ -79,7 +79,7 @@ export function SocialLoginButtons({
           <Button
             type="button"
             variant="outline"
-            className="w-full justify-center font-normal"
+            className="w-full justify-center font-normal shadow-xs"
             onClick={() => onSocialLogin('gov.br')}
           >
             <span>

package/components/blocks/index.ts

@@ -1,2 +1,3 @@
 export * from './card-patterns';
 export * from './auth';
+export * from './marketing';

package/components/blocks/marketing/CTASection.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Button } from '../../ui/button';
+import { cn } from '../../shared/utils';
+
+export interface CTASectionAction {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface CTASectionProps extends React.HTMLAttributes<HTMLElement> {
+  title: string;
+  description?: string;
+  cta: CTASectionAction;
+  secondaryCta?: CTASectionAction;
+}
+
+/**
+ * Full-width dark band prompting a primary conversion action.
+ *
+ * @description
+ * A high-impact closing section for marketing pages: a bold left-aligned
+ * headline, optional supporting copy, and up to two CTA buttons on a flat
+ * `bg-sidebar` surface — the same token-driven dark surface used elsewhere
+ * on this page (e.g. the methodology section) — so it stays legible across
+ * all Xertica-ui themes without per-theme contrast tuning or a gradient.
+ *
+ * @ai-rules
+ * 1. The background is a flat `bg-sidebar` surface with a `border-sidebar-border` hairline — never reintroduce a gradient or hardcode colors here.
+ * 2. Both buttons use their natural variants (`default` for `cta`, `outline` for `secondaryCta`) with no color overrides — they already contrast correctly against `bg-sidebar`; do not force-style them with one-off colors.
+ * 3. Each `cta`/`secondaryCta` needs either `href` (renders an `<a>`) or `onClick`.
+ */
+export function CTASection({
+  title,
+  description,
+  cta,
+  secondaryCta,
+  className,
+  ...props
+}: CTASectionProps) {
+  return (
+    <section
+      className={cn(
+        'w-full rounded-[var(--radius-card)] border border-sidebar-border bg-sidebar px-6 py-16 md:py-20',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
+        <div className="max-w-xl">
+          <h2 className="text-2xl font-bold text-sidebar-foreground md:text-4xl">{title}</h2>
+          {description && <p className="mt-6 text-sidebar-foreground/70">{description}</p>}
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row md:shrink-0">
+          <Button asChild={!!cta.href} onClick={cta.onClick}>
+            {cta.href ? <a href={cta.href}>{cta.label}</a> : cta.label}
+          </Button>
+
+          {secondaryCta && (
+            <Button variant="outline" asChild={!!secondaryCta.href} onClick={secondaryCta.onClick}>
+              {secondaryCta.href ? (
+                <a href={secondaryCta.href}>{secondaryCta.label}</a>
+              ) : (
+                secondaryCta.label
+              )}
+            </Button>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

package/components/blocks/marketing/ComplianceBadgeRow.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+
+export interface ComplianceBadge {
+  icon: React.ReactNode;
+  label: string;
+  description?: string;
+}
+
+export interface ComplianceBadgeRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  badges: ComplianceBadge[];
+}
+
+/**
+ * A row of certification/compliance badges (e.g. SOC 2, GDPR, WCAG 2.1 AA).
+ *
+ * @description
+ * Renders a left-aligned grid where each badge pairs a token-radius outlined
+ * icon chip with a label and an optional short description, built entirely
+ * from theme tokens so it reskins across all Xertica-ui themes and dark mode.
+ *
+ * @ai-rules
+ * 1. Provide `badges` as `{ icon, label, description? }` — `icon` should be a small lucide-react element.
+ * 2. Keep `label` and `description` short — badges sit in a `grid-cols-2 sm:grid-cols-4` layout, so each column has limited width.
+ * 3. Do not hand-roll badge styling elsewhere — this component owns the icon-chip/label/description layout.
+ */
+export function ComplianceBadgeRow({ badges, className, ...props }: ComplianceBadgeRowProps) {
+  return (
+    <div
+      className={cn('grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-4', className)}
+      {...props}
+    >
+      {badges.map((badge, index) => (
+        <div
+          key={`${badge.label}-${index}`}
+          className="flex flex-col items-start gap-3 text-left"
+        >
+          <div className="flex items-center justify-center rounded-[var(--radius)] border border-border bg-background p-3 [&>svg]:size-6">
+            {badge.icon}
+          </div>
+          <p className="text-sm font-medium text-foreground">{badge.label}</p>
+          {badge.description && (
+            <p className="text-xs text-muted-foreground">{badge.description}</p>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/blocks/marketing/EvidenceTimeline.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+
+export type BlockColor =
+  | 'primary'
+  | 'chart-1'
+  | 'chart-2'
+  | 'chart-3'
+  | 'chart-4'
+  | 'chart-5'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'destructive';
+
+const colorTokens: Record<BlockColor, { bg: string; icon: string }> = {
+  primary: { bg: 'bg-primary/10', icon: 'text-primary' },
+  'chart-1': { bg: 'bg-[var(--chart-1)]/15', icon: 'text-[var(--chart-1)]' },
+  'chart-2': { bg: 'bg-[var(--chart-2)]/15', icon: 'text-[var(--chart-2)]' },
+  'chart-3': { bg: 'bg-[var(--chart-3)]/15', icon: 'text-[var(--chart-3)]' },
+  'chart-4': { bg: 'bg-[var(--chart-4)]/15', icon: 'text-[var(--chart-4)]' },
+  'chart-5': { bg: 'bg-[var(--chart-5)]/15', icon: 'text-[var(--chart-5)]' },
+  success: { bg: 'bg-success/10', icon: 'text-success' },
+  info: { bg: 'bg-info/10', icon: 'text-info' },
+  warning: { bg: 'bg-warning/10', icon: 'text-warning' },
+  destructive: { bg: 'bg-destructive/10', icon: 'text-destructive' },
+};
+
+export interface EvidenceTimelineItem {
+  number?: string | number;
+  icon?: React.ReactNode;
+  title: string;
+  description: string;
+  color?: BlockColor;
+}
+
+export interface EvidenceTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: EvidenceTimelineItem[];
+}
+
+/**
+ * Vertical numbered timeline with a connecting line and colored step dots.
+ *
+ * @description
+ * Renders a "how our methodology works" style list: each item gets a
+ * colored dot (icon or step number) on a shared vertical line, with a
+ * title and description to its right.
+ *
+ * @ai-rules
+ * 1. Provide `icon` for a lucide-react icon in the dot, or `number` for a step label; if neither is set the 1-based index is used.
+ * 2. Each item's `color` maps to `colorTokens` — never hardcode colors.
+ * 3. This block has no outer card chrome; wrap it in a `<Card>` or section if chrome is needed.
+ */
+export function EvidenceTimeline({ items, className, ...props }: EvidenceTimelineProps) {
+  return (
+    <div className={cn('relative pl-12', className)} {...props}>
+      <div aria-hidden="true" className="absolute left-4 top-4 bottom-4 w-px bg-border" />
+
+      <ol className="relative">
+        {items.map((item, index) => {
+          const { bg, icon: iconColor } = colorTokens[item.color ?? 'primary'];
+
+          return (
+            <li key={index} className="relative flex items-start gap-4 pb-10 last:pb-0">
+              <div
+                className={cn(
+                  'absolute -left-12 top-0 flex size-8 shrink-0 items-center justify-center rounded-[var(--radius)] z-10 border border-current/20',
+                  bg
+                )}
+              >
+                <span
+                  className={cn(
+                    'flex items-center justify-center text-sm font-semibold [&>svg]:size-4',
+                    iconColor
+                  )}
+                >
+                  {item.icon ?? (item.number ?? index + 1)}
+                </span>
+              </div>
+
+              <div className="min-w-0">
+                <p className="font-semibold">{item.title}</p>
+                <p className="mt-2 text-sm opacity-70">{item.description}</p>
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}

package/components/blocks/marketing/FeatureRow.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { CheckCircle2 } from 'lucide-react';
+import { cn } from '../../shared/utils';
+
+export interface FeatureRowProps extends React.HTMLAttributes<HTMLElement> {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  bullets?: string[];
+  visual: React.ReactNode;
+  reverse?: boolean;
+  tone?: 'default' | 'muted' | 'card';
+}
+
+/**
+ * Alternating text + visual marketing section.
+ *
+ * @description
+ * A two-column "how it works" / definition row: a text block (eyebrow,
+ * title, description, optional checklist) paired with a consumer-supplied
+ * visual (image, illustration, or custom node). Stacks on mobile and
+ * alternates sides on desktop via `reverse`.
+ *
+ * @ai-rules
+ * 1. Chain multiple `FeatureRow`s and alternate `reverse` to build a "how it works" narrative.
+ * 2. Pass the visual as `<ImageWithFallback />` or any custom `ReactNode`; this component never renders an image itself.
+ * 3. Use `tone="muted"` on every other row to create a subtle section break instead of adding manual dividers; use `tone="card"` when a theme needs a stronger, genuinely lighter break (some themes set `--muted` equal to `--background`).
+ */
+export function FeatureRow({
+  eyebrow,
+  title,
+  description,
+  bullets,
+  visual,
+  reverse = false,
+  tone = 'default',
+  className,
+  ...props
+}: FeatureRowProps) {
+  return (
+    <section
+      className={cn(
+        'py-16 md:py-24',
+        tone === 'muted' ? 'bg-muted' : tone === 'card' ? 'bg-card' : 'bg-background',
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto grid max-w-6xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8">
+        <div className={cn(reverse ? 'lg:order-last' : 'lg:order-first')}>
+          {eyebrow && (
+            <p className="text-sm font-semibold uppercase tracking-wide text-primary">
+              {eyebrow}
+            </p>
+          )}
+          <h2 className={cn('text-2xl font-bold text-foreground md:text-3xl', eyebrow && 'mt-2')}>
+            {title}
+          </h2>
+          {description && (
+            <p className="mt-6 text-muted-foreground leading-relaxed">{description}</p>
+          )}
+          {bullets && bullets.length > 0 && (
+            <ul className="mt-4 space-y-2">
+              {bullets.map(bullet => (
+                <li key={bullet} className="flex items-start gap-2">
+                  <CheckCircle2 className="size-5 shrink-0 text-primary" />
+                  <span className="text-foreground">{bullet}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div className={cn(reverse ? 'lg:order-first' : 'lg:order-last')}>{visual}</div>
+      </div>
+    </section>
+  );
+}

package/components/blocks/marketing/Hero.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { Button } from '../../ui/button';
+import { PillBadge } from './PillBadge';
+import { cn } from '../../shared/utils';
+
+export interface HeroCta {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  eyebrow?: { label: string; icon?: React.ReactNode };
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  primaryCta?: HeroCta;
+  secondaryCta?: HeroCta;
+  visual?: React.ReactNode;
+  align?: 'left' | 'center';
+  decorative?: boolean;
+}
+
+function HeroCtaButton({
+  cta,
+  variant,
+}: {
+  cta: HeroCta;
+  variant: React.ComponentProps<typeof Button>['variant'];
+}) {
+  if (cta.href) {
+    return (
+      <Button asChild variant={variant} size="lg">
+        <a href={cta.href} onClick={cta.onClick}>
+          {cta.label}
+        </a>
+      </Button>
+    );
+  }
+
+  return (
+    <Button variant={variant} size="lg" onClick={cta.onClick}>
+      {cta.label}
+    </Button>
+  );
+}
+
+/**
+ * Full-width, above-the-fold marketing hero section.
+ *
+ * @description
+ * The lead block for landing and marketing pages: an optional `PillBadge`
+ * eyebrow, a very large headline, supporting copy, and up to two `<Button>`
+ * CTAs. Automatically switches from a single column to a two-column layout
+ * once a `visual` (screenshot, illustration, collage) is supplied.
+ *
+ * @ai-rules
+ * 1. Pass `visual` for the two-column desktop layout; omit it for a single-column hero.
+ * 2. `primaryCta` renders as `default` (primary/brand) and `secondaryCta` as `secondary`, both via `<Button>` (`size="lg"`) — never hand-roll buttons.
+ * 3. Set `decorative` to add a token-based gradient blob backdrop; it is purely visual and never shifts layout.
+ * 4. `align="center"` centers the eyebrow/heading/copy/CTAs — pair it with omitting `visual` for a classic centered hero.
+ */
+export function Hero({
+  eyebrow,
+  title,
+  description,
+  primaryCta,
+  secondaryCta,
+  visual,
+  align = 'left',
+  decorative = false,
+  className,
+  ...props
+}: HeroProps) {
+  const isCentered = align === 'center';
+
+  return (
+    <section className={cn('relative overflow-hidden py-16 md:py-24', className)} {...props}>
+      {decorative && (
+        <div
+          className="pointer-events-none absolute inset-0 z-0 overflow-hidden"
+          aria-hidden="true"
+        >
+          <div className="absolute left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[linear-gradient(135deg,var(--gradient-start),var(--gradient-end))] opacity-20 blur-3xl md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem]" />
+        </div>
+      )}
+
+      <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div
+          className={cn('grid items-center gap-12', visual ? 'lg:grid-cols-2' : 'mx-auto max-w-3xl')}
+        >
+          <div
+            className={cn(
+              'flex flex-col gap-6',
+              isCentered ? 'items-center text-center' : 'items-start text-left'
+            )}
+          >
+            {eyebrow && <PillBadge icon={eyebrow.icon}>{eyebrow.label}</PillBadge>}
+
+            <h1 className="text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl">
+              {title}
+            </h1>
+
+            {description && (
+              <p className="max-w-2xl text-lg text-muted-foreground">{description}</p>
+            )}
+
+            {(primaryCta || secondaryCta) && (
+              <div
+                className={cn(
+                  'flex flex-col gap-3 pt-2 sm:flex-row',
+                  isCentered && 'sm:justify-center'
+                )}
+              >
+                {primaryCta && <HeroCtaButton cta={primaryCta} variant="default" />}
+                {secondaryCta && <HeroCtaButton cta={secondaryCta} variant="secondary" />}
+              </div>
+            )}
+          </div>
+
+          {visual && <div className="relative">{visual}</div>}
+        </div>
+      </div>
+    </section>
+  );
+}

package/components/blocks/marketing/HowItWorksSteps.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+
+export type BlockColor =
+  | 'primary'
+  | 'chart-1'
+  | 'chart-2'
+  | 'chart-3'
+  | 'chart-4'
+  | 'chart-5'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'destructive';
+
+const colorTokens: Record<BlockColor, { bg: string; icon: string }> = {
+  primary: { bg: 'bg-primary/10', icon: 'text-primary' },
+  'chart-1': { bg: 'bg-[var(--chart-1)]/15', icon: 'text-[var(--chart-1)]' },
+  'chart-2': { bg: 'bg-[var(--chart-2)]/15', icon: 'text-[var(--chart-2)]' },
+  'chart-3': { bg: 'bg-[var(--chart-3)]/15', icon: 'text-[var(--chart-3)]' },
+  'chart-4': { bg: 'bg-[var(--chart-4)]/15', icon: 'text-[var(--chart-4)]' },
+  'chart-5': { bg: 'bg-[var(--chart-5)]/15', icon: 'text-[var(--chart-5)]' },
+  success: { bg: 'bg-success/10', icon: 'text-success' },
+  info: { bg: 'bg-info/10', icon: 'text-info' },
+  warning: { bg: 'bg-warning/10', icon: 'text-warning' },
+  destructive: { bg: 'bg-destructive/10', icon: 'text-destructive' },
+};
+
+export interface HowItWorksStepItem {
+  number?: string | number;
+  icon?: React.ReactNode;
+  title: string;
+  description: string;
+  color?: BlockColor;
+}
+
+export interface HowItWorksStepsProps {
+  items: HowItWorksStepItem[];
+  className?: string;
+}
+
+/**
+ * Horizontal numbered process row — the horizontal counterpart to `EvidenceTimeline`.
+ *
+ * @description
+ * Renders a "how it works" style row of steps: each item gets a colored
+ * badge (icon or step number) above a title and description, laid out
+ * side by side in a responsive grid instead of `EvidenceTimeline`'s
+ * vertical connecting line.
+ *
+ * @ai-rules
+ * 1. Provide `icon` for a lucide-react icon in the badge, or `number` for a step label; if neither is set the 1-based index is used.
+ * 2. Each item's `color` maps to `colorTokens` — never hardcode colors.
+ * 3. There is no connecting line between steps (unlike `EvidenceTimeline`) — this avoids awkward line fragments when steps wrap to a new row on narrow screens.
+ * 4. This block has no outer card chrome; wrap it in a `<Card>` or section if chrome is needed.
+ */
+export function HowItWorksSteps({ items, className }: HowItWorksStepsProps) {
+  return (
+    <ol className={cn('grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4', className)}>
+      {items.map((item, index) => {
+        const { bg, icon: iconColor } = colorTokens[item.color ?? 'primary'];
+
+        return (
+          <li key={index} className="flex flex-col gap-4">
+            <div
+              className={cn(
+                'flex size-10 shrink-0 items-center justify-center rounded-[var(--radius)] border border-current/20 md:size-12',
+                bg
+              )}
+            >
+              <span
+                className={cn(
+                  'flex items-center justify-center text-sm font-semibold [&>svg]:size-5',
+                  iconColor
+                )}
+              >
+                {item.icon ?? (item.number ?? index + 1)}
+              </span>
+            </div>
+
+            <div className="min-w-0">
+              <p className="font-semibold">{item.title}</p>
+              <p className="mt-2 text-sm opacity-70">{item.description}</p>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}