From f45e87a848ecdc12cc789742787f0c40fa76156c Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Mon, 6 Jan 2025 19:56:05 +0200
Subject: [PATCH] Add Onboarding cards to Explorer page, Account page and Node
 page

---
 .../app/(pages)/account/[address]/page.tsx    | 29 +++++++++------
 .../src/app/(pages)/explorer/page.tsx         |  8 ++++
 .../src/app/(pages)/nym-node/[id]/page.tsx    | 37 +++++++++++--------
 3 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx b/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx
index 399e2a0b72..0fbb46a999 100644
--- a/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx
+++ b/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx
@@ -3,11 +3,12 @@ import type NodeData from "@/app/api/types";
 import { NYM_ACCOUNT_ADDRESS, NYM_NODES, NYM_PRICES_API } from "@/app/api/urls";
 import { AccountBalancesCard } from "@/components/accountPageComponents/AccountBalancesCard";
 import { AccountInfoCard } from "@/components/accountPageComponents/AccountInfoCard";
+import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Box, Typography } from "@mui/material";
-import Grid2 from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid2";
 
 export default async function Account({
   params,
@@ -61,11 +62,11 @@ export default async function Account({
 
     return (
       <ContentLayout>
-        <Grid2 container columnSpacing={5} rowSpacing={5}>
-          <Grid2 size={6}>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={6}>
             <SectionHeading title="Account Details" />
-          </Grid2>
-          <Grid2 size={6} justifyContent="flex-end">
+          </Grid>
+          <Grid size={6} justifyContent="flex-end">
             <Box sx={{ display: "flex", justifyContent: "end" }}>
               <ExplorerButtonGroup
                 options={[
@@ -84,17 +85,23 @@ export default async function Account({
                 ]}
               />
             </Box>
-          </Grid2>
-          <Grid2 size={4}>
+          </Grid>
+          <Grid size={4}>
             <AccountInfoCard accountInfo={nymAccountBalancesData} />
-          </Grid2>
-          <Grid2 size={8}>
+          </Grid>
+          <Grid size={8}>
             <AccountBalancesCard
               accountInfo={nymAccountBalancesData}
               nymPrice={nymPriceData.usd}
             />
-          </Grid2>
-        </Grid2>
+          </Grid>
+        </Grid>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={12}>
+            <SectionHeading title="Onboarding" />
+          </Grid>
+          <BlogArticlesCards limit={2} />
+        </Grid>
       </ContentLayout>
     );
   } catch (error) {
diff --git a/explorer-nextjs/src/app/(pages)/explorer/page.tsx b/explorer-nextjs/src/app/(pages)/explorer/page.tsx
index ef74c4df7c..439dcc2e0d 100644
--- a/explorer-nextjs/src/app/(pages)/explorer/page.tsx
+++ b/explorer-nextjs/src/app/(pages)/explorer/page.tsx
@@ -1,8 +1,10 @@
+import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
 import CardSkeleton from "@/components/cards/Skeleton";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
 import NodeTableWithAction from "@/components/nodeTable/NodeTableWithAction";
 import { Wrapper } from "@/components/wrapper";
+import Grid from "@mui/material/Grid2";
 import { Suspense } from "react";
 
 export default function ExplorerPage() {
@@ -13,6 +15,12 @@ export default function ExplorerPage() {
         <Suspense fallback={<CardSkeleton sx={{ mt: 5 }} />}>
           <NodeTableWithAction />
         </Suspense>
+        <Grid container columnSpacing={5} rowSpacing={5} mt={10}>
+          <Grid size={12}>
+            <SectionHeading title="Onboarding" />
+          </Grid>
+          <BlogArticlesCards limit={2} />
+        </Grid>
       </Wrapper>
     </ContentLayout>
   );
diff --git a/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx b/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx
index eb671ff146..9ee86ae407 100644
--- a/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx
+++ b/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx
@@ -1,5 +1,6 @@
 import type NodeData from "@/app/api/types";
 import { NYM_NODES } from "@/app/api/urls";
+import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
 import { BasicInfoCard } from "@/components/nymNodePageComponents/BasicInfoCard";
@@ -9,7 +10,7 @@ import { NodeRewardsCard } from "@/components/nymNodePageComponents/NodeRewardsC
 import { QualityIndicatorsCard } from "@/components/nymNodePageComponents/QualityIndicatorsCard";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Box } from "@mui/material";
-import Grid2 from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid2";
 
 export default async function NymNode({
   params,
@@ -42,8 +43,8 @@ export default async function NymNode({
 
     return (
       <ContentLayout>
-        <Grid2 container columnSpacing={5} rowSpacing={5}>
-          <Grid2 size={12}>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={12}>
             <Box sx={{ display: "flex", justifyContent: "space-between" }}>
               <SectionHeading title="Nym Node Details" />
               <ExplorerButtonGroup
@@ -57,8 +58,8 @@ export default async function NymNode({
                 ]}
               />
             </Box>
-          </Grid2>
-          <Grid2
+          </Grid>
+          <Grid
             size={{
               xs: 12,
               md: 4,
@@ -68,8 +69,8 @@ export default async function NymNode({
               bondInfo={nymNode.bond_information}
               nodeDescription={nymNode.description}
             />
-          </Grid2>
-          <Grid2
+          </Grid>
+          <Grid
             size={{
               xs: 12,
               md: 4,
@@ -80,24 +81,24 @@ export default async function NymNode({
               nodeDescription={nymNode.description}
               rewardDetails={nymNode.rewarding_details}
             />
-          </Grid2>
-          <Grid2
+          </Grid>
+          <Grid
             size={{
               xs: 12,
               md: 4,
             }}
           >
             <QualityIndicatorsCard nodeDescription={nymNode.description} />
-          </Grid2>
-          <Grid2
+          </Grid>
+          <Grid
             size={{
               xs: 12,
               md: 6,
             }}
           >
             <NodeRewardsCard rewardDetails={nymNode.rewarding_details} />
-          </Grid2>
-          <Grid2
+          </Grid>
+          <Grid
             size={{
               xs: 12,
               md: 6,
@@ -107,8 +108,14 @@ export default async function NymNode({
               nodeDescription={nymNode.description}
               nodeId={nymNode.bond_information.node_id}
             />
-          </Grid2>
-        </Grid2>
+          </Grid>
+        </Grid>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={12}>
+            <SectionHeading title="Onboarding" />
+          </Grid>
+          <BlogArticlesCards limit={2} />
+        </Grid>
       </ContentLayout>
     );
   } catch (error) {