feat: add hero section

src/components/container/container.module.css

@@ -0,0 +1,5 @@
+.container {
+  width: 85%;
+  max-width: 550px;
+  margin: 0 auto;
+}

src/components/container/container.tsx

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

src/components/container/index.ts

@@ -0,0 +1 @@
+export { Container } from './container';

src/components/hero/hero.module.css

@@ -0,0 +1,73 @@
+.hero {
+  padding: 100px 0;
+  text-align: center;
+
+  & .logo {
+    display: block;
+    width: 65px;
+    margin: 0 auto 5px;
+  }
+
+  & .title {
+    display: flex;
+    align-items: center;
+    column-gap: 15px;
+
+    & div {
+      height: 1px;
+      flex-grow: 1;
+
+      &.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;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .free {
+    position: relative;
+    display: flex;
+    width: max-content;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 16px;
+    border: 1px solid #2563eb;
+    border-radius: 100px;
+    margin: 20px auto 0;
+    background-color: rgb(37 99 235 / 30%);
+    font-size: var(--font-xsm);
+
+    &::before {
+      position: absolute;
+      top: -1px;
+      left: 50%;
+      width: 70%;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, #60a5fa, transparent);
+      content: '';
+      transform: translateX(-50%);
+    }
+  }
+}

src/components/hero/hero.tsx

@@ -0,0 +1,27 @@
+import { Container } from '@/components/container';
+
+import styles from './hero.module.css';
+
+export function Hero() {
+  return (
+    <div className={styles.hero}>
+      <Container>
+        <img
+          alt="Faded Moodist Logo"
+          className={styles.logo}
+          src="/faded-logo.svg"
+        />
+
+        <div className={styles.title}>
+          <div className={styles.left} />
+          <h1>Moodist</h1>
+          <div className={styles.right} />
+        </div>
+
+        <p className={styles.desc}>Ambient background sounds for focus.</p>
+
+        <p className={styles.free}>100% Free</p>
+      </Container>
+    </div>
+  );
+}

src/components/hero/index.ts

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