GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

landing improvements

Browse Source
This commit is contained in:
AykutSarac 2024-08-21 11:44:26 +03:00
parent b50a9c2fc5
commit dcbec83aac
No known key found for this signature in database
7 changed files with 49 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/mesh.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 481 KiB

6
src/containers/Landing/HeroSection.tsx
View File

@ -131,13 +131,13 @@ export const HeroSection = () => {
radius="md"
fw="500"
>
Premium
Explore Premium
</Button>
</Flex>
<Flex gap="lg" wrap="wrap" justify="center" visibleFrom="xs">
<Button
component="a"
color="indigo"
color="#202842"
href="/editor"
size="lg"
radius="md"
@ -155,7 +155,7 @@ export const HeroSection = () => {
radius="md"
fw="500"
>
Premium
Explore Premium
</Button>
</Flex>
<Text ta="center" size="xs" c="gray">

2
src/containers/Landing/PremiumPreview.tsx
View File

@ -83,7 +83,7 @@ export const PremiumPreview = () => {
background: "transparent",
},
indicator: {
background: "#120F43",
background: "#000000",
},
label: {
color: "white",

33
src/containers/Landing/PremiumVsFree.tsx
View File

@ -1,9 +1,8 @@
import React from "react";
import Link from "next/link";
import { Title, Image, Container, Flex, Box, List, Button } from "@mantine/core";
import { Title, Image, Container, Flex, Box, Button, Text } from "@mantine/core";
import styled from "styled-components";
import { FaArrowRightLong } from "react-icons/fa6";
import { IoMdCheckmark } from "react-icons/io";
const StyledImageWrapper = styled.div`
flex: 1.8;
@ -13,7 +12,7 @@ const StyledImageWrapper = styled.div`
export const PremiumVsFree = () => {
return (
<Container p={30} bg="dark" id="premium" fluid component="section" my={120}>
<Container p={30} bg="#202842" id="premium" fluid component="section" my={120}>
<Container size="lg">
<Flex
gap="lg"
@ -36,28 +35,17 @@ export const PremiumVsFree = () => {
fw={600}
mb={20}
>
Explore Premium.
<Box pos="absolute" mt="-8px" maw="150px" w="100%">
Premium
<Box pos="absolute" mt="-6px" maw="150px" w="100%">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1418 125" fill="#ffbb55">
<path d="M1412.29 72.17c-11.04-5.78-20.07-14.33-85.46-25.24-22.37-3.63-44.69-7.56-67.07-11.04-167.11-22.06-181.65-21.24-304.94-30.56C888.78 1.39 822.57 1.1 756.44 0c-46.63-.11-93.27 1.56-139.89 2.5C365.5 13.55 452.86 7.68 277.94 23.15 202.57 33.32 127.38 45.01 52.07 55.69c-11.23 2.41-22.63 4.17-33.71 7.22C6.1 66.33 5.64 66.19 3.89 67.79c-7.99 5.78-2.98 20.14 8.72 17.5 33.99-9.47 32.28-8.57 178.06-29.66 4.26 4.48 7.29 3.38 18.42 3.11 13.19-.32 26.38-.53 39.56-1.12 53.51-3.81 106.88-9.62 160.36-13.95 18.41-1.3 36.8-3.12 55.21-4.7 23.21-1.16 46.43-2.29 69.65-3.4 120.28-2.16 85.46-3.13 234.65-1.52 23.42.99 1.57-.18 125.72 6.9 96.61 8.88 200.92 27.94 295.42 46.12 40.87 7.91 116.67 23.2 156.31 36.78 3.81 1.05 8.28-.27 10.51-3.58 3.17-3.72 2.66-9.7-.78-13.13-3.25-3.12-8.14-3.44-12.18-5.08-17.89-5.85-44.19-12.09-63.67-16.56l26.16 3.28c23.02 3.13 46.28 3.92 69.34 6.75 10.8.96 25.43 1.81 34.34-4.39 2.26-1.54 4.86-2.75 6.21-5.27 2.76-4.59 1.13-11.06-3.59-13.68ZM925.4 23.77c37.64 1.4 153.99 10.85 196.64 14.94 45.95 5.51 91.89 11.03 137.76 17.19 24.25 4.77 74.13 11.21 101.72 18.14-11.87-1.15-23.77-1.97-35.65-3.06-133.46-15.9-266.8-33.02-400.47-47.21Z"></path>
</svg>
</Box>
</Title>
<List
fz="lg"
visibleFrom="md"
spacing="4"
c="gray.3"
icon={<IoMdCheckmark color="orange" />}
>
<List.Item>Refined user interface</List.Item>
<List.Item>Supports larger data</List.Item>
<List.Item>Customizable color theme</List.Item>
<List.Item>Compare data on graphs</List.Item>
<List.Item>Edit directly on graphs</List.Item>
<List.Item>AI-powered assistant</List.Item>
<List.Item>Everything is faster and more...</List.Item>
</List>
<Text c="gray.5" fz="lg" mb="xl">
Upgrade for larger uploads, refined editor, faster experience, advanced tools and
more.
</Text>
<Button
component={Link}
href="/premium"
@ -65,14 +53,15 @@ export const PremiumVsFree = () => {
display="block"
w="fit-content"
miw={200}
color="orange"
variant="white"
color="gray"
size="lg"
mt="xl"
rightSection={<FaArrowRightLong />}
radius="xl"
fz="md"
>
See all features
Explore More
</Button>
</Box>

8
src/layout/Navbar.tsx
View File

@ -67,7 +67,6 @@ export const Navbar = () => {
color="gray"
size="md"
radius="md"
fw={600}
>
Pricing
</Button>
@ -79,14 +78,12 @@ export const Navbar = () => {
color="gray"
size="md"
radius="md"
fw={600}
>
VS Code
</Button>
<Button
component={Link}
prefetch={false}
fw={600}
href="/affiliates"
variant="subtle"
color="gray"
@ -105,19 +102,18 @@ export const Navbar = () => {
visibleFrom="sm"
size="md"
radius="md"
fw={600}
>
Log in
</Button>
<Button
radius="md"
component="a"
color="indigo"
color="#202842"
href="/editor"
visibleFrom="sm"
size="md"
>
Editor
Free editor
</Button>
</Right>
</StyledNavbar>

45
src/pages/premium.tsx
View File

@ -81,7 +81,7 @@ interface FeatureItem {
const features: FeatureItem[] = [
{
title: "Larger Data",
description: "From 300KB to ~4MB upgraded data size.",
description: "From 300 KB to 4 MB upgraded data size.",
icon: (
<Text fz="sm" fw="500">
4 MB
@ -168,19 +168,21 @@ const Premium = () => {
<Layout>
<Container
pos="relative"
pt={100}
pb={220}
pt={60}
pb={180}
fluid
style={{
background:
"linear-gradient(15deg, #120f43, #0d0e3e, #0b0f39, #0a1034, #08102f, #071029, #051024, #040f1e)",
backgroundColor: "#1a0027",
backgroundImage: "url(./assets/mesh.webp)",
backgroundAttachment: "fixed",
backgroundSize: "cover",
}}
>
<Flex px="xl" justify="center" gap={60}>
<Box maw={600}>
<Title
order={1}
c="white"
c="gray.1"
fz={{
base: 38,
xs: 40,
@ -189,21 +191,21 @@ const Premium = () => {
Premium
</Title>
<Text
c="gray.3"
c="gray.2"
mt={32}
fz={{
base: 16,
xs: 20,
base: 14,
xs: 18,
}}
>
Faster, more powerful, and more visually stunning.
Redesigned for a smoother, faster, and more powerful experience. New features save
time and effort.
</Text>
<Button
component="a"
href="#pricing"
mt="lg"
variant="white"
color="gray"
color="gray.2"
radius="md"
size="lg"
rightSection={<MdChevronRight size={30} />}
@ -227,7 +229,7 @@ const Premium = () => {
alt="hero"
w="300"
h="200"
opacity={0.02}
opacity={0.01}
visibleFrom="sm"
/>
</Flex>
@ -237,7 +239,12 @@ const Premium = () => {
component="section"
id="features"
fluid
bg="radial-gradient(58.11% 44.54% at 51.59% -9.61%, rgb(180, 176, 254) 0%, rgb(54, 50, 133) 22.92%, rgb(17, 13, 91) 42.71%, rgb(5, 3, 39) 88.54%)"
style={{
backgroundColor: "#1a0027",
backgroundImage: "url(./assets/mesh.webp)",
backgroundAttachment: "fixed",
backgroundSize: "cover",
}}
my={120}
py={40}
>
@ -248,11 +255,11 @@ const Premium = () => {
xs: 36,
}}
order={2}
c="white"
c="gray.4"
>
Built for everyone.
</Title>
<Text c="gray.3" fz="xl" mb={40}>
<Text c="gray.6" fz="xl" mb={40}>
Zero technical knowledge required.
</Text>
<SimpleGrid
@ -269,10 +276,10 @@ const Premium = () => {
<ThemeIcon radius="xl" size="xl" variant="light" color={feature.color}>
{feature.icon}
</ThemeIcon>
<Title ta="center" c="white" order={3}>
<Title ta="center" c="gray.4" order={3}>
{feature.title}
</Title>
<Text c="gray.3">{feature.description}</Text>
<Text c="gray.5">{feature.description}</Text>
</Flex>
</StyledFeatureCard>
))}
@ -361,7 +368,7 @@ const Premium = () => {
component="a"
href={getUpgradeLink()}
target="_blank"
color="#120F43"
color="#2a0f43"
fullWidth
mt="xl"
size="xl"

12
src/pages/pricing.tsx
View File

@ -257,6 +257,12 @@ export const PricingCards = () => {
</Flex>
</StyledPaper>
</Box>
<Flex pt="sm" c="dimmed" justify="center" align="center" gap={4}>
<AiOutlineInfoCircle />
<Text size="sm">
Payment email must be matching with the account registered to the JSON Crack.
</Text>
</Flex>
</Stack>
);
};
@ -270,12 +276,6 @@ const Pricing = () => {
</Head>
<Layout>
<PricingCards />
<Flex pt="sm" c="dimmed" justify="center" align="center" gap={4}>
<AiOutlineInfoCircle />
<Text size="sm">
Payment email must be matching with the account registered to the JSON Crack.
</Text>
</Flex>
</Layout>
</>
);