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

# Cosmos Developer Documentation

export const ThemeToggle = () => {
  const [mode, setMode] = useState('');
  useEffect(() => {
    for (const m of ['light', 'dark']) {
      const btn = document.querySelector(`[data-testid="mode-switch-${m}"]`);
      if (btn && btn.classList.contains('bg-gray-200')) {
        setMode(m);
        return;
      }
    }
    const stored = localStorage.getItem('isDarkMode');
    if (stored === 'dark' || stored === 'light') {
      setMode(stored);
    } else {
      setMode(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    }
  }, []);
  const handleSwitch = newMode => {
    const mintBtn = document.querySelector(`[data-testid="mode-switch-${newMode}"]`);
    if (mintBtn) {
      mintBtn.click();
    } else {
      const root = document.documentElement;
      if (newMode === 'dark') {
        root.classList.add('dark');
        localStorage.setItem('isDarkMode', 'dark');
      } else if (newMode === 'light') {
        root.classList.remove('dark');
        localStorage.setItem('isDarkMode', 'light');
      }
    }
    setMode(newMode);
  };
  const base = "p-1.5 rounded-lg";
  const active = `${base} bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400`;
  const inactive = `${base} text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400`;
  return <div className="flex items-center gap-2">
      {}
      <button aria-label="Switch to light theme" onClick={() => handleSwitch('light')} className={mode === 'light' ? active : inactive}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" className="size-4">
          <g clipPath="url(#clip0_theme_light)">
            <path d="M8 1.11133V2.00022" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M12.8711 3.12891L12.2427 3.75735" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M14.8889 8H14" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M12.8711 12.8711L12.2427 12.2427" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M8 14.8889V14" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M3.12891 12.8711L3.75735 12.2427" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M1.11133 8H2.00022" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M3.12891 3.12891L3.75735 3.75735" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M8.00043 11.7782C10.0868 11.7782 11.7782 10.0868 11.7782 8.00043C11.7782 5.91402 10.0868 4.22266 8.00043 4.22266C5.91402 4.22266 4.22266 5.91402 4.22266 8.00043C4.22266 10.0868 5.91402 11.7782 8.00043 11.7782Z" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </g>
          <defs><clipPath id="clip0_theme_light"><rect width="16" height="16" fill="white" /></clipPath></defs>
        </svg>
      </button>

      {}
      <button aria-label="Switch to dark theme" onClick={() => handleSwitch('dark')} className={mode === 'dark' ? active : inactive}>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-moon size-4">
          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
        </svg>
      </button>
    </div>;
};

export const MobileMenuDrawer = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const [isAnimating, setIsAnimating] = useState(false);
  useEffect(() => {
    if (isOpen) {
      setIsVisible(true);
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          setIsAnimating(true);
        });
      });
    } else {
      setIsAnimating(false);
      const timer = setTimeout(() => {
        setIsVisible(false);
      }, 400);
      return () => clearTimeout(timer);
    }
  }, [isOpen]);
  return <>
      {}
      <button onClick={() => setIsOpen(true)} className="block lg:hidden text-gray-900 dark:text-white p-2 hover:opacity-70 transition-opacity bg-[#F1F1F1] dark:bg-[#1E1F20] rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="stroke-current">
          <path d="M3 12H21M3 6H21M3 18H21" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>

      {}
      {isVisible && <>
          {}
          <div className="mobile-menu-backdrop" onClick={() => setIsOpen(false)} style={{
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    zIndex: 999,
    opacity: isAnimating ? 1 : 0,
    transition: 'opacity 0.3s ease-in-out'
  }} />

          {}
          <div className="mobile-menu-drawer bg-white dark:bg-[#1a1a1a] text-black dark:text-white" style={{
    position: 'fixed',
    top: 0,
    left: 0,
    bottom: 0,
    width: '100%',
    maxWidth: '100%',
    zIndex: 1000,
    display: 'flex',
    flexDirection: 'column',
    transform: isAnimating ? 'translateX(0)' : 'translateX(-100%)',
    transition: 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
  }}>
            {}
            <div className="border-b border-black/10 dark:border-white/10" style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '24px 36px',
    opacity: isAnimating ? 1 : 0,
    transition: 'opacity 0.3s ease-out 0.05s'
  }}>
              {}
              <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '8px'
  }}>
                <img src="/assets/brand/cosmos-dark.svg" alt="Cosmos" className="h-6 block dark:hidden" />
                <img src="/assets/cosmos.svg" alt="Cosmos" className="h-6 hidden dark:block" />
              </div>

              <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '16px'
  }}>
                {}
                <a href="https://cosmos.network/contact" target="_blank" rel="noopener noreferrer" className="bg-black dark:bg-white text-white dark:text-black hover:bg-black/80 dark:hover:bg-white/90" style={{
    border: 'none',
    borderRadius: '24px',
    padding: '10px 24px',
    fontSize: '14px',
    fontWeight: '500',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    textDecoration: 'none',
    transition: 'background-color 0.2s'
  }}>
                  Contact Us
                  <span style={{
    fontSize: '12px'
  }}>↗</span>
                </a>

                {}
                <button onClick={() => setIsOpen(false)} className="text-black dark:text-white hover:opacity-70" style={{
    backgroundColor: 'transparent',
    border: 'none',
    fontSize: '24px',
    cursor: 'pointer',
    padding: '4px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '32px',
    height: '32px',
    transition: 'opacity 0.2s'
  }}>
                  ✕
                </button>
              </div>
            </div>

            {}
            <nav style={{
    flex: 1,
    padding: '48px 36px'
  }}>
              <ul style={{
    listStyle: 'none',
    padding: 0,
    margin: 0
  }}>
                <li style={{
    marginBottom: '32px',
    opacity: isAnimating ? 1 : 0,
    transform: isAnimating ? 'translateY(0)' : 'translateY(20px)',
    transition: 'opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s'
  }}>
                  <a href="/sdk/latest/learn" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '48px',
    fontWeight: '300',
    display: 'block',
    transition: 'opacity 0.2s'
  }}>
                    Cosmos SDK
                  </a>
                </li>
                <li style={{
    marginBottom: '32px',
    opacity: isAnimating ? 1 : 0,
    transform: isAnimating ? 'translateY(0)' : 'translateY(20px)',
    transition: 'opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.2s'
  }}>
                  <a href="/evm/latest/documentation/overview" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '48px',
    fontWeight: '300',
    display: 'block',
    transition: 'opacity 0.2s'
  }}>
                    Cosmos EVM
                  </a>
                </li>
                <li style={{
    marginBottom: '32px',
    opacity: isAnimating ? 1 : 0,
    transform: isAnimating ? 'translateY(0)' : 'translateY(20px)',
    transition: 'opacity 0.4s ease-out 0.3s, transform 0.4s ease-out 0.3s'
  }}>
                  <a href="/ibc/latest/intro" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '48px',
    fontWeight: '300',
    display: 'block',
    transition: 'opacity 0.2s'
  }}>
                    IBC
                  </a>
                </li>
                <li style={{
    marginBottom: '32px',
    opacity: isAnimating ? 1 : 0,
    transform: isAnimating ? 'translateY(0)' : 'translateY(20px)',
    transition: 'opacity 0.4s ease-out 0.4s, transform 0.4s ease-out 0.4s'
  }}>
                  <a href="/enterprise/overview" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '48px',
    fontWeight: '300',
    display: 'block',
    transition: 'opacity 0.2s'
  }}>
                    Cosmos Enterprise
                  </a>
                </li>
              </ul>
            </nav>

            {}
            <div className="border-t border-black/10 dark:border-white/10" style={{
    padding: '36px',
    display: 'flex',
    gap: '32px',
    flexWrap: 'wrap',
    opacity: isAnimating ? 1 : 0,
    transition: 'opacity 0.4s ease-out 0.5s'
  }}>
              <a href="https://cosmoslabs.io" target="_blank" rel="noopener noreferrer" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '14px',
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    transition: 'opacity 0.2s'
  }}>
                Cosmos Labs
                <span style={{
    fontSize: '12px'
  }}>↗</span>
              </a>
              <a href="https://interchain.io" target="_blank" rel="noopener noreferrer" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '14px',
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    transition: 'opacity 0.2s'
  }}>
                Interchain Foundation
                <span style={{
    fontSize: '12px'
  }}>↗</span>
              </a>
            </div>
          </div>

          {}
          <style jsx>{`
            @media (min-width: 768px) {
              .mobile-menu-drawer {
                max-width: 480px !important;
              }
            }

            @media (max-width: 767px) {
              .mobile-menu-drawer nav ul li {
                margin-bottom: 24px !important;
              }
              .mobile-menu-drawer nav ul li a {
                font-size: 36px !important;
              }
              .mobile-menu-drawer {
                padding-bottom: env(safe-area-inset-bottom);
              }
            }
          `}</style>
        </>}
    </>;
};

export const DocsNavigationDrawer = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const [isAnimating, setIsAnimating] = useState(false);
  useEffect(() => {
    if (isOpen) {
      setIsVisible(true);
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          setIsAnimating(true);
        });
      });
    } else {
      setIsAnimating(false);
      const timer = setTimeout(() => {
        setIsVisible(false);
      }, 400);
      return () => clearTimeout(timer);
    }
  }, [isOpen]);
  return <>
      {}
      <button onClick={() => setIsOpen(true)} className="bg-white dark:bg-[#202020] text-black dark:text-white px-4 md:px-6 py-2.5 md:py-3 rounded-full text-sm md:text-md font-medium hover:bg-white/80 dark:hover:bg-[#303030] hover:[box-shadow:0_0_20px_rgba(255,255,255,0.8)] dark:hover:[box-shadow:0_0_20px_rgba(32,32,32,0.8)] transition-all duration-300 flex items-center gap-2 md:gap-3">
        <span className="whitespace-nowrap">Visit the docs</span>
        <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="fill-black dark: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>
      </button>

      {}
      {isVisible && <>
          {}
          <div className="docs-drawer-backdrop" onClick={() => setIsOpen(false)} style={{
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    zIndex: 999,
    opacity: isAnimating ? 1 : 0,
    transition: 'opacity 0.3s ease-in-out'
  }} />

          {}
          <div className="docs-drawer bg-white dark:bg-[#1a1a1a] text-black dark:text-white" style={{
    position: 'fixed',
    top: 0,
    left: 0,
    bottom: 0,
    width: '100%',
    maxWidth: '100%',
    zIndex: 1000,
    display: 'flex',
    flexDirection: 'column',
    transform: isAnimating ? 'translateX(0)' : 'translateX(-100%)',
    transition: 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
  }}>
            {}
            <div className="border-b border-black/10 dark:border-white/10" style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '24px 36px',
    opacity: isAnimating ? 1 : 0,
    transition: 'opacity 0.3s ease-out 0.05s'
  }}>
              {}
              <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '8px'
  }}>
                <img src="/assets/brand/cosmos-dark.svg" alt="Cosmos" className="h-6 block dark:hidden" />
                <img src="/assets/cosmos.svg" alt="Cosmos" className="h-6 hidden dark:block" />
              </div>

              <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '16px'
  }}>
                {}
                <button className="bg-black dark:bg-white text-white dark:text-black hover:bg-black/80 dark:hover:bg-white/90" style={{
    border: 'none',
    borderRadius: '24px',
    padding: '10px 24px',
    fontSize: '14px',
    fontWeight: '500',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    transition: 'background-color 0.2s'
  }}>
                  Contact Us
                  <span style={{
    fontSize: '12px'
  }}>↗</span>
                </button>

                {}
                <button onClick={() => setIsOpen(false)} className="text-black dark:text-white hover:opacity-70" style={{
    backgroundColor: 'transparent',
    border: 'none',
    fontSize: '24px',
    cursor: 'pointer',
    padding: '4px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '32px',
    height: '32px',
    transition: 'opacity 0.2s'
  }}>
                  ✕
                </button>
              </div>
            </div>

            {}
            <nav style={{
    flex: 1,
    padding: '48px 36px'
  }}>
              <ul style={{
    listStyle: 'none',
    padding: 0,
    margin: 0
  }}>
                <li style={{
    marginBottom: '32px',
    opacity: isAnimating ? 1 : 0,
    transform: isAnimating ? 'translateY(0)' : 'translateY(20px)',
    transition: 'opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s'
  }}>
                  <a href="/sdk" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '48px',
    fontWeight: '300',
    display: 'block',
    transition: 'opacity 0.2s'
  }}>
                    Cosmos SDK
                  </a>
                </li>
                <li style={{
    marginBottom: '32px',
    opacity: isAnimating ? 1 : 0,
    transform: isAnimating ? 'translateY(0)' : 'translateY(20px)',
    transition: 'opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.2s'
  }}>
                  <a href="/evm" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '48px',
    fontWeight: '300',
    display: 'block',
    transition: 'opacity 0.2s'
  }}>
                    Cosmos EVM
                  </a>
                </li>
                <li style={{
    marginBottom: '32px',
    opacity: isAnimating ? 1 : 0,
    transform: isAnimating ? 'translateY(0)' : 'translateY(20px)',
    transition: 'opacity 0.4s ease-out 0.3s, transform 0.4s ease-out 0.3s'
  }}>
                  <a href="/ibc" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '48px',
    fontWeight: '300',
    display: 'block',
    transition: 'opacity 0.2s'
  }}>
                    IBC
                  </a>
                </li>
                <li style={{
    marginBottom: '32px',
    opacity: isAnimating ? 1 : 0,
    transform: isAnimating ? 'translateY(0)' : 'translateY(20px)',
    transition: 'opacity 0.4s ease-out 0.4s, transform 0.4s ease-out 0.4s'
  }}>
                  <a href="/enterprise/overview" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '48px',
    fontWeight: '300',
    display: 'block',
    transition: 'opacity 0.2s'
  }}>
                    Cosmos Enterprise
                  </a>
                </li>
              </ul>
            </nav>

            {}
            <div className="border-t border-black/10 dark:border-white/10" style={{
    padding: '36px',
    display: 'flex',
    gap: '32px',
    flexWrap: 'wrap',
    opacity: isAnimating ? 1 : 0,
    transition: 'opacity 0.4s ease-out 0.5s'
  }}>
              <a href="https://cosmoslabs.io" target="_blank" rel="noopener noreferrer" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '14px',
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    transition: 'opacity 0.2s'
  }}>
                Cosmos Labs
                <span style={{
    fontSize: '12px'
  }}>↗</span>
              </a>
              <a href="https://interchain.io" target="_blank" rel="noopener noreferrer" className="text-black dark:text-white hover:opacity-70" style={{
    textDecoration: 'none',
    fontSize: '14px',
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    transition: 'opacity 0.2s'
  }}>
                Interchain Foundation
                <span style={{
    fontSize: '12px'
  }}>↗</span>
              </a>
            </div>
          </div>

          {}
          <style jsx>{`
            @media (min-width: 768px) {
              .docs-drawer {
                max-width: 480px !important;
              }
            }

            @media (max-width: 767px) {
              .docs-drawer nav ul li {
                margin-bottom: 24px !important;
              }
              .docs-drawer nav ul li a {
                font-size: 36px !important;
              }
              .docs-drawer {
                padding-bottom: env(safe-area-inset-bottom);
              }
            }
          `}</style>
        </>}
    </>;
};

export const DocCardGrid = ({children}) => {
  return <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
      {children}
    </div>;
};

export const DocCard = ({title, description, docsLink, docsLinkText, githubLink, githubLinkText, isHighlighted, links}) => {
  const arrow = <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>;
  return <div className={`
        rounded-[24px] md:rounded-[40px] p-6 md:p-10 lg:p-14
        flex flex-col justify-between h-full
        ${isHighlighted ? 'highlighted-card-bg' : 'bg-white dark:bg-black'}
        ${!isHighlighted && 'hover:bg-[#F5F5F5] dark:hover:bg-[#CFDADC]'}
        border border-black/10
        dark:border-white/10
        transition-all duration-300
        group
      `}>
      <div className="relative z-10 flex flex-col gap-3 md:gap-4 mb-8 md:mb-12">
        <h3 className={`
          ${isHighlighted ? 'text-black' : 'text-gray-900 dark:text-white'}
          ${!isHighlighted && 'group-hover:text-black'}
          text-xl md:text-2xl leading-[1.5] tracking-[0.24px]
          transition-colors duration-300
        `}>
          {title}
        </h3>
        <p className={`
          ${isHighlighted ? 'text-black' : 'text-black/50 dark:text-white/50'}
          ${!isHighlighted && 'group-hover:text-black/60'}
          text-sm md:text-base leading-[1.6] tracking-[0.64px]
          transition-colors duration-300
        `}>
          {description}
        </p>
      </div>

      <div className="relative z-10 flex gap-3 md:gap-4 items-center flex-wrap">
        {links && links.map(({href, label}) => <a key={href} href={href} {...href.startsWith('http') ? {
    target: '_blank',
    rel: 'noopener noreferrer'
  } : {}} className="bg-[#323536] text-white px-4 py-2.5 md:py-3 rounded-full text-sm md:text-md flex items-center gap-2 md:gap-3 hover:bg-[#404243] transition-all duration-300">
            {label}
            {arrow}
          </a>)}
        {docsLink && <a href={docsLink} className="bg-[#323536] text-white px-4 py-2.5 md:py-3 rounded-full text-sm md:text-md flex items-center gap-2 md:gap-3 hover:bg-[#404243] transition-all duration-300">
            {docsLinkText || 'Read the docs'}
            {arrow}
          </a>}
        {githubLink && !isHighlighted && <a href={githubLink} {...githubLink.startsWith('http') ? {
    target: '_blank',
    rel: 'noopener noreferrer'
  } : {}} className="bg-[#323536] text-white px-4 py-2.5 md:py-3 rounded-full text-sm md:text-md flex items-center gap-2 md:gap-3 hover:bg-[#404243] transition-all duration-300">
            {githubLinkText || 'Github'}
            {arrow}
          </a>}
      </div>
    </div>;
};

export const CosmosStackLearn = () => {
  const [selectedTech, setSelectedTech] = useState('Cosmos SDK');
  const TechPill = ({name, icon, isHighlighted = false, onClick}) => {
    return <button onClick={onClick} className={`flex gap-1 md:gap-2 h-8 md:h-14 items-center justify-center px-3 pr-4 md:pr-5 rounded-full transition-all duration-300 cursor-pointer ${isHighlighted ? 'bg-black hover:bg-black/90 dark:bg-[#F1F1F1] dark:hover:bg-white border border-transparent' : 'bg-[#323536]/20 hover:bg-[#323536]/30 dark:bg-[#323536] dark:opacity-70 dark:hover:opacity-100 dark:hover:bg-[#404243] border border-transparent'}`}>
        <div className={`size-7 md:size-8 flex items-center justify-center shrink-0 ${isHighlighted ? 'text-white dark:text-black' : 'text-white'}`}>
          {icon()}
        </div>
        <p className={`text-sm md:text-lg lg:text-xl leading-none tracking-normal ${isHighlighted ? 'text-white dark:text-black' : 'text-white dark:text-[#F1F1F1]'}`} style={{
      fontFeatureSettings: "'ss09' 1"
    }}>
          {name}
        </p>
      </button>;
  };
  const technologies = [{
    name: "Cosmos SDK",
    description: "The Cosmos SDK is a modular, open-source framework for building secure, high-performance distributed ledgers and blockchains. Easily spin up secure blockchains with custom business logic that can natively interoperate with any blockchain via a native integration with the Inter-Blockchain Communication Protocol. Use predefined modules for standard functionality or create custom modules for your use case and compliance requirements, covering permissioning, tokenization, compliance, state management.",
    icon: () => <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 24 17.6187)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 11.2002 20.7935)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 8 20.7935)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 11.2002 14.4062)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 8 14.4062)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 4.7998 17.6187)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 14.3994 17.6187)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 17.5996 20.7935)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 20.7998 20.7935)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 17.5996 14.4062)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 20.7998 14.4062)" fill="currentColor" />
        </svg>
  }, {
    name: "Cosmos EVM",
    description: "Cosmos EVM enables plug-and-play EVM compatibility for Cosmos SDK chains. Run Solidity smart contracts, access Ethereum tooling, and leverage Cosmos modules like IBC within the EVM through precompiles and extensions. Deploy any Ethereum contract or implement new features beyond the standard EVM.",
    icon: () => <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 20.7998 17.6187)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 11.2002 20.7935)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 11.2002 14.4062)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 8 17.6187)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 14.4004 17.6187)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 17.6006 20.7935)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 17.6006 14.4062)" fill="currentColor" />
        </svg>
  }, {
    name: "IBC Protocol",
    description: "The Inter-Blockchain Communication protocol (IBC) is a blockchain interoperability protocol enabling blockchains to safely transfer tokens, messages, and arbitrary data. Secure and flexible, IBC is designed to connect independent blockchains into a single interoperable network with configurable permissioning.",
    icon: () => <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 11.2002 12.7937)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 11.2002 19.2061)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 14.3994 22.406)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 24 12.7937)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 4.7998 12.7937)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 17.5996 12.7937)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 17.5996 19.2061)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 20.7998 15.9937)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 8 15.9937)" fill="currentColor" />
        </svg>
  }, {
    name: "CometBFT",
    description: "CometBFT is the most widely-adopted, battle-tested consensus engine in blockchain. It is a Byzantine Fault Tolerant (BFT) middleware that takes a state transition machine—written in any programming language—and securely replicates it across many machines. Highly performant, CometBFT achieves speeds of up to 10,000 transactions per second (TPS). ",
    icon: () => <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 11.2002 11.2)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 11.2002 17.6123)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 17.6006 24)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 11.2002 24)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 20.7998 14.3999)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 20.7998 20.7876)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 8 14.4124)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 8 20.8)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 17.5996 11.2)" fill="currentColor" />
          <rect width="3.19996" height="3.19996" transform="matrix(1 8.74228e-08 8.74228e-08 -1 17.6006 17.6123)" fill="currentColor" />
        </svg>
  }];
  const selectedTechData = technologies.find(tech => tech.name === selectedTech);
  return <div className="w-full px-8 lg:px-12 lg:py-16">
      <div className="w-full px-8 md:px-12 lg:px-24 py-12 md:py-20 lg:py-28 rounded-[24px] md:rounded-[32px] bg-[#F5F5F5] dark:bg-[#1E1F20]">
        <div className="relative flex flex-col gap-12 md:gap-16 lg:gap-20 items-start justify-center">
          <div className="flex flex-col gap-12 items-start justify-start w-full">
            <p className="text-black/70 dark:text-[#CFDADC] text-md leading-relaxed tracking-wide" style={{
    fontFeatureSettings: "'ss09' 1"
  }}>
              Learn More about the Cosmos Stack
            </p>

            <div className="flex gap-2 lg:gap-2 items-start flex-wrap justify-start w-full">
              {technologies.map((tech, index) => <TechPill key={index} name={tech.name} icon={tech.icon} isHighlighted={selectedTech === tech.name} onClick={() => setSelectedTech(tech.name)} />)}
            </div>
          </div>

          <p className="text-black/70 dark:text-[#CFDADC] text-md lg:text-lg leading-relaxed tracking-wide w-full whitespace-pre-wrap transition-opacity duration-300" style={{
    fontFeatureSettings: "'ss09' 1, 'ss12' 1"
  }}>
            {selectedTechData?.description}
          </p>
        </div>
      </div>
    </div>;
};

export const CosmosStackDiagram = () => {
  return <div className="relative w-full rounded-[24px] md:rounded-[32px] overflow-hidden">
      {}
      <img src="/assets/public/banner.png" alt="Cosmos Banner" className="absolute inset-0 w-full h-full object-cover" />

      {}
      <div className="relative flex flex-col items-center justify-center w-full px-4 py-32 md:py-28">
      {}
      <div className="bg-black border border-solid border-white/5 flex flex-col gap-5 items-center justify-center p-4 md:p-7 rounded-[24px] w-full max-w-[721px]">
        <div className="flex flex-col-reverse md:flex-row gap-5 items-center px-0 md:px-4 w-full">
          <div className="flex-1 flex flex-col items-center md:items-start justify-center text-center md:text-left">
            <p className="text-lg md:text-2xl text-white leading-tight">
              Interoperate with any chain
            </p>
          </div>
          <div className="bg-[#323536] flex flex-col items-center justify-center px-3 py-1 md:px-5 md:py-2 rounded-full">
            <p className="text-[11px] md:text-[13px] text-white/60 tracking-[1.5px] uppercase font-medium leading-tight font-mono">
              INTEROPERABILITY
            </p>
          </div>
        </div>
        <div className="flex flex-col md:flex-row gap-3 items-start justify-center w-full">
          <div className="bg-black border border-solid border-[#cfdadc]/30 flex-1 rounded-[20px] w-full">
            <div className="flex flex-col items-center justify-center px-5 py-4">
              <p className="text-base md:text-xl text-white text-center tracking-wide">
                IBC
              </p>
            </div>
          </div>
          <div className="bg-black border border-solid border-[#cfdadc]/30 flex-1 rounded-[20px] w-full">
            <div className="flex flex-col items-center justify-center px-5 py-4">
              <p className="text-base md:text-xl text-white text-center tracking-wide">
                Relayer
              </p>
            </div>
          </div>
        </div>
      </div>

      {}
      <div className="bg-[#F1F1F1] dark:bg-[#F1F1F1] h-[29px] w-[5px]" />

      {}
      <div className="bg-black border border-solid border-white/5 flex flex-col gap-7 items-center md:items-start p-4 md:p-6 rounded-[24px] w-full max-w-[721px]">
        <div className="flex flex-col-reverse md:flex-row gap-5 md:gap-7 items-center md:items-start px-0 md:px-4 w-full">
          <div className="flex-1 flex flex-col gap-1 items-center md:items-start justify-center text-center md:text-left">
            <p className="text-lg md:text-2xl text-white leading-tight">
              Cosmos SDK
            </p>
            <p className="text-sm md:text-base text-[#cfdadc] opacity-60 tracking-wide">
              Create purpose-built blockchains
            </p>
          </div>
          <div className="bg-[#323536] flex flex-col items-center justify-center px-3 py-1 md:px-5 md:py-2 rounded-full md:h-[40px]">
            <p className="text-[11px] md:text-[13px] text-white/60 tracking-[1.5px] uppercase font-medium leading-tight font-mono">
              Business Logic
            </p>
          </div>
        </div>
        <div className="bg-black border border-solid border-[#cfdadc]/30 flex flex-col gap-1 items-center justify-center px-5 py-4 rounded-[20px] w-full text-center">
          <p className="text-base md:text-xl text-white tracking-wide">
            Cosmos EVM
          </p>
          <p className="text-sm md:text-base text-[#cfdadc] opacity-60 tracking-wide">
            Run Ethereum-compatible smart contracts
          </p>
        </div>
      </div>

      {}
      <div className="bg-[#F1F1F1] dark:bg-[#F1F1F1] h-[29px] w-[5px]" />

      {}
      <div className="bg-black border border-solid border-white/5 flex flex-col items-center md:items-end p-4 md:p-6 rounded-[24px] w-full max-w-[721px]">
        <div className="flex flex-col-reverse md:flex-row gap-5 md:gap-7 items-center md:items-start md:justify-end px-0 md:px-4 w-full">
          <div className="flex-1 flex flex-col gap-1 items-center md:items-start justify-center text-center md:text-left">
            <p className="text-lg md:text-2xl text-white leading-tight">
              Comet BFT
            </p>
            <p className="text-sm md:text-base text-[#cfdadc] opacity-60 tracking-wide">
              Secure consensus, fast finality
            </p>
          </div>
          <div className="bg-[#323536] flex flex-col items-center justify-center px-3 py-1 md:px-5 md:py-2 rounded-full md:h-[40px]">
            <p className="text-[11px] md:text-[13px] text-white/60 tracking-[1.5px] uppercase font-medium leading-tight font-mono">
              CONSENSUS
            </p>
          </div>
        </div>
      </div>
    </div>
    </div>;
};

<div id="custom-index-content">
  <div className="bg-white dark:bg-black">
    <div className="max-w-[1920px] mx-auto flex items-center justify-between px-6 lg:px-16 w-full h-24 md:h-28 lg:h-32">
      <div className="flex items-center max-w-[136.8px]">
        {/* Desktop logos */}

        <div className="hidden md:block">
          <img src="https://mintcdn.com/cosmos-docs/QQRcm34voxlHZJJD/assets/brand/cosmos-wordmark-dark.svg?fit=max&auto=format&n=QQRcm34voxlHZJJD&q=85&s=cd248dfba0e2e05e30786f2bb3f64fe9" alt="Cosmos" className="h-6 block dark:hidden" noZoom width="570" height="100" data-path="assets/brand/cosmos-wordmark-dark.svg" />

          <img src="https://mintcdn.com/cosmos-docs/QQRcm34voxlHZJJD/assets/brand/cosmos-wordmark.svg?fit=max&auto=format&n=QQRcm34voxlHZJJD&q=85&s=bec1c5143607bae16714a74214e59936" alt="Cosmos" className="h-6 hidden dark:block" noZoom width="570" height="100" data-path="assets/brand/cosmos-wordmark.svg" />
        </div>

        {/* Mobile logos */}

        <div className="block md:hidden">
          <img src="https://mintcdn.com/cosmos-docs/QQRcm34voxlHZJJD/assets/brand/cosmos-dark.svg?fit=max&auto=format&n=QQRcm34voxlHZJJD&q=85&s=84a9ac891f12ecddec2f5bbc50774eb1" alt="Cosmos" className="h-8 block dark:hidden" noZoom width="102" height="100" data-path="assets/brand/cosmos-dark.svg" />

          <img src="https://mintcdn.com/cosmos-docs/QQRcm34voxlHZJJD/assets/brand/cosmos.svg?fit=max&auto=format&n=QQRcm34voxlHZJJD&q=85&s=894cf1378c2e13292b5729f71ffcdfa3" alt="Cosmos" className="h-8 hidden dark:block" noZoom width="102" height="100" data-path="assets/brand/cosmos.svg" />
        </div>
      </div>

      <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">
        <ThemeToggle />

        <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>
  </div>

  <div className="relative w-full h-[1000px] overflow-hidden">
    {/* Background Image */}

    <img src="https://mintcdn.com/cosmos-docs/nQeDgVU6taTlbo-c/assets/public/hero-banner.png?fit=max&auto=format&n=nQeDgVU6taTlbo-c&q=85&s=ed0d203d740165f8ba6aa8d979c75798" alt="" className="w-full h-full object-cover object-center" width="1200" height="1200" data-path="assets/public/hero-banner.png" />

    {/* Color Overlay */}

    <div className="absolute inset-0 bg-[#F1F1F1]/95 dark:bg-black/95" />

    {/* 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>

  <div className="relative w-full -mt-[1000px] flex flex-col">
    {/* Hero Text and Buttons */}

    <div className="flex-1 flex flex-col gap-6 md:gap-8 items-center justify-center px-8 py-12 md:py-16 lg:py-20">
      <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight text-center text-black dark:text-white w-full max-w-4xl">
        Cosmos Developer Documentation
      </h1>

      <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="Start Building"
          description="New to Cosmos? Start with the concepts, build a chain, or choose your own path."
          links={[
        { href: "/sdk/latest/learn/intro/overview", label: "Learn" },
        { href: "/sdk/latest/tutorials/example/00-overview", label: "Build a chain" },
        { href: "/sdk/latest/learn/start-here", label: "Choose a path" },
      ]}
        />

        <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 Enterprise" description="Enterprise-grade software, infrastructure, and support for Cosmos blockchains." docsLink="/enterprise/overview" isHighlighted={true} />

        <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="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" />
      </DocCardGrid>
    </div>
  </div>

  <div className="max-w-[1920px] mx-auto bg-[#F1F1F1] dark:bg-black">
    {/* 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>

  <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"> </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"> </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>
</div>