feat: add about section

src/components/about/about.module.css

@@ -0,0 +1,19 @@
+.about {
+  padding: 120px 0;
+
+  & .title {
+    margin-bottom: 12px;
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+  }
+
+  & .desc {
+    color: var(--color-foreground-subtle);
+    line-height: 1.7;
+
+    & span {
+      color: var(--color-foreground);
+    }
+  }
+}

src/components/about/about.tsx

@@ -0,0 +1,35 @@
+import { Container } from '@/components/container';
+
+import { sounds } from '@/data/sounds';
+
+import styles from './about.module.css';
+import { useMemo } from 'react';
+
+export function About() {
+  const count = useMemo(() => {
+    let count = 0;
+
+    sounds.categories.forEach(category => {
+      count += category.sounds.length;
+    });
+
+    return count;
+  }, []);
+
+  return (
+    <div className={styles.about}>
+      <Container>
+        <h2 className={styles.title}>What is Moodist?</h2>
+        <p className={styles.desc}>
+          Moodist is your gateway to a world of serenity and focus. It&apos;s a
+          free and registration-free online ambient sound generator offering{' '}
+          <span>{count}</span> handpicked sounds in various categories, from
+          nature&apos;s tranquil melodies to the soothing ambiance of urban
+          life. Whether you&apos;re seeking relaxation or a productivity boost,
+          Moodist lets you effortlessly customize your environment with the
+          perfect background sounds.
+        </p>
+      </Container>
+    </div>
+  );
+}

src/components/about/index.ts

@@ -0,0 +1 @@
+export { About } from './about';

src/pages/index.astro

@@ -3,12 +3,14 @@ import Layout from '@/layouts/layout.astro';
 
 import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
+import { About } from '@/components/about';
 ---
 
 <Layout title="Welcome to Astro.">
   <main>
     <Hero />
     <App client:load />
+    <About />
   </main>
 </Layout>