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'}

51
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,8 +385,10 @@ export const HomePage = () => {
h={{ sm: 300, md: 370 }} h={{ sm: 300, md: 370 }}
style={{ style={{
overflow: "hidden", overflow: "hidden",
background: bg1,
}} }}
> >
<StyledPaper>
<ThemeIcon <ThemeIcon
color="gray.3" color="gray.3"
c="dark.4" c="dark.4"
@ -378,16 +411,18 @@ export const HomePage = () => {
loading="lazy" loading="lazy"
src="./assets/features/compare.webp" src="./assets/features/compare.webp"
alt="Compare" alt="Compare"
w={{ sm: 350, md: 500 }} w={{ sm: 350, md: 400 }}
mt={20} mt={20}
style={{ style={{
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))", filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
}} }}
/> />
</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"
@ -396,8 +431,10 @@ export const HomePage = () => {
h={{ sm: 300, md: 370 }} h={{ sm: 300, md: 370 }}
style={{ style={{
overflow: "hidden", overflow: "hidden",
background: bg2,
}} }}
> >
<StyledPaper>
<ThemeIcon <ThemeIcon
color="gray.3" color="gray.3"
c="dark.4" c="dark.4"
@ -414,7 +451,8 @@ export const HomePage = () => {
Edit Edit
</Title> </Title>
<Text fz={{ sm: 14, md: 16 }} fw={300} lts={0.4} c="dark.5" my={10}> <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. Directly modify your data through the graphs, without wasting time on manual
editing.
</Text> </Text>
<Paper withBorder shadow="sm" radius="sm" w="fit-content" mx="auto"> <Paper withBorder shadow="sm" radius="sm" w="fit-content" mx="auto">
<Image <Image
@ -425,10 +463,12 @@ export const HomePage = () => {
w={340} w={340}
/> />
</Paper> </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"
@ -437,8 +477,10 @@ export const HomePage = () => {
h={{ sm: 300, md: 370 }} h={{ sm: 300, md: 370 }}
style={{ style={{
overflow: "hidden", overflow: "hidden",
background: bg3,
}} }}
> >
<StyledPaper>
<ThemeIcon <ThemeIcon
color="gray.3" color="gray.3"
c="dark.4" c="dark.4"
@ -468,10 +510,12 @@ export const HomePage = () => {
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))", filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
}} }}
/> />
</StyledPaper>
</Paper> </Paper>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ base: 12, sm: 6 }}> <Grid.Col span={{ base: 12, sm: 6 }}>
<Paper <Paper
ref={card4 as React.RefObject<HTMLDivElement>}
p={30} p={30}
withBorder withBorder
shadow="xs" shadow="xs"
@ -480,8 +524,10 @@ export const HomePage = () => {
h={{ sm: 300, md: 370 }} h={{ sm: 300, md: 370 }}
style={{ style={{
overflow: "hidden", overflow: "hidden",
background: bg4,
}} }}
> >
<StyledPaper>
<ThemeIcon <ThemeIcon
color="gray.3" color="gray.3"
c="dark.4" c="dark.4"
@ -551,6 +597,7 @@ export const HomePage = () => {
</Badge> </Badge>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</StyledPaper>
</Paper> </Paper>
</Grid.Col> </Grid.Col>
</Grid> </Grid>