Merge pull request #1313 from near/landing-page

New Landing Page

package.json

@@ -25,7 +25,7 @@
     "@keypom/selector": "1.2.3",
     "@monaco-editor/react": "^4.6.0",
     "@near-js/biometric-ed25519": "0.3.0",
-    "@near-pagoda/ui": "^1.0.0",
+    "@near-pagoda/ui": "^1.0.1",
     "@near-wallet-selector/bitte-wallet": "^8.9.12",
     "@near-wallet-selector/core": "8.9.12",
     "@near-wallet-selector/here-wallet": "8.9.12",
@@ -66,9 +66,11 @@
     "next": "^13.5.6",
     "next-pwa": "^5.6.0",
     "posthog-js": "^1.155.4",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-bootstrap-typeahead": "^6.3.2",
+    "react-code-block": "^1.0.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-singleton-hook": "^3.4.0",

src/assets/images/wallets/index.ts

@@ -0,0 +1,12 @@
+export { default as binance } from './binance.webp';
+export { default as bitget } from './bitget.webp';
+export { default as bitte } from './bitte.svg';
+export { default as here } from './here.svg';
+export { default as ledger } from './ledger.webp';
+export { default as metamask } from './metamask.webp';
+export { default as meteor } from './meteor.png';
+export { default as myNear } from './myNear.png';
+export { default as safePal } from './safePal.webp';
+export { default as sender } from './sender.png';
+export { default as trustWallet } from './trustWallet.webp';
+export { default as uniswap } from './uniswap.webp';

src/components/home/Button.tsx

@@ -0,0 +1,28 @@
+import { Button as Btn } from '@near-pagoda/ui';
+import styled from 'styled-components';
+
+export const Button = styled(Btn)`
+  &[data-variant='primary'][data-fill='solid']:hover {
+    --button-color-background: var(--violet8);
+  }
+
+  &[data-variant='primary'][data-fill='solid'] {
+    --button-color-background: var(--violet9);
+    --button-color-border: var(--sand12);
+    --button-color-text: var(--bs-body-bg);
+    --button-color-icon: var(--bs-body-bg);
+    border: 0;
+  }
+`;
+
+export const BigButton = styled(Button)`
+  &[data-variant='primary'][data-fill='solid'] {
+    --button-color-background: var(--violet9);
+    --button-color-border: var(--sand12);
+    --button-color-text: var(--bs-body-bg);
+    --button-color-icon: var(--bs-body-bg);
+    border: 0;
+    height: 3rem;
+    border-radius: 0.8rem;
+  }
+`;

src/components/home/ChainAbstraction/index.tsx

@@ -0,0 +1,104 @@
+import { Flex, Grid, Text } from '@near-pagoda/ui';
+import { BookOpenText, GasPump, Signature, UserCheck } from '@phosphor-icons/react';
+
+import useDeviceType from '@/hooks/useDeviceType';
+
+import { Button } from '../Button';
+
+export const ChainAbstraction = () => {
+  const deviceType = useDeviceType();
+
+  return (
+    <>
+      <Flex
+        stack
+        gap="l"
+        gapPhone="xl"
+        gapTablet="xl"
+        style={{ padding: '0.5rem', flexGrow: 1, justifyContent: 'space-between' }}
+      >
+        <Grid
+          columns="542px minmax(0, 1fr)"
+          gap="2xl"
+          gapPhone="m"
+          gapTablet="m"
+          columnsTablet="minmax(0, 1fr)"
+          columnsPhone="minmax(0, 1fr)"
+        >
+          <Flex stack gap="m">
+            <Text as="h1" style={{ fontWeight: 'normal' }}>
+              {' '}
+              The Account Model Built for Abstraction{' '}
+            </Text>
+            <Text size="text-l" style={{ fontWeight: 'lighter' }}>
+              Built-in named accounts, a rich key system, and contracts that are wallets
+            </Text>
+          </Flex>
+          <Flex stack gap="m" style={{ justifyContent: 'center', textAlign: 'center' }}>
+            <UserCheck fill="var(--green11)" size="s" style={{ height: '95px' }} />
+            <Button
+              iconLeft={<BookOpenText fill="bold" />}
+              href="/documentation/concepts/protocol/account-model"
+              label="Read on Account Model"
+            />
+          </Flex>
+        </Grid>
+
+        <Grid
+          columns="minmax(0, 1fr) 542px"
+          gap="2xl"
+          gapPhone="m"
+          gapTablet="m"
+          columnsTablet="minmax(0, 1fr)"
+          columnsPhone="minmax(0, 1fr)"
+          style={{ margin: deviceType != 'desktop' ? '24px 0' : '0' }}
+        >
+          <Flex stack gap="m" style={{ justifyContent: 'center', gridRowEnd: deviceType == 'desktop' ? 'auto' : '3' }}>
+            <GasPump fill="var(--red9)" size="s" style={{ height: '95px' }} />
+            <Button
+              iconLeft={<BookOpenText fill="bold" />}
+              href="/documentation/concepts/abstraction/relayers"
+              label="Discover Gas Relayers"
+            />
+          </Flex>
+          <Flex stack gap="m" justify="space-between">
+            <Text as="h1" style={{ fontWeight: 'normal' }}>
+              Easily Cover your Users&apos; Transactions
+            </Text>
+            <Text size="text-l" style={{ fontWeight: 'lighter' }}>
+              Built-in meta-transactions enable your users to enjoy your application, without handling funds
+            </Text>
+          </Flex>
+        </Grid>
+
+        <Grid
+          columns="542px minmax(0, 1fr)"
+          gap="2xl"
+          gapPhone="m"
+          gapTablet="m"
+          columnsTablet="minmax(0, 1fr)"
+          columnsPhone="minmax(0, 1fr)"
+        >
+          <Flex stack gap="m" style={{ textAlign: 'left' }}>
+            <Text as="h1" style={{ fontWeight: 'normal' }}>
+              {' '}
+              Control Accounts Across Multiple Chains{' '}
+            </Text>
+            <Text size="text-l" style={{ fontWeight: 'lighter' }}>
+              Near accounts can sign transactions for chains like Ethereum, Bitcoin or Doge
+            </Text>
+          </Flex>
+          <Flex stack gap="m" style={{ justifyContent: 'center', textAlign: 'center' }}>
+            <Signature fill="var(--violet8)" size="s" style={{ height: '95px' }} />
+
+            <Button
+              iconLeft={<BookOpenText fill="bold" />}
+              href="/documentation/build/chain-abstraction/chain-signatures/getting-started"
+              label="Discover Chain Signatures"
+            />
+          </Flex>
+        </Grid>
+      </Flex>
+    </>
+  );
+};

src/components/home/Code.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { CodeBlock } from 'react-code-block/dist/code-block';
+import styled from 'styled-components';
+
+const CodeWrapper = styled.div<{
+  height?: number;
+}>`
+  background-color: rgb(41, 45, 62);
+  padding: 1rem;
+  border-radius: 0.4rem;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  position: relative;
+  max-height: ${({ height }) => (height ? `${height}px` : 'none')};
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+
+const LineContent = styled(CodeBlock.LineContent)`
+  padding: 2px 0 2px 8px;
+  &:hover {
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+`;
+
+export const Code = ({ height, code, language }: { height?: number; code: string; language: string }) => {
+  return (
+    <CodeBlock code={code} language={language}>
+      <CodeWrapper height={height}>
+        <CodeBlock.Code style={{ marginBottom: 0, overflowX: 'auto' }}>
+          <LineContent>
+            <CodeBlock.Token />
+          </LineContent>
+        </CodeBlock.Code>
+      </CodeWrapper>
+    </CodeBlock>
+  );
+};

src/components/home/Contracts/index.tsx

@@ -0,0 +1,156 @@
+import { Flex, Grid, Tabs, Text, Title } from '@near-pagoda/ui';
+import { BookOpenText } from '@phosphor-icons/react';
+import { useState } from 'react';
+
+import { Button } from '../Button';
+import { Code } from '../Code';
+
+const npxCNA = `
+$> npx create-near-app@latest
+
+✅ What do you want to build? › A Smart Contract
+✅ Name your project to create a contract: hello-near
+✅ Success! Created 'hello-near', a smart contract in Typescript
+
+Build, test, and deploy the project using your package manager:
+ * npm install
+ * npm run build
+ * npm run test
+`;
+
+const helloNearTS = `
+import { NearBindgen, near, call, view } from 'near-sdk-js';
+
+@NearBindgen({})
+class HelloNear {
+  greeting: string = 'Hello';
+
+  static schema = { "greeting": "string" };
+
+  @view({})
+  get_greeting(): string {
+    return this.greeting;
+  }
+
+  @call({})
+  set_greeting({ greeting }: { greeting: string }): void {
+    this.greeting = greeting;
+  }
+}`;
+
+const cargoNN = `
+$> cargo near new
+
+> Enter a new project name to create a contract: hello-near
+✅ New project is created at 'hello-near'
+
+
+Now you can build, test, and deploy your project using cargo-near:
+ * cargo near build
+ * cargo test
+ * cargo near deploy
+`;
+
+const helloNearRS = `
+use near_sdk::{log, near};
+
+#[near(contract_state)]
+pub struct Contract {
+    greeting: 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;
+    }
+}
+
+impl Default for Contract {
+    fn default() -> Self {
+        Self { greeting: "Hello".to_string() }
+    }
+}`;
+
+export const Contracts = () => {
+  const [language, setLanguage] = useState('js');
+
+  return (
+    <>
+      <Grid
+        columns="55% minmax(0, 45%)"
+        gap="xl"
+        columnsPhone="minmax(0, 1fr)"
+        columnsTablet="minmax(0, 1fr)"
+        style={{ flexGrow: 1, padding: '0.5rem' }}
+      >
+        <Flex stack style={{ justifyContent: 'space-between' }}>
+          <Flex stack gap="m">
+            <Text as="h1" style={{ fontWeight: 'normal' }}>
+              {' '}
+              Building Contracts Has Never Been Easier{' '}
+            </Text>
+            <Text size="text-l" style={{ fontWeight: 'lighter' }}>
+              Develop, test and deploy contracts using the stack you already know and love
+            </Text>
+          </Flex>
+
+          <Tabs.Root value={language}>
+            <Tabs.List style={{ marginBottom: 'var(--gap-s)', fontSize: 'small' }}>
+              <Tabs.Trigger onClick={() => setLanguage('js')} value="js">
+                🌐 Javascript
+              </Tabs.Trigger>
+              <Tabs.Trigger onClick={() => setLanguage('rust')} value="rust">
+                🦀 Rust
+              </Tabs.Trigger>
+            </Tabs.List>
+            <Tabs.Content value="js">
+              <Code code={npxCNA} language="sh" />
+            </Tabs.Content>
+
+            <Tabs.Content value="rust">
+              <Code code={cargoNN} language="sh" />
+            </Tabs.Content>
+          </Tabs.Root>
+        </Flex>
+
+        <Tabs.Root value={language}>
+          <Flex stack style={{ flexGrow: 1, justifyContent: 'space-between' }}>
+            <Tabs.Content value="js">
+              <Title> One Command Setup </Title>
+              <Code code={`npx create-near-app@latest`} language="bash" />
+            </Tabs.Content>
+
+            <Tabs.Content value="js">
+              <Title> Easy to Read Contracts </Title>
+              <Code code={helloNearTS} height={410} language="typescript" />
+            </Tabs.Content>
+
+            <Tabs.Content value="rust">
+              <Title> One Command Setup </Title>
+              <Code code={`cargo near new`} language="bash" />
+            </Tabs.Content>
+
+            <Tabs.Content value="rust">
+              <Title> Easy to Read Contracts </Title>
+              <Code code={helloNearRS} height={410} language="rust" />
+            </Tabs.Content>
+          </Flex>
+        </Tabs.Root>
+      </Grid>
+
+      <Button
+        size="large"
+        iconLeft={<BookOpenText fill="bold" />}
+        href="/documentation/build/smart-contracts/quickstart"
+        label="Start Now!"
+        style={{ marginTop: 'var(--gap-m)' }}
+      />
+    </>
+  );
+};