From c0afbf8f2d84c8adce6a0d2cf4914461f79eebd4 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Sat, 11 Jun 2022 21:58:04 +0300 Subject: [PATCH 1/3] initial commit --- src/constants/globalStyle.ts | 7 +- src/pages/_document.tsx | 2 +- src/pages/index.bin.tsx | 138 ++++++++++++++ src/pages/index.tsx | 350 +++++++++++++++++++++-------------- 4 files changed, 357 insertions(+), 140 deletions(-) create mode 100644 src/pages/index.bin.tsx diff --git a/src/constants/globalStyle.ts b/src/constants/globalStyle.ts index 3e38c296a1c..8dc65a6e2b4 100644 --- a/src/constants/globalStyle.ts +++ b/src/constants/globalStyle.ts @@ -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 { diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 2f41940220d..38acd721c6c 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -52,7 +52,7 @@ class MyDocument extends Document { crossOrigin="anonymous" /> diff --git a/src/pages/index.bin.tsx b/src/pages/index.bin.tsx new file mode 100644 index 00000000000..091cf6109b6 --- /dev/null +++ b/src/pages/index.bin.tsx @@ -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 ( + + + JSON Visio - Directly onto graphs + + + + + + Visualize your JSON into interactive graphs. + + + Simple visualization tool for your JSON data. No forced structure, + paste your JSON and view it instantly. + + + + graphs + + + + + No Rules + + 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. + + + + preview + + + + + Import File + + Have an existing file for your data? No worries, directly import it + into our editor without having to scroll through all of it! + + + + preview + + + + + Supported by Open Source + + We do our work at open source. Help us improve by contributing to + JSON + Visio at GitHub! + + + + preview + + +