feat: new landing

docs/index.md

@@ -8,21 +8,21 @@ description: "NEAR Protocol documentation - Build decentralized applications and
 ---
 
 import Card from '@site/src/components/UI/Card';
+import LandingHero from '@site/src/components/LandingHero';
 
 <div className="landing">
 
-  <div className="landing-intro">
-    <h1>NEAR Protocol Documentation</h1>
-    <p className="landing-subtitle">Build decentralized applications and AI agents with seamless cross-chain capabilities</p>
-    <div className="landing-underline"></div>
-  </div>
-  <div className="row">
-    <div className="auto-col">
+  <LandingHero />
+
+  <div className="container margin-top--xl">
+    <div className="row">
+    <div className="col col--4">
       <Card
         variant="icon"
         icon={<img src="/assets/menu/near.svg" alt="NEAR Protocol" />}
         title="New to NEAR?"
         description="NEAR is a layer-1 blockchain built for scale and multichain compatibility. Battle-tested with 13M+ transaction peaks and 5 years of zero downtime"
+        color="mint"
       >
         <ul>
           <li><a href="/protocol/basics">What is NEAR?</a></li>
@@ -37,6 +37,7 @@ import Card from '@site/src/components/UI/Card';
         icon={<img src="/assets/menu/ai.svg" alt="AI Native Infrastructure" />}
         title="AI Native Infrastructure"
         description="NEAR is the execution layer for AI-native apps—enabling agents to own assets, make decisions, and transact freely across networks"
+        color="purple"
       >
         <ul>
           <li><a href="/ai/introduction">Getting Started</a></li>
@@ -51,6 +52,7 @@ import Card from '@site/src/components/UI/Card';
         icon={<img src="/assets/menu/multichain.svg" alt="Multi-Chain" />}
         title="Multi-Chain"
         description="Tap into any blockchain with NEAR's chain abstraction layer"
+        color="orange"
       >
         <ul>
           <li><a href="/chain-abstraction/what-is">What is Chain Abstraction?</a></li>
@@ -59,12 +61,15 @@ import Card from '@site/src/components/UI/Card';
         </ul>
       </Card>
     </div>
-    <div className="auto-col">
+  </div>
+  <div className="row">
+    <div className="col col--4">
       <Card
         variant="icon"
         icon={<img src="/assets/menu/app.svg" alt="Web3 Applications" />}
         title="Web3 Applications"
         description="Create modern web applications that interact with the NEAR blockchain. Learn frontend integration and user experience best practices"
+        color="mint"
       >
         <ul>
           <li><a href="/web3-apps/what-is">What are Web3 Apps?</a></li>
@@ -79,6 +84,7 @@ import Card from '@site/src/components/UI/Card';
         icon={<img src="/assets/menu/contract.svg" alt="Smart Contracts" />}
         title="Smart Contracts"
         description="Deploy and interact with smart contracts on NEAR. From basic concepts to advanced patterns and security best practices"
+        color="purple"
       >
         <ul>
           <li><a href="/smart-contracts/what-is">What are Smart Contracts?</a></li>
@@ -93,6 +99,7 @@ import Card from '@site/src/components/UI/Card';
         icon={<img src="/assets/menu/token.svg" alt="Tokens and Primitives" />}
         title="Tokens and Primitives"
         description="Learn about FTs, NFTs, DAOs and everything you need to build an application on NEAR"
+        color="orange"
       >
         <ul>
           <li><a href="/primitives/ft">Fungible Tokens (FT)</a></li>
@@ -102,12 +109,6 @@ import Card from '@site/src/components/UI/Card';
       </Card>
     </div>
   </div>
-  <div className="landing-footer">
-    <h2>Ready to start building?</h2>
-    <p>Discover what makes NEAR the perfect platform for your next application</p>
-    <div className="landing-cta">
-      <a href="/protocol/basics" className="button button--primary button--lg">Explore NEAR</a>
-    </div>
   </div>
 
 </div>

website/docusaurus.config.js

@@ -36,7 +36,7 @@ const config = {
   },
   themes: ['@saucelabs/theme-github-codeblock', '@docusaurus/theme-mermaid'],
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'throw',
+  markdown: { hooks: { onBrokenMarkdownLinks: 'throw' } },
   onBrokenAnchors: 'throw',
   presets: [
     [

website/package.json

@@ -20,8 +20,8 @@
     "docusaurus": "docusaurus"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.9.1",
-    "@docusaurus/types": "3.9.1",
+    "@docusaurus/module-type-aliases": "3.9.2",
+    "@docusaurus/types": "3.9.2",
     "@emailjs/browser": "^4.4.1",
     "@types/react": "^18.2.42",
     "buffer": "^6.0.3",
@@ -31,11 +31,11 @@
     "serve": "^14.2.4"
   },
   "dependencies": {
-    "@docusaurus/core": "3.9.1",
-    "@docusaurus/plugin-ideal-image": "3.9.1",
-    "@docusaurus/plugin-sitemap": "3.9.1",
-    "@docusaurus/preset-classic": "3.9.1",
-    "@docusaurus/theme-mermaid": "3.9.1",
+    "@docusaurus/core": "3.9.2",
+    "@docusaurus/plugin-ideal-image": "3.9.2",
+    "@docusaurus/plugin-sitemap": "3.9.2",
+    "@docusaurus/preset-classic": "3.9.2",
+    "@docusaurus/theme-mermaid": "3.9.2",
     "@feelback/react": "^0.3.4",
     "@mermaid-js/layout-elk": "^0.2.0",
     "@near-js/accounts": "^2.2.5",
@@ -82,6 +82,7 @@
     "stream-browserify": "^3.0.0",
     "styled-components": "^6.1.19",
     "swr": "^2.3.6",
+    "typed.js": "^2.1.0",
     "url": "^0.11.4",
     "util": "^0.12.5",
     "vm-browserify": "^1.1.2"

website/src/components/LandingHero/index.jsx

@@ -0,0 +1,107 @@
+import React, { useState, useEffect, useRef, act } from 'react';
+import Typed from 'typed.js';
+import CodeBlock from '@theme/CodeBlock';
+
+import { CATEGORY_STRINGS, OPTIONS } from './options';
+import './styles.scss';
+
+const LandingHero = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const typedElement = useRef(null);
+  const typedInstance = useRef(null);
+
+  useEffect(() => {
+    typedInstance.current = new Typed(typedElement.current, {
+      strings: CATEGORY_STRINGS,
+      typeSpeed: 50,
+      backSpeed: 30,
+      backDelay: 5000,
+      startDelay: 500,
+      loop: true,
+      showCursor: true,
+      onStringTyped: (arrayPos) => {
+        setActiveIndex(arrayPos);
+      },
+    });
+
+    return () => {
+      if (typedInstance.current) {
+        typedInstance.current.destroy();
+      }
+    };
+  }, []);
+
+  return (
+      <div className="row">
+        <div className="col col--5 text--left vcentered">
+          <h2 className="landing-hero__title-gradient">
+            NEAR Protocol, the home of
+          </h2>
+          <h1 >
+            <span className="landing-hero__title-typed" ref={typedElement}></span>
+          </h1>
+
+          <p className="landing-hero__description">
+            Build decentralized applications and AI agents with seamless cross-chain capabilities on
+            a layer-1 blockchain built for scale
+          </p>
+          <div className="landing-hero__cta">
+            <a href={OPTIONS[activeIndex].buttonLink} className="button button--primary button--lg">
+              {OPTIONS.map((option, index) => (
+                <span
+                  key={option.buttonText}
+                  style={{
+                    opacity: index === activeIndex ? 1 : 0,
+                    transform: `translateY(${index === activeIndex ? 0 : '20px'})`,
+                    position: index === activeIndex ? 'relative' : 'absolute',
+                    width: '100%',
+                  }}
+                >
+                  {option.buttonText}
+                </span>
+              ))}
+            </a>
+          </div>
+        </div>
+        <div className="col col--7">
+          <div className="landing-hero__code-window">
+            <div className="landing-hero__code-header">
+              <div className="landing-hero__code-dots">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+              <div className="landing-hero__tabs">
+                {OPTIONS.map((option, index) => (
+                  <button
+                    key={option.label}
+                    className={`landing-hero__tab ${index === activeIndex ? 'active' : ''}`}
+                    onClick={() => {
+                      // Stop the typing animation and jump to this category
+                      if (typedInstance.current) {
+                        typedInstance.current.stop();
+                      }
+                      setActiveIndex(index);
+                      // Update the text content directly
+                      if (typedElement.current) {
+                        typedElement.current.textContent = CATEGORY_STRINGS[index];
+                      }
+                    }}
+                  >
+                    {option.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="landing-hero__code-content text--left">
+              <CodeBlock language="rust">
+                {OPTIONS[activeIndex].code}
+              </CodeBlock>
+            </div>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export default LandingHero;

website/src/components/LandingHero/options.js

@@ -0,0 +1,154 @@
+import React from "react";
+import language from "react-syntax-highlighter/dist/esm/languages/hljs/1c";
+
+export const CATEGORY_STRINGS = [
+  "AI Agents",
+  "Multichain Apps",
+  "Smart Contracts",
+  "Decentralized Apps",
+];
+
+export const OPTIONS = [
+  {
+    label: "ai.js",
+    buttonText: "Build AI Agents",
+    buttonLink: "/ai/introduction",
+    language: "js",
+    code: `import { Hono } from "hono";
+import { agentAccountId, agent } from "@neardefi/shade-agent-js";
+
+const app = new Hono();
+
+app.get("/", async (c) => {
+  try {
+    // Get the agents account Id
+    const accountId = await agentAccountId();
+
+    // Get the balance of the agent account
+    const balance = await agent("getBalance");
+
+    return c.json({
+      accountId: accountId.accountId,
+      balance: balance.balance,
+    });
+  } catch (error) {
+    console.log("Error getting agent account:", error);
+    return c.json({ error: "Failed to get agent account " + error }, 500);
+  }
+});
+
+export default app;`
+  },
+  {
+    label: "multichain.js",
+    buttonText: "Build Cross-chain Apps",
+    buttonLink: "/chain-abstraction/what-is",
+    language: "js",
+    code:  `import { Account } from "@near-js/accounts"
+import { KeyPair } from "@near-js/crypto"
+import { JsonRpcProvider } from "@near-js/providers"
+import { KeyPairSigner } from "@near-js/signers"
+
+import { getAdapter, chains } from "multichain.js"
+
+async function main() {
+  // NEAR Account
+  const provider = new JsonRpcProvider({ url: "https://test.rpc.fastnear.com" })
+
+  const nearAddress = "your-account.testnet"
+  const signer = new KeyPairSigner(KeyPair.fromString("ed25519:..."))
+  const account = new Account(nearAddress, provider, signer)
+
+  // Ethereum Adapter
+  const adapter = getAdapter({ chain: chains.ARBITRUM, mpcNetwork: "testnet" })
+  const address = await adapter.getAddressControlledBy({ nearAddress })
+  console.log("Address:", address)
+
+  const balance = await adapter.getBalance({ address })
+  console.log("Balance:", balance)
+
+  const tx = await adapter.transfer({
+    to: "0x2f318C334780961FB129D2a6c30D0763d9a5C970",
+    amount: "10000000000000000", // 0.01 ETH
+    nearAccount: account,
+  })
+
+  console.log("Transaction:", tx)
+}
+`,
+  },
+  {
+    label: "hello.rs",
+    buttonText: "Write Smart Contracts",
+    buttonLink: "/smart-contracts/quickstart",
+    language: "rust",
+    code:  `use near_sdk::{log, near};
+
+#[near(contract_state)]
+pub struct Contract {
+    greeting: String,
+}
+
+impl Default for Contract {
+    fn default() -> Self {
+        Self {
+            greeting: "Hello".to_string(),
+        }
+    }
+}
+
+#[near]
+impl Contract {
+    pub fn get_greeting(&self) -> String {
+        self.greeting.clone()
+    }
+
+    pub fn set_greeting(&mut self, greeting: String) {
+        log!("Saving greeting: {}", greeting);
+        self.greeting = greeting;
+    }
+}    `,
+  },
+  {
+    label: "app.jsx",
+    buttonText: "Build Web3 Apps",
+    buttonLink: "/web3-apps/quickstart",
+    language: "jsx",
+    code:  `import { useEffect, useState } from "react";
+import { useWalletSelector } from "@near-wallet-selector/react-hook";
+
+export default function HelloNear() {
+  const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
+
+  const [greeting, setGreeting] = useState<string>("loading...");
+
+  useEffect(() => {
+    viewFunction({ contractId: HelloNearContract, method: "get_greeting" })
+    .then((greeting) => setGreeting(greeting));
+  }, []);
+
+  const saveGreeting = async () => {
+    callFunction({
+      contractId: HelloNearContract,
+      method: "set_greeting",
+      args: { greeting }
+    });
+  };
+
+  return (
+    <main>
+      <h1 className="w-100">
+        The contract says: <code>{greeting}</code>
+      </h1>
+      <input
+        type="text"
+        className="form-control w-20"
+        placeholder="Store a new greeting"
+        onChange={(t) => setGreeting(t.target.value)}
+      />
+      <button onClick={saveGreeting}> Save </button>
+    </main>
+  );
+}`,
+  },
+];