feat: add why section

src/components/about/about.module.css

@@ -1,5 +1,5 @@
 .about {
-  padding: 120px 0;
+  padding: 80px 0;
 
   & .title {
     margin-bottom: 12px;

src/components/why-section/index.ts

@@ -0,0 +1 @@
+export { WhySection } from './why-section';

src/components/why-section/why-section.module.css

@@ -0,0 +1,42 @@
+.whySection {
+  padding-bottom: 80px;
+
+  & .title {
+    margin-bottom: 12px;
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+  }
+
+  & .reasons {
+    display: grid;
+    margin-top: 24px;
+    gap: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+
+    & .icon {
+      display: flex;
+      width: 44px;
+      height: 44px;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 12px;
+      margin-bottom: 12px;
+      background-color: var(--color-neutral-100);
+      color: #818cf8;
+      font-size: var(--font-lg);
+    }
+
+    & .label {
+      margin-bottom: 8px;
+      font-family: var(--font-heading);
+      font-weight: 600;
+    }
+
+    & .body {
+      color: var(--color-foreground-subtle);
+      line-height: 1.6;
+    }
+  }
+}

src/components/why-section/why-section.tsx

@@ -0,0 +1,49 @@
+import { BiMoney, BiUserCircle, BiLogoGithub } from 'react-icons/bi/index';
+import { Balancer } from 'react-wrap-balancer';
+
+import { Container } from '@/components/container';
+
+import styles from './why-section.module.css';
+
+export function WhySection() {
+  const reasons = [
+    {
+      body: 'Moodist is a cost-free solution, offering you high-quality ambient sounds without any financial commitment.',
+      icon: <BiMoney />,
+      id: 'free',
+      label: 'Completely Free',
+    },
+    {
+      body: 'Say goodbye to the hassle of signing up; Moodist is ready to enhance your experience without any registration requirements, ensuring quick and easy access.',
+      icon: <BiUserCircle />,
+      id: 'registration-free',
+      label: 'Without Registration',
+    },
+    {
+      body: "Moodist's open-source nature means you can trust its transparency and contribute to its improvement, making it a community-driven tool for everyone's benefit.",
+      icon: <BiLogoGithub />,
+      id: 'open-source',
+      label: 'Open Source',
+    },
+  ];
+
+  return (
+    <div className={styles.whySection}>
+      <Container>
+        <h2 className={styles.title}>Why use Moodist?</h2>
+
+        <div className={styles.reasons}>
+          {reasons.map(reason => (
+            <div className={styles.reason} key={reason.id}>
+              <div className={styles.icon}>{reason.icon}</div>
+              <h3 className={styles.label}>{reason.label}</h3>
+              <p className={styles.body}>
+                <Balancer>{reason.body}</Balancer>
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </div>
+  );
+}

src/pages/index.astro

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