@sei-js/create-sei 1.0.0 → 2.0.0

package/dist/templates/next-template/src/app/resources/page.tsx

@@ -1,7 +1,7 @@
-import { developerResources, socialLinks } from '@/app/resources/resources';
-import { Shell } from '@/components';
-import { Card, Code, Container, Group, Paper, SimpleGrid, Stack, Text, ThemeIcon, Title } from '@mantine/core';
-import { IconBook, IconRobot, IconTerminal } from '@tabler/icons-react';
+import { Card, Code, Container, Group, Paper, SimpleGrid, Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { IconBook, IconRobot, IconTerminal } from "@tabler/icons-react";
+import { developerResources, socialLinks } from "@/app/resources/resources";
+import { Shell } from "@/components";
 
 export default function ResourcesPage() {
 	return (
@@ -11,11 +11,11 @@ export default function ResourcesPage() {
 					{/* Header */}
 					<div>
 						<Group gap="md" align="center" mb="lg">
-							<ThemeIcon size={48} radius="md" c="grape" variant="light">
+							<ThemeIcon size={48} radius="md" variant="outline" color="seiMaroon">
 								<IconBook size={24} />
 							</ThemeIcon>
 							<div>
-								<Title order={1} fw={700} c="gray.9">
+								<Title order={1} fw={700} c="seiMaroon.9" className="sei-heading">
 									Developer Resources
 								</Title>
 								<Text size="lg" c="gray.6" mt={4}>
@@ -32,10 +32,10 @@ export default function ResourcesPage() {
 								📚 Documentation & Tools
 							</Title>
 							<SimpleGrid cols={{ base: 1, sm: 2, lg: 2 }} spacing="lg">
-								{developerResources.map(({ title, description, href, icon: Icon, color }) => (
+								{developerResources.map(({ title, description, href, icon: Icon }) => (
 									<Card key={title} withBorder radius="lg" p="xl" component="a" href={href} target="_blank" rel="noreferrer" shadow="sm">
 										<Group align="flex-start" wrap="nowrap" gap="md">
-											<ThemeIcon variant="light" color={color} size={40} radius="md">
+											<ThemeIcon variant="outline" color="gray" size={40} radius="md">
 												<Icon size={22} />
 											</ThemeIcon>
 											<Stack gap={6} flex={1}>
@@ -63,7 +63,7 @@ export default function ResourcesPage() {
 								<Stack gap="lg">
 									<Stack gap="xs">
 										<Group gap="md">
-											<ThemeIcon size={40} radius="md" color="orange" variant="light">
+											<ThemeIcon size={40} radius="md" variant="outline" color="seiMaroon">
 												<IconRobot size={20} />
 											</ThemeIcon>
 											<Title order={4} fw={600} c="gray.9">
@@ -96,46 +96,29 @@ export default function ResourcesPage() {
 										</Stack>
 									</Paper>
 
-									<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-										<Card withBorder radius="md" p="md" component="a" href="https://sei-js.docs.sei.io/mcp-server/quickstart" target="_blank" rel="noreferrer">
-											<Group gap="sm">
-												<ThemeIcon size={32} radius="md" color="orange" variant="light">
-													<IconBook size={16} />
-												</ThemeIcon>
-												<Stack gap={2} flex={1}>
-													<Text fw={600} size="sm" c="gray.9">
-														Quickstart Guide
-													</Text>
-													<Text size="xs" c="dimmed">
-														Get started with MCP setup
-													</Text>
-												</Stack>
-											</Group>
-										</Card>
-										<Card
-											withBorder
-											radius="md"
-											p="md"
-											component="a"
-											href="https://sei-js.docs.sei.io/mcp-server/environment-variables"
-											target="_blank"
-											rel="noreferrer"
-										>
-											<Group gap="sm">
-												<ThemeIcon size={32} radius="md" color="orange" variant="light">
-													<IconTerminal size={16} />
-												</ThemeIcon>
-												<Stack gap={2} flex={1}>
-													<Text fw={600} size="sm" c="gray.9">
-														Environment Variables
-													</Text>
-													<Text size="xs" c="dimmed">
-														Configure your setup
-													</Text>
-												</Stack>
-											</Group>
-										</Card>
-									</SimpleGrid>
+									<Card
+										withBorder
+										radius="md"
+										p="md"
+										component="a"
+										href="https://github.com/sei-protocol/sei-js/tree/main/packages/mcp-server#readme"
+										target="_blank"
+										rel="noreferrer"
+									>
+										<Group gap="sm">
+											<ThemeIcon size={32} radius="md" variant="outline" color="seiMaroon">
+												<IconBook size={16} />
+											</ThemeIcon>
+											<Stack gap={2} flex={1}>
+												<Text fw={600} size="sm" c="gray.9">
+													MCP Server Guide
+												</Text>
+												<Text size="xs" c="dimmed">
+													Setup instructions and available tools
+												</Text>
+											</Stack>
+										</Group>
+									</Card>
 								</Stack>
 							</Card>
 						</Stack>
@@ -148,10 +131,10 @@ export default function ResourcesPage() {
 								🌐 Community & Social
 							</Title>
 							<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
-								{socialLinks.map(({ title, description, href, icon: Icon, color }) => (
+								{socialLinks.map(({ title, description, href, icon: Icon }) => (
 									<Card key={title} withBorder radius="lg" p="lg" component="a" href={href} target="_blank" rel="noreferrer" shadow="sm">
 										<Group align="flex-start" wrap="nowrap" gap="md">
-											<ThemeIcon variant="light" color={color === 'dark' ? 'gray' : (color as any)} size={36} radius="md">
+											<ThemeIcon variant="outline" color="gray" size={36} radius="md">
 												<Icon size={20} />
 											</ThemeIcon>
 											<Stack gap={4} flex={1}>

package/dist/templates/next-template/src/app/resources/resources.ts

@@ -1,56 +1,43 @@
-import { IconBook, IconBrandTelegram, IconBrandX, IconCode, IconPackage } from '@tabler/icons-react';
+import { IconBook, IconBrandTelegram, IconBrandX, IconCode, IconPackage } from "@tabler/icons-react";
 
 export const developerResources = [
 	{
-		title: 'Sei Docs',
-		description: 'Official protocol docs, guides, and references.',
-		href: 'https://docs.sei.io/',
+		title: "Sei Docs",
+		description: "Official protocol docs, guides, and references.",
+		href: "https://docs.sei.io/",
 		icon: IconBook,
-		color: 'violet',
 	},
 	{
-		title: '@sei-js docs',
-		description: 'SDKs, examples, templates, and tooling for Sei.',
-		href: 'https://sei-js.docs.sei.io/introduction',
-		icon: IconBook,
-		color: 'grape',
-	},
-	{
-		title: 'Wagmi',
-		description: 'React hooks for Ethereum development.',
-		href: 'https://wagmi.sh/',
+		title: "Wagmi",
+		description: "React hooks for Ethereum development.",
+		href: "https://wagmi.sh/",
 		icon: IconCode,
-		color: 'blue',
 	},
 	{
-		title: 'Viem',
-		description: 'TypeScript interface for Ethereum.',
-		href: 'https://viem.sh/',
+		title: "Viem",
+		description: "TypeScript interface for Ethereum.",
+		href: "https://viem.sh/",
 		icon: IconPackage,
-		color: 'green',
 	},
 ] as const;
 
 export const socialLinks = [
 	{
-		title: 'Developer Telegram',
-		description: 'Chat with the community and get support.',
-		href: 'https://t.me/seinetwork',
+		title: "Developer Telegram",
+		description: "Chat with the community and get support.",
+		href: "https://t.me/seinetwork",
 		icon: IconBrandTelegram,
-		color: 'cyan',
 	},
 	{
-		title: 'Sei on X',
-		description: 'Follow Sei Network updates on X (Twitter).',
-		href: 'https://x.com/SeiNetwork',
+		title: "Sei on X",
+		description: "Follow Sei Network updates on X (Twitter).",
+		href: "https://x.com/SeiNetwork",
 		icon: IconBrandX,
-		color: 'dark',
 	},
 	{
-		title: 'Sei Labs on X',
-		description: 'Follow Sei Labs announcements on X (Twitter).',
-		href: 'https://x.com/Sei_Labs',
+		title: "Sei Labs on X",
+		description: "Follow Sei Labs announcements on X (Twitter).",
+		href: "https://x.com/Sei_Labs",
 		icon: IconBrandX,
-		color: 'dark',
 	},
 ] as const;

package/dist/templates/next-template/src/components/default/examples.ts

@@ -26,22 +26,19 @@ const weiBalance = await publicClient.getBalance({ address });
 const seiBalance = formatEther(weiBalance);`;
 
 export const precompileCodeExample = `// Import Sei precompiles
-import { VIEM_BANK_PRECOMPILE_ABI, BANK_PRECOMPILE_ADDRESS } from '@sei-js/precompiles';
+import { BANK_PRECOMPILE_ABI, BANK_PRECOMPILE_ADDRESS } from '@sei-js/precompiles';
 import { usePublicClient } from 'wagmi';
-import { type ReadContractParameters } from 'viem';
 
 // Use the hook
 const publicClient = usePublicClient();
 
 // Call precompile
-const readContractParams: ReadContractParameters = {
-  abi: VIEM_BANK_PRECOMPILE_ABI,
+const result = await publicClient.readContract({
+  abi: BANK_PRECOMPILE_ABI,
   address: BANK_PRECOMPILE_ADDRESS,
   functionName: 'supply',
   args: ['usei']
-};
-
-const result = await publicClient.readContract(readContractParams);`;
+});`;
 
 export const transactionCodeExample = `// Import transaction hooks
 import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi';

package/dist/templates/next-template/src/components/default/index.tsx

@@ -1,6 +1,6 @@
-'use client';
+"use client";
 
-import { CodeHighlight } from '@mantine/code-highlight';
+import { CodeHighlight } from "@mantine/code-highlight";
 import {
 	ActionIcon,
 	Alert,
@@ -19,18 +19,18 @@ import {
 	TextInput,
 	ThemeIcon,
 	Title,
-} from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import { IconBulb, IconChevronDown, IconChevronUp, IconCoins, IconCopy, IconLogout, IconSend, IconWallet } from '@tabler/icons-react';
-import { useState } from 'react';
-import { formatEther, parseEther } from 'viem';
-import { useAccount, useDisconnect, usePublicClient, useSendTransaction, useWaitForTransactionReceipt } from 'wagmi';
-import { balanceCodeExample, transactionCodeExample, walletCodeExample } from './examples';
+} from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconBulb, IconChevronDown, IconChevronUp, IconCoins, IconCopy, IconLogout, IconSend, IconWallet } from "@tabler/icons-react";
+import { useState } from "react";
+import { formatEther, parseEther } from "viem";
+import { useAccount, useDisconnect, usePublicClient, useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
+import { balanceCodeExample, transactionCodeExample, walletCodeExample } from "./examples";
 
 function Examples() {
-	const [balance, setBalance] = useState('');
-	const [recipient, setRecipient] = useState('');
-	const [amount, setAmount] = useState('');
+	const [balance, setBalance] = useState("");
+	const [recipient, setRecipient] = useState("");
+	const [amount, setAmount] = useState("");
 
 	// Code visibility toggles
 	const [showWalletCode, setShowWalletCode] = useState(false);
@@ -51,17 +51,17 @@ function Examples() {
 		try {
 			navigator.clipboard.writeText(text).then(() => {
 				notifications.show({
-					title: 'Copied!',
-					message: 'Code copied to clipboard',
-					color: 'green',
+					title: "Copied!",
+					message: "Code copied to clipboard",
+					color: "green",
 				});
 			});
 		} catch (err) {
-			console.error('Failed to copy text: ', err);
+			console.error("Failed to copy text: ", err);
 			notifications.show({
-				title: 'Error',
-				message: 'Failed to copy to clipboard',
-				color: 'red',
+				title: "Error",
+				message: "Failed to copy to clipboard",
+				color: "red",
 			});
 		}
 	};
@@ -78,9 +78,9 @@ function Examples() {
 	const sendSei = async () => {
 		if (!recipient || !amount) {
 			notifications.show({
-				title: 'Missing Information',
-				message: 'Please enter recipient address and amount',
-				color: 'orange',
+				title: "Missing Information",
+				message: "Please enter recipient address and amount",
+				color: "yellow",
 			});
 			return;
 		}
@@ -91,11 +91,11 @@ function Examples() {
 				value: parseEther(amount),
 			});
 		} catch (error) {
-			console.error('Transaction error:', error);
+			console.error("Transaction error:", error);
 			notifications.show({
-				title: 'Transaction Error',
-				message: 'Failed to send transaction',
-				color: 'red',
+				title: "Transaction Error",
+				message: "Failed to send transaction",
+				color: "red",
 			});
 		}
 	};
@@ -106,11 +106,11 @@ function Examples() {
 				{/* Header */}
 				<div>
 					<Group gap="md" align="center" mb="lg">
-						<ThemeIcon size={48} radius="md" c="blue" variant="light">
+						<ThemeIcon size={48} radius="md" variant="outline" color="seiMaroon">
 							<IconBulb size={24} />
 						</ThemeIcon>
 						<div>
-							<Title order={1} fw={700} c="gray.9">
+							<Title order={1} fw={700} c="seiMaroon.9" className="sei-heading">
 								Interactive Examples
 							</Title>
 							<Text size="lg" c="gray.6" mt={4}>
@@ -126,7 +126,7 @@ function Examples() {
 						<Flex justify="space-between" align="flex-start">
 							<Stack gap="xs">
 								<Group gap="md">
-									<ThemeIcon size={40} radius="md" color="blue" variant="light">
+									<ThemeIcon size={40} radius="md" variant="outline" color="seiMaroon">
 										<IconWallet size={20} />
 									</ThemeIcon>
 									<Title order={4} fw={600} c="gray.9">
@@ -137,7 +137,7 @@ function Examples() {
 									Access wallet information using Wagmi's useAccount hook
 								</Text>
 							</Stack>
-							<Badge color="blue" variant="light" size="md" radius="md">
+							<Badge variant="outline" color="gray" size="md" radius="md">
 								address
 							</Badge>
 						</Flex>
@@ -147,11 +147,11 @@ function Examples() {
 							</Text>
 							<Flex justify="space-between" align="center">
 								<Code bg="white" p="xs">
-									{address || 'No wallet connected'}
+									{address || "No wallet connected"}
 								</Code>
 								{isConnected && address && (
 									<Group gap="xs">
-										<ActionIcon variant="light" color="blue" size="sm" radius="md" onClick={() => copyToClipboard(address)} aria-label="Copy address">
+										<ActionIcon variant="outline" color="dark" size="sm" radius="md" onClick={() => copyToClipboard(address)} aria-label="Copy address">
 											<IconCopy size={14} />
 										</ActionIcon>
 										<ActionIcon variant="light" color="red" size="sm" radius="md" onClick={() => disconnect()} aria-label="Disconnect wallet">
@@ -171,7 +171,7 @@ function Examples() {
 								leftSection={showWalletCode ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />}
 								onClick={() => setShowWalletCode(!showWalletCode)}
 							>
-								{showWalletCode ? 'Hide' : 'View'} Implementation
+								{showWalletCode ? "Hide" : "View"} Implementation
 							</Button>
 							{showWalletCode && (
 								<ActionIcon variant="subtle" color="gray" size="sm" radius="md" onClick={() => copyToClipboard(walletCodeExample)}>
@@ -195,7 +195,7 @@ function Examples() {
 							<Flex justify="space-between" align="flex-start">
 								<Stack gap="xs">
 									<Flex align="center" gap="md">
-										<ThemeIcon size={40} radius="md" color="green" variant="light">
+										<ThemeIcon size={40} radius="md" variant="outline" color="seiGold">
 											<IconCoins size={20} />
 										</ThemeIcon>
 										<Title order={3} size="h3" fw={600}>
@@ -206,7 +206,7 @@ function Examples() {
 										Query your wallet's SEI balance using Wagmi's usePublicClient hook
 									</Text>
 								</Stack>
-								<Badge color="green" variant="light" size="md" radius="md">
+								<Badge variant="outline" color="gray" size="md" radius="md">
 									balance
 								</Badge>
 							</Flex>
@@ -218,7 +218,7 @@ function Examples() {
 									<Flex align="baseline" gap="xs">
 										{balance ? (
 											<>
-												<Text fw={700} size="xl" c="gray.9" ff="monospace">
+												<Text fw={700} size="xl" c="seiGold.9" ff="var(--sei-font-mono)">
 													{Number.parseFloat(balance).toFixed(4)}
 												</Text>
 												<Text size="sm" c="gray.6" fw={500}>
@@ -243,11 +243,11 @@ function Examples() {
 										disabled={!address}
 										size="sm"
 										radius="md"
-										variant="light"
-										color="green"
+										variant="filled"
+										color="seiMaroon"
 										leftSection={<IconCoins size={14} />}
 									>
-										{balance ? 'Refresh' : 'Check Balance'}
+										{balance ? "Refresh" : "Check Balance"}
 									</Button>
 								</Flex>
 							</Paper>
@@ -261,7 +261,7 @@ function Examples() {
 									leftSection={showBalanceCode ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />}
 									onClick={() => setShowBalanceCode(!showBalanceCode)}
 								>
-									{showBalanceCode ? 'Hide' : 'View'} Implementation
+									{showBalanceCode ? "Hide" : "View"} Implementation
 								</Button>
 								{showBalanceCode && (
 									<ActionIcon variant="subtle" color="gray" size="sm" radius="md" onClick={() => copyToClipboard(balanceCodeExample)}>
@@ -284,7 +284,7 @@ function Examples() {
 							<Flex direction="row" justify="space-between" align="flex-start">
 								<Stack gap="xs">
 									<Flex direction="row" align="center" gap="md" mb="md">
-										<ThemeIcon size={40} radius="md" color="blue" variant="light">
+										<ThemeIcon size={40} radius="md" variant="outline" color="seiMaroon">
 											<IconSend size={20} />
 										</ThemeIcon>
 										<Title order={3} size="h3" fw={600} c="gray.9">
@@ -295,7 +295,7 @@ function Examples() {
 										Send SEI tokens using Wagmi's transaction hooks with real-time status
 									</Text>
 								</Stack>
-								<Badge color="blue" variant="light" size="md" radius="md">
+								<Badge variant="outline" color="gray" size="md" radius="md">
 									transfer
 								</Badge>
 							</Flex>
@@ -329,8 +329,8 @@ function Examples() {
 										disabled={isPending || !address || !recipient || !amount}
 										size="md"
 										radius="md"
-										variant="light"
-										color="blue"
+										variant="filled"
+										color="seiMaroon"
 										px="sm"
 									>
 										{isPending ? <Loader size={16} /> : <IconSend size={16} />}
@@ -339,7 +339,7 @@ function Examples() {
 							</Paper>
 
 							{hash && (
-								<Alert color="blue" variant="light" radius="md" py={4}>
+								<Alert color="gray" variant="light" radius="md" py={4}>
 									<Stack gap={4}>
 										<Text size="xs" fw={600}>
 											Transaction Hash
@@ -377,7 +377,7 @@ function Examples() {
 									leftSection={showTransactionCode ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />}
 									onClick={() => setShowTransactionCode(!showTransactionCode)}
 								>
-									{showTransactionCode ? 'Hide' : 'View'} Implementation
+									{showTransactionCode ? "Hide" : "View"} Implementation
 								</Button>
 								{showTransactionCode && (
 									<ActionIcon variant="subtle" color="gray" size="sm" radius="xl" onClick={() => copyToClipboard(transactionCodeExample)}>

package/dist/templates/next-template/src/components/index.ts

@@ -1,3 +1,3 @@
-export { default as Default } from './default';
-export { default as Landing } from './landing';
-export { default as Shell } from './shell';
+export { default as Default } from "./default";
+export { default as Landing } from "./landing";
+export { default as Shell } from "./shell";

package/dist/templates/next-template/src/components/landing/index.tsx

@@ -1,9 +1,11 @@
-'use client';
+"use client";
 
-import { Badge, Button, Card, Code, Container, Group, Stack, Text, ThemeIcon, Title } from '@mantine/core';
-import { ConnectButton } from '@rainbow-me/rainbowkit';
-import { IconBook, IconCode, IconRocket } from '@tabler/icons-react';
-import Link from 'next/link';
+import { Badge, Button, Card, Code, Container, Group, Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { IconBook, IconCode, IconRocket } from "@tabler/icons-react";
+import Link from "next/link";
+
+const technologyLabels = ["Next.js 15.5", "Mantine UI", "Tailwind CSS", "Biome", "RainbowKit", "Wagmi + Viem"];
 
 export default function Landing() {
 	return (
@@ -11,64 +13,32 @@ export default function Landing() {
 			<Stack gap="xl" align="center">
 				{/* Hero Section */}
 				<Stack gap="md" align="center" ta="center">
-					<Title order={1} size="h1" fw={700} c="gray.9">
+					<Title order={1} size="h1" fw={700} c="seiMaroon.9" className="sei-heading">
 						Welcome to Your Sei dApp
 					</Title>
 					<Text size="lg" c="dimmed" maw={600}>
-						A production-ready starter template built with Next.js, Mantine UI, RainbowKit, Tailwind CSS, and Wagmi with easy deployment to Vercel. Everything
-						you need to build and run production-grade dApps on Sei.
+						A production-ready starter template built with Next.js, Mantine UI, RainbowKit, Tailwind CSS, and Wagmi. Everything you need to build and run
+						production-grade dApps on Sei.
 					</Text>
 
 					{/* Tech Stack Badges */}
 					<Group gap="xs" mt="sm">
-						<Badge variant="light" color="blue" style={{ backgroundColor: 'rgb(239 246 255)', color: 'rgb(29 78 216)', border: '1px solid rgb(191 219 254)' }}>
-							Next.js 14
-						</Badge>
-						<Badge
-							variant="light"
-							color="violet"
-							style={{ backgroundColor: 'rgb(250 245 255)', color: 'rgb(109 40 217)', border: '1px solid rgb(196 181 253)' }}
-						>
-							Mantine UI
-						</Badge>
-						<Badge variant="light" color="cyan" style={{ backgroundColor: 'rgb(236 254 255)', color: 'rgb(14 116 144)', border: '1px solid rgb(165 243 252)' }}>
-							Tailwind CSS
-						</Badge>
-						<Badge variant="light" color="yellow" style={{ backgroundColor: 'rgb(254 249 195)', color: 'rgb(161 98 7)', border: '1px solid rgb(254 240 138)' }}>
-							Biome
-						</Badge>
-						<Badge
-							variant="light"
-							color="orange"
-							style={{ backgroundColor: 'rgb(255 247 237)', color: 'rgb(194 65 12)', border: '1px solid rgb(254 215 170)' }}
-						>
-							RainbowKit
-						</Badge>
-						<Badge variant="light" color="teal" style={{ backgroundColor: 'rgb(240 253 250)', color: 'rgb(15 118 110)', border: '1px solid rgb(153 246 228)' }}>
-							Wagmi + Viem
-						</Badge>
-						<Badge variant="light" color="dark" style={{ backgroundColor: 'rgb(249 250 251)', color: 'rgb(17 24 39)', border: '1px solid rgb(209 213 219)' }}>
-							Vercel
-						</Badge>
+						{technologyLabels.map((label) => (
+							<Badge key={label} variant="outline" color="gray">
+								{label}
+							</Badge>
+						))}
 					</Group>
 				</Stack>
 
 				{/* Primary Call to Action - Connect Wallet */}
-				<Card
-					withBorder
-					radius="xl"
-					p="xl"
-					bg="gradient-to-r from-blue-50 to-purple-50"
-					w="100%"
-					maw={600}
-					style={{ border: '2px solid var(--mantine-color-blue-2)' }}
-				>
+				<Card withBorder radius="xl" p="xl" w="100%" maw={600} bg="white" style={{ border: "2px solid var(--sei-maroon)" }}>
 					<Stack gap="lg" align="center" ta="center">
-						<ThemeIcon size={64} radius="xl" color="blue" variant="light">
+						<ThemeIcon size={64} radius="xl" variant="outline" color="seiMaroon">
 							<IconRocket size={32} />
 						</ThemeIcon>
 						<Stack gap="sm" align="center">
-							<Text fw={700} size="xl" c="blue.8">
+							<Text fw={700} size="xl" c="seiMaroon.9" className="sei-heading">
 								Connect Your Wallet to Get Started
 							</Text>
 							<Text size="md" c="dimmed" maw={400}>
@@ -82,7 +52,7 @@ export default function Landing() {
 				{/* Development Tip */}
 				<Card withBorder radius="md" p="md" bg="gray.0" maw={600}>
 					<Text size="xs" c="dimmed" ta="center">
-						💡 <strong>Development Tip:</strong> Start by exploring the examples in the connected app, then customize{' '}
+						💡 <strong>Development Tip:</strong> Start by exploring the examples in the connected app, then customize{" "}
 						<Code>src/components/default/index.tsx</Code> to build your unique dApp features.
 					</Text>
 				</Card>

package/dist/templates/next-template/src/components/providers/index.ts

@@ -1 +1 @@
-export { default as Providers } from './providers';
+export { default as Providers } from "./providers";