diff --git a/src/components/hero/hero.module.css b/src/components/hero/hero.module.css
index 0144cd4..0147fdf 100644
--- a/src/components/hero/hero.module.css
+++ b/src/components/hero/hero.module.css
@@ -47,7 +47,7 @@
line-height: 1.6;
}
- & .free {
+ & .sounds {
position: relative;
display: flex;
width: max-content;
diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx
index 2914d0f..c1c4d6f 100644
--- a/src/components/hero/hero.tsx
+++ b/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 (
@@ -26,7 +31,7 @@ export function Hero() {
Ambient sounds for focus and calm.
- 100% Free
+ +{count} Sounds
);
diff --git a/src/components/sections/about/about.tsx b/src/components/sections/about/about.tsx
index 02c92c4..e101f96 100644
--- a/src/components/sections/about/about.tsx
+++ b/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 (
diff --git a/src/lib/sounds.ts b/src/lib/sounds.ts
new file mode 100644
index 0000000..ff2ecf8
--- /dev/null
+++ b/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;
+}