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

# avnu - Your All-in-One Trading Hub on Starknet

<div className="relative min-h-screen text-[#181D27] dark:text-[#F9F9FB]">
  <div className="w-full h-[525px] absolute opacity-60 overflow-hidden" />

  <div className="flex flex-col items-center justify-center pt-8 pb-8 md:pt-16 md:pb-16 relative px-4">
    <div className="text-center max-w-6xl mx-auto pt-8 sm:pt-0">
      <div className="text-center justify-start text-xs sm:text-base text-[#3761F6] dark:text-[#6B8AFF] font-medium leading-normal uppercase tracking-wider">Your All-in-One Trading Hub on Starknet</div>
      <div className="text-center justify-start text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold leading-tight sm:leading-[60px] md:leading-[80px] lg:leading-[96px] mt-2">Build or Trade with avnu</div>

      <div className="text-center justify-start text-base sm:text-lg md:text-xl text-[#535862] dark:text-[#A6A09E] mt-4 max-w-3xl mx-auto">
        Best trading execution, DCA, paymaster, token lists & more - everything you need in one platform
      </div>

      {/* Hero card group to display stats */}

      <div className="mx-1 md:mx-20 grid grid-cols-3 md:grid-cols-3 gap-2 md:gap-6 p-2 md:p-6 mt-8">
        <div className="bg-[#3761F6]/5 dark:bg-[#3761F6]/10 border border-[#3761F6]/20 rounded-lg md:rounded-xl p-3 md:p-6 text-center ">
          <div className="text-xl md:text-3xl font-bold text-[#3761F6] dark:text-[#6B8AFF] mb-1 md:mb-2">50+</div>
          <div className="text-xs md:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 md:mb-2">Integrations</div>
          <div className="text-xs md:text-sm text-gray-600 dark:text-gray-400 hidden md:block">Trusted by leading protocols</div>
        </div>

        <div className="bg-[#3761F6]/5 dark:bg-[#3761F6]/10 border border-[#3761F6]/20 rounded-lg md:rounded-xl p-3 md:p-6 text-center ">
          <div className="text-xl md:text-3xl font-bold text-[#3761F6] dark:text-[#6B8AFF] mb-1 md:mb-2">\$3B+</div>
          <div className="text-xs md:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 md:mb-2">Volume</div>
          <div className="text-xs md:text-sm text-gray-600 dark:text-gray-400 hidden md:block">All-time trading volume</div>
        </div>

        <div className="bg-[#3761F6]/5 dark:bg-[#3761F6]/10 border border-[#3761F6]/20 rounded-lg md:rounded-xl p-3 md:p-6 text-center ">
          <div className="text-xl md:text-3xl font-bold text-[#3761F6] dark:text-[#6B8AFF] mb-1 md:mb-2">#1</div>
          <div className="text-xs md:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 md:mb-2">DEX Aggregator</div>
          <div className="text-xs md:text-sm text-gray-600 dark:text-gray-400 hidden md:block">On Starknet</div>
        </div>
      </div>
    </div>

    <div className="mt-8 md:mt-12 flex justify-center">
      {/* Build CTA */}

      <a href="/get-started/overview" className="inline-flex items-center px-8 md:px-10 py-2 md:py-3 bg-[#3761F6] hover:bg-[#09104F] text-white font-semibold text-base md:text-lg rounded-xl md:rounded-xl shadow-lg hover:shadow-xl hover:shadow-[#3761F6]/20 hover:scale-105 transition-all duration-300 ease-in-out active:scale-95">
        Start Building

        <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
        </svg>
      </a>
    </div>
  </div>

  <div className="max-w-6xl mx-auto px-4">
    <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-600 to-transparent" />
  </div>

  <div className="max-w-6xl mx-auto pt-[60px] md:pt-[120px] pb-[60px] md:pb-[120px] relative px-4">
    <div className="flex justify-center text-2xl sm:text-3xl md:text-4xl font-bold leading-tight md:leading-10 pb-[10px]">Start with Best-Price Swaps</div>
    <div className="flex justify-center text-[#535862] dark:text-[#A6A09E] text-xs sm:text-lg font-normal leading-6 sm:leading-7 pb-[40px] sm:pb-[56px] text-center">Competing solver algorithms solve NP-hard optimization problems in real-time to maximize net output</div>

    {/* Desktop: Left-Right Layout */}

    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
      {/* Left side: Integration options and Benefits */}

      <div className="order-2 lg:order-1 space-y-6">
        <CardGroup cols={1}>
          <Card title="Why avnu Swap?">
            <div className="space-y-8 mt-4">
              <div className="flex items-center gap-3">
                <div className="w-2 h-2 rounded-full bg-[#3761F6] shrink-0" />

                <div className="font-normal text-sm text-gray-600 dark:text-gray-400">Solvers tackle NP-hard optimization problems in real-time to maximize your net output.</div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-2 h-2 rounded-full bg-[#3761F6] shrink-0" />

                <div className="font-normal text-sm text-gray-600 dark:text-gray-400">Aggregates all liquidity sources: AMMs, CLOBs, and market makers across Starknet.</div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-2 h-2 rounded-full bg-[#3761F6] shrink-0" />

                <div className="font-normal text-sm text-gray-600 dark:text-gray-400">Smart routing splits trades across hundreds of potential routes while minimizing slippage and gas.</div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-2 h-2 rounded-full bg-[#3761F6] shrink-0" />

                <div className="font-normal text-sm text-gray-600 dark:text-gray-400">Battle-tested infrastructure trusted by major Starknet wallets and applications.</div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-2 h-2 rounded-full bg-[#3761F6] shrink-0" />

                <div className="font-normal text-sm text-gray-600 dark:text-gray-400">Zero infrastructure required - we handle all the complexity.</div>
              </div>
            </div>
          </Card>

          <Card title="Swap API" icon="bolt" href="/docs/swap/index" horizontal>
            Integrate swaps via REST API for full customization and control.
          </Card>

          <Card title="Quick Integration" icon="rocket-launch" href="/get-started/first-swap" horizontal>
            Get started in 5 minutes with our TypeScript SDK.
          </Card>
        </CardGroup>
      </div>

      {/* Right side: Live Demo */}

      <div className="order-1 lg:order-2">
        <Card title="Live Example">
          <CodeGroup>
            ```typescript SDK theme={null}
            import { getQuotes, executeSwap } from '@avnu/avnu-sdk';
            import { parseUnits } from 'ethers';

            // Get best quote
            const quotes = await getQuotes({
              sellTokenAddress: usdcAddress,
              buyTokenAddress: strkAddress,
              sellAmount: parseUnits('1000', 6), // 1000 USDC
              takerAddress: account.address,
            });

            // Execute swap
            const result = await executeSwap({
              provider: account,
              quote: quotes[0],
              slippage: 0.001, // 0.1%
            });
            ```

            ```bash API theme={null}
            curl -X POST "https://starknet.api.avnu.fi/v3/swap/quotes" \
              -H "Content-Type: application/json" \
              -d '{
                "sellTokenAddress": "0x053c...",
                "buyTokenAddress": "0x04718...",
                "sellAmount": "1000000000",
                "takerAddress": "0x..."
              }'
            ```
          </CodeGroup>
        </Card>
      </div>
    </div>
  </div>

  <div className="max-w-6xl mx-auto pt-[40px] pb-[60px] relative px-4">
    <div className="text-center mb-12">
      <div className="text-3xl font-bold mb-4">Your Complete Trading Toolkit</div>
      <div className="text-[#535862] dark:text-[#A6A09E]">All the tools you need to build or trade on Starknet - in one place</div>
    </div>

    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card title="Swap" icon="arrow-right-arrow-left" href="/docs/swap/index">
        Solver-optimized swaps that tackle complex routing problems in real-time to maximize net output.
      </Card>

      <Card title="DCA" icon="calendar-days" href="/docs/dca/index">
        Recurring token purchases with automated execution and flexible scheduling.
      </Card>

      <Card title="Paymaster" icon="gas-pump" href="/docs/paymaster/index">
        Let users pay gas in any token, or sponsor their transactions entirely.
      </Card>

      <Card title="Markets API" icon="chart-line" href="/docs/markets/index">
        Real-time prices, liquidity depth, and volume data for all Starknet tokens.
      </Card>

      <Card title="Token List" icon="coins" href="/docs/tokens/index">
        Verified token metadata, logos, and contract addresses.
      </Card>

      <Card title="Resources" icon="book" href="/resources/contracts">
        Smart contracts, audits, and integration guides.
      </Card>
    </div>
  </div>

  <div className="bg-[#3761F6]/5 dark:bg-[#09104F]/50 py-16">
    <div className="max-w-6xl mx-auto px-4 text-center">
      <div className="text-2xl font-bold mb-8">Trusted by Leading Protocols</div>

      <div className="flex flex-wrap justify-center items-center gap-12 mb-8 max-w-6xl mx-auto">
        <div className="flex items-center justify-center w-32 h-24">
          <img src="https://mintcdn.com/avnu/_JpzWk4ZjyPdn4Yr/images/companies/ready.png?fit=max&auto=format&n=_JpzWk4ZjyPdn4Yr&q=85&s=15aae26bd380f2fb085bda6b03ae3f8a" alt="Ready" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 dark:hidden" width="703" height="210" data-path="images/companies/ready.png" />

          <img src="https://mintcdn.com/avnu/5818UJu0RoJ0O0c7/images/companies/ready-dark.svg?fit=max&auto=format&n=5818UJu0RoJ0O0c7&q=85&s=519e0a19787c01c21e51d43c353085a1" alt="Ready" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 hidden dark:block" width="847" height="354" data-path="images/companies/ready-dark.svg" />
        </div>

        <div className="flex items-center justify-center w-32 h-24">
          <img src="https://mintcdn.com/avnu/_JpzWk4ZjyPdn4Yr/images/companies/Starkware.png?fit=max&auto=format&n=_JpzWk4ZjyPdn4Yr&q=85&s=95e3c13aa6dc7a960f162cecedaf9278" alt="StarkWare" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 dark:hidden" width="2560" height="470" data-path="images/companies/Starkware.png" />

          <img src="https://mintcdn.com/avnu/94wiXaQ8FZQqHO6O/images/companies/starkware-dark.png?fit=max&auto=format&n=94wiXaQ8FZQqHO6O&q=85&s=976d14a8a4b4bc5dd8cfa39354221acd" alt="StarkWare" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 hidden dark:block" width="2083" height="417" data-path="images/companies/starkware-dark.png" />
        </div>

        <div className="flex items-center justify-center w-32 h-24">
          <img src="https://mintcdn.com/avnu/sepDaPL52wNZH2GI/images/companies/braavos.png?fit=max&auto=format&n=sepDaPL52wNZH2GI&q=85&s=58973db853e2108fa34d34c460f41532" alt="Braavos" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 dark:hidden" width="160" height="43" data-path="images/companies/braavos.png" />

          <img src="https://mintcdn.com/avnu/94wiXaQ8FZQqHO6O/images/companies/braavos-dark.svg?fit=max&auto=format&n=94wiXaQ8FZQqHO6O&q=85&s=099e67d54f4ee12e88a638a776cbd0e9" alt="Braavos" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 hidden dark:block" width="160" height="43" data-path="images/companies/braavos-dark.svg" />
        </div>

        <div className="flex items-center justify-center w-32 h-24">
          <img src="https://mintcdn.com/avnu/_JpzWk4ZjyPdn4Yr/images/companies/xverse2.png?fit=max&auto=format&n=_JpzWk4ZjyPdn4Yr&q=85&s=e814635750217115dddff658a28e6f0d" alt="Xverse" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 dark:hidden" width="600" height="112" data-path="images/companies/xverse2.png" />

          <img src="https://mintcdn.com/avnu/_JpzWk4ZjyPdn4Yr/images/companies/xverse.png?fit=max&auto=format&n=_JpzWk4ZjyPdn4Yr&q=85&s=30e1c513caa93e2400dfee98c6995c4f" alt="Xverse" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 hidden dark:block" width="198" height="38" data-path="images/companies/xverse.png" />
        </div>

        <div className="flex items-center justify-center w-32 h-24">
          <img src="https://mintcdn.com/avnu/_JpzWk4ZjyPdn4Yr/images/companies/Focustree.png?fit=max&auto=format&n=_JpzWk4ZjyPdn4Yr&q=85&s=12ad28835bc0a170a890820c94dbbb9c" alt="Focustree" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 dark:hidden" width="630" height="144" data-path="images/companies/Focustree.png" />

          <img src="https://mintcdn.com/avnu/5818UJu0RoJ0O0c7/images/companies/focustree-dark.svg?fit=max&auto=format&n=5818UJu0RoJ0O0c7&q=85&s=f2384b736d395876ab62fe6171fdbefb" alt="Focustree" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 hidden dark:block" width="5629" height="2128" data-path="images/companies/focustree-dark.svg" />
        </div>

        <div className="flex items-center justify-center w-32 h-24">
          <img src="https://mintcdn.com/avnu/_JpzWk4ZjyPdn4Yr/images/companies/Kulipa.png?fit=max&auto=format&n=_JpzWk4ZjyPdn4Yr&q=85&s=edcbebcc7678a02e652ad3d6064c8b79" alt="Kulipa" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 dark:hidden" width="116" height="38" data-path="images/companies/Kulipa.png" />

          <img src="https://mintcdn.com/avnu/5818UJu0RoJ0O0c7/images/companies/kulipa-dark.svg?fit=max&auto=format&n=5818UJu0RoJ0O0c7&q=85&s=7ffb2a639bcbb166c548089858c1c1dc" alt="Kulipa" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 hidden dark:block" width="375" height="123" data-path="images/companies/kulipa-dark.svg" />
        </div>

        <div className="flex items-center justify-center w-32 h-24">
          <img src="https://mintcdn.com/avnu/_JpzWk4ZjyPdn4Yr/images/companies/endur_full.svg?fit=max&auto=format&n=_JpzWk4ZjyPdn4Yr&q=85&s=424622e7502aba913c29f89d09aafeca" alt="Endur" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 dark:brightness-0 dark:invert transition-all duration-300" width="1399" height="542" data-path="images/companies/endur_full.svg" />
        </div>

        <div className="flex items-center justify-center w-32 h-24">
          <img src="https://mintcdn.com/avnu/_JpzWk4ZjyPdn4Yr/images/companies/starknet-foundation-logo.svg?fit=max&auto=format&n=_JpzWk4ZjyPdn4Yr&q=85&s=728006150d02cabf66ac2c5d0cd948ed" alt="Starknet Foundation" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 dark:hidden" width="680" height="158" data-path="images/companies/starknet-foundation-logo.svg" />

          <img src="https://mintcdn.com/avnu/5818UJu0RoJ0O0c7/images/companies/starknet-foundation-dark.svg?fit=max&auto=format&n=5818UJu0RoJ0O0c7&q=85&s=bbe61e7131b2a133591474cfaccb4ee7" alt="Starknet Foundation" className="max-h-full max-w-full object-contain grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300 hidden dark:block" width="700" height="159" data-path="images/companies/starknet-foundation-dark.svg" />
        </div>
      </div>

      <div className="text-[#535862] dark:text-[#A6A09E] font-semibold">
        50+ integrators
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8 max-w-2xl mx-auto">
        <Card title="Join Developer Group" icon="telegram" href="https://t.me/avnu_developers">
          Get direct support from our engineering team.
        </Card>

        <Card title="Follow on X" icon="x-twitter" href="https://twitter.com/avnu_fi">
          Stay updated with the latest announcements.
        </Card>
      </div>
    </div>
  </div>

  <div className="py-16 text-center">
    <div className="max-w-3xl mx-auto px-4">
      <div className="text-3xl font-bold mb-4">Ready to Get Started?</div>

      <div className="text-[#535862] dark:text-[#A6A09E] mb-8">
        Whether you're building the next big DeFi app or looking for the best trades on Starknet, avnu has you covered
      </div>

      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="/get-started/overview" className="px-6 py-3 bg-[#3761F6] hover:bg-[#09104F] text-white rounded-lg font-semibold transition">
          Build with avnu
        </a>

        <a href="https://app.avnu.fi" className="px-6 py-[10px] bg-transparent border-2 border-[#3761F6] text-[#3761F6] dark:text-[#6B8AFF] hover:bg-[#3761F6] hover:text-white rounded-lg font-semibold transition">
          Trade on avnu
        </a>
      </div>
    </div>
  </div>
</div>