GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-02-04 01:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: update landing

Browse Source
This commit is contained in:
AykutSarac 2024-04-28 15:14:04 +03:00
parent 31e787f864
commit b83917c6bb
No known key found for this signature in database
2 changed files with 269 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

545
src/pages/index.tsx
View File

@ -15,14 +15,13 @@ import {
Text, Text,
ThemeIcon, ThemeIcon,
Title, Title,
Tooltip,
rem, rem,
} from "@mantine/core"; } from "@mantine/core";
import { Carousel } from "@mantine/carousel"; import { Carousel } from "@mantine/carousel";
import "@mantine/carousel/styles.css"; import "@mantine/carousel/styles.css";
import styled from "styled-components"; import styled from "styled-components";
import { BiChevronDown } from "react-icons/bi"; import { BiChevronDown } from "react-icons/bi";
import { FaGithub } from "react-icons/fa"; import { FaRocket } from "react-icons/fa";
import { import {
MdChevronRight, MdChevronRight,
MdCompare, MdCompare,
@ -216,7 +215,8 @@ export const HomePage = () => {
<Group justify="center"> <Group justify="center">
<Button <Button
component={Link} component={Link}
href="/pricing" prefetch={false}
href="/editor"
size="xl" size="xl"
fw="bold" fw="bold"
color="indigo" color="indigo"
@ -224,11 +224,12 @@ export const HomePage = () => {
visibleFrom="sm" visibleFrom="sm"
radius="md" radius="md"
> >
Get Pro Editor Go To Editor
</Button> </Button>
<Button <Button
component={Link} component={Link}
href="/pricing" prefetch={false}
href="/editor"
fw="bold" fw="bold"
size="md" size="md"
color="indigo" color="indigo"
@ -236,50 +237,33 @@ export const HomePage = () => {
hiddenFrom="sm" hiddenFrom="sm"
radius="md" radius="md"
> >
Get Pro Editor Go To Editor
</Button> </Button>
<Tooltip
position="bottom"
label="Free version has different visualization interface, performance, experience and features managed by the open-source community."
maw={400}
multiline
withArrow
>
<Button
component={Link}
prefetch={false}
href="/editor"
size="xl"
fw="bold"
variant="outline"
color="gray.7"
leftSection={<FaGithub />}
visibleFrom="sm"
radius="md"
>
<Stack gap={0}>
Use Free Version
<Text fz={12} c="gray.5">
(No registration needed)
</Text>
</Stack>
</Button>
</Tooltip>
<Button <Button
component={Link} component="a"
prefetch={false} href="/#features"
href="/editor" size="xl"
fw="bold"
variant="outline"
color="gray.7"
leftSection={<FaRocket />}
visibleFrom="sm"
radius="md"
>
Explore Premium
</Button>
<Button
component="a"
href="/#features"
fw="bold" fw="bold"
size="md" size="md"
variant="outline" variant="outline"
color="gray.7" color="gray.7"
leftSection={<FaGithub />} leftSection={<FaRocket />}
hiddenFrom="sm" hiddenFrom="sm"
radius="md" radius="md"
> >
Use Free Version Explore Premium
</Button> </Button>
</Group> </Group>
<Flex gap="xs"> <Flex gap="xs">
@ -334,8 +318,6 @@ export const HomePage = () => {
</Carousel> </Carousel>
</StyledCarouselWrapper> </StyledCarouselWrapper>
<Paper <Paper
component="section"
id="features"
pt={rem(280)} pt={rem(280)}
px={rem(80)} px={rem(80)}
pb={rem(20)} pb={rem(20)}
@ -356,250 +338,253 @@ export const HomePage = () => {
</Text> </Text>
</Paper> </Paper>
<Stack mt={100} align="center" px="lg" mx="auto" maw={{ sm: "80%", md: "65%" }}> <section id="features">
<ThemeIcon variant="transparent" color="dark" mx="auto" size="xl"> <Stack mt={100} align="center" px="lg" mx="auto" maw={{ sm: "80%", md: "65%" }}>
<BiChevronDown size={40} /> <ThemeIcon variant="transparent" color="dark" mx="auto" size="xl">
</ThemeIcon> <BiChevronDown size={40} />
</ThemeIcon>
<Title order={2} fz={{ sm: 36, md: 48 }} fw={600} mt={50} style={{ textAlign: "center" }}> <Title order={2} fz={{ sm: 36, md: 48 }} fw={600} mt={50} style={{ textAlign: "center" }}>
Unlock the Ease of Visualizing Your Data Unlock the Ease of Visualizing Your Data
</Title> </Title>
<Text c="dark.2" fz={{ base: 12, md: 16 }} style={{ textAlign: "center" }}> <Text c="dark.2" fz={{ base: 12, md: 16 }} style={{ textAlign: "center" }}>
Forget juggling JSON formatters, validators, and viewers! JSON Crack simplifies your Forget juggling JSON formatters, validators, and viewers! JSON Crack simplifies your
workflow with effortless formatting, robust validation, and intuitive visualizations - all workflow with effortless formatting, robust validation, and intuitive visualizations -
in one user-friendly platform. See your data sing and make smarter decisions, faster. all in one user-friendly platform. See your data sing and make smarter decisions,
</Text> faster.
</Stack> </Text>
</Stack>
<Grid w="90%" gutter={24} mt={50} mb={150} mx="auto"> <Grid w="90%" gutter={24} mt={50} mb={150} mx="auto">
<Grid.Col span={{ base: 12, sm: 6 }}> <Grid.Col span={{ base: 12, sm: 6 }}>
<Paper <Paper
pos="relative" pos="relative"
ref={card1 as React.RefObject<HTMLDivElement>} ref={card1 as React.RefObject<HTMLDivElement>}
p={30} p={30}
withBorder withBorder
shadow="xs" shadow="xs"
radius="md" radius="md"
w="100%" w="100%"
h={{ sm: 300, md: 370 }} h={{ sm: 300, md: 370 }}
style={{ style={{
overflow: "hidden", overflow: "hidden",
background: bg1, background: bg1,
}} }}
> >
<StyledPaper> <StyledPaper>
<ThemeIcon <ThemeIcon
color="gray.3" color="gray.3"
c="dark.4" c="dark.4"
bg="gray.1" bg="gray.1"
variant="outline" variant="outline"
size="xl" size="xl"
radius="md" radius="md"
visibleFrom="md" visibleFrom="md"
mb="md" mb="md"
> >
<MdCompare size={28} /> <MdCompare size={28} />
</ThemeIcon> </ThemeIcon>
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}> <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
Compare Compare
</Title> </Title>
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}> <Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
Compare and analyze your data smoothly with the interactive graphs. Compare and analyze your data smoothly with the interactive graphs.
</Text> </Text>
<Image
loading="lazy"
src="./assets/features/compare.webp"
alt="Compare"
w={{ sm: 350, md: 400 }}
mt={20}
style={{
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
}}
/>
</StyledPaper>
</Paper>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6 }}>
<Paper
ref={card2 as React.RefObject<HTMLDivElement>}
p={30}
withBorder
shadow="xs"
radius="md"
w="100%"
h={{ sm: 300, md: 370 }}
style={{
overflow: "hidden",
background: bg2,
}}
>
<StyledPaper>
<ThemeIcon
color="gray.3"
c="dark.4"
bg="gray.1"
variant="outline"
size="xl"
radius="md"
visibleFrom="md"
mb="md"
>
<MdRebaseEdit size={28} />
</ThemeIcon>
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
Edit
</Title>
<Text fz={{ sm: 14, md: 16 }} fw={300} lts={0.4} c="dark.5" my={10}>
Directly modify your data through the graphs, without wasting time on manual
editing.
</Text>
<Paper withBorder shadow="sm" radius="sm" w="fit-content" mx="auto">
<Image <Image
loading="lazy" loading="lazy"
radius="sm" src="./assets/features/compare.webp"
src="./assets/features/edit.webp" alt="Compare"
alt="Edit" w={{ sm: 350, md: 400 }}
w={340} mt={20}
style={{
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
}}
/> />
</Paper> </StyledPaper>
</StyledPaper> </Paper>
</Paper> </Grid.Col>
</Grid.Col> <Grid.Col span={{ base: 12, sm: 6 }}>
<Grid.Col span={{ base: 12, sm: 6 }}> <Paper
<Paper ref={card2 as React.RefObject<HTMLDivElement>}
ref={card3 as React.RefObject<HTMLDivElement>} p={30}
p={30} withBorder
withBorder shadow="xs"
shadow="xs" radius="md"
radius="md" w="100%"
w="100%" h={{ sm: 300, md: 370 }}
h={{ sm: 300, md: 370 }} style={{
style={{ overflow: "hidden",
overflow: "hidden", background: bg2,
background: bg3, }}
}} >
> <StyledPaper>
<StyledPaper> <ThemeIcon
<ThemeIcon color="gray.3"
color="gray.3" c="dark.4"
c="dark.4" bg="gray.1"
bg="gray.1" variant="outline"
variant="outline" size="xl"
size="xl" radius="md"
radius="md" visibleFrom="md"
visibleFrom="md" mb="md"
mb="md" >
> <MdRebaseEdit size={28} />
<MdSearch size={28} /> </ThemeIcon>
</ThemeIcon> <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}> Edit
Search </Title>
</Title> <Text fz={{ sm: 14, md: 16 }} fw={300} lts={0.4} c="dark.5" my={10}>
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}> Directly modify your data through the graphs, without wasting time on manual
Highlight and search what you need in your data, without any hassle. editing.
</Text> </Text>
<Image <Paper withBorder shadow="sm" radius="sm" w="fit-content" mx="auto">
loading="lazy" <Image
src="./assets/features/search.webp" loading="lazy"
alt="Search"
w={{ sm: 400, md: 500 }}
mx="auto"
mt={20}
style={{
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
}}
/>
</StyledPaper>
</Paper>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6 }}>
<Paper
ref={card4 as React.RefObject<HTMLDivElement>}
p={30}
withBorder
shadow="xs"
radius="md"
w="100%"
h={{ sm: 300, md: 370 }}
style={{
overflow: "hidden",
background: bg4,
}}
>
<StyledPaper>
<ThemeIcon
color="gray.3"
c="dark.4"
bg="gray.1"
variant="outline"
size="xl"
radius="md"
visibleFrom="md"
mb="md"
>
<MdExtension size={28} />
</ThemeIcon>
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
Choose Your Format
</Title>
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
Visualize and edit your data in multiple formats. JSON, YAML, CSV, XML, and TOML are
supported.
</Text>
<Grid gutter="lg" mt={20}>
<Grid.Col span={6}>
<Badge
w="100%"
mih={{ sm: 10, md: 40 }}
variant="light"
color="indigo"
radius="sm" radius="sm"
size="xl" src="./assets/features/edit.webp"
> alt="Edit"
JSON w={340}
</Badge> />
</Grid.Col> </Paper>
<Grid.Col span={6}> </StyledPaper>
<Badge </Paper>
w="100%" </Grid.Col>
mih={{ sm: 10, md: 40 }} <Grid.Col span={{ base: 12, sm: 6 }}>
variant="light" <Paper
color="cyan" ref={card3 as React.RefObject<HTMLDivElement>}
radius="sm" p={30}
size="xl" withBorder
> shadow="xs"
YAML radius="md"
</Badge> w="100%"
</Grid.Col> h={{ sm: 300, md: 370 }}
<Grid.Col span={6}> style={{
<Badge overflow: "hidden",
w="100%" background: bg3,
mih={{ sm: 10, md: 40 }} }}
variant="light" >
color="grape" <StyledPaper>
radius="sm" <ThemeIcon
size="xl" color="gray.3"
> c="dark.4"
CSV bg="gray.1"
</Badge> variant="outline"
</Grid.Col> size="xl"
<Grid.Col span={6}> radius="md"
<Badge visibleFrom="md"
w="100%" mb="md"
mih={{ sm: 10, md: 40 }} >
variant="light" <MdSearch size={28} />
color="red" </ThemeIcon>
radius="sm" <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
size="xl" Search
> </Title>
XML <Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
</Badge> Highlight and search what you need in your data, without any hassle.
</Grid.Col> </Text>
</Grid> <Image
</StyledPaper> loading="lazy"
</Paper> src="./assets/features/search.webp"
</Grid.Col> alt="Search"
</Grid> w={{ sm: 400, md: 500 }}
mx="auto"
mt={20}
style={{
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
}}
/>
</StyledPaper>
</Paper>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6 }}>
<Paper
ref={card4 as React.RefObject<HTMLDivElement>}
p={30}
withBorder
shadow="xs"
radius="md"
w="100%"
h={{ sm: 300, md: 370 }}
style={{
overflow: "hidden",
background: bg4,
}}
>
<StyledPaper>
<ThemeIcon
color="gray.3"
c="dark.4"
bg="gray.1"
variant="outline"
size="xl"
radius="md"
visibleFrom="md"
mb="md"
>
<MdExtension size={28} />
</ThemeIcon>
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
Choose Your Format
</Title>
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
Visualize and edit your data in multiple formats. JSON, YAML, CSV, XML, and TOML
are supported.
</Text>
<Grid gutter="lg" mt={20}>
<Grid.Col span={6}>
<Badge
w="100%"
mih={{ sm: 10, md: 40 }}
variant="light"
color="indigo"
radius="sm"
size="xl"
>
JSON
</Badge>
</Grid.Col>
<Grid.Col span={6}>
<Badge
w="100%"
mih={{ sm: 10, md: 40 }}
variant="light"
color="cyan"
radius="sm"
size="xl"
>
YAML
</Badge>
</Grid.Col>
<Grid.Col span={6}>
<Badge
w="100%"
mih={{ sm: 10, md: 40 }}
variant="light"
color="grape"
radius="sm"
size="xl"
>
CSV
</Badge>
</Grid.Col>
<Grid.Col span={6}>
<Badge
w="100%"
mih={{ sm: 10, md: 40 }}
variant="light"
color="red"
radius="sm"
size="xl"
>
XML
</Badge>
</Grid.Col>
</Grid>
</StyledPaper>
</Paper>
</Grid.Col>
</Grid>
</section>
<PricingCards /> <PricingCards />
<Center mt={80}> <Center mt={80}>

8
src/pages/pricing.tsx
View File

@ -28,7 +28,7 @@ const StyledPaperFree = styled(Paper)`
padding: 1.5em; padding: 1.5em;
width: 400px; width: 400px;
border-radius: 1em; border-radius: 1em;
border: 2px solid #e1e1e1; border: 2px solid #e9e9e9;
`; `;
const StyledPaper = styled(Paper)` const StyledPaper = styled(Paper)`
@ -140,8 +140,8 @@ export const PricingCards = () => {
<StyledPaper> <StyledPaper>
<Flex justify="space-between"> <Flex justify="space-between">
<Stack gap="0"> <Stack gap="0">
<Badge mb="lg" size="lg" variant="filled" color="violet" c="white" leftSection="✦"> <Badge mb="lg" size="lg" variant="outline" color="gray.3" c="dark" leftSection="✦">
Popular Premium
</Badge> </Badge>
<Flex gap="xs" align="baseline"> <Flex gap="xs" align="baseline">
@ -168,7 +168,7 @@ export const PricingCards = () => {
my="md" my="md"
rightSection={<VscArrowRight />} rightSection={<VscArrowRight />}
> >
Upgrade Get Started
</Button> </Button>
<Flex direction="column" justify="space-between" h={250}> <Flex direction="column" justify="space-between" h={250}>
<List spacing="xs" size="sm" mt="lg" center icon="✦"> <List spacing="xs" size="sm" mt="lg" center icon="✦">