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

# LayerZero Sample Projects

> Explore sample projects built with LayerZero. Find OApp, OFT, and crosschain examples to accelerate your omnichain development. Build omnichain tokens with ...

export const SampleProjectsGallery = () => {
  const {useState, useEffect, useMemo, useRef} = React;
  const [isDark, setIsDark] = useState(true);
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const checkTheme = () => setIsDark(document.documentElement.classList.contains('dark'));
    checkTheme();
    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => observer.disconnect();
  }, []);
  const colors = useMemo(() => ({
    bg: isDark ? '#1a1a1d' : '#ffffff',
    bgSecondary: isDark ? '#27272a' : '#f4f4f5',
    border: isDark ? '#3f3f46' : '#e4e4e7',
    text: isDark ? '#fafafa' : '#18181b',
    textSecondary: isDark ? '#a1a1aa' : '#71717a',
    textMuted: isDark ? '#71717a' : '#a1a1aa',
    accent: '#7a3dfc'
  }), [isDark]);
  const [hovered, setHovered] = useState(null);
  const PRODUCT_CONFIG = {
    OApp: {
      name: 'OApp',
      displayName: 'Omnichain Application',
      color: '#0057ff',
      hoverColor: '#0048d9',
      link: '/v2/developers/evm/oapp/overview'
    },
    OFT: {
      name: 'OFT',
      displayName: 'Omnichain Fungible Token',
      color: '#00e599',
      hoverColor: '#00d084',
      link: '/v2/developers/evm/oft/quickstart'
    },
    ONFT: {
      name: 'ONFT',
      displayName: 'Omnichain Non-Fungible Token',
      color: '#f39c12',
      hoverColor: '#e67e22',
      link: '/v2/developers/evm/onft/quickstart'
    },
    lzRead: {
      name: 'lzRead',
      displayName: 'LayerZero Read',
      color: '#8e44ad',
      hoverColor: '#7c3a96',
      link: '/v2/developers/evm/lzread/overview'
    },
    Composer: {
      name: 'Composer',
      displayName: 'Composer',
      color: '#ff6f61',
      hoverColor: '#e85a47',
      link: '/v2/developers/evm/composer/overview'
    }
  };
  const PROJECTS = [{
    title: 'Push Messages to EVM',
    description: 'Use OApp to push messages from your contract to other EVM networks',
    chain: [{
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Solidity'],
    product: ['OApp'],
    github: 'https://github.com/LayerZero-Labs/devtools/tree/main/examples/oapp/README.md'
  }, {
    title: 'Pull Messages from EVM',
    description: 'Use lzRead to pull messages from other EVM networks to your contract',
    chain: [{
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Solidity'],
    product: ['lzRead'],
    github: 'https://github.com/LayerZero-Labs/devtools/tree/main/examples/oapp-read/README.md'
  }, {
    title: 'Push Messages to Solana',
    description: 'Use OApp to push messages from your contract to Solana networks',
    chain: [{
      key: 'solana',
      label: 'Solana'
    }, {
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Rust', 'Solidity'],
    product: ['OApp'],
    github: 'https://github.com/LayerZero-Labs/devtools/tree/main/examples/oapp-solana/README.md'
  }, {
    title: 'Push Messages to Aptos',
    description: 'Use OApp to push messages from your contract to Aptos-Move networks',
    chain: [{
      key: 'aptos',
      label: 'Aptos'
    }, {
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Move', 'Solidity'],
    product: ['OApp'],
    github: 'https://github.com/LayerZero-Labs/devtools/tree/main/examples/oapp-aptos-move'
  }, {
    title: 'Transfer ERC20 tokens from EVM',
    description: 'Use OFT to transfer ERC20 tokens between EVM networks',
    chain: [{
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Solidity'],
    product: ['OFT'],
    github: 'https://github.com/LayerZero-Labs/devtools/tree/main/examples/oft/README.md'
  }, {
    title: 'Transfer SPL tokens from Solana',
    description: 'Use OFT to transfer SPL tokens between Solana and EVM',
    chain: [{
      key: 'solana',
      label: 'Solana'
    }, {
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Rust', 'Solidity'],
    product: ['OFT'],
    github: 'https://github.com/LayerZero-Labs/devtools/tree/main/examples/oft-solana/README.md'
  }, {
    title: 'Transfer Fungible Assets (FA) from Aptos',
    description: 'Use OFT to transfer Fungible Assets (FA) between Aptos and EVM',
    chain: [{
      key: 'aptos',
      label: 'Aptos'
    }, {
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Move', 'Solidity'],
    product: ['OFT'],
    github: 'https://github.com/LayerZero-Labs/devtools/tree/main/examples/oapp-aptos/README.md'
  }, {
    title: 'Transfer ERC721 NFTs from EVM',
    description: 'Use ONFT to transfer ERC721 NFTs to EVM',
    chain: [{
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Solidity'],
    product: ['ONFT'],
    github: 'https://github.com/LayerZero-Labs/devtools/blob/main/examples/onft721/README.md'
  }, {
    title: 'Transfer fungible tokens to Hyperliquid',
    description: 'Use OFT to transfer fungible tokens to HyperEVM and HyperCore',
    chain: [{
      key: 'hyperliquid',
      label: 'Hyperliquid'
    }, {
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Solidity'],
    product: ['OFT', 'Composer'],
    github: 'https://github.com/LayerZero-Labs/devtools/blob/main/examples/oft-hyperliquid/README.md'
  }, {
    title: 'Transfer an existing ERC20 using Minter/Burner roles',
    description: 'Use OFT to transfer an existing ERC20 by giving Minter/Burner roles to the OFT contract',
    chain: [{
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Solidity'],
    product: ['OFT'],
    github: 'https://github.com/LayerZero-Labs/devtools/blob/main/examples/mint-burn-oft-adapter/README.md'
  }, {
    title: "Transfer an EVM chain's native currency for use on another network",
    description: "Use OFT to transfer an EVM chain's native currency for use on another network",
    chain: [{
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Solidity'],
    product: ['OFT'],
    github: 'https://github.com/LayerZero-Labs/devtools/blob/main/examples/native-oft-adapter/README.md'
  }, {
    title: 'Pull from any view/pure function on another EVM chain',
    description: 'Use lzRead to pull data from another EVM chain',
    chain: [{
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Solidity'],
    product: ['lzRead'],
    github: 'https://github.com/LayerZero-Labs/devtools/blob/main/examples/view-pure-read/README.md'
  }, {
    title: 'Pull Uniswap V3 pool data from multiple EVM chains',
    description: 'Use lzRead to pull Uniswap V3 pool data from multiple EVM chains',
    chain: [{
      key: 'ethereum',
      label: 'Ethereum'
    }],
    language: ['Solidity'],
    product: ['lzRead'],
    github: 'https://github.com/LayerZero-Labs/devtools/blob/main/examples/uniswap-read/README.md'
  }];
  const uniqueProducts = useMemo(() => Array.from(new Set(PROJECTS.flatMap(p => p.product))), []);
  const uniqueChains = useMemo(() => Array.from(new Set(PROJECTS.flatMap(p => p.chain.map(c => c.key)))), []);
  const chainKeyToLabel = useMemo(() => Object.fromEntries(PROJECTS.flatMap(p => p.chain.map(c => [c.key, c.label]))), []);
  const [search, setSearch] = useState('');
  const [selectedProduct, setSelectedProduct] = useState('');
  const [selectedChain, setSelectedChain] = useState('');
  const clearAllFilters = () => {
    setSelectedProduct('');
    setSelectedChain('');
    setSearch('');
  };
  const [isStandardOpen, setIsStandardOpen] = useState(false);
  const standardDropdownRef = useRef(null);
  const [isVMOpen, setIsVMOpen] = useState(false);
  const vmDropdownRef = useRef(null);
  useEffect(() => {
    const handleClickOutside = event => {
      if (standardDropdownRef.current && !standardDropdownRef.current.contains(event.target)) {
        setIsStandardOpen(false);
      }
      if (vmDropdownRef.current && !vmDropdownRef.current.contains(event.target)) {
        setIsVMOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);
  const filtered = useMemo(() => {
    return PROJECTS.filter(p => {
      const searchTerms = search.toLowerCase().split(' ').filter(term => term.length > 0);
      const searchableText = [p.title, p.description, ...p.chain.map(c => c.label), ...p.language, ...p.product, ...p.product.map(prod => PRODUCT_CONFIG[prod]?.displayName || prod)].join(' ').toLowerCase();
      const matchesSearch = searchTerms.length === 0 || searchTerms.every(term => searchableText.includes(term));
      const matchesProduct = !selectedProduct || p.product.includes(selectedProduct);
      const projectChainKeys = p.chain.map(c => c.key);
      const matchesChain = !selectedChain || projectChainKeys.includes(selectedChain);
      return matchesSearch && matchesProduct && matchesChain;
    });
  }, [search, selectedProduct, selectedChain]);
  const hasActiveFilters = selectedProduct || selectedChain || search.length > 0;
  const getNetworkIcon = chainKey => {
    return 'https://icons-ckg.pages.dev/lz-scan/networks/' + chainKey + '.svg';
  };
  const ExternalLinkIcon = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
      <polyline points="15,3 21,3 21,9" />
      <line x1="10" y1="14" x2="21" y2="3" />
    </svg>;
  return <div style={{
    maxWidth: '800px',
    margin: '0 auto',
    paddingTop: '32px'
  }}>
      {}
      <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '16px',
    marginBottom: '24px',
    position: 'relative',
    zIndex: 20
  }}>
        {}
        <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    flexWrap: 'wrap'
  }}>
          <input type="text" placeholder="Search sample projects..." value={search} onChange={e => setSearch(e.target.value)} style={{
    flex: 1,
    minWidth: '250px',
    padding: '10px 16px',
    fontSize: '1rem',
    borderRadius: '8px',
    border: '1px solid ' + colors.border,
    background: colors.bg,
    color: colors.text,
    outline: 'none'
  }} />
          {hasActiveFilters && <button onClick={clearAllFilters} onMouseEnter={() => setHovered('clear-btn')} onMouseLeave={() => setHovered(null)} style={{
    padding: '8px 16px',
    fontSize: '0.9rem',
    fontWeight: 500,
    color: hovered === 'clear-btn' ? colors.text : colors.textMuted,
    background: hovered === 'clear-btn' ? colors.bgSecondary : 'transparent',
    border: '1px solid ' + (hovered === 'clear-btn' ? colors.accent : colors.border),
    borderRadius: '6px',
    cursor: 'pointer',
    whiteSpace: 'nowrap',
    transition: 'all 0.15s'
  }}>
              Clear all filters
            </button>}
        </div>

        {}
        <div style={{
    display: 'flex',
    gap: '20px',
    alignItems: 'flex-end',
    flexWrap: 'wrap'
  }}>
          {}
          <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '8px',
    minWidth: '240px'
  }} ref={standardDropdownRef}>
            <label style={{
    fontSize: '0.875rem',
    fontWeight: 600,
    color: colors.text,
    textTransform: 'uppercase',
    letterSpacing: '0.05em'
  }}>Standard</label>
            <div style={{
    position: 'relative'
  }}>
              <button onClick={() => setIsStandardOpen(!isStandardOpen)} style={{
    width: '100%',
    height: '46px',
    padding: '0 40px 0 16px',
    fontSize: '0.95rem',
    fontWeight: 500,
    borderRadius: '8px',
    border: '1px solid ' + colors.border,
    background: colors.bg,
    color: colors.text,
    cursor: 'pointer',
    outline: 'none',
    textAlign: 'left',
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    position: 'relative',
    marginTop: 0,
    boxSizing: 'border-box'
  }}>
                {selectedProduct && PRODUCT_CONFIG[selectedProduct] ? <>
                    <div style={{
    width: '16px',
    height: '16px',
    borderRadius: '4px',
    backgroundColor: PRODUCT_CONFIG[selectedProduct].color,
    flexShrink: 0
  }} />
                    <span style={{
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  }}>
                      {selectedProduct} - {PRODUCT_CONFIG[selectedProduct].displayName}
                    </span>
                  </> : <span>All Standards</span>}
              </button>
              
              {}
              <div style={{
    position: 'absolute',
    right: '16px',
    top: '50%',
    transform: 'translateY(-50%)',
    width: 0,
    height: 0,
    borderLeft: '4px solid transparent',
    borderRight: '4px solid transparent',
    borderTop: '6px solid ' + colors.textMuted,
    pointerEvents: 'none'
  }} />

              {isStandardOpen && <div style={{
    position: 'absolute',
    top: '100%',
    left: 0,
    right: 0,
    marginTop: '4px',
    background: colors.bg,
    border: '1px solid ' + colors.border,
    borderRadius: '8px',
    zIndex: 10,
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
    maxHeight: '300px',
    overflowY: 'auto'
  }}>
                  <div onClick={() => {
    setSelectedProduct('');
    setIsStandardOpen(false);
  }} style={{
    padding: '10px 16px',
    cursor: 'pointer',
    fontSize: '0.95rem',
    color: colors.text,
    borderBottom: '1px solid ' + colors.border,
    transition: 'background 0.15s'
  }} onMouseEnter={e => e.currentTarget.style.background = colors.bgSecondary} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    All Standards
                  </div>
                  {uniqueProducts.map(product => <div key={product} onClick={() => {
    setSelectedProduct(product);
    setIsStandardOpen(false);
  }} style={{
    padding: '10px 16px',
    cursor: 'pointer',
    fontSize: '0.95rem',
    color: colors.text,
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    transition: 'background 0.15s'
  }} onMouseEnter={e => e.currentTarget.style.background = colors.bgSecondary} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <span>{product} - {PRODUCT_CONFIG[product]?.displayName}</span>
                    </div>)}
                </div>}
            </div>
          </div>

          {}
          <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '8px',
    minWidth: '240px'
  }} ref={vmDropdownRef}>
            <label style={{
    fontSize: '0.875rem',
    fontWeight: 600,
    color: colors.text,
    textTransform: 'uppercase',
    letterSpacing: '0.05em'
  }}>VM</label>
            <div style={{
    position: 'relative'
  }}>
              <button onClick={() => setIsVMOpen(!isVMOpen)} style={{
    width: '100%',
    height: '46px',
    padding: '0 40px 0 16px',
    fontSize: '0.95rem',
    fontWeight: 500,
    borderRadius: '8px',
    border: '1px solid ' + colors.border,
    background: colors.bg,
    color: colors.text,
    cursor: 'pointer',
    outline: 'none',
    textAlign: 'left',
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    position: 'relative',
    marginTop: 0,
    boxSizing: 'border-box'
  }}>
                {selectedChain ? <>
                    <img src={getNetworkIcon(selectedChain)} alt="" style={{
    width: '16px',
    height: '16px',
    objectFit: 'contain',
    flexShrink: 0
  }} />
                    <span style={{
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  }}>
                      {chainKeyToLabel[selectedChain]}
                    </span>
                  </> : <span>All VMs</span>}
              </button>
              
              {}
              <div style={{
    position: 'absolute',
    right: '16px',
    top: '50%',
    transform: 'translateY(-50%)',
    width: 0,
    height: 0,
    borderLeft: '4px solid transparent',
    borderRight: '4px solid transparent',
    borderTop: '6px solid ' + colors.textMuted,
    pointerEvents: 'none'
  }} />

              {isVMOpen && <div style={{
    position: 'absolute',
    top: '100%',
    left: 0,
    right: 0,
    marginTop: '4px',
    background: colors.bg,
    border: '1px solid ' + colors.border,
    borderRadius: '8px',
    zIndex: 10,
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
    maxHeight: '300px',
    overflowY: 'auto'
  }}>
                  <div onClick={() => {
    setSelectedChain('');
    setIsVMOpen(false);
  }} style={{
    padding: '10px 16px',
    cursor: 'pointer',
    fontSize: '0.95rem',
    color: colors.text,
    borderBottom: '1px solid ' + colors.border,
    transition: 'background 0.15s'
  }} onMouseEnter={e => e.currentTarget.style.background = colors.bgSecondary} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    All VMs
                  </div>
                  {uniqueChains.map(chainKey => <div key={chainKey} onClick={() => {
    setSelectedChain(chainKey);
    setIsVMOpen(false);
  }} style={{
    padding: '10px 16px',
    cursor: 'pointer',
    fontSize: '0.95rem',
    color: colors.text,
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    transition: 'background 0.15s'
  }} onMouseEnter={e => e.currentTarget.style.background = colors.bgSecondary} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <span>{chainKeyToLabel[chainKey]}</span>
                    </div>)}
                </div>}
            </div>
          </div>
        </div>
      </div>

      {}
      {hasActiveFilters && <div style={{
    marginBottom: '16px',
    paddingBottom: '8px',
    borderBottom: '1px solid ' + colors.border
  }}>
          <p style={{
    fontSize: '0.9rem',
    color: colors.textSecondary,
    margin: 0,
    fontWeight: 500
  }}>
            Showing {filtered.length} of {PROJECTS.length} projects
            {search && <span> matching "{search}"</span>}
            {selectedProduct && <span> • Standard: {selectedProduct}</span>}
            {selectedChain && <span> • VM: {chainKeyToLabel[selectedChain]}</span>}
          </p>
        </div>}

      {}
      <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '28px'
  }}>
        {filtered.length === 0 ? <div style={{
    textAlign: 'center',
    padding: '40px 20px',
    color: colors.textSecondary
  }}>
            <p style={{
    fontSize: '1.1rem',
    marginBottom: '16px'
  }}>No projects match your current filters.</p>
            <button onClick={clearAllFilters} style={{
    padding: '8px 16px',
    fontSize: '0.9rem',
    fontWeight: 500,
    color: colors.textMuted,
    background: 'transparent',
    border: '1px solid ' + colors.border,
    borderRadius: '6px',
    cursor: 'pointer'
  }}>
              Clear all filters
            </button>
          </div> : filtered.map((proj, i) => {
    const cardId = 'card-' + i;
    return <div key={i} style={{
      background: colors.bg,
      border: '1px solid ' + colors.border,
      borderRadius: '18px',
      padding: '22px 28px 18px 28px',
      display: 'flex',
      flexDirection: 'column',
      gap: 0
    }}>
                {}
                <div style={{
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'flex-start',
      justifyContent: 'space-between',
      gap: '18px',
      flexWrap: 'wrap'
    }}>
                  {}
                  <div style={{
      flex: '1 1 0%',
      minWidth: 0
    }}>
                    <h2 style={{
      fontSize: '1.18rem',
      fontWeight: 600,
      color: colors.text,
      marginBottom: '2px',
      marginTop: 0,
      letterSpacing: '-0.01em'
    }}>
                      {proj.title}
                    </h2>
                    <p style={{
      color: colors.textSecondary,
      fontSize: '1.01rem',
      marginBottom: '10px',
      marginTop: 0,
      fontWeight: 400
    }}>
                      {proj.description}
                    </p>

                    {}
                    <div style={{
      display: 'flex',
      alignItems: 'flex-start',
      gap: '32px',
      marginTop: '10px',
      flexWrap: 'wrap'
    }}>
                      {}
                      <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'flex-start',
      gap: '4px'
    }}>
                        <span style={{
      fontSize: '12px',
      fontWeight: 500,
      color: colors.textMuted,
      textTransform: 'uppercase',
      letterSpacing: '0.04em'
    }}>Standard</span>
                        <div style={{
      display: 'flex',
      flexWrap: 'wrap',
      gap: '6px'
    }}>
                          {proj.product.map(prod => {
      const config = PRODUCT_CONFIG[prod];
      const chipId = 'chip-' + i + '-' + prod;
      return <a key={prod} href={config?.link || '#'} target="_blank" rel="noopener noreferrer" onMouseEnter={() => setHovered(chipId)} onMouseLeave={() => setHovered(null)} style={{
        display: 'inline-flex',
        alignItems: 'center',
        borderRadius: '999px',
        padding: '2px 10px',
        fontSize: '13px',
        fontWeight: 500,
        lineHeight: 1.2,
        color: '#fff',
        background: hovered === chipId ? config?.hoverColor || config?.color : config?.color,
        border: 'none',
        textDecoration: 'none',
        cursor: 'pointer',
        transition: 'all 0.15s',
        transform: hovered === chipId ? 'translateY(-1px)' : 'none',
        boxShadow: hovered === chipId ? '0 2px 8px rgba(0, 0, 0, 0.15)' : 'none'
      }} title={'Learn more about ' + (config?.displayName || prod)}>
                                {prod}
                                <span style={{
        fontSize: '10px',
        marginLeft: '4px',
        opacity: 0.7
      }}>↗</span>
                              </a>;
    })}
                        </div>
                      </div>

                      {}
                      <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'flex-start',
      gap: '4px'
    }}>
                        <span style={{
      fontSize: '12px',
      fontWeight: 500,
      color: colors.textMuted,
      textTransform: 'uppercase',
      letterSpacing: '0.04em'
    }}>VM</span>
                        <div style={{
      display: 'flex',
      flexWrap: 'wrap',
      gap: '4px',
      alignItems: 'center'
    }}>
                          {proj.chain.map(c => <div key={c.key} title={c.label} onMouseEnter={() => setHovered('vm-' + i + '-' + c.key)} onMouseLeave={() => setHovered(null)} style={{
      width: '20px',
      height: '20px',
      cursor: 'help',
      transition: 'transform 0.15s ease',
      transform: hovered === 'vm-' + i + '-' + c.key ? 'scale(1.1)' : 'none',
      backgroundImage: 'url(' + getNetworkIcon(c.key) + ')',
      backgroundSize: 'contain',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center'
    }} />)}
                        </div>
                      </div>

                      {}
                      <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'flex-start',
      gap: '4px'
    }}>
                        <span style={{
      fontSize: '12px',
      fontWeight: 500,
      color: colors.textMuted,
      textTransform: 'uppercase',
      letterSpacing: '0.04em'
    }}>Language</span>
                        <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      borderRadius: '999px',
      padding: '2px 10px',
      fontSize: '13px',
      fontWeight: 500,
      lineHeight: 1.2,
      background: colors.bgSecondary,
      color: colors.text,
      border: '1px solid ' + colors.border
    }}>
                          {proj.language.join(', ')}
                        </span>
                      </div>
                    </div>
                  </div>

                  {}
                  <div style={{
      display: 'flex',
      alignItems: 'center',
      marginLeft: '16px'
    }}>
                    <a href={proj.github} target="_blank" rel="noopener noreferrer" onMouseEnter={() => setHovered('github-' + i)} onMouseLeave={() => setHovered(null)} style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: '6px',
      background: colors.accent,
      color: '#fff',
      padding: '6px 16px',
      borderRadius: '6px',
      textDecoration: 'none',
      fontWeight: 600,
      fontSize: '0.9375rem',
      lineHeight: 1,
      border: 'none',
      letterSpacing: '0.01em',
      boxShadow: hovered === 'github-' + i ? '0 3px 10px rgba(0, 0, 0, 0.12)' : '0 1px 2px rgba(0, 0, 0, 0.04)',
      transition: 'box-shadow 0.15s, background 0.15s',
      whiteSpace: 'nowrap'
    }}>
                      View on GitHub
                      <ExternalLinkIcon />
                    </a>
                  </div>
                </div>
              </div>;
  })}
      </div>
    </div>;
};

Explore the library of sample projects using LayerZero.

<SampleProjectsGallery />