From 80c82e25c9fbc2a1a79e3e04e1fdc28081190825 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Sat, 27 Jul 2024 13:05:56 +0300 Subject: [PATCH] feat: update landing --- src/containers/Landing/FAQ.tsx | 5 + src/containers/Landing/Features.tsx | 12 +- src/containers/Landing/HeroPreview.tsx | 5 +- src/containers/Landing/HeroSection.tsx | 121 +++++++----- src/containers/Landing/PremiumVsFree.tsx | 13 +- src/layout/Layout.tsx | 5 +- src/layout/Navbar.tsx | 27 ++- src/modules/GraphView/index.tsx | 62 +++--- src/pages/pricing.tsx | 237 ++++------------------- 9 files changed, 187 insertions(+), 300 deletions(-) diff --git a/src/containers/Landing/FAQ.tsx b/src/containers/Landing/FAQ.tsx index decc5ff..121f9bd 100644 --- a/src/containers/Landing/FAQ.tsx +++ b/src/containers/Landing/FAQ.tsx @@ -30,6 +30,11 @@ const Questions = [ title: "Can I export the generated graphs?", content: "Yes, you can export the generated graphs as PNG, JPEG, or SVG files.", }, + { + title: "How to use VS Code extension?", + content: + "You can use the VS Code extension to visualize JSON data directly in your editor. Install the extension from the VS Code marketplace and follow the instructions at extension's page.", + }, ]; export const FAQ = () => { diff --git a/src/containers/Landing/Features.tsx b/src/containers/Landing/Features.tsx index 8632e2d..5f09ad8 100644 --- a/src/containers/Landing/Features.tsx +++ b/src/containers/Landing/Features.tsx @@ -58,7 +58,7 @@ export const Features = () => { - + Real-time Visualization @@ -77,7 +77,7 @@ export const Features = () => { - + Simple @@ -96,7 +96,7 @@ export const Features = () => { - + Generate @@ -116,7 +116,7 @@ export const Features = () => { - + Customizable @@ -136,7 +136,7 @@ export const Features = () => { - + Privacy First @@ -156,7 +156,7 @@ export const Features = () => { - + Advanced Features diff --git a/src/containers/Landing/HeroPreview.tsx b/src/containers/Landing/HeroPreview.tsx index 3cd8841..44f70ea 100644 --- a/src/containers/Landing/HeroPreview.tsx +++ b/src/containers/Landing/HeroPreview.tsx @@ -5,6 +5,7 @@ import styled from "styled-components"; const StyledPreviewWrapper = styled.div` margin: 0 auto; position: relative; + padding: 5rem 0; `; export const HeroPreview = () => { @@ -54,13 +55,13 @@ export const HeroPreview = () => { onChange={setSelectedFeature} orientation="vertical" withItemsBorders={false} - color="grape" bg="transparent" + color="orange.7" size="lg" visibleFrom="sm" styles={{ control: { - background: "#8f8f8f52", + background: "rgba(168, 168, 168, 0.2)", borderRadius: "4px", }, root: { diff --git a/src/containers/Landing/HeroSection.tsx b/src/containers/Landing/HeroSection.tsx index 1c75d07..3823860 100644 --- a/src/containers/Landing/HeroSection.tsx +++ b/src/containers/Landing/HeroSection.tsx @@ -1,11 +1,42 @@ import React from "react"; -import { Stack, Flex, Badge, Button } from "@mantine/core"; +import { Manrope } from "next/font/google"; +import { Stack, Flex, Badge, Button, Text } from "@mantine/core"; import styled from "styled-components"; import { MdChevronRight } from "react-icons/md"; +const manrope = Manrope({ + subsets: ["latin-ext"], +}); + const StyledHeroSection = styled.main` position: relative; + &:before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + image-rendering: pixelated; + -webkit-mask-image: linear-gradient(to bottom, transparent, 20%, white, 80%, transparent); + mask-image: linear-gradient(to bottom, transparent, 20%, white, 80%, transparent); + --line-color-1: #f5f5f5; + --line-color-2: #f8f8f8; + 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; + } + @media only screen and (max-width: 1240px) { flex-direction: column; } @@ -13,23 +44,15 @@ const StyledHeroSection = styled.main` const StyledHeroTitle = styled.h1` position: relative; - font-size: 2rem; - font-weight: 600; + font-size: 2.2rem; + font-weight: 800; display: inline; color: #272727; width: fit-content; - line-height: 1.2; - letter-spacing: -1px; + line-height: 1.12; + letter-spacing: -0.02em; max-width: 30rem; - - span { - display: inline-block; - white-space: nowrap; - padding: 0 0.5rem; - color: white; - background: black; - transform: rotate(-1.5deg); - } + font-family: ${manrope.style.fontFamily}; @media only screen and (min-width: 576px) { font-size: 3.2rem; @@ -42,32 +65,31 @@ const StyledHeroTitle = styled.h1` } @media only screen and (min-width: 1400px) { - font-size: 4rem; - max-width: 48rem; + font-size: 4.2rem; + max-width: 50rem; } `; const StyledHeroText = styled.p` - font-size: 1.2rem; + font-size: 1rem; color: #626262; font-weight: 500; - max-width: 100%; - min-width: 400px; + max-width: 75%; margin-top: 1rem; text-align: center; strong { font-weight: 500; - color: #0073ff; + color: #be7d1c; } @media only screen and (min-width: 576px) { - font-size: 1.3rem; + font-size: 1.15rem; max-width: 80%; } @media only screen and (min-width: 1400px) { - font-size: 1.2rem; + font-size: 1.3rem; max-width: 60%; } `; @@ -78,7 +100,7 @@ const StyledHeroSectionBody = styled.div` flex-wrap: wrap; align-items: center; justify-content: center; - padding: 9rem 10%; + padding: 7rem 10%; overflow: hidden; text-align: center; gap: 60px; @@ -95,10 +117,7 @@ export const HeroSection = () => { - - Convert any JSON into - interactive graphs - + Visualize JSON into interactive graphs The best JSON viewer tool to visualize, format and{" "} modify. @@ -120,23 +139,37 @@ export const HeroSection = () => { TOML - - + + + + + + No registration needed. + diff --git a/src/containers/Landing/PremiumVsFree.tsx b/src/containers/Landing/PremiumVsFree.tsx index b700e6c..0808319 100644 --- a/src/containers/Landing/PremiumVsFree.tsx +++ b/src/containers/Landing/PremiumVsFree.tsx @@ -45,10 +45,10 @@ export const PremiumVsFree = () => { }} radius="xl" mx="auto" - mb="-16.5rem" + mb="-18rem" style={{ textAlign: "center", - background: "linear-gradient(rgb(33, 148, 87) 40%, rgb(255, 255, 255) 90%)", + background: "linear-gradient(rgb(207, 116, 3) 40%, rgb(255, 255, 255) 90%)", }} > { xs: 16, }} maw={{ - base: "80%", - sm: "70%", + base: "60%", + sm: "50%", }} c="gray.2" mb={60} > - Designed to help you navigate through your data with ease. <br /> - The editor provides a clean and intuitive interface that allows you to focus on what - matters most: your data. + Designed to help you navigate through your data with ease. <br /> Smaller, faster, and + more efficient than ever before. </Text> </Paper> diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx index f850b96..2832111 100644 --- a/src/layout/Layout.tsx +++ b/src/layout/Layout.tsx @@ -10,8 +10,9 @@ const inter = Inter({ }); const StyledLayoutWrapper = styled.div` - background-image: radial-gradient(#ededed 2px, #ffffff 2px); - background-size: 40px 40px; + background: #fff; + /* background-image: radial-gradient(#ededed 2px, #ffffff 2px); */ + /* background-size: 40px 40px; */ font-family: ${inter.style.fontFamily}; `; diff --git a/src/layout/Navbar.tsx b/src/layout/Navbar.tsx index aca63c3..e57d7d5 100644 --- a/src/layout/Navbar.tsx +++ b/src/layout/Navbar.tsx @@ -6,6 +6,7 @@ import { JSONCrackLogo } from "./JsonCrackLogo"; const StyledNavbarWrapper = styled.div` z-index: 3; + padding-top: 1rem; transition: background 0.2s ease-in-out; `; @@ -14,7 +15,7 @@ const StyledNavbar = styled.nav` justify-content: space-between; align-items: center; width: 100%; - max-width: 1157px; + max-width: 1200px; margin: 0 auto; padding: 12px 24px; background: rgba(255, 255, 255, 0.1); @@ -53,10 +54,10 @@ export const Navbar = () => { href="/#pricing" variant="subtle" color="black" - radius="md" + radius="sm" size="sm" ml={50} - fw={400} + fw={500} > Pricing </Button> @@ -66,9 +67,9 @@ export const Navbar = () => { target="_blank" variant="subtle" color="black" - radius="md" + radius="sm" size="sm" - fw={400} + fw={500} > VS Code </Button> @@ -78,9 +79,9 @@ export const Navbar = () => { href="/docs" variant="subtle" color="black" - radius="md" + radius="sm" size="sm" - fw={400} + fw={500} > Docs </Button> @@ -90,9 +91,9 @@ export const Navbar = () => { href="/#faq" variant="subtle" color="black" - radius="md" + radius="sm" size="sm" - fw={400} + fw={500} > FAQ </Button> @@ -102,21 +103,19 @@ export const Navbar = () => { variant="default" component="a" href="https://app.jsoncrack.com/sign-in" - radius="md" + radius="sm" visibleFrom="sm" size="md" - fw={600} > Sign in </Button> <Button component="a" - color="brightBlue" + color="orange" href="/editor" - radius="md" + radius="sm" visibleFrom="sm" size="md" - fw={600} > Editor </Button> diff --git a/src/modules/GraphView/index.tsx b/src/modules/GraphView/index.tsx index b337605..e701a74 100644 --- a/src/modules/GraphView/index.tsx +++ b/src/modules/GraphView/index.tsx @@ -198,36 +198,38 @@ export const GraphView = ({ isWidget = false }: GraphProps) => { > <GraphCanvas isWidget={isWidget} /> </Space> - <Dialog - opened={!isDialogClosed} - size="lg" - radius="md" - withBorder - position={{ - right: 15, - bottom: 40, - }} - onClose={() => setDialogClosed(true)} - > - <Text size="sm" fw={500}> - Try the powerful Premium editor for larger graphs and advanced features with money-back - guarantee. - </Text> - <Group justify="right" mt="sm"> - <Button variant="default" onClick={() => setDialogClosed(true)}> - Close - </Button> - <Button - color="green" - onClick={() => { - setVisible("upgrade")(true); - setDialogClosed(true); - }} - > - Explore - </Button> - </Group> - </Dialog> + {!isWidget && ( + <Dialog + opened={!isDialogClosed} + size="lg" + radius="md" + withBorder + position={{ + right: 15, + bottom: 40, + }} + onClose={() => setDialogClosed(true)} + > + <Text size="sm" fw={500}> + Try the powerful Premium editor for larger graphs and advanced features with + money-back guarantee. + </Text> + <Group justify="right" mt="sm"> + <Button variant="default" onClick={() => setDialogClosed(true)}> + Close + </Button> + <Button + color="green" + onClick={() => { + setVisible("upgrade")(true); + setDialogClosed(true); + }} + > + Explore + </Button> + </Group> + </Dialog> + )} </StyledEditorWrapper> </> ); diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx index c47d65f..2884eca 100644 --- a/src/pages/pricing.tsx +++ b/src/pages/pricing.tsx @@ -10,14 +10,13 @@ import { Paper, SegmentedControl, Center, - Badge, // ThemeIcon, + Badge, Tooltip, Anchor, } from "@mantine/core"; import styled from "styled-components"; import { AiOutlineInfoCircle } from "react-icons/ai"; -import { IoIosCheckmarkCircle } from "react-icons/io"; -import { IoCheckmarkCircle, IoCloseCircle } from "react-icons/io5"; +import { FaCheck, FaXmark } from "react-icons/fa6"; import { VscArrowRight, VscLinkExternal } from "react-icons/vsc"; import Layout from "src/layout/Layout"; import { gaEvent } from "src/lib/utils/gaEvent"; @@ -35,30 +34,13 @@ export const purchaseLinks = { "https://jsoncrack.lemonsqueezy.com/checkout/buy/577928ea-fb09-4076-9307-3e5931b35ad0?desc=0&enabled=82417", }; -const StyledPaper = styled(Paper)<{ $highlight?: boolean } & any>` +const StyledPaper = styled(Paper)` padding: 1.5em; width: 350px; border-radius: 4px; border: 2px solid #e9e9e9; - ${({ $highlight }) => $highlight && "border: 3px solid #28c417;"} background: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - - ${({ $highlight }) => - $highlight && - ` - &::before { - content: "Recommended"; - background: #28c417; - position: absolute; - transform: translate(-27px, -61px); - font-weight: 500; - color: white; - padding: 6px 8px; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - } - `} `; export const PricingCards = () => { @@ -83,8 +65,8 @@ export const PricingCards = () => { label: ( <Flex align="center" gap="xs"> Annual{" "} - <Badge radius="sm" variant="light" color="green"> - {PRICING.getAnnualSave()}% OFF + <Badge radius="sm" variant="light" color="orange"> + Save {PRICING.getAnnualSave()}% </Badge> </Flex> ), @@ -109,125 +91,7 @@ export const PricingCards = () => { }} mx="auto" > - {/* <StyledPaper> - <Flex justify="space-between"> - <Stack gap="0"> - <Text fw={500} size="xl" c="black"> - Partner - </Text> - - <ThemeIcon variant="transparent" size={59}> - <PiChats color="black" size={50} /> - </ThemeIcon> - <Text fz="xs" c="gray.7"> - Contact us for custom pricing - </Text> - </Stack> - </Flex> - <Button - component="a" - color="green" - onClick={() => gaEvent("Pricing", "click partner plan")} - href="mailto:contact@jsoncrack.com" - target="_blank" - size="lg" - radius="md" - fullWidth - my="md" - rightSection={<VscArrowRight />} - > - Contact Us - </Button> - <Text mt="xs" fz="xs" c="dimmed"> - Integrate JSON Crack into your applications and websites. - </Text> - <Flex direction="column" justify="space-between"> - <List - spacing="md" - size="sm" - mt="xs" - c="black" - center - icon={<IoIosCheckmarkCircle color="green" size="20" />} - > - <List.Item> - <Tooltip - color="blue" - label="Integrate premium graph visualization into your own website/apps using iframe" - maw={350} - multiline - withArrow - > - <Text - c="gray.7" - fw={600} - fz="sm" - style={{ textDecoration: "underline", textDecorationStyle: "dashed" }} - > - JSON Crack Premium Widget - </Text> - </Tooltip> - </List.Item> - <List.Item> - <Text c="gray.7" fw={600} fz="sm"> - 1 Domain / Plan - </Text> - </List.Item> - <List.Item> - <Tooltip - color="blue" - label="Listen for events like node click, hover, center etc. Display your own UI" - maw={350} - multiline - withArrow - > - <Text - c="gray.7" - fw={600} - fz="sm" - style={{ textDecoration: "underline", textDecorationStyle: "dashed" }} - > - Events API - </Text> - </Tooltip> - </List.Item> - <List.Item> - <Tooltip - color="blue" - label="Customize the look and feel of the editor matching with your own branding" - maw={350} - multiline - withArrow - > - <Text - c="gray.7" - fw={600} - fz="sm" - style={{ textDecoration: "underline", textDecorationStyle: "dashed" }} - > - Custom Theming - </Text> - </Tooltip> - </List.Item> - <List.Item> - <Text c="gray.7" fw={600} fz="sm"> - White Labeling - </Text> - </List.Item> - <List.Item> - <Text c="gray.7" fw={600} fz="sm"> - Onboarding and engineering support - </Text> - </List.Item> - <List.Item> - <Text c="gray.7" fw={600} fz="sm"> - High-priority customer support - </Text> - </List.Item> - </List> - </Flex> - </StyledPaper> */} - <StyledPaper $highlight> + <StyledPaper> <Flex justify="space-between"> <Stack gap="0"> <Flex align="center"> @@ -236,12 +100,12 @@ export const PricingCards = () => { </Text> {!isMonthly && ( <Badge - fw={500} - size="lg" + fw={600} + size="md" variant="light" - c="#41B619" - radius="md" - color="green" + c="orange" + radius="sm" + color="orange" ml="sm" > SAVE {PRICING.getAnnualSave()}% @@ -264,7 +128,7 @@ export const PricingCards = () => { </Flex> <Button component="a" - color="#2ba80f" + color="orange" onClick={() => gaEvent("Pricing", "click upgrade premium")} href={isMonthly ? purchaseLinks.monthly : purchaseLinks.annual} target="_blank" @@ -274,19 +138,19 @@ export const PricingCards = () => { my="md" rightSection={<VscArrowRight />} > - Get Started + Upgrade </Button> <Text mt="xs" fz="xs" c="dimmed"> - Advanced features, better performance and optimized user interface. + Remake version with advanced features, better performance and smooth user interface. </Text> <Flex direction="column" justify="space-between"> <List - spacing="md" + spacing="sm" size="sm" mt="xs" c="black" center - icon={<IoCheckmarkCircle color="green" size="20" />} + icon={<FaCheck size="18" color="#E8580C" />} > <List.Item> <Tooltip @@ -306,7 +170,7 @@ export const PricingCards = () => { textUnderlineOffset: "2px", }} > - Large data support + Larger data support </Text> </Tooltip> </List.Item> @@ -328,36 +192,19 @@ export const PricingCards = () => { textUnderlineOffset: "2px", }} > - Compact Graphs & High Performance + Compact and Fast Visualization </Text> </Tooltip> </List.Item> <List.Item> <Text c="black" fw={500} fz="sm"> - Compare Data Differences + Compare data </Text> </List.Item> <List.Item> - <Tooltip - color="blue" - label="Click on a node at graph to update data on editor." - maw={350} - multiline - withArrow - > - <Text - c="black" - fw={500} - fz="sm" - style={{ - textDecoration: "underline", - textDecorationStyle: "dashed", - textUnderlineOffset: "2px", - }} - > - Edit Data on Graph - </Text> - </Tooltip> + <Text c="black" fw={500} fz="sm"> + Edit data on graph + </Text> </List.Item> <List.Item> <Text c="black" fw={500} fz="sm"> @@ -411,16 +258,16 @@ export const PricingCards = () => { Go to Editor </Button> <Text mt="xs" fz="xs" c="dimmed"> - Basic version of the editor with limited features. + Basic version of the editor with limited features, open-source. </Text> <Flex direction="column" justify="space-between"> <List - spacing="md" + spacing="sm" size="sm" mt="lg" c="black" center - icon={<IoIosCheckmarkCircle color="green" size="20" />} + icon={<FaCheck size="18" color="#E8580C" />} > <List.Item> <Tooltip @@ -478,28 +325,28 @@ export const PricingCards = () => { Store 25 documents </Text> </List.Item> - <List.Item icon={<IoCloseCircle color="gray" size={20} />}> - <Text c="gray.7" fw={500} fz="sm"> - Compact Visualization + <List.Item icon={<FaXmark color="gray" size={20} />}> + <Text c="gray.6" fw={500} fz="sm"> + Edit data on graph </Text> </List.Item> - <List.Item icon={<IoCloseCircle color="gray" size={20} />}> - <Text c="gray.7" fw={500} fz="sm"> - Compare Data - </Text> - </List.Item> - <List.Item icon={<IoCloseCircle color="gray" size={20} />}> - <Text c="gray.7" fw={500} fz="sm"> - Edit Data on Graph - </Text> - </List.Item> - <List.Item icon={<IoCloseCircle color="gray" size={20} />}> - <Text c="gray.7" fw={500} fz="sm"> + <List.Item icon={<FaXmark color="gray" size={20} />}> + <Text c="gray.6" fw={500} fz="sm"> AI-powered data filter </Text> </List.Item> - <List.Item icon={<IoCloseCircle color="gray" size={20} />}> - <Text c="gray.7" fw={500} fz="sm"> + <List.Item icon={<FaXmark color="gray" size={20} />}> + <Text c="gray.6" fw={500} fz="sm"> + Compact visualization + </Text> + </List.Item> + <List.Item icon={<FaXmark color="gray" size={20} />}> + <Text c="gray.6" fw={500} fz="sm"> + Compare data + </Text> + </List.Item> + <List.Item icon={<FaXmark color="gray" size={20} />}> + <Text c="gray.6" fw={500} fz="sm"> Customize graph colors </Text> </List.Item>