Skip to content

Commit f3adf12

Browse files
AykutSaracAykutSarac
committed
update landing
1 parent 0494d7f commit f3adf12

File tree

13 files changed

+416
-249
lines changed

13 files changed

+416
-249
lines changed

‎public/assets/bf2-image.png‎

11.9 KB
Loading

‎public/assets/step1-visual.png‎

8.78 KB
Loading

‎public/assets/step2-visual.png‎

3.61 KB
Loading

‎public/assets/step3-visual.png‎

7.37 KB
Loading

‎src/data/faq.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
[
22
{
33
"title": "What is JSON Crack and what does it do?",
4-
"content": "JSON Crack is a versatile online tool designed to visualize and analyze various data formats, including JSON, YAML, CSV, XML and more. It transforms complex data into intuitive graphs and tree views, making it ideal for developers, data analysts, and anyone working with structured data."
4+
"content": "JSON Crack is an online JSON viewer tool designed to visualize and analyze various data formats, including JSON, YAML, CSV, XML and more. It transforms complex data into intuitive graphs and tree views, making it ideal for developers, data analysts, and anyone working with structured data."
5+
},
6+
{
7+
"title": "How is it different than traditional JSON viewers?",
8+
"content": "While traditional JSON Viewers and JSON formatters only allow you to work with raw data on text editors, JSON Crack offers a unique visual representation of your data, making it easier to understand and analyze complex data structures. It provides a tree view and graph view to help you visualize your data in different ways."
59
},
610
{
711
"title": "Is JSON Crack free?",

‎src/layout/Landing/Features.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,36 +25,36 @@ interface FeatureItem {
2525

2626
const features: FeatureItem[] = [
2727
{
28-
title: "Visualizer",
28+
title: "JSON Visualizer",
2929
description:
3030
"Transform your data into interactive graphs or trees as you type. Supports JSON, YAML, CSV, XML, and TOML.",
3131
icon: <FaBolt size={20} />,
3232
color: "yellow",
3333
},
3434
{
35-
title: "Convert",
35+
title: "Convert Data",
3636
description:
3737
"Convert JSON to CSV, YAML to JSON, XML to JSON, and more. Our JSON converter supports multiple formats for easy data exchange.",
3838
icon: <TbTransformFilled size={20} />,
3939
color: "orange",
4040
},
4141
{
42-
title: "Format & Validate",
42+
title: "JSON Formatter and JSON Validator",
4343
description:
4444
"Format and beautify your JSON data to make it more readable. Validate JSON, YAML, and CSV.",
4545
icon: <MdOutlineFormatIndentIncrease size={20} />,
4646
color: "green",
4747
},
4848
{
49-
title: "Generate Code",
50-
description: "Generate TypeScript interface, Golang structs, JSON Schema and more.",
49+
title: "Generate Code/Types",
50+
description: "Generate TypeScript interface, Golang structs, Rust serde, JSON Schema and more.",
5151
icon: <MdOutlineGeneratingTokens size={20} />,
5252
color: "grape",
5353
},
5454
{
55-
title: "JSON Schema",
55+
title: "JSON Schema Generator",
5656
description:
57-
"Generate JSON Schema, create mock data, and validate JSON Schema from various data formats like JSON, YAML, XML, and CSV.",
57+
"Validate JSON Schema, create mock data, and generate JSON Schema from various data formats like JSON, YAML, XML, and CSV.",
5858
icon: <VscJson size={20} />,
5959
color: "cyan",
6060
},
@@ -65,9 +65,9 @@ const features: FeatureItem[] = [
6565
color: "teal.5",
6666
},
6767
{
68-
title: "Download Image",
68+
title: "Export Image",
6969
description:
70-
"Export image of the graph as PNG, JPEG, or SVG. Share your data visualization with others.",
70+
"Export image of the graphs as PNG, JPEG, or SVG. Share your data visualization with others.",
7171
icon: <IoImages size={20} />,
7272
color: "blue.4",
7373
},
@@ -122,8 +122,7 @@ export const Features = () => {
122122
fz={{ base: 16, sm: 18 }}
123123
w={{ base: "100%", xs: "80%", sm: "60%", md: "40%" }}
124124
>
125-
All in one tool for JSON, YAML, CSV, XML, and TOML. Formatter, validator, visualizer, and
126-
editor.
125+
All in one tool for JSON, YAML, CSV, XML, and TOML.
127126
</Title>
128127

129128
<SimpleGrid

‎src/layout/Landing/HeroSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,8 @@ export const HeroSection = () => {
120120
</Link>
121121
<StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>
122122
<StyledHeroText>
123-
The best online JSON viewer tool to <strong>visualize</strong>, <strong>format</strong>{" "}
124-
and <strong>explore</strong>.
123+
The best online JSON viewer to <strong>visualize</strong>, <strong>format</strong> and{" "}
124+
<strong>explore</strong>.
125125
</StyledHeroText>
126126

127127
<Flex gap="xs" wrap="wrap" justify="center" hiddenFrom="xs">

‎src/layout/Landing/LovedBy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const Featured = ({ stars }: LovedByProps) => {
6161

6262
export const LovedBy = ({ stars }: LovedByProps) => {
6363
return (
64-
<Container pos="relative" mx="auto" py={80}>
64+
<Container pos="relative" mx="auto" pb="20" pt={60}>
6565
<Featured stars={stars} />
6666
<Flex wrap="wrap" justify="center" gap="md" mt="md">
6767
<Button

‎src/layout/Landing/Section1.tsx‎

Lines changed: 105 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,20 @@
11
import React from "react";
2-
import Link from "next/link";
3-
import {
4-
Button,
5-
Container,
6-
Flex,
7-
Image,
8-
JsonInput,
9-
List,
10-
SimpleGrid,
11-
Stack,
12-
Text,
13-
Title,
14-
} from "@mantine/core";
2+
import { Container, Image, SimpleGrid, Stack, Text, Title } from "@mantine/core";
153
import styled from "styled-components";
16-
import { LuBadgeCheck } from "react-icons/lu";
174

18-
const StyledDottedContainer = styled.div`
5+
const StyledImageWrapper = styled.div`
196
position: relative;
20-
background-color: #f3f3f3;
21-
background-image: radial-gradient(#e0e0e0 3px, transparent 0);
22-
background-size: 40px 40px;
23-
border: 1px solid #e0e0e0;
247
25-
width: 100%;
26-
min-width: 300px;
27-
max-width: 500px;
28-
border-radius: 15px;
29-
height: 460px;
30-
31-
.jc {
8+
&::after {
9+
content: "";
3210
position: absolute;
11+
width: 100%;
12+
height: 100%;
3313
top: 0;
3414
left: 0;
3515
padding: 12px;
3616
border-radius: 15px;
37-
transform: translate(-80px, 10%);
38-
border: 1px solid #000;
39-
box-shadow: 0px 4px 0px 0px #000;
17+
border: 1px solid #e0e0e0;
4018
background: #f3f3f3;
4119
--line-color-1: #e3e3e3;
4220
--line-color-2: #e5e5e5;
@@ -56,111 +34,113 @@ const StyledDottedContainer = styled.div`
5634
20px 20px;
5735
}
5836
59-
.jcode {
60-
position: absolute;
61-
top: 0;
62-
left: 0;
63-
transform: translate(80%, 80%);
64-
width: 273px;
65-
border-radius: 15px;
66-
border: 1px solid #000;
67-
box-shadow: 0px 4px 0px 0px #000;
68-
overflow: hidden;
69-
}
70-
71-
@media only screen and (max-width: 1085px) {
72-
display: none;
37+
img {
38+
z-index: 1;
7339
}
7440
`;
7541

7642
export const Section1 = () => {
7743
return (
7844
<Container size="xl" py="80">
79-
<Flex justify="center" align="center">
80-
<Stack maw={634}>
81-
<Title
82-
lh="1.1"
83-
fz={{
84-
base: 26,
85-
xs: 32,
86-
sm: 42,
87-
}}
88-
maw={500}
89-
order={2}
90-
c="gray.9"
91-
>
92-
Don&apos;t waste time with JSON formatters
45+
<Title
46+
lh="1.1"
47+
fz={{
48+
base: 26,
49+
xs: 46,
50+
sm: 52,
51+
}}
52+
maw="16ch"
53+
ta="center"
54+
order={2}
55+
c="gray.9"
56+
mx="auto"
57+
mb="15"
58+
>
59+
Make working with JSON easy
60+
</Title>
61+
<Title
62+
order={3}
63+
fw={400}
64+
c="gray.7"
65+
px="lg"
66+
mx="auto"
67+
ta="center"
68+
mb={50}
69+
fz={{ base: 16, sm: 18 }}
70+
w={{ base: "100%", md: "600" }}
71+
>
72+
JSON Crack eliminates the chaos of raw, messy data, making the complex appear simple and
73+
easy to understand.
74+
</Title>
75+
<SimpleGrid
76+
cols={{
77+
base: 1,
78+
sm: 3,
79+
}}
80+
>
81+
<Stack
82+
p="lg"
83+
m="lg"
84+
maw="360"
85+
mx="auto"
86+
style={{
87+
borderRadius: "17px",
88+
border: "1px solid #e0e0e0",
89+
}}
90+
>
91+
<StyledImageWrapper>
92+
<Image src="/assets/step1-visual.png" pos="relative" w="100%" alt="upload" />
93+
</StyledImageWrapper>
94+
<Title ta="center" order={3}>
95+
Upload your data
96+
</Title>
97+
<Text ta="center" c="gray.7">
98+
Upload your JSON file, URL, or type your data directly into our easy-to-use text editor.
99+
</Text>
100+
</Stack>
101+
<Stack
102+
p="lg"
103+
m="lg"
104+
maw="360"
105+
mx="auto"
106+
style={{
107+
borderRadius: "17px",
108+
border: "1px solid #e0e0e0",
109+
}}
110+
>
111+
<StyledImageWrapper>
112+
<Image src="/assets/step2-visual.png" pos="relative" w="100%" alt="visualize" />
113+
</StyledImageWrapper>
114+
<Title ta="center" order={3}>
115+
Visualize your JSON
116+
</Title>
117+
<Text ta="center" c="gray.7">
118+
Your data will automatically be turned into a visual tree graph so you can quickly
119+
understand your data at a glance.
120+
</Text>
121+
</Stack>
122+
<Stack
123+
p="lg"
124+
m="lg"
125+
maw="360"
126+
mx="auto"
127+
style={{
128+
borderRadius: "17px",
129+
border: "1px solid #e0e0e0",
130+
}}
131+
>
132+
<StyledImageWrapper>
133+
<Image src="/assets/step3-visual.png" pos="relative" w="100%" alt="export image" />
134+
</StyledImageWrapper>
135+
<Title ta="center" order={3}>
136+
Export to image
93137
</Title>
94-
<Text my="md" c="gray.6" fz={16} maw={510}>
95-
The days of getting lost in lines of code are over. JSON Crack gives you the most
96-
optimal view of your data so you can make insights faster than ever.
138+
<Text ta="center" c="gray.7">
139+
Once you&apos;re satisfied, you can export an image of your graph as PNG, JPEG, or SVG
140+
and share with others.
97141
</Text>
98-
<List
99-
fz={{
100-
base: 16,
101-
xs: 18,
102-
}}
103-
fw={500}
104-
component={SimpleGrid}
105-
c="gray.8"
106-
icon={<LuBadgeCheck size="20" />}
107-
>
108-
<SimpleGrid w="fit-content" cols={2}>
109-
<List.Item>Clear, concise data presentation</List.Item>
110-
<List.Item>Fast decision-making</List.Item>
111-
<List.Item>Grasp patterns and relationships faster</List.Item>
112-
<List.Item>Share insights with teams easier</List.Item>
113-
</SimpleGrid>
114-
</List>
115-
<Link href="/editor" prefetch={false}>
116-
<Button color="#202842" size="lg" radius="md" w="fit-content" mt="sm">
117-
Use for free
118-
</Button>
119-
</Link>
120142
</Stack>
121-
<StyledDottedContainer>
122-
<Image className="jc" src="/assets/jsoncrack.svg" alt="json crack" loading="lazy" />
123-
<JsonInput
124-
w={273}
125-
rows={12}
126-
className="jcode"
127-
styles={{
128-
input: {
129-
border: "none",
130-
fontSize: 12,
131-
},
132-
}}
133-
value={JSON.stringify(
134-
{
135-
squadName: "Super hero squad",
136-
homeTown: "Metro City",
137-
formed: 2016,
138-
secretBase: "Super tower",
139-
active: true,
140-
members: [
141-
{
142-
name: "Molecule Man",
143-
age: 29,
144-
secretIdentity: "Dan Jukes",
145-
},
146-
{
147-
name: "Madame Uppercut",
148-
age: 39,
149-
secretIdentity: "Jane Wilson",
150-
},
151-
{
152-
name: "Eternal Flame",
153-
age: 1000000,
154-
secretIdentity: "Unknown",
155-
},
156-
],
157-
},
158-
null,
159-
2
160-
)}
161-
/>
162-
</StyledDottedContainer>
163-
</Flex>
143+
</SimpleGrid>
164144
</Container>
165145
);
166146
};

0 commit comments

Comments
 (0)