feat: add sound count to hero

src/components/hero/hero.module.css

@@ -47,7 +47,7 @@
     line-height: 1.6;
   }
 
-  & .free {
+  & .sounds {
     position: relative;
     display: flex;
     width: max-content;

src/components/hero/hero.tsx

@@ -1,10 +1,15 @@
+import { useMemo } from 'react';
+
 import { Balancer } from 'react-wrap-balancer';
 
 import { Container } from '@/components/container';
+import { count as soundCount } from '@/lib/sounds';
 
 import styles from './hero.module.css';
 
 export function Hero() {
+  const count = useMemo(() => soundCount(true), []);
+
   return (
     <div className={styles.hero}>
       <Container>
@@ -26,7 +31,7 @@ export function Hero() {
           <Balancer>Ambient sounds for focus and calm.</Balancer>
         </p>
 
-        <p className={styles.free}>100% Free</p>
+        <p className={styles.sounds}>+{count} Sounds</p>
       </Container>
     </div>
   );

src/components/sections/about/about.tsx

@@ -1,20 +1,12 @@
 import { useMemo } from 'react';
 
 import { Container } from '@/components/container';
-import { sounds } from '@/data/sounds';
+import { count as soundCount } from '@/lib/sounds';
 
 import styles from './about.module.css';
 
 export function About() {
-  const count = useMemo(() => {
-    let count = 0;
-
-    sounds.categories.forEach(category => {
-      count += category.sounds.length;
-    });
-
-    return count;
-  }, []);
+  const count = useMemo(soundCount, []);
 
   return (
     <div className={styles.about}>

src/lib/sounds.ts

@@ -0,0 +1,15 @@
+import { sounds } from '@/data/sounds';
+
+export function count(round: boolean = false) {
+  let count = 0;
+
+  sounds.categories.forEach(category => {
+    count += category.sounds.length;
+  });
+
+  if (round) {
+    return count - (count % 5);
+  }
+
+  return count;
+}