Skip to content

Commit 4ea529d

Browse files
alexander-seialexander-sei
authored
Merge pull request #244 from sei-protocol/feat/landing-page
feat: new landing page
2 parents ea3e787 + 95464d1 commit 4ea529d

File tree

11 files changed

+883
-76
lines changed

11 files changed

+883
-76
lines changed

‎content/index.mdx

+113-45
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,124 @@
22
title: 'Home'
33
---
44

5-
import { Cards } from 'nextra/components';
6-
import { IconBolt, IconLock, IconBook, IconCode, IconDroplet } from '@tabler/icons-react';
7-
import { EvmWalletConnect, OfficeHoursCard } from '../src/components';
5+
import { IconBolt, IconCode, IconClipboardText, IconLock, IconWallet, IconBook, IconTerminal2, IconServer, IconDeviceDesktop, IconExternalLink, IconChevronRight } from '@tabler/icons-react';
6+
import { OfficeHoursCard, EvmWalletConnect, NetworkTabs } from '../src/components';
87
import HeaderIcon from '../public/assets/header.svg';
98
import Image from 'next/image';
109

11-
<div className="flex justify-center w-full">
12-
<Image priority src={HeaderIcon} alt="Follow us on Twitter" className="max-w-full w-[600px] bg-neutral-900 dark:bg-transparent rounded-2xl p-8" />
10+
<div className="flex flex-col items-center w-full mb-12">
11+
<div className="flex flex-col items-center mb-6">
12+
<Image priority src={HeaderIcon} alt="Sei Network" className="max-w-[280px] bg-transparent mb-5" />
13+
<h1 className="text-3xl font-bold text-center mb-4">Sei Documentation</h1>
14+
</div>
15+
<p className="text-lg text-neutral-600 dark:text-neutral-400 text-center max-w-2xl mb-6">
16+
The first parallelized EVM blockchain delivering unmatched scalability and speed.
17+
</p>
18+
19+
<div>
20+
<EvmWalletConnect />
21+
</div>
22+
</div>
23+
<div className="mb-14">
24+
<OfficeHoursCard />
1325
</div>
1426

15-
<br />
16-
17-
# <center>Sei Documentation</center>
18-
19-
<br />
20-
21-
<center>Sei is the first parallelized EVM blockchain delivering unmatched scalability and speed.</center>
22-
23-
## Get Started
24-
25-
<Cards>
26-
<Cards.Card icon={<IconBook />} title="Learn more about Sei" href="/learn" />
27-
<Cards.Card icon={<IconCode />} title="Build on the EVM" href="/evm" />
28-
<Cards.Card icon={<IconDroplet />} title="Testnet & Devnet Faucet" href="/learn/faucet" />
29-
<Cards.Card icon={<IconLock />} title="Run a node" href="/node" />
30-
<Cards.Card icon={<IconBolt />} title="User Quickstart" href="/learn/user-quickstart" />
31-
</Cards>
32-
33-
## EVM
34-
35-
- **Chain ID**: 1329 (0x531)
36-
- **RPC URL**: [https://evm-rpc.sei-apis.com](https://evm-rpc.sei-apis.com)
37-
- **Explorers**: [SeiTrace](https://seitrace.com/?chain=pacific-1), [SeiScan](https://www.seiscan.app/?chain=pacific-1)
38-
- **Testnet & Devnet**: [Chain Information](/evm/networks)
39-
40-
<br />
41-
42-
<Cards.Card arrow icon={<IconCode />} title="Start building with the EVM" href="/evm" />
43-
44-
## Cosmos
45-
46-
- **Chain ID**: pacific-1
47-
- **RPC URL**: [https://rpc.sei-apis.com](https://rpc.sei-apis.com)
48-
- **Explorer**: [SeiTrace](https://seitrace.com/?chain=pacific-1), [SeiScan](https://www.seiscan.app/?chain=pacific-1)
49-
- **Testnet & Devnet**: [Chain Information](/cosmwasm/networks)
50-
51-
<OfficeHoursCard />
27+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">
28+
<a href="/build/evm-general" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
29+
<div className="flex items-center gap-4">
30+
<IconCode className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
31+
<div>
32+
<h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Deploy a smart contract</h3>
33+
<p className="text-sm text-neutral-600 dark:text-neutral-400">Deploy EVM contracts with 100x better performance than standard Ethereum.</p>
34+
</div>
35+
</div>
36+
<IconChevronRight className="h-4 w-4 text-neutral-500" />
37+
</a>
38+
39+
<a href="/build/dev-frontend-dapps" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
40+
<div className="flex items-center gap-4">
41+
<IconBolt className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
42+
<div>
43+
<h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Build a frontend</h3>
44+
<p className="text-sm text-neutral-600 dark:text-neutral-400">Create powerful dApps with Sei's fast finality and high throughput.</p>
45+
</div>
46+
</div>
47+
<IconChevronRight className="h-4 w-4 text-neutral-500" />
48+
</a>
49+
</div>
5250

53-
## Connect & Link Wallet
51+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">
52+
<a href="/node" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
53+
<div className="flex items-start gap-4">
54+
<IconLock className="h-6 w-6 text-neutral-800 dark:text-neutral-300 flex-shrink-0 mt-1" />
55+
<div className="flex-1">
56+
<h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Run a node</h3>
57+
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-3">Participate in the Sei network by running:</p>
58+
<div className="space-y-2">
59+
<a href="/node/full-node" className="text-xs flex items-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors">
60+
<IconServer className="h-3.5 w-3.5 mr-1.5 flex-shrink-0" />
61+
<span>Full Node</span>
62+
</a>
63+
<a href="/node/validator" className="text-xs flex items-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors">
64+
<IconLock className="h-3.5 w-3.5 mr-1.5 flex-shrink-0" />
65+
<span>Validator Node</span>
66+
</a>
67+
</div>
68+
</div>
69+
</div>
70+
<IconChevronRight className="h-4 w-4 text-neutral-500" />
71+
</a>
72+
73+
<a href="/build/resources-tools-and-resources" className="group flex items-center justify-between rounded-xl p-6 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all">
74+
<div className="flex items-start gap-4">
75+
<IconClipboardText className="h-6 w-6 text-neutral-800 dark:text-neutral-300 flex-shrink-0 mt-1" />
76+
<div className="flex-1">
77+
<h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Tools & Integrations</h3>
78+
<p className="text-sm text-neutral-600 dark:text-neutral-400">Discover the ecosystem of tools and integrations.</p>
79+
</div>
80+
</div>
81+
<IconChevronRight className="h-4 w-4 text-neutral-500" />
82+
</a>
83+
</div>
5484

55-
> Using this wallet connection will automatically link your EVM and Cosmos addresses.
85+
<div className="p-6 mb-10 rounded-xl bg-neutral-900/5 dark:bg-neutral-900/95 border border-neutral-200/50 dark:border-neutral-800 shadow-sm">
86+
<div className="flex items-center mb-6">
87+
<div className="mr-3 w-5 h-5 bg-gradient-to-br from-neutral-300 to-neutral-400 dark:from-neutral-800 dark:to-neutral-900 rounded-sm shadow-sm flex items-center justify-center">
88+
<IconTerminal2 className="w-3 h-3 text-neutral-600 dark:text-white" />
89+
</div>
90+
<h2 className="text-xl font-medium text-neutral-800 dark:text-white">Network Information</h2>
91+
</div>
92+
93+
<NetworkTabs />
94+
</div>
5695

57-
<EvmWalletConnect />
96+
<div className="mb-8">
97+
<div className="flex items-center mb-5">
98+
<div className="mr-3 w-5 h-5 bg-gradient-to-br from-neutral-800 to-neutral-900 dark:from-neutral-700 dark:to-neutral-800 rounded-sm shadow-sm flex items-center justify-center">
99+
<IconClipboardText className="w-3 h-3 text-white" />
100+
</div>
101+
<h2 className="text-xl font-medium">Resources</h2>
102+
</div>
103+
104+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
105+
<a href="/learn/wallet-setup" className="group flex items-start no-underline rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all">
106+
<div className="w-10 h-10 flex items-center justify-center rounded-lg bg-neutral-900/10 dark:bg-neutral-800/30 mr-4 group-hover:bg-neutral-800 group-hover:text-white transition-colors">
107+
<IconWallet className="h-5 w-5 text-neutral-800 dark:text-neutral-300 group-hover:text-white transition-colors" />
108+
</div>
109+
<div>
110+
<h3 className="text-base font-medium mb-1 text-neutral-800 dark:text-neutral-200">Wallet Setup</h3>
111+
<p className="text-sm text-neutral-600 dark:text-neutral-400">Configure your wallet to interact with Sei Network.</p>
112+
</div>
113+
</a>
114+
115+
<a href="/learn" className="group flex items-start no-underline rounded-xl p-5 bg-neutral-900/5 dark:bg-neutral-900/20 border border-neutral-200/50 dark:border-neutral-800/50 hover:bg-white dark:hover:bg-neutral-900 hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-md transition-all">
116+
<div className="w-10 h-10 flex items-center justify-center rounded-lg bg-neutral-900/10 dark:bg-neutral-800/30 mr-4 group-hover:bg-neutral-800 group-hover:text-white transition-colors">
117+
<IconBook className="h-5 w-5 text-neutral-800 dark:text-neutral-300 group-hover:text-white transition-colors" />
118+
</div>
119+
<div>
120+
<h3 className="text-base font-medium mb-1 text-neutral-800 dark:text-neutral-200">Learn about Sei</h3>
121+
<p className="text-sm text-neutral-600 dark:text-neutral-400">Discover what makes Sei the fastest parallelized blockchain.</p>
122+
</div>
123+
</a>
124+
</div>
125+
</div>

‎src/components/Collapsible/index.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
5+
6+
interface CollapsibleProps {
7+
title: string;
8+
icon?: React.ReactNode;
9+
children: React.ReactNode;
10+
}
11+
12+
export function Collapsible({ title, icon, children }: CollapsibleProps) {
13+
return (
14+
<details className='border border-neutral-200 dark:border-neutral-800 rounded-lg overflow-hidden mb-4 group'>
15+
<summary className='p-4 flex items-center justify-between bg-neutral-50 dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer'>
16+
<div className='flex items-center'>
17+
{icon}
18+
<span className='font-semibold ml-2'>{title}</span>
19+
</div>
20+
<div className='flex items-center'>
21+
<IconChevronDown className='w-5 h-5 text-neutral-500 group-open:hidden' />
22+
<IconChevronUp className='w-5 h-5 text-neutral-500 hidden group-open:block' />
23+
</div>
24+
</summary>
25+
<div className='p-4 bg-white dark:bg-neutral-900'>{children}</div>
26+
</details>
27+
);
28+
}

‎src/components/CompactExplorerSearch/index.tsx

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
'use client';
2+
3+
import React, { useState } from 'react';
4+
import { IconSearch, IconArrowRight, IconArrowsExchange } from '@tabler/icons-react';
5+
6+
type Explorer = 'seitrace' | 'seiscan';
7+
8+
export const CompactExplorerSearch = () => {
9+
const [address, setAddress] = useState('');
10+
const [error, setError] = useState('');
11+
const [selectedExplorer, setSelectedExplorer] = useState<Explorer>('seitrace');
12+
13+
const isValidAddress = (addr: string) => {
14+
const seiPattern = /^sei[a-z0-9]{8,}$/i;
15+
const evmPattern = /^0x[a-fA-F0-9]{40}$/;
16+
return seiPattern.test(addr) || evmPattern.test(addr);
17+
};
18+
19+
const getExplorerUrl = (addr: string) => {
20+
const chainParam = '?chain=pacific-1';
21+
return selectedExplorer === 'seitrace' ? `https://seitrace.com/address/${addr}${chainParam}` : `https://www.seiscan.app/address/${addr}${chainParam}`;
22+
};
23+
24+
const toggleExplorer = () => {
25+
setSelectedExplorer(selectedExplorer === 'seitrace' ? 'seiscan' : 'seitrace');
26+
setError('');
27+
};
28+
29+
const handleSearch = (e: React.FormEvent) => {
30+
e.preventDefault();
31+
const trimmedAddress = address.trim();
32+
33+
if (!trimmedAddress) {
34+
setError('Please enter an address');
35+
return;
36+
}
37+
38+
if (!isValidAddress(trimmedAddress)) {
39+
setError('Invalid Sei or EVM address');
40+
return;
41+
}
42+
43+
window.open(getExplorerUrl(trimmedAddress), '_blank');
44+
setError('');
45+
};
46+
47+
return (
48+
<div className='my-6 relative'>
49+
<div className='flex items-center mb-3'>
50+
<div className='flex-1 flex items-center'>
51+
<IconSearch className='w-4 h-4 text-neutral-500 dark:text-neutral-400 mr-2' />
52+
<span className='text-sm font-medium text-neutral-700 dark:text-neutral-300'>Search the blockchain</span>
53+
</div>
54+
55+
<div className='flex items-center gap-3 text-xs'>
56+
<button
57+
onClick={() => setSelectedExplorer('seitrace')}
58+
className={`px-2 py-0.5 rounded-full transition-colors ${
59+
selectedExplorer === 'seitrace'
60+
? 'bg-red-9/10 text-red-9 dark:bg-red-7/20 dark:text-red-7 font-medium'
61+
: 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
62+
}`}>
63+
SeiTrace
64+
</button>
65+
66+
<span className='text-neutral-300 dark:text-neutral-600'>|</span>
67+
68+
<button
69+
onClick={() => setSelectedExplorer('seiscan')}
70+
className={`px-2 py-0.5 rounded-full transition-colors ${
71+
selectedExplorer === 'seiscan'
72+
? 'bg-red-9/10 text-red-9 dark:bg-red-7/20 dark:text-red-7 font-medium'
73+
: 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
74+
}`}>
75+
SeiScan
76+
</button>
77+
</div>
78+
</div>
79+
80+
<form onSubmit={handleSearch} className='relative'>
81+
<div className='relative'>
82+
<input
83+
type='text'
84+
placeholder={`Enter Sei or EVM address to search ${selectedExplorer === 'seitrace' ? 'SeiTrace' : 'SeiScan'}`}
85+
value={address}
86+
onChange={(e) => {
87+
setAddress(e.target.value);
88+
if (error) setError('');
89+
}}
90+
className={`w-full py-2.5 pl-3 pr-12 rounded-md border ${
91+
error
92+
? 'border-red-9/50 dark:border-red-7/50 focus:ring-red-9/30 dark:focus:ring-red-7/30'
93+
: 'border-neutral-200 dark:border-neutral-800 focus:ring-neutral-300 dark:focus:ring-neutral-700'
94+
} bg-white dark:bg-neutral-900 text-sm focus:outline-none focus:ring-2 transition-all`}
95+
/>
96+
<button
97+
type='submit'
98+
className='absolute right-1.5 top-1/2 -translate-y-1/2 p-1.5 rounded-md bg-red-9 dark:bg-red-7 text-white hover:bg-red-10 dark:hover:bg-red-8 transition-colors'>
99+
<IconArrowRight className='w-4 h-4' />
100+
</button>
101+
</div>
102+
103+
{error && (
104+
<div className='absolute left-0 -bottom-6 text-xs text-red-9 dark:text-red-7 flex items-center'>
105+
<span className='inline-block w-1 h-1 rounded-full bg-red-9 dark:bg-red-7 mr-1.5'></span>
106+
{error}
107+
</div>
108+
)}
109+
</form>
110+
</div>
111+
);
112+
};
113+
114+
export default CompactExplorerSearch;

‎src/components/CopyButton/index.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use client';
2+
3+
import { IconCopy } from '@tabler/icons-react';
4+
import { useState } from 'react';
5+
6+
interface CopyButtonProps {
7+
textToCopy: string;
8+
}
9+
10+
export const CopyButton = ({ textToCopy }: CopyButtonProps) => {
11+
const [copied, setCopied] = useState(false);
12+
13+
const handleCopy = () => {
14+
navigator.clipboard.writeText(textToCopy);
15+
setCopied(true);
16+
setTimeout(() => setCopied(false), 2000);
17+
};
18+
19+
return (
20+
<button
21+
className='text-neutral-500 hover:text-red-9 dark:hover:text-red-7 transition-colors focus:outline-none'
22+
onClick={handleCopy}
23+
title='Copy to clipboard'
24+
aria-label='Copy to clipboard'>
25+
<IconCopy className={`w-4 h-4 ${copied ? 'text-green-500' : ''}`} />
26+
</button>
27+
);
28+
};

‎src/components/EvmWalletConnect/EvmWalletConnect.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,16 @@ const WalletComponent = () => {
6161
}
6262

6363
return (
64-
<Button onClick={() => setShowAuthFlow(true)} className='flex flex-row gap-4 !bg-[#9e1f19] !p-6 !rounded-2xl cursor-pointer hover:!bg-[#9e1f19aa]'>
65-
<p className='font-bold'>Select Your Wallet</p>
66-
</Button>
64+
<div className='flex flex-col gap-4 mt-8'>
65+
<Button onClick={() => setShowAuthFlow(true)} className='flex flex-row gap-4 !bg-[#9e1f19] !p-6 !rounded-2xl cursor-pointer hover:!bg-[#9e1f19aa]'>
66+
<p className='font-bold'>Connect & Link Wallet</p>
67+
</Button>
68+
</div>
6769
);
6870
};
6971

7072
if (!network) {
71-
return <Box className='w-full mt-4'>{renderContent()}</Box>;
73+
return <Box className='w-full'>{renderContent()}</Box>;
7274
}
7375

7476
return (

0 commit comments

Comments
 (0)