From 4e84419ab19f4f0c129a76a91be194bbab7f6b11 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Tue, 31 Oct 2023 18:41:05 +0330
Subject: [PATCH] feat: add about section

---
 src/components/about/about.module.css | 19 +++++++++++++++
 src/components/about/about.tsx        | 35 +++++++++++++++++++++++++++
 src/components/about/index.ts         |  1 +
 src/pages/index.astro                 |  2 ++
 4 files changed, 57 insertions(+)
 create mode 100644 src/components/about/about.module.css
 create mode 100644 src/components/about/about.tsx
 create mode 100644 src/components/about/index.ts

diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css
new file mode 100644
index 0000000..e0282ce
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx
new file mode 100644
index 0000000..09a48cb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/about/index.ts b/src/components/about/index.ts
new file mode 100644
index 0000000..4629637
--- /dev/null
+++ b/src/components/about/index.ts
@@ -0,0 +1 @@
+export { About } from './about';
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a80c9b8..2f4362c 100644
--- a/src/pages/index.astro
+++ b/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>