Modify Building Block page

src/modules/building-blocks/Section_2_vs2/config.tsx

@@ -1,7 +1,10 @@
 export type BlockItemType = {
   key: string;
   label?: string;
-  logoStack?: string[];
+  networkList?: {
+    logoUrl: string;
+    name: string;
+  }[];
   bgColor?: string;
   bgCircle?: string;
   zIndex?: number;
@@ -13,11 +16,31 @@ export const BlockDataList: BlockItemType[] = [
   {
     key: 'Data Availability',
     label: 'Data Availability',
-    logoStack: [
-      '/icons/btc_logo.svg',
-      '/icons/polygon_logo.svg',
-      '/icons/chain1_logo.svg',
-      '/icons/chain2_logo.svg',
+    networkList: [
+      {
+        logoUrl: '/icons/btc_logo.svg',
+        name: 'Bitcoin',
+      },
+      {
+        logoUrl: '/icons/polygon_logo.svg',
+        name: 'Polygon',
+      },
+      {
+        logoUrl: '/icons/celestia_logo.svg',
+        name: 'Celestia',
+      },
+      {
+        logoUrl: '/icons/eigen_logo.svg',
+        name: 'Eigen',
+      },
+      {
+        logoUrl: '/icons/avail_logo.svg',
+        name: 'Avail',
+      },
+      {
+        logoUrl: '/icons/near_logo.svg',
+        name: 'NearDA',
+      },
     ],
     bgColor: '#7069DC',
     bgCircle: '#8D87E3',
@@ -28,7 +51,12 @@ export const BlockDataList: BlockItemType[] = [
   {
     key: 'Settlement',
     label: 'Settlement',
-    logoStack: ['/icons/btc_logo.svg'],
+    networkList: [
+      {
+        logoUrl: '/icons/btc_logo.svg',
+        name: 'Bitcoin',
+      },
+    ],
     bgColor: '#29892A',
     bgCircle: '#54A155',
     zIndex: 9,
@@ -38,29 +66,77 @@ export const BlockDataList: BlockItemType[] = [
   {
     key: 'Execution',
     label: 'Execution',
-    logoStack: [
-      '/icons/op_logo.svg',
-      '/icons/polygon_logo.svg',
-      '/icons/chain3_logo.svg',
+    networkList: [
+      {
+        logoUrl: '/icons/op_logo.svg',
+        name: 'Optimism',
+      },
+      {
+        logoUrl: '/icons/polygon_logo.svg',
+        name: 'Polygon ZKEVM',
+      },
+      {
+        logoUrl: '/icons/zksync_logo.svg',
+        name: 'ZKSync ZKVM',
+      },
+      {
+        logoUrl: '/icons/arbitrum_logo.svg',
+        name: 'Arbitrum',
+      },
+      {
+        logoUrl: '/icons/starknet_logo.svg',
+        name: 'Starknet',
+      },
     ],
     bgColor: '#F7931A',
     bgCircle: '#F9A948',
     zIndex: 7,
     isLastItem: false,
     isHide: false,
   },
+  {
+    key: 'Rollup Framework',
+    label: 'Rollup Framework',
+    networkList: [
+      {
+        logoUrl: '/icons/op_logo.svg',
+        name: 'Optimism',
+      },
+      {
+        logoUrl: '/icons/rollkit_logo.svg',
+        name: 'Rollkit',
+      },
+    ],
+    bgColor: '#25C0EF',
+    bgCircle: '#51CDF2',
+    zIndex: 6,
+    isLastItem: false,
+    isHide: false,
+  },
   {
     key: 'Interop',
     label: 'Interop',
-    logoStack: [
-      '/icons/btc_logo.svg',
-      '/icons/wbtc_logo.svg',
-      '/icons/eth_logo.svg',
-      '/icons/sol_logo.svg',
+    networkList: [
+      {
+        logoUrl: '/icons/btc_logo.svg',
+        name: 'Bitcoin Bridge',
+      },
+      {
+        logoUrl: '/icons/brc20_logo.svg',
+        name: 'BRC20 Bridge',
+      },
+      {
+        logoUrl: '/icons/eth_logo.svg',
+        name: 'Ethereum Bridge',
+      },
+      {
+        logoUrl: '/icons/sol_logo.svg',
+        name: 'Solana Bridge',
+      },
     ],
     bgColor: '#FF5C5C',
     bgCircle: '#FF7D7D',
-    zIndex: 6,
+    zIndex: 5,
     isLastItem: true,
     isHide: false,
   },

src/modules/building-blocks/Section_2_vs2/index.tsx

@@ -45,7 +45,7 @@ const Section2 = () => {
             lineHeight={'100%'}
             fontWeight={500}
           >
-            {item.logoStack?.length || 1}
+            {item.networkList?.length || 1}
           </Text>
         </Flex>
         {!item.isLastItem && (
@@ -75,25 +75,35 @@ const Section2 = () => {
     );
   };
 
-  const renderStackIcons = (logoURLStack?: string[]) => {
+  const renderNetworkList = (
+    item?: {
+      logoUrl: string;
+      name: string;
+    }[],
+  ) => {
     return (
       <HStack spacing={['5px', '5px']} overflowX={'auto'}>
-        {logoURLStack &&
-          logoURLStack.map((url, index) => (
+        {item &&
+          item.map((obj, index) => (
             <Flex
               display={'flex'}
               align={'center'}
               justify={'center'}
+              flexDir={'column'}
               borderRadius={'8px'}
               p={['24px']}
               bgColor={'#fff'}
             >
               <Image
-                key={`${url}-${index}`}
-                src={url}
+                key={`${obj.logoUrl}-${index}`}
+                src={obj.logoUrl}
                 borderRadius={100}
                 boxSize={['32px', '72px']}
               />
+              <Box height={'4px'}></Box>
+              <Text fontSize={['12px']} fontWeight={400} color={'#000'}>
+                {obj.name || ''}
+              </Text>
             </Flex>
           ))}
       </HStack>
@@ -104,7 +114,7 @@ const Section2 = () => {
     return (
       <HStack key={item.key} w={'100%'} minH={['120px']} zIndex={item.zIndex}>
         {renderLabelData(item)}
-        {renderStackIcons(item.logoStack)}
+        {renderNetworkList(item.networkList)}
       </HStack>
     );
   };