style responsive design

src/constants/globalStyle.ts

@@ -23,17 +23,13 @@ const GlobalStyle = createGlobalStyle`
     font-weight: 400;
     font-size: 16px;
     height: 100%;
-
     background-color: #000000;
-    opacity: 1;
-    background-image: radial-gradient(#414141 0.5px, #000000 0.5px);
-    background-size: 10px 10px;
-
-    @media only screen and (min-width: 768px) {
-      background-color: #000000;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.22'%3E%3Ccircle fill='%23000000' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23110718' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23220e30' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23331447' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23441b5f' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23552277' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.3'%3E%3Ccircle fill='%23000000' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23110718' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23220e30' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23331447' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23441b5f' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23552277' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
       background-attachment: fixed;
       background-size: cover;
+
+    @media only screen and (max-width: 768px) {
+      background-position: right;
     }
   }
 

src/containers/Home/index.tsx

@@ -289,8 +289,10 @@ const SponsorSection = () => (
 const Footer = () => (
   <Styles.StyledFooter>
     <Styles.StyledFooterText>
-      © <img width="100" src="assets/icon.png" alt="icon" loading="lazy" />
-      {new Date().getFullYear()} - {pkg.version}
+      <img width="120" src="assets/icon.png" alt="icon" loading="lazy" />
+      <div>
+      © {new Date().getFullYear()} JSON Crack - {pkg.version}
+      </div>
     </Styles.StyledFooterText>
     <Styles.StyledIconLinks>
       <Styles.StyledNavLink

src/containers/Home/styles.tsx

@@ -4,6 +4,10 @@ import styled from "styled-components";
 export const StyledButtonWrapper = styled.div`
   display: flex;
   gap: 18px;
+
+  @media only screen and (max-width: 768px) {
+    display: none;
+  }
 `;
 
 export const StyledTwitterQuote = styled.div`
@@ -191,19 +195,14 @@ export const StyledSponsorButton = styled(Button)<{ isBlue?: boolean }>`
       color: white;
     }
   }
-
-  @media only screen and (max-width: 768px) {
-    display: ${({ isBlue }) => isBlue && "none"};
-  }
 `;
 
 export const StyledFeaturesSection = styled.section`
-  max-width: 60%;
-  margin: 0 auto;
-  padding: 0 3%;
-
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  margin: 0 auto;
+  max-width: 60%;
+  justify-content: center;
+  grid-template-columns: repeat(2, 40%);
   grid-template-rows: repeat(2, 1fr);
   grid-column-gap: 60px;
   grid-row-gap: 60px;
@@ -211,6 +210,7 @@ export const StyledFeaturesSection = styled.section`
   @media only screen and (max-width: 768px) {
     flex-direction: column;
     max-width: 80%;
+    display: flex;
   }
 `;
 
@@ -271,7 +271,7 @@ export const StyledSection = styled.section<{ reverse?: boolean }>`
     width: 100%;
   }
 
-  @media only screen and (max-width: 768px) {
+  @media only screen and (max-width: 1200px) {
     flex-direction: ${({ reverse }) => (reverse ? "column-reverse" : "column")};
     max-width: 80%;
   }
@@ -294,8 +294,7 @@ export const StyledSectionArea = styled.div`
     width: 100%;
     align-items: center;
 
-    h2,
-    p {
+    h2 {
       text-align: center;
     }
   }
@@ -343,7 +342,6 @@ export const StyledPreviewSection = styled.section`
 
   @media only screen and (max-width: 768px) {
     display: none;
-    max-width: 80%;
   }
 `;
 
@@ -367,8 +365,8 @@ export const StyledFooter = styled.footer`
 
 export const StyledFooterText = styled.p`
   display: flex;
-  align-items: center;
-  gap: 5px;
+  flex-direction: column;
+  gap: 20px;
   color: #b4b4b4;
 `;