Feat: Add BlankRasa banner in two pages

ui/banner/BlankRasaBanner.tsx

@@ -0,0 +1,87 @@
+import {
+  Box,
+  Flex,
+  Image,
+  Text,
+  Button,
+  useColorModeValue,
+  Heading,
+  Link,
+} from '@chakra-ui/react';
+import React from 'react';
+
+type BlankRasaBannerProps = {
+  block?: boolean;
+};
+
+const BlankRasaBanner = ({ block }: BlankRasaBannerProps) => {
+  const bgColor = useColorModeValue('light', '#171717');
+  const btnColor = useColorModeValue('white', '#171717');
+  const bgBoxShadowDesktop = useColorModeValue(
+    '0px 8px 16px -5px rgba(0, 0, 0, 0.10)',
+    '0px 8px 16px -5px rgba(6, 252, 153, 0.10)',
+  );
+  const imgInvertFilter = useColorModeValue('invert(0)', 'invert(1)');
+
+  return (
+    <Box
+      p={ 5 }
+      h={ block ? undefined : '100%' }
+      w={ [ 'full', block ? '100%' : '40%' ] }
+      bg={ bgColor }
+      boxShadow={ bgBoxShadowDesktop }
+      borderRadius="md"
+      display="flex"
+      alignItems={ [ '', block ? 'center' : '' ] }
+      justifyContent="space-between"
+      flexDirection={ [ 'column', block ? 'row' : 'column' ] }
+    >
+      <Flex
+        flexGrow="1"
+        flexDirection={ [ 'column', block ? 'row' : 'column' ] }
+        alignItems={ [ '', block ? 'center' : '' ] }
+        gap={ block ? 5 : 2 }
+      >
+        <Image
+          src="/static/bank-rasa-logo.png"
+          w={ [ '90px', block ? '100px' : '90px' ] }
+          h={ [ '90px', block ? '100px' : '90px' ] }
+          alt="blank-rasa-logo-loading..."
+          filter={ imgInvertFilter }
+        />
+        <Box flexGrow="1">
+          <Heading as="h2" size="md" mb={ 2 } color="text" fontWeight="medium">
+            Blank Rasa
+          </Heading>
+          <Text fontSize="sm" color="text_secondary">
+          A platform for discovering and trading NFTs on Canto.
+          </Text>
+          <Text fontSize="sm" color="text_secondary">
+           Features collections such as Canto Longnecks, Shnoises, and more.
+          </Text>
+        </Box>
+        <Link href="https://www.blankrasa.com" isExternal>
+          <Button
+            bg="transparent"
+            _hover={{
+              bg: 'accent',
+              color: btnColor,
+            }}
+            fontWeight="medium"
+            colorScheme="accent"
+            p={ 4 }
+            mt={ block ? 0 : 3 }
+            width={ [ '100%', block ? '270px' : '100%' ] }
+            fontSize="sm"
+            variant="outline"
+            borderWidth="1.5px"
+          >
+          Explore More
+          </Button>
+        </Link>
+      </Flex>
+    </Box>
+  );
+};
+
+export default BlankRasaBanner;

ui/home/indicators/ChainIndicators.tsx

@@ -69,7 +69,6 @@ const ChainIndicators = () => {
       flexDir={{ base: 'column', lg: 'row' }}
       w="100%"
       alignItems="stretch"
-      mt={ 8 }
     >
       <Flex flexGrow={ 1 } flexDir="column" order={{ base: 2, lg: 1 }} p={{ base: 6, lg: 0 }}>
         <Flex alignItems="center">

ui/pages/Home.tsx

@@ -2,6 +2,7 @@ import { Box, Heading, Flex, LightMode } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import BlankRasaBanner from 'ui/banner/BlankRasaBanner';
 import ChainIndicators from 'ui/home/indicators/ChainIndicators';
 import LatestBlocks from 'ui/home/LatestBlocks';
 import Stats from 'ui/home/Stats';
@@ -40,7 +41,10 @@ const Home = () => {
         </LightMode>
       </Box>
       <Stats/>
-      <ChainIndicators/>
+      <Flex flexDirection={ [ 'column', 'row' ] } alignItems={ [ 'start' ] } gap={ 5 } pt={ 8 }>
+        <ChainIndicators/>
+        <BlankRasaBanner block={ false }/>
+      </Flex>
       <AdBanner mt={{ base: 6, lg: 8 }} mx="auto" display="flex" justifyContent="center"/>
       <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
         <LatestBlocks/>

ui/shared/Page/PageTitle.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import BlankRasaBanner from 'ui/banner/BlankRasaBanner';
 import TextAd from 'ui/shared/ad/TextAd';
 import LinkInternal from 'ui/shared/LinkInternal';
 
@@ -16,6 +17,7 @@ type Props = {
   beforeTitle?: React.ReactNode;
   afterTitle?: React.ReactNode;
   contentAfter?: React.ReactNode;
+  secondRow?: React.ReactNode;
   isLoading?: boolean;
   withTextAd?: boolean;
 }
@@ -31,11 +33,11 @@ const BackLink = (props: BackLinkProp & { isLoading?: boolean }) => {
     return <Skeleton boxSize={ 6 } display="inline-block" borderRadius="base" mr={ 3 } my={ 2 } verticalAlign="text-bottom" isLoaded={ !props.isLoading }/>;
   }
 
-  const icon = <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)" margin="auto"/>;
+  const icon = <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>;
 
   if ('url' in props) {
     return (
-      <Tooltip label={ props.label } bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
+      <Tooltip label={ props.label }>
         <LinkInternal display="inline-flex" href={ props.url } h="40px" mr={ 3 }>
           { icon }
         </LinkInternal>
@@ -44,15 +46,15 @@ const BackLink = (props: BackLinkProp & { isLoading?: boolean }) => {
   }
 
   return (
-    <Tooltip label={ props.label } bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
+    <Tooltip label={ props.label }>
       <Link display="inline-flex" onClick={ props.onClick } h="40px" mr={ 3 }>
         { icon }
       </Link>
     </Tooltip>
   );
 };
 
-const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoading, afterTitle, beforeTitle }: Props) => {
+const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoading, afterTitle, beforeTitle, secondRow }: Props) => {
   const tooltip = useDisclosure();
   const isMobile = useIsMobile();
   const [ isTextTruncated, setIsTextTruncated ] = React.useState(false);
@@ -90,59 +92,67 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
   }, [ updatedTruncateState ]);
 
   return (
-    <Flex
-      className={ className }
-      mb={ 6 }
-      flexDir="row"
-      flexWrap="wrap"
-      rowGap={ 3 }
-      columnGap={ 3 }
-      alignItems="center"
-    >
-      <Flex h={{ base: 'auto', lg: isLoading ? 10 : 'auto' }} maxW="100%" alignItems="center">
-        { backLink && <BackLink { ...backLink } isLoading={ isLoading }/> }
-        { beforeTitle }
-        <Skeleton
-          isLoaded={ !isLoading }
-          overflow="hidden"
+    <>
+      <BlankRasaBanner block/>
+      <Flex className={ className } flexDir="column" rowGap={ 3 } mb={ 6 } mt={ 16 }>
+        <Flex
+          flexDir="row"
+          flexWrap="wrap"
+          rowGap={ 3 }
+          columnGap={ 3 }
+          alignItems="center"
         >
-          <Tooltip
-            label={ title }
-            isOpen={ tooltip.isOpen }
-            bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider"
-            onClose={ tooltip.onClose }
-            maxW={{ base: 'calc(100vw - 32px)', lg: '500px' }}
-            closeOnScroll={ isMobile ? true : false }
-            isDisabled={ !isTextTruncated }
-          >
-            <Heading
-              ref={ headingRef }
-              as="h1"
-              size="lg"
-              whiteSpace="normal"
-              wordBreak="break-all"
-              style={{
-                WebkitLineClamp: TEXT_MAX_LINES,
-                WebkitBoxOrient: 'vertical',
-                display: '-webkit-box',
-              }}
+          <Flex h={{ base: 'auto', lg: isLoading ? 10 : 'auto' }} maxW="100%" alignItems="center">
+            { backLink && <BackLink { ...backLink } isLoading={ isLoading }/> }
+            { beforeTitle }
+            <Skeleton
+              isLoaded={ !isLoading }
               overflow="hidden"
-              textOverflow="ellipsis"
-              onMouseEnter={ tooltip.onOpen }
-              onMouseLeave={ tooltip.onClose }
-              onClick={ isMobile ? tooltip.onToggle : undefined }
             >
-              <span ref={ textRef }>
-                { title }
-              </span>
-            </Heading>
-          </Tooltip>
-        </Skeleton>
-        { afterTitle }
+              <Tooltip
+                label={ title }
+                isOpen={ tooltip.isOpen }
+                onClose={ tooltip.onClose }
+                maxW={{ base: 'calc(100vw - 32px)', lg: '500px' }}
+                closeOnScroll={ isMobile ? true : false }
+                isDisabled={ !isTextTruncated }
+              >
+                <Heading
+                  ref={ headingRef }
+                  as="h1"
+                  size="lg"
+                  whiteSpace="normal"
+                  wordBreak="break-all"
+                  style={{
+                    WebkitLineClamp: TEXT_MAX_LINES,
+                    WebkitBoxOrient: 'vertical',
+                    display: '-webkit-box',
+                  }}
+                  overflow="hidden"
+                  textOverflow="ellipsis"
+                  onMouseEnter={ tooltip.onOpen }
+                  onMouseLeave={ tooltip.onClose }
+                  onClick={ isMobile ? tooltip.onToggle : undefined }
+                >
+                  <span ref={ textRef }>
+                    { title }
+                  </span>
+                </Heading>
+              </Tooltip>
+            </Skeleton>
+            { afterTitle }
+          </Flex>
+          { contentAfter }
+          { withTextAd && <TextAd order={{ base: -1, lg: 100 }} mb={{ base: 6, lg: 0 }} ml="auto" w={{ base: '100%', lg: 'auto' }}/> }
+        </Flex>
+        { secondRow && (
+          <Flex alignItems="center" minH={ 10 } overflow="hidden">
+            { secondRow }
+          </Flex>
+        ) }
       </Flex>
-      { contentAfter }
-      { withTextAd && <TextAd order={{ base: -1, lg: 100 }} mb={{ base: 6, lg: 0 }} ml="auto" w={{ base: '100%', lg: 'auto' }}/> }
-    </Flex>
+    </>
+
   );
 };
 

ui/shared/layout/components/Content.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 const Content = ({ children }: Props) => {
   return (
-    <Box pt={{ base: 0, lg: '52px' }} as="main">
+    <Box as="main">
       { children }
     </Box>
   );

ui/snippets/searchBar/SearchBarInput.tsx

@@ -83,7 +83,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
       transitionDuration="normal"
       transitionTimingFunction="ease"
     >
-      <InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }}>
+      <InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }} mb={ 6 }>
         <InputLeftElement w={{ base: isHomepage ? 6 : 4, lg: 6 }} ml={{ base: isHomepage ? 4 : 3, lg: 4 }} h="100%">
           <Icon as={ searchIcon } boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'primary') }/>
         </InputLeftElement>