diff --git a/src/containers/Landing/FAQ.tsx b/src/containers/Landing/FAQ.tsx index aca8ed4..decc5ff 100644 --- a/src/containers/Landing/FAQ.tsx +++ b/src/containers/Landing/FAQ.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Container, Title, Accordion, Text, List, Anchor } from "@mantine/core"; +import { Container, Title, Accordion } from "@mantine/core"; const Questions = [ { @@ -8,9 +8,8 @@ const Questions = [ "JSON Crack is an online data visualization app capable of visualizing data formats such as JSON, YAML, XML, CSV and more, into interactive graphs. It helps you to understand, analyze and debug your data easily. JSON Crack is designed for developers, data analysts, and anyone who works with structured data formats. It's also helpful for creating documentation and presentations for your teams/customers.", }, { - title: "Who can benefit from using JSON Crack?", - content: - "JSON Crack is perfect for developers, data analysts, or anyone who works with structured data formats like JSON, YAML, XML, and CSV. It's ideal for visualizing data structures, debugging complex data, and creating clear documentation and presentations for your team or clients.", + title: "What kind of data formats does are supported?", + content: "A wide range of data formats are supported including JSON, YAML, XML, CSV, and TOML.", }, { title: "Is my data secure with JSON Crack?", @@ -18,23 +17,18 @@ const Questions = [ "Absolutely! JSON Crack prioritizes your data privacy. When you paste your data into the editor, it's processed only on your device to create the visualization. Your data remains completely private and is never stored anywhere unless you choose to upload it manually.", }, { - title: "What are the advantages of the JSON Crack premium plan?", - content: ( - <> - The key features are: - - Expanded support for larger datasets - Compare data on graphs - Compact visualization style: see only what you need to - Searching is faster and smoother - Ask AI to filter your data - Direct data editing on the graphs & tree view - - - You may visit the pricing page for more details. - - - ), + title: "Can I customize the graph colors?", + content: + "Yes, you can customize the colors of the graph to match your brand or personal preferences as part of the premium plan.", + }, + { + title: "What size of data can I visualize?", + content: + "You can visualize data up to 300 KB in size with the free plan and up to 4 MB with premium plan. It might vary depending on the complexity of the data and your hardware.", + }, + { + title: "Can I export the generated graphs?", + content: "Yes, you can export the generated graphs as PNG, JPEG, or SVG files.", }, ]; diff --git a/src/containers/Landing/HeroPreview.tsx b/src/containers/Landing/HeroPreview.tsx index 83beb9a..70ee300 100644 --- a/src/containers/Landing/HeroPreview.tsx +++ b/src/containers/Landing/HeroPreview.tsx @@ -50,12 +50,12 @@ export const HeroPreview = () => { onChange={setSelectedFeature} orientation="vertical" withItemsBorders={false} - color="green" + color="grape" bg="transparent" size="lg" styles={{ control: { - background: "#67676714", + background: "#8f8f8f52", borderRadius: "4px", }, root: { @@ -69,8 +69,13 @@ export const HeroPreview = () => { w="100%" p={0} radius="md" - style={{ overflow: "hidden", border: "1px solid #d5d5d5" }} - shadow="md" + style={{ + overflow: "hidden", + border: "1px solid #c1c1c1", + outline: "1px solid #c1c1c1", + outlineOffset: "4px", + }} + shadow="xl" > { - Transform data into interactive graphs - Powerful editor to explore data visually. + + Convert any JSON into + interactive graphs + + + The best JSON viewer tool to visualize, format and{" "} + modify. + JSON @@ -124,9 +120,14 @@ export const HeroSection = () => { TOML + diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx index ede2c9c..01ceb8e 100644 --- a/src/layout/Footer.tsx +++ b/src/layout/Footer.tsx @@ -8,8 +8,8 @@ import { JSONCrackLogo } from "./JsonCrackLogo"; export const Footer = () => { return ( - - + + diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx index 583abde..f850b96 100644 --- a/src/layout/Layout.tsx +++ b/src/layout/Layout.tsx @@ -1,13 +1,18 @@ import React from "react"; +import { Inter } from "next/font/google"; import styled, { ThemeProvider } from "styled-components"; import { lightTheme } from "src/constants/theme"; import { Footer } from "./Footer"; import { Navbar } from "./Navbar"; +const inter = Inter({ + subsets: ["latin-ext"], +}); + const StyledLayoutWrapper = styled.div` - padding-bottom: 48px; - background-image: radial-gradient(#e6e6e6 1px, transparent 1px); - background-size: 20px 20px; + background-image: radial-gradient(#ededed 2px, #ffffff 2px); + background-size: 40px 40px; + font-family: ${inter.style.fontFamily}; `; const Layout = ({ children }: React.PropsWithChildren) => { diff --git a/src/layout/Navbar.tsx b/src/layout/Navbar.tsx index 76b9e39..c19acae 100644 --- a/src/layout/Navbar.tsx +++ b/src/layout/Navbar.tsx @@ -14,6 +14,7 @@ const StyledNavbar = styled.nav` justify-content: space-between; align-items: center; width: 100%; + max-width: 1157px; margin: 0 auto; padding: 12px 24px; background: rgba(255, 255, 255, 0.1); @@ -53,8 +54,9 @@ export const Navbar = () => { variant="subtle" color="black" radius="md" - size="md" - ml="lg" + size="sm" + ml={50} + fw={400} > Pricing @@ -65,7 +67,8 @@ export const Navbar = () => { variant="subtle" color="black" radius="md" - size="md" + size="sm" + fw={400} > VS Code @@ -76,7 +79,8 @@ export const Navbar = () => { variant="subtle" color="black" radius="md" - size="md" + size="sm" + fw={400} > Docs @@ -87,7 +91,8 @@ export const Navbar = () => { variant="subtle" color="black" radius="md" - size="md" + size="sm" + fw={400} > FAQ @@ -106,14 +111,14 @@ export const Navbar = () => { diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 2b08f72..0a999e6 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -44,13 +44,6 @@ const theme = createTheme({ radius: { lg: "12px", }, - components: { - Button: { - defaultProps: { - fw: 500, - }, - }, - }, }); const Toaster = dynamic(() => import("react-hot-toast").then(c => c.Toaster)); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7ef1e2d..4206398 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,7 +1,6 @@ import React from "react"; import type { GetStaticProps, InferGetStaticPropsType } from "next"; import Head from "next/head"; -import styled from "styled-components"; import { metaDescription } from "src/constants/landing"; import { FAQ } from "src/containers/Landing/FAQ"; import { Features } from "src/containers/Landing/Features"; @@ -12,19 +11,6 @@ import { PremiumVsFree } from "src/containers/Landing/PremiumVsFree"; import { Pricing } from "src/containers/Landing/Pricing"; import Layout from "src/layout/Layout"; -const StyledSectionWrapper = styled.div` - &:before { - position: absolute; - content: ""; - width: 100%; - height: 100%; - background-color: #ffffff; - -webkit-mask-image: linear-gradient(to bottom, transparent, 20%, white, 95%, transparent); - mask-image: linear-gradient(to bottom, transparent, 20%, white, 95%, transparent); - background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%); - } -`; - export const HomePage = ({ stars }: InferGetStaticPropsType) => { return ( @@ -35,10 +21,8 @@ export const HomePage = ({ stars }: InferGetStaticPropsType - - - - + +