From 4bb9c61c6f0f7cb74b1800fcec6b0a6ca3b523b4 Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Thu, 16 Feb 2023 10:51:30 +0300
Subject: [PATCH] Update landing pages

---
 components/Sidebar.tsx    | 36 +++++++++++++++++++-----------------
 pages/contracts/index.tsx | 23 ++++++++++++++++-------
 pages/index.tsx           | 11 +++++++----
 3 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index e68b688..e6ff0ab 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -30,19 +30,21 @@ export const Sidebar = () => {
       <div className="absolute top-[20%] left-[5%]">
         <ul className="group p-2 w-full bg-transparent menu rounded-box">
           <li tabIndex={0}>
-            <span
+            <div
               className={clsx(
-                'z-40 text-2xl font-extrabold group-hover:text-white bg-transparent rounded-lg small-caps',
+                'z-40 text-xl font-bold group-hover:text-white bg-transparent rounded-lg small-caps',
                 'hover:bg-white/5 transition-colors',
                 router.asPath.includes('/collections/') ? 'text-white' : 'text-gray',
               )}
             >
-              <Link href="/collections/"> Collections </Link>
-            </span>
+              <Link href="/collections/" passHref>
+                Collections
+              </Link>
+            </div>
             <ul className="z-50 p-2 bg-base-200">
               <li
                 className={clsx(
-                  'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                  'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                   router.asPath.includes('/collections/create') ? 'text-white' : 'text-gray',
                 )}
                 tabIndex={-1}
@@ -51,7 +53,7 @@ export const Sidebar = () => {
               </li>
               <li
                 className={clsx(
-                  'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                  'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                   router.asPath.includes('/collections/myCollections/') ? 'text-white' : 'text-gray',
                 )}
                 tabIndex={-1}
@@ -60,7 +62,7 @@ export const Sidebar = () => {
               </li>
               <li
                 className={clsx(
-                  'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                  'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                   router.asPath.includes('/collections/actions/') ? 'text-white' : 'text-gray',
                 )}
                 tabIndex={-1}
@@ -75,7 +77,7 @@ export const Sidebar = () => {
             <li tabIndex={0}>
               <span
                 className={clsx(
-                  'z-40 text-2xl font-extrabold group-hover:text-white bg-transparent rounded-lg small-caps',
+                  'z-40 text-xl font-bold group-hover:text-white bg-transparent rounded-lg small-caps',
                   'hover:bg-white/5 transition-colors',
                   router.asPath.includes('/badges/') ? 'text-white' : 'text-gray',
                 )}
@@ -85,7 +87,7 @@ export const Sidebar = () => {
               <ul className="z-50 p-2 rounded-box bg-base-200">
                 <li
                   className={clsx(
-                    'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                    'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                     router.asPath.includes('/badges/create/') ? 'text-white' : 'text-gray',
                   )}
                   tabIndex={-1}
@@ -94,7 +96,7 @@ export const Sidebar = () => {
                 </li>
                 <li
                   className={clsx(
-                    'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                    'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                     router.asPath.includes('/badges/myBadges/') ? 'text-white' : 'text-gray',
                   )}
                   tabIndex={-1}
@@ -103,7 +105,7 @@ export const Sidebar = () => {
                 </li>
                 <li
                   className={clsx(
-                    'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                    'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                     router.asPath.includes('/badges/actions/') ? 'text-white' : 'text-gray',
                   )}
                   tabIndex={-1}
@@ -118,7 +120,7 @@ export const Sidebar = () => {
           <li tabIndex={0}>
             <span
               className={clsx(
-                'z-40 text-2xl font-extrabold group-hover:text-white bg-transparent rounded-lg small-caps',
+                'z-40 text-xl font-bold group-hover:text-white bg-transparent rounded-lg small-caps',
                 'hover:bg-white/5 transition-colors',
                 router.asPath.includes('/contracts/') ? 'text-white' : 'text-gray',
               )}
@@ -129,7 +131,7 @@ export const Sidebar = () => {
               <Conditional test={BASE_FACTORY_ADDRESS !== undefined}>
                 <li
                   className={clsx(
-                    'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                    'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                     router.asPath.includes('/contracts/baseMinter/') ? 'text-white' : 'text-gray',
                   )}
                   tabIndex={-1}
@@ -139,7 +141,7 @@ export const Sidebar = () => {
               </Conditional>
               <li
                 className={clsx(
-                  'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                  'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                   router.asPath.includes('/contracts/vendingMinter/') ? 'text-white' : 'text-gray',
                 )}
                 tabIndex={-1}
@@ -148,7 +150,7 @@ export const Sidebar = () => {
               </li>
               <li
                 className={clsx(
-                  'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                  'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                   router.asPath.includes('/contracts/sg721/') ? 'text-white' : 'text-gray',
                 )}
                 tabIndex={-1}
@@ -157,7 +159,7 @@ export const Sidebar = () => {
               </li>
               <li
                 className={clsx(
-                  'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                  'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                   router.asPath.includes('/contracts/whitelist/') ? 'text-white' : 'text-gray',
                 )}
                 tabIndex={-1}
@@ -167,7 +169,7 @@ export const Sidebar = () => {
               <Conditional test={BADGE_HUB_ADDRESS !== undefined}>
                 <li
                   className={clsx(
-                    'text-lg font-extrabold hover:text-white hover:bg-stargaze-80 rounded',
+                    'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
                     router.asPath.includes('/contracts/badgeHub/') ? 'text-white' : 'text-gray',
                   )}
                   tabIndex={-1}
diff --git a/pages/contracts/index.tsx b/pages/contracts/index.tsx
index 685a190..3f1ef14 100644
--- a/pages/contracts/index.tsx
+++ b/pages/contracts/index.tsx
@@ -4,7 +4,7 @@ import type { NextPage } from 'next'
 // import Brand from 'public/brand/brand.svg'
 import { withMetadata } from 'utils/layout'
 
-import { BASE_FACTORY_ADDRESS } from '../../utils/constants'
+import { BADGE_HUB_ADDRESS, BASE_FACTORY_ADDRESS } from '../../utils/constants'
 
 const HomePage: NextPage = () => {
   return (
@@ -12,9 +12,9 @@ const HomePage: NextPage = () => {
       <div className="flex justify-center items-center py-8 max-w-xl">
         {/* <Brand className="w-full text-plumbus" /> */}
       </div>
-      <h1 className="font-heading text-4xl font-bold">Smart Contracts</h1>
+      <h1 className="font-heading text-4xl font-bold">Smart Contract Dashboards</h1>
       <p className="text-xl">
-        Here you can invoke and query different smart contracts and see the results.
+        Here you can execute actions and queries on different smart contracts and see the results.
         <br />
       </p>
 
@@ -27,7 +27,7 @@ const HomePage: NextPage = () => {
           <HomeCard
             className="p-4 -m-4 hover:bg-gray-500/10 rounded"
             link="/contracts/baseMinter"
-            title="Base Minter contract"
+            title="Base Minter Contract"
           >
             Execute messages and run queries on Stargaze&apos;s Base Minter contract.
           </HomeCard>
@@ -35,20 +35,29 @@ const HomePage: NextPage = () => {
         <HomeCard
           className="p-4 -m-4 hover:bg-gray-500/10 rounded"
           link="/contracts/vendingMinter"
-          title="Vending Minter contract"
+          title="Vending Minter Contract"
         >
           Execute messages and run queries on Stargaze&apos;s Vending Minter contract.
         </HomeCard>
         <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/contracts/sg721" title="Sg721 Contract">
-          Execute messages and run queries on Stargaze&apos;s sg721 contract.
+          Execute messages and run queries on Stargaze&apos;s SG721 contract.
         </HomeCard>
         <HomeCard
           className="p-4 -m-4 hover:bg-gray-500/10 rounded"
           link="/contracts/whitelist"
           title="Whitelist Contract"
         >
-          Execute messages and run queries on Stargaze&apos;s whitelist contract.
+          Execute messages and run queries on Stargaze&apos;s Whitelist contract.
         </HomeCard>
+        <Conditional test={BADGE_HUB_ADDRESS !== undefined}>
+          <HomeCard
+            className="p-4 -m-4 hover:bg-gray-500/10 rounded"
+            link="/contracts/badgeHub"
+            title="Badge Hub Contract"
+          >
+            Execute messages and run queries on the Badge Hub contract designed for event organizers.
+          </HomeCard>
+        </Conditional>
       </div>
     </section>
   )
diff --git a/pages/index.tsx b/pages/index.tsx
index 0798377..2875eb7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -22,11 +22,14 @@ const HomePage: NextPage = () => {
       <br />
 
       <div className="grid gap-8 md:grid-cols-2">
-        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/collections/create" title="Create">
-          Upload your assets, enter collection metadata and deploy your collection.
+        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/collections/" title="Collections">
+          Create a collection, view a list of your collections or execute collection actions and queries.
         </HomeCard>
-        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/collections" title="My Collections">
-          Manage your collections with available actions and queries.
+        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/badges" title="Badges">
+          Create badges, view a list of them or execute badge related actions and queries.
+        </HomeCard>
+        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/contracts" title="Contract Dashboards">
+          Execute actions and queries for a variety of contracts.
         </HomeCard>
       </div>
     </section>