small tidy-ups

explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx

@@ -124,6 +124,8 @@ export default async function BlogPage({
       </ContentLayout>
     );
   } catch (error) {
+    console.log(error);
+
     return (
       <ContentLayout>
         <Wrapper>

explorer-nextjs/src/app/globals.css

@@ -19,7 +19,6 @@
 html,
 body {
   max-width: 100vw;
-  overflow-x: hidden;
 }
 
 a {

explorer-nextjs/src/app/page.tsx

@@ -1,8 +1,7 @@
-import ExplorerHeroCard from "@/components/cards/ExplorerHeroCard";
+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 Gateway from "@/components/icons/Gateway";
 import { CurrentEpochCard } from "@/components/landingPageComponents/CurrentEpochCard";
 import { NetworkStakeCard } from "@/components/landingPageComponents/NetworkStakeCard";
 import { NoiseCard } from "@/components/landingPageComponents/NoiseCard";
@@ -14,7 +13,7 @@ import { Stack, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { Suspense } from "react";
 
-export default function Home() {
+export default async function Home() {
   return (
     <ContentLayout>
       <Stack gap={5}>
@@ -61,26 +60,7 @@ export default function Home() {
         <Grid size={12}>
           <SectionHeading title="Onboarding" />
         </Grid>
-        <Grid size={6}>
-          <ExplorerHeroCard
-            label="Onboarding"
-            title="How to select Nym vpn gateway?"
-            description="Stake your tokens to well performing mix nodes, and earn a share of operator rewards!"
-            image={<Gateway />}
-            link={"/onboarding"}
-            sx={{ width: "100%" }}
-          />
-        </Grid>
-        <Grid size={6}>
-          <ExplorerHeroCard
-            label="Onboarding"
-            title="How to select Nym vpn gateway?"
-            description="Stake your tokens to well performing mix nodes, and earn a share of operator rewards!"
-            image={<Gateway />}
-            link={"/onboarding"}
-            sx={{ width: "100%" }}
-          />
-        </Grid>
+        <BlogArticlesCards limit={2} />
       </Grid>
     </ContentLayout>
   );

explorer-nextjs/src/components/blogs/types.ts

@@ -1,5 +1,28 @@
-import type data from "@/data/blog-template.json";
+type Content = { type: string; text: string };
 
-type BlogArticle = typeof data;
+type BlogArticle = {
+  title: string;
+  label: string;
+  description: string;
+  image: string;
+  icon: string;
+  attributes: {
+    blogAuthors: string[];
+    date: string;
+    readingTime: number;
+  };
+  overview: {
+    content: Content[];
+  };
+  sections: {
+    id: string;
+    heading: string;
+    text: Content[];
+  }[];
+};
+
+export type BlogArticleWithLink = BlogArticle & {
+  link: string;
+};
 
 export default BlogArticle;

explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx

@@ -7,6 +7,7 @@ import {
   type SxProps,
   Typography,
 } from "@mui/material";
+import Image from "next/image";
 import { Link } from "../muiLink";
 
 const cardStyles = {
@@ -27,14 +28,14 @@ const ExplorerHeroCard = ({
   title,
   label,
   description,
-  image,
+  icon,
   link,
   sx,
 }: {
   title: string;
   label: string;
   description: string;
-  image: React.ReactNode;
+  icon: string;
   link: string;
   sx?: SxProps;
 }) => {
@@ -53,7 +54,12 @@ const ExplorerHeroCard = ({
         />
         <CardContent sx={cardContentStyles}>
           <Stack spacing={4}>
-            {image}
+            <Image
+              src={icon}
+              alt={"explorer-blog-image"}
+              width={84}
+              height={84}
+            />
             <Typography variant="h2">{title}</Typography>
             <Typography variant="body3">{description}</Typography>
           </Stack>

explorer-nextjs/src/data/blog-template.json → explorer-nextjs/src/data/blog-template-1.json

@@ -1,5 +1,5 @@
 {
-  "title": "Blog 2",
+  "title": "Blog Template 1",
   "label": "Onboarding",
   "description": "VPNs can be powerful tools in protecting us from hackers, but not all cyber attacks. dVPNs are even more effective.",
   "attributes": {
@@ -23,8 +23,7 @@
         "type": "paragraph",
         "text": "This is where decentralized VPNs (dVPNs) come in. dVPNs are even more effective at protecting you from hackers because they are decentralized and do not rely on a single server to protect your data. This makes them more secure and harder for hackers to attack."
       }
-    ],
-    "image": "https://nymtech.net/api/uploads/presentation-poster?w=3840&q=75"
+    ]
   },
   "sections": [
     {

explorer-nextjs/src/data/blog-3.json → explorer-nextjs/src/data/blog-template-2.json

@@ -1,5 +1,5 @@
 {
-  "title": "Blog 3",
+  "title": "Blog Template 2",
   "label": "Onboarding",
   "description": "VPNs can be powerful tools in protecting us from hackers, but not all cyber attacks. dVPNs are even more effective.",
   "attributes": {