mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-02-04 01:32:54 +08:00
style: update landing
This commit is contained in:
AykutSarac
parent
31e787f864
commit
b83917c6bb
@ -15,14 +15,13 @@ import {
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
Tooltip,
|
||||
rem,
|
||||
} from "@mantine/core";
|
||||
import { Carousel } from "@mantine/carousel";
|
||||
import "@mantine/carousel/styles.css";
|
||||
import styled from "styled-components";
|
||||
import { BiChevronDown } from "react-icons/bi";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
import { FaRocket } from "react-icons/fa";
|
||||
import {
|
||||
MdChevronRight,
|
||||
MdCompare,
|
||||
@ -216,7 +215,8 @@ export const HomePage = () => {
|
||||
<Group justify="center">
|
||||
<Button
|
||||
component={Link}
|
||||
href="/pricing"
|
||||
prefetch={false}
|
||||
href="/editor"
|
||||
size="xl"
|
||||
fw="bold"
|
||||
color="indigo"
|
||||
@ -224,11 +224,12 @@ export const HomePage = () => {
|
||||
visibleFrom="sm"
|
||||
radius="md"
|
||||
>
|
||||
Get Pro Editor
|
||||
Go To Editor
|
||||
</Button>
|
||||
<Button
|
||||
component={Link}
|
||||
href="/pricing"
|
||||
prefetch={false}
|
||||
href="/editor"
|
||||
fw="bold"
|
||||
size="md"
|
||||
color="indigo"
|
||||
@ -236,50 +237,33 @@ export const HomePage = () => {
|
||||
hiddenFrom="sm"
|
||||
radius="md"
|
||||
>
|
||||
Get Pro Editor
|
||||
Go To Editor
|
||||
</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"
|
||||
component="a"
|
||||
href="/#features"
|
||||
size="xl"
|
||||
fw="bold"
|
||||
variant="outline"
|
||||
color="gray.7"
|
||||
leftSection={<FaGithub />}
|
||||
leftSection={<FaRocket />}
|
||||
visibleFrom="sm"
|
||||
radius="md"
|
||||
>
|
||||
<Stack gap={0}>
|
||||
Use Free Version
|
||||
<Text fz={12} c="gray.5">
|
||||
(No registration needed)
|
||||
</Text>
|
||||
</Stack>
|
||||
Explore Premium
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Button
|
||||
component={Link}
|
||||
prefetch={false}
|
||||
href="/editor"
|
||||
component="a"
|
||||
href="/#features"
|
||||
fw="bold"
|
||||
size="md"
|
||||
variant="outline"
|
||||
color="gray.7"
|
||||
leftSection={<FaGithub />}
|
||||
leftSection={<FaRocket />}
|
||||
hiddenFrom="sm"
|
||||
radius="md"
|
||||
>
|
||||
Use Free Version
|
||||
Explore Premium
|
||||
</Button>
|
||||
</Group>
|
||||
<Flex gap="xs">
|
||||
@ -334,8 +318,6 @@ export const HomePage = () => {
|
||||
</Carousel>
|
||||
</StyledCarouselWrapper>
|
||||
<Paper
|
||||
component="section"
|
||||
id="features"
|
||||
pt={rem(280)}
|
||||
px={rem(80)}
|
||||
pb={rem(20)}
|
||||
@ -356,6 +338,7 @@ export const HomePage = () => {
|
||||
</Text>
|
||||
</Paper>
|
||||
|
||||
<section id="features">
|
||||
<Stack mt={100} align="center" px="lg" mx="auto" maw={{ sm: "80%", md: "65%" }}>
|
||||
<ThemeIcon variant="transparent" color="dark" mx="auto" size="xl">
|
||||
<BiChevronDown size={40} />
|
||||
@ -366,8 +349,9 @@ export const HomePage = () => {
|
||||
</Title>
|
||||
<Text c="dark.2" fz={{ base: 12, md: 16 }} style={{ textAlign: "center" }}>
|
||||
Forget juggling JSON formatters, validators, and viewers! JSON Crack simplifies your
|
||||
workflow with effortless formatting, robust validation, and intuitive visualizations - all
|
||||
in one user-friendly platform. See your data sing and make smarter decisions, faster.
|
||||
workflow with effortless formatting, robust validation, and intuitive visualizations -
|
||||
all in one user-friendly platform. See your data sing and make smarter decisions,
|
||||
faster.
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
@ -543,8 +527,8 @@ export const HomePage = () => {
|
||||
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.
|
||||
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}>
|
||||
@ -600,6 +584,7 @@ export const HomePage = () => {
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</section>
|
||||
|
||||
<PricingCards />
|
||||
<Center mt={80}>
|
||||
|
||||
@ -28,7 +28,7 @@ const StyledPaperFree = styled(Paper)`
|
||||
padding: 1.5em;
|
||||
width: 400px;
|
||||
border-radius: 1em;
|
||||
border: 2px solid #e1e1e1;
|
||||
border: 2px solid #e9e9e9;
|
||||
`;
|
||||
|
||||
const StyledPaper = styled(Paper)`
|
||||
@ -140,8 +140,8 @@ export const PricingCards = () => {
|
||||
<StyledPaper>
|
||||
<Flex justify="space-between">
|
||||
<Stack gap="0">
|
||||
<Badge mb="lg" size="lg" variant="filled" color="violet" c="white" leftSection="✦">
|
||||
Popular
|
||||
<Badge mb="lg" size="lg" variant="outline" color="gray.3" c="dark" leftSection="✦">
|
||||
Premium
|
||||
</Badge>
|
||||
|
||||
<Flex gap="xs" align="baseline">
|
||||
@ -168,7 +168,7 @@ export const PricingCards = () => {
|
||||
my="md"
|
||||
rightSection={<VscArrowRight />}
|
||||
>
|
||||
Upgrade
|
||||
Get Started
|
||||
</Button>
|
||||
<Flex direction="column" justify="space-between" h={250}>
|
||||
<List spacing="xs" size="sm" mt="lg" center icon="✦">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user