diff --git a/docs/ai/introduction.md b/docs/ai/introduction.md index 402eaae7ef9..6190b31fb9d 100644 --- a/docs/ai/introduction.md +++ b/docs/ai/introduction.md @@ -38,9 +38,3 @@ Shade Agents power [Agentic Protocols](./shade-agents/concepts/what-can-you-buil - End-to-end confidential iterations with agents Agents are accessible through the [NEAR AI Assistant](https://chat.near.ai/chat), a single interface that intelligently selects the most appropriate agents to handle user requests and connects multiple agents together for more complex tasks. The assistant can take actions for the user, has integrated payments, and can dynamically generate frontends on the fly based on user requests. - ---- - -## Bitte Protocol - -[Bitte Protocol](https://docs.bitte.ai/agents/build-agent) is a framework for creating AI agents that interact with smart contracts on NEAR and other chains via natural language. Bitte agents are quick and easy to get started with, you can build an agent for a smart contract in a couple of hours with little prior knowledge of agents. diff --git a/docs/index.md b/docs/index.md index 5a0b67ca883..e644295fb43 100644 --- a/docs/index.md +++ b/docs/index.md @@ -8,106 +8,88 @@ description: "NEAR Protocol documentation - Build decentralized applications and --- import Card from '@site/src/components/UI/Card'; +import LandingHero from '@site/src/components/LandingHero'; -
-
-

NEAR Protocol Documentation

-

Build decentralized applications and AI agents with seamless cross-chain capabilities

-
+ + +
+
+ } + title="New to NEAR?" + > + +
-
-
- } - 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" - > - - -
-
- } - 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" - > - - -
-
- } - title="Multi-Chain" - description="Tap into any blockchain with NEAR's chain abstraction layer" - > - - -
-
- } - title="Web3 Applications" - description="Create modern web applications that interact with the NEAR blockchain. Learn frontend integration and user experience best practices" - > - - -
-
- } - title="Smart Contracts" - description="Deploy and interact with smart contracts on NEAR. From basic concepts to advanced patterns and security best practices" - > - - -
-
- } - title="Tokens and Primitives" - description="Learn about FTs, NFTs, DAOs and everything you need to build an application on NEAR" - > - - -
+
+ } + title="AI Native Infrastructure" + > + +
-
-

Ready to start building?

-

Discover what makes NEAR the perfect platform for your next application

- + + +
+ } + title="Smart Contracts" + > + + +
+
+ } + title="Tokens and Primitives" + > + +
-
diff --git a/docs/protocol/basics.md b/docs/protocol/basics.md index ef4f5f22a77..d8a7b4d5316 100644 --- a/docs/protocol/basics.md +++ b/docs/protocol/basics.md @@ -45,7 +45,7 @@ NEAR is a technical marvel, offering built-in features such as named accounts an 1. 5 years of **100% uptime** and [**4 Billion** transactions](https://pikespeak.ai/near-world/overview) processed 2. NEAR has sustained peaks of [>13M transactions](https://pikespeak.ai/near-world/overview) in a single day -3. NEAR is home to decentralized apps with [millions of users](https://dappradar.com/rankings?range=30d): +3. NEAR is home to decentralized apps with [millions of users](https://dappradar.com/rankings/protocol/near?sort=uawCount&order=desc&range=30d): - [Kai-ching](https://cosmose.ai/) - [Sweat](https://sweateconomy.com/) - [Hot Wallet](https://t.me/herewalletbot/) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index fe843947872..9c90b8be06f 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -11,9 +11,6 @@ const config = { organizationName: 'near', projectName: 'docs', trailingSlash: false, - markdown: { - mermaid: true, - }, scripts: [ 'https://buttons.github.io/buttons.js', 'https://use.fontawesome.com/221fd444f5.js', @@ -36,7 +33,10 @@ const config = { }, themes: ['@saucelabs/theme-github-codeblock', '@docusaurus/theme-mermaid'], onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'throw', + markdown: { + mermaid: true, + hooks: { onBrokenMarkdownLinks: 'throw' } + }, onBrokenAnchors: 'throw', presets: [ [ diff --git a/website/package.json b/website/package.json index 8974ca46e28..08329cdcf48 100644 --- a/website/package.json +++ b/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.3.1", @@ -58,30 +58,27 @@ "@near-wallet-selector/welldone-wallet": "^9.5.4", "@saucelabs/theme-github-codeblock": "^0.2.3", "axios": "^1.12.0", - "bootstrap": "^5.3.2", - "bootstrap-icons": "^1.11.1", - "clsx": "^2.1.1", + "clsx": "^1.1.1", "crypto-browserify": "^3.12.1", "docusaurus-plugin-sass": "^0.2.6", "dotenv": "^17.2.1", "gleap": "^13.7.3", "lodash": "^4.17.21", - "monaco-editor": "^0.52.2", + "monaco-editor": "^0.55.1", "posthog-js": "^1.257.2", "process": "^0.11.10", "react": "^18.2.0", - "react-bootstrap": "^2.9.1", - "react-bootstrap-typeahead": "^6.3.2", "react-dom": "^18.2.0", "react-hook-form": "^7.61.1", "react-markdown": "^10.1.0", "react-monaco-editor": "^0.59.0", - "react-syntax-highlighter": "^15.6.1", + "react-syntax-highlighter": "^16", "react-toastify": "^11.0.5", "sass": "^1.89.2", "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" diff --git a/website/sidebars.js b/website/sidebars.js index 7528ff15da4..48ab5d074b1 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -116,7 +116,7 @@ const sidebar = { 'tools/explorer', { type: 'link', - label: 'Wallets ↗', + label: 'Wallets', href: 'https://wallet.near.org', }, 'tools/near-cli', diff --git a/website/src/components/LandingHero/index.jsx b/website/src/components/LandingHero/index.jsx new file mode 100644 index 00000000000..0921aa60261 --- /dev/null +++ b/website/src/components/LandingHero/index.jsx @@ -0,0 +1,109 @@ +import React, { useState, useEffect, useRef } from 'react'; +import Typed from 'typed.js'; +import CodeBlock from '@theme/CodeBlock'; + +import { OPTIONS } from './options'; +import './styles.scss'; + +const LandingHero = () => { + const [activeIndex, setActiveIndex] = useState(0); + const [permanentLabel, setPermanentLabel] = useState(null); + const typedElement = useRef(null); + const typedInstance = useRef(null); + + const categories = OPTIONS.map(option => option.name); + + useEffect(() => { + typedInstance.current = new Typed(typedElement.current, { + strings: categories, + typeSpeed: 50, + backSpeed: 20, + backDelay: 5000, + startDelay: 0, + loop: true, + onStringTyped: (arrayPos) => { + setActiveIndex(arrayPos); + }, + }); + + return () => { + if (typedInstance.current) { + typedInstance.current.destroy(); + typedInstance.current = null; + } + }; + }, []); + + return ( +
+
+

+ NEAR Protocol, home of +

+

+ + {permanentLabel} + +

+ +

+ {OPTIONS[activeIndex].description} +

+ +
+
+
+
+
+ + + +
+
+ {OPTIONS.map((option, index) => ( + + ))} +
+
+
+ + {OPTIONS[activeIndex].code} + +
+
+
+
+ ); +}; + +export default LandingHero; diff --git a/website/src/components/LandingHero/options.js b/website/src/components/LandingHero/options.js new file mode 100644 index 00000000000..443987d80bd --- /dev/null +++ b/website/src/components/LandingHero/options.js @@ -0,0 +1,104 @@ +import React from "react"; + +export const OPTIONS = [ + { + name: "Smart Contracts", + label: "hello.rs", + buttonText: "Build Your First Contract", + buttonLink: "/smart-contracts/quickstart", + description: "Build smart contracts using languages you already know like Rust, Javascript and Python", + language: "python", + code: `$> npx create-near-app@latest + +====================================================== +👋 Welcome to Near! Learn more: https://docs.near.org/ +🔧 Let's get your project ready. +====================================================== + +✅ What do you want to build? › "Smart Contract" +✅ Name your project to create a contract: "hello-near" +✅ Success! Created 'hello-near', a smart contract in Rust + + +Build, test, and deploy your contract using cargo: + * cargo near build + * cargo test + * cargo near deploy`, + }, + { + name: "Multichain Apps", + label: "multichain.js", + buttonText: "Go Multichain", + buttonLink: "/chain-abstraction/what-is", + description: "Handle assets on every chain through the power of chain signatures and intents", + language: "ts", + code: `import { Account, KeyPair, JsonRpcProvider, KeyPairSigner } from "near-api-js" +import { getAdapter, chains } from "multichain.js" + +async function main() { + const nearProvider = new JsonRpcProvider({ url: "https://test.rpc.fastnear.com" }) + const nearAccount = new Account("account.testnet", nearProvider, "ed25519:...") + + const arbitrum = getAdapter({ chain: chains.ARBITRUM, mpcNetwork: "testnet" }) + const arbAddress = await arbitrum.getAddressControlledBy({ nearAddress: nearAccount.accountId }) + const arbBalance = await arbitrum.getBalance({ address: arbAddress }) + console.log("Controlled Account", { arbAddress, arbBalance }) + + await arbitrum.transfer({ + to: "0x2f318C334780961FB129D2a6c30D0763d9a5C970", + amount: "10000000000000000", // 0.01 ETH + nearAccount, + }) +} +`, + }, + { + name: "Decentralized Apps", + label: "app.jsx", + buttonText: "Build a Web3 App", + buttonLink: "/web3-apps/quickstart", + description: "Integrate NEAR into your app in seconds thanks to our APIs and wallet connectors", + language: "python", + code: `$> npx create-near-app@latest + +====================================================== +👋 Welcome to Near! Learn more: https://docs.near.org/ +🔧 Let's get your project ready. +====================================================== + +✅ What do you want to build? › "A Web App" +✅ Select a framework for your frontend › "Vite (React)" +✅ Name your project: "hello-near" +✅ Success! Created 'hello-near', a web-app using Vite React. + +Start using your new NEAR app: + * cd hello-near + * npm run dev +`, + }, + { + name: "AI Agents", + label: "ai.js", + description: "Build agents that anyone can verify and trust, with seamless cross-chain capabilities", + buttonText: "Build an AI Agent", + 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) => { + const accountId = await agentAccountId(); + const balance = await agent("getBalance"); + + return c.json({ + accountId: accountId.accountId, + balance: balance.balance, + }); +}); + + +export default app;`, + }, +]; diff --git a/website/src/components/LandingHero/styles.scss b/website/src/components/LandingHero/styles.scss new file mode 100644 index 00000000000..639cd5c9a21 --- /dev/null +++ b/website/src/components/LandingHero/styles.scss @@ -0,0 +1,188 @@ +.landing-hero { + + min-height: 416px; + + &__title-gradient { + background: linear-gradient(135deg, #5f8afa 0%, #22c55e 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + width: 100%; + margin: 0; + margin-top: 32px; + margin-bottom: 0.1rem !important; + } + + &__title-typed { + display: inline-block; + word-wrap: break-word; + background: var(--icon-svg-color); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .typed-cursor { + color: var(--icon-svg-color); + } + + &__cta { + display: flex; + gap: 1rem; + flex-wrap: wrap; + justify-content: center; + margin-top: 2rem; + + .button { + text-decoration: none; + padding: 0.75rem 1.5rem; + font-size: 1rem; + border-radius: 8px; + font-weight: 600; + min-width: 220px; + text-align: center; + position: relative; + overflow: hidden; + + span { + display: block; + transition: + opacity 0.3s ease, + transform 0.3s ease; + } + + &--primary { + background: linear-gradient(135deg, #0066ff 0%, #00c1de 100%); + color: white; + border: none; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4); + color: white; + } + } + + &--secondary { + background: transparent; + border: 2px solid var(--ifm-color-primary); + color: var(--ifm-color-primary); + + &:hover { + background: var(--ifm-color-primary); + color: white; + } + } + } + } + + &__tabs { + display: flex; + gap: 4px; + padding: 0; + align-items: center; + } + + &__tab { + padding: 0.5rem 1rem; + border: none; + cursor: pointer; + font-size: 0.75rem; + font-weight: 600; + transition: all 0.2s; + position: relative; + z-index: 1; + background: transparent; + + &:hover:not(.active) { + color: #00a7de; + } + + &.active { + color: white; + border-bottom: 1px solid rgb(2, 175, 202); + } + } + + &__code-window { + border-radius: 12px; + border: 2px solid rgba(255, 255, 255, 0.2); + outline: 1px solid rgba(0, 193, 222, 0.3); + overflow: hidden; + } + + &__code-header { + display: flex; + align-items: center; + gap: .5rem; + border-radius: 10px 10px 0px 0px; + } + + &__code-dots { + display: flex; + gap: 0.4rem; + padding: 0.3rem 0.75rem; + + span { + width: 12px; + height: 12px; + border-radius: 50%; + background: #4d4d4d; + + &:nth-child(1) { + background: #ff5f56; + } + + &:nth-child(2) { + background: #ffbd2e; + } + + &:nth-child(3) { + background: #27c93f; + } + } + } + + &__code-content { + padding: 0; + margin-bottom: calc(-1*var(--ifm-leading)); + max-height: 400px; + overflow: scroll; + + .theme-code-block { + border-radius: 0; + } + } +} + +html[data-theme='dark'] { + .landing-hero { + &__code-window { + background: #0d1117; + } + + &__code-header { + background: #161b22; + } + + &__tabs { + background: transparent; + } + } +} + +html[data-theme='light'] { + .landing-hero { + &__code-window { + border: 1px solid var(--icon-svg-color); + background-color: #f5f5f5; + } + + &__tab { + &.active { + color: var(--icon-svg-color); + border-bottom: 1px solid var(--icon-svg-color); + } + } + } +} \ No newline at end of file diff --git a/website/src/components/UI/Card/Card.module.scss b/website/src/components/UI/Card/Card.module.scss index 8c5d5b49c81..7c9808fe1d3 100644 --- a/website/src/components/UI/Card/Card.module.scss +++ b/website/src/components/UI/Card/Card.module.scss @@ -33,9 +33,7 @@ // Icon variant &--icon { - position: relative; - padding-top: var(--space-10); - margin-top: var(--space-8); + text-align: center; &:hover { transform: translateY(calc(var(--space-2) * -1)); @@ -87,12 +85,6 @@ .card__content { color: #047857; } - - // &:hover { - // background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%); - // border-color: rgba(16, 185, 129, 0.3); - // } - } // based on #DBEAFE @@ -126,12 +118,6 @@ .card__content { color: #5b21b6; } - - // &:hover { - // background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); - // border-color: rgba(139, 92, 246, 0.3); - // } - } &--red { @@ -149,11 +135,6 @@ color: #991b1b; } - // &:hover { - // background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%); - // border-color: rgba(239, 68, 68, 0.3); - // } - // Buttons and interactive elements inside red cards button { background-color: rgba(255, 255, 255, 0.15); @@ -195,20 +176,16 @@ // Icon element &__icon { - position: absolute; - top: calc(-1 * var(--space-8)); - left: var(--space-6); width: var(--space-16); height: var(--space-16); background: var(--color-bg-primary); - border: var(--border-2) var(--border-solid) var(--color-border-primary); - border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; transition: var(--transition-all); z-index: 10; overflow: visible; + margin: 0 auto; } &__iconSvg { diff --git a/website/static/css/custom.scss b/website/static/css/custom.scss index 0bc7f95fd7e..6b45968b873 100644 --- a/website/static/css/custom.scss +++ b/website/static/css/custom.scss @@ -250,143 +250,13 @@ a.cover-card[target="_blank"]::after { } @media (min-width: 769px) and (max-width: 1200px) { - flex: 1 1 calc(50% - 0.75rem); - max-width: calc(50% - 0.75rem); + flex: 1 1 calc(50%); + max-width: calc(50%); } @media (min-width: 1201px) { - flex: 1 1 calc(33.333% - 1rem); - max-width: calc(33.333% - 1rem); - } -} - -// ============================================================================ -// LANDING PAGE STYLES -// ============================================================================ - -.landing { - margin: 0; - padding: 0; - width: 100%; - max-width: 100%; -} - -.landing-intro { - text-align: center; - padding: 1rem 0 3rem 0; - border-radius: 0 0 32px 32px; -} - -.landing-intro h1 { - font-size: 3.2rem; - font-weight: 700; - margin: 0 auto 1.5rem auto; - background: linear-gradient(135deg, #5f8afa 0%, #22c55e 100%); - background-clip: text; - -webkit-background-clip: text; - color: transparent; - letter-spacing: -0.02em; - line-height: 1.1; - max-width: 900px; -} - -.landing-underline { - width: 80px; - height: 2px; - background: linear-gradient(135deg, #5f8afa 0%, #22c55e 100%); - margin: 1.5rem auto 0 auto; - border-radius: 1px; -} - -.landing-hero, -.landing-footer { - text-align: center; - padding: 3rem 2rem; - background: var(--ifm-background-surface-color); - border-radius: 8px; - border: 1px solid var(--ifm-color-emphasis-200); -} - -.landing-hero { - margin-bottom: 4rem; -} - -.landing-hero h1, -.landing-footer h2 { - font-weight: 600; - color: var(--ifm-heading-color); -} - -.landing-hero h1 { - font-size: 2.5rem; - margin-bottom: 1.5rem; -} - -.landing-footer h2 { - font-size: 2.2rem; - margin-bottom: 1.5rem; - line-height: 1.2; -} - -.landing-hero p, -.landing-footer p { - font-size: 1.2rem; - color: var(--ifm-color-content-secondary); - max-width: 800px; - margin: 0 auto; - line-height: 1.6; -} - -.landing .auto-col { - margin-bottom: 3rem; -} - -// Mobile styles -@media (max-width: 768px) { - .landing { - padding-right: 0; - } - - .landing-intro { - padding: 0rem; - margin-bottom: 1rem; - } - - .landing-intro h1 { - font-size: 2.5rem; - margin: 0 auto 1rem auto; - } - - .landing-subtitle { - font-size: 1rem !important; - } - - .card__body p { - font-size: .9rem; - } - - .card__body h3 { - font-size: 1.5rem; - padding-bottom: 1rem; - } - - .landing-footer { - padding: 3rem 1.5rem; - margin: 3rem 1rem 0 1rem; - } - - .landing-footer h2 { - font-size: 1.8rem; - } - - .landing-cta { - flex-direction: column; - align-items: center; - } - - .landing-cta .button { - width: 100%; - max-width: 280px; + flex: 1 1 calc(33.333%); + max-width: calc(33.333%); } } @@ -404,78 +274,6 @@ article { padding: 0.5rem !important; } -// Landing page footer section -.landing-footer { - text-align: center; - padding: 4rem 2rem; - margin: 4rem auto 0 auto; - background: var(--ifm-background-surface-color); - border-radius: 8px; - border: 1px solid var(--ifm-color-emphasis-200); - position: relative; - max-width: 1000px; -} - -.landing-footer::before { - display: none; -} - -.landing-footer>* { - position: relative; - z-index: 2; -} - -// landing footer dark -[data-theme='dark'] .landing-footer { - background: var(--ifm-background-surface-color); - border-color: var(--ifm-color-emphasis-300); -} - -.landing-footer h2 { - font-size: 2rem; - font-weight: 600; - margin-bottom: 1.5rem; - color: var(--ifm-heading-color); - line-height: 1.2; -} - -.landing-footer p { - font-size: 1.15rem; - color: var(--ifm-color-content-secondary); - margin-bottom: 2.5rem; - line-height: 1.6; - opacity: 0.9; -} - -.landing-cta { - display: flex; - gap: 1rem; - justify-content: center; - flex-wrap: wrap; -} - -.landing-cta .button { - padding: 0.875rem 2rem; - font-size: 1rem; - font-weight: 500; - border-radius: 6px; - transition: all 0.2s ease; - text-decoration: none; - border: 1px solid var(--ifm-color-emphasis-300); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); -} - -.landing-cta .button--primary { - color: white; - border-color: var(--near-color-royal); -} - -.landing-cta .button--primary:hover { - border-color: var(--ifm-color-primary); - transform: translateY(-1px); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); -} - // ============================================================================ // LIST STYLES // ============================================================================