From 831a9c8ea019a3d86e994ff0e060dd4337a84d1f Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 9 Feb 2024 18:29:00 +0330
Subject: [PATCH 1/3] refactor: add variant to container

---
 src/components/about/about.module.css         | 3 ---
 src/components/about/about.tsx                | 2 +-
 src/components/container/container.module.css | 4 ++++
 src/components/container/container.tsx        | 9 +++++++--
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css
index 5c4d90b..7325c2a 100644
--- a/src/components/about/about.module.css
+++ b/src/components/about/about.module.css
@@ -35,9 +35,6 @@
   }
 
   & .desc {
-    width: 100%;
-    max-width: 450px;
-    margin: 0 auto;
     line-height: 1.6;
     color: var(--color-foreground-subtle);
     text-align: center;
diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx
index c4e4c6d..26836f2 100644
--- a/src/components/about/about.tsx
+++ b/src/components/about/about.tsx
@@ -18,7 +18,7 @@ export function About() {
 
   return (
     <section className={styles.about}>
-      <Container>
+      <Container tight>
         <div className={styles.iconContainer}>
           <div className={styles.tail} />
           <div className={styles.icon}>
diff --git a/src/components/container/container.module.css b/src/components/container/container.module.css
index 618b9be..6210e59 100644
--- a/src/components/container/container.module.css
+++ b/src/components/container/container.module.css
@@ -2,4 +2,8 @@
   width: 90%;
   max-width: 600px;
   margin: 0 auto;
+
+  &.tight {
+    max-width: 450px;
+  }
 }
diff --git a/src/components/container/container.tsx b/src/components/container/container.tsx
index 597823a..afa3fca 100644
--- a/src/components/container/container.tsx
+++ b/src/components/container/container.tsx
@@ -5,8 +5,13 @@ import styles from './container.module.css';
 interface ContainerProps {
   children: React.ReactNode;
   className?: string;
+  tight?: boolean;
 }
 
-export function Container({ children, className }: ContainerProps) {
-  return <div className={cn(styles.container, className)}>{children}</div>;
+export function Container({ children, className, tight }: ContainerProps) {
+  return (
+    <div className={cn(styles.container, className, tight && styles.tight)}>
+      {children}
+    </div>
+  );
 }

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 2/3] 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;

From 1a499be2446730d5333dd0d0d6a06bbd47564979 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 9 Feb 2024 20:56:33 +0330
Subject: [PATCH 3/3] style: add effect to about

---
 src/components/about/about.module.css   | 27 ++++++-------------------
 src/components/about/about.tsx          | 14 +++----------
 src/components/source/source.module.css |  1 -
 3 files changed, 9 insertions(+), 33 deletions(-)

diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css
index 92602e0..31e3eab 100644
--- a/src/components/about/about.module.css
+++ b/src/components/about/about.module.css
@@ -1,13 +1,12 @@
 .about {
-  margin-top: 80px;
-
-  & .title {
-    font-family: var(--font-display);
-    font-size: var(--font-lg);
-    font-weight: 600;
+  & .effect {
+    position: sticky;
+    top: 0;
+    height: 80px;
+    background: linear-gradient(var(--color-neutral-50), transparent);
   }
 
-  .paragraph {
+  & .paragraph {
     padding: 30px 0;
     background: linear-gradient(
       transparent,
@@ -35,20 +34,6 @@
     & .desc {
       line-height: 1.6;
       color: var(--color-foreground-subtle);
-
-      /* text-align: center; */
     }
   }
-
-  /* & .divider {
-    width: 80px;
-    height: 1px;
-    margin: 0 auto 24px;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      var(--color-neutral-300),
-      transparent
-    );
-  } */
 }
diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx
index 119d4a8..3f38470 100644
--- a/src/components/about/about.tsx
+++ b/src/components/about/about.tsx
@@ -1,5 +1,3 @@
-import { Balancer } from 'react-wrap-balancer';
-
 import { Container } from '@/components/container';
 import { count as soundCount } from '@/lib/sounds';
 
@@ -17,22 +15,16 @@ export function About() {
 
   return (
     <section className={styles.about}>
-      <Container tight>
-        <h1 className={styles.title}>Free Ambient Sounds</h1>
+      <div className={styles.effect} />
 
+      <Container tight>
         {paragraphs.map((paragraph, 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} />
-            )}
+            <p className={styles.desc}>{paragraph}</p>
           </div>
         ))}
       </Container>
diff --git a/src/components/source/source.module.css b/src/components/source/source.module.css
index fd7a627..944f980 100644
--- a/src/components/source/source.module.css
+++ b/src/components/source/source.module.css
@@ -1,7 +1,6 @@
 .source {
   /* margin-top: 80px; */
 
-  /* margin-top: 40px; */
   margin-top: 20px;
 
   & .wrapper {