feat: improve responsivebility

src/containers/Landing/Features.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, Title, Grid, Paper, Badge, Image, Container } from "@mantine/core";
+import { Text, Title, Grid, Paper, Badge, Image, Container, rem } from "@mantine/core";
 import styled from "styled-components";
 
 const StyledPaper = styled.div`
@@ -27,7 +27,18 @@ const StyledPaper = styled.div`
 
 export const Features = () => {
   return (
-    <Container pos="relative" component="section" id="features" fluid my={150}>
+    <Container
+      pos="relative"
+      component="section"
+      id="features"
+      px={{
+        sm: rem(10),
+        md: rem(80),
+      }}
+      w="90%"
+      fluid
+      my={150}
+    >
       <Title
         c="black"
         order={2}
@@ -63,13 +74,13 @@ export const Features = () => {
         editor. Make smarter decisions faster.
       </Text>
 
-      <Grid w="80%" gutter={24} mt={50} mb={150} mx="auto">
+      <Grid gutter={24} mt={50} mb={150} mx="auto">
-        <Grid.Col span={{ base: 12, sm: 6 }}>
+        <Grid.Col span={{ base: 12, xs: 6 }}>
           <Paper
             pos="relative"
             p={30}
             shadow="sm"
-            radius="sm"
+            radius="md"
             w="100%"
             h={{ sm: 300, md: 370 }}
             withBorder
@@ -96,11 +107,11 @@ export const Features = () => {
             </StyledPaper>
           </Paper>
         </Grid.Col>
-        <Grid.Col span={{ base: 12, sm: 6 }}>
+        <Grid.Col span={{ base: 12, xs: 6 }}>
           <Paper
             p={30}
             shadow="sm"
-            radius="sm"
+            radius="md"
             w="100%"
             h={{ sm: 300, md: 370 }}
             bg="white"
@@ -133,11 +144,11 @@ export const Features = () => {
             </StyledPaper>
           </Paper>
         </Grid.Col>
-        <Grid.Col span={{ base: 12, sm: 6 }}>
+        <Grid.Col span={{ base: 12, xs: 6 }}>
           <Paper
             p={30}
             shadow="sm"
-            radius="sm"
+            radius="md"
             w="100%"
             h={{ sm: 300, md: 370 }}
             withBorder
@@ -209,11 +220,11 @@ export const Features = () => {
             </StyledPaper>
           </Paper>
         </Grid.Col>
-        <Grid.Col span={{ base: 12, sm: 6 }}>
+        <Grid.Col span={{ base: 12, xs: 6 }}>
           <Paper
             p={30}
             shadow="sm"
-            radius="sm"
+            radius="md"
             w="100%"
             h={{ sm: 300, md: 370 }}
             withBorder

src/containers/Landing/HeroSection.tsx

@@ -4,10 +4,32 @@ import styled from "styled-components";
 import { MdChevronRight } from "react-icons/md";
 import { gaEvent } from "src/lib/utils/gaEvent";
 
+const StyledHeroSection = styled.main`
+  position: relative;
+
+  /* &:before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    background-image: radial-gradient(#0000002a 1px, transparent 1px);
+    background-size: 15px 15px;
+    background-position: top center;
+    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);
+  } */
+
+  @media only screen and (max-width: 1240px) {
+    flex-direction: column;
+  }
+`;
+
 const StyledHeroTitle = styled.h1`
   position: relative;
   font-size: 2rem;
-  font-weight: 600;
+  font-weight: 800;
   display: inline;
   color: #272727;
   width: fit-content;
@@ -57,28 +79,6 @@ const StyledHeroText = styled.p`
   }
 `;
 
-const StyledHeroSection = styled.main`
-  position: relative;
-
-  /* &:before {
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    background-image: radial-gradient(#0000002a 1px, transparent 1px);
-    background-size: 15px 15px;
-    background-position: top center;
-    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);
-  } */
-
-  @media only screen and (max-width: 1240px) {
-    flex-direction: column;
-  }
-`;
-
 const StyledHeroSectionBody = styled.div`
   position: relative;
   display: flex;
@@ -94,7 +94,7 @@ const StyledHeroSectionBody = styled.div`
   min-height: 40vh;
 
   @media only screen and (max-width: 768px) {
-    padding: 3em 16px;
+    padding: 6em 16px;
   }
 `;
 

src/containers/Landing/PremiumVsFree.tsx

@@ -141,11 +141,11 @@ export const PremiumVsFree = () => {
         <Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
           <Flex align="center" gap={8} mb={16}>
             <FaBolt color="orange" size={28} />
-            <Text c="gray.8" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+            <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
               High Performance
             </Text>
           </Flex>
-          <Text c="gray.6" fz={14}>
+          <Text c="gray.7" fz={14}>
             Designed to handle large datasets with ease. It&apos;s optimized for performance and
             speed; currently supporting up to 4MB of data.
           </Text>
@@ -153,11 +153,11 @@ export const PremiumVsFree = () => {
         <Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
           <Flex align="center" gap={8} mb={16}>
             <FaExpand color="blue" size={28} />
-            <Text c="gray.8" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+            <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
               Clean & Focused
             </Text>
           </Flex>
-          <Text c="gray.6" fz={14}>
+          <Text c="gray.7" fz={14}>
             Compared to the free version, the premium version creates 50% less nodes on the graph
             and helps you to focus on what matters most.
           </Text>
@@ -165,11 +165,11 @@ export const PremiumVsFree = () => {
         <Grid.Col span={{ base: 12, xs: 6, md: 4 }} visibleFrom="xs">
           <Flex align="center" gap={8} mb={16}>
             <FaLifeRing color="#FF6B00" size={28} />
-            <Text c="gray.8" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+            <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
               Quick Support
             </Text>
           </Flex>
-          <Text c="gray.6" fz={14}>
+          <Text c="gray.7" fz={14}>
             Get quick support from our team. We&apos;re here to help you with any issues or
             questions you may have. Usual response time is within 24 hours.
           </Text>
@@ -177,11 +177,11 @@ export const PremiumVsFree = () => {
         <Grid.Col span={{ base: 12, xs: 6, md: 4 }} visibleFrom="xs">
           <Flex align="center" gap={8} mb={16}>
             <FaParachuteBox color="#00848C" size={28} />
-            <Text c="gray.8" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+            <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
               Always Improving
             </Text>
           </Flex>
-          <Text c="gray.6" fz={14}>
+          <Text c="gray.7" fz={14}>
             Have an idea? We&apos;re always looking to improve JSON Crack. We take your feedback
             seriously and are constantly working on new features.
           </Text>
@@ -189,11 +189,11 @@ export const PremiumVsFree = () => {
         <Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
           <Flex align="center" gap={8} mb={16}>
             <FaShapes color="#A854A5" size={28} />
-            <Text c="gray.8" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+            <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
               Advanced Features
             </Text>
           </Flex>
-          <Text c="gray.6" fz={14}>
+          <Text c="gray.7" fz={14}>
             Unlock advanced features such as data comparison, direct editing on the graph,
             customized themes and compact visualization style.
           </Text>
@@ -201,11 +201,11 @@ export const PremiumVsFree = () => {
         <Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
           <Flex align="center" gap={8} mb={16}>
             <FaShieldHalved color="black" size={28} />
-            <Text c="gray.8" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
+            <Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
               Privacy First
             </Text>
           </Flex>
-          <Text c="gray.6" fz={14}>
+          <Text c="gray.7" fz={14}>
             JSON Crack does not store your data unless you upload it manually. Your data remains
             completely private.
           </Text>