feat: add a network marquee component for broadcasting multi-chain signatures

docs/protocol/account-id.md

@@ -5,6 +5,7 @@ title: Address (Account ID)
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import NetworkMarquee from '@site/src/components/NetworkMarquee';
 
 NEAR accounts are identified by a unique address, which takes one of two forms:
 1. [**Implicit address**](#implicit-address), which are 64 characters long (e.g. `fb9243ce...`)
@@ -129,3 +130,6 @@ You can use the same command to create sub-accounts of an existing named account
 :::tip
 Accounts have **no control** over their sub-accounts, they are different entities. This means that `near` cannot control `bob.near`, and `bob.near` cannot control `sub.bob.near`.
 :::
+
+## One Account, Multiple Blockchains
+<NetworkMarquee />

docs/protocol/account-model.md

@@ -4,6 +4,8 @@ title: NEAR Accounts
 sidebar_label: Overview
 ---
 
+import NetworkMarquee from '@site/src/components/NetworkMarquee';
+
 Users participate in the NEAR ecosystem through their NEAR accounts. These accounts are identified by a [unique address](./account-id.md), can optionally hold a [smart contract](../smart-contracts/what-is.md), and are controlled through [Access Keys](./access-keys.md).
 
 By signing [transactions](./transactions.md) with their account, users can:
@@ -39,6 +41,9 @@ NEAR accounts can have multiple [keys](access-keys.md), each with their own set
 #### [Simple to Develop Smart Contracts](../smart-contracts/what-is.md)
 NEAR accounts can optionally hold an application - known as a [smart contract](../smart-contracts/what-is.md) - which can be written in Javascript or Rust.
 
+## Multi-Chain Connectivity with NEAR
+<NetworkMarquee />
+
 ---
 
 ## Comparison With Ethereum {#compared-to-ethereum}

website/package.json

@@ -65,6 +65,7 @@
     "react-bootstrap": "^2.9.1",
     "react-bootstrap-typeahead": "^6.3.2",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.5",
     "react-is": "^18.2.0",
     "react-markdown": "^10.1.0",
     "react-monaco-editor": "^0.54.0",

website/src/components/NetworkMarquee.js

@@ -0,0 +1,170 @@
+import React, { useMemo } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import styles from './NetworkMarquee.module.scss';
+import Marquee from "react-fast-marquee";
+
+const NetworkMarquee = () => {
+    const { colorMode } = useColorMode();
+    const isDarkTheme = colorMode === 'dark';
+
+    const evmNetworks = useMemo(() => [
+        {
+            name: 'Ethereum',
+            image: '/img/crypto/eth.png',
+        },
+        {
+            name: 'Avalanche',
+            image: '/img/crypto/avax.png',
+        },
+        {
+            name: 'Polygon',
+            image: '/img/crypto/pol.png',
+        },
+        {
+            name: 'Arbitrum',
+            image: '/img/crypto/arb.png',
+        },
+        {
+            name: 'Base',
+            image: '/img/crypto/base.png',
+        },
+        {
+            name: 'BNB Chain',
+            image: '/img/crypto/bnb.png',
+        }
+    ], []);
+
+    const nonEvmNetworks = useMemo(() => [
+        {
+            name: 'Bitcoin',
+            image: '/img/crypto/btc.png',
+        },
+        {
+            name: 'Solana',
+            image: '/img/crypto/sol.png',
+        },
+        {
+            name: 'Sui',
+            image: '/img/crypto/sui.png',
+        },
+        {
+            name: 'Aptos',
+            image: '/img/crypto/apt.png',
+        },
+        {
+            name: 'XRP Ledger',
+            image: '/img/crypto/xrp.png',
+        }
+    ], []);
+
+    const allNetworks = useMemo(() => [...evmNetworks, ...nonEvmNetworks, ...evmNetworks, ...nonEvmNetworks], [evmNetworks, nonEvmNetworks]);
+
+    return (
+        <div className={`${styles.networkMarquee} ${isDarkTheme ? styles.darkTheme : styles.lightTheme}`}>
+            <div className={styles.carouselHeaderContainer}>
+                <p className={styles.carouselHeader}>Supported Networks</p>
+                <p className={styles.carouselDescription}>
+                    Chain Signatures lets NEAR account sign and execute transactions across multiple blockchains, seamlessly and securely
+                </p>
+                <Link 
+                    to="/chain-abstraction/chain-signatures"
+                    className={styles.learnMoreLink}
+                >
+                    Learn More
+                </Link>
+            </div>
+            <Marquee
+                speed={50}
+                pauseOnHover={true}
+                delay={0}
+                direction="left"
+                style={{
+                    width: '100vw',
+                    marginLeft: 'calc(-50vw + 50%)',
+                    marginRight: 'calc(-50vw + 50%)',
+                    overflow: 'hidden',
+                    padding: '8px 0'
+                }}
+            >
+                {allNetworks.map((network, index) => (
+                    <div
+                        key={`${network.name}-${index}`}
+                        className={styles.networkCardInner}
+                    >
+                        <img
+                            src={network.image}
+                            alt={`${network.name} logo`}
+                            className={styles.networkLogo}
+                            loading="lazy"
+                            width="48"
+                            height="48"
+                        />
+                        <span className={styles.networkName}>{network.name}</span>
+                    </div>
+                ))}
+            </Marquee>
+
+            <div className={styles.statsContainer}>
+                <div className={styles.statItem}>
+                    <span className={styles.statNumber}>1</span>
+                    <span className={styles.statLabel}>NEAR Account</span>
+                    <span className={styles.statDescription}>Unified Access</span>
+                </div>
+                <div className={styles.statItem}>
+                    <span className={styles.statNumber}>{evmNetworks.length}+</span>
+                    <span className={styles.statLabel}>EVM Networks</span>
+                    <span className={styles.statDescription}>Widely Adopted</span>
+                </div>
+                <div className={styles.statItem}>
+                    <span className={styles.statNumber}>{nonEvmNetworks.length}</span>
+                    <span className={styles.statLabel}>Others Networks</span>
+                    <span className={styles.statDescription}>Alternative Architectures</span>
+                </div>
+            </div>
+            <div className={styles.featuresSection}>
+                <p className={styles.featuresTitle}>Why Choose Chain Signatures?</p>
+                <div className={styles.featuresContainer}>
+                    <div className={styles.featureItem}>
+                        <div className={styles.featureIcon}>🎯</div>
+                        <div className={styles.featureContent}>
+                            <span className={styles.featureHighlight}>Single Account, Multi-Chain Operations</span>
+                            <p className={styles.featureDescription}>
+                                Manage interactions with external blockchains from one NEAR account. Simplifies key management and reduces the need for multiple wallets
+                            </p>
+                        </div>
+                    </div>
+                    <div className={styles.featureItem}>
+                        <div className={styles.featureIcon}>⚡</div>
+                        <div className={styles.featureContent}>
+                            <span className={styles.featureHighlight}>Reduced Cross-Chain Development Overhead</span>
+                            <p className={styles.featureDescription}>
+                                Write smart contracts on NEAR that directly sign for cross-chain transactions, cutting down on code redundancy and potential points of failure
+                            </p>
+                        </div>
+                    </div>
+                    <div className={styles.featureItem}>
+                        <div className={styles.featureIcon}>🔐</div>
+                        <div className={styles.featureContent}>
+                            <span className={styles.featureHighlight}>Secure Transaction Signing with MPC</span>
+                            <p className={styles.featureDescription}>
+                                Decentralized signing process using Multi-Party Computation. No single entity controls the signing key, reducing centralized custodianship risks
+                            </p>
+                        </div>
+                    </div>
+                    <div className={styles.featureItem}>
+                        <div className={styles.featureIcon}>₿</div>
+                        <div className={styles.featureContent}>
+                            <span className={styles.featureHighlight}>Bitcoin DeFi & Cross-Chain NFTs</span>
+                            <p className={styles.featureDescription}>
+                                Build DeFi applications leveraging Bitcoin liquidity, atomic swaps, and cross-chain NFT platforms with native cryptocurrency payments
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NetworkMarquee;