Skip to content

index.mdx

Latest commit

 

History

History
255 lines (235 loc) · 12 KB

index.mdx

File metadata and controls

255 lines (235 loc) · 12 KB
title Cosmos Stack Developer Documentation
mode custom

import { CosmosStackDiagram } from '/snippets/cosmos-stack-diagram.jsx'; import { CosmosStackLearn } from '/snippets/cosmos-stack-learn.jsx'; import { DocCard, DocCardGrid } from '/snippets/doc-card.jsx'; import { DocsNavigationDrawer } from '/snippets/docs-navigation-drawer.jsx'; import { MobileMenuDrawer } from '/snippets/mobile-menu-drawer.jsx';

{/* Header */}
{/* Desktop logos */}
Cosmos Cosmos
{/* Mobile logos */}
Cosmos Cosmos 
  <div id="top-nav-links" className="hidden lg:flex gap-3 items-center text-md">
    <a
      href="/sdk/latest/learn"
      className="text-gray-900 dark:text-white px-5 py-2.5 hover:[text-shadow:0_0_8px_rgba(255,255,255,0.8)] transition-all duration-300"
    >
      Cosmos SDK
    </a>
    <a
      href="/evm/latest/documentation/overview"
      className="text-gray-900 dark:text-white px-5 py-2.5 hover:[text-shadow:0_0_8px_rgba(255,255,255,0.8)] transition-all duration-300"
    >
      Cosmos EVM
    </a>
    <a
      href="/ibc/latest/intro"
      className="text-gray-900 dark:text-white px-5 py-2.5 hover:[text-shadow:0_0_8px_rgba(255,255,255,0.8)] transition-all duration-300"
    >
      IBC
    </a>
    <a
      href="/enterprise/overview"
      className="text-gray-900 dark:text-white px-5 py-2.5 hover:[text-shadow:0_0_8px_rgba(255,255,255,0.8)] transition-all duration-300"
    >
      Cosmos Enterprise
    </a>
  </div>

  <div className="flex items-center gap-3">

    <a
      href="https://cosmos.network/contact"
      target="_blank"
      rel="noopener noreferrer"
      className="bg-black dark:bg-white text-white dark:text-black px-4 md:px-6 py-2.5 md:py-3 rounded-full text-sm md:text-md font-medium hover:bg-black/80 dark:hover:bg-white/90 hover:[box-shadow:0_0_20px_rgba(0,0,0,0.3)] dark:hover:[box-shadow:0_0_20px_rgba(255,255,255,0.5)] transition-all duration-300 flex items-center gap-2 md:gap-3"
    >
      <span className="whitespace-nowrap">Talk to an expert</span>
      <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="fill-white dark:fill-black shrink-0">
        <path d="M4.67999 8.91512L4.67999 4.45715L9.36087 4.45715V8.91513L4.67999 8.91512Z" fill="currentColor"/>
        <path d="M0 13.3743L6.13823e-07 8.91633L4.68087 8.91633L4.68087 13.3743L0 13.3743Z" fill="currentColor"/>
        <path d="M0 4.45798L6.13823e-07 0L4.68087 5.84593e-07L4.68087 4.45798L0 4.45798Z" fill="currentColor"/>
      </svg>
    </a>
    <MobileMenuDrawer />
  </div>
</div>

{/* Background Image Section */}

{/* Background Image */} 
{/* Color Overlay */}
<div className='absolute inset-0 bg-[#F1F1F1]/95 dark:bg-black/95'></div>

{/* Bottom Gradient */}
<div className='absolute bottom-0 left-0 right-0 h-24 md:h-32 bg-gradient-to-b from-transparent to-[#F1F1F1] dark:to-[#000]'></div>

{/* Hero Content Section */}

{/* Hero Text and Buttons */}

Cosmos Stack Developer Documentation 

  <p className='text-[rgba(0,0,0,0.60)] dark:text-[rgba(255,255,255,0.50)] text-base sm:text-lg md:text-xl lg:text-2xl text-center max-w-3xl'>
    The most widely adopted, battle-tested Layer 1 blockchain stack, trusted by 200+ chains live in production.
  </p>
</div>

{/* Documentation Cards Section */}
<div className='w-full px-4 md:px-8 lg:px-12 pb-12 md:pb-16 max-w-[1920px] mx-auto'>
  <DocCardGrid>
    <DocCard
      title="Cosmos SDK"
      description="Modular framework for building secure, high-performance blockchains."
      docsLink="/sdk/latest/learn"
      githubLink="https://github.com/cosmos/cosmos-sdk"
    />
    <DocCard
      title="Cosmos EVM"
      description="EVM compatibility layer with built-in Solidity support."
      docsLink="/evm/latest/documentation/overview"
      githubLink="https://github.com/cosmos/evm"
    />
    <DocCard
      title="Cosmos Enterprise"
      description="Enterprise-grade software, infrastructure, and support for Cosmos blockchains."
      docsLink="/enterprise/overview"
      isHighlighted={true}
    />
    <DocCard
      title="Inter-Blockchain Communication Protocol"
      description="Protocol for secure, fast inter-blockchain communication."
      docsLink="/ibc/latest/intro"
      githubLink="https://github.com/cosmos/ibc-go"
    />
    <DocCard
      title="CometBFT"
      description="Byzantine Fault Tolerant consensus with instant finality that processes 10,000+ transactions per second."
      docsLink="/cometbft/latest/docs/README"
      githubLink="https://github.com/cometbft/cometbft"
    />
   <DocCard
      title="Skip.Go API"
      description="API for building seamless cross-chain experiences."
      docsLink="/skip-go/general/getting-started"
      githubLink="https://github.com/skip-mev/skip-go"
    />
  </DocCardGrid>
</div>

{/* Banner */}

{/* Cosmos Stack Diagram */}
<div className='w-full px-4 md:px-8 lg:px-12 py-12 md:py-16'>
  <CosmosStackDiagram />
</div>

{/* Learn More about the Cosmos Stack */}
<CosmosStackLearn />
{/* How it works & Fast and Reliable sections */}
<div className='w-full px-8 lg:px-16 py-16 md:py-20 lg:py-24 dark:bg-black'>
  <div className='max-w-[1920px] mx-auto flex flex-col gap-16 md:gap-24 lg:gap-32'>
    {/* How it works */}
    <div className='flex flex-col lg:flex-row gap-5 md:gap-8 lg:gap-5 items-start w-full'>
      <div className='flex flex-col items-start justify-center lg:pl-12 xl:pl-24 2xl:pl-36 lg:pr-0 lg:w-[60%] xl:w-[50%] shrink-0'>
        <p className='text-black/60 dark:text-[#CFDADC] text-xl md:text-[24px] leading-tight opacity-70 w-full whitespace-pre-wrap' style={{ fontFeatureSettings: "'ss09' 1" }}>
          How it works
        </p>
      </div>
      <p className='text-black/80 dark:text-[#F1F1F1] text-base md:text-lg lg:text-xl xl:text-2xl leading-relaxed tracking-wide flex-1 whitespace-pre-wrap' style={{ fontFeatureSettings: "'ss09' 1" }}>
        The stack is modular. Leverage pre-built components or integrate custom features for your specific use case, from consensus mechanisms to governance and compliance.
      </p>
    </div>

    {/* Fast and Reliable */}
    <div className='flex flex-col lg:flex-row gap-5 md:gap-8 lg:gap-5 items-start w-full'>
      <div className='flex flex-col items-start lg:pl-12 xl:pl-24 2xl:pl-36 lg:pr-0 lg:w-[60%] xl:w-[50%] shrink-0'>
        <p className='text-black/60 dark:text-[#CFDADC] text-xl md:text-[24px] leading-tight opacity-70 w-full whitespace-pre-wrap' style={{ fontFeatureSettings: "'ss09' 1" }}>
          Fast and Reliable
        </p>
      </div>
      <div className='flex flex-col gap-8 md:gap-12 lg:gap-16 flex-1'>
        <p className='text-black/80 dark:text-[#F1F1F1] text-base md:text-lg lg:text-xl xl:text-2xl leading-relaxed tracking-wide whitespace-pre-wrap' style={{ fontFeatureSettings: "'ss09' 1" }}>
          Performant, customizable, and EVM-compatible, the Cosmos stack offers engineers full control of their blockchain infrastructure and implementation. Its stable and secure codebase enables blockchains to achieve up to 10,000 transactions per second.
        </p>
        <div>
          <a
            href="https://cosmos.network/contact"
            target="_blank"
            rel="noopener noreferrer"
            className="bg-black dark:bg-[#323536] text-white px-4 py-2.5 md:py-3 rounded-full text-sm md:text-md font-normal hover:bg-black/80 dark:hover:bg-[#404243] transition-all duration-300 flex items-center gap-2 md:gap-3 w-fit"
          >
            <span className="whitespace-nowrap">Contact Us to Discuss Licensing</span>
            <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="fill-white shrink-0">
              <path d="M4.67999 8.91512L4.67999 4.45715L9.36087 4.45715V8.91513L4.67999 8.91512Z" fill="currentColor"/>
              <path d="M0 13.3743L6.13823e-07 8.91633L4.68087 8.91633L4.68087 13.3743L0 13.3743Z" fill="currentColor"/>
              <path d="M0 4.45798L6.13823e-07 0L4.68087 5.84593e-07L4.68087 4.45798L0 4.45798Z" fill="currentColor"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

 </div>
{/* Maintainers and Contributors */}
 <div className='w-full px-8 lg:px-16 xl:px-32 2xl:px-60 py-16 md:py-20 lg:py-28 bg-white dark:bg-[#1e1f20]'>
  <div className='max-w-[1920px] mx-auto'>

    <div className='flex flex-col gap-8 md:gap-10 lg:gap-12 max-w-4xl'>
      <p className='text-black dark:text-white text-3xl md:text-[32px] leading-tight w-full' style={{ fontFeatureSettings: "'ss09' 1" }}>
        Maintainers and Contributors
      </p>

      <div className='text-black/70 dark:text-[#CFDADC] text-base md:text-lg lg:text-xl leading-relaxed tracking-wide opacity-70 w-full' style={{ fontFeatureSettings: "'ss09' 1" }}>
        <p className='mb-0'>Cosmos Labs maintains the core components of the stack: Cosmos SDK, CometBFT, IBC, Cosmos EVM, and various developer tools and frameworks. In addition to developing and maintaining the Cosmos Stack, Cosmos Labs provides advisory and engineering services for blockchain solutions.</p>
        <p className='mb-0'>&nbsp;</p>
        <p className='mb-0'>Cosmos Labs is a wholly-owned subsidiary of the Interchain Foundation, the Swiss nonprofit responsible for treasury management, funding public goods, and supporting governance for Cosmos.</p>
        <p className='mb-0'>&nbsp;</p>
        <p>The Cosmos Stack is supported by a global community of open-source contributors.</p>
      </div>

      <a
        href="https://cosmos.network/contact"
        target="_blank"
        rel="noopener noreferrer"
        className='text-black dark:text-white text-base md:text-lg lg:text-xl leading-relaxed tracking-wide underline decoration-solid w-full hover:opacity-80 transition-opacity duration-300'
        style={{ fontFeatureSettings: "'ss09' 1" }}
      >
        Get in Touch with Cosmos Labs
      </a>
    </div>
  </div>
</div>