style: add wrap balancer to desc

package-lock.json

@@ -14,7 +14,8 @@
         "astro": "^3.2.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-icons": "4.11.0"
+        "react-icons": "4.11.0",
+        "react-wrap-balancer": "1.1.0"
       },
       "devDependencies": {
         "@commitlint/cli": "17.7.2",
@@ -12544,6 +12545,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-wrap-balancer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-wrap-balancer/-/react-wrap-balancer-1.1.0.tgz",
+      "integrity": "sha512-EhF3jOZm5Fjx+Cx41e423qOv2c2aOvXAtym2OHqrGeMUnwERIyNsRBgnfT3plB170JmuYvts8K2KSPEIerKr5A==",
+      "peerDependencies": {
+        "react": ">=16.8.0 || ^17.0.0 || ^18"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz",

package.json

@@ -27,7 +27,8 @@
     "astro": "^3.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "4.11.0"
+    "react-icons": "4.11.0",
+    "react-wrap-balancer": "1.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "17.7.2",

src/components/hero/hero.module.css

@@ -44,6 +44,7 @@
   & .desc {
     margin-top: 5px;
     color: var(--color-foreground-subtle);
+    line-height: 1.6;
   }
 
   & .free {

src/components/hero/hero.tsx

@@ -1,3 +1,5 @@
+import { Balancer } from 'react-wrap-balancer';
+
 import { Container } from '@/components/container';
 
 import styles from './hero.module.css';
@@ -18,7 +20,9 @@ export function Hero() {
           <div className={styles.right} />
         </div>
 
-        <p className={styles.desc}>Ambient background sounds for focus.</p>
+        <p className={styles.desc}>
+          <Balancer>Ambient background sounds for focus.</Balancer>
+        </p>
 
         <p className={styles.free}>100% Free</p>
       </Container>