GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add card spotlight background

Browse Source
This commit is contained in:
AykutSarac 2024-04-27 23:21:17 +03:00
parent daa8d4c11e
commit 0f11d7e337
No known key found for this signature in database
3 changed files with 223 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -49,6 +49,7 @@
"reaflow": "5.2.8", "reaflow": "5.2.8",
"styled-components": "^6.1.8", "styled-components": "^6.1.8",
"toml": "^3.0.0", "toml": "^3.0.0",
"use-bg-cursor-pos": "^1.0.1",
"use-long-press": "^3.2.0", "use-long-press": "^3.2.0",
"zustand": "^4.5.2" "zustand": "^4.5.2"
}, },

11
pnpm-lock.yaml generated
View File

@ -110,6 +110,9 @@ dependencies:
toml: toml:
specifier: ^3.0.0 specifier: ^3.0.0
version: 3.0.0 version: 3.0.0
use-bg-cursor-pos:
specifier: ^1.0.1
version: 1.0.1(react@18.2.0)
use-long-press: use-long-press:
specifier: ^3.2.0 specifier: ^3.2.0
version: 3.2.0(react@18.2.0) version: 3.2.0(react@18.2.0)
@ -4591,6 +4594,14 @@ packages:
punycode: 2.3.1 punycode: 2.3.1
dev: true dev: true
/use-bg-cursor-pos@1.0.1(react@18.2.0):
resolution: {integrity: sha512-5eg6GrQepu2Yrh/dpQLIhO/2rRZzNtuyNxcX9z2RGnkKX4pUykDxseAb52I2pjBGTncuwJDaoGSvizvj5bIykw==}
peerDependencies:
react: ^16.8.0
dependencies:
react: 18.2.0
dev: false
/use-callback-ref@1.3.1(@types/react@18.2.51)(react@18.2.0): /use-callback-ref@1.3.1(@types/react@18.2.51)(react@18.2.0):
resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==} resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==}
engines: {node: '>=10'} engines: {node: '>=10'}

375
src/pages/index.tsx
View File

@ -32,6 +32,7 @@ import {
MdRebaseEdit, MdRebaseEdit,
MdSearch, MdSearch,
} from "react-icons/md"; } from "react-icons/md";
import useBackgroundCursorPosition from "use-bg-cursor-pos";
import Layout from "src/layout/Layout"; import Layout from "src/layout/Layout";
const PricingCards = dynamic(() => import("./pricing").then(mod => mod.PricingCards)); const PricingCards = dynamic(() => import("./pricing").then(mod => mod.PricingCards));
@ -96,6 +97,29 @@ const StyledHeroText = styled.p`
} }
`; `;
const StyledPaper = styled.div`
position: relative;
z-index: 1;
&:before {
position: absolute;
z-index: -1;
opacity: 0.7;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background-size: 20px 20px;
background-image: linear-gradient(to right, #dcdcdc 1px, transparent 1px),
linear-gradient(to bottom, #dcdcdc 1px, transparent 1px);
background-position: top center;
image-rendering: pixelated;
-webkit-mask-image: linear-gradient(to bottom, transparent, 20%, white, 90%, transparent);
mask-image: linear-gradient(to bottom, transparent, 20%, white, 90%, transparent);
}
`;
const StyledHeroTitle = styled.h1` const StyledHeroTitle = styled.h1`
position: relative; position: relative;
font-size: 1.8rem; font-size: 1.8rem;
@ -163,6 +187,11 @@ 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."; "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 HomePage = () => { export const HomePage = () => {
const [card1, bg1] = useBackgroundCursorPosition("#f2f2f2", "#ffffff", "200px");
const [card2, bg2] = useBackgroundCursorPosition("#f2f2f2", "#ffffff", "200px");
const [card3, bg3] = useBackgroundCursorPosition("#f2f2f2", "#ffffff", "200px");
const [card4, bg4] = useBackgroundCursorPosition("#f2f2f2", "#ffffff", "200px");
return ( return (
<Layout> <Layout>
<Head> <Head>
@ -346,6 +375,8 @@ export const HomePage = () => {
<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"
ref={card1 as React.RefObject<HTMLDivElement>}
p={30} p={30}
withBorder withBorder
shadow="xs" shadow="xs"
@ -354,81 +385,44 @@ export const HomePage = () => {
h={{ sm: 300, md: 370 }} h={{ sm: 300, md: 370 }}
style={{ style={{
overflow: "hidden", overflow: "hidden",
background: bg1,
}} }}
> >
<ThemeIcon <StyledPaper>
color="gray.3" <ThemeIcon
c="dark.4" color="gray.3"
bg="gray.1" c="dark.4"
variant="outline" bg="gray.1"
size="xl" variant="outline"
radius="md" size="xl"
visibleFrom="md" radius="md"
mb="md" visibleFrom="md"
> mb="md"
<MdCompare size={28} /> >
</ThemeIcon> <MdCompare size={28} />
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}> </ThemeIcon>
Compare <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
</Title> Compare
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}> </Title>
Compare and analyze your data smoothly with the interactive graphs. <Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
</Text> Compare and analyze your data smoothly with the interactive graphs.
<Image </Text>
loading="lazy"
src="./assets/features/compare.webp"
alt="Compare"
w={{ sm: 350, md: 500 }}
mt={20}
style={{
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
}}
/>
</Paper>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6 }}>
<Paper
p={30}
withBorder
shadow="xs"
radius="md"
w="100%"
h={{ sm: 300, md: 370 }}
style={{
overflow: "hidden",
}}
>
<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>
</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>}
p={30} p={30}
withBorder withBorder
shadow="xs" shadow="xs"
@ -437,41 +431,44 @@ export const HomePage = () => {
h={{ sm: 300, md: 370 }} h={{ sm: 300, md: 370 }}
style={{ style={{
overflow: "hidden", overflow: "hidden",
background: bg2,
}} }}
> >
<ThemeIcon <StyledPaper>
color="gray.3" <ThemeIcon
c="dark.4" color="gray.3"
bg="gray.1" c="dark.4"
variant="outline" bg="gray.1"
size="xl" variant="outline"
radius="md" size="xl"
visibleFrom="md" radius="md"
mb="md" visibleFrom="md"
> mb="md"
<MdSearch size={28} /> >
</ThemeIcon> <MdRebaseEdit size={28} />
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}> </ThemeIcon>
Search <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
</Title> Edit
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}> </Title>
Highlight and search what you need in your data, without any hassle. <Text fz={{ sm: 14, md: 16 }} fw={300} lts={0.4} c="dark.5" my={10}>
</Text> Directly modify your data through the graphs, without wasting time on manual
<Image editing.
loading="lazy" </Text>
src="./assets/features/search.webp" <Paper withBorder shadow="sm" radius="sm" w="fit-content" mx="auto">
alt="Search" <Image
w={{ sm: 400, md: 500 }} loading="lazy"
mx="auto" radius="sm"
mt={20} src="./assets/features/edit.webp"
style={{ alt="Edit"
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))", w={340}
}} />
/> </Paper>
</StyledPaper>
</Paper> </Paper>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ base: 12, sm: 6 }}> <Grid.Col span={{ base: 12, sm: 6 }}>
<Paper <Paper
ref={card3 as React.RefObject<HTMLDivElement>}
p={30} p={30}
withBorder withBorder
shadow="xs" shadow="xs"
@ -480,77 +477,127 @@ export const HomePage = () => {
h={{ sm: 300, md: 370 }} h={{ sm: 300, md: 370 }}
style={{ style={{
overflow: "hidden", overflow: "hidden",
background: bg3,
}} }}
> >
<ThemeIcon <StyledPaper>
color="gray.3" <ThemeIcon
c="dark.4" color="gray.3"
bg="gray.1" c="dark.4"
variant="outline" bg="gray.1"
size="xl" variant="outline"
radius="md" size="xl"
visibleFrom="md" radius="md"
mb="md" visibleFrom="md"
> mb="md"
<MdExtension size={28} /> >
</ThemeIcon> <MdSearch size={28} />
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}> </ThemeIcon>
Choose Your Format <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
</Title> Search
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}> </Title>
Visualize and edit your data in multiple formats. JSON, YAML, CSV, XML, and TOML are <Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
supported. Highlight and search what you need in your data, without any hassle.
</Text> </Text>
<Grid gutter="lg" mt={20}> <Image
<Grid.Col span={6}> loading="lazy"
<Badge src="./assets/features/search.webp"
w="100%" alt="Search"
mih={{ sm: 10, md: 40 }} w={{ sm: 400, md: 500 }}
variant="light" mx="auto"
color="indigo" mt={20}
radius="sm" style={{
size="xl" filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
> }}
JSON />
</Badge> </StyledPaper>
</Grid.Col> </Paper>
<Grid.Col span={6}> </Grid.Col>
<Badge <Grid.Col span={{ base: 12, sm: 6 }}>
w="100%" <Paper
mih={{ sm: 10, md: 40 }} ref={card4 as React.RefObject<HTMLDivElement>}
variant="light" p={30}
color="cyan" withBorder
radius="sm" shadow="xs"
size="xl" radius="md"
> w="100%"
YAML h={{ sm: 300, md: 370 }}
</Badge> style={{
</Grid.Col> overflow: "hidden",
<Grid.Col span={6}> background: bg4,
<Badge }}
w="100%" >
mih={{ sm: 10, md: 40 }} <StyledPaper>
variant="light" <ThemeIcon
color="grape" color="gray.3"
radius="sm" c="dark.4"
size="xl" bg="gray.1"
> variant="outline"
CSV size="xl"
</Badge> radius="md"
</Grid.Col> visibleFrom="md"
<Grid.Col span={6}> mb="md"
<Badge >
w="100%" <MdExtension size={28} />
mih={{ sm: 10, md: 40 }} </ThemeIcon>
variant="light" <Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
color="red" Choose Your Format
radius="sm" </Title>
size="xl" <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
XML supported.
</Badge> </Text>
</Grid.Col> <Grid gutter="lg" mt={20}>
</Grid> <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> </Paper>
</Grid.Col> </Grid.Col>
</Grid> </Grid>