feat: add CTA button

src/components/about/about.module.css

@@ -17,6 +17,10 @@
       transparent
     );
 
+    &:last-of-type {
+      padding-bottom: 0;
+    }
+
     & .counter {
       width: max-content;
       padding: 6px 16px;
@@ -45,4 +49,42 @@
       color: var(--color-foreground-subtle);
     }
   }
+
+  .button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 16px;
+    margin-top: 20px;
+    font-size: var(--font-sm);
+    font-weight: 500;
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 50px;
+    outline: none;
+    transition: 0.2s;
+
+    &::before {
+      position: absolute;
+      top: -1px;
+      left: 50%;
+      width: 70%;
+      height: 1px;
+      content: '';
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-300),
+        transparent
+      );
+      transform: translateX(-50%);
+    }
+
+    &:hover {
+      background-color: var(--color-neutral-100);
+    }
+  }
 }

src/components/about/about.tsx

@@ -29,6 +29,12 @@ export function About() {
     },
   ];
 
+  const handleClick = () => {
+    const app = document.getElementById('app');
+
+    app?.scrollIntoView();
+  };
+
   return (
     <section className={styles.about}>
       <div className={styles.effect} />
@@ -44,6 +50,10 @@ export function About() {
             <p className={styles.body}>{paragraph.body}</p>
           </div>
         ))}
+
+        <button className={styles.button} onClick={handleClick}>
+          Use Moodist
+        </button>
       </Container>
     </section>
   );

src/components/source/source.module.css

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