From 558d58b721ddbddf47e228e87abc10df085d8edd Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Thu, 9 May 2024 12:48:26 +0300 Subject: [PATCH] feat: add faq & affiliate --- src/layout/Footer/index.tsx | 27 ++++++++++---- src/pages/_document.tsx | 9 +++++ src/pages/index.tsx | 73 ++++++++++++++++++++++++++++++++----- 3 files changed, 93 insertions(+), 16 deletions(-) diff --git a/src/layout/Footer/index.tsx b/src/layout/Footer/index.tsx index 2ae65c2..2711f88 100644 --- a/src/layout/Footer/index.tsx +++ b/src/layout/Footer/index.tsx @@ -35,6 +35,19 @@ export const Footer = () => { Docs + + + Resources + + + Affiliate + + Social @@ -74,16 +87,16 @@ export const Footer = () => { - © {dayjs().get("year")} JSON Crack. + © {dayjs().get("year")} JSON Crack - - - Privacy Policy - - - Terms of Service + Terms + + + + + Privacy diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index d0e34a3..162caae 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -6,6 +6,7 @@ import Document, { DocumentContext, DocumentInitialProps, } from "next/document"; +import Script from "next/script"; import { ColorSchemeScript } from "@mantine/core"; import { ServerStyleSheet } from "styled-components"; @@ -63,6 +64,14 @@ class MyDocument extends Document {
+ ); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 21396a4..fbd4b2b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,12 +3,15 @@ import dynamic from "next/dynamic"; import Head from "next/head"; import Link from "next/link"; import { + Accordion, Badge, Button, Center, + Container, Flex, Grid, Image, + List, Paper, Stack, Text, @@ -213,6 +216,41 @@ const images = [ }, ]; +export const FAQ = [ + { + title: "What is JSON Crack and what does it do?", + content: + "JSON Crack is an open-source free with paid option data visualization app capable of visualizing data formats such as JSON, YAML, XML, CSV and more, into interactive graphs. This makes it much simpler to analyze complex JSON structures.", + }, + { + title: "What are the advantages of the premium plan?", + content: ( + <> + JSON Crack Premium helps you to work with data easier than the free version; it's more + compact, faster and smoother than ever. It's designed for anybody who works with data. + Most significant features include: + + Expanded support for larger datasets + Compact visualization style: what you see is what you need! + Searching is faster and smoother + Ask AI to filter your data + Direct data editing within the graphs & tree view + + + ), + }, + { + title: "Who is it for and what are the use-cases?", + content: + "JSON Crack is for developers, data analysts, and anyone who works with JSON data. It's useful for visualizing JSON data structures, debugging, and understanding complex data. It's also helpful for creating documentation and presentations for your teams/customers.", + }, + { + title: "Do you see my data pasted on the editor?", + content: + "No, JSON Crack does not store your data anywhere unless you upload it manually. When you paste your data into the editor, it's processed on your device only to create the visualization. Your data remains completely private.", + }, +]; + export const HomePage = () => { const [card1, bg1] = useBackgroundCursorPosition("#f2f2f2", "#ffffff", "200px"); const [card2, bg2] = useBackgroundCursorPosition("#f2f2f2", "#ffffff", "200px"); @@ -585,16 +623,33 @@ export const HomePage = () => { -
- - More than an editor. - - - - + + + Frequently Asked Questions + + + {FAQ.map(({ title, content }) => ( + + {title} + {content} + + ))} + + + +
+
);