mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-12 19:02:53 +08:00
feat: add card spotlight background
This commit is contained in:
AykutSarac
parent
daa8d4c11e
commit
0f11d7e337
@ -49,6 +49,7 @@
|
||||
"reaflow": "5.2.8",
|
||||
"styled-components": "^6.1.8",
|
||||
"toml": "^3.0.0",
|
||||
"use-bg-cursor-pos": "^1.0.1",
|
||||
"use-long-press": "^3.2.0",
|
||||
"zustand": "^4.5.2"
|
||||
},
|
||||
|
||||
11
pnpm-lock.yaml
generated
11
pnpm-lock.yaml
generated
@ -110,6 +110,9 @@ dependencies:
|
||||
toml:
|
||||
specifier: ^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:
|
||||
specifier: ^3.2.0
|
||||
version: 3.2.0(react@18.2.0)
|
||||
@ -4591,6 +4594,14 @@ packages:
|
||||
punycode: 2.3.1
|
||||
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):
|
||||
resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
@ -32,6 +32,7 @@ import {
|
||||
MdRebaseEdit,
|
||||
MdSearch,
|
||||
} from "react-icons/md";
|
||||
import useBackgroundCursorPosition from "use-bg-cursor-pos";
|
||||
import Layout from "src/layout/Layout";
|
||||
|
||||
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`
|
||||
position: relative;
|
||||
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.";
|
||||
|
||||
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 (
|
||||
<Layout>
|
||||
<Head>
|
||||
@ -346,6 +375,8 @@ export const HomePage = () => {
|
||||
<Grid w="90%" gutter={24} mt={50} mb={150} mx="auto">
|
||||
<Grid.Col span={{ base: 12, sm: 6 }}>
|
||||
<Paper
|
||||
pos="relative"
|
||||
ref={card1 as React.RefObject<HTMLDivElement>}
|
||||
p={30}
|
||||
withBorder
|
||||
shadow="xs"
|
||||
@ -354,81 +385,44 @@ export const HomePage = () => {
|
||||
h={{ sm: 300, md: 370 }}
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
background: bg1,
|
||||
}}
|
||||
>
|
||||
<ThemeIcon
|
||||
color="gray.3"
|
||||
c="dark.4"
|
||||
bg="gray.1"
|
||||
variant="outline"
|
||||
size="xl"
|
||||
radius="md"
|
||||
visibleFrom="md"
|
||||
mb="md"
|
||||
>
|
||||
<MdCompare size={28} />
|
||||
</ThemeIcon>
|
||||
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
|
||||
Compare
|
||||
</Title>
|
||||
<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.
|
||||
</Text>
|
||||
<Image
|
||||
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">
|
||||
<StyledPaper>
|
||||
<ThemeIcon
|
||||
color="gray.3"
|
||||
c="dark.4"
|
||||
bg="gray.1"
|
||||
variant="outline"
|
||||
size="xl"
|
||||
radius="md"
|
||||
visibleFrom="md"
|
||||
mb="md"
|
||||
>
|
||||
<MdCompare size={28} />
|
||||
</ThemeIcon>
|
||||
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
|
||||
Compare
|
||||
</Title>
|
||||
<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.
|
||||
</Text>
|
||||
<Image
|
||||
loading="lazy"
|
||||
radius="sm"
|
||||
src="./assets/features/edit.webp"
|
||||
alt="Edit"
|
||||
w={340}
|
||||
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))",
|
||||
}}
|
||||
/>
|
||||
</Paper>
|
||||
</StyledPaper>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, sm: 6 }}>
|
||||
<Paper
|
||||
ref={card2 as React.RefObject<HTMLDivElement>}
|
||||
p={30}
|
||||
withBorder
|
||||
shadow="xs"
|
||||
@ -437,41 +431,44 @@ export const HomePage = () => {
|
||||
h={{ sm: 300, md: 370 }}
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
background: bg2,
|
||||
}}
|
||||
>
|
||||
<ThemeIcon
|
||||
color="gray.3"
|
||||
c="dark.4"
|
||||
bg="gray.1"
|
||||
variant="outline"
|
||||
size="xl"
|
||||
radius="md"
|
||||
visibleFrom="md"
|
||||
mb="md"
|
||||
>
|
||||
<MdSearch size={28} />
|
||||
</ThemeIcon>
|
||||
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
|
||||
Search
|
||||
</Title>
|
||||
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
|
||||
Highlight and search what you need in your data, without any hassle.
|
||||
</Text>
|
||||
<Image
|
||||
loading="lazy"
|
||||
src="./assets/features/search.webp"
|
||||
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>
|
||||
<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
|
||||
loading="lazy"
|
||||
radius="sm"
|
||||
src="./assets/features/edit.webp"
|
||||
alt="Edit"
|
||||
w={340}
|
||||
/>
|
||||
</Paper>
|
||||
</StyledPaper>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, sm: 6 }}>
|
||||
<Paper
|
||||
ref={card3 as React.RefObject<HTMLDivElement>}
|
||||
p={30}
|
||||
withBorder
|
||||
shadow="xs"
|
||||
@ -480,77 +477,127 @@ export const HomePage = () => {
|
||||
h={{ sm: 300, md: 370 }}
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
background: bg3,
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<ThemeIcon
|
||||
color="gray.3"
|
||||
c="dark.4"
|
||||
bg="gray.1"
|
||||
variant="outline"
|
||||
size="xl"
|
||||
radius="md"
|
||||
visibleFrom="md"
|
||||
mb="md"
|
||||
>
|
||||
<MdSearch size={28} />
|
||||
</ThemeIcon>
|
||||
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
|
||||
Search
|
||||
</Title>
|
||||
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
|
||||
Highlight and search what you need in your data, without any hassle.
|
||||
</Text>
|
||||
<Image
|
||||
loading="lazy"
|
||||
src="./assets/features/search.webp"
|
||||
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"
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user