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

> ## Agent Instructions
> Before reading these docs, install the Circle Skill for Arc to get pre-loaded context: use-arc (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-arc/SKILL.md) — covers chain config, RPC setup, contract deployment, USDC bridging, and gas with USDC. In Claude Code: run /plugin marketplace add circlefin/skills then /plugin install circle-skills@circle. With Vercel Skills CLI: run npx skills add circlefin/skills.
> USDC is the gas token. Arc uses USDC for gas fees, not ETH. Configure gas payment in USDC when submitting transactions.
> Read EVM differences before writing Arc code. Arc targets the Osaka EVM baseline. Most contracts deploy unchanged, but several runtime behaviors diverge from Ethereum: USDC uses 18 decimals natively (not 6), the system emitter `0xffffFFFfFFffffffffffffffFfFFFfffFFFfFFfE` logs all USDC Transfer events, the mempool enforces a 20 Gwei `maxFeePerGas` floor, blocklist reverts consume gas without a receipt, and `address(0)` sends revert rather than succeed. https://docs.arc.io/arc/references/evm-differences.md is the canonical reference for all Arc-specific runtime behaviors. Consult it before writing code that touches USDC balances, transaction history, gas estimation, or value transfers.
> Sub-second finality. Transactions are final in under 1 second. No need to wait for multiple block confirmations.
> Use App Kits for multichain payment and liquidity capabilities. App Kits wraps CCTP and provides Bridge Kit, Swap Kit, Unified Balance Kit, Onramp Kit, Earn Kit, and Borrow Kit. Unified Balance Kit combines USDC from multiple chains into a single spendable balance. Earn Kit integrates earn opportunities into your app. Borrow Kit lets users borrow USDC against cirBTC collateral on Arc.
> Use Arc Foundry for contract development. Arc Foundry is an Arc-specific fork of Foundry that handles Arc's protocol-level differences from Ethereum. It provides arc-forge, arc-cast, and arc-anvil. Install it before deploying contracts: https://docs.arc.io/arc/tutorials/install-arc-foundry.md.
> Arc is available on both Testnet and Mainnet. See https://docs.arc.io/arc/references/connect-to-arc.md for RPC endpoints and https://faucet.circle.com for testnet tokens.
> Always check Contract Addresses: https://docs.arc.io/arc/references/contract-addresses.md
> Building beyond Arc? Circle offers skills for the full platform: use-usdc (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-usdc/SKILL.md), use-circle-wallets (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-circle-wallets/SKILL.md), use-developer-controlled-wallets (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-developer-controlled-wallets/SKILL.md), use-user-controlled-wallets (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-user-controlled-wallets/SKILL.md), use-modular-wallets (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-modular-wallets/SKILL.md), use-gateway (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-gateway/SKILL.md), use-smart-contract-platform (https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-smart-contract-platform/SKILL.md). Full Circle developer docs: https://developers.circle.com/llms.txt.

# Welcome to Arc docs

> Everything you need to build onchain finance with stablecoins: start fast, scale reliably.

<div className="max-w-[960px] mx-auto px-6 pt-12 pb-16">
  <div className="text-center mb-16">
    <div className="flex justify-center mb-4">
      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#4d8ee9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2L2 7l10 5 10-5-10-5z" />

        <path d="M2 17l10 5 10-5" />

        <path d="M2 12l10 5 10-5" />
      </svg>
    </div>

    <h1
      className="text-[48px] text-gray-900 dark:text-white mb-4 leading-tight"
      style={{
  fontFamily: "'Space Grotesk', sans-serif",
  fontWeight: 100,
  lineHeight: "3rem",
}}
    >
      Arc developer documentation
    </h1>

    <p className="text-[18px] text-gray-600 dark:text-[#c7c5d1] leading-7 mb-8 max-w-[600px] mx-auto">
      Everything you need to build onchain finance with stablecoins: start fast,
      scale reliably.
    </p>

    <button onClick={() => document.getElementById("search-bar-entry")?.click()} className="group flex items-center gap-2 w-full max-w-[480px] mx-auto px-4 py-2.5 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 text-sm transition-colors cursor-pointer hover:border-gray-300 dark:hover:border-white/20 text-[#6b6580] dark:text-[#C7C5D1]" aria-label="Search documentation or ask AI">
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        style={{ flexShrink: 0 }}
        dangerouslySetInnerHTML={{
    __html:
      '<circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path>',
  }}
      />

      <span className="flex-1 text-left">Search docs or ask AI...</span>

      <kbd className="hidden sm:inline-flex items-center px-2 py-0.5 text-xs rounded border border-gray-200 dark:border-white/10">
        ⌘K
      </kbd>
    </button>
  </div>

  <div className="mb-16">
    <h2 className="text-[28px] font-light text-gray-900 dark:text-white mb-5 leading-[36px]">
      Use cases
    </h2>

    <CardGroup cols={2}>
      <Card title="Peer-to-peer payments" icon="users" href="/build/payments">
        Launch instant, low-cost, peer-to-peer payments with stablecoin-native transfers and deterministic settlement.
      </Card>

      <Card title="eCommerce checkout" icon="credit-card" href="/build/ecommerce">
        Accept stablecoin payments in your online store with fast settlement and built-in compliance.
      </Card>

      <Card title="Stablecoin FX" icon="arrows-rotate" href="/build/stablecoin-fx">
        Build real-time, onchain stablecoin FX products with transparent pricing, instant settlement, and predictable fees.
      </Card>

      <Card title="Agentic economy" icon="robot" href="/build/agentic-economy">
        Enable autonomous AI agents to coordinate, contract, and settle value in real time.
      </Card>

      <Card title="Prediction markets" icon="chart-line" href="/build/prediction-markets">
        Build decentralized prediction markets with trustless oracle resolution and position token trading.
      </Card>

      <Card title="Borrow and lend" icon="building-columns" href="/build/borrow-and-lend">
        Build collateralized lending protocols with instant settlement and native USDC borrowing.
      </Card>
    </CardGroup>
  </div>

  <div className="mb-16">
    <h2 className="text-[28px] font-light text-gray-900 dark:text-white mb-5 leading-[36px]">
      Workflows
    </h2>

    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div className="bg-white dark:bg-white/[0.03] border border-gray-200 dark:border-white/[0.08] rounded-[14px] overflow-hidden">
        <div className="flex items-center gap-3 px-5 pt-5 pb-4">
          <div className="w-9 h-9 rounded-full bg-gray-100 dark:bg-white/[0.08] flex items-center justify-center shrink-0">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="stroke-gray-500 dark:stroke-[#8b9cc7]" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />

              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
            </svg>
          </div>

          <span className="text-[16px] text-gray-900 dark:text-white font-semibold">
            Learn
          </span>
        </div>

        <a href="/arc-chain" className="group flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-white/[0.06] no-underline hover:bg-gray-100 dark:hover:bg-[#5FBFFF]/10 transition-colors">
          <span className="text-[14px] text-gray-600 dark:text-[#c7c5d1] group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
            Key features
          </span>

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="stroke-gray-400 dark:stroke-[#666] group-hover:stroke-gray-700 dark:group-hover:stroke-[#c7c5d1] group-hover:translate-x-0.5 transition" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </a>

        <a href="/arc/concepts/system-overview" className="group flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-white/[0.06] no-underline hover:bg-gray-100 dark:hover:bg-[#5FBFFF]/10 transition-colors">
          <span className="text-[14px] text-gray-600 dark:text-[#c7c5d1] group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
            Architecture
          </span>

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="stroke-gray-400 dark:stroke-[#666] group-hover:stroke-gray-700 dark:group-hover:stroke-[#c7c5d1] group-hover:translate-x-0.5 transition" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </a>

        <a href="/arc/references/gas-and-fees" className="group flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-white/[0.06] no-underline hover:bg-gray-100 dark:hover:bg-[#5FBFFF]/10 transition-colors">
          <span className="text-[14px] text-gray-600 dark:text-[#c7c5d1] group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
            Gas and fees
          </span>

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="stroke-gray-400 dark:stroke-[#666] group-hover:stroke-gray-700 dark:group-hover:stroke-[#c7c5d1] group-hover:translate-x-0.5 transition" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </a>
      </div>

      <div className="bg-white dark:bg-white/[0.03] border border-gray-200 dark:border-white/[0.08] rounded-[14px] overflow-hidden">
        <div className="flex items-center gap-3 px-5 pt-5 pb-4">
          <div className="w-9 h-9 rounded-full bg-gray-100 dark:bg-white/[0.08] flex items-center justify-center shrink-0">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="stroke-gray-500 dark:stroke-[#8b9cc7]" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
            </svg>
          </div>

          <span className="text-[16px] text-gray-900 dark:text-white font-semibold">
            Build with App Kits
          </span>
        </div>

        <a href="/app-kit/unified-balance" className="group flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-white/[0.06] no-underline hover:bg-gray-100 dark:hover:bg-[#5FBFFF]/10 transition-colors">
          <span className="text-[14px] text-gray-600 dark:text-[#c7c5d1] group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
            Unified Balance
          </span>

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="stroke-gray-400 dark:stroke-[#666] group-hover:stroke-gray-700 dark:group-hover:stroke-[#c7c5d1] group-hover:translate-x-0.5 transition" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </a>

        <a href="/app-kit/bridge" className="group flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-white/[0.06] no-underline hover:bg-gray-100 dark:hover:bg-[#5FBFFF]/10 transition-colors">
          <span className="text-[14px] text-gray-600 dark:text-[#c7c5d1] group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
            Bridge
          </span>

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="stroke-gray-400 dark:stroke-[#666] group-hover:stroke-gray-700 dark:group-hover:stroke-[#c7c5d1] group-hover:translate-x-0.5 transition" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </a>

        <a href="/app-kit" className="group flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-white/[0.06] no-underline hover:bg-gray-100 dark:hover:bg-[#5FBFFF]/10 transition-colors">
          <span className="text-[14px] text-gray-600 dark:text-[#c7c5d1] group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
            All capabilities
          </span>

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="stroke-gray-400 dark:stroke-[#666] group-hover:stroke-gray-700 dark:group-hover:stroke-[#c7c5d1] group-hover:translate-x-0.5 transition" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </a>
      </div>

      <div className="bg-white dark:bg-white/[0.03] border border-gray-200 dark:border-white/[0.08] rounded-[14px] overflow-hidden">
        <div className="flex items-center gap-3 px-5 pt-5 pb-4">
          <div className="w-9 h-9 rounded-full bg-gray-100 dark:bg-white/[0.08] flex items-center justify-center shrink-0">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" className="stroke-gray-500 dark:stroke-[#8b9cc7]" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="3" />

              <path d="M12 1v4m0 14v4M4.22 4.22l2.83 2.83m9.9 9.9l2.83 2.83M1 12h4m14 0h4M4.22 19.78l2.83-2.83m9.9-9.9l2.83-2.83" />
            </svg>
          </div>

          <span className="text-[16px] text-gray-900 dark:text-white font-semibold">
            Integrate
          </span>
        </div>

        <a href="/arc/references/connect-to-arc" className="group flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-white/[0.06] no-underline hover:bg-gray-100 dark:hover:bg-[#5FBFFF]/10 transition-colors">
          <span className="text-[14px] text-gray-600 dark:text-[#c7c5d1] group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
            Connect to Arc
          </span>

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="stroke-gray-400 dark:stroke-[#666] group-hover:stroke-gray-700 dark:group-hover:stroke-[#c7c5d1] group-hover:translate-x-0.5 transition" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </a>

        <a href="/arc/references/contract-addresses" className="group flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-white/[0.06] no-underline hover:bg-gray-100 dark:hover:bg-[#5FBFFF]/10 transition-colors">
          <span className="text-[14px] text-gray-600 dark:text-[#c7c5d1] group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
            Contract addresses
          </span>

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="stroke-gray-400 dark:stroke-[#666] group-hover:stroke-gray-700 dark:group-hover:stroke-[#c7c5d1] group-hover:translate-x-0.5 transition" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </a>

        <a href="/arc/references/evm-differences" className="group flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-white/[0.06] no-underline hover:bg-gray-100 dark:hover:bg-[#5FBFFF]/10 transition-colors">
          <span className="text-[14px] text-gray-600 dark:text-[#c7c5d1] group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
            EVM compatibility
          </span>

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="stroke-gray-400 dark:stroke-[#666] group-hover:stroke-gray-700 dark:group-hover:stroke-[#c7c5d1] group-hover:translate-x-0.5 transition" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </a>
      </div>
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-[28px] font-light text-gray-900 dark:text-white mb-5 leading-[36px]">
      Common tasks
    </h2>

    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <p className="text-[11px] text-gray-500 dark:text-[#a7a3b5] uppercase tracking-widest mb-3 font-medium">
          Core
        </p>

        <div className="flex flex-col gap-2">
          <a href="/arc/references/connect-to-arc" className="text-[14px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">
            Connect to RPC
          </a>

          <a href="/arc/tutorials/deploy-contracts" className="text-[14px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">
            Deploy a contract
          </a>

          <a href="/arc/tutorials/monitor-contract-events" className="text-[14px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">
            Read events/logs
          </a>
        </div>
      </div>

      <div>
        <p className="text-[11px] text-gray-500 dark:text-[#a7a3b5] uppercase tracking-widest mb-3 font-medium">
          Operate
        </p>

        <div className="flex flex-col gap-2">
          <a href="/app-kit/unified-balance" className="text-[14px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">
            Unified Balance
          </a>

          <a href="/app-kit/quickstarts/send-tokens-same-chain" className="text-[14px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">
            Send stablecoins
          </a>

          <a href="/arc/references/gas-and-fees" className="text-[14px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">
            Estimate fees
          </a>
        </div>
      </div>

      <div>
        <p className="text-[11px] text-gray-500 dark:text-[#a7a3b5] uppercase tracking-widest mb-3 font-medium">
          Move Crosschain
        </p>

        <div className="flex flex-col gap-2">
          <a href="/app-kit/quickstarts/bridge-tokens-across-blockchains" className="text-[14px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">
            Bridge in/out
          </a>

          <a href="/app-kit/references/supported-blockchains" className="text-[14px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">
            Supported networks
          </a>

          <a href="/app-kit/references/bridge-error-recovery" className="text-[14px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">
            Crosschain troubleshooting
          </a>
        </div>
      </div>
    </div>
  </div>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
    <div>
      <h2 className="text-[22px] font-light text-gray-900 dark:text-white mb-4 leading-[28px] flex items-center gap-2">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="stroke-gray-900 dark:stroke-white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
        </svg>

        Build with AI
      </h2>

      <div className="flex flex-col gap-3">
        <a href="https://docs.arc.io/ai/mcp" className="flex items-center gap-3 bg-white dark:bg-[#1F2F44] border border-gray-950/10 dark:border-white/10 rounded-[10px] p-4 no-underline hover:bg-gray-100 dark:hover:bg-[#263a52] transition-colors">
          <div className="w-8 h-8 rounded-md bg-[#1e3a5f] flex items-center justify-center shrink-0">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="4" y="4" width="16" height="16" rx="2" />

              <path d="M9 9h6v6H9z" />
            </svg>
          </div>

          <div>
            <span className="text-[14px] text-gray-900 dark:text-white font-medium block">Arc MCP Server</span>
            <span className="text-[12px] text-gray-500 dark:text-[#a7a3b5]">Setup guide</span>
          </div>
        </a>

        <a href="https://docs.arc.io/llms.txt" className="flex items-center gap-3 bg-white dark:bg-[#1F2F44] border border-gray-950/10 dark:border-white/10 rounded-[10px] p-4 no-underline hover:bg-gray-100 dark:hover:bg-[#263a52] transition-colors">
          <div className="w-8 h-8 rounded-md bg-[#1e3a5f] flex items-center justify-center shrink-0">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />

              <path d="M14 2v6h6" />
            </svg>
          </div>

          <div>
            <span className="text-[14px] text-gray-900 dark:text-white font-medium block">LLMs.txt</span>
            <span className="text-[12px] text-gray-500 dark:text-[#a7a3b5]">Agent context</span>
          </div>
        </a>
      </div>
    </div>

    <div>
      <h2 className="text-[22px] font-light text-gray-900 dark:text-white mb-4 leading-[28px]">
        What's new
      </h2>

      <div className="flex flex-col gap-0">
        <div className="flex items-start gap-4 py-3 border-b border-gray-100 dark:border-white/[0.06]">
          <span className="text-[13px] text-gray-500 dark:text-[#a7a3b5] shrink-0 w-[48px]">Sep 16</span>
          <span className="text-[11px] text-blue-600 dark:text-[#acc6e9] bg-blue-50 dark:bg-[#acc6e9]/10 px-2 py-0.5 rounded font-medium shrink-0 uppercase">Arc</span>
          <a href="/arc/references/connect-to-arc" className="text-[13px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">Arc mainnet is live</a>
        </div>

        <div className="flex items-start gap-4 py-3 border-b border-gray-100 dark:border-white/[0.06]">
          <span className="text-[13px] text-gray-500 dark:text-[#a7a3b5] shrink-0 w-[48px]">Sep 16</span>
          <span className="text-[11px] text-blue-600 dark:text-[#acc6e9] bg-blue-50 dark:bg-[#acc6e9]/10 px-2 py-0.5 rounded font-medium shrink-0 uppercase">App Kits</span>
          <a href="/app-kit" className="text-[13px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">Borrow and Earn are now available</a>
        </div>

        <div className="flex items-start gap-4 py-3 border-b border-gray-100 dark:border-white/[0.06]">
          <span className="text-[13px] text-gray-500 dark:text-[#a7a3b5] shrink-0 w-[48px]">Apr 30</span>
          <span className="text-[11px] text-blue-600 dark:text-[#acc6e9] bg-blue-50 dark:bg-[#acc6e9]/10 px-2 py-0.5 rounded font-medium shrink-0 uppercase">App Kits</span>
          <a href="/app-kit/unified-balance" className="text-[13px] text-gray-600 dark:text-[#c7c5d1] no-underline hover:text-gray-900 dark:hover:text-white transition-colors">Unified Balance is now available</a>
        </div>

        <div className="flex items-start gap-4 py-3 border-b border-gray-100 dark:border-white/[0.06]">
          <span className="text-[13px] text-gray-500 dark:text-[#a7a3b5] shrink-0 w-[48px]">Mar 10</span>
          <span className="text-[11px] text-blue-600 dark:text-[#acc6e9] bg-blue-50 dark:bg-[#acc6e9]/10 px-2 py-0.5 rounded font-medium shrink-0 uppercase">App Kits</span>
          <span className="text-[13px] text-gray-600 dark:text-[#c7c5d1]">App Kits is now available with Bridge and Swap</span>
        </div>
      </div>
    </div>
  </div>
</div>