Feat: Add BlankRasa banner in two pages

ui/banner/BlankRasaBanner1.tsx

@@ -0,0 +1,77 @@
+import {
+  Box,
+  Image,
+  Text,
+  Heading,
+  Button,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import React from 'react';
+
+const BlankRasaBanner1 = () => {
+  const bg = useColorModeValue('light', '#171717');
+  const pColor = useColorModeValue('#616B74', 'gray.200');
+  const btnColor = useColorModeValue('white', '#171717');
+  const imgColor = useColorModeValue('invert(0)', 'invert(1)');
+  const bgBoxShadowDesktop = useColorModeValue(
+    '0px 8px 16px -5px rgba(0, 0, 0, 0.10)',
+    '0px 8px 16px -5px rgba(6, 252, 153, 0.10)',
+  );
+
+  return (
+    <Box
+      bg={ bg }
+      boxShadow={ bgBoxShadowDesktop }
+      borderRadius="md"
+      pt={ 5 }
+      px={ 5 }
+      pb={ 7 }
+      mt={ 8 }
+      w={ [ 'full', '40%' ] }
+    >
+      <Image
+        src="/static/logo2.png"
+        w={ [ '100px' ] } // Responsive image size
+        h={ [ '100px' ] }
+        filter={ imgColor }
+        alt="logo2"
+      />
+      <Box>
+        <Heading as="h2" size="md" mt={ 3 } mb={ 2 } fontWeight="bold">
+          Blank Rasa
+        </Heading>
+        <Text fontSize="sm" color={ pColor }>
+          A platform for discovering and trading NFTs on Canto. Features
+          collections such as CantoLongneck, Shnoises and more
+        </Text>
+      </Box>
+
+      <a
+        href="https://www.blankrasa.com"
+        target="_blank"
+        referrerPolicy="no-referrer"
+      >
+        <Button
+          bg="transparent"
+          color="green.500"
+          _hover={{
+            bg: 'green.500',
+            color: btnColor,
+          }}
+          fontWeight="medium"
+          colorScheme="green.500"
+          p={ 4 }
+          mt={ [ 3 ] }
+          width="100%"
+          fontSize="sm"
+          variant="outline"
+          borderWidth="1.5px"
+        >
+          Explore More
+        </Button>
+      </a>
+    </Box>
+  );
+};
+
+export default BlankRasaBanner1;

ui/banner/BlankRasaBanner2.tsx

@@ -0,0 +1,85 @@
+import {
+  Box,
+  Flex,
+  Image,
+  Text,
+  Button,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import React from 'react';
+
+const BlankRasaBanner2 = () => {
+  const bg = useColorModeValue('light', '#171717');
+  const pColor = useColorModeValue('#616B74', 'gray.200');
+  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 imgColor = useColorModeValue('invert(0)', 'invert(1)');
+
+  return (
+    <Box
+      bg={ bg }
+      boxShadow={ bgBoxShadowDesktop }
+      borderRadius="md"
+      p={ 5 }
+      display="flex"
+      alignItems={ [ '', 'center' ] }
+      justifyContent="space-between"
+      flexDirection={ [ 'column', 'row' ] }
+    >
+      <Flex
+        flexDirection={ [ 'column', 'row' ] }
+        alignItems={ [ '', 'center' ] }
+        gap={ 5 }
+      >
+        <Image
+          src="/static/logo2.png"
+          w={ [ '90px', '100px' ] }
+          h={ [ '90px', '100px' ] }
+          alt="logo2"
+          filter={ imgColor }
+        />
+        <Box w={ [ '100%', '50%' ] }>
+          { /* <Heading as="h2" size="md" mb={ 2 } fontWeight="bold">
+            Blank Rasa
+          </Heading> */ }
+          <Text fontSize="20px" fontWeight="bold" mb={ 2 }>
+            Blank Rasa
+          </Text>
+          <Text fontSize="14px" color={ pColor }>
+            A platform for discovering and trading NFTs on Canto. Features
+            collections such as CantoLongneck, Shnoises and more
+          </Text>
+        </Box>
+      </Flex>
+      <a
+        href="https://www.blankrasa.com"
+        target="_blank"
+        referrerPolicy="no-referrer"
+      >
+        <Button
+          bg="transparent"
+          color="green.500"
+          _hover={{
+            bg: 'green.500',
+            color: btnColor,
+          }}
+          fontWeight="medium"
+          colorScheme="green.500"
+          p={ 4 }
+          mt={ [ 3 ] }
+          width={ [ '100%', '270px' ] }
+          fontSize="sm"
+          variant="outline"
+          borderWidth="1.5px"
+        >
+          Explore More
+        </Button>
+      </a>
+    </Box>
+  );
+};
+
+export default BlankRasaBanner2;

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 BlankRasaBanner1 from 'ui/banner/BlankRasaBanner1';
 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 }>
+        <ChainIndicators/>
+        <BlankRasaBanner1/>
+      </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 BlankRasaBanner2 from 'ui/banner/BlankRasaBanner2';
 import TextAd from 'ui/shared/ad/TextAd';
 import LinkInternal from 'ui/shared/LinkInternal';
 
@@ -90,59 +91,62 @@ 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"
-        >
-          <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 }
+    <>
+      <BlankRasaBanner2/>
+      <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"
           >
-            <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 }
+            <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 }
             >
-              <span ref={ textRef }>
-                { title }
-              </span>
-            </Heading>
-          </Tooltip>
-        </Skeleton>
-        { afterTitle }
+              <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>
-      { 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 pt={{ base: 0, lg: '25px' }} as="main">
       { children }
     </Box>
   );