Merge branch 'main' into develop

src/components/about/about.module.css

@@ -1,61 +1,39 @@
 .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%;
-    }
+  & .effect {
+    position: sticky;
+    top: 0;
+    height: 80px;
+    background: linear-gradient(var(--color-neutral-50), transparent);
   }
 
-  & .title {
-    margin-bottom: 8px;
-    font-family: var(--font-display);
-    font-size: var(--font-lg);
-    font-weight: 600;
-    text-align: center;
-  }
-
-  & .desc {
-    width: 100%;
-    max-width: 450px;
-    margin: 0 auto;
-    line-height: 1.6;
-    color: var(--color-foreground-subtle);
-    text-align: center;
-
-    &:not(:last-of-type) {
-      margin-bottom: 24px;
-    }
-  }
-
-  & .divider {
-    width: 80px;
-    height: 1px;
-    margin: 0 auto 24px;
+  & .paragraph {
+    padding: 30px 0;
     background: linear-gradient(
-      90deg,
       transparent,
-      var(--color-neutral-300),
+      var(--color-neutral-50) 10%,
+      var(--color-neutral-50) 90%,
       transparent
     );
+
+    & .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);
+    }
   }
 }

src/components/about/about.tsx

@@ -1,6 +1,3 @@
-import { FaQuestion } from 'react-icons/fa6/index';
-import { Balancer } from 'react-wrap-balancer';
-
 import { Container } from '@/components/container';
 import { count as soundCount } from '@/lib/sounds';
 
@@ -18,26 +15,17 @@ export function About() {
 
   return (
     <section className={styles.about}>
-      <Container>
-        <div className={styles.iconContainer}>
-          <div className={styles.tail} />
-          <div className={styles.icon}>
-            <FaQuestion />
-          </div>
-        </div>
-
-        <h1 className={styles.title}>Free Ambient Sounds</h1>
+      <div className={styles.effect} />
 
+      <Container tight>
         {paragraphs.map((paragraph, index) => (
-          <>
-            <p className={styles.desc} key={index}>
-              <Balancer>{paragraph}</Balancer>
-            </p>
+          <div className={styles.paragraph} key={index}>
+            <div className={styles.counter}>
+              <span>0{index + 1}</span> / 0{paragraphs.length}
+            </div>
 
-            {index < paragraphs.length - 1 && (
-              <div className={styles.divider} />
-            )}
-          </>
+            <p className={styles.desc}>{paragraph}</p>
+          </div>
         ))}
       </Container>
     </section>

src/components/container/container.module.css

@@ -2,4 +2,8 @@
   width: 90%;
   max-width: 600px;
   margin: 0 auto;
+
+  &.tight {
+    max-width: 450px;
+  }
 }

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>
+  );
 }

src/components/source/source.module.css

@@ -1,7 +1,7 @@
 .source {
   /* margin-top: 80px; */
 
-  margin-top: 40px;
+  margin-top: 20px;
 
   & .wrapper {
     position: relative;