Landing page fixes

content/index.mdx

@@ -2,56 +2,124 @@
 title: 'Home'
 ---
 
-import { Cards } from 'nextra/components';
-import { IconBolt, IconLock, IconBook, IconCode, IconDroplet } from '@tabler/icons-react';
-import { EvmWalletConnect, OfficeHoursCard } from '../src/components';
+import { IconBolt, IconCode, IconClipboardText, IconLock, IconWallet, IconBook, IconTerminal2, IconServer, IconDeviceDesktop, IconExternalLink, IconChevronRight } from '@tabler/icons-react';
+import { OfficeHoursCard, EvmWalletConnect, NetworkTabs } from '../src/components';
 import HeaderIcon from '../public/assets/header.svg';
 import Image from 'next/image';
 
-<div className="flex justify-center w-full">
-  <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" />
+<div className="flex flex-col items-center w-full mb-12">
+  <div className="flex flex-col items-center mb-6">
+    <Image priority src={HeaderIcon} alt="Sei Network" className="max-w-[280px] bg-transparent mb-5" />
+    <h1 className="text-3xl font-bold text-center mb-4">Sei Documentation</h1>
+  </div>
+  <p className="text-lg text-neutral-600 dark:text-neutral-400 text-center max-w-2xl mb-6">
+    The first parallelized EVM blockchain delivering unmatched scalability and speed.
+  </p>
+
+  <div>
+    <EvmWalletConnect />
+  </div>
+</div>
+<div className="mb-14">
+  <OfficeHoursCard />
 </div>
 
-<br />
-
-# <center>Sei Documentation</center>
-
-<br />
-
-<center>Sei is the first parallelized EVM blockchain delivering unmatched scalability and speed.</center>
-
-## Get Started
-
-<Cards>
-  <Cards.Card icon={<IconBook />} title="Learn more about Sei" href="/learn" />
-  <Cards.Card icon={<IconCode />} title="Build on the EVM" href="/evm" />
-  <Cards.Card icon={<IconDroplet />} title="Testnet & Devnet Faucet" href="/learn/faucet" />
-  <Cards.Card icon={<IconLock />} title="Run a node" href="/node" />
-  <Cards.Card icon={<IconBolt />} title="User Quickstart" href="/learn/user-quickstart" />
-</Cards>
-
-## EVM
-
-- **Chain ID**: 1329 (0x531)
-- **RPC URL**: [https://evm-rpc.sei-apis.com](https://evm-rpc.sei-apis.com)
-- **Explorers**: [SeiTrace](https://seitrace.com/?chain=pacific-1), [SeiScan](https://www.seiscan.app/?chain=pacific-1)
-- **Testnet & Devnet**: [Chain Information](/evm/networks)
-
-<br />
-
-<Cards.Card arrow icon={<IconCode />} title="Start building with the EVM" href="/evm" />
-
-## Cosmos
-
-- **Chain ID**: pacific-1
-- **RPC URL**: [https://rpc.sei-apis.com](https://rpc.sei-apis.com)
-- **Explorer**: [SeiTrace](https://seitrace.com/?chain=pacific-1), [SeiScan](https://www.seiscan.app/?chain=pacific-1)
-- **Testnet & Devnet**: [Chain Information](/cosmwasm/networks)
+<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">
+  <a href="/evm/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">
+    <div className="flex items-center gap-4">
+      <IconCode className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+      <div>
+        <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Deploy a smart contract</h3>
+        <p className="text-sm text-neutral-600 dark:text-neutral-400">Deploy EVM contracts with 100x better performance than standard Ethereum.</p>
+      </div>
+    </div>
+    <IconChevronRight className="h-4 w-4 text-neutral-500" />
+  </a>
+
+  <a href="/evm/building-a-frontend" 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">
+    <div className="flex items-center gap-4">
+      <IconBolt className="h-6 w-6 text-neutral-800 dark:text-neutral-300" />
+      <div>
+        <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Build a frontend</h3>
+        <p className="text-sm text-neutral-600 dark:text-neutral-400">Create powerful dApps with Sei's fast finality and high throughput.</p>
+      </div>
+    </div>
+    <IconChevronRight className="h-4 w-4 text-neutral-500" />
+  </a>
+</div>
 
-<OfficeHoursCard />
+<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">
+  <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">
+    <div className="flex items-start gap-4">
+      <IconLock className="h-6 w-6 text-neutral-800 dark:text-neutral-300 flex-shrink-0 mt-1" />
+      <div className="flex-1">
+        <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Run a node</h3>
+        <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-3">Participate in the Sei network by running:</p>
+        <div className="space-y-2">
+          <a href="/node/node-operators" className="text-xs flex items-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors">
+            <IconServer className="h-3.5 w-3.5 mr-1.5 flex-shrink-0" />
+            <span>Full Node</span>
+          </a>
+          <a href="/node/validators" className="text-xs flex items-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors">
+            <IconLock className="h-3.5 w-3.5 mr-1.5 flex-shrink-0" />
+            <span>Validator Node</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <IconChevronRight className="h-4 w-4 text-neutral-500" />
+  </a>
+
+  <a href="/evm/solidity-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">
+    <div className="flex items-start gap-4">
+      <IconClipboardText className="h-6 w-6 text-neutral-800 dark:text-neutral-300 flex-shrink-0 mt-1" />
+      <div className="flex-1">
+        <h3 className="text-lg font-medium text-neutral-800 dark:text-neutral-200">Tools & Integrations</h3>
+        <p className="text-sm text-neutral-600 dark:text-neutral-400">Discover the ecosystem of tools and integrations.</p>
+      </div>
+    </div>
+    <IconChevronRight className="h-4 w-4 text-neutral-500" />
+  </a>
+</div>
 
-## Connect & Link Wallet
+<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">
+  <div className="flex items-center mb-6">
+    <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">
+      <IconTerminal2 className="w-3 h-3 text-neutral-600 dark:text-white" />
+    </div>
+    <h2 className="text-xl font-medium text-neutral-800 dark:text-white">Network Information</h2>
+  </div>
 
-> Using this wallet connection will automatically link your EVM and Cosmos addresses.
+  <NetworkTabs />
+</div>
 
-<EvmWalletConnect />
+<div className="mb-8">
+  <div className="flex items-center mb-5">
+    <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">
+      <IconClipboardText className="w-3 h-3 text-white" />
+    </div>
+    <h2 className="text-xl font-medium">Resources</h2>
+  </div>
+
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <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">
+      <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">
+        <IconWallet className="h-5 w-5 text-neutral-800 dark:text-neutral-300 group-hover:text-white transition-colors" />
+      </div>
+      <div>
+        <h3 className="text-base font-medium mb-1 text-neutral-800 dark:text-neutral-200">Wallet Setup</h3>
+        <p className="text-sm text-neutral-600 dark:text-neutral-400">Configure your wallet to interact with Sei Network.</p>
+      </div>
+    </a>
+
+    <a href="/learn/wallets" 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">
+      <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">
+        <IconBook className="h-5 w-5 text-neutral-800 dark:text-neutral-300 group-hover:text-white transition-colors" />
+      </div>
+      <div>
+        <h3 className="text-base font-medium mb-1 text-neutral-800 dark:text-neutral-200">Learn about Sei</h3>
+        <p className="text-sm text-neutral-600 dark:text-neutral-400">Discover what makes Sei the fastest parallelized blockchain.</p>
+      </div>
+    </a>
+  </div>
+</div>

src/components/Collapsible/index.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
+
+interface CollapsibleProps {
+	title: string;
+	icon?: React.ReactNode;
+	children: React.ReactNode;
+}
+
+export function Collapsible({ title, icon, children }: CollapsibleProps) {
+	return (
+		<details className='border border-neutral-200 dark:border-neutral-800 rounded-lg overflow-hidden mb-4 group'>
+			<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'>
+				<div className='flex items-center'>
+					{icon}
+					<span className='font-semibold ml-2'>{title}</span>
+				</div>
+				<div className='flex items-center'>
+					<IconChevronDown className='w-5 h-5 text-neutral-500 group-open:hidden' />
+					<IconChevronUp className='w-5 h-5 text-neutral-500 hidden group-open:block' />
+				</div>
+			</summary>
+			<div className='p-4 bg-white dark:bg-neutral-900'>{children}</div>
+		</details>
+	);
+}

src/components/CompactExplorerSearch/index.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React, { useState } from 'react';
+import { IconSearch, IconArrowRight, IconArrowsExchange } from '@tabler/icons-react';
+
+type Explorer = 'seitrace' | 'seiscan';
+
+export const CompactExplorerSearch = () => {
+	const [address, setAddress] = useState('');
+	const [error, setError] = useState('');
+	const [selectedExplorer, setSelectedExplorer] = useState<Explorer>('seitrace');
+
+	const isValidAddress = (addr: string) => {
+		const seiPattern = /^sei[a-z0-9]{8,}$/i;
+		const evmPattern = /^0x[a-fA-F0-9]{40}$/;
+		return seiPattern.test(addr) || evmPattern.test(addr);
+	};
+
+	const getExplorerUrl = (addr: string) => {
+		const chainParam = '?chain=pacific-1';
+		return selectedExplorer === 'seitrace' ? `https://seitrace.com/address/${addr}${chainParam}` : `https://www.seiscan.app/address/${addr}${chainParam}`;
+	};
+
+	const toggleExplorer = () => {
+		setSelectedExplorer(selectedExplorer === 'seitrace' ? 'seiscan' : 'seitrace');
+		setError('');
+	};
+
+	const handleSearch = (e: React.FormEvent) => {
+		e.preventDefault();
+		const trimmedAddress = address.trim();
+
+		if (!trimmedAddress) {
+			setError('Please enter an address');
+			return;
+		}
+
+		if (!isValidAddress(trimmedAddress)) {
+			setError('Invalid Sei or EVM address');
+			return;
+		}
+
+		window.open(getExplorerUrl(trimmedAddress), '_blank');
+		setError('');
+	};
+
+	return (
+		<div className='my-6 relative'>
+			<div className='flex items-center mb-3'>
+				<div className='flex-1 flex items-center'>
+					<IconSearch className='w-4 h-4 text-neutral-500 dark:text-neutral-400 mr-2' />
+					<span className='text-sm font-medium text-neutral-700 dark:text-neutral-300'>Search the blockchain</span>
+				</div>
+
+				<div className='flex items-center gap-3 text-xs'>
+					<button
+						onClick={() => setSelectedExplorer('seitrace')}
+						className={`px-2 py-0.5 rounded-full transition-colors ${
+							selectedExplorer === 'seitrace'
+								? 'bg-red-9/10 text-red-9 dark:bg-red-7/20 dark:text-red-7 font-medium'
+								: 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
+						}`}>
+						SeiTrace
+					</button>
+
+					<span className='text-neutral-300 dark:text-neutral-600'>|</span>
+
+					<button
+						onClick={() => setSelectedExplorer('seiscan')}
+						className={`px-2 py-0.5 rounded-full transition-colors ${
+							selectedExplorer === 'seiscan'
+								? 'bg-red-9/10 text-red-9 dark:bg-red-7/20 dark:text-red-7 font-medium'
+								: 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
+						}`}>
+						SeiScan
+					</button>
+				</div>
+			</div>
+
+			<form onSubmit={handleSearch} className='relative'>
+				<div className='relative'>
+					<input
+						type='text'
+						placeholder={`Enter Sei or EVM address to search ${selectedExplorer === 'seitrace' ? 'SeiTrace' : 'SeiScan'}`}
+						value={address}
+						onChange={(e) => {
+							setAddress(e.target.value);
+							if (error) setError('');
+						}}
+						className={`w-full py-2.5 pl-3 pr-12 rounded-md border ${
+							error
+								? 'border-red-9/50 dark:border-red-7/50 focus:ring-red-9/30 dark:focus:ring-red-7/30'
+								: 'border-neutral-200 dark:border-neutral-800 focus:ring-neutral-300 dark:focus:ring-neutral-700'
+						} bg-white dark:bg-neutral-900 text-sm focus:outline-none focus:ring-2 transition-all`}
+					/>
+					<button
+						type='submit'
+						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'>
+						<IconArrowRight className='w-4 h-4' />
+					</button>
+				</div>
+
+				{error && (
+					<div className='absolute left-0 -bottom-6 text-xs text-red-9 dark:text-red-7 flex items-center'>
+						<span className='inline-block w-1 h-1 rounded-full bg-red-9 dark:bg-red-7 mr-1.5'></span>
+						{error}
+					</div>
+				)}
+			</form>
+		</div>
+	);
+};
+
+export default CompactExplorerSearch;

src/components/CopyButton/index.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { IconCopy } from '@tabler/icons-react';
+import { useState } from 'react';
+
+interface CopyButtonProps {
+	textToCopy: string;
+}
+
+export const CopyButton = ({ textToCopy }: CopyButtonProps) => {
+	const [copied, setCopied] = useState(false);
+
+	const handleCopy = () => {
+		navigator.clipboard.writeText(textToCopy);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<button
+			className='text-neutral-500 hover:text-red-9 dark:hover:text-red-7 transition-colors focus:outline-none'
+			onClick={handleCopy}
+			title='Copy to clipboard'
+			aria-label='Copy to clipboard'>
+			<IconCopy className={`w-4 h-4 ${copied ? 'text-green-500' : ''}`} />
+		</button>
+	);
+};

src/components/EvmWalletConnect/EvmWalletConnect.tsx

@@ -61,14 +61,16 @@ const WalletComponent = () => {
 		}
 
 		return (
-			<Button onClick={() => setShowAuthFlow(true)} className='flex flex-row gap-4 !bg-[#9e1f19] !p-6 !rounded-2xl cursor-pointer hover:!bg-[#9e1f19aa]'>
-				<p className='font-bold'>Select Your Wallet</p>
-			</Button>
+			<div className='flex flex-col gap-4 mt-8'>
+				<Button onClick={() => setShowAuthFlow(true)} className='flex flex-row gap-4 !bg-[#9e1f19] !p-6 !rounded-2xl cursor-pointer hover:!bg-[#9e1f19aa]'>
+					<p className='font-bold'>Connect & Link Wallet</p>
+				</Button>
+			</div>
 		);
 	};
 
 	if (!network) {
-		return <Box className='w-full mt-4'>{renderContent()}</Box>;
+		return <Box className='w-full'>{renderContent()}</Box>;
 	}
 
 	return (