general styling & design

src/components/styles/About.styled.ts

@@ -1,77 +1,33 @@
 import { styled } from 'styled-components';
 
 export const StyledAbout = styled.section`
-  img {
-    max-width: 90px;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
-  ul.about-list {
-    display: flex;
-    flex-wrap: wrap;
+  .about-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 3em;
+    margin-top: 100px;
 
-    li {
-      margin: 0.5em 0;
+    img {
+      border-radius: 1em;
+      max-width: 100%;
     }
 
-    h2 {
-      display: inline-block;
-      background-color: ${({ theme }) => theme.colors['600']};
-      padding: 0.25em;
-      margin: 0;
-    }
+    .about-content {
+      h2 {
+        font-size: 1.5em;
+        color: ${({ theme }) => theme.colors['200']};
+      }
 
-    p {
-      background-color: ${({ theme }) => theme.colors['400']};
-      padding: 1em;
-      margin: 0;
+      p {
+        color: ${({ theme }) => theme.colors['300']};
+        margin-top: 2em;
+        text-align: justify;
+        line-height: 1.7;
+      }
     }
   }
 `;
-
-// export const StyledAboutItem = styled.li`
-//   display: flex;
-//   background-color: ${({ theme }) => theme.colors['400']};
-
-//   gap: 1em;
-//   margin-top: 50px;
-
-//   h2 {
-//     margin: 0;
-//   }
-// `;
-
-// export const StyledAboutImageWrapper = styled.div`
-//   display: inline-block;
-//   position: relative;
-
-//   &::before {
-//     position: absolute;
-//     top: -25px;
-//     left: 50%;
-//     height: calc(100% + 52px);
-
-//     content: '';
-//     width: 5px;
-//     background-color: ${({ theme }) => theme.colors['400']};
-//     border-radius: 2px;
-
-//     z-index: -1;
-//     transform: translateX(-50%);
-//   }
-// `;
-
-// export const StyledAboutContentWrapper = styled.div``;
-
-// export const StyledAboutTitle = styled.h2`
-//   display: inline-block;
-//   margin: 1em 0;
-//   padding: 0.1em 2em 0.1em 0.5em;
-
-//   background-color: ${({ theme }) => theme.colors['600']};
-// `;
-
-// export const StyledAboutDescription = styled.p`
-//   margin: 0;
-//   margin-top: 1em;
-//   text-align: justify;
-// `;