Function ExplainerCards

apps/app/src/components/explainer-cards.tsx:44–77

()

];

function ExplainerCards() {
  return (
    <div className="explainer-cards">
      {cards.map((card) => (
        <div key={card.title} className="explainer-card">
          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <div className="explainer-card-icon">
              {card.icon}
            </div>
            <span
              style={{
                fontSize: "13px",
                fontWeight: 600,
                color: "var(--text-primary)",
              }}
            >
              {card.title}
            </span>
          </div>
          <p
            style={{
              fontSize: "12px",
              lineHeight: 1.5,
              color: "var(--text-secondary)",
              margin: 0,
            }}
          >
            {card.description}
          </p>
        </div>
      ))}
    </div>
  );
}

/**
 * Portal that injects ExplainerCards into the CopilotKit welcome screen.