Refactor ToolsData

src/app/governance/govhub/data/ToolsData.tsx

@@ -0,0 +1,44 @@
+import type { CTAProps } from '@/types/sharedProps/ctaType'
+import type { StaticImageProps } from '@/types/sharedProps/imageType'
+
+import { FILECOIN_FOUNDATION_URLS } from '@/constants/siteMetadata'
+
+import { graphicsData } from '@/data/graphicsData'
+
+type ToolsData = {
+  title: string
+  description: string
+  purposeList: Array<string>
+  cta: CTAProps
+  image: StaticImageProps
+}
+
+export const toolsData: Array<ToolsData> = [
+  {
+    title: 'PowerVote',
+    description:
+      'PowerVote is an on-chain voting tool that allows the Filecoin community to vote on Filecoin Improvement Proposals (FIPs).',
+    purposeList: [
+      'Facilitate transparent and secure voting on final-stage FIPs.',
+    ],
+    cta: {
+      href: FILECOIN_FOUNDATION_URLS.governance.powerVote.href,
+      text: 'Explore PowerVote',
+    },
+    image: graphicsData.imageFallback,
+  },
+  {
+    title: 'Fil Poll',
+    description:
+      'Fil Poll is a dynamic discussion and sentiment analysis tool integrated with GitHub, designed to engage the community and track FIPs through their governance journey. In the coming months, a FIPs tracking feature would be deployed on Fil Poll, it will visualize community proposals and their statuses.',
+    purposeList: [
+      'Engages the Community: Fil Poll allows community members to share their opinions on early-stage FIPs and other important topics through simple polls.',
+      'Tracks Proposals: The tool includes a tracker that shows how FIPs are moving through different stages of the governance process, making it easy to see their status at a glance.',
+    ],
+    cta: {
+      href: FILECOIN_FOUNDATION_URLS.governance.filPoll.href,
+      text: 'Explore Fil Poll',
+    },
+    image: graphicsData.imageFallback,
+  },
+]

src/app/governance/govhub/page.tsx

@@ -16,6 +16,7 @@ import { StructuredDataScript } from '@/components/StructuredDataScript'
 import { TextLink } from '@/components/TextLink'
 
 import { ToolsCardContent } from './components/ToolsCardContent'
+import { toolsData } from './data/ToolsData'
 import { generateStructuredData } from './utils/generateStructuredData'
 
 const { header, seo } = attributes
@@ -39,37 +40,16 @@ export default function GovHub() {
       />
 
       <PageSection kicker="Tools" title="Explore Our Governance Tools">
-        <SplitContentCard image={graphicsData.imageFallback} index={0}>
-          <ToolsCardContent
-            title="PowerVote"
-            description="PowerVote is an on-chain voting tool that allows the Filecoin community to vote on Filecoin Improvement Proposals (FIPs)."
-            purposeList={[
-              'Facilitate transparent and secure voting on final-stage FIPs.',
-            ]}
-            cta={{
-              href: FILECOIN_FOUNDATION_URLS.governance.powerVote.href,
-              text: 'Explore PowerVote',
-            }}
-          />
-        </SplitContentCard>
-        <SplitContentCard image={graphicsData.imageFallback} index={1}>
-          <ToolsCardContent
-            title="Fil Poll"
-            description="Fil Poll is a dynamic discussion and sentiment analysis tool
-                integrated with GitHub, designed to engage the community and
-                track FIPs through their governance journey. In the coming
-                months, a FIPs tracking feature would be deployed on Fil Poll,
-                it will visualize community proposals and their statuses."
-            purposeList={[
-              'Engages the Community: Fil Poll allows community members to share their opinions on early-stage FIPs and other important topics through simple polls.',
-              'Tracks Proposals: The tool includes a tracker that shows how FIPs are moving through different stages of the governance process, making it easy to see their status at a glance.',
-            ]}
-            cta={{
-              href: FILECOIN_FOUNDATION_URLS.governance.filPoll.href,
-              text: 'Explore Fil Poll',
-            }}
-          />
-        </SplitContentCard>
+        {toolsData.map((tool, index) => (
+          <SplitContentCard key={index} image={tool.image} index={index}>
+            <ToolsCardContent
+              title={tool.title}
+              description={tool.description}
+              purposeList={tool.purposeList}
+              cta={tool.cta}
+            />
+          </SplitContentCard>
+        ))}
       </PageSection>
 
       <CTASection