From 149b0b77311cdd36e93877c4a48f06b18fb573d9 Mon Sep 17 00:00:00 2001
From: scott lee <scott.l@kaia.io>
Date: Thu, 2 Jan 2025 11:29:30 +0900
Subject: [PATCH 1/3] Optimize homepage components

---
 src/components/Homepage/HomepageAPIRef.tsx    |  39 ++---
 src/components/Homepage/HomepageFavorites.tsx | 137 ++++++++----------
 src/components/Homepage/HomepageSDK.tsx       |  39 +++--
 3 files changed, 99 insertions(+), 116 deletions(-)

diff --git a/src/components/Homepage/HomepageAPIRef.tsx b/src/components/Homepage/HomepageAPIRef.tsx
index 74efd4762160..edde779d2d31 100644
--- a/src/components/Homepage/HomepageAPIRef.tsx
+++ b/src/components/Homepage/HomepageAPIRef.tsx
@@ -6,7 +6,7 @@ import Translate from '@docusaurus/Translate';
 import rpcApiDark from '../../images/rpc-api-dark.png';
 import rpcApiLight from '../../images/rpc-api-light.png';
 
-const Container = styled.div`
+const Container = React.memo(styled.div`
   display: flex;
   flex-direction: column;
   gap: 30px;
@@ -19,21 +19,21 @@ const Container = styled.div`
     gap: 40px;
     align-items: flex-start;
   }
-`;
+`);
 
-const ContentColumn = styled.div`
+const ContentColumn = React.memo(styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`;
+`);
 
-const ImageColumn = styled.div`
+const ImageColumn = React.memo(styled.div`
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-`;
+`);
 
 const Title = styled.h2<{ themeMode: string }>`
   font-size: 1rem;
@@ -56,7 +56,7 @@ const Description = styled.p<{ themeMode: string }>`
   color: ${({ themeMode }) => (themeMode === 'dark' ? '#e5e7eb' : '#4b5563')};
 `;
 
-const StyledLink = styled(Link)`
+const StyledLink = React.memo(styled(Link)`
   display: inline-block;
   font-size: 1.125rem;
   font-weight: bold;
@@ -65,13 +65,13 @@ const StyledLink = styled(Link)`
   &:hover {
     text-decoration: underline;
   }
-`;
+`);
 
-const Image = styled.img`
+const Image = React.memo(styled.img`
   max-width: 100%;
   height: auto;
   border-radius: 12px;
-`;
+`);
 
 const HomepageAPIRef: React.FC = () => {
   const { colorMode } = useColorMode();
@@ -80,21 +80,24 @@ const HomepageAPIRef: React.FC = () => {
     <Container>
       <ContentColumn>
         <Title themeMode={colorMode}>
-          <Translate>JSON-RPC API Reference</Translate>
+          <Translate id="homepage.api.title" description="Title for JSON-RPC API Reference section">
+            JSON-RPC API Reference
+          </Translate>
         </Title>
         <Heading themeMode={colorMode}>
-          <Translate>Discover and Engage with Kaia's JSON-RPC APIs</Translate>
+          <Translate id="homepage.api.heading" description="Heading for JSON-RPC API section">
+            Discover and Engage with Kaia's JSON-RPC APIs
+          </Translate>
         </Heading>
         <Description themeMode={colorMode}>
-          <Translate>
-            Unlock Kaia's full potential with our interactive API documentation. Test API calls directly in the docs, 
-            explore detailed request and response examples, and generate code snippets in curl, Python, Node.js, and Java. 
-            Whether developing new applications or integrating with existing systems, our comprehensive API reference 
-            provides the tools for efficient development on the Kaia platform.
+          <Translate id="homepage.api.description" description="Description of API documentation">
+            Unlock Kaia's full potential with our interactive API documentation. Test API calls directly in the docs, explore detailed request and response examples, and generate code snippets in curl, Python, Node.js, and Java. Whether developing new applications or integrating with existing systems, our comprehensive API reference provides the tools for efficient development on the Kaia platform.
           </Translate>
         </Description>
         <StyledLink to="/references/json-rpc/references">
-          <Translate>Get started with Kaia's JSON RPC APIs</Translate> &rarr;
+          <Translate id="homepage.api.cta" description="Call to action for API documentation">
+            Get started with Kaia's JSON RPC APIs
+          </Translate> &rarr;
         </StyledLink>
       </ContentColumn>
       <ImageColumn>
diff --git a/src/components/Homepage/HomepageFavorites.tsx b/src/components/Homepage/HomepageFavorites.tsx
index 7793556263a2..1c35f0988402 100644
--- a/src/components/Homepage/HomepageFavorites.tsx
+++ b/src/components/Homepage/HomepageFavorites.tsx
@@ -4,78 +4,49 @@ import styled from 'styled-components';
 import { useColorMode } from '@docusaurus/theme-common';
 import Translate from '@docusaurus/Translate';
 
-const TRANSLATIONS = {
+interface TranslationData {
+  titleId: string;
+  titleText: string;
+  descriptionId: string;
+  descriptionText: string;
+}
+
+const TRANSLATIONS: Record<string, TranslationData> = {
   gettingStarted: {
-    title: (
-      <Translate id="homepage.favorites.gettingStarted.title" description="Title for Getting Started guide">
-        Getting Started
-      </Translate>
-    ),
-    description: (
-      <Translate id="homepage.favorites.gettingStarted.description" description="Description for Getting Started guide">
-        Deploy your first smart contract using Hardhat.
-      </Translate>
-    ),
+    titleId: 'homepage.favorites.gettingStarted.title',
+    titleText: 'Getting Started',
+    descriptionId: 'homepage.favorites.gettingStarted.description',
+    descriptionText: 'Deploy your first smart contract using Hardhat.',
   },
   metamask: {
-    title: (
-      <Translate id="homepage.favorites.metamask.title" description="Title for MetaMask guide">
-        MetaMask Guide
-      </Translate>
-    ),
-    description: (
-      <Translate id="homepage.favorites.metamask.description" description="Description for MetaMask guide">
-        Connect MetaMask to Kaia.
-      </Translate>
-    ),
+    titleId: 'homepage.favorites.metamask.title',
+    titleText: 'MetaMask Guide',
+    descriptionId: 'homepage.favorites.metamask.description',
+    descriptionText: 'Connect MetaMask to Kaia.',
   },
   snapshot: {
-    title: (
-      <Translate id="homepage.favorites.snapshot.title" description="Title for Node Snapshot guide">
-        Node Snapshot Guide
-      </Translate>
-    ),
-    description: (
-      <Translate id="homepage.favorites.snapshot.description" description="Description for Node Snapshot guide">
-        Use Chaindata Snapshots.
-      </Translate>
-    ),
+    titleId: 'homepage.favorites.snapshot.title',
+    titleText: 'Node Snapshot Guide',
+    descriptionId: 'homepage.favorites.snapshot.description',
+    descriptionText: 'Use Chaindata Snapshots.',
   },
   rpc: {
-    title: (
-      <Translate id="homepage.favorites.rpc.title" description="Title for Public JSON RPC Endpoints">
-        Public JSON RPC Endpoints
-      </Translate>
-    ),
-    description: (
-      <Translate id="homepage.favorites.rpc.description" description="Description for Public JSON RPC Endpoints">
-        Build and test your products without running your own node.
-      </Translate>
-    ),
+    titleId: 'homepage.favorites.rpc.title',
+    titleText: 'Public JSON RPC Endpoints',
+    descriptionId: 'homepage.favorites.rpc.description',
+    descriptionText: 'Build and test your products without running your own node.',
   },
   wallets: {
-    title: (
-      <Translate id="homepage.favorites.wallets.title" description="Title for Wallets section">
-        Wallets
-      </Translate>
-    ),
-    description: (
-      <Translate id="homepage.favorites.wallets.description" description="Description for Wallets section">
-        Integrate and secure digital assets seamlessly.
-      </Translate>
-    ),
+    titleId: 'homepage.favorites.wallets.title',
+    titleText: 'Wallets',
+    descriptionId: 'homepage.favorites.wallets.description',
+    descriptionText: 'Integrate and secure digital assets seamlessly.',
   },
   indexers: {
-    title: (
-      <Translate id="homepage.favorites.indexers.title" description="Title for Indexers section">
-        Indexers
-      </Translate>
-    ),
-    description: (
-      <Translate id="homepage.favorites.indexers.description" description="Description for Indexers section">
-        Query and index blockchain data for efficient dApp performance.
-      </Translate>
-    ),
+    titleId: 'homepage.favorites.indexers.title',
+    titleText: 'Indexers',
+    descriptionId: 'homepage.favorites.indexers.description',
+    descriptionText: 'Query and index blockchain data for efficient dApp performance.',
   },
 };
 
@@ -98,7 +69,7 @@ const rightFavorites: Favorite[] = [
   { type: 'indexers', link: '/build/tools/indexers' },
 ];
 
-const Container = styled.div`
+const Container = React.memo(styled.div`
   display: flex;
   flex-direction: column;
   gap: 30px;
@@ -111,7 +82,7 @@ const Container = styled.div`
     gap: 40px;
     align-items: flex-start;
   }
-`;
+`);
 
 const Column = styled.div<{ themeMode: string }>`
   flex: 1;
@@ -182,7 +153,7 @@ const FavoriteDescription = styled.p<{ themeMode: string }>`
   color: ${({ themeMode }) => (themeMode === 'dark' ? '#e5e7eb' : '#4b5563')};
 `;
 
-const ViewMoreLink = styled(Link)`
+const ViewMoreLink = React.memo(styled(Link)`
   display: inline-block;
   margin-top: 8px;
   font-weight: bold;
@@ -191,27 +162,45 @@ const ViewMoreLink = styled(Link)`
   &:hover {
     text-decoration: underline;
   }
-`;
+`);
 
-const FavoriteContent = ({ favorite }: { favorite: Favorite }) => {
+const FavoriteContent = React.memo(({ favorite }: { favorite: Favorite }) => {
   const { colorMode } = useColorMode();
-  const translation = TRANSLATIONS[favorite.type];
+  const translation = React.useMemo(() => TRANSLATIONS[favorite.type], [favorite.type]);
   
   return (
     <FavoriteItem to={favorite.link} themeMode={colorMode}>
       <FavoriteTitle themeMode={colorMode}>
-        {translation.title}
+        <Translate id={translation.titleId} description={`Title for ${translation.titleText}`}>
+          {translation.titleText}
+        </Translate>
       </FavoriteTitle>
       <FavoriteDescription themeMode={colorMode}>
-        {translation.description}
+        <Translate id={translation.descriptionId} description={`Description for ${translation.titleText}`}>
+          {translation.descriptionText}
+        </Translate>
       </FavoriteDescription>
     </FavoriteItem>
   );
-};
+});
 
 const HomepageFavorites: React.FC = () => {
   const { colorMode } = useColorMode();
 
+  const renderedLeftFavorites = React.useMemo(
+    () => leftFavorites.map((favorite) => (
+      <FavoriteContent key={favorite.link} favorite={favorite} />
+    )),
+    [leftFavorites]
+  );
+
+  const renderedRightFavorites = React.useMemo(
+    () => rightFavorites.map((favorite) => (
+      <FavoriteContent key={favorite.link} favorite={favorite} />
+    )),
+    [rightFavorites]
+  );
+
   return (
     <Container>
       <Column themeMode={colorMode}>
@@ -220,9 +209,7 @@ const HomepageFavorites: React.FC = () => {
             Popular Guides
           </Translate>
         </SectionTitle>
-        {leftFavorites.map((favorite) => (
-          <FavoriteContent key={favorite.link} favorite={favorite} />
-        ))}
+        {renderedLeftFavorites}
         <ViewMoreLink to="/build/tutorials">
           <Translate id="homepage.favorites.guides.viewMore" description="Link text to view more guides">
             View More Guides
@@ -236,9 +223,7 @@ const HomepageFavorites: React.FC = () => {
             Popular Resources
           </Translate>
         </SectionTitle>
-        {rightFavorites.map((favorite) => (
-          <FavoriteContent key={favorite.link} favorite={favorite} />
-        ))}
+        {renderedRightFavorites}
         <ViewMoreLink to="/build/tools">
           <Translate id="homepage.favorites.resources.viewMore" description="Link text to view more resources">
             View More Resources
diff --git a/src/components/Homepage/HomepageSDK.tsx b/src/components/Homepage/HomepageSDK.tsx
index 6f39c815b606..3293949274b3 100644
--- a/src/components/Homepage/HomepageSDK.tsx
+++ b/src/components/Homepage/HomepageSDK.tsx
@@ -4,34 +4,27 @@ import styled from 'styled-components';
 import { useColorMode } from '@docusaurus/theme-common';
 import Translate from '@docusaurus/Translate';
 
-const TRANSLATIONS = {
+interface TranslationData {
+  nameId: string;
+  nameText: string;
+}
+
+const TRANSLATIONS: Record<string, TranslationData> = {
   ethersjs: {
-    name: (
-      <Translate id="homepage.sdk.ethersjs.name" description="Name of the Ethers.js Extension SDK">
-        Ethers.js Extension
-      </Translate>
-    ),
+    nameId: 'homepage.sdk.ethersjs.name',
+    nameText: 'Ethers.js Extension',
   },
   web3js: {
-    name: (
-      <Translate id="homepage.sdk.web3js.name" description="Name of the Web3.js Extension SDK">
-        Web3.js Extension
-      </Translate>
-    ),
+    nameId: 'homepage.sdk.web3js.name',
+    nameText: 'Web3.js Extension',
   },
   web3j: {
-    name: (
-      <Translate id="homepage.sdk.web3j.name" description="Name of the Web3j Extension SDK">
-        Web3j Extension
-      </Translate>
-    ),
+    nameId: 'homepage.sdk.web3j.name',
+    nameText: 'Web3j Extension',
   },
   web3py: {
-    name: (
-      <Translate id="homepage.sdk.web3py.name" description="Name of the Web3.py Extension SDK">
-        Web3.py Extension
-      </Translate>
-    ),
+    nameId: 'homepage.sdk.web3py.name',
+    nameText: 'Web3.py Extension',
   },
 };
 
@@ -151,7 +144,9 @@ const SDK = ({ sdk }: { sdk: SDKData }) => {
     <SDKLink to={sdk.to} themeMode={colorMode}>
       <SDKIcon src={sdk.icon} alt={sdk.type} />
       <SDKName>
-        {translation.name}
+        <Translate id={translation.nameId} description={`Name of the ${translation.nameText} SDK`}>
+          {translation.nameText}
+        </Translate>
       </SDKName>
     </SDKLink>
   );

From 5bd3a1eaa2bbaf4c1e09bc045ae0893287bbe9f7 Mon Sep 17 00:00:00 2001
From: scott lee <scott.l@kaia.io>
Date: Thu, 2 Jan 2025 11:49:39 +0900
Subject: [PATCH 2/3] Remove unnecessary changes

---
 src/components/Homepage/HomepageAPIRef.tsx    | 39 +++++++++----------
 src/components/Homepage/HomepageFavorites.tsx | 12 +++---
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/components/Homepage/HomepageAPIRef.tsx b/src/components/Homepage/HomepageAPIRef.tsx
index edde779d2d31..74efd4762160 100644
--- a/src/components/Homepage/HomepageAPIRef.tsx
+++ b/src/components/Homepage/HomepageAPIRef.tsx
@@ -6,7 +6,7 @@ import Translate from '@docusaurus/Translate';
 import rpcApiDark from '../../images/rpc-api-dark.png';
 import rpcApiLight from '../../images/rpc-api-light.png';
 
-const Container = React.memo(styled.div`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 30px;
@@ -19,21 +19,21 @@ const Container = React.memo(styled.div`
     gap: 40px;
     align-items: flex-start;
   }
-`);
+`;
 
-const ContentColumn = React.memo(styled.div`
+const ContentColumn = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-`);
+`;
 
-const ImageColumn = React.memo(styled.div`
+const ImageColumn = styled.div`
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-`);
+`;
 
 const Title = styled.h2<{ themeMode: string }>`
   font-size: 1rem;
@@ -56,7 +56,7 @@ const Description = styled.p<{ themeMode: string }>`
   color: ${({ themeMode }) => (themeMode === 'dark' ? '#e5e7eb' : '#4b5563')};
 `;
 
-const StyledLink = React.memo(styled(Link)`
+const StyledLink = styled(Link)`
   display: inline-block;
   font-size: 1.125rem;
   font-weight: bold;
@@ -65,13 +65,13 @@ const StyledLink = React.memo(styled(Link)`
   &:hover {
     text-decoration: underline;
   }
-`);
+`;
 
-const Image = React.memo(styled.img`
+const Image = styled.img`
   max-width: 100%;
   height: auto;
   border-radius: 12px;
-`);
+`;
 
 const HomepageAPIRef: React.FC = () => {
   const { colorMode } = useColorMode();
@@ -80,24 +80,21 @@ const HomepageAPIRef: React.FC = () => {
     <Container>
       <ContentColumn>
         <Title themeMode={colorMode}>
-          <Translate id="homepage.api.title" description="Title for JSON-RPC API Reference section">
-            JSON-RPC API Reference
-          </Translate>
+          <Translate>JSON-RPC API Reference</Translate>
         </Title>
         <Heading themeMode={colorMode}>
-          <Translate id="homepage.api.heading" description="Heading for JSON-RPC API section">
-            Discover and Engage with Kaia's JSON-RPC APIs
-          </Translate>
+          <Translate>Discover and Engage with Kaia's JSON-RPC APIs</Translate>
         </Heading>
         <Description themeMode={colorMode}>
-          <Translate id="homepage.api.description" description="Description of API documentation">
-            Unlock Kaia's full potential with our interactive API documentation. Test API calls directly in the docs, explore detailed request and response examples, and generate code snippets in curl, Python, Node.js, and Java. Whether developing new applications or integrating with existing systems, our comprehensive API reference provides the tools for efficient development on the Kaia platform.
+          <Translate>
+            Unlock Kaia's full potential with our interactive API documentation. Test API calls directly in the docs, 
+            explore detailed request and response examples, and generate code snippets in curl, Python, Node.js, and Java. 
+            Whether developing new applications or integrating with existing systems, our comprehensive API reference 
+            provides the tools for efficient development on the Kaia platform.
           </Translate>
         </Description>
         <StyledLink to="/references/json-rpc/references">
-          <Translate id="homepage.api.cta" description="Call to action for API documentation">
-            Get started with Kaia's JSON RPC APIs
-          </Translate> &rarr;
+          <Translate>Get started with Kaia's JSON RPC APIs</Translate> &rarr;
         </StyledLink>
       </ContentColumn>
       <ImageColumn>
diff --git a/src/components/Homepage/HomepageFavorites.tsx b/src/components/Homepage/HomepageFavorites.tsx
index 1c35f0988402..5e6d349d55c6 100644
--- a/src/components/Homepage/HomepageFavorites.tsx
+++ b/src/components/Homepage/HomepageFavorites.tsx
@@ -69,7 +69,7 @@ const rightFavorites: Favorite[] = [
   { type: 'indexers', link: '/build/tools/indexers' },
 ];
 
-const Container = React.memo(styled.div`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 30px;
@@ -82,7 +82,7 @@ const Container = React.memo(styled.div`
     gap: 40px;
     align-items: flex-start;
   }
-`);
+`;
 
 const Column = styled.div<{ themeMode: string }>`
   flex: 1;
@@ -153,7 +153,7 @@ const FavoriteDescription = styled.p<{ themeMode: string }>`
   color: ${({ themeMode }) => (themeMode === 'dark' ? '#e5e7eb' : '#4b5563')};
 `;
 
-const ViewMoreLink = React.memo(styled(Link)`
+const ViewMoreLink = styled(Link)`
   display: inline-block;
   margin-top: 8px;
   font-weight: bold;
@@ -162,9 +162,9 @@ const ViewMoreLink = React.memo(styled(Link)`
   &:hover {
     text-decoration: underline;
   }
-`);
+`;
 
-const FavoriteContent = React.memo(({ favorite }: { favorite: Favorite }) => {
+const FavoriteContent = ({ favorite }: { favorite: Favorite }) => {
   const { colorMode } = useColorMode();
   const translation = React.useMemo(() => TRANSLATIONS[favorite.type], [favorite.type]);
   
@@ -182,7 +182,7 @@ const FavoriteContent = React.memo(({ favorite }: { favorite: Favorite }) => {
       </FavoriteDescription>
     </FavoriteItem>
   );
-});
+};
 
 const HomepageFavorites: React.FC = () => {
   const { colorMode } = useColorMode();

From e16ddb203deef6d3ddea6a9b5e561b582a5060fc Mon Sep 17 00:00:00 2001
From: scott lee <scott.l@kaia.io>
Date: Thu, 2 Jan 2025 15:15:10 +0900
Subject: [PATCH 3/3] Remove dynamically constructed values inside Translation
 components

---
 src/components/Homepage/HomepageFavorites.tsx | 137 +++++++++---------
 src/components/Homepage/HomepageSDK.tsx       |  51 ++++---
 2 files changed, 92 insertions(+), 96 deletions(-)

diff --git a/src/components/Homepage/HomepageFavorites.tsx b/src/components/Homepage/HomepageFavorites.tsx
index 5e6d349d55c6..37e24f9ab24f 100644
--- a/src/components/Homepage/HomepageFavorites.tsx
+++ b/src/components/Homepage/HomepageFavorites.tsx
@@ -4,53 +4,7 @@ import styled from 'styled-components';
 import { useColorMode } from '@docusaurus/theme-common';
 import Translate from '@docusaurus/Translate';
 
-interface TranslationData {
-  titleId: string;
-  titleText: string;
-  descriptionId: string;
-  descriptionText: string;
-}
-
-const TRANSLATIONS: Record<string, TranslationData> = {
-  gettingStarted: {
-    titleId: 'homepage.favorites.gettingStarted.title',
-    titleText: 'Getting Started',
-    descriptionId: 'homepage.favorites.gettingStarted.description',
-    descriptionText: 'Deploy your first smart contract using Hardhat.',
-  },
-  metamask: {
-    titleId: 'homepage.favorites.metamask.title',
-    titleText: 'MetaMask Guide',
-    descriptionId: 'homepage.favorites.metamask.description',
-    descriptionText: 'Connect MetaMask to Kaia.',
-  },
-  snapshot: {
-    titleId: 'homepage.favorites.snapshot.title',
-    titleText: 'Node Snapshot Guide',
-    descriptionId: 'homepage.favorites.snapshot.description',
-    descriptionText: 'Use Chaindata Snapshots.',
-  },
-  rpc: {
-    titleId: 'homepage.favorites.rpc.title',
-    titleText: 'Public JSON RPC Endpoints',
-    descriptionId: 'homepage.favorites.rpc.description',
-    descriptionText: 'Build and test your products without running your own node.',
-  },
-  wallets: {
-    titleId: 'homepage.favorites.wallets.title',
-    titleText: 'Wallets',
-    descriptionId: 'homepage.favorites.wallets.description',
-    descriptionText: 'Integrate and secure digital assets seamlessly.',
-  },
-  indexers: {
-    titleId: 'homepage.favorites.indexers.title',
-    titleText: 'Indexers',
-    descriptionId: 'homepage.favorites.indexers.description',
-    descriptionText: 'Query and index blockchain data for efficient dApp performance.',
-  },
-};
-
-type FavoriteType = keyof typeof TRANSLATIONS;
+type FavoriteType = 'gettingStarted' | 'metamask' | 'snapshot' | 'rpc' | 'wallets' | 'indexers';
 
 interface Favorite {
   type: FavoriteType;
@@ -166,19 +120,72 @@ const ViewMoreLink = styled(Link)`
 
 const FavoriteContent = ({ favorite }: { favorite: Favorite }) => {
   const { colorMode } = useColorMode();
-  const translation = React.useMemo(() => TRANSLATIONS[favorite.type], [favorite.type]);
   
   return (
     <FavoriteItem to={favorite.link} themeMode={colorMode}>
       <FavoriteTitle themeMode={colorMode}>
-        <Translate id={translation.titleId} description={`Title for ${translation.titleText}`}>
-          {translation.titleText}
-        </Translate>
+        {favorite.type === 'gettingStarted' && (
+          <Translate id="homepage.favorites.gettingStarted.title" description="Title for Getting Started guide">
+            Getting Started
+          </Translate>
+        )}
+        {favorite.type === 'metamask' && (
+          <Translate id="homepage.favorites.metamask.title" description="Title for MetaMask guide">
+            MetaMask Guide
+          </Translate>
+        )}
+        {favorite.type === 'snapshot' && (
+          <Translate id="homepage.favorites.snapshot.title" description="Title for Node Snapshot guide">
+            Node Snapshot Guide
+          </Translate>
+        )}
+        {favorite.type === 'rpc' && (
+          <Translate id="homepage.favorites.rpc.title" description="Title for RPC Endpoints">
+            Public JSON RPC Endpoints
+          </Translate>
+        )}
+        {favorite.type === 'wallets' && (
+          <Translate id="homepage.favorites.wallets.title" description="Title for Wallets section">
+            Wallets
+          </Translate>
+        )}
+        {favorite.type === 'indexers' && (
+          <Translate id="homepage.favorites.indexers.title" description="Title for Indexers section">
+            Indexers
+          </Translate>
+        )}
       </FavoriteTitle>
       <FavoriteDescription themeMode={colorMode}>
-        <Translate id={translation.descriptionId} description={`Description for ${translation.titleText}`}>
-          {translation.descriptionText}
-        </Translate>
+        {favorite.type === 'gettingStarted' && (
+          <Translate id="homepage.favorites.gettingStarted.description" description="Description for Getting Started guide">
+            Deploy your first smart contract using Hardhat.
+          </Translate>
+        )}
+        {favorite.type === 'metamask' && (
+          <Translate id="homepage.favorites.metamask.description" description="Description for MetaMask guide">
+            Connect MetaMask to Kaia.
+          </Translate>
+        )}
+        {favorite.type === 'snapshot' && (
+          <Translate id="homepage.favorites.snapshot.description" description="Description for Node Snapshot guide">
+            Use Chaindata Snapshots.
+          </Translate>
+        )}
+        {favorite.type === 'rpc' && (
+          <Translate id="homepage.favorites.rpc.description" description="Description for RPC Endpoints">
+            Build and test your products without running your own node.
+          </Translate>
+        )}
+        {favorite.type === 'wallets' && (
+          <Translate id="homepage.favorites.wallets.description" description="Description for Wallets section">
+            Integrate and secure digital assets seamlessly.
+          </Translate>
+        )}
+        {favorite.type === 'indexers' && (
+          <Translate id="homepage.favorites.indexers.description" description="Description for Indexers section">
+            Query and index blockchain data for efficient dApp performance.
+          </Translate>
+        )}
       </FavoriteDescription>
     </FavoriteItem>
   );
@@ -187,20 +194,6 @@ const FavoriteContent = ({ favorite }: { favorite: Favorite }) => {
 const HomepageFavorites: React.FC = () => {
   const { colorMode } = useColorMode();
 
-  const renderedLeftFavorites = React.useMemo(
-    () => leftFavorites.map((favorite) => (
-      <FavoriteContent key={favorite.link} favorite={favorite} />
-    )),
-    [leftFavorites]
-  );
-
-  const renderedRightFavorites = React.useMemo(
-    () => rightFavorites.map((favorite) => (
-      <FavoriteContent key={favorite.link} favorite={favorite} />
-    )),
-    [rightFavorites]
-  );
-
   return (
     <Container>
       <Column themeMode={colorMode}>
@@ -209,7 +202,9 @@ const HomepageFavorites: React.FC = () => {
             Popular Guides
           </Translate>
         </SectionTitle>
-        {renderedLeftFavorites}
+        {leftFavorites.map((favorite) => (
+          <FavoriteContent key={favorite.link} favorite={favorite} />
+        ))}
         <ViewMoreLink to="/build/tutorials">
           <Translate id="homepage.favorites.guides.viewMore" description="Link text to view more guides">
             View More Guides
@@ -223,7 +218,9 @@ const HomepageFavorites: React.FC = () => {
             Popular Resources
           </Translate>
         </SectionTitle>
-        {renderedRightFavorites}
+        {rightFavorites.map((favorite) => (
+          <FavoriteContent key={favorite.link} favorite={favorite} />
+        ))}
         <ViewMoreLink to="/build/tools">
           <Translate id="homepage.favorites.resources.viewMore" description="Link text to view more resources">
             View More Resources
diff --git a/src/components/Homepage/HomepageSDK.tsx b/src/components/Homepage/HomepageSDK.tsx
index 3293949274b3..a7aac57a0fac 100644
--- a/src/components/Homepage/HomepageSDK.tsx
+++ b/src/components/Homepage/HomepageSDK.tsx
@@ -4,28 +4,11 @@ import styled from 'styled-components';
 import { useColorMode } from '@docusaurus/theme-common';
 import Translate from '@docusaurus/Translate';
 
-interface TranslationData {
-  nameId: string;
-  nameText: string;
-}
-
-const TRANSLATIONS: Record<string, TranslationData> = {
-  ethersjs: {
-    nameId: 'homepage.sdk.ethersjs.name',
-    nameText: 'Ethers.js Extension',
-  },
-  web3js: {
-    nameId: 'homepage.sdk.web3js.name',
-    nameText: 'Web3.js Extension',
-  },
-  web3j: {
-    nameId: 'homepage.sdk.web3j.name',
-    nameText: 'Web3j Extension',
-  },
-  web3py: {
-    nameId: 'homepage.sdk.web3py.name',
-    nameText: 'Web3.py Extension',
-  },
+const TRANSLATIONS = {
+  ethersjs: 'Ethers.js Extension',
+  web3js: 'Web3.js Extension',
+  web3j: 'Web3j Extension',
+  web3py: 'Web3.py Extension',
 };
 
 type SDKType = keyof typeof TRANSLATIONS;
@@ -138,15 +121,31 @@ const StyledLink = styled(Link)`
 
 const SDK = ({ sdk }: { sdk: SDKData }) => {
   const { colorMode } = useColorMode();
-  const translation = TRANSLATIONS[sdk.type];
   
   return (
     <SDKLink to={sdk.to} themeMode={colorMode}>
       <SDKIcon src={sdk.icon} alt={sdk.type} />
       <SDKName>
-        <Translate id={translation.nameId} description={`Name of the ${translation.nameText} SDK`}>
-          {translation.nameText}
-        </Translate>
+        {sdk.type === 'ethersjs' && (
+          <Translate id="homepage.sdk.ethersjs.name" description="Name of the Ethers.js Extension SDK">
+            Ethers.js Extension
+          </Translate>
+        )}
+        {sdk.type === 'web3js' && (
+          <Translate id="homepage.sdk.web3js.name" description="Name of the Web3.js Extension SDK">
+            Web3.js Extension
+          </Translate>
+        )}
+        {sdk.type === 'web3j' && (
+          <Translate id="homepage.sdk.web3j.name" description="Name of the Web3j Extension SDK">
+            Web3j Extension
+          </Translate>
+        )}
+        {sdk.type === 'web3py' && (
+          <Translate id="homepage.sdk.web3py.name" description="Name of the Web3.py Extension SDK">
+            Web3.py Extension
+          </Translate>
+        )}
       </SDKName>
     </SDKLink>
   );