feat: add features section

src/components/features/features.module.css

@@ -0,0 +1,99 @@
+.featuresSection {
+  margin-top: 40px;
+
+  & .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: 8px;
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & .features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    row-gap: 32px;
+    column-gap: 20px;
+    margin-top: 24px;
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      margin: 0 auto;
+      margin-bottom: 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: 275px;
+      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;
+    }
+
+    & .soon {
+      display: flex;
+      width: max-content;
+      padding: 6px 12px;
+      margin: 0 auto;
+      margin-top: 8px;
+      font-size: var(--font-2xsm);
+      font-weight: 500;
+      line-height: 1;
+      background: linear-gradient(var(--color-neutral-100), transparent);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 100px;
+    }
+  }
+}

src/components/features/features.tsx

@@ -0,0 +1,107 @@
+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 { Balancer } from 'react-wrap-balancer';
+
+import { Container } from '@/components/container';
+import { count as soundCount } from '@/lib/sounds';
+
+import styles from './features.module.css';
+
+export function Features() {
+  const count = soundCount();
+
+  const features = [
+    {
+      Icon: BiMoney,
+      body: 'Immerse yourself in sound without spending a dime.',
+      id: 'free-access',
+      label: 'Free Access',
+    },
+    {
+      Icon: BiUserCircle,
+      body: 'Dive right in, no sign-up hoops to jump through.',
+      id: 'no-registration',
+      label: 'No Registration',
+    },
+    {
+      Icon: BsSoundwave,
+      body: `Explore ${count} unique soundscapes, from rainforests to cityscapes.`,
+      id: 'diverse-sounds',
+      label: 'Diverse Sounds',
+    },
+    {
+      Icon: RxMixerHorizontal,
+      body: 'Craft your perfect soundscape by blending and adjusting sounds.',
+      id: 'customizable-mixes',
+      label: 'Customizable Mixes',
+    },
+    {
+      Icon: BiLogoGithub,
+      body: 'Contribute and collaborate, making the best even better.',
+      id: 'open-source',
+      label: 'Open-Source',
+      link: {
+        label: 'Source Code',
+        url: 'https://github.com/remvze/moodist',
+      },
+    },
+    {
+      Icon: BsStars,
+      body: 'Uninterrupted immersion, focus on the sounds, not the tech.',
+      id: 'seamless-experience',
+      label: 'Seamless Experience',
+    },
+    {
+      Icon: BsStars,
+      body: 'Spread the calm, easily share your customized sound blends.',
+      id: 'share-selections',
+      label: 'Share Selections',
+    },
+    {
+      Icon: BsStars,
+      body: 'Lock in your favorite mixes for instant return to your sonic haven.',
+      id: 'save-presets',
+      label: 'Save Presets',
+      soon: true,
+    },
+  ];
+
+  return (
+    <section className={styles.featuresSection}>
+      <Container>
+        <div className={styles.iconContainer}>
+          <div className={styles.tail} />
+          <div className={styles.icon}>
+            <BsStars />
+          </div>
+        </div>
+
+        <h2 className={styles.title}>Features</h2>
+
+        <div className={styles.features}>
+          {features.map(feature => (
+            <div className={styles.reason} key={feature.id}>
+              <div className={styles.icon}>
+                <feature.Icon />
+              </div>
+              <h3 className={styles.label}>{feature.label}</h3>
+              <p className={styles.body}>
+                <Balancer>{feature.body}</Balancer>
+              </p>
+
+              {feature.link && (
+                <a className={styles.link} href={feature.link.url}>
+                  {feature.link.label}
+                </a>
+              )}
+
+              {feature.soon && <div className={styles.soon}>Coming Soon</div>}
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}

src/components/features/index.ts

@@ -0,0 +1 @@
+export { Features } from './features';

src/pages/index.astro

@@ -6,6 +6,7 @@ import { App } from '@/components/app';
 import { Source } from '@/components/source';
 import { Donate } from '@/components/donate';
 import { About } from '@/components/about';
+import { Features } from '@/components/features';
 import { Footer } from '@/components/footer';
 ---
 
@@ -14,6 +15,7 @@ import { Footer } from '@/components/footer';
   <Hero />
   <App client:load />
   <About client:load />
+  <Features client:load />
   <Source />
   <Footer />
 </Layout>