diff --git a/package.json b/package.json index f51fc6a..1bc0799 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6724133..5cada5a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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'} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index dff815e..3279750 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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 ( @@ -346,6 +375,8 @@ export const HomePage = () => { } p={30} withBorder shadow="xs" @@ -354,81 +385,44 @@ export const HomePage = () => { h={{ sm: 300, md: 370 }} style={{ overflow: "hidden", + background: bg1, }} > - - - - - Compare - - - Compare and analyze your data smoothly with the interactive graphs. - - Compare - - - - - - - - - Edit - - - Directly modify your data through the graphs, without wasting time on manual editing. - - + + + + + + Compare + + + Compare and analyze your data smoothly with the interactive graphs. + Edit - + } p={30} withBorder shadow="xs" @@ -437,41 +431,44 @@ export const HomePage = () => { h={{ sm: 300, md: 370 }} style={{ overflow: "hidden", + background: bg2, }} > - - - - - Search - - - Highlight and search what you need in your data, without any hassle. - - Search + + + + + + Edit + + + Directly modify your data through the graphs, without wasting time on manual + editing. + + + Edit + + } p={30} withBorder shadow="xs" @@ -480,77 +477,127 @@ export const HomePage = () => { h={{ sm: 300, md: 370 }} style={{ overflow: "hidden", + background: bg3, }} > - - - - - Choose Your Format - - - Visualize and edit your data in multiple formats. JSON, YAML, CSV, XML, and TOML are - supported. - - - - - JSON - - - - - YAML - - - - - CSV - - - - - XML - - - + + + + + + Search + + + Highlight and search what you need in your data, without any hassle. + + Search + + + + + } + p={30} + withBorder + shadow="xs" + radius="md" + w="100%" + h={{ sm: 300, md: 370 }} + style={{ + overflow: "hidden", + background: bg4, + }} + > + + + + + + Choose Your Format + + + Visualize and edit your data in multiple formats. JSON, YAML, CSV, XML, and TOML are + supported. + + + + + JSON + + + + + YAML + + + + + CSV + + + + + XML + + + +