Component fixing

components/Home/Cards/BlankRasa1.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable max-len */
+import { useColorMode } from '@chakra-ui/react';
+import Image from 'next/image';
+import React from 'react';
+
+const BlankRasa1 = () => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <div className={ colorMode === 'light' ? 'w-full md:w-[40%] bg-white shadow-md rounded-xl p-5 mt-7 shadow-[#eeeeee] border border-[#fcfcfc] text-black' : 'w-full md:w-[40%] bg-[#171717] shadow-lg rounded-xl p-5 mt-7 shadow-[#0e2119] border border-none text-white' }>
+      <Image src="/static/logo2.png" width={ 300 } height={ 300 } alt="logo2" className={ colorMode === 'light' ? 'w-[100px]' : 'w-[100px] invert' } priority/>
+      <h2 className="pt-3 pb-2 text-base 2xl:text-2xl font-[600]">Blank Rasa</h2>
+      <p className={ colorMode === 'light' ? ' text-sm 2xl:text-base text-[#616B74]' : ' text-sm 2xl:text-base text-[#f2f2f2]' }>
+      A platform for discovering and trading NFTs on Canto.
+      Features collections such as CantoLongneck, Shnoises and more
+      </p>
+      <div>
+        <a className="block mt-3" href="https://www.blankrasa.com" target="_blank" referrerPolicy="no-referrer">
+          <button className={ colorMode === 'light' ? 'rounded-md text-sm p-3 border border-[#3CAD71] text-[#3CAD71] font-[500] w-full hover:bg-[#3CAD71] hover:text-[#fff] transition-all duration-300 hover:border-[#3CAD71]' : 'rounded-md text-sm p-3 border border-[#3CAD71] text-[#3CAD71]  font-[500] w-full hover:bg-[#3CAD71] hover:text-[#000] transition-all duration-300 hover:border-[#3CAD71]' }>Explore More</button>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default BlankRasa1;

components/Home/Cards/BlankRasa2.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable max-len */
+import { useColorMode } from '@chakra-ui/react';
+import Image from 'next/image';
+import React from 'react';
+
+const BlankRasa2 = () => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <div className={ colorMode === 'light' ? 'w-full md:flex items-center bg-white shadow-md rounded-xl p-5 shadow-[#eeeeee] border border-[#fcfcfc] text-black' : 'w-full md:flex items-center bg-[#171717] shadow-lg rounded-xl p-5 shadow-[#0e2119] border border-none text-white' }>
+      <div className="md:flex items-center md:gap-5">
+        <Image src="/static/logo2.png" width={ 300 } height={ 300 } alt="logo2" className={ colorMode === 'light' ? 'w-[90px] 2xl:w-[120px]' : 'w-[90px] 2xl:w-[120px] invert' } priority/>
+        <div className="md:w-[60%]">
+          <h2 className="pt-3 pb-2 text-xl 2xl:text-2xl font-[600]">Blank Rasa</h2>
+          <p className={ colorMode === 'light' ? 'text-sm 2xl:text-base text-[#616B74]' : 'text-sm 2xl:text-base text-[#f2f2f2]' }>
+                A platform for discovering and trading NFTs on Canto.
+                Features collections such as CantoLongneck, Shnoises and more
+          </p>
+        </div>
+      </div>
+      <div>
+        <a className="block mt-2 md:w-[270px]" href="https://www.blankrasa.com" target="_blank" referrerPolicy="no-referrer">
+          <button className={ colorMode === 'light' ? 'rounded-md text-sm p-[11px] border border-[#3CAD71] text-[#3CAD71] font-[400] w-full hover:bg-[#3CAD71] hover:text-[#fff] transition-all duration-300 hover:border-[#3CAD71]' : 'rounded-md text-sm p-[11px] border border-[#3CAD71] text-[#3CAD71] font-[400] w-full hover:bg-[#3CAD71] hover:text-[#000] transition-all duration-300 hover:border-[#3CAD71]' }>Explore More</button>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default BlankRasa2;

package.json

@@ -4,7 +4,7 @@
   "private": false,
   "homepage": "https://github.com/blockscout/frontend#readme",
   "engines": {
-    "node": "18",
+    "node": ">=18",
     "npm": "8"
   },
   "scripts": {
@@ -106,6 +106,7 @@
     "@types/ws": "^8.5.3",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.17",
     "css-loader": "^6.7.3",
     "dotenv-cli": "^6.0.0",
     "eslint": "^8.32.0",
@@ -123,8 +124,10 @@
     "lint-staged": ">=10",
     "mockdate": "^3.0.5",
     "next-transpile-modules": "^10.0.0",
+    "postcss": "^8.4.33",
     "style-loader": "^3.3.1",
     "svgo": "^2.8.0",
+    "tailwindcss": "^3.4.1",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.0",

pages/_app.tsx

@@ -1,3 +1,4 @@
+import '../styles/globals.css';
 import { useColorMode, type ChakraProps } from '@chakra-ui/react';
 import * as Sentry from '@sentry/react';
 import { QueryClientProvider } from '@tanstack/react-query';

pages/txs.tsx

@@ -8,9 +8,11 @@ const Transactions = dynamic(() => import('ui/pages/Transactions'), { ssr: false
 
 const Page: NextPage = () => {
   return (
-    <PageNextJs pathname="/txs">
-      <Transactions/>
-    </PageNextJs>
+    <div>
+      <PageNextJs pathname="/txs">
+        <Transactions/>
+      </PageNextJs>
+    </div>
   );
 };
 

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './ui/**/*.{js,ts,jsx,tsx,mdx}',
+
+    // Or if using `src` directory:
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

ui/pages/Home.tsx

@@ -1,4 +1,5 @@
 import { Box, Heading, Flex, LightMode } from '@chakra-ui/react';
+import BlankRasa1 from 'components/Home/Cards/BlankRasa1';
 import React from 'react';
 
 import config from 'configs/app';
@@ -40,7 +41,12 @@ const Home = () => {
         </LightMode>
       </Box>
       <Stats/>
-      <ChainIndicators/>
+      <div className="md:flex w-full gap-8">
+        <div className="w-full">
+          <ChainIndicators/>
+        </div>
+        <BlankRasa1/>
+      </div>
       <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/pages/Transactions.tsx

@@ -84,7 +84,7 @@ const Transactions = () => {
   const pagination = router.query.tab === 'watchlist' ? txsWatchlistQuery.pagination : txsQuery.pagination;
 
   return (
-    <>
+    <div>
       <PageTitle title="Transactions" withTextAd/>
       <RoutedTabs
         tabs={ tabs }
@@ -94,7 +94,7 @@ const Transactions = () => {
         ) }
         stickyEnabled={ !isMobile }
       />
-    </>
+    </div>
   );
 };
 

ui/shared/Page/PageTitle.tsx

@@ -1,4 +1,5 @@
 import { Heading, Flex, Tooltip, Icon, Link, chakra, Skeleton, useDisclosure } from '@chakra-ui/react';
+import BlankRasa2 from 'components/Home/Cards/BlankRasa2';
 import _debounce from 'lodash/debounce';
 import React from 'react';
 
@@ -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 }
+    <div className="p-0 m-0">
+      <BlankRasa2/>
+      <Flex
+        className={ className }
+        mb={ 4 }
+        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>
+    </div>
   );
 };
 

ui/shared/layout/components/Content.tsx

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