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] 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 {