feat: set Link prefetch false & add ads

src/components/FlexBar/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+export const HoverCard = () => {
+  const router = useRouter();
+
+  React.useEffect(() => {
+    const isAvailable = document.querySelectorAll("#_hellobar_")[0];
+    if (typeof window._bsa !== "undefined" && window._bsa && !!!isAvailable) {
+      window._bsa.init("hellobar", "CE7IPKQL", "placement:jsoncrackcom");
+    }
+
+    if (isAvailable) {
+      window._bsa.reload("#_hellobar_");
+    }
+  }, [router.asPath]);
+
+  return <div id="hellobarContainer"></div>;
+};

src/constants/globalStyle.ts

@@ -1,19 +1,10 @@
-import localFont from "next/font/local";
 import { createGlobalStyle } from "styled-components";
 
-const monaSans = localFont({
-  src: "../pages/Mona-Sans.woff2",
-  variable: "--mona-sans",
-  display: "swap",
-  fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],
-});
-
 const GlobalStyle = createGlobalStyle`
   html, body {
     color: ${({ theme }) => theme.FULL_WHITE} !important;
     font-weight: 400;
     font-size: 16px;
-    font-family: ${monaSans.style.fontFamily};
     background: #F1F1F1 !important;
 
     @media only screen and (max-width: 768px) {

src/layout/EditorMantine/index.tsx

@@ -17,6 +17,9 @@ export const EditorMantine: React.FC<{ children: React.ReactNode }> = ({ childre
         theme={{
           colorScheme: lightmode ? "light" : "dark",
           fontFamily: monaSans.style.fontFamily,
+          headings: {
+            fontFamily: monaSans.style.fontFamily,
+          },
           components: {
             Divider: {
               styles: () => ({

src/layout/JsonCrackLogo/index.tsx

@@ -21,7 +21,7 @@ const StyledGradientText = styled.span`
 
 export const JSONCrackLogo: React.FC<{ fontSize?: string }> = ({ fontSize = "1.2rem" }) => {
   return (
-    <Link href="/">
+    <Link href="/" prefetch={false}>
       <StyledTitle fontSize={fontSize}>
         <StyledGradientText>JSON</StyledGradientText> CRACK
       </StyledTitle>

src/layout/Navbar/index.tsx

@@ -59,17 +59,17 @@ export const Navbar = () => {
           >
             GitHub
           </Button>
-          <Link href="/docs">
+          <Link href="/docs" prefetch={false}>
             <Button variant="subtle" color="dark" radius="md">
               Docs
             </Button>
           </Link>
-          <Link href="/oss">
+          <Link href="/oss" prefetch={false}>
             <Button variant="subtle" color="dark" radius="md">
               Supporters
             </Button>
           </Link>
-          <Link href="/pricing">
+          <Link href="/pricing" prefetch={false}>
             <Button variant="subtle" color="dark" radius="md">
               Pricing
             </Button>
@@ -86,7 +86,7 @@ export const Navbar = () => {
           >
             Star us on GitHub
           </Button>
-          <Link href="/sign-in">
+          <Link href="/sign-in" prefetch={false}>
             <Button variant="light" radius="md" className="hide-mobile">
               Sign In
             </Button>

src/pages/404.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { useRouter } from "next/router";
 import styled from "styled-components";
-import { Button } from "@mantine/core";
+import { Button, Text, Title } from "@mantine/core";
+import Layout from "src/layout/Layout";
 
 const StyledNotFound = styled.div`
   display: flex;
@@ -33,18 +34,18 @@ const NotFound: React.FC = () => {
   const router = useRouter();
 
   return (
-    <StyledNotFound>
+    <Layout>
-      <StyledImageWrapper>
+      <StyledNotFound>
-        <img src="/assets/404.svg" alt="not found" width={300} height={400} />
+        <StyledImageWrapper>
-      </StyledImageWrapper>
+          <img src="/assets/404.svg" alt="not found" width={300} height={400} />
-      <StyledMessage>WIZARDS BEHIND CURTAINS?</StyledMessage>
+        </StyledImageWrapper>
-      <StyledSubMessage>
+        <Title color="dark">WIZARDS BEHIND CURTAINS?</Title>
-        Looks like you&apos;re lost, let&apos;s head back to the home!
+        <Text color="dark">Looks like you&apos;re lost, let&apos;s head back to the home!</Text>
-      </StyledSubMessage>
+        <Button mt="lg" size="lg" type="button" onClick={() => router.push("/")}>
-      <Button type="button" onClick={() => router.push("/")}>
+          Go Home
-        Go Home
+        </Button>
-      </Button>
+      </StyledNotFound>
-    </StyledNotFound>
+    </Layout>
   );
 };
 

src/pages/_app.tsx

@@ -40,6 +40,7 @@ function JsonCrack({ Component, pageProps }: AppProps) {
             theme={{
               colorScheme: "light",
               fontFamily: monaSans.style.fontFamily,
+              headings: { fontFamily: monaSans.style.fontFamily },
             }}
           >
             <Component {...pageProps} />

src/pages/_document.tsx

@@ -20,14 +20,13 @@ class MyDocument extends Document {
           <meta name="theme-color" content="#36393E" />
           <link rel="manifest" href="/manifest.json" />
           <link rel="icon" href="/favicon.ico" />
-          <Script
-            strategy="afterInteractive"
-            src="//m.servedby-buysellads.com/monetization.js"
-            type="text/javascript"
-          />
         </Head>
         <body>
           <Main />
+          <Script
+            src="https://m.servedby-buysellads.com/monetization.js"
+            strategy="beforeInteractive"
+          />
           <NextScript />
         </body>
       </Html>

src/pages/index.tsx

@@ -18,12 +18,11 @@ import {
 import { FaChevronRight } from "react-icons/fa";
 import { SiVisualstudiocode } from "react-icons/si";
 import { Typewriter } from "react-simple-typewriter";
+import { HoverCard } from "src/components/FlexBar";
 import { lightTheme } from "src/constants/theme";
 import { Footer } from "src/layout/Footer";
 import { Navbar } from "src/layout/Navbar";
 
-const StyledHome = styled.div``;
-
 const StyledHeroSection = styled.div`
   --bg-color: ${({ theme }) => theme.GRID_BG_COLOR};
   --line-color-1: ${({ theme }) => theme.GRID_COLOR_PRIMARY};
@@ -137,186 +136,192 @@ const StyledFeatures = styled(Container)`
   }
 `;
 
+const HeroSection = () => (
+  <StyledHeroSection id="hero-section">
+    <Navbar />
+    <StyledHeroSectionBody>
+      <Left>
+        <StyledTitle>
+          <StyledGradientText>JSON</StyledGradientText> CRACK
+        </StyledTitle>
+        <StyledHeroText>
+          Seamlessly visualize your{" "}
+          <StyledHighlightedText>
+            <Typewriter
+              words={["JSON", "YAML", "XML", "TOML", "CSV"]}
+              typeSpeed={100}
+              deleteSpeed={60}
+              delaySpeed={2000}
+              loop
+            />
+          </StyledHighlightedText>{" "}
+          instantly into graphs!
+        </StyledHeroText>
+        <Group spacing="xl">
+          <Link href="/editor" prefetch={false}>
+            <Button fw="bold" rightIcon={<FaChevronRight />} size="lg">
+              GO TO EDITOR
+            </Button>
+          </Link>
+          <Tooltip
+            maw={400}
+            label="VS Code extension only contains JSON visualization without additional features."
+            withArrow
+            multiline
+            position="bottom"
+          >
+            <Anchor
+              href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
+              target="_blank"
+              fw="bold"
+            >
+              <Flex gap="xs" align="center">
+                <SiVisualstudiocode />
+                Get it on VS Code
+              </Flex>
+            </Anchor>
+          </Tooltip>
+        </Group>
+      </Left>
+      <Right>
+        <Image src="/assets/diagram_bg.webp" width="1200" height="593" alt="diagram" />
+      </Right>
+    </StyledHeroSectionBody>
+  </StyledHeroSection>
+);
+
+const StatsBanner = () => (
+  <StyledStatsWrapper>
+    <Group spacing="xl">
+      <Stack spacing="0">
+        <Text fw="bolder" fz="1.6rem">
+          24.5K
+        </Text>
+        <Text color="gray.5" fw="bold" fz="0.8rem">
+          GITHUB STARS
+        </Text>
+      </Stack>
+      <Stack spacing="0">
+        <Text fw="bolder" fz="1.6rem">
+          50K+
+        </Text>
+        <Text color="gray.5" fw="bold" fz="0.8rem">
+          MONTHLY USERS
+        </Text>
+      </Stack>
+      <Stack spacing="0">
+        <Text fw="bolder" fz="1.6rem">
+          GPL-3
+        </Text>
+        <Text color="gray.5" fw="bold" fz="0.8rem">
+          LICENSE
+        </Text>
+      </Stack>
+    </Group>
+    <Stack ml={60}>
+      <Text maw={800} fz="0.9rem">
+        JSON Crack is an open-source project with a GPL-3 license. By subscribing to our premium
+        plan, you can help us continue developing and maintaining it, also enjoy the benefits.
+      </Text>
+      <Link href="/pricing" prefetch={false}>
+        <Text color="yellow" fw="bold" w="fit-content">
+          View Premium Plan <FaChevronRight />
+        </Text>
+      </Link>
+    </Stack>
+  </StyledStatsWrapper>
+);
+
+const Features = () => (
+  <StyledFeatures my={60}>
+    <Flex py="lg" align="flex-start" gap="lg">
+      <Image
+        width={500}
+        height={287}
+        src="/assets/highlight_graph.svg"
+        alt="search through graph"
+      />
+      <Stack pt="lg">
+        <Text color="dark" fz="1.5rem" fw="bold">
+          ADVANCED GRAPH SEARCH
+        </Text>
+        <Text color="dark" maw={500}>
+          Quickly navigate through your data visualization using JSON Crack&apos;s intuitive search
+          functionality. Directly locate specific nodes matching with your search!
+        </Text>
+      </Stack>
+    </Flex>
+    <Flex py="lg" align="center" gap="lg" direction="row-reverse">
+      <Image width={300} height={260} src="/assets/multidata.png" alt="multiple format support" />
+      <Stack>
+        <Text color="dark" fz="1.5rem" fw="bold">
+          DYNAMIC DATA VISUALIZATION
+        </Text>
+        <Text color="dark" maw={500}>
+          JSON Crack revolutionizes data visualization by transforming JSON, YAML, XML, and other
+          data types into captivating, interactive graphs. Gain deep insights into complex data
+          structures at a glance.
+        </Text>
+      </Stack>
+    </Flex>
+    <Flex py="lg" align="center" gap="lg">
+      <Image width={400} height={344} src="/assets/download_image.webp" alt="download as image" />
+      <Stack>
+        <Text color="dark" fz="1.5rem" fw="bold">
+          DOWNLOAD AS IMAGE
+        </Text>
+        <Text color="dark" maw={500}>
+          Capture and share your insights effortlessly by downloading your generated graphs as image
+          files. Easily collaborate and communicate data-driven findings with colleagues and
+          stakeholders.
+        </Text>
+      </Stack>
+    </Flex>
+    <Flex direction="row-reverse" py="lg" align="flex-start" gap="lg">
+      <Image width={500} height={285} src="/assets/preview_image.svg" alt="preview images" />
+      <Stack pt="lg">
+        <Text color="dark" fz="1.5rem" fw="bold">
+          IMAGE PREVIEW
+        </Text>
+        <Text color="dark" maw={500}>
+          Seamlessly preview embedded images within your JSON, YAML, or XML data. Instantly view
+          visuals, photos, and graphics directly within JSON Crack, saving you time and effort.
+        </Text>
+      </Stack>
+    </Flex>
+  </StyledFeatures>
+);
+
+const HeroBottom = () => (
+  <Container mt={100}>
+    <Stack>
+      <Title color="dark" order={3} maw={500} mx="auto" align="center">
+        But that&apos;s not all yet!
+        <br />
+        Explore the full potential of your data now......
+      </Title>
+      <Center>
+        <Link href="/editor" prefetch={false}>
+          <Button color="violet" fw="bold" rightIcon={<FaChevronRight />} size="lg">
+            GO TO EDITOR
+          </Button>
+        </Link>
+      </Center>
+    </Stack>
+  </Container>
+);
+
 export const HomePage = () => {
   return (
     <ThemeProvider theme={lightTheme}>
-      <StyledHome>
+      <Head>
-        <Head>
+        <title>JSON Crack - Crack your data into pieces</title>
-          <title>JSON Crack - Crack your data into pieces</title>
+      </Head>
-        </Head>
+      <HeroSection />
-        <StyledHeroSection id="hero-section">
+      <StatsBanner />
-          <Navbar />
+      <Features />
-          <StyledHeroSectionBody>
+      <HeroBottom />
-            <Left>
+      <HoverCard />
-              <StyledTitle>
-                <StyledGradientText>JSON</StyledGradientText> CRACK
-              </StyledTitle>
-              <StyledHeroText>
-                Seamlessly visualize your{" "}
-                <StyledHighlightedText>
-                  <Typewriter
-                    words={["JSON", "YAML", "XML", "TOML", "CSV"]}
-                    typeSpeed={100}
-                    deleteSpeed={60}
-                    delaySpeed={2000}
-                    loop
-                  />
-                </StyledHighlightedText>{" "}
-                instantly into graphs!
-              </StyledHeroText>
-              <Group spacing="xl">
-                <Link href="/editor" prefetch={false}>
-                  <Button fw="bold" rightIcon={<FaChevronRight />} size="lg">
-                    GO TO EDITOR
-                  </Button>
-                </Link>
-                <Tooltip
-                  maw={400}
-                  label="VS Code extension only contains JSON visualization without additional features."
-                  withArrow
-                  multiline
-                  position="bottom"
-                >
-                  <Anchor
-                    href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
-                    target="_blank"
-                    fw="bold"
-                  >
-                    <Flex gap="xs" align="center">
-                      <SiVisualstudiocode />
-                      Get it on VS Code
-                    </Flex>
-                  </Anchor>
-                </Tooltip>
-              </Group>
-            </Left>
-            <Right>
-              <Image src="/assets/diagram_bg.webp" width="1200" height="593" alt="diagram" />
-            </Right>
-          </StyledHeroSectionBody>
-        </StyledHeroSection>
-      </StyledHome>
-      <StyledStatsWrapper>
-        <Group spacing="xl">
-          <Stack spacing="0">
-            <Text fw="bolder" fz="1.6rem">
-              24.5K
-            </Text>
-            <Text color="gray.5" fw="bold" fz="0.8rem">
-              GITHUB STARS
-            </Text>
-          </Stack>
-          <Stack spacing="0">
-            <Text fw="bolder" fz="1.6rem">
-              50K+
-            </Text>
-            <Text color="gray.5" fw="bold" fz="0.8rem">
-              MONTHLY USERS
-            </Text>
-          </Stack>
-          <Stack spacing="0">
-            <Text fw="bolder" fz="1.6rem">
-              GPL-3
-            </Text>
-            <Text color="gray.5" fw="bold" fz="0.8rem">
-              LICENSE
-            </Text>
-          </Stack>
-        </Group>
-        <Stack ml={60}>
-          <Text maw={800} fz="0.9rem">
-            JSON Crack is an open-source project with a GPL-3 license. By subscribing to our premium
-            plan, you can help us continue developing and maintaining it, also enjoy the benefits.
-          </Text>
-          <Anchor href="/pricing" color="yellow" fw="bold" w="fit-content">
-            View Premium Plan <FaChevronRight />
-          </Anchor>
-        </Stack>
-      </StyledStatsWrapper>
-
-      <StyledFeatures my={60}>
-        <Flex py="lg" align="flex-start" gap="lg">
-          <Image
-            width={500}
-            height={287}
-            src="/assets/highlight_graph.svg"
-            alt="search through graph"
-          />
-          <Stack pt="lg">
-            <Text color="dark" fz="1.5rem" fw="bold">
-              ADVANCED GRAPH SEARCH
-            </Text>
-            <Text color="dark" maw={500}>
-              Quickly navigate through your data visualization using JSON Crack&apos;s intuitive
-              search functionality. Directly locate specific nodes matching with your search!
-            </Text>
-          </Stack>
-        </Flex>
-        <Flex py="lg" align="center" gap="lg" direction="row-reverse">
-          <Image
-            width={300}
-            height={260}
-            src="/assets/multidata.png"
-            alt="multiple format support"
-          />
-          <Stack>
-            <Text color="dark" fz="1.5rem" fw="bold">
-              DYNAMIC DATA VISUALIZATION
-            </Text>
-            <Text color="dark" maw={500}>
-              JSON Crack revolutionizes data visualization by transforming JSON, YAML, XML, and
-              other data types into captivating, interactive graphs. Gain deep insights into complex
-              data structures at a glance.
-            </Text>
-          </Stack>
-        </Flex>
-        <Flex py="lg" align="center" gap="lg">
-          <Image
-            width={400}
-            height={344}
-            src="/assets/download_image.webp"
-            alt="download as image"
-          />
-          <Stack>
-            <Text color="dark" fz="1.5rem" fw="bold">
-              DOWNLOAD AS IMAGE
-            </Text>
-            <Text color="dark" maw={500}>
-              Capture and share your insights effortlessly by downloading your generated graphs as
-              image files. Easily collaborate and communicate data-driven findings with colleagues
-              and stakeholders.
-            </Text>
-          </Stack>
-        </Flex>
-        <Flex direction="row-reverse" py="lg" align="flex-start" gap="lg">
-          <Image width={500} height={285} src="/assets/preview_image.svg" alt="preview images" />
-          <Stack pt="lg">
-            <Text color="dark" fz="1.5rem" fw="bold">
-              IMAGE PREVIEW
-            </Text>
-            <Text color="dark" maw={500}>
-              Seamlessly preview embedded images within your JSON, YAML, or XML data. Instantly view
-              visuals, photos, and graphics directly within JSON Crack, saving you time and effort.
-            </Text>
-          </Stack>
-        </Flex>
-      </StyledFeatures>
-      <Container mt={100}>
-        <Stack>
-          <Title color="dark" order={3} maw={500} mx="auto" align="center">
-            But that&apos;s not all yet!
-            <br />
-            Explore the full potential of your data now......
-          </Title>
-          <Center>
-            <Link href="/editor" prefetch={false}>
-              <Button color="violet" fw="bold" rightIcon={<FaChevronRight />} size="lg">
-                GO TO EDITOR
-              </Button>
-            </Link>
-          </Center>
-        </Stack>
-      </Container>
       <Footer />
     </ThemeProvider>
   );

src/pages/oss.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import Head from "next/head";
-import Link from "next/link";
 import { Button, Center, Container, Grid, Image, Text, Title } from "@mantine/core";
 import { VscHeart } from "react-icons/vsc";
 import Layout from "src/layout/Layout";
@@ -43,12 +42,12 @@ const Oss: React.FC<{ sponsors: any[] }> = ({ sponsors }) => {
         <Grid gutter={30}>
           {sponsors?.map(sponsor => (
             <Grid.Col span="content" key={sponsor.handle}>
-              <Link href={sponsor.profile}>
+              <a href={sponsor.profile}>
                 <Image radius="md" width={"4rem"} src={sponsor.avatar} alt={sponsor.handle} />
                 <Text color="dark.3" pt="sm" align="center" fz="xs">
                   {sponsor.handle}
                 </Text>
-              </Link>
+              </a>
             </Grid.Col>
           ))}
         </Grid>

src/typings/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  _bsa: any;
+}