> ## Documentation Index
> Fetch the complete documentation index at: https://walletconnect-pay-docs-network-docs-migration.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# WalletConnect Documentation

> The Connectivity Layer for the Financial Internet

export const ProductCard = ({img, href, title, description, model, type}) => {
  return <a href={href} rel="noopener noreferrer" className="group mb-5">
      <div className="flex flex-col rounded-xl md:p-1">
        <div className="w-full h-32 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
          <img src={img} className="w-full h-[calc(100%+4px)] object-cover transition-transform duration-300 group-hover:scale-105 align-center -mt-1" alt={title} loading="lazy" noZoom />
        </div>
        <div className="flex flex-col gap-3 pb-2">
          <h2 className="text-md font-medium text-gray-900 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors mb-[-8px]">
            {title}
          </h2>
          <p className="text-gray-500 dark:text-gray-400 text-sm font-medium">
            {description}
          </p>
          <div className="flex gap-2 mt-2 mb-1">
            {model && <span className="bg-gray-100 dark:bg-[#181817] text-gray-600 dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{model}</span>}
            <span className="bg-primary-light dark:bg-primary-dark text-white dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{type}</span>
          </div>
        </div>
      </div>
    </a>;
};

export const Title = ({children}) => {
  return <div className="text-gray-900 dark:text-gray-200 text-2xl tracking-tight">
      {children}
    </div>;
};

export const Container = ({children}) => {
  return <div className="px-4 lg:px-10 py-14">
      {children}
    </div>;
};

<div className="px-5 divide-y divide-gray-100 dark:divide-white/10">
  <Container>
    <div className="w-full flex flex-col">
      <div className="flex flex-col items-start justify-center w-full max-w-4xl text-left">
        <div className="text-gray-900 dark:text-gray-200 text-4xl tracking-tight">
          WalletConnect
        </div>

        <p className="text-md text-gray-600 dark:text-gray-400 text-left mt-3 mb-4">
          The Connectivity Layer for the Financial Internet
        </p>
      </div>
    </div>
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-8">
      <Title>
        WalletConnect Ecosystem Quickstart
      </Title>

      <p className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3">
        WalletConnect powers apps, wallets and end-users via the WalletConnect network.
      </p>

      <p className="text-[#5B616E] dark:text-gray-300 text-md mt-4">
        <strong>Check out our quickstart guides to get started!</strong>
      </p>
    </div>

    <CardGroup cols={2}>
      <ProductCard title="Wallets" description="Reach users on the network by joining our ecosystem of wallets." href="/wallets/overview" img="https://mintcdn.com/walletconnect-pay-docs-network-docs-migration/WTPxcWxsk9P30Au6/images/wallet.png?fit=max&auto=format&n=WTPxcWxsk9P30Au6&q=85&s=d745af424302b8ea1a334bc9c3adf46b" type="Wallet SDK" width="840" height="438" data-path="images/wallet.png" />

      <ProductCard title="Apps" description="Provide wallet connections and user authentication for your app." href="/apps/overview" img="https://mintcdn.com/walletconnect-pay-docs-network-docs-migration/WTPxcWxsk9P30Au6/images/app.svg?fit=max&auto=format&n=WTPxcWxsk9P30Au6&q=85&s=1e9d41d039246105c73bd2421202a656" type="App SDK" width="280" height="146" data-path="images/app.svg" />

      <ProductCard title="Payments" description="Enable stablecoin and crypto payments as a wallet, app, PSP or merchant." href="/payments" img="https://mintcdn.com/walletconnect-pay-docs-network-docs-migration/WTPxcWxsk9P30Au6/images/credit-card.svg?fit=max&auto=format&n=WTPxcWxsk9P30Au6&q=85&s=089ae3bfe63004a523a660204443db0e" type="Payments" width="280" height="146" data-path="images/credit-card.svg" />

      <ProductCard title="WalletConnect Network" description="Discover the network powering 700+ wallets and 80,000+ apps." href="/network" img="https://mintcdn.com/walletconnect-pay-docs-network-docs-migration/WTPxcWxsk9P30Au6/images/network.svg?fit=max&auto=format&n=WTPxcWxsk9P30Au6&q=85&s=68bdb8ca774fa6c5ed93efddc15a27d8" type="Network" width="280" height="146" data-path="images/network.svg" />
    </CardGroup>

    <ul className="not-prose pb-[1px] h-1 min-w-full mt-3 overflow-auto" />
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-5">
      <Title>
        Resources
      </Title>
    </div>

    <Columns cols={3}>
      <Card title="WalletConnect Blog" icon="newspaper" href="https://walletconnect.com/blog">
        Read the latest news and updates from the WalletConnect team
      </Card>

      <Card title="Join the WalletConnect Community" icon="discord" href="https://discord.walletconnect.network/">
        Discord community for WalletConnect Network and WCT Token
      </Card>

      <Card title="Twitter" icon="twitter" href="https://x.com/WalletConnect">
        Follow WalletConnect on X (Twitter) to stay updated on the announcements
      </Card>
    </Columns>
  </Container>
</div>