forked from AykutSarac/jsoncrack.com
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'AykutSarac:main' into main
- Loading branch information
Showing
6 changed files
with
194 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,27 +20,27 @@ jobs: | |
runs-on: ubuntu-latest | ||
steps: | ||
- name: Checkout | ||
uses: actions/checkout@v3 | ||
uses: actions/checkout@v4 | ||
with: | ||
fetch-depth: 0 | ||
|
||
- name: Install Node.js | ||
uses: actions/setup-node@v3 | ||
- name: Setup Node | ||
uses: actions/setup-node@v4 | ||
with: | ||
node-version: "20" | ||
|
||
- uses: pnpm/action-setup@v2 | ||
- uses: pnpm/action-setup@v4 | ||
name: Install pnpm | ||
with: | ||
version: 8 | ||
version: 9.1.4 | ||
run_install: false | ||
|
||
- name: Get pnpm store directory | ||
shell: bash | ||
run: | | ||
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV | ||
- uses: actions/cache@v3 | ||
- uses: actions/cache@v4 | ||
name: Setup pnpm cache | ||
with: | ||
path: ${{ env.STORE_PATH }} | ||
|
@@ -49,12 +49,12 @@ jobs: | |
${{ runner.os }}-pnpm-store- | ||
- name: Setup Pages | ||
uses: actions/configure-pages@v3 | ||
uses: actions/configure-pages@v4 | ||
with: | ||
static_site_generator: next | ||
|
||
- name: Restore cache | ||
uses: actions/cache@v3 | ||
uses: actions/cache@v4 | ||
with: | ||
path: | | ||
.next/cache | ||
|
@@ -69,13 +69,13 @@ jobs: | |
run: pnpm next build | ||
|
||
- name: Upload Build Artifacts | ||
uses: actions/upload-artifact@v2 | ||
uses: actions/upload-artifact@v4 | ||
with: | ||
name: build-files | ||
path: ./out/_next/static/chunks | ||
|
||
- name: Upload artifact | ||
uses: actions/upload-pages-artifact@v1 | ||
uses: actions/upload-pages-artifact@v3 | ||
with: | ||
path: './out' | ||
|
||
|
@@ -92,7 +92,7 @@ jobs: | |
SENTRY_SOURCEMAP_PATH: "./" | ||
steps: | ||
- name: Checkout | ||
uses: actions/checkout@v3 | ||
uses: actions/checkout@v4 | ||
with: | ||
fetch-depth: 0 | ||
- uses: actions/[email protected] | ||
|
@@ -124,5 +124,5 @@ jobs: | |
steps: | ||
- name: Deploy to GitHub Pages | ||
id: deployment | ||
uses: actions/deploy-pages@v1 | ||
uses: actions/deploy-pages@v4 | ||
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,164 @@ | ||
import React from "react"; | ||
import Link from "next/link"; | ||
import { | ||
Button, | ||
Container, | ||
Flex, | ||
Image, | ||
JsonInput, | ||
List, | ||
SimpleGrid, | ||
Stack, | ||
Text, | ||
Title, | ||
} from "@mantine/core"; | ||
import styled from "styled-components"; | ||
import { LuBadgeCheck } from "react-icons/lu"; | ||
|
||
const StyledDottedContainer = styled.div` | ||
position: relative; | ||
background-color: #f3f3f3; | ||
background-image: radial-gradient(#e0e0e0 3px, transparent 0); | ||
background-size: 40px 40px; | ||
border: 1px solid #e0e0e0; | ||
width: 100%; | ||
min-width: 300px; | ||
max-width: 500px; | ||
border-radius: 15px; | ||
height: 460px; | ||
.jc { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
padding: 12px; | ||
border-radius: 15px; | ||
transform: translate(-80px, 10%); | ||
border: 1px solid #000; | ||
box-shadow: 0px 4px 0px 0px #000; | ||
background: #f3f3f3; | ||
--line-color-1: #e3e3e3; | ||
--line-color-2: #e5e5e5; | ||
background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px), | ||
linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px), | ||
linear-gradient(var(--line-color-2) 1px, transparent 1px), | ||
linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px); | ||
background-position: | ||
-1.5px -1.5px, | ||
-1.5px -1.5px, | ||
-1px -1px, | ||
-1px -1px; | ||
background-size: | ||
100px 100px, | ||
100px 100px, | ||
20px 20px, | ||
20px 20px; | ||
} | ||
.jcode { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
transform: translate(80%, 80%); | ||
width: 273px; | ||
border-radius: 15px; | ||
border: 1px solid #000; | ||
box-shadow: 0px 4px 0px 0px #000; | ||
overflow: hidden; | ||
} | ||
@media only screen and (max-width: 1085px) { | ||
display: none; | ||
} | ||
`; | ||
|
||
export const Section1 = () => { | ||
return ( | ||
<Container size="xl" my="120"> | ||
<Flex justify="center" align="center"> | ||
<Stack maw={634}> | ||
<Title | ||
lh="1.1" | ||
fz={{ | ||
base: 26, | ||
xs: 32, | ||
sm: 42, | ||
}} | ||
maw={500} | ||
order={2} | ||
> | ||
Understand complex data quickly | ||
</Title> | ||
<Text my="md" c="gray.6" fz={16} maw={510}> | ||
The days of getting lost in lines of code are over. JSON Crack gives you the most | ||
optimal view of your data so you can make insights faster than ever. | ||
</Text> | ||
<List | ||
fz={{ | ||
base: 16, | ||
xs: 18, | ||
}} | ||
fw={500} | ||
component={SimpleGrid} | ||
icon={<LuBadgeCheck size="20" />} | ||
> | ||
<SimpleGrid w="fit-content" cols={2}> | ||
<List.Item>Fast decision-making</List.Item> | ||
<List.Item>Grasp patterns and relationships faster</List.Item> | ||
<List.Item>Clear, concise data presentation</List.Item> | ||
<List.Item>Share insights with teams easier</List.Item> | ||
</SimpleGrid> | ||
</List> | ||
<Link href="/editor" prefetch={false}> | ||
<Button color="#202842" size="lg" radius="md" w="fit-content" mt="sm"> | ||
Use for free | ||
</Button> | ||
</Link> | ||
</Stack> | ||
<StyledDottedContainer> | ||
<Image className="jc" src="/assets/jsoncrack.svg" alt="json crack" /> | ||
<JsonInput | ||
w={273} | ||
rows={12} | ||
className="jcode" | ||
styles={{ | ||
input: { | ||
border: "none", | ||
fontSize: 12, | ||
}, | ||
}} | ||
value={JSON.stringify( | ||
{ | ||
squadName: "Super hero squad", | ||
homeTown: "Metro City", | ||
formed: 2016, | ||
secretBase: "Super tower", | ||
active: true, | ||
members: [ | ||
{ | ||
name: "Molecule Man", | ||
age: 29, | ||
secretIdentity: "Dan Jukes", | ||
}, | ||
{ | ||
name: "Madame Uppercut", | ||
age: 39, | ||
secretIdentity: "Jane Wilson", | ||
}, | ||
{ | ||
name: "Eternal Flame", | ||
age: 1000000, | ||
secretIdentity: "Unknown", | ||
}, | ||
], | ||
}, | ||
null, | ||
2 | ||
)} | ||
/> | ||
</StyledDottedContainer> | ||
</Flex> | ||
</Container> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters