mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-20 05:12:54 +08:00
initial commit
This commit is contained in:
AykutSarac
parent
07a4fa79e4
commit
c0afbf8f2d
@ -6,10 +6,15 @@ const GlobalStyle = createGlobalStyle`
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
color: ${({ theme }) => theme.FULL_WHITE};
|
||||
background: ${({ theme }) => theme.BLACK_PRIMARY};
|
||||
font-family: 'Catamaran', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
background-color: #000000;
|
||||
opacity: 1;
|
||||
background-image: radial-gradient(#414141 0.5px, #000000 0.5px);
|
||||
background-size: 10px 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@ -52,7 +52,7 @@ class MyDocument extends Document {
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Roboto+Mono:wght@500&family=Catamaran:wght@400;500;600&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;900&family=Roboto+Mono:wght@500&family=Catamaran:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
|
||||
138
src/pages/index.bin.tsx
Normal file
138
src/pages/index.bin.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
import React from "react";
|
||||
import { Button } from "src/components/Button";
|
||||
import { Container } from "src/components/Container";
|
||||
import { Navbar } from "src/components/Navbar";
|
||||
import { Image } from "src/components/Image";
|
||||
import { AiFillGithub } from "react-icons/ai";
|
||||
import { Footer } from "src/components/Footer";
|
||||
import Head from "next/head";
|
||||
import { Producthunt } from "src/components/Producthunt";
|
||||
import { useRouter } from "next/router";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledHome = styled.div`
|
||||
padding: 24px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: #23272a !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: #4d4d4d !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContent = styled.div`
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: ${({ theme }) => theme.SILVER};
|
||||
width: 50%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHeader = styled.h2`
|
||||
font-size: 3rem;
|
||||
color: ${({ theme }) => theme.FULL_WHITE};
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSubContent = styled.div`
|
||||
margin-bottom: 20px;
|
||||
`;
|
||||
|
||||
const StyledText = styled.span<{ white?: boolean }>`
|
||||
color: ${({ theme, white }) => (white ? theme.FULL_WHITE : theme.ORANGE)};
|
||||
`;
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { push } = useRouter();
|
||||
|
||||
return (
|
||||
<StyledHome>
|
||||
<Head>
|
||||
<title>JSON Visio - Directly onto graphs</title>
|
||||
</Head>
|
||||
<Navbar />
|
||||
<Container>
|
||||
<StyledContent>
|
||||
<StyledHeader as="h1">
|
||||
Visualize your JSON into interactive graphs.
|
||||
</StyledHeader>
|
||||
<StyledSubContent>
|
||||
Simple visualization tool for your JSON data. No forced structure,
|
||||
paste your JSON and view it instantly.
|
||||
</StyledSubContent>
|
||||
<Button status="SECONDARY" onClick={() => push("/editor")}>
|
||||
Start Generating
|
||||
</Button>
|
||||
</StyledContent>
|
||||
<Image src="421.svg" width={500} height={400} alt="graphs" />
|
||||
</Container>
|
||||
|
||||
<Container reverse>
|
||||
<StyledContent>
|
||||
<StyledHeader>No Rules</StyledHeader>
|
||||
<StyledSubContent>
|
||||
Be free, you don't have to restructure your json to transform
|
||||
it onto graphs. We've done it at our side, so you can just
|
||||
paste your JSON.
|
||||
</StyledSubContent>
|
||||
<Button status="SUCCESS" onClick={() => push("/editor")}>
|
||||
Paste It!
|
||||
</Button>
|
||||
</StyledContent>
|
||||
<Image src="graphs3.svg" width={500} height={400} alt="preview" />
|
||||
</Container>
|
||||
|
||||
<Container>
|
||||
<StyledContent>
|
||||
<StyledHeader>Import File</StyledHeader>
|
||||
<StyledSubContent>
|
||||
Have an existing file for your data? No worries, directly import it
|
||||
into our editor without having to scroll through all of it!
|
||||
</StyledSubContent>
|
||||
<Button status="SUCCESS" onClick={() => push("/editor")}>
|
||||
Import JSON
|
||||
</Button>
|
||||
</StyledContent>
|
||||
<Image src="graphs4.svg" width={500} height={400} alt="preview" />
|
||||
</Container>
|
||||
|
||||
<Container reverse>
|
||||
<StyledContent>
|
||||
<StyledHeader>Supported by Open Source</StyledHeader>
|
||||
<StyledSubContent>
|
||||
We do our work at open source. Help us improve by contributing to
|
||||
<StyledText> JSON</StyledText>
|
||||
<StyledText white> Visio</StyledText> at GitHub!
|
||||
</StyledSubContent>
|
||||
<Button
|
||||
onClick={() => push("https://github.com/AykutSarac/jsonvisio.com")}
|
||||
>
|
||||
<AiFillGithub size={20} />
|
||||
Check GitHub
|
||||
</Button>
|
||||
</StyledContent>
|
||||
<Image src="graphs5.svg" width={500} height={400} alt="preview" />
|
||||
</Container>
|
||||
<Producthunt />
|
||||
<Footer />
|
||||
</StyledHome>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
@ -1,138 +1,212 @@
|
||||
import React from "react";
|
||||
import { Button } from "src/components/Button";
|
||||
import { Container } from "src/components/Container";
|
||||
import { Navbar } from "src/components/Navbar";
|
||||
import { Image } from "src/components/Image";
|
||||
import { AiFillGithub } from "react-icons/ai";
|
||||
import { Footer } from "src/components/Footer";
|
||||
import Head from "next/head";
|
||||
import { Producthunt } from "src/components/Producthunt";
|
||||
import { useRouter } from "next/router";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledHome = styled.div`
|
||||
padding: 24px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: #23272a !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: #4d4d4d !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContent = styled.div`
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: ${({ theme }) => theme.SILVER};
|
||||
width: 50%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHeader = styled.h2`
|
||||
font-size: 3rem;
|
||||
color: ${({ theme }) => theme.FULL_WHITE};
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSubContent = styled.div`
|
||||
margin-bottom: 20px;
|
||||
`;
|
||||
|
||||
const StyledText = styled.span<{ white?: boolean }>`
|
||||
color: ${({ theme, white }) => (white ? theme.FULL_WHITE : theme.ORANGE)};
|
||||
`;
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { push } = useRouter();
|
||||
|
||||
return (
|
||||
<StyledHome>
|
||||
<Head>
|
||||
<title>JSON Visio - Directly onto graphs</title>
|
||||
</Head>
|
||||
<Navbar />
|
||||
<Container>
|
||||
<StyledContent>
|
||||
<StyledHeader as="h1">
|
||||
Visualize your JSON into interactive graphs.
|
||||
</StyledHeader>
|
||||
<StyledSubContent>
|
||||
Simple visualization tool for your JSON data. No forced structure,
|
||||
paste your JSON and view it instantly.
|
||||
</StyledSubContent>
|
||||
<Button status="SECONDARY" onClick={() => push("/editor")}>
|
||||
Start Generating
|
||||
</Button>
|
||||
</StyledContent>
|
||||
<Image src="421.svg" width={500} height={400} alt="graphs" />
|
||||
</Container>
|
||||
|
||||
<Container reverse>
|
||||
<StyledContent>
|
||||
<StyledHeader>No Rules</StyledHeader>
|
||||
<StyledSubContent>
|
||||
Be free, you don't have to restructure your json to transform
|
||||
it onto graphs. We've done it at our side, so you can just
|
||||
paste your JSON.
|
||||
</StyledSubContent>
|
||||
<Button status="SUCCESS" onClick={() => push("/editor")}>
|
||||
Paste It!
|
||||
</Button>
|
||||
</StyledContent>
|
||||
<Image src="graphs3.svg" width={500} height={400} alt="preview" />
|
||||
</Container>
|
||||
|
||||
<Container>
|
||||
<StyledContent>
|
||||
<StyledHeader>Import File</StyledHeader>
|
||||
<StyledSubContent>
|
||||
Have an existing file for your data? No worries, directly import it
|
||||
into our editor without having to scroll through all of it!
|
||||
</StyledSubContent>
|
||||
<Button status="SUCCESS" onClick={() => push("/editor")}>
|
||||
Import JSON
|
||||
</Button>
|
||||
</StyledContent>
|
||||
<Image src="graphs4.svg" width={500} height={400} alt="preview" />
|
||||
</Container>
|
||||
|
||||
<Container reverse>
|
||||
<StyledContent>
|
||||
<StyledHeader>Supported by Open Source</StyledHeader>
|
||||
<StyledSubContent>
|
||||
We do our work at open source. Help us improve by contributing to
|
||||
<StyledText> JSON</StyledText>
|
||||
<StyledText white> Visio</StyledText> at GitHub!
|
||||
</StyledSubContent>
|
||||
<Button
|
||||
onClick={() => push("https://github.com/AykutSarac/jsonvisio.com")}
|
||||
>
|
||||
<AiFillGithub size={20} />
|
||||
Check GitHub
|
||||
</Button>
|
||||
</StyledContent>
|
||||
<Image src="graphs5.svg" width={500} height={400} alt="preview" />
|
||||
</Container>
|
||||
<Producthunt />
|
||||
<Footer />
|
||||
</StyledHome>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React from "react";
|
||||
import {
|
||||
HiCursorClick,
|
||||
HiLightningBolt,
|
||||
HiOutlineDownload,
|
||||
HiOutlineSearchCircle,
|
||||
} from "react-icons/hi";
|
||||
import { Button } from "src/components/Button";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledHome = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8em;
|
||||
font-family: "Roboto", sans-serif;
|
||||
`;
|
||||
|
||||
const StyledGradientText = styled.span`
|
||||
background: #ffb76b;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#ffb76b 0%,
|
||||
#ffa73d 30%,
|
||||
#ff7c00 60%,
|
||||
#ff7f04 100%
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
`;
|
||||
|
||||
const StyledNavbar = styled.nav`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 16px 16px;
|
||||
gap: 20px;
|
||||
`;
|
||||
|
||||
const StyledHeroSection = styled.section`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5em;
|
||||
min-height: 50vh;
|
||||
`;
|
||||
|
||||
const StyledNavLink = styled.a`
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
font-weight: 500;
|
||||
color: ${({ theme }) => theme.ORANGE};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTitle = styled.h1`
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const StyledSubTitle = styled.h2`
|
||||
color: #dedede;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
max-width: 40rem;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const StyledMinorTitle = styled.p`
|
||||
color: #b4b4b4;
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
letter-spacing: 1.2px;
|
||||
`;
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
background: #d0880d;
|
||||
padding: 12px 24px;
|
||||
|
||||
div {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledFeaturesSection = styled.section`
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
`;
|
||||
|
||||
const StyledSectionCard = styled.div`
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const StyledCardTitle = styled.div`
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
padding: 0.875rem 0;
|
||||
letter-spacing: 1px;
|
||||
`;
|
||||
|
||||
const StyledCardIcon = styled.div``;
|
||||
|
||||
const StyledCardDescription = styled.p`
|
||||
text-align: left;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
`;
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { push } = useRouter();
|
||||
|
||||
return (
|
||||
<StyledHome>
|
||||
<StyledNavbar>
|
||||
<Link href="/editor">
|
||||
<StyledNavLink>Editor</StyledNavLink>
|
||||
</Link>
|
||||
<Link href="#features">
|
||||
<StyledNavLink>Features</StyledNavLink>
|
||||
</Link>
|
||||
<Link href="#sponsor">
|
||||
<StyledNavLink>Sponsor</StyledNavLink>
|
||||
</Link>
|
||||
<Link href="https://github.com/AykutSarac/jsonvisio.com">
|
||||
<StyledNavLink target="_blank" rel="external">
|
||||
GitHub
|
||||
</StyledNavLink>
|
||||
</Link>
|
||||
</StyledNavbar>
|
||||
|
||||
<StyledHeroSection id="features">
|
||||
<StyledTitle>
|
||||
<StyledGradientText>JSON</StyledGradientText> Visio
|
||||
</StyledTitle>
|
||||
<StyledSubTitle>
|
||||
Seamlessly visualize your JSON data instantly into graphs.
|
||||
</StyledSubTitle>
|
||||
<StyledMinorTitle>Paste - Import - Fetch!</StyledMinorTitle>
|
||||
<StyledButton onClick={() => push("/editor")}>GET STARTED</StyledButton>
|
||||
</StyledHeroSection>
|
||||
|
||||
<StyledFeaturesSection>
|
||||
<StyledSectionCard>
|
||||
<StyledCardIcon>
|
||||
<HiCursorClick size={50} color="#3BA55D" />
|
||||
</StyledCardIcon>
|
||||
<StyledCardTitle>SEAMLESS</StyledCardTitle>
|
||||
<StyledCardDescription>
|
||||
What good is a powerful table if that super hip designer you just
|
||||
hired can't work their UI magic on it? TanStack Table is headless by
|
||||
design, which means 100% control down to the very smallest HTML tag,
|
||||
component, class and style. Pixel Perfection? Go for it!
|
||||
</StyledCardDescription>
|
||||
</StyledSectionCard>
|
||||
|
||||
<StyledSectionCard>
|
||||
<StyledCardIcon>
|
||||
<HiOutlineSearchCircle size={50} color="#5865F2" />
|
||||
</StyledCardIcon>
|
||||
<StyledCardTitle>SEARCH</StyledCardTitle>
|
||||
<StyledCardDescription>
|
||||
What good is a powerful table if that super hip designer you just
|
||||
hired can't work their UI magic on it? TanStack Table is headless by
|
||||
design, which means 100% control down to the very smallest HTML tag,
|
||||
component, class and style. Pixel Perfection? Go for it!
|
||||
</StyledCardDescription>
|
||||
</StyledSectionCard>
|
||||
|
||||
<StyledSectionCard>
|
||||
<StyledCardIcon>
|
||||
<HiOutlineDownload size={50} color="#DA2877" />
|
||||
</StyledCardIcon>
|
||||
<StyledCardTitle>DOWNLOAD</StyledCardTitle>
|
||||
<StyledCardDescription>
|
||||
What good is a powerful table if that super hip designer you just
|
||||
hired can't work their UI magic on it? TanStack Table is headless by
|
||||
design, which means 100% control down to the very smallest HTML tag,
|
||||
component, class and style. Pixel Perfection? Go for it!
|
||||
</StyledCardDescription>
|
||||
</StyledSectionCard>
|
||||
|
||||
<StyledSectionCard>
|
||||
<StyledCardIcon>
|
||||
<HiLightningBolt size={50} color="#F5E027" />
|
||||
</StyledCardIcon>
|
||||
<StyledCardTitle>LIVE</StyledCardTitle>
|
||||
<StyledCardDescription>
|
||||
What good is a powerful table if that super hip designer you just
|
||||
hired can't work their UI magic on it? TanStack Table is headless by
|
||||
design, which means 100% control down to the very smallest HTML tag,
|
||||
component, class and style. Pixel Perfection? Go for it!
|
||||
</StyledCardDescription>
|
||||
</StyledSectionCard>
|
||||
</StyledFeaturesSection>
|
||||
</StyledHome>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user