landing improvements

src/containers/Landing/HeroSection.tsx

@@ -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">

src/containers/Landing/PremiumPreview.tsx

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

src/containers/Landing/PremiumVsFree.tsx

@@ -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.
+              Premium
-              <Box pos="absolute" mt="-8px" maw="150px" w="100%">
+              <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
+            <Text c="gray.5" fz="lg" mb="xl">
-              fz="lg"
+              Upgrade for larger uploads, refined editor, faster experience, advanced tools and
-              visibleFrom="md"
+              more.
-              spacing="4"
+            </Text>
-              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>
             <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>
 

src/layout/Navbar.tsx

@@ -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>

src/pages/premium.tsx

@@ -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}
+          pt={60}
-          pb={220}
+          pb={180}
           fluid
           style={{
-            background:
+            backgroundColor: "#1a0027",
-              "linear-gradient(15deg, #120f43, #0d0e3e, #0b0f39, #0a1034, #08102f, #071029, #051024, #040f1e)",
+            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,
+                  base: 14,
-                  xs: 20,
+                  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.2"
-                color="gray"
                 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"

src/pages/pricing.tsx

@@ -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>
     </>
   );