code cleanup

src/components/Notebooks/NotebookElements.jsx

@@ -1,7 +1,6 @@
 import styled from "styled-components";
 
-
-export const NotebookContainer = styled.div` 
+export const NotebookContainer = styled.div`
     color: #fff;
     /* background: #f9f9f9; */
     background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
@@ -12,10 +11,10 @@ export const NotebookContainer = styled.div`
 `
 
 export const NotebookWrapper = styled.div`
-    display: grid ; 
+    display: grid;
     z-index: 1;
-    // height: 1250px ;  
-    width: 100% ; 
+    /* height: 1250px; */
+    width: 100% ;
     max-width: 1100px;
     margin-right: auto;
     margin-left: auto;
@@ -23,8 +22,8 @@ export const NotebookWrapper = styled.div`
     justify-content: center;
 `
 
-export const NotebookRow = styled.div` 
-    display: grid; 
+export const NotebookRow = styled.div`
+    display: grid;
     grid-auto-columns: minmax(auto, 1fr);
     align-items: center;
     grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
@@ -34,10 +33,11 @@ export const NotebookRow = styled.div`
     }
 `
 
-export const Column1 = styled.p` 
+export const Column1 = styled.p`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col1;
+
     @media screen and (max-width: 1050px) {
         font-size: 12px;
     }
@@ -47,10 +47,11 @@ export const Column1 = styled.p`
     }
 `
 
-export const Column2 = styled.p` 
+export const Column2 = styled.p`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col2;
+
     @media screen and (max-width: 1050px) {
         font-size: 12px;
     }
@@ -61,12 +62,12 @@ export const Column2 = styled.p`
 `
 
 export const TextWrapper = styled.div`
-    max-width: 540px ; 
+    max-width: 540px ;
     padding-top: 0;
     padding-bottom: 0;
 `
 
-export const TopLine = styled.p` 
+export const TopLine = styled.p`
     color: #57c6d1;
     font-size: 16px;
     line-height: 16px;
@@ -76,22 +77,19 @@ export const TopLine = styled.p`
     margin-bottom: 16px;
 `
 
-export const Heading= styled.h1` 
-
+export const Heading= styled.h1`
     margin-bottom: 24px;
     font-size: 48px;
     line-height: 1.1;
     font-weight: 600;
     color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
-    
-    @media screen and (max-width: 480px)
-    {
+
+    @media screen and (max-width: 480px) {
         font-size: 32px;
     }
 `
 
-
-export const Subtitle = styled.p` 
+export const Subtitle = styled.p`
     max-width: 440px;
     margin-bottom: 35px;
     font-size: 18px;
@@ -104,20 +102,19 @@ export const BtnWrap = styled.div`
     justify-content: flex-start;
 `
 
-export const ImgWrap = styled.div` 
+export const ImgWrap = styled.div`
     max-width: 555px;
     height: 100%;
 `
 
 export const Img = styled.img`
-  width: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 10px;
-  padding-right: 0;
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 10px;
+    padding-right: 0;
 `;
 
-
 export const NBLink = styled.a`
     text-decoration: none;
     color: #57c6d1;;
@@ -143,5 +140,5 @@ export const NBLink = styled.a`
     &:hover:before {
         opacity: 1;
         -webkit-transform: scaleX(1.05);
-      }
-`
+    }
+`

src/components/Notebooks/index.jsx

@@ -1,27 +1,5 @@
-import React from 'react'
-import { NBLink, ImgWrap, Img, NotebookContainer, NotebookWrapper, NotebookRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './NotebookElements'
-
-// export const homeObjOne = {
-//     id: 'about',
-//     lightBg: false,
-//     lightText: true,
-//     lightTextDesc: true,
-//     topLine: 'Premium Bank',
-//     headline: 'Unlimited transactions with zero fees',
-//     description:
-//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
-//     buttonLabel: 'Get Started',
-//     imgStart: false,
-//     img: require('../../images/svg-1.svg').default,
-//     alt: 'Car',
-//     dark: true,
-//     primary: true,
-//     darkText: false
-//   };
-
 import img from '../../images/coding.svg'
-
-
+import { Column1, Column2, Heading, Img, ImgWrap, NBLink, NotebookContainer, NotebookRow, NotebookWrapper, Subtitle, TextWrapper, TopLine } from './NotebookElements'
 
 const NotebookSection = () => {
     return (
@@ -210,7 +188,6 @@ const NotebookSection = () => {
                             </ul>
                         </Column2>
                     </NotebookRow>
-
                 </NotebookWrapper>
             </NotebookContainer>
         </>