mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-12 19:02:53 +08:00
update landing
This commit is contained in:
AykutSarac
parent
0494d7f070
commit
f3adf1280b
BIN
public/assets/bf2-image.png
Normal file
BIN
public/assets/bf2-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/assets/step1-visual.png
Normal file
BIN
public/assets/step1-visual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
public/assets/step2-visual.png
Normal file
BIN
public/assets/step2-visual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
public/assets/step3-visual.png
Normal file
BIN
public/assets/step3-visual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
@ -1,7 +1,11 @@
|
||||
[
|
||||
{
|
||||
"title": "What is JSON Crack and what does it do?",
|
||||
"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."
|
||||
"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."
|
||||
},
|
||||
{
|
||||
"title": "How is it different than traditional JSON viewers?",
|
||||
"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."
|
||||
},
|
||||
{
|
||||
"title": "Is JSON Crack free?",
|
||||
|
||||
@ -25,36 +25,36 @@ interface FeatureItem {
|
||||
|
||||
const features: FeatureItem[] = [
|
||||
{
|
||||
title: "Visualizer",
|
||||
title: "JSON Visualizer",
|
||||
description:
|
||||
"Transform your data into interactive graphs or trees as you type. Supports JSON, YAML, CSV, XML, and TOML.",
|
||||
icon: <FaBolt size={20} />,
|
||||
color: "yellow",
|
||||
},
|
||||
{
|
||||
title: "Convert",
|
||||
title: "Convert Data",
|
||||
description:
|
||||
"Convert JSON to CSV, YAML to JSON, XML to JSON, and more. Our JSON converter supports multiple formats for easy data exchange.",
|
||||
icon: <TbTransformFilled size={20} />,
|
||||
color: "orange",
|
||||
},
|
||||
{
|
||||
title: "Format & Validate",
|
||||
title: "JSON Formatter and JSON Validator",
|
||||
description:
|
||||
"Format and beautify your JSON data to make it more readable. Validate JSON, YAML, and CSV.",
|
||||
icon: <MdOutlineFormatIndentIncrease size={20} />,
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
title: "Generate Code",
|
||||
description: "Generate TypeScript interface, Golang structs, JSON Schema and more.",
|
||||
title: "Generate Code/Types",
|
||||
description: "Generate TypeScript interface, Golang structs, Rust serde, JSON Schema and more.",
|
||||
icon: <MdOutlineGeneratingTokens size={20} />,
|
||||
color: "grape",
|
||||
},
|
||||
{
|
||||
title: "JSON Schema",
|
||||
title: "JSON Schema Generator",
|
||||
description:
|
||||
"Generate JSON Schema, create mock data, and validate JSON Schema from various data formats like JSON, YAML, XML, and CSV.",
|
||||
"Validate JSON Schema, create mock data, and generate JSON Schema from various data formats like JSON, YAML, XML, and CSV.",
|
||||
icon: <VscJson size={20} />,
|
||||
color: "cyan",
|
||||
},
|
||||
@ -65,9 +65,9 @@ const features: FeatureItem[] = [
|
||||
color: "teal.5",
|
||||
},
|
||||
{
|
||||
title: "Download Image",
|
||||
title: "Export Image",
|
||||
description:
|
||||
"Export image of the graph as PNG, JPEG, or SVG. Share your data visualization with others.",
|
||||
"Export image of the graphs as PNG, JPEG, or SVG. Share your data visualization with others.",
|
||||
icon: <IoImages size={20} />,
|
||||
color: "blue.4",
|
||||
},
|
||||
@ -122,8 +122,7 @@ export const Features = () => {
|
||||
fz={{ base: 16, sm: 18 }}
|
||||
w={{ base: "100%", xs: "80%", sm: "60%", md: "40%" }}
|
||||
>
|
||||
All in one tool for JSON, YAML, CSV, XML, and TOML. Formatter, validator, visualizer, and
|
||||
editor.
|
||||
All in one tool for JSON, YAML, CSV, XML, and TOML.
|
||||
</Title>
|
||||
|
||||
<SimpleGrid
|
||||
|
||||
@ -120,8 +120,8 @@ export const HeroSection = () => {
|
||||
</Link>
|
||||
<StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>
|
||||
<StyledHeroText>
|
||||
The best online JSON viewer tool to <strong>visualize</strong>, <strong>format</strong>{" "}
|
||||
and <strong>explore</strong>.
|
||||
The best online JSON viewer to <strong>visualize</strong>, <strong>format</strong> and{" "}
|
||||
<strong>explore</strong>.
|
||||
</StyledHeroText>
|
||||
|
||||
<Flex gap="xs" wrap="wrap" justify="center" hiddenFrom="xs">
|
||||
|
||||
@ -61,7 +61,7 @@ const Featured = ({ stars }: LovedByProps) => {
|
||||
|
||||
export const LovedBy = ({ stars }: LovedByProps) => {
|
||||
return (
|
||||
<Container pos="relative" mx="auto" py={80}>
|
||||
<Container pos="relative" mx="auto" pb="20" pt={60}>
|
||||
<Featured stars={stars} />
|
||||
<Flex wrap="wrap" justify="center" gap="md" mt="md">
|
||||
<Button
|
||||
|
||||
@ -1,42 +1,20 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Flex,
|
||||
Image,
|
||||
JsonInput,
|
||||
List,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { Container, Image, SimpleGrid, Stack, Text, Title } from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { LuBadgeCheck } from "react-icons/lu";
|
||||
|
||||
const StyledDottedContainer = styled.div`
|
||||
const StyledImageWrapper = styled.div`
|
||||
position: relative;
|
||||
background-color: #f3f3f3;
|
||||
background-image: radial-gradient(#e0e0e0 3px, transparent 0);
|
||||
background-size: 40px 40px;
|
||||
border: 1px solid #e0e0e0;
|
||||
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
border-radius: 15px;
|
||||
height: 460px;
|
||||
|
||||
.jc {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 12px;
|
||||
border-radius: 15px;
|
||||
transform: translate(-80px, 10%);
|
||||
border: 1px solid #000;
|
||||
box-shadow: 0px 4px 0px 0px #000;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: #f3f3f3;
|
||||
--line-color-1: #e3e3e3;
|
||||
--line-color-2: #e5e5e5;
|
||||
@ -56,111 +34,113 @@ const StyledDottedContainer = styled.div`
|
||||
20px 20px;
|
||||
}
|
||||
|
||||
.jcode {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(80%, 80%);
|
||||
width: 273px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #000;
|
||||
box-shadow: 0px 4px 0px 0px #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1085px) {
|
||||
display: none;
|
||||
img {
|
||||
z-index: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Section1 = () => {
|
||||
return (
|
||||
<Container size="xl" py="80">
|
||||
<Flex justify="center" align="center">
|
||||
<Stack maw={634}>
|
||||
<Title
|
||||
lh="1.1"
|
||||
fz={{
|
||||
base: 26,
|
||||
xs: 32,
|
||||
sm: 42,
|
||||
}}
|
||||
maw={500}
|
||||
order={2}
|
||||
c="gray.9"
|
||||
>
|
||||
Don't waste time with JSON formatters
|
||||
<Title
|
||||
lh="1.1"
|
||||
fz={{
|
||||
base: 26,
|
||||
xs: 46,
|
||||
sm: 52,
|
||||
}}
|
||||
maw="16ch"
|
||||
ta="center"
|
||||
order={2}
|
||||
c="gray.9"
|
||||
mx="auto"
|
||||
mb="15"
|
||||
>
|
||||
Make working with JSON easy
|
||||
</Title>
|
||||
<Title
|
||||
order={3}
|
||||
fw={400}
|
||||
c="gray.7"
|
||||
px="lg"
|
||||
mx="auto"
|
||||
ta="center"
|
||||
mb={50}
|
||||
fz={{ base: 16, sm: 18 }}
|
||||
w={{ base: "100%", md: "600" }}
|
||||
>
|
||||
JSON Crack eliminates the chaos of raw, messy data, making the complex appear simple and
|
||||
easy to understand.
|
||||
</Title>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 1,
|
||||
sm: 3,
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
p="lg"
|
||||
m="lg"
|
||||
maw="360"
|
||||
mx="auto"
|
||||
style={{
|
||||
borderRadius: "17px",
|
||||
border: "1px solid #e0e0e0",
|
||||
}}
|
||||
>
|
||||
<StyledImageWrapper>
|
||||
<Image src="/assets/step1-visual.png" pos="relative" w="100%" alt="upload" />
|
||||
</StyledImageWrapper>
|
||||
<Title ta="center" order={3}>
|
||||
Upload your data
|
||||
</Title>
|
||||
<Text my="md" c="gray.6" fz={16} maw={510}>
|
||||
The days of getting lost in lines of code are over. JSON Crack gives you the most
|
||||
optimal view of your data so you can make insights faster than ever.
|
||||
<Text ta="center" c="gray.7">
|
||||
Upload your JSON file, URL, or type your data directly into our easy-to-use text editor.
|
||||
</Text>
|
||||
<List
|
||||
fz={{
|
||||
base: 16,
|
||||
xs: 18,
|
||||
}}
|
||||
fw={500}
|
||||
component={SimpleGrid}
|
||||
c="gray.8"
|
||||
icon={<LuBadgeCheck size="20" />}
|
||||
>
|
||||
<SimpleGrid w="fit-content" cols={2}>
|
||||
<List.Item>Clear, concise data presentation</List.Item>
|
||||
<List.Item>Fast decision-making</List.Item>
|
||||
<List.Item>Grasp patterns and relationships faster</List.Item>
|
||||
<List.Item>Share insights with teams easier</List.Item>
|
||||
</SimpleGrid>
|
||||
</List>
|
||||
<Link href="/editor" prefetch={false}>
|
||||
<Button color="#202842" size="lg" radius="md" w="fit-content" mt="sm">
|
||||
Use for free
|
||||
</Button>
|
||||
</Link>
|
||||
</Stack>
|
||||
<StyledDottedContainer>
|
||||
<Image className="jc" src="/assets/jsoncrack.svg" alt="json crack" loading="lazy" />
|
||||
<JsonInput
|
||||
w={273}
|
||||
rows={12}
|
||||
className="jcode"
|
||||
styles={{
|
||||
input: {
|
||||
border: "none",
|
||||
fontSize: 12,
|
||||
},
|
||||
}}
|
||||
value={JSON.stringify(
|
||||
{
|
||||
squadName: "Super hero squad",
|
||||
homeTown: "Metro City",
|
||||
formed: 2016,
|
||||
secretBase: "Super tower",
|
||||
active: true,
|
||||
members: [
|
||||
{
|
||||
name: "Molecule Man",
|
||||
age: 29,
|
||||
secretIdentity: "Dan Jukes",
|
||||
},
|
||||
{
|
||||
name: "Madame Uppercut",
|
||||
age: 39,
|
||||
secretIdentity: "Jane Wilson",
|
||||
},
|
||||
{
|
||||
name: "Eternal Flame",
|
||||
age: 1000000,
|
||||
secretIdentity: "Unknown",
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2
|
||||
)}
|
||||
/>
|
||||
</StyledDottedContainer>
|
||||
</Flex>
|
||||
<Stack
|
||||
p="lg"
|
||||
m="lg"
|
||||
maw="360"
|
||||
mx="auto"
|
||||
style={{
|
||||
borderRadius: "17px",
|
||||
border: "1px solid #e0e0e0",
|
||||
}}
|
||||
>
|
||||
<StyledImageWrapper>
|
||||
<Image src="/assets/step2-visual.png" pos="relative" w="100%" alt="visualize" />
|
||||
</StyledImageWrapper>
|
||||
<Title ta="center" order={3}>
|
||||
Visualize your JSON
|
||||
</Title>
|
||||
<Text ta="center" c="gray.7">
|
||||
Your data will automatically be turned into a visual tree graph so you can quickly
|
||||
understand your data at a glance.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack
|
||||
p="lg"
|
||||
m="lg"
|
||||
maw="360"
|
||||
mx="auto"
|
||||
style={{
|
||||
borderRadius: "17px",
|
||||
border: "1px solid #e0e0e0",
|
||||
}}
|
||||
>
|
||||
<StyledImageWrapper>
|
||||
<Image src="/assets/step3-visual.png" pos="relative" w="100%" alt="export image" />
|
||||
</StyledImageWrapper>
|
||||
<Title ta="center" order={3}>
|
||||
Export to image
|
||||
</Title>
|
||||
<Text ta="center" c="gray.7">
|
||||
Once you're satisfied, you can export an image of your graph as PNG, JPEG, or SVG
|
||||
and share with others.
|
||||
</Text>
|
||||
</Stack>
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
171
src/layout/Landing/Section2.tsx
Normal file
171
src/layout/Landing/Section2.tsx
Normal file
@ -0,0 +1,171 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Flex,
|
||||
Image,
|
||||
JsonInput,
|
||||
List,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { LuBadgeCheck } from "react-icons/lu";
|
||||
|
||||
const StyledDottedContainer = styled.div`
|
||||
position: relative;
|
||||
background-color: #f3f3f3;
|
||||
background-image: radial-gradient(#e0e0e0 3px, transparent 0);
|
||||
background-size: 40px 40px;
|
||||
border: 1px solid #e0e0e0;
|
||||
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
border-radius: 15px;
|
||||
height: 460px;
|
||||
|
||||
.jc {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 12px;
|
||||
border-radius: 15px;
|
||||
transform: translate(-80px, 10%);
|
||||
border: 1px solid #000;
|
||||
box-shadow: 0px 4px 0px 0px #000;
|
||||
background: #f3f3f3;
|
||||
--line-color-1: #e3e3e3;
|
||||
--line-color-2: #e5e5e5;
|
||||
background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px),
|
||||
linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
|
||||
linear-gradient(var(--line-color-2) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
|
||||
background-position:
|
||||
-1.5px -1.5px,
|
||||
-1.5px -1.5px,
|
||||
-1px -1px,
|
||||
-1px -1px;
|
||||
background-size:
|
||||
100px 100px,
|
||||
100px 100px,
|
||||
20px 20px,
|
||||
20px 20px;
|
||||
}
|
||||
|
||||
.jcode {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(80%, 80%);
|
||||
width: 273px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #000;
|
||||
box-shadow: 0px 4px 0px 0px #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1085px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Section2 = () => {
|
||||
return (
|
||||
<Container size="xl" py="80">
|
||||
<Flex justify="center" gap="80" align="center">
|
||||
<Stack maw={634}>
|
||||
<Title
|
||||
lh="1.1"
|
||||
fz={{
|
||||
base: 26,
|
||||
xs: 32,
|
||||
sm: 42,
|
||||
}}
|
||||
maw={500}
|
||||
order={2}
|
||||
c="gray.9"
|
||||
>
|
||||
Don't waste time with JSON formatters
|
||||
</Title>
|
||||
<Text my="md" c="gray.7" fz={16} maw={510}>
|
||||
Format JSON and transform into a readable graph in seconds. JSON Crack is an open-source
|
||||
online tool that helps you visualize and understand data.
|
||||
</Text>
|
||||
<List
|
||||
fz={{
|
||||
base: 16,
|
||||
xs: 18,
|
||||
}}
|
||||
fw={500}
|
||||
component={SimpleGrid}
|
||||
c="gray.8"
|
||||
icon={<LuBadgeCheck size="20" />}
|
||||
>
|
||||
<SimpleGrid w="fit-content" cols={2}>
|
||||
<List.Item>VS Code Extension</List.Item>
|
||||
<List.Item>Open-source</List.Item>
|
||||
<List.Item>JSON Validator/Formatter</List.Item>
|
||||
<List.Item>Export Image</List.Item>
|
||||
</SimpleGrid>
|
||||
</List>
|
||||
<Button
|
||||
component="a"
|
||||
href="/editor"
|
||||
color="#202842"
|
||||
size="lg"
|
||||
radius="md"
|
||||
w="fit-content"
|
||||
mt="sm"
|
||||
>
|
||||
Open JSON Editor
|
||||
</Button>
|
||||
</Stack>
|
||||
<StyledDottedContainer>
|
||||
<Image className="jc" src="/assets/jsoncrack.svg" alt="json crack" loading="lazy" />
|
||||
<JsonInput
|
||||
w={273}
|
||||
rows={12}
|
||||
className="jcode"
|
||||
styles={{
|
||||
input: {
|
||||
border: "none",
|
||||
fontSize: 12,
|
||||
},
|
||||
}}
|
||||
value={JSON.stringify(
|
||||
{
|
||||
squadName: "Super hero squad",
|
||||
homeTown: "Metro City",
|
||||
formed: 2016,
|
||||
secretBase: "Super tower",
|
||||
active: true,
|
||||
members: [
|
||||
{
|
||||
name: "Molecule Man",
|
||||
age: 29,
|
||||
secretIdentity: "Dan Jukes",
|
||||
},
|
||||
{
|
||||
name: "Madame Uppercut",
|
||||
age: 39,
|
||||
secretIdentity: "Jane Wilson",
|
||||
},
|
||||
{
|
||||
name: "Eternal Flame",
|
||||
age: 1000000,
|
||||
secretIdentity: "Unknown",
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2
|
||||
)}
|
||||
/>
|
||||
</StyledDottedContainer>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
117
src/layout/Landing/Section3.tsx
Normal file
117
src/layout/Landing/Section3.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Flex,
|
||||
Image,
|
||||
List,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { LuBadgeCheck } from "react-icons/lu";
|
||||
|
||||
const StyledDottedContainer = styled.div`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
border-radius: 15px;
|
||||
height: 460px;
|
||||
|
||||
.jc {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 12px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: #f3f3f3;
|
||||
--line-color-1: #e3e3e3;
|
||||
--line-color-2: #e5e5e5;
|
||||
background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px),
|
||||
linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
|
||||
linear-gradient(var(--line-color-2) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
|
||||
background-position:
|
||||
-1.5px -1.5px,
|
||||
-1.5px -1.5px,
|
||||
-1px -1px,
|
||||
-1px -1px;
|
||||
background-size:
|
||||
100px 100px,
|
||||
100px 100px,
|
||||
20px 20px,
|
||||
20px 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1085px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Section3 = () => {
|
||||
return (
|
||||
<Container size="xl" py="80">
|
||||
<Flex justify="center" gap="80" align="center">
|
||||
<StyledDottedContainer>
|
||||
<Image
|
||||
className="jc"
|
||||
src="/assets/bf2-image.png"
|
||||
alt="json, csv, yaml, xml"
|
||||
loading="lazy"
|
||||
/>
|
||||
</StyledDottedContainer>
|
||||
<Stack maw={634}>
|
||||
<Title
|
||||
lh="1.1"
|
||||
fz={{
|
||||
base: 26,
|
||||
xs: 32,
|
||||
sm: 42,
|
||||
}}
|
||||
maw={500}
|
||||
order={2}
|
||||
c="gray.9"
|
||||
>
|
||||
Visualize and convert to multiple formats
|
||||
</Title>
|
||||
<Text my="md" c="gray.7" fz={16} maw={510}>
|
||||
JSON Crack supports formats like TOML, CSV, YAML, and XML, making it easier to visualize
|
||||
your data, no matter the type.
|
||||
</Text>
|
||||
<List
|
||||
fz={{
|
||||
base: 16,
|
||||
xs: 18,
|
||||
}}
|
||||
fw={500}
|
||||
component={SimpleGrid}
|
||||
c="gray.8"
|
||||
icon={<LuBadgeCheck size="20" />}
|
||||
>
|
||||
<SimpleGrid w="fit-content" cols={2}>
|
||||
<List.Item>JSON to CSV</List.Item>
|
||||
<List.Item>YAML to JSON</List.Item>
|
||||
<List.Item>XML to JSON</List.Item>
|
||||
<List.Item>and more...</List.Item>
|
||||
</SimpleGrid>
|
||||
</List>
|
||||
<Button
|
||||
component="a"
|
||||
href="/converter/json-to-yaml"
|
||||
color="#202842"
|
||||
size="lg"
|
||||
radius="md"
|
||||
w="fit-content"
|
||||
mt="sm"
|
||||
>
|
||||
Open Converter
|
||||
</Button>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
@ -1,106 +0,0 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Title,
|
||||
Image,
|
||||
Flex,
|
||||
Box,
|
||||
Button,
|
||||
Text,
|
||||
Paper,
|
||||
Container,
|
||||
Mark,
|
||||
Avatar,
|
||||
Rating,
|
||||
Stack,
|
||||
} from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { FaArrowRightLong } from "react-icons/fa6";
|
||||
|
||||
const StyledImageWrapper = styled.div`
|
||||
margin: 0 -30px -30px;
|
||||
padding-left: 30px;
|
||||
padding-top: 30px;
|
||||
`;
|
||||
|
||||
export const SeePremium = () => {
|
||||
return (
|
||||
<Container size="sm">
|
||||
<Paper
|
||||
py={20}
|
||||
px={30}
|
||||
bg="#2a954a"
|
||||
id="premium"
|
||||
component="section"
|
||||
w="100%"
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Flex gap="lg" align="center">
|
||||
<Box flex="1.3">
|
||||
<Flex align="center" gap="xs" mb="md">
|
||||
<Image
|
||||
src="https://todiagram.com/logo.svg"
|
||||
alt="Todiagram Logo"
|
||||
h={20}
|
||||
w="fit-content"
|
||||
loading="eager"
|
||||
/>
|
||||
<Title fz="20" fw="600" c="white">
|
||||
Upgrade to{" "}
|
||||
<Mark color="yellow.5" px="4" py="2" style={{ borderRadius: 4 }}>
|
||||
ToDiagram
|
||||
</Mark>
|
||||
</Title>
|
||||
</Flex>
|
||||
|
||||
<Text c="gray.1" mb="sm" maw={410}>
|
||||
Try out the premium features of ToDiagram and create beautiful diagrams with ease.
|
||||
</Text>
|
||||
<Flex align="center" gap="sm">
|
||||
<Avatar.Group>
|
||||
<Avatar src="https://todiagram.com/images/landing/user-1.webp" alt="user" />
|
||||
<Avatar src="https://todiagram.com/images/landing/user-2.webp" alt="user" />
|
||||
<Avatar src="https://todiagram.com/images/landing/user-3.webp" alt="user" />
|
||||
</Avatar.Group>
|
||||
<Stack gap="0">
|
||||
<Rating color="yellow.5" value={5} readOnly />
|
||||
<Text c="white" fz="sm">
|
||||
Loved by 400+ users
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Button
|
||||
component="a"
|
||||
href="https://todiagram.com"
|
||||
display="block"
|
||||
w="fit-content"
|
||||
miw={200}
|
||||
color="yellow.5"
|
||||
size="md"
|
||||
mt="xl"
|
||||
rightSection={<FaArrowRightLong />}
|
||||
radius="xl"
|
||||
rel="noopener"
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box visibleFrom="xs" style={{ alignSelf: "end" }}>
|
||||
<StyledImageWrapper>
|
||||
<Image
|
||||
mah="200"
|
||||
w="100%"
|
||||
loading="lazy"
|
||||
src="https://todiagram.com/images/landing/editor.webp"
|
||||
alt="ToDiagram Editor"
|
||||
/>
|
||||
</StyledImageWrapper>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
@ -8,7 +8,8 @@ import { HeroPreview } from "src/layout/Landing/HeroPreview";
|
||||
import { HeroSection } from "src/layout/Landing/HeroSection";
|
||||
import { LovedBy } from "src/layout/Landing/LovedBy";
|
||||
import { Section1 } from "src/layout/Landing/Section1";
|
||||
import { SeePremium } from "src/layout/Landing/SeePremium";
|
||||
import { Section2 } from "src/layout/Landing/Section2";
|
||||
import { Section3 } from "src/layout/Landing/Section3";
|
||||
import Layout from "src/layout/PageLayout";
|
||||
|
||||
export const HomePage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
@ -18,10 +19,11 @@ export const HomePage = (props: InferGetStaticPropsType<typeof getStaticProps>)
|
||||
<HeroSection />
|
||||
<HeroPreview />
|
||||
<Section1 />
|
||||
<Section2 />
|
||||
<Section3 />
|
||||
<Features />
|
||||
<FAQ />
|
||||
<LovedBy stars={props.stars} />
|
||||
<SeePremium />
|
||||
<FAQ />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user