> ## Documentation Index
> Fetch the complete documentation index at: https://docs.walletconnect.com/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, imgDark, 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-white/5">
          <img src={img} className="block w-full h-full m-0 object-cover object-center transition-transform duration-300 group-hover:scale-105 dark:hidden" alt={title} loading="lazy" noZoom />
          <img src={imgDark || img} className="hidden w-full h-full m-0 object-cover object-center transition-transform duration-300 group-hover:scale-105 dark:block" alt={title} loading="lazy" noZoom />
        </div>
        <div className="not-prose flex flex-col gap-1 pt-3 pb-2">
          <h2 className="text-2xl tracking-tight font-medium text-gray-900 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
            {title}
          </h2>
          <p className="text-gray-500 dark:text-gray-400 text-sm font-medium">
            {description}
          </p>
          {(model || type) && <div className="flex gap-2 mt-2 mb-1">
              {model && <span className="bg-gray-100 dark:bg-white/5 text-gray-600 dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{model}</span>}
              {type && <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="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/q-1tfoBvS6JSfU1c/images/wallet.svg?fit=max&auto=format&n=q-1tfoBvS6JSfU1c&q=85&s=873c44a66ee8c92195459aafb1d53bf8" imgDark="/images/wallet-dark.svg" width="280" height="146" data-path="images/wallet.svg" />

      <ProductCard title="Apps" description="Provide wallet connections and user authentication for your app." href="/apps/overview" img="https://mintcdn.com/walletconnect_pay_docs/A2Mt8yOxmO53sr0N/images/app.svg?fit=max&auto=format&n=A2Mt8yOxmO53sr0N&q=85&s=776c507abadb9e76e75fa73e6df21c08" imgDark="/images/app-dark.svg" 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/Iyv-ordqasfi5p4M/images/credit-card.svg?fit=max&auto=format&n=Iyv-ordqasfi5p4M&q=85&s=47e86c970613a40b8f3a80daa90154f4" imgDark="/images/credit-card-dark.svg" 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/Iyv-ordqasfi5p4M/images/network.svg?fit=max&auto=format&n=Iyv-ordqasfi5p4M&q=85&s=7bfcd154a217b59bef39ded2ca92ea67" imgDark="/images/network-dark.svg" 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>