mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
feat: add faq & affiliate
This commit is contained in:
AykutSarac
parent
cbadbf907f
commit
558d58b721
@ -35,6 +35,19 @@ export const Footer = () => {
|
||||
Docs
|
||||
</Anchor>
|
||||
</Stack>
|
||||
<Stack gap="xs">
|
||||
<Text fz="sm" c="dimmed">
|
||||
Resources
|
||||
</Text>
|
||||
<Anchor
|
||||
fz="sm"
|
||||
c="dark"
|
||||
href="https://herowand.lemonsqueezy.com/affiliates"
|
||||
target="_blank"
|
||||
>
|
||||
Affiliate
|
||||
</Anchor>
|
||||
</Stack>
|
||||
<Stack gap="xs">
|
||||
<Text fz="sm" c="dimmed">
|
||||
Social
|
||||
@ -74,16 +87,16 @@ export const Footer = () => {
|
||||
</Flex>
|
||||
<Flex gap="xl">
|
||||
<Text fz="sm" c="dimmed">
|
||||
© {dayjs().get("year")} JSON Crack.
|
||||
© {dayjs().get("year")} JSON Crack
|
||||
</Text>
|
||||
<Anchor fz="sm" c="dimmed" href="/legal/privacy">
|
||||
<Text fz="sm" c="dimmed">
|
||||
Privacy Policy
|
||||
</Text>
|
||||
</Anchor>
|
||||
<Anchor fz="sm" c="dimmed" href="/legal/terms">
|
||||
<Text fz="sm" c="dimmed">
|
||||
Terms of Service
|
||||
Terms
|
||||
</Text>
|
||||
</Anchor>
|
||||
<Anchor fz="sm" c="dimmed" href="/legal/privacy">
|
||||
<Text fz="sm" c="dimmed">
|
||||
Privacy
|
||||
</Text>
|
||||
</Anchor>
|
||||
</Flex>
|
||||
|
||||
@ -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 {
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
<Script
|
||||
id="lemon-squeezy-affiliate"
|
||||
strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: 'window.lemonSqueezyAffiliateConfig = { store: "herowand" };',
|
||||
}}
|
||||
/>
|
||||
<Script src="https://lmsqueezy.com/affiliate.js" strategy="afterInteractive"></Script>
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
|
||||
@ -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:
|
||||
<List mt="lg">
|
||||
<List.Item>Expanded support for larger datasets</List.Item>
|
||||
<List.Item>Compact visualization style: what you see is what you need!</List.Item>
|
||||
<List.Item>Searching is faster and smoother</List.Item>
|
||||
<List.Item>Ask AI to filter your data</List.Item>
|
||||
<List.Item>Direct data editing within the graphs & tree view</List.Item>
|
||||
</List>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
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 = () => {
|
||||
</section>
|
||||
|
||||
<PricingCards />
|
||||
<Center mt={80}>
|
||||
<Stack align="center">
|
||||
<StyledHeroText>More than an editor.</StyledHeroText>
|
||||
|
||||
<a href="https://app.jsoncrack.com/sign-up">
|
||||
<Button size="lg" color="dark" rightSection={<MdOutlineArrowRightAlt />} fullWidth>
|
||||
Start using now
|
||||
</Button>
|
||||
</a>
|
||||
</Stack>
|
||||
<Container id="faq" component="section">
|
||||
<Title order={2} fz={36} fw={600} mt={100} style={{ textAlign: "center" }}>
|
||||
Frequently Asked Questions
|
||||
</Title>
|
||||
<Accordion variant="contained" mt={60}>
|
||||
{FAQ.map(({ title, content }) => (
|
||||
<Accordion.Item key={title} value={title}>
|
||||
<Accordion.Control bg="white">{title}</Accordion.Control>
|
||||
<Accordion.Panel bg="gray.1">{content}</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
))}
|
||||
</Accordion>
|
||||
</Container>
|
||||
|
||||
<Center mt={120}>
|
||||
<Button
|
||||
component="a"
|
||||
variant="outline"
|
||||
href="https://app.jsoncrack.com/sign-up"
|
||||
size="lg"
|
||||
radius="md"
|
||||
color="dark"
|
||||
rightSection={<MdOutlineArrowRightAlt />}
|
||||
>
|
||||
Start using now
|
||||
</Button>
|
||||
</Center>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user