mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-12 19:02:53 +08:00
feat: improve responsivebility
This commit is contained in:
AykutSarac
parent
3032987904
commit
b96eea8a00
@ -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.Col span={{ base: 12, sm: 6 }}>
|
||||
<Grid gutter={24} mt={50} mb={150} mx="auto">
|
||||
<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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -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'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'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'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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user