feat: add home page UI

cosmology-tech · Jul 8, 2024 · 7917507 · 7917507
1 parent 297c9cd
commit 7917507
Show file tree

Hide file tree

Showing 4 changed files with 271 additions and 13 deletions.
diff --git a/templates/chain-template/components/common/Sidebar/NavItems.tsx b/templates/chain-template/components/common/Sidebar/NavItems.tsx
@@ -17,7 +17,7 @@ const navItems: NavItem[] = [
   {
     icon: <RiHome7Line size="20px" />,
     label: 'Home',
-    href: '/',
+    href: '/home',
   },
   {
     icon: <RiStackLine size="20px" />,

diff --git a/templates/chain-template/components/common/Sidebar/Sidebar.tsx b/templates/chain-template/components/common/Sidebar/Sidebar.tsx
@@ -1,11 +1,13 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import { Box, useColorModeValue, Text } from '@interchain-ui/react';
+import { MdOutlineAccountBalanceWallet } from 'react-icons/md';
+import { FiLogOut } from 'react-icons/fi';
+import { useChain } from '@cosmos-kit/react';
+
 import { NavItems } from './NavItems';
 import { Button } from '../Button';
-import { MdOutlineAccountBalanceWallet } from 'react-icons/md';
 import { useChainStore } from '@/contexts';
-import { useChain } from '@cosmos-kit/react';
-import { FiLogOut } from 'react-icons/fi';
 
 type SidebarProps = {};
 
@@ -41,13 +43,15 @@ export const Sidebar = ({}: SidebarProps) => {
       borderRightWidth="1px"
       borderRightStyle="solid"
     >
-      <Image
-        src={brandLogoSrc}
-        alt="cosmology"
-        width="0"
-        height="0"
-        style={{ width: '180px', height: 'auto', marginBottom: '50px' }}
-      />
+      <Link href="/" style={{ marginBottom: '50px' }}>
+        <Image
+          src={brandLogoSrc}
+          alt="cosmology"
+          width="0"
+          height="0"
+          style={{ width: '180px', height: 'auto' }}
+        />
+      </Link>
       <NavItems />
       <Box mt="$auto">
         {isWalletConnected ? (

diff --git a/templates/chain-template/pages/index.tsx b/templates/chain-template/pages/index.tsx
@@ -1,9 +1,47 @@
-import { Text } from '@interchain-ui/react';
+import Image from 'next/image';
+import { Box, Text } from '@interchain-ui/react';
+import { Button } from '@/components';
 
 export default function Home() {
   return (
     <>
-      <Text>Home</Text>
+      <Text
+        textAlign="center"
+        fontSize="48px"
+        fontWeight="500"
+        attributes={{ mt: '220px', mb: '20px' }}
+      >
+        Create Cosmos App
+      </Text>
+      <Text
+        textAlign="center"
+        fontSize="16px"
+        fontWeight="500"
+        attributes={{ mb: '20px' }}
+      >
+        Welcome to <HighlightText>Cosmos Kit</HighlightText> +{' '}
+        <HighlightText>Next.js</HighlightText>
+      </Text>
+      <Button variant="primary" leftIcon="walletFilled" mx="auto" mb="100px">
+        Connect Wallet
+      </Button>
+      <Box display="flex" justifyContent="center">
+        <Image
+          alt="chains"
+          src="/images/chains.svg"
+          width={0}
+          height={0}
+          style={{ width: '840px', height: 'auto' }}
+        />
+      </Box>
     </>
   );
 }
+
+const HighlightText = ({ children }: { children: string }) => {
+  return (
+    <Text as="span" color="#7310FF">
+      {children}
+    </Text>
+  );
+};