diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx deleted file mode 100644 index 51d589a..0000000 --- a/src/containers/Home/index.tsx +++ /dev/null @@ -1,309 +0,0 @@ -import React from "react"; -import dynamic from "next/dynamic"; -import Head from "next/head"; -import Link from "next/link"; -import Script from "next/script"; -import { Button } from "@mantine/core"; -import { AiOutlineRight, AiTwotoneStar } from "react-icons/ai"; -import { - HiCursorClick, - HiLightningBolt, - HiOutlineDownload, - HiOutlineSearchCircle, -} from "react-icons/hi"; -import { IoHeart } from "react-icons/io5"; -import { SiVisualstudiocode } from "react-icons/si"; -import vscDarkPlus from "react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus"; -import { CarbonAds } from "src/components/CarbonAds"; -import { Sponsors } from "src/components/Sponsors"; -import { baseURL } from "src/constants/data"; -import { TABS } from "src/constants/previewSection"; -import { Footer } from "src/layout/Footer"; -import { Navbar } from "src/layout/Navbar"; -import { Producthunt } from "src/layout/Producthunt"; -import * as Styles from "./styles"; - -const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), { - ssr: false, -}); - -const HeroSection = () => ( - - - JSON CRACK - - - Seamlessly visualize your JSON data{" "} - instantly into graphs. - - - - - - - - - - - - - -); - -const PreviewSection = () => { - const [currentTab, setCurrentTab] = React.useState(0); - const [loaded, setLoaded] = React.useState(false); - const widgetRef = React.useRef(null); - - React.useEffect(() => { - const eventFn = (event: MessageEvent) => { - if (event.source === widgetRef.current?.contentWindow) { - setLoaded(true); - } - }; - - window.addEventListener("message", eventFn, false); - return () => window.removeEventListener("message", eventFn); - }, []); - - React.useEffect(() => { - if (loaded && widgetRef.current) { - const message = { json: TABS[currentTab].json }; - widgetRef.current.contentWindow?.postMessage(message, "*"); - } - }, [currentTab, loaded]); - - return ( - - - - {TABS.map(tab => ( - setCurrentTab(tab.id)} - key={tab.id} - > - {tab.name} - - ))} - - - {TABS[currentTab].json} - - - - - - ); -}; - -const FeaturesSection = () => ( - - - - - - EASY-TO-USE - - We believe that powerful software doesn't have to be difficult to use. That's why - we've designed our app to be as intuitive and easy-to-use as possible. You can quickly - and easily load your JSON data and start exploring and analyzing it right away! - - - - - - - - SEARCH - - Have a huge file of values, keys or arrays? Worry no more, type in the keyword you are - looking for into search input and it will take you to each node with matching result - highlighting the line to understand better! - - - - - - - - DOWNLOAD - - Download the graph to your local machine and use it wherever you want, to your blogs, - website or make it a poster and paste to the wall. Who wouldn't want to see a JSON - Crack graph onto their wall, eh? - - - - - - - - LIVE - - With Microsoft's Monaco Editor which is also used by VS Code, easily edit your JSON and - directly view through the graphs. Also there's a JSON validator above of it to make - sure there is no type error. - - - -); - -const GitHubSection = () => ( - - -
-

- Looking to understand or explore some JSON? Just paste or upload to visualize it as a - graph with https://t.co/HlKSrhKryJ 😍
-
- Thanks to - @aykutsarach - ! pic.twitter.com/0LyPUL8Ezz -

- — GitHub (@github){" "} - - April 27, 2022 - -
{" "} - - - - Open Source Community - - At JSON Crack, we believe in the power of open source software and the communities that - support it. That's why we're proud to be part of the open source community and to - contribute to the development and growth of open source tools and technologies. -
-
As part of our commitment to the open source community, we've made our app - freely available to anyone who wants to use it, and we welcome contributions from anyone - who's interested in helping to improve it. Whether you're a developer, a data - scientist, or just someone who's passionate about open source, we'd love to have - you join our community and help us make JSON Crack the best it can be. -
-
So why not join us and become part of the JSON Crack open source community today? We - can't wait to see what we can accomplish together! - - - - -); - -const EmbedSection = () => ( - - - Embed Into Your Website - - JSON Crack provides users with the necessary code to embed the app into a website easily - using an iframe. This code can be easily copied and pasted into the desired location on the - website, allowing users to quickly and easily integrate JSON Crack into existing workflows. -
-
Once the app is embedded, users can use it to view and analyze JSON data directly on - the website. This can be useful for a variety of purposes, such as quickly checking the - structure of a JSON file or verifying the data contained within it. JSON Crack's - intuitive interface makes it easy to navigate and understand even complex JSON data, making - it a valuable tool for anyone working with JSON. - - - -
- -
- -); - -const SupportSection = () => ( - - - - Support JSON Crack at -
- Product Hunt - - - - - Affiliate - - - -); - -const SponsorSection = () => ( - -); - -const Home: React.FC = () => { - return ( - - - JSON Crack - Crack your data into pieces - - - - - - - - - -