From 4515aa8e7a7f6d0fbc839625f74f0583e1a20d18 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 9 Feb 2024 20:42:42 +0330
Subject: [PATCH] style: change the about style

---
 src/components/about/about.module.css   | 66 ++++++++++++-------------
 src/components/about/about.tsx          | 18 +++----
 src/components/source/source.module.css |  3 +-
 3 files changed, 40 insertions(+), 47 deletions(-)

diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css
index 7325c2a..92602e0 100644
--- a/src/components/about/about.module.css
+++ b/src/components/about/about.module.css
@@ -1,50 +1,46 @@
 .about {
   margin-top: 80px;
 
-  & .iconContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 15px;
-
-    & .tail {
-      width: 1px;
-      height: 75px;
-      background: linear-gradient(transparent, var(--color-neutral-300));
-    }
-
-    & .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 45px;
-      height: 45px;
-      font-size: var(--font-md);
-      background-color: var(--color-neutral-100);
-      border: 1px solid var(--color-neutral-300);
-      border-radius: 50%;
-    }
-  }
-
   & .title {
-    margin-bottom: 8px;
     font-family: var(--font-display);
     font-size: var(--font-lg);
     font-weight: 600;
-    text-align: center;
   }
 
-  & .desc {
-    line-height: 1.6;
-    color: var(--color-foreground-subtle);
-    text-align: center;
+  .paragraph {
+    padding: 30px 0;
+    background: linear-gradient(
+      transparent,
+      var(--color-neutral-50) 10%,
+      var(--color-neutral-50) 90%,
+      transparent
+    );
 
-    &:not(:last-of-type) {
-      margin-bottom: 24px;
+    & .counter {
+      width: max-content;
+      padding: 6px 16px;
+      margin-bottom: 12px;
+      font-size: var(--font-xsm);
+      color: var(--color-foreground-subtle);
+      background: linear-gradient(var(--color-neutral-100), transparent);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 20px 20px 20px 8px;
+
+      & span {
+        font-weight: 500;
+        color: var(--color-foreground);
+      }
+    }
+
+    & .desc {
+      line-height: 1.6;
+      color: var(--color-foreground-subtle);
+
+      /* text-align: center; */
     }
   }
 
-  & .divider {
+  /* & .divider {
     width: 80px;
     height: 1px;
     margin: 0 auto 24px;
@@ -54,5 +50,5 @@
       var(--color-neutral-300),
       transparent
     );
-  }
+  } */
 }
diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx
index 26836f2..119d4a8 100644
--- a/src/components/about/about.tsx
+++ b/src/components/about/about.tsx
@@ -1,4 +1,3 @@
-import { FaQuestion } from 'react-icons/fa6/index';
 import { Balancer } from 'react-wrap-balancer';
 
 import { Container } from '@/components/container';
@@ -19,25 +18,22 @@ export function About() {
   return (
     <section className={styles.about}>
       <Container tight>
-        <div className={styles.iconContainer}>
-          <div className={styles.tail} />
-          <div className={styles.icon}>
-            <FaQuestion />
-          </div>
-        </div>
-
         <h1 className={styles.title}>Free Ambient Sounds</h1>
 
         {paragraphs.map((paragraph, index) => (
-          <>
-            <p className={styles.desc} key={index}>
+          <div className={styles.paragraph} key={index}>
+            <div className={styles.counter}>
+              <span>0{index + 1}</span> / 0{paragraphs.length}
+            </div>
+
+            <p className={styles.desc}>
               <Balancer>{paragraph}</Balancer>
             </p>
 
             {index < paragraphs.length - 1 && (
               <div className={styles.divider} />
             )}
-          </>
+          </div>
         ))}
       </Container>
     </section>
diff --git a/src/components/source/source.module.css b/src/components/source/source.module.css
index b35830e..fd7a627 100644
--- a/src/components/source/source.module.css
+++ b/src/components/source/source.module.css
@@ -1,7 +1,8 @@
 .source {
   /* margin-top: 80px; */
 
-  margin-top: 40px;
+  /* margin-top: 40px; */
+  margin-top: 20px;
 
   & .wrapper {
     position: relative;