Merge pull request #5307 from nymtech/feature/explorer_v2-onboarding-page

Feature/explorer v2 onboarding page

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

@@ -0,0 +1,142 @@
+import TableOfContents from "@/components/blogs/TableOfContents";
+import type BlogArticle from "@/components/blogs/types";
+import { Breadcrumbs } from "@/components/breadcrumbs/Breadcrumbs";
+import { ContentLayout } from "@/components/contentLayout/ContentLayout";
+import SectionHeading from "@/components/headings/SectionHeading";
+import { Link } from "@/components/muiLink";
+import { Wrapper } from "@/components/wrapper";
+import { Box, Stack, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { format } from "date-fns";
+import Image from "next/image";
+
+export default async function BlogPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+
+  try {
+    const blogArticle: BlogArticle = await import(`@/data/${slug}.json`);
+    const breadcrumbItems = [
+      {
+        label: "Onboarding",
+        href: "/onboarding",
+      },
+      { label: blogArticle.title, isCurrentPage: true },
+    ];
+    return (
+      <ContentLayout>
+        <Wrapper>
+          <Grid container spacing={5}>
+            <Grid size={{ xs: 12, md: 8 }}>
+              <Stack spacing={4}>
+                <Breadcrumbs items={breadcrumbItems} />
+                <SectionHeading title={blogArticle.title} />
+                <Box
+                  sx={{
+                    borderTop: "1px dashed",
+                    paddingBlockStart: "10px",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                  }}
+                >
+                  <Typography
+                    variant="subtitle3"
+                    sx={{
+                      display: "flex",
+                      gap: "20px",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        display: "flex",
+                        gap: "10px",
+                        alignItems: "center",
+                      }}
+                    >
+                      Author
+                      {(blogArticle?.attributes?.blogAuthors?.length ?? 0) > 1
+                        ? "s"
+                        : ""}
+                      :{" "}
+                      {blogArticle?.attributes?.blogAuthors?.map(
+                        (author: string) => (
+                          <Typography key={author} variant="subtitle3">
+                            {author}
+                          </Typography>
+                        ),
+                      )}
+                    </Box>
+                    <time dateTime={blogArticle?.attributes?.date.toString()}>
+                      {format(blogArticle?.attributes?.date, "MMMM dd, yyyy")}
+                    </time>
+                  </Typography>
+                  <Typography variant="subtitle3">
+                    {blogArticle.attributes.readingTime}{" "}
+                    {blogArticle.attributes.readingTime > 1 ? "mins" : "min"}{" "}
+                    read
+                  </Typography>
+                </Box>
+                <Image
+                  src={blogArticle.image}
+                  alt="blog-image"
+                  width={120}
+                  height={60}
+                  sizes="100vw"
+                  style={{
+                    width: "100%",
+                    height: "auto",
+                  }}
+                />
+                <Box>
+                  {blogArticle.overview.content.map(({ text }) => (
+                    <Typography key={text} variant="body2" sx={{ mt: 3 }}>
+                      {text}
+                    </Typography>
+                  ))}
+                </Box>
+                {blogArticle.sections.map((section) => (
+                  <Box key={section.heading} id={section.id}>
+                    <SectionHeading title={section.heading} />
+                    {section.text.map(({ text }) => (
+                      <Typography key={text} variant="body2" sx={{ mt: 3 }}>
+                        {text}
+                      </Typography>
+                    ))}
+                  </Box>
+                ))}
+              </Stack>
+            </Grid>
+            <Grid size={{ md: 4 }}>
+              <TableOfContents
+                headings={blogArticle.sections.map((section) => ({
+                  heading: section.heading,
+                  id: section.id,
+                }))}
+              />
+            </Grid>
+          </Grid>
+        </Wrapper>
+      </ContentLayout>
+    );
+  } catch (error) {
+    console.log(error);
+
+    return (
+      <ContentLayout>
+        <Wrapper>
+          <SectionHeading title={"Off the grid, like your data"} />
+          <Typography variant="body2">
+            Oops! Looks like the page you’re looking for got mixed up in the
+            noise. Don’t worry, your privacy is intact. Let’s get you
+            <Link href="/">back to the homepage.</Link>
+          </Typography>
+        </Wrapper>
+      </ContentLayout>
+    );
+  }
+}

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

@@ -1,16 +1,15 @@
-import { Wrapper } from "@/components/wrapper";
-import { Box, Typography } from "@mui/material";
+import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
+import { ContentLayout } from "@/components/contentLayout/ContentLayout";
+import SectionHeading from "@/components/headings/SectionHeading";
+import Grid from "@mui/material/Grid2";
 
 export default function OnboardingPage() {
   return (
-    <div>
-      <main>
-        <Box sx={{ p: 5 }}>
-          <Wrapper>
-            <Typography fontWeight="light">Onboarding page</Typography>
-          </Wrapper>
-        </Box>
-      </main>
-    </div>
+    <ContentLayout>
+      <SectionHeading title="Onboarding page" />
+      <Grid container spacing={4}>
+        <BlogArticlesCards />
+      </Grid>
+    </ContentLayout>
   );
 }

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/BlogArticleCards.tsx

@@ -0,0 +1,60 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import Grid from "@mui/material/Grid2";
+import ExplorerHeroCard from "../cards/ExplorerHeroCard";
+import type { BlogArticleWithLink } from "./types";
+
+// TODO: Articles should be sorted by date
+
+const BlogArticlesCards = async ({ limit }: { limit?: number }) => {
+  const blogsDir = path.join(process.cwd(), "/src/data");
+  const blogsDirFilenames = await fs.readdir(blogsDir);
+
+  // Read all blog articles from the data directory
+  const blogArticles: BlogArticleWithLink[] = await Promise.all(
+    blogsDirFilenames.map(async (filename) => {
+      const filePath = path.join(blogsDir, filename);
+      const fileContent = await fs.readFile(filePath, "utf-8");
+      const blogArticle = JSON.parse(fileContent);
+      return {
+        ...blogArticle,
+        link: `/onboarding/${filename.replace(".json", "")}`,
+      };
+    }),
+  );
+
+  const limitedBlogArticles = limit
+    ? blogArticles.slice(0, limit)
+    : blogArticles;
+
+  return limitedBlogArticles
+    .sort((a, b) => {
+      // sort by date
+      return (
+        new Date(a.attributes.date).getTime() -
+        new Date(b.attributes.date).getTime()
+      );
+    })
+    .map((blogArticle) => {
+      return (
+        <Grid
+          size={{
+            sm: 12,
+            md: 6,
+          }}
+          key={blogArticle.title}
+        >
+          <ExplorerHeroCard
+            label={blogArticle.label}
+            title={blogArticle.title}
+            description={blogArticle.description}
+            icon={blogArticle.icon}
+            link={blogArticle.link || ""}
+            sx={{ height: "100%" }}
+          />
+        </Grid>
+      );
+    });
+};
+
+export default BlogArticlesCards;

explorer-nextjs/src/components/blogs/TableOfContents.tsx

@@ -0,0 +1,37 @@
+import { Card, CardContent, CardHeader, Typography } from "@mui/material";
+import { Link } from "../muiLink";
+
+const TableOfContents = ({
+  headings,
+}: {
+  headings: { id: string; heading: string }[];
+}) => {
+  return (
+    <Card
+      elevation={0}
+      sx={{
+        width: "100%",
+        display: {
+          xs: "none",
+          md: "block",
+        },
+        p: 4,
+        position: "sticky",
+        top: 50,
+      }}
+    >
+      <CardHeader title="Table of contents" />
+      <CardContent>
+        {headings.map((heading) => (
+          <Link href={`#${heading.id}`} key={heading.id}>
+            <Typography variant="body2" sx={{ mb: 3 }}>
+              {heading.heading}
+            </Typography>
+          </Link>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TableOfContents;

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

@@ -0,0 +1,28 @@
+type Content = { type: string; text: string };
+
+type BlogArticle = {
+  title: string;
+  label: string;
+  description: string;
+  image: string;
+  icon: string;
+  attributes: {
+    blogAuthors: string[];
+    date: Date;
+    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/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,70 @@
+import BreadcrumbsMUI from "@mui/material/Breadcrumbs";
+import Typography from "@mui/material/Typography";
+import Link from "next/link";
+
+interface BreadcrumbComponentProps {
+  items: BreadcrumbItemType[];
+}
+
+interface BreadcrumbItemType {
+  label: string;
+  href?: string;
+  isCurrentPage?: boolean;
+}
+
+export const Breadcrumbs = ({ items }: BreadcrumbComponentProps) => {
+  return (
+    <BreadcrumbsMUI
+      sx={{
+        color: "primary.main",
+        display: "flex",
+        margin: "0",
+        padding: "0",
+        alignItems: "center",
+      }}
+      separator={
+        <Typography
+          sx={{ display: "flex", height: "100%" }}
+          variant="subtitle3"
+        >
+          /
+        </Typography>
+      }
+      aria-label="breadcrumb"
+    >
+      {items.map((item) => {
+        // Check if it's the current page
+        if (item.isCurrentPage) {
+          return (
+            <Typography
+              sx={{
+                display: "flex",
+              }}
+              variant="subtitle3"
+              key={item.label}
+            >
+              {item.label}
+            </Typography>
+          );
+        }
+
+        // If it's not the current page, render a clickable link
+        return (
+          <Link key={item.label} href={item.href || "#"} passHref>
+            <Typography
+              sx={{
+                display: "flex",
+                "&:hover": {
+                  textDecoration: "underline",
+                },
+              }}
+              variant="subtitle3"
+            >
+              {item.label}
+            </Typography>
+          </Link>
+        );
+      })}
+    </BreadcrumbsMUI>
+  );
+};

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/components/input/Input.tsx

@@ -1,13 +1,16 @@
-import { TextField } from "@mui/material";
+import { type SxProps, TextField } from "@mui/material";
 
 const Input = ({
   placeholder,
   fullWidth,
   value,
+  rounded = false,
   onChange,
 }: {
   placeholder?: string;
   fullWidth?: boolean;
+  rounded?: boolean;
+  sx?: SxProps;
   value: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }) => {
@@ -17,6 +20,13 @@ const Input = ({
       fullWidth={fullWidth}
       value={value}
       onChange={onChange}
+      slotProps={{
+        input: {
+          sx: {
+            borderRadius: rounded ? 10 : 2,
+          },
+        },
+      }}
     />
   );
 };

explorer-nextjs/src/components/search/NodeAndAddressSearch.tsx

@@ -73,6 +73,7 @@ const NodeAndAddressSearch = () => {
           fullWidth
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
+          rounded
         />
         <Button
           variant="contained"

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

@@ -0,0 +1,156 @@
+{
+  "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": {
+    "blogAuthors": ["Nym"],
+    "date": "Mon Jan 04 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
+    "readingTime": 5
+  },
+  "icon": "/icons/gateway.svg",
+  "image": "/images/placeholder.webp",
+  "overview": {
+    "content": [
+      {
+        "type": "paragraph",
+        "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+      },
+      {
+        "type": "paragraph",
+        "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+      },
+      {
+        "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."
+      }
+    ]
+  },
+  "sections": [
+    {
+      "id": "section-1",
+      "heading": "Section 1",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-2",
+      "heading": "Section 2",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-3",
+      "heading": "Section 3",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-4",
+      "heading": "Section 4",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-5",
+      "heading": "Section 5",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-6",
+      "heading": "Section 6",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-7",
+      "heading": "Section 7",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-8",
+      "heading": "Section 8",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-9",
+      "heading": "Section 9",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,157 @@
+{
+  "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": {
+    "blogAuthors": ["Nym"],
+    "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
+    "readingTime": 5
+  },
+  "icon": "/icons/gateway.svg",
+  "image": "/images/placeholder.webp",
+  "overview": {
+    "content": [
+      {
+        "type": "paragraph",
+        "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+      },
+      {
+        "type": "paragraph",
+        "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+      },
+      {
+        "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": [
+    {
+      "id": "section-1",
+      "heading": "Section 1",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-2",
+      "heading": "Section 2",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-3",
+      "heading": "Section 3",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-4",
+      "heading": "Section 4",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-5",
+      "heading": "Section 5",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-6",
+      "heading": "Section 6",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-7",
+      "heading": "Section 7",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-8",
+      "heading": "Section 8",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-9",
+      "heading": "Section 9",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    }
+  ]
+}