> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

export const IconCard = ({iconName, title, color}) => {
  const iconClasses = `icon-container ${color || ''}`.trim();
  let icon;
  switch (iconName) {
    case 'shield-check':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9 12l2 2l4 -4"></path>
          <path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"></path>
        </svg>;
      break;
    case 'lock':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
        </svg>;
      break;
    case 'chip':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000000" viewBox="0 0 256 256"><path d="M152,96H104a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V104A8,8,0,0,0,152,96Zm-8,48H112V112h32Zm88,0H216V112h16a8,8,0,0,0,0-16H216V56a16,16,0,0,0-16-16H160V24a8,8,0,0,0-16,0V40H112V24a8,8,0,0,0-16,0V40H56A16,16,0,0,0,40,56V96H24a8,8,0,0,0,0,16H40v32H24a8,8,0,0,0,0,16H40v40a16,16,0,0,0,16,16H96v16a8,8,0,0,0,16,0V216h32v16a8,8,0,0,0,16,0V216h40a16,16,0,0,0,16-16V160h16a8,8,0,0,0,0-16Zm-32,56H56V56H200v95.87s0,.09,0,.13,0,.09,0,.13V200Z"></path></svg>;
      break;
    case 'credit-card':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
          <line x1="1" y1="10" x2="23" y2="10"></line>
        </svg>;
      break;
    case 'cube':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
          <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
          <line x1="12" y1="22.08" x2="12" y2="12"></line>
        </svg>;
      break;
    case 'gift':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 12 20 22 4 22 4 12"></polyline>
          <rect x="2" y="7" width="20" height="5"></rect>
          <line x1="12" y1="22" x2="12" y2="7"></line>
          <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
          <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
        </svg>;
      break;
    case 'rocket':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path>
            <path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path>
            <circle cx="15" cy="9" r="1"></circle>
        </svg>;
      break;
    default:
      icon = null;
      break;
  }
  return <div className="icon-title-card">
      <div className={iconClasses}>
        {icon}
      </div>
      <h6 className="item-title">{title}</h6>
    </div>;
};

export const HorizontalCard = ({img, title, href, linkText = 'Read More', children}) => {
  return <a href={href} className="horizontal_card hover:!border-primary dark:hover:!border-primary-light">
      <div className="card-image-container">
        <img noZoom src={img} alt={title} />
      </div>
      <div className="card-content-container">
        <h2 className="card-title">{title}</h2>
        <div className="color_card-description">
          {children}
        </div>
      </div>
    </a>;
};

export const HorizontalColorCard = ({img, title, color, href, linkText = 'Read More', children}) => {
  const cardClassName = `horizontal_card horizontal_color_card ${color || ""}`.trim();
  return <div className={cardClassName}>
      <div className="card-content-container">
        <h2 className="card-title">{title}</h2>
        <div className="card-description dark-content">
          {children}
        </div>
      </div>
      <div className="card-image-container">
        {img && <img noZoom src={img} alt={title} />}
      </div>
    </div>;
};

<div className="block dark:hidden">
  <HorizontalColorCard title="Handle disputes with ease" color="purple" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/disputes/banner/light.png">
    Track dispute statuses, trigger actions, and keep your systems in sync with automated updates.
  </HorizontalColorCard>
</div>

<div className="hidden dark:block">
  <HorizontalColorCard title="Handle disputes with ease" color="purple" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/disputes/banner/dark.png">
    Track dispute statuses, trigger actions, and keep your systems in sync with automated updates.
  </HorizontalColorCard>
</div>

## Analyse all your payments data in one place

<CardGroup cols={2}>
  <Card title="Manage disputes" href="/disputes/manage-disputes" icon="list-check">
    Monitor dispute activity across all processors and respond with workflows and alerts.
  </Card>

  <Card title="Disputes lifecycle" href="/disputes/dispute-lifecycle" icon="heart-pulse">
    Stay informed through every stage of a dispute, from initiation to resolution.
  </Card>
</CardGroup>