mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
feat: improve landing
This commit is contained in:
AykutSarac
parent
0ffbb58621
commit
a51fe5f826
33
src/constants/landing.ts
Normal file
33
src/constants/landing.ts
Normal file
@ -0,0 +1,33 @@
|
||||
export const metaDescription =
|
||||
"JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more.";
|
||||
|
||||
export const images = Object.freeze([
|
||||
{
|
||||
id: 1,
|
||||
alt: "Preview of JSON Crack Premium Editor highligting the compact visualization style of the graphs.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the data compare feature feature, showing the differences with red background color and using symbols to indicate the changes.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the data search feature, showing the search results in the data.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the data edit feature, showing the data in a table format with the ability to edit the data directly.",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the data view options, showing the data in a tree view and graph view.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting type generation feature. TypeScript, Go, JSON Schema, and more are shown.",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the image download feature, showing the download options for the data.",
|
||||
},
|
||||
]);
|
||||
@ -1,6 +1,17 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Anchor, Container, Divider, Flex, Stack, Text, ThemeIcon } from "@mantine/core";
|
||||
import {
|
||||
Anchor,
|
||||
Button,
|
||||
Center,
|
||||
Container,
|
||||
Divider,
|
||||
Flex,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import dayjs from "dayjs";
|
||||
import { FaDiscord, FaGithub, FaLinkedin } from "react-icons/fa";
|
||||
import { FaXTwitter } from "react-icons/fa6";
|
||||
@ -8,7 +19,16 @@ import { JSONCrackLogo } from "../JsonCrackLogo";
|
||||
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<Container mt={100}>
|
||||
<Container mt={150}>
|
||||
<Stack align="center">
|
||||
<Title c="black" order={3}>Get Started with JSON Crack</Title>
|
||||
<Text fz="lg" c="dimmed">
|
||||
Designed for everyone, save time understanding your data.
|
||||
</Text>
|
||||
<Button color="dark" component={Link} prefetch={false} href="/pricing" radius="lg" size="xl">
|
||||
Get Started
|
||||
</Button>
|
||||
</Stack>
|
||||
<Divider my={60} />
|
||||
<Flex justify="space-between">
|
||||
<Stack gap={4} visibleFrom="sm">
|
||||
|
||||
@ -6,7 +6,6 @@ import {
|
||||
Accordion,
|
||||
Badge,
|
||||
Button,
|
||||
Center,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
@ -23,16 +22,11 @@ import { Carousel } from "@mantine/carousel";
|
||||
import "@mantine/carousel/styles.css";
|
||||
import styled from "styled-components";
|
||||
import { BiChevronDown } from "react-icons/bi";
|
||||
import {
|
||||
MdChevronRight,
|
||||
MdCompare,
|
||||
MdExtension,
|
||||
MdOutlineArrowRightAlt,
|
||||
MdRebaseEdit,
|
||||
MdSearch,
|
||||
} from "react-icons/md";
|
||||
import { MdChevronRight, MdCompare, MdExtension, MdRebaseEdit, MdSearch } from "react-icons/md";
|
||||
import useBackgroundCursorPosition from "use-bg-cursor-pos";
|
||||
import { images, metaDescription } from "src/constants/landing";
|
||||
import Layout from "src/layout/Layout";
|
||||
import { gaEvent } from "src/lib/utils/gaEvent";
|
||||
|
||||
const PricingCards = dynamic(() => import("./pricing").then(mod => mod.PricingCards));
|
||||
|
||||
@ -182,41 +176,7 @@ const StyledCarouselWrapper = styled.section`
|
||||
}
|
||||
`;
|
||||
|
||||
const metaDescription =
|
||||
"JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more.";
|
||||
|
||||
const images = [
|
||||
{
|
||||
id: 1,
|
||||
alt: "Preview of JSON Crack Premium Editor highligting the compact visualization style of the graphs.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the data compare feature feature, showing the differences with red background color and using symbols to indicate the changes.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the data search feature, showing the search results in the data.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the data edit feature, showing the data in a table format with the ability to edit the data directly.",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the data view options, showing the data in a tree view and graph view.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting type generation feature. TypeScript, Go, JSON Schema, and more are shown.",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
alt: "Preview JSON Crack Premium Editor highlighting the image download feature, showing the download options for the data.",
|
||||
},
|
||||
];
|
||||
|
||||
export const FAQ = [
|
||||
export const FAQ = Object.freeze([
|
||||
{
|
||||
title: "What is JSON Crack and what does it do?",
|
||||
content:
|
||||
@ -249,7 +209,7 @@ export const FAQ = [
|
||||
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");
|
||||
@ -296,30 +256,47 @@ export const HomePage = () => {
|
||||
TOML
|
||||
</Badge>
|
||||
</Flex>
|
||||
<Button
|
||||
component={Link}
|
||||
prefetch={false}
|
||||
href="/editor"
|
||||
size="xl"
|
||||
fw="bold"
|
||||
color="orange.5"
|
||||
rightSection={<MdChevronRight size={30} />}
|
||||
visibleFrom="sm"
|
||||
radius="xl"
|
||||
mt="lg"
|
||||
>
|
||||
Go to Editor
|
||||
</Button>
|
||||
<Flex gap="xs">
|
||||
<Button
|
||||
onClick={() => gaEvent("Hero Section", "click upgrade premium")}
|
||||
component={Link}
|
||||
prefetch={false}
|
||||
href="/editor"
|
||||
size="xl"
|
||||
fw="bold"
|
||||
color="orange.6"
|
||||
rightSection={<MdChevronRight size={30} />}
|
||||
visibleFrom="sm"
|
||||
radius="lg"
|
||||
mt="lg"
|
||||
style={{ boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)" }}
|
||||
>
|
||||
Go to Editor
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
component="a"
|
||||
href="/#pricing"
|
||||
size="xl"
|
||||
fw="bold"
|
||||
color="orange.6"
|
||||
visibleFrom="sm"
|
||||
radius="lg"
|
||||
mt="lg"
|
||||
>
|
||||
Explore Premium
|
||||
</Button>
|
||||
</Flex>
|
||||
<Button
|
||||
component={Link}
|
||||
prefetch={false}
|
||||
href="/editor"
|
||||
fw="bold"
|
||||
size="md"
|
||||
color="orange.5"
|
||||
color="orange.6"
|
||||
rightSection={<MdChevronRight size={24} />}
|
||||
hiddenFrom="sm"
|
||||
radius="xl"
|
||||
radius="lg"
|
||||
mt="lg"
|
||||
>
|
||||
Go to Editor
|
||||
@ -636,7 +613,7 @@ export const HomePage = () => {
|
||||
<PricingCards />
|
||||
|
||||
<Container id="faq" component="section">
|
||||
<Title c="dark" order={2} fz={36} fw={600} mt={100} style={{ textAlign: "center" }}>
|
||||
<Title c="black" order={2} fz={36} fw={600} mt={100} style={{ textAlign: "center" }}>
|
||||
Frequently Asked Questions
|
||||
</Title>
|
||||
<Accordion bg="white" variant="contained" mt={60}>
|
||||
@ -652,20 +629,6 @@ export const HomePage = () => {
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -31,16 +31,18 @@ const StyledPaperFree = styled(Paper)`
|
||||
border-radius: 1em;
|
||||
border: 3px solid #e9e9e9;
|
||||
background: white;
|
||||
box-shadow:
|
||||
12.5px 12.5px 10px rgba(0, 0, 0, 0.005),
|
||||
100px 100px 80px rgba(0, 0, 0, 0.01);
|
||||
`;
|
||||
|
||||
const StyledPaper = styled(Paper)`
|
||||
padding: 1.5em;
|
||||
width: 400px;
|
||||
background:
|
||||
linear-gradient(white, white) padding-box,
|
||||
linear-gradient(#ec85f5, #fb7eb0 28%, #fc9f96 53%, #ffbc88 78%, #ffc86a) border-box;
|
||||
border-radius: 1em;
|
||||
border: 3px solid transparent;
|
||||
border: 3px solid #424242;
|
||||
background: white;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
`;
|
||||
|
||||
export const PricingCards = () => {
|
||||
@ -167,12 +169,12 @@ export const PricingCards = () => {
|
||||
target="_blank"
|
||||
size="lg"
|
||||
radius="md"
|
||||
color="green"
|
||||
color="dark"
|
||||
fullWidth
|
||||
my="md"
|
||||
rightSection={<VscArrowRight />}
|
||||
>
|
||||
Start 1 Day Free Trial
|
||||
Start Free Trial
|
||||
</Button>
|
||||
<Flex direction="column" justify="space-between" h={250}>
|
||||
<List spacing="xs" size="sm" mt="lg" c="black" center icon="✦">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user