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

# Welcome to Bindu

> The open-source trust and transaction layer for the autonomous web.

<div className="w-full text-neutral-900 dark:text-neutral-50 selection:bg-indigo-500/30 font-sans relative bg-white dark:bg-[#050505]">
  {/* Import Google Fonts via standard HTML link tags */}

  <link rel="preconnect" href="https://fonts.googleapis.com" />

  <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet" />

  {/* SPLIT SCREEN WRAPPER FOR PARALLAX SECTIONS */}

  <div className="flex flex-col md:flex-row w-full relative">
    {/* LEFT HALF: STICKY TITLE */}

    {/* Full screen height on mobile to hide the right half below the fold, stays pinned on desktop */}

    {/* Replaced md:bg-white/50 with md:bg-[#f3f3ea]/50 */}

    <div className="md:w-1/2 w-full h-screen relative md:sticky top-0 flex flex-col items-center justify-center p-8 z-20 bg-[#fcfcf4] dark:bg-[#050505] md:bg-[#fcfcf4] md:dark:bg-[#050505]/50 md:backdrop-blur-md">
      <h1 style={{ fontFamily: "'DM Serif Display', serif" }} className="text-6xl lg:text-8xl font-light tracking-wide leading-[1.05] dark:text-neutral-200 text-center">
        Bindu <br className="hidden md:block" />

        <span className="text-4xl lg:text-5xl bg-clip-text bg-gradient-to-r font-extralight tracking-widest text-neutral-900 dark:text-neutral-300 mt-2 block">
          - Philosophy
        </span>
      </h1>
    </div>

    {/* RIGHT HALF: SCROLLING / STACKING CONTENT */}

    {/* This container will naturally be 300vh tall due to its three h-screen children */}

    <div className="md:w-1/2 w-full relative">
      {/* SECTION 1: THE REALITY */}

      <div className="sticky top-0 h-screen flex flex-col items-center justify-center px-6 text-center z-0 overflow-hidden bg-[#fcfcf4] dark:bg-[#050505]">
        <div id="section-1-content" className="relative z-10 max-w-xl mx-auto w-full will-change-transform origin-center">
          <h2 style={{ fontFamily: "'DM Serif Display', serif" }} className="text-6xl lg:text-7xl font-medium tracking-tight mb-8 leading-[1.05] dark:text-neutral-200">
            The data has <br />

            <span className="text-transparent bg-clip-text bg-gradient-to-r from-neutral-900 to-neutral-800 dark:from-neutral-200 dark:to-neutral-400">
              never met.
            </span>
          </h2>

          <p className="text-lg lg:text-xl text-neutral-600 dark:text-neutral-400 leading-relaxed max-w-md mx-auto">
            Humanity has generated an extraordinary amount of knowledge. Scattered across databases, governments, and hospitals. It sits behind paywalls and borders.
          </p>

          <div className="mt-12">
            <p style={{ fontFamily: "'DM Serif Display', serif" }} className="text-xl lg:text-2xl font-light tracking-wide mb-8 leading-[1.05] dark:text-neutral-200">
              That is not a bug. That is reality.
            </p>
          </div>
        </div>
      </div>

      {/* SECTION 2: THE SHIFT (Slides over Hero) */}

      <div id="section-2-wrapper" className="sticky top-0 h-screen overflow-hidden z-10 flex flex-col items-center justify-center px-6 text-center bg-[#fcfcf4] dark:bg-[#050505] border-t border-neutral-200 dark:border-white/5 shadow-[0_-20px_50px_rgba(0,0,0,0.05)] dark:shadow-[0_-30px_60px_rgba(0,0,0,0.6)]">
        <div id="section-2-content" className="max-w-xl mx-auto will-change-transform origin-center">
          <h2 style={{ fontFamily: "'DM Serif Display', serif" }} className="text-5xl lg:text-6xl font-medium tracking-tight mb-8 leading-[1.05] dark:text-neutral-200">
            No agent can <br />

            <span className="text-transparent bg-clip-text bg-gradient-to-r from-neutral-900 to-neutral-800 dark:from-neutral-200 dark:to-neutral-400">
              understand it all.
            </span>
          </h2>

          <p className="text-lg lg:text-xl text-neutral-600 dark:text-neutral-400 leading-relaxed">
            We do not need one mind. We need millions. Specialized agents living close to the data. A medical agent reading scans. A climate agent monitoring satellites. A legal agent navigating Dutch tax law.
          </p>
        </div>
      </div>

      {/* SECTION 3: THE FRICTION (Slides over Section 2) */}

      <div id="section-3-wrapper" className="sticky top-0 h-screen overflow-hidden z-20 flex flex-col items-center justify-center px-6 text-center bg-[#fcfcf4] dark:bg-[#050505] shadow-[0_-20px_50px_rgba(0,0,0,0.05)] dark:shadow-[0_-30px_60px_rgba(0,0,0,0.6)]">
        <div id="section-3-content" className="max-w-xl mx-auto will-change-transform origin-center">
          <h2 style={{ fontFamily: "'DM Serif Display', serif" }} className="text-5xl lg:text-6xl font-medium tracking-tight mb-8 leading-[1.05] dark:text-neutral-200">
            But how do they <br />

            <span className="text-transparent bg-clip-text bg-gradient-to-r from-neutral-900 to-neutral-800 dark:from-neutral-200 dark:to-neutral-400">
              shake hands?
            </span>
          </h2>

          <div className="relative inline-flex flex-col items-center justify-center px-4 py-2">
            <p style={{ fontFamily: "'DM Serif Display', serif" }} className="relative z-10 text-lg lg:text-xl font-light tracking-wide text-red-600 dark:text-red-500">
              A human brokering every interaction cannot scale.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  {/* SECTION 4: THE REVEAL (Bindu Core) */}

  {/* This acts as the anchor point that ends the sticky scrolling and slides over the split-screen */}

  <div id="bindu-core" className="relative z-30 py-32 md:py-48 px-6 bg-[#fcfcf4] dark:bg-[#050505] overflow-hidden">
    <div className="relative z-10 max-w-7xl mx-auto flex flex-col items-center">
      {/* Headings */}

      <div className="mb-16 md:mb-24 flex flex-col items-center text-center max-w-4xl mx-auto">
        <h1 style={{ fontFamily: "'DM Serif Display', serif" }} className="text-6xl sm:text-8xl font-medium tracking-tight mb-8 leading-[1.05] dark:text-neutral-200">
          Join Bindu
        </h1>

        <p className="text-xl md:text-2xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto leading-relaxed font-light">
          The open-source trust and transaction layer for the autonomous web. We build the infrastructure so your agents can communicate, negotiate, and trade.
        </p>

        <br />

        <p className="text-xl md:text-2xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto leading-relaxed font-light">
          Explore the documentry.
        </p>
      </div>

      {/* Cards Grid */}

      <div className="mx-auto grid w-full max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
        {/* Card 1 */}

        <a href="/bindu/introduction/what-is-bindu" className="group relative flex h-full flex-col overflow-hidden rounded-lg border border-zinc-300/90 bg-[#fcfcf1] p-0 shadow-[0_10px_30px_rgba(0,0,0,0.06)] backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-zinc-300 hover:shadow-[0_18px_50px_rgba(0,0,0,0.10)] dark:border-white/10 dark:bg-[#111113]/95 dark:shadow-[0_18px_50px_rgba(0,0,0,0.30)] dark:hover:border-zinc-600">
          <div className="flex items-center justify-between border-b border-zinc-200/70 bg-gradient-to-b from-zinc-100 to-zinc-50 px-4 py-3 dark:border-white/5 dark:from-white/[0.05] dark:to-white/[0.02]">
            <span className="text-[14px] font-medium tracking-wide text-zinc-500 dark:text-zinc-400">
              Introduction
            </span>

            <svg className="h-3.5 w-3.5 text-zinc-400 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 dark:text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>

          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            <div className="absolute inset-y-0 left-[-30%] w-[35%] rotate-[12deg] bg-gradient-to-r from-transparent via-white/40 to-transparent opacity-0 transition-all duration-1000 group-hover:left-[120%] group-hover:opacity-100 dark:via-white/10" />
          </div>

          <div className="relative z-10 flex flex-1 flex-col gap-3 p-6">
            <h3 className="text-[16px] font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
              Get Started
            </h3>

            <p className="text-[15px] leading-relaxed text-zinc-500 dark:text-zinc-400">
              Learn the core concepts and build your first A2A protocol agent.
            </p>
          </div>
        </a>

        {/* Card 2 */}

        <a href="/bindu/grpc/overview" className="group relative flex h-full flex-col overflow-hidden rounded-lg border border-zinc-300/90 bg-[#fcfcf1] p-0 shadow-[0_10px_30px_rgba(0,0,0,0.06)] backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-zinc-300 hover:shadow-[0_18px_50px_rgba(0,0,0,0.10)] dark:border-white/10 dark:bg-[#111113]/95 dark:shadow-[0_18px_50px_rgba(0,0,0,0.30)] dark:hover:border-zinc-600">
          <div className="flex items-center justify-between border-b border-zinc-200/70 bg-gradient-to-b from-zinc-100 to-zinc-50 px-4 py-3 dark:border-white/5 dark:from-white/[0.05] dark:to-white/[0.02]">
            <span className="text-[14px] font-medium tracking-wide text-zinc-500 dark:text-zinc-400">
              SDKs
            </span>

            <svg className="h-3.5 w-3.5 text-zinc-400 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 dark:text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>

          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            <div className="absolute inset-y-0 left-[-30%] w-[35%] rotate-[12deg] bg-gradient-to-r from-transparent via-white/40 to-transparent opacity-0 transition-all duration-1000 group-hover:left-[120%] group-hover:opacity-100 dark:via-white/10" />
          </div>

          <div className="relative z-10 flex flex-1 flex-col gap-3 p-6">
            <h3 className="text-[16px] font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
              The Sidecar Architecture
            </h3>

            <p className="text-[15px] leading-relaxed text-zinc-500 dark:text-zinc-400">
              Write agent logic in any language while the Python core handles infrastructure.
            </p>
          </div>
        </a>

        {/* Card 3 */}

        <a href="/examples/beginner/echo-agent" className="group relative flex h-full flex-col overflow-hidden rounded-lg border border-zinc-300/90 bg-[#fcfcf1] p-0 shadow-[0_10px_30px_rgba(0,0,0,0.06)] backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-zinc-300 hover:shadow-[0_18px_50px_rgba(0,0,0,0.10)] dark:border-white/10 dark:bg-[#111113]/95 dark:shadow-[0_18px_50px_rgba(0,0,0,0.30)] dark:hover:border-zinc-600">
          <div className="flex items-center justify-between border-b border-zinc-200/70 bg-gradient-to-b from-zinc-100 to-zinc-50 px-4 py-3 dark:border-white/5 dark:from-white/[0.05] dark:to-white/[0.02]">
            <span className="text-[14px] font-medium tracking-wide text-zinc-500 dark:text-zinc-400">
              Agent Examples
            </span>

            <svg className="h-3.5 w-3.5 text-zinc-400 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 dark:text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>
          </div>

          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            <div className="absolute inset-y-0 left-[-30%] w-[35%] rotate-[12deg] bg-gradient-to-r from-transparent via-white/40 to-transparent opacity-0 transition-all duration-1000 group-hover:left-[120%] group-hover:opacity-100 dark:via-white/10" />
          </div>

          <div className="relative z-10 flex flex-1 flex-col gap-3 p-6">
            <h3 className="text-[16px] font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
              Examples
            </h3>

            <p className="text-[15px] leading-relaxed text-zinc-500 dark:text-zinc-400">
              Explore production patterns, from basic agents to multi-agent swarms.
            </p>
          </div>
        </a>
      </div>
    </div>
  </div>

  {/* 3. SECTION 5: THE PLEDGE & QUICKSTART */}

  <div className="relative z-30 py-32 px-6 bg-[#fcfcf4] dark:bg-[#050505]">
    <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
      {/* Left Column: The Philosophy (Static & Stable) */}

      <div className="flex flex-col items-start text-left">
        <h1 style={{ fontFamily: "'DM Serif Display', serif" }} className="text-6xl sm:text-7xl font-medium tracking-tight mb-8 leading-[1.05] dark:text-neutral-200">
          The collaboration of agents can <br className="hidden sm:block" />

          <span className="text-transparent bg-clip-text bg-gradient-to-r from-neutral-900 to-neutral-800 dark:from-neutral-200 dark:to-neutral-400">
            change humanity.
          </span>
        </h1>

        <p className="text-lg md:text-xl text-zinc-600 dark:text-zinc-400 font-light leading-relaxed mb-10 max-w-lg">
          Bindu is an open-source framework. And always will.
        </p>

        <div className="flex w-full sm:w-auto">
          <a href="https://github.com/GetBindu/Bindu" target="_blank" className="group inline-flex items-center justify-center sm:justify-start gap-3 w-full sm:w-auto rounded-full border border-zinc-200 bg-[#fcf9f0] p-1 pr-5 text-md font-medium text-zinc-600 shadow-sm transition-all hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800/80 dark:bg-[#0A0A0A] dark:text-zinc-400 dark:hover:border-zinc-700 dark:hover:bg-[#111113] dark:shadow-none">
            {/* The Icon Container */}

            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-700 transition-colors group-hover:bg-zinc-200 dark:bg-zinc-900 dark:text-zinc-400 dark:group-hover:bg-zinc-800 dark:group-hover:text-zinc-100">
              <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
              </svg>
            </div>

            {/* The Text */}

            <span className="transition-colors group-hover:text-zinc-900 dark:group-hover:text-zinc-100">
              Star on GitHub
            </span>
          </a>
        </div>
      </div>

      {/* Right Column: Render the component we built above */}

      <div className="w-full">
        <div className="lg:p-10">
          <CodeTabs tabs={codeTabs} defaultTab="python" />
        </div>
      </div>
    </div>

    <section className="mt-20 pb-0">
      <div className="mx-auto grid max-w-6xl grid-cols-2 gap-8 px-5 sm:px-8 lg:grid-cols-5 lg:px-10">
        <div>
          <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-900 dark:text-zinc-100">
            Get Started
          </h3>

          <ul className="space-y-3">
            <li>
              <a href="/bindu/introduction/what-is-bindu" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                What is Bindu?
              </a>
            </li>

            <li>
              <a href="/bindu/introduction/key-concepts" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                Key Concepts
              </a>
            </li>

            <li>
              <a href="/bindu/how-to/install" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                Install
              </a>
            </li>
          </ul>
        </div>

        <div>
          <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-900 dark:text-zinc-100">
            Architecture
          </h3>

          <ul className="space-y-3">
            <li>
              <a href="/bindu/concepts/protocol" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                The Protocol
              </a>
            </li>

            <li>
              <a href="/bindu/concepts/task-first-pattern" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                Task-First Pattern
              </a>
            </li>

            <li>
              <a href="/bindu/grpc/overview" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                gRPC Overview
              </a>
            </li>
          </ul>
        </div>

        <div>
          <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-900 dark:text-zinc-100">
            Features
          </h3>

          <ul className="space-y-3">
            <li>
              <a href="/bindu/learn/did/overview" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                DID Identity
              </a>
            </li>

            <li>
              <a href="/bindu/learn/payment/introduction" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                x402 Payments
              </a>
            </li>

            <li>
              <a href="/bindu/learn/storage/overview" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                Storage
              </a>
            </li>

            <li>
              <a href="/bindu/learn/scheduler/overview" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                Scheduler
              </a>
            </li>
          </ul>
        </div>

        <div>
          <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-900 dark:text-zinc-100">
            Reference
          </h3>

          <ul className="space-y-3">
            <li>
              <a href="/api/introduction" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                API Docs
              </a>
            </li>

            <li>
              <a href="/examples/beginner/echo-agent" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                Examples
              </a>
            </li>
          </ul>
        </div>

        <div>
          <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-900 dark:text-zinc-100">
            Community
          </h3>

          <ul className="space-y-3">
            <li>
              <a href="https://github.com/getbindu/bindu" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                GitHub
              </a>
            </li>

            <li>
              <a href="https://getbindu.com" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                Website
              </a>
            </li>

            <li>
              <a href="https://discord.com/invite/3w5zuYUuwt" className="text-sm text-zinc-500 dark:text-zinc-400 transition hover:text-[#8B5CF6]">
                Discord
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div className="mx-auto mt-12 flex max-w-6xl items-center justify-between px-5 pt-8 sm:px-8 lg:px-10">
        <p className="text-xs text-zinc-400 dark:text-zinc-500">
          {"\u00A9"} 2025 Bindu. All rights reserved.
        </p>

        <div className="flex items-center gap-4">
          <a href="https://x.com/raahulrahl" className="text-zinc-400 dark:text-zinc-500 transition hover:text-[#8B5CF6]">
            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
            </svg>
          </a>

          <a href="https://github.com/getbindu" className="text-zinc-400 dark:text-zinc-500 transition hover:text-[#8B5CF6]">
            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
            </svg>
          </a>

          <a href="https://discord.com/invite/3w5zuYUuwt" className="text-zinc-400 dark:text-zinc-500 transition hover:text-[#8B5CF6]">
            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028 14.09 14.09 0 001.226-1.994.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
            </svg>
          </a>

          <a href="https://getbindu.com" className="text-zinc-400 dark:text-zinc-500 transition hover:text-[#8B5CF6]">
            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm6.93 9h-3.16a15.87 15.87 0 00-1.15-4.31A8.03 8.03 0 0118.93 11zM12 4.07c.89 1.08 1.97 3.14 2.52 6.93H9.48C10.03 7.21 11.11 5.15 12 4.07zM4.07 13h3.16c.17 1.59.55 3.07 1.15 4.31A8.03 8.03 0 014.07 13zm3.16-2H4.07a8.03 8.03 0 014.31-4.31A15.87 15.87 0 007.23 11zm4.77 8.93c-.89-1.08-1.97-3.14-2.52-6.93h5.04c-.55 3.79-1.63 5.85-2.52 6.93zM15.62 17.31c.6-1.24.98-2.72 1.15-4.31h3.16a8.03 8.03 0 01-4.31 4.31z" />
            </svg>
          </a>
        </div>
      </div>
    </section>
  </div>
</div>

export const codeTabs = [
  {
    id: "python",
    label: "Python",
    language: "python",
    code: (
      <>
        <span style={{ color: "#8B5CF6" }}>from</span> bindu.penguin.bindufy{" "}
        <span style={{ color: "#8B5CF6" }}>import</span> bindufy{"\n\n"}
        config = {"{"}{"\n"}
        {"    "}<span style={{ color: "#c3e88d" }}>"author"</span>:{" "}
        <span style={{ color: "#c3e88d" }}>"dev@example.com"</span>,{"\n"}
        {"    "}<span style={{ color: "#c3e88d" }}>"name"</span>:{" "}
        <span style={{ color: "#c3e88d" }}>"hello-bindu"</span>,{"\n"}
        {"    "}<span style={{ color: "#c3e88d" }}>"description"</span>:{" "}
        <span style={{ color: "#c3e88d" }}>"A simple Bindu agent"</span>,{"\n"}
        {"    "}<span style={{ color: "#c3e88d" }}>"deployment"</span>: {"{"}{"\n"}
        {"        "}<span style={{ color: "#c3e88d" }}>"url"</span>:{" "}
        <span style={{ color: "#c3e88d" }}>"http://localhost:3773"</span>,{"\n"}
        {"        "}<span style={{ color: "#c3e88d" }}>"expose"</span>:{" "}
        <span style={{ color: "#8B5CF6" }}>True</span>{"\n"}
        {"    "}{"}"},{"\n"}
        {"}"}{"\n\n"}
        <span style={{ color: "#8B5CF6" }}>def</span> handler(messages):{"\n"}
        {"    "}<span style={{ color: "#8B5CF6" }}>return</span>{" "}
        <span style={{ color: "#c3e88d" }}>"Hello from Bindu!"</span>{"\n\n"}
        bindufy(config, handler)
      </>
    ),
  },
  {
    id: "typescript",
    label: "Typescript",
    language: "typescript",
    code: (
      <>
        <span style={{ color: "#8B5CF6" }}>import</span> {"{"} bindufy, ChatMessage {"}"} <span style={{ color: "#8B5CF6" }}>from</span> <span style={{ color: "#c3e88d" }}>"@bindu/sdk"</span>;{"\n"}
        <span style={{ color: "#8B5CF6" }}>import</span> OpenAI <span style={{ color: "#8B5CF6" }}>from</span> <span style={{ color: "#c3e88d" }}>"openai"</span>;{"\n"}
        <span style={{ color: "#8B5CF6" }}>import</span> * <span style={{ color: "#8B5CF6" }}>as</span> dotenv <span style={{ color: "#8B5CF6" }}>from</span> <span style={{ color: "#c3e88d" }}>"dotenv"</span>;{"\n"}
        dotenv.config();{"\n\n"}
        
        <span style={{ color: "#8B5CF6" }}>const</span> openai = <span style={{ color: "#8B5CF6" }}>new</span> OpenAI({"{"}{"\n"}
        {"  "}apiKey: process.env.OPENAI_API_KEY,{"\n"}
        {"}"});{"\n\n"}

        <span style={{ color: "#6b7280" }}>// bindufy — one call, full microservice</span>{"\n"}
        bindufy({"{"}{"\n"}
        {"  "}author: <span style={{ color: "#c3e88d" }}>"opnai-sample-ts@getbindu.com"</span>,{"\n"}
        {"  "}name: <span style={{ color: "#c3e88d" }}>"openai-assistant-agent"</span>,{"\n"}
        {"  "}description: <span style={{ color: "#c3e88d" }}>"An assistant built with the OpenAI SDK and Bindu. Powered by GPT-4o."</span>,{"\n"}
        {"  "}version: <span style={{ color: "#c3e88d" }}>"1.0.0"</span>,{"\n"}
        {"  "}deployment: {"{"}{"\n"}
        {"    "}url: <span style={{ color: "#c3e88d" }}>"http://localhost:3773"</span>,{"\n"}
        {"    "}expose: <span style={{ color: "#8B5CF6" }}>true</span>,{"\n"}
        {"    "}cors_origins: [<span style={{ color: "#c3e88d" }}>"http://localhost:5173"</span>],{"\n"}
        {"  "}{"}"},{"\n"}
        {"  "}skills: [<span style={{ color: "#c3e88d" }}>"skills/typescript-openai-skill"</span>],{"\n"}
        {"}"}, <span style={{ color: "#8B5CF6" }}>async</span> (messages: ChatMessage[]) {"=>"} {"{"}{"\n"}
        {"  "}<span style={{ color: "#6b7280" }}>// Call OpenAI GPT-4o</span>{"\n"}
        {"  "}<span style={{ color: "#8B5CF6" }}>const</span> response = <span style={{ color: "#8B5CF6" }}>await</span> openai.chat.completions.create({"{"}{"\n"}
        {"    "}model: process.env.OPENAI_MODEL || <span style={{ color: "#c3e88d" }}>"gpt-4o"</span>,{"\n"}
        {"    "}messages: messages.map((m) {"=>"} ({"{"}{"\n"}
        {"      "}role: m.role <span style={{ color: "#8B5CF6" }}>as</span> <span style={{ color: "#c3e88d" }}>"user"</span> | <span style={{ color: "#c3e88d" }}>"assistant"</span> | <span style={{ color: "#c3e88d" }}>"system"</span>,{"\n"}
        {"      "}content: m.content,{"\n"}
        {"    "}{"}"})),{"\n"}
        {"  "}{"}"});{"\n"}
        {"  "}<span style={{ color: "#8B5CF6" }}>return</span> response.choices[0].message.content || <span style={{ color: "#c3e88d" }}>""</span>;{"\n"}
        {"}"});
      </>
    ),
  },
  {
    id: "kotlin",
    label: "Kotlin",
    language: "kotlin",
    code: (
      <>
        <span style={{ color: "#8B5CF6" }}>import</span> com.getbindu.sdk.ChatMessage{"\n"}
        <span style={{ color: "#8B5CF6" }}>import</span> com.getbindu.sdk.bindufy{"\n"}
        <span style={{ color: "#8B5CF6" }}>import</span> java.net.URI{"\n"}
        <span style={{ color: "#8B5CF6" }}>import</span> java.net.http.HttpClient{"\n"}
        <span style={{ color: "#8B5CF6" }}>import</span> java.net.http.HttpRequest{"\n"}
        <span style={{ color: "#8B5CF6" }}>import</span> java.net.http.HttpResponse{"\n"}
        <span style={{ color: "#8B5CF6" }}>import</span> com.google.gson.Gson{"\n"}
        <span style={{ color: "#8B5CF6" }}>import</span> com.google.gson.JsonObject{"\n\n"}
        
        <span style={{ color: "#8B5CF6" }}>val</span> httpClient: HttpClient = HttpClient.newHttpClient(){"\n"}
        <span style={{ color: "#8B5CF6" }}>val</span> gson = Gson(){"\n\n"}
        
        <span style={{ color: "#8B5CF6" }}>suspend</span> <span style={{ color: "#8B5CF6" }}>fun</span> callOpenAI(messages: List{"<"}ChatMessage{">"}): String {"{"}{"\n"}
        {"    "}<span style={{ color: "#8B5CF6" }}>val</span> apiKey = System.getenv(<span style={{ color: "#c3e88d" }}>"OPENAI_API_KEY"</span>){"\n"}
        {"        "}?: <span style={{ color: "#8B5CF6" }}>throw</span> RuntimeException(<span style={{ color: "#c3e88d" }}>"OPENAI_API_KEY not set"</span>){"\n\n"}
        
        {"    "}<span style={{ color: "#8B5CF6" }}>val</span> messagesJson = messages.map {"{"} msg {"->"}{"\n"}
        {"        "}mapOf(<span style={{ color: "#c3e88d" }}>"role"</span> to msg.role, <span style={{ color: "#c3e88d" }}>"content"</span> to msg.content){"\n"}
        {"    "}{"}"}{"\n\n"}
        
        {"    "}<span style={{ color: "#8B5CF6" }}>val</span> body = gson.toJson(mapOf({"\n"}
        {"        "}<span style={{ color: "#c3e88d" }}>"model"</span> to <span style={{ color: "#c3e88d" }}>"gpt-4o"</span>,{"\n"}
        {"        "}<span style={{ color: "#c3e88d" }}>"messages"</span> to messagesJson{"\n"}
        {"    "})){"\n\n"}
        
        {"    "}<span style={{ color: "#8B5CF6" }}>val</span> request = HttpRequest.newBuilder(){"\n"}
        {"        "}.uri(URI.create(<span style={{ color: "#c3e88d" }}>"https://api.openai.com/v1/chat/completions"</span>)){"\n"}
        {"        "}.header(<span style={{ color: "#c3e88d" }}>"Content-Type"</span>, <span style={{ color: "#c3e88d" }}>"application/json"</span>){"\n"}
        {"        "}.header(<span style={{ color: "#c3e88d" }}>"Authorization"</span>, <span style={{ color: "#c3e88d" }}>"Bearer $apiKey"</span>){"\n"}
        {"        "}.POST(HttpRequest.BodyPublishers.ofString(body)){"\n"}
        {"        "}.build(){"\n\n"}
        
        {"    "}<span style={{ color: "#8B5CF6" }}>val</span> response = httpClient.send(request, HttpResponse.BodyHandlers.ofString()){"\n"}
        {"    "}<span style={{ color: "#8B5CF6" }}>val</span> json = gson.fromJson(response.body(), JsonObject::class.java){"\n\n"}
        
        {"    "}<span style={{ color: "#8B5CF6" }}>return</span> json{"\n"}
        {"        "}.getAsJsonArray(<span style={{ color: "#c3e88d" }}>"choices"</span>){"\n"}
        {"        "}.get(0).asJsonObject{"\n"}
        {"        "}.getAsJsonObject(<span style={{ color: "#c3e88d" }}>"message"</span>){"\n"}
        {"        "}.get(<span style={{ color: "#c3e88d" }}>"content"</span>).asString{"\n"}
        {"}"}{"\n\n"}
        
        <span style={{ color: "#8B5CF6" }}>fun</span> main() {"{"}{"\n"}
        {"    "}bindufy({"\n"}
        {"        "}config = mapOf({"\n"}
        {"            "}<span style={{ color: "#c3e88d" }}>"author"</span> to <span style={{ color: "#c3e88d" }}>"dev@example.com"</span>,{"\n"}
        {"            "}<span style={{ color: "#c3e88d" }}>"name"</span> to <span style={{ color: "#c3e88d" }}>"kotlin-openai-agent"</span>,{"\n"}
        {"            "}<span style={{ color: "#c3e88d" }}>"description"</span> to <span style={{ color: "#c3e88d" }}>"An assistant built with Kotlin and Bindu"</span>,{"\n"}
        {"            "}<span style={{ color: "#c3e88d" }}>"version"</span> to <span style={{ color: "#c3e88d" }}>"1.0.0"</span>,{"\n"}
        {"            "}<span style={{ color: "#c3e88d" }}>"deployment"</span> to mapOf({"\n"}
        {"                "}<span style={{ color: "#c3e88d" }}>"url"</span> to <span style={{ color: "#c3e88d" }}>"http://localhost:3773"</span>,{"\n"}
        {"                "}<span style={{ color: "#c3e88d" }}>"expose"</span> to <span style={{ color: "#8B5CF6" }}>true</span>,{"\n"}
        {"                "}<span style={{ color: "#c3e88d" }}>"cors_origins"</span> to listOf(<span style={{ color: "#c3e88d" }}>"http://localhost:5173"</span>){"\n"}
        {"            "}),{"\n"}
        {"        "}),{"\n"}
        {"        "}skills = listOf(<span style={{ color: "#c3e88d" }}>"skills/kotlin-openai-skill"</span>){"\n"}
        {"    "}) {"{"} messages {"->"}{"\n"}
        {"        "}<span style={{ color: "#6b7280" }}>// Call OpenAI and return the response</span>{"\n"}
        {"        "}callOpenAI(messages){"\n"}
        {"    "}{"}"}{"\n"}
        {"}"}
      </>
    ),
  }
];

export const CodeTabs = ({ tabs, defaultTab }) => {
  if (!tabs || tabs.length === 0) return null;

  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0].id);
  const currentTab = tabs.find((tab) => tab.id === activeTab) || tabs[0];

  return (
    <div className="w-full overflow-hidden rounded-2xl border border-zinc-200/90 bg-white/90 shadow-[0_10px_40px_rgba(0,0,0,0.08)] backdrop-blur-xl transition-all duration-300 isolate dark:border-white/10 dark:bg-[#0b0b0d] dark:shadow-[0_20px_60px_rgba(0,0,0,0.45)]">
      <div className="relative flex items-center gap-10 border-b border-zinc-200/70 bg-zinc-50/90 px-5 pt-4 dark:border-white/5 dark:bg-[#131316] sm:px-6">
        <div className="mb-3.5 flex shrink-0 items-center gap-2">
          <div className="h-3 w-3 rounded-full bg-[#FF5F57]" />
          <div className="h-3 w-3 rounded-full bg-[#FEBC2E]" />
          <div className="h-3 w-3 rounded-full bg-[#28C840]" />
        </div>
        <div className="flex min-w-0 flex-1 items-center gap-3 overflow-x-auto pb-3 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
          {tabs.map((tab) => {
            const isActive = activeTab === tab.id;
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`group relative flex shrink-0 items-center justify-center overflow-hidden rounded-xl px-4 py-2.5 text-[12px] font-medium leading-none tracking-[0.03em] outline-none transition-all duration-300 ease-out sm:text-[13px] ${
                  isActive
                    ? "bg-gradient-to-b from-zinc-900 to-black text-white shadow-[0_8px_24px_rgba(0,0,0,0.18)] ring-1 ring-black/5 dark:from-white dark:to-zinc-200 dark:text-zinc-900 dark:shadow-[0_8px_24px_rgba(255,255,255,0.08)] dark:ring-white/10"
                    : "text-zinc-500 hover:bg-zinc-100/90 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/[0.04] dark:hover:text-zinc-100"
                }`}
              >
                {isActive && (
                  <>
                    <div className="pointer-events-none absolute inset-0 rounded-xl bg-[linear-gradient(to_bottom,rgba(255,255,255,0.12),transparent_45%)] dark:bg-[linear-gradient(to_bottom,rgba(255,255,255,0.35),transparent_50%)]" />
                    <div className="pointer-events-none absolute inset-x-3 top-0 h-px bg-white/40 blur-sm dark:bg-black/20" />
                  </>
                )}
                <span className="relative z-10 flex items-center gap-2 font-[Inter] font-semibold">
                  {tab.label}
                </span>
              </button>
            );
          })}
        </div>
      </div>
      <div className="relative bg-[#0A0A0A]">
        <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
        <div className="max-h-[500px] overflow-auto overscroll-contain [contain:layout_paint] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
          <div className="min-w-max p-5 sm:p-6">
            <pre className="m-0 bg-transparent p-0 font-mono text-[13px] leading-7 text-zinc-200 antialiased sm:text-[14px]">
              <code className="block whitespace-pre">
                { currentTab ? currentTab.code : '' }
              </code>
            </pre>
          </div>
        </div>
      </div>
    </div>
  );
};

<script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js" />

<script
  dangerouslySetInnerHTML={{ __html: `
// Using an interval ensures the script runs only AFTER Lenis loads and React mounts the DOM
const initInterval = setInterval(() => {
if (typeof Lenis !== 'undefined' && document.querySelector('#bindu-core')) {
  clearInterval(initInterval);
  
  const isDesktop = window.matchMedia("(min-width: 1025px)").matches;
  
  if (isDesktop) {
    const lenis = new Lenis({
      lerp: 0.07, 
      normalizeWheel: true,
      wheelMultiplier: 0.9, 
      smoothWheel: true,
    });

    // DOM Elements for Parallax Scaling
    const sec1Content = document.getElementById('section-1-content');
    const sec2Wrapper = document.getElementById('section-2-wrapper');
    const sec2Content = document.getElementById('section-2-content');
    const sec3Wrapper = document.getElementById('section-3-wrapper');
    const sec3Content = document.getElementById('section-3-content');

    // Scroll Event Hook
    lenis.on('scroll', () => {
      // 1. Calculate Section 2 sliding over Section 1
      if (sec2Wrapper && sec1Content) {
        const rect2 = sec2Wrapper.getBoundingClientRect();
        if (rect2.top <= window.innerHeight && rect2.top >= 0) {
          const progress = 1 - (rect2.top / window.innerHeight);
          sec1Content.style.transform = "scale(" + (1 - (progress * 0.08)) + ")";
          sec1Content.style.opacity = 1 - Math.pow(progress, 1.5);
        }
      }

      // 2. Calculate Section 3 sliding over Section 2
      if (sec3Wrapper && sec2Content) {
        const rect3 = sec3Wrapper.getBoundingClientRect();
        if (rect3.top <= window.innerHeight && rect3.top >= 0) {
          const progress = 1 - (rect3.top / window.innerHeight);
          sec2Content.style.transform = "scale(" + (1 - (progress * 0.08)) + ")";
          sec2Content.style.opacity = 1 - Math.pow(progress, 1.5);
        }
      }
    });

    // RAF Loop
    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);
  }
}
}, 100); 

// Clear interval after 5 seconds just in case, to prevent memory leaks
setTimeout(() => clearInterval(initInterval), 5000);
`}}
/>
