diff --git a/src/components/sections/about.astro b/src/components/sections/about.astro
deleted file mode 100644
index 0116c16..0000000
--- a/src/components/sections/about.astro
+++ /dev/null
@@ -1,82 +0,0 @@
----
-import { Balancer } from 'react-wrap-balancer';
-import { FaQuestion } from 'react-icons/fa/index';
-
-import { Container } from '@/components/container';
-import { count as soundCount } from '@/lib/sounds';
-
-const count = soundCount();
----
-
-<div class="about">
-  <Container>
-    <div class="iconContainer">
-      <div class="tail"></div>
-      <div class="icon">
-        <FaQuestion />
-      </div>
-    </div>
-
-    <h2 class="title">What is Moodist?</h2>
-    <p class="desc">
-      <Balancer>
-        Moodist is a free and open-source ambient sound generator featuring <span
-          class="counter">{count} carefully curated sounds</span
-        >. Create your ideal atmosphere for relaxation, focus, or creativity
-        with this versatile tool.
-      </Balancer>
-    </p>
-  </Container>
-</div>
-
-<style>
-  .about {
-    padding: 80px 0;
-
-    & .iconContainer {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 15px;
-
-      & .tail {
-        width: 1px;
-        height: 75px;
-        background: linear-gradient(transparent, var(--color-neutral-300));
-      }
-
-      & .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 45px;
-        height: 45px;
-        font-size: var(--font-base);
-        background-color: var(--color-neutral-100);
-        border: 1px solid var(--color-neutral-300);
-        border-radius: 50%;
-      }
-    }
-
-    & .title {
-      margin-bottom: 12px;
-      font-family: var(--font-display);
-      font-size: var(--font-lg);
-      font-weight: 600;
-      text-align: center;
-    }
-
-    & .desc {
-      width: 100%;
-      max-width: 450px;
-      margin: 0 auto;
-      line-height: 1.7;
-      color: var(--color-foreground-subtle);
-      text-align: center;
-
-      & .counter {
-        color: var(--color-foreground);
-      }
-    }
-  }
-</style>
diff --git a/src/components/sections/ready.astro b/src/components/sections/ready.astro
deleted file mode 100644
index f36ce60..0000000
--- a/src/components/sections/ready.astro
+++ /dev/null
@@ -1,121 +0,0 @@
----
-import { RiSparkling2Line } from 'react-icons/ri/index';
-
-import { Container } from '@/components/container';
----
-
-<div class="ready">
-  <Container>
-    <div class="wrapper">
-      <div class="iconContainer">
-        <div class="tail"></div>
-        <div class="icon">
-          <RiSparkling2Line />
-        </div>
-      </div>
-
-      <h2 class="title">Are you ready?</h2>
-      <p class="desc">Create your calm oasis in seconds!</p>
-      <button class="button" id="button"> Use Moodist</button>
-    </div>
-  </Container>
-</div>
-
-<script>
-  const button = document.getElementById('button');
-
-  button?.addEventListener('click', () => {
-    const app = document.getElementById('app');
-
-    app?.scrollIntoView(true);
-  });
-</script>
-
-<style>
-  .ready {
-    & .wrapper {
-      position: relative;
-      padding: 0 20px 40px;
-      background: linear-gradient(transparent, var(--color-neutral-100));
-      border-radius: 0 0 20px 20px;
-
-      &::after {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        width: 70%;
-        height: 1px;
-        content: '';
-        background: linear-gradient(
-          90deg,
-          transparent,
-          var(--color-neutral-300),
-          transparent
-        );
-        transform: translateX(-50%);
-      }
-    }
-
-    & .iconContainer {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 15px;
-
-      & .tail {
-        width: 1px;
-        height: 75px;
-        background: linear-gradient(transparent, var(--color-neutral-300));
-      }
-
-      & .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 45px;
-        height: 45px;
-        font-size: var(--font-md);
-        background-color: var(--color-neutral-100);
-        border: 1px solid var(--color-neutral-300);
-        border-radius: 50%;
-      }
-    }
-
-    & .title {
-      margin-bottom: 12px;
-      font-family: var(--font-display);
-      font-size: var(--font-lg);
-      font-weight: 600;
-      text-align: center;
-    }
-
-    & .desc {
-      color: var(--color-foreground-subtle);
-      text-align: center;
-    }
-
-    & .button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 120px;
-      height: 40px;
-      margin: 24px auto 0;
-      font-family: var(--font-heading);
-      font-size: var(--font-sm);
-      line-height: 0;
-      color: var(--color-neutral-200);
-      text-decoration: none;
-      cursor: pointer;
-      background-color: var(--color-neutral-950);
-      border: none;
-      border-radius: 100px;
-      outline: none;
-      transition: 0.2s;
-
-      &:hover {
-        background-color: var(--color-neutral-800);
-      }
-    }
-  }
-</style>
diff --git a/src/components/sections/why.astro b/src/components/sections/why.astro
deleted file mode 100644
index 8aa8d77..0000000
--- a/src/components/sections/why.astro
+++ /dev/null
@@ -1,184 +0,0 @@
----
-import { BiMoney, BiUserCircle, BiLogoGithub } from 'react-icons/bi/index';
-import { BsSoundwave, BsStars } from 'react-icons/bs/index';
-import { RxMixerHorizontal } from 'react-icons/rx/index';
-import { IoShareSocialSharp } from 'react-icons/io5/index';
-import { FaQuestion } from 'react-icons/fa/index';
-
-import { Balancer } from 'react-wrap-balancer';
-
-import { Container } from '@/components/container';
-import { count as soundCount } from '@/lib/sounds';
-
-const count = soundCount();
-
-const reasons = [
-  {
-    Icon: BiMoney,
-    body: 'Enjoy unlimited, cost-free access to our ambient sounds.',
-    id: 'free-access',
-    label: 'Free Access',
-  },
-  {
-    Icon: BiUserCircle,
-    body: 'Dive into tranquility without any sign-up requirements.',
-    id: 'no-registration',
-    label: 'No Registration',
-  },
-  {
-    Icon: BsSoundwave,
-    body: `Explore ${count} varied ambient sounds for every mood.`,
-    id: 'diverse-sounds',
-    label: 'Diverse Sounds',
-  },
-  {
-    Icon: RxMixerHorizontal,
-    body: 'Shape your ideal ambiance by blending different sounds.',
-    id: 'customizable-mixes',
-    label: 'Customizable Mixes',
-  },
-  {
-    Icon: BsStars,
-    body: 'Smooth and uninterrupted, focus on relaxation.',
-    id: 'seamless-experience',
-    label: 'Seamless Experience',
-  },
-  {
-    Icon: IoShareSocialSharp,
-    body: 'Easily share your favorite sounds for a connected experience.',
-    id: 'share-selections',
-    label: 'Share Selections',
-  },
-  {
-    Icon: BiLogoGithub,
-    body: 'Transparent and collaborative – built on open-source principles.',
-    id: 'open-source',
-    label: 'Open-Source',
-    link: {
-      label: 'Source Code',
-      url: 'https://github.com/remvze/moodist',
-    },
-  },
-];
----
-
-<div class="why">
-  <Container>
-    <div class="iconContainer">
-      <div class="tail"></div>
-      <div class="icon">
-        <FaQuestion />
-      </div>
-    </div>
-
-    <h2 class="title">Why use Moodist?</h2>
-
-    <div class="reasons">
-      {
-        reasons.map(reason => (
-          <div class="reason">
-            <div class="icon">
-              <reason.Icon />
-            </div>
-            <h3 class="label">{reason.label}</h3>
-            <p class="body">
-              <Balancer>{reason.body}</Balancer>
-            </p>
-            {reason.link && (
-              <a class="link" href={reason.link.url}>
-                {reason.link.label}
-              </a>
-            )}
-          </div>
-        ))
-      }
-    </div>
-  </Container>
-</div>
-
-<style>
-  .why {
-    padding-bottom: 80px;
-
-    & .iconContainer {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 15px;
-
-      & .tail {
-        width: 1px;
-        height: 75px;
-        background: linear-gradient(transparent, var(--color-neutral-300));
-      }
-
-      & .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 45px;
-        height: 45px;
-        font-size: var(--font-base);
-        background-color: var(--color-neutral-100);
-        border: 1px solid var(--color-neutral-300);
-        border-radius: 50%;
-      }
-    }
-
-    & .title {
-      margin-bottom: 12px;
-      font-family: var(--font-display);
-      font-size: var(--font-lg);
-      font-weight: 600;
-      text-align: center;
-    }
-
-    & .reasons {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      row-gap: 28px;
-      column-gap: 20px;
-      margin-top: 24px;
-
-      & .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        margin: 0 auto 12px;
-        font-size: var(--font-md);
-        color: var(--color-foreground-subtle);
-        background: linear-gradient(var(--color-neutral-100), transparent);
-        border: 1px solid var(--color-neutral-200);
-        border-radius: 12px;
-      }
-
-      & .label {
-        margin-bottom: 8px;
-        font-family: var(--font-heading);
-        font-weight: 600;
-        text-align: center;
-      }
-
-      & .body {
-        width: 100%;
-        max-width: 250px;
-        margin: 0 auto;
-        line-height: 1.6;
-        color: var(--color-foreground-subtle);
-        text-align: center;
-      }
-
-      & .link {
-        display: block;
-        margin-top: 8px;
-        font-size: var(--font-sm);
-        font-weight: 500;
-        color: var(--color-foreground);
-        text-align: center;
-        text-decoration: none;
-      }
-    }
-  }
-</style>