refactor: relocate sections

src/components/sections/about/about.tsx

@@ -1,9 +1,9 @@
-import { Container } from '@/components/container';
+import { useMemo } from 'react';
 
+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(() => {
@@ -22,12 +22,12 @@ export function About() {
         <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{' '}
+          free online ambient sound generator offering <span>{count}</span>{' '}
-          <span>{count}</span> handpicked sounds in various categories, from
+          handpicked sounds in various categories, from nature&apos;s tranquil
-          nature&apos;s tranquil melodies to the soothing ambiance of urban
+          melodies to the soothing ambiance of urban life. Whether you&apos;re
-          life. Whether you&apos;re seeking relaxation or a productivity boost,
+          seeking relaxation or a productivity boost, Moodist lets you
-          Moodist lets you effortlessly customize your environment with the
+          effortlessly customize your environment with the perfect background
-          perfect background sounds.
+          sounds.
         </p>
       </Container>
     </div>

src/components/sections/index.ts

@@ -0,0 +1,2 @@
+export { About as AboutSection } from './about';
+export { Why as WhySection } from './why';

src/components/sections/why/index.ts

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

src/components/sections/why/why.module.css

@@ -1,4 +1,4 @@
-.whySection {
+.why {
   padding-bottom: 80px;
 
   & .title {

src/components/sections/why/why.tsx

@@ -3,9 +3,9 @@ import { Balancer } from 'react-wrap-balancer';
 
 import { Container } from '@/components/container';
 
-import styles from './why-section.module.css';
+import styles from './why.module.css';
 
-export function WhySection() {
+export function Why() {
   const reasons = [
     {
       body: 'Moodist is a cost-free solution, offering you high-quality ambient sounds without any financial commitment.',
@@ -28,7 +28,7 @@ export function WhySection() {
   ];
 
   return (
-    <div className={styles.whySection}>
+    <div className={styles.why}>
       <Container>
         <h2 className={styles.title}>Why use Moodist?</h2>
 

src/components/why-section/index.ts

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

src/pages/index.astro

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