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

# Introduction

> Official LayerZero Documentation. Build omnichain applications with crosschain messaging. Developer guides, API references, and deployment resources.

export const IconCard = ({title, text, icon, href, accent = "purple"}) => {
  const accentConfig = {
    purple: {
      iconBg: "bg-[rgba(173,70,255,0.1)]",
      iconColor: "text-[#9333ea] dark:text-[#c084fc]",
      titleHover: "group-hover:text-[#9333ea] dark:group-hover:text-[#c084fc]",
      arrowHover: "group-hover:text-[#9333ea] dark:group-hover:text-[#c084fc]",
      borderHover: "group-hover:border-[#9333ea] dark:group-hover:border-[#c084fc]"
    },
    stargate: {
      iconBg: "bg-[rgba(15,185,131,0.1)]",
      iconColor: "text-[#10a073] dark:text-[#0fb983]",
      titleHover: "group-hover:text-[#10a073] dark:group-hover:text-[#0fb983]",
      arrowHover: "group-hover:text-[#10a073] dark:group-hover:text-[#0fb983]",
      borderHover: "group-hover:border-[#10a073] dark:group-hover:border-[#0fb983]"
    },
    gray: {
      iconBg: "bg-[rgba(163,163,163,0.1)]",
      iconColor: "text-[#737373] dark:text-[#a1a1a1]",
      titleHover: "group-hover:text-[#525252] dark:group-hover:text-[#d4d4d4]",
      arrowHover: "group-hover:text-[#525252] dark:group-hover:text-[#d4d4d4]",
      borderHover: "group-hover:border-[#a1a1a1] dark:group-hover:border-[#525252]"
    }
  };
  const colors = accentConfig[accent] || accentConfig.purple;
  const defaultIcon = <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L12 12.75l-5.571-3m11.142 0l4.179 2.25-9.75 5.25-9.75-5.25 4.179-2.25m0 4.5l5.571 3 5.571-3" />
    </svg>;
  const arrowIcon = <svg className={`w-4 h-4 text-[#a1a1a1] dark:text-[#525252] ${colors.arrowHover} transition-colors`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
    </svg>;
  const cardClasses = `flex flex-col p-4 rounded-lg bg-white dark:bg-[#0a0a0a] border-2 border-[#e5e5e5] dark:border-[#2b2b2b] transition-all ${colors.borderHover} h-full`;
  const content = <div className={href ? cardClasses : `group ${cardClasses}`}>
      {}
      <div className="flex items-start justify-between mb-3">
        {}
        <div className={`flex items-center justify-center p-2 rounded-lg ${colors.iconBg} ${colors.iconColor}`}>
          {icon ? <img src={icon} alt="" className="w-5 h-5 object-contain" /> : defaultIcon}
        </div>
        {}
        <div className="flex-shrink-0">
          {arrowIcon}
        </div>
      </div>

      {}
      <h3 className={`text-base font-semibold text-[#171717] dark:text-[#fafafa] mb-1.5 ${colors.titleHover} transition-colors`}>
        {title}
      </h3>

      {}
      {text && <p className="text-xs text-[#525252] dark:text-[#a1a1a1] leading-relaxed">
          {text}
        </p>}
    </div>;
  if (href) {
    return <a href={href} className="group block h-full no-underline hover:no-underline" style={{
      textDecoration: 'none'
    }} data-accent={accent}>
        {content}
      </a>;
  }
  return content;
};

<div className="lz-content-wrapper max-w-[900px] mx-auto px-4 sm:px-6 relative">
  <div className="lz-content-video-bg">
    <video autoPlay muted loop playsInline className="lz-content-video">
      <source src="https://d3a2dpnnrypp5h.cloudfront.net/layerzero-network/2024-05/LayerZero+-+Header+Animation+-+V02.mp4" type="video/mp4" />
    </video>
  </div>

  <div className="pt-8 pb-6 text-center relative z-10">
    <h1 className="text-[30px] font-bold dark:text-[#fafafa] text-[#171717] leading-[36px] tracking-[0.4px] m-0">
      LayerZero Documentation
    </h1>

    <p className="text-[18px] font-normal dark:text-[#a1a1a1] text-[#525252] leading-[28px] tracking-[-0.44px] mt-2 mb-0">
      Crosschain interoperability, blockchain infrastructure, and financial applications
    </p>
  </div>

  <div className="mt-4 relative z-10">
    <div className="mb-3">
      <h3 className="text-[11px] font-medium text-[#9333ea] dark:text-[#c084fc] uppercase tracking-[0.8px] leading-[16px] m-0 pb-2 border-b border-[#9333ea]/40 dark:border-[#c084fc]/40">
        Blockchain Infrastructure
      </h3>
    </div>

    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      <IconCard title="Introducing Zero" text="A new proof-of-stake blockchain with heterogeneous architecture optimized for SNARK verification" href="/chain" accent="purple" />

      <IconCard title="Build on Zero" text="Learn more about building on Zero" href="https://layerzeronetwork.typeform.com/to/GZ97WE1p" accent="purple" />

      <IconCard title="Positioning paper" text="Read the technical positioning paper for Zero's architecture" href="https://layerzero.network/blog/zero-technical-positioning-paper" accent="purple" />

      <IconCard title="Blog overview" text="Read the announcement blog post about Zero" href="https://layerzero.network/blog/zero-the-decentralized-multi-core-world-computer" accent="purple" />
    </div>
  </div>

  <div className="mt-8 relative z-10">
    <div className="mb-3">
      <h3 className="text-[11px] font-medium text-[#9333ea] dark:text-[#c084fc] uppercase tracking-[0.8px] leading-[16px] m-0 pb-2 border-b border-[#9333ea]/40 dark:border-[#c084fc]/40">
        Crosschain & Interoperability
      </h3>
    </div>

    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      <IconCard title="Issue crosschain assets" text="Create and manage omnichain fungible tokens (OFTs) that work on 80+ blockchains" href="/crosschain/issue-asset/overview" accent="purple" />

      <IconCard title="Add crosschain features" text="Build custom smart contracts with crosschain messaging and functionality" href="/crosschain/features/overview" accent="purple" />

      <IconCard title="See supported chains" text="View 150+ supported blockchains, contract addresses, and network details" href="/v2/deployments/deployed-contracts" accent="purple" />

      <IconCard title="Verify crosschain messages" text="Run decentralized verification infrastructure for LayerZero's crosschain messaging" href="/v2/concepts/modular-security/security-stack-dvns" accent="purple" />
    </div>
  </div>

  <div className="mt-8 relative z-10">
    <div className="mb-3">
      <h3 className="text-[11px] font-medium text-[#059669] dark:text-[#0fb983] uppercase tracking-[0.8px] leading-[16px] m-0 pb-2 border-b border-[#059669]/40 dark:border-[#0fb983]/40">
        Financial Applications & Services
      </h3>
    </div>

    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      <IconCard title="Bridge tokens between chains" text="Transfer assets across networks with guaranteed finality and unified liquidity" href="/v2/concepts/applications/stargate-finance" accent="stargate" />

      <IconCard title="Provide liquidity and earn fees" text="Add liquidity to unified pools and earn rewards from crosschain transfers" href="/v2/concepts/applications/stargate-finance" accent="stargate" />

      <IconCard title="Integrate bridging into my app" text="Add bridging UI to your application using widgets, APIs, or SDKs" href="/v2/developers/evm/stargate/overview" accent="stargate" />
    </div>
  </div>

  <div className="mt-8 mb-8 relative z-10">
    <div className="mb-3">
      <h3 className="text-[11px] font-medium text-[#737373] dark:text-[#a1a1a1] uppercase tracking-[0.8px] leading-[16px] m-0 pb-2 border-b border-[#d4d4d4]/60 dark:border-[#525252]/60">
        I'm Just Exploring
      </h3>
    </div>

    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <IconCard title="Browse by product" text="View all LayerZero products and explore documentation by category" href="/v2/concepts/getting-started/what-is-layerzero" accent="gray" />

      <IconCard title="Learn core concepts" text="Understand how LayerZero works and explore fundamental architecture" href="/v2/concepts/getting-started/what-is-layerzero" accent="gray" />
    </div>
  </div>
</div>