Skip to content

Commit

Permalink
Merge branch 'AykutSarac:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
louyongjiu committed Sep 18, 2024
2 parents 938f2a4 + c302ef6 commit 887e7f3
Show file tree
Hide file tree
Showing 6 changed files with 194 additions and 15 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,5 @@
},
"extends": ["next/core-web-vitals", "prettier", "plugin:@typescript-eslint/recommended"],
"plugins": ["prettier", "unused-imports"],
"ignorePatterns": ["src/enums"]
"ignorePatterns": ["src/enums", "next.config.js"]
}
24 changes: 12 additions & 12 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand All @@ -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
Expand All @@ -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'

Expand All @@ -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]
Expand Down Expand Up @@ -124,5 +124,5 @@ jobs:
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
uses: actions/deploy-pages@v4

1 change: 1 addition & 0 deletions public/assets/jsoncrack.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 14 additions & 2 deletions src/containers/Landing/HeroSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const StyledHeroSectionBody = styled.div`
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 6rem 10% 8rem;
padding: 6rem 10% 4rem;
overflow: hidden;
text-align: center;
gap: 60px;
Expand Down Expand Up @@ -112,6 +112,18 @@ export const HeroSection = () => {
color="red.5"
leftSection={<FaFire />}
tt="unset"
visibleFrom="xs"
>
NEW: Now faster & more powerful — ToDiagram.com
</Badge>
<Badge
fw={600}
size="sm"
variant="outline"
color="red.5"
leftSection={<FaFire />}
tt="unset"
hiddenFrom="xs"
>
NEW: Now faster & more powerful — ToDiagram.com
</Badge>
Expand All @@ -125,7 +137,7 @@ export const HeroSection = () => {
<Flex gap="xs" wrap="wrap" justify="center" hiddenFrom="xs">
<Button
component="a"
color="indigo"
color="#202842"
href="/editor"
size="md"
radius="md"
Expand Down
164 changes: 164 additions & 0 deletions src/containers/Landing/Section1.tsx
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>
);
};
2 changes: 2 additions & 0 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { FAQ } from "src/containers/Landing/FAQ";
import { Features } from "src/containers/Landing/Features";
import { HeroPreview } from "src/containers/Landing/HeroPreview";
import { HeroSection } from "src/containers/Landing/HeroSection";
import { Section1 } from "src/containers/Landing/Section1";
import { SeePremium } from "src/containers/Landing/SeePremium";
import Layout from "src/layout/Layout";

Expand All @@ -23,6 +24,7 @@ export const HomePage = () => {
/>
<HeroSection />
<HeroPreview />
<Section1 />
<Features />
<SeePremium />
<FAQ />
Expand Down

0 comments on commit 887e7f3

Please sign in to comment.