style: add polka dot pattern

src/components/container/container.tsx

@@ -1,9 +1,12 @@
+import { cn } from '@/helpers/styles';
+
 import styles from './container.module.css';
 
 interface ContainerProps {
   children: React.ReactNode;
+  className?: string;
 }
 
-export function Container({ children }: ContainerProps) {
+export function Container({ children, className }: ContainerProps) {
-  return <div className={styles.container}>{children}</div>;
+  return <div className={cn(styles.container, className)}>{children}</div>;
 }

src/components/hero.astro

@@ -1,131 +0,0 @@
----
-import { Balancer } from 'react-wrap-balancer';
-import { BsSoundwave } from 'react-icons/bs/index';
-
-import { Container } from '@/components/container';
-import { count as soundCount } from '@/lib/sounds';
-
-const count = soundCount();
----
-
-<div class="hero">
-  <Container>
-    <img
-      alt="Faded Moodist Logo"
-      class="logo"
-      height={45}
-      src="/logo.svg"
-      width={45}
-    />
-
-    <div class="title">
-      <div class="left"></div>
-      <h1>Moodist</h1>
-      <div class="right"></div>
-    </div>
-
-    <p class="desc">
-      <Balancer>Ambient sounds for focus and calm.</Balancer>
-    </p>
-
-    <p class="sounds">
-      <span class="icon"><BsSoundwave /></span>
-      <span>{count} Sounds</span>
-    </p>
-  </Container>
-</div>
-
-<style>
-  .hero {
-    padding: 100px 0 60px;
-    text-align: center;
-
-    & .logo {
-      display: block;
-      width: 45px;
-      margin: 0 auto 12px;
-    }
-
-    & .title {
-      display: flex;
-      column-gap: 15px;
-      align-items: center;
-
-      & div {
-        flex-grow: 1;
-        height: 1px;
-
-        &.left {
-          background: linear-gradient(
-            90deg,
-            transparent,
-            var(--color-neutral-300)
-          );
-        }
-
-        &.right {
-          background: linear-gradient(
-            90deg,
-            var(--color-neutral-300),
-            transparent
-          );
-        }
-      }
-
-      & h1 {
-        font-family: var(--font-display);
-        font-size: var(--font-2xlg);
-        font-weight: 600;
-      }
-    }
-
-    & .desc {
-      margin-top: 5px;
-      line-height: 1.6;
-      color: var(--color-foreground-subtle);
-    }
-
-    & .sounds {
-      position: relative;
-      display: flex;
-      column-gap: 8px;
-      align-items: center;
-      justify-content: center;
-      width: max-content;
-      height: 28px;
-      padding-right: 12px;
-      margin: 20px auto 0;
-      font-size: var(--font-xsm);
-      color: var(--color-foreground-subtle);
-      background-color: var(--color-neutral-100);
-      border: 1px solid var(--color-neutral-200);
-      border-radius: 100px;
-
-      & .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: 0 8px 0 12px;
-        color: var(--color-foreground);
-        border-right: 1px solid var(--color-neutral-200);
-      }
-
-      &::before {
-        position: absolute;
-        top: -1px;
-        left: 50%;
-        width: 70%;
-        height: 1px;
-        content: '';
-        background: linear-gradient(
-          90deg,
-          transparent,
-          var(--color-neutral-400),
-          transparent
-        );
-        transform: translateX(-50%);
-      }
-    }
-  }
-</style>

src/components/hero/hero.module.css

@@ -0,0 +1,115 @@
+.hero {
+  text-align: center;
+
+  .container {
+    position: relative;
+    padding: 100px 0 60px;
+
+    & .pattern {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      background-image: radial-gradient(
+          var(--color-neutral-200) 10%,
+          transparent 11%
+        ),
+        radial-gradient(var(--color-neutral-200) 10%, transparent 11%);
+      background-position:
+        0 0,
+        20px 20px;
+      background-size: 20px 20px;
+      mask-image: linear-gradient(#fff, transparent);
+    }
+  }
+
+  & .logo {
+    display: block;
+    width: 45px;
+    margin: 0 auto 12px;
+  }
+
+  & .title {
+    display: flex;
+    column-gap: 15px;
+    align-items: center;
+
+    & div {
+      flex-grow: 1;
+      height: 1px;
+
+      &.left {
+        background: linear-gradient(
+          90deg,
+          transparent,
+          var(--color-neutral-300)
+        );
+      }
+
+      &.right {
+        background: linear-gradient(
+          90deg,
+          var(--color-neutral-300),
+          transparent
+        );
+      }
+    }
+
+    & h1 {
+      font-family: var(--font-display);
+      font-size: var(--font-2xlg);
+      font-weight: 600;
+    }
+  }
+
+  & .desc {
+    margin-top: 5px;
+    line-height: 1.6;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .sounds {
+    position: relative;
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+    justify-content: center;
+    width: max-content;
+    height: 28px;
+    padding-right: 12px;
+    margin: 20px auto 0;
+    font-size: var(--font-xsm);
+    color: var(--color-foreground-subtle);
+    background-color: var(--color-neutral-100);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 100px;
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 8px 0 12px;
+      color: var(--color-foreground);
+      border-right: 1px solid var(--color-neutral-200);
+    }
+
+    &::before {
+      position: absolute;
+      top: -1px;
+      left: 50%;
+      width: 70%;
+      height: 1px;
+      content: '';
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-400),
+        transparent
+      );
+      transform: translateX(-50%);
+    }
+  }
+}

src/components/hero/hero.tsx

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import { Balancer } from 'react-wrap-balancer';
+import { BsSoundwave } from 'react-icons/bs/index';
+
+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, []);
+
+  return (
+    <div className={styles.hero}>
+      <Container className={styles.container}>
+        <div className={styles.pattern} />
+
+        <img
+          alt="Faded Moodist Logo"
+          className={styles.logo}
+          height={45}
+          src="/logo.svg"
+          width={45}
+        />
+
+        <div className={styles.title}>
+          <div className={styles.left}></div>
+          <h1>Moodist</h1>
+          <div className={styles.right}></div>
+        </div>
+
+        <p className={styles.desc}>
+          <Balancer>Ambient sounds for focus and calm.</Balancer>
+        </p>
+
+        <p className={styles.sounds}>
+          <span className={styles.icon}>
+            <BsSoundwave />
+          </span>
+          <span>{count} Sounds</span>
+        </p>
+      </Container>
+    </div>
+  );
+}

src/components/hero/index.ts

@@ -0,0 +1 @@
+export { Hero } from './hero';

src/pages/index.astro

@@ -1,12 +1,12 @@
 ---
 import Layout from '@/layouts/layout.astro';
 import Donate from '@/components/donate.astro';
-import Hero from '@/components/hero.astro';
 import Footer from '@/components/footer.astro';
 import AboutSection from '@/components/sections/about.astro';
 import WhySection from '@/components/sections/why.astro';
 import ReadySection from '@/components/sections/ready.astro';
 
+import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
 ---