From 77f9fcc50e54cecb31877eaccb3a578c291f99fe Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sat, 9 Dec 2023 16:37:00 +0330
Subject: [PATCH] refactor: turn hero into Astro component

---
 src/components/hero.astro           | 114 ++++++++++++++++++++++++++++
 src/components/hero/hero.module.css |  79 -------------------
 src/components/hero/hero.tsx        |  38 ----------
 src/components/hero/index.ts        |   1 -
 src/pages/index.astro               |   2 +-
 5 files changed, 115 insertions(+), 119 deletions(-)
 create mode 100644 src/components/hero.astro
 delete mode 100644 src/components/hero/hero.module.css
 delete mode 100644 src/components/hero/hero.tsx
 delete mode 100644 src/components/hero/index.ts

diff --git a/src/components/hero.astro b/src/components/hero.astro
new file mode 100644
index 0000000..3dae288
--- /dev/null
+++ b/src/components/hero.astro
@@ -0,0 +1,114 @@
+---
+import { Balancer } from 'react-wrap-balancer';
+
+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">{count} Sounds</p>
+  </Container>
+</div>
+
+<style>
+  .hero {
+    padding: 140px 0 60px;
+    text-align: center;
+
+    & .logo {
+      display: block;
+      width: 45px;
+      margin: 0 auto 12px;
+    }
+
+    & .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);
+      line-height: 1.6;
+    }
+
+    & .sounds {
+      position: relative;
+      display: flex;
+      width: max-content;
+      align-items: center;
+      justify-content: center;
+      padding: 6px 16px;
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 100px;
+      margin: 20px auto 0;
+      background-color: var(--color-neutral-100);
+      font-size: var(--font-xsm);
+
+      &::before {
+        position: absolute;
+        top: -1px;
+        left: 50%;
+        width: 70%;
+        height: 1px;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          var(--color-neutral-400),
+          transparent
+        );
+        content: '';
+        transform: translateX(-50%);
+      }
+    }
+  }
+</style>
diff --git a/src/components/hero/hero.module.css b/src/components/hero/hero.module.css
deleted file mode 100644
index 0147fdf..0000000
--- a/src/components/hero/hero.module.css
+++ /dev/null
@@ -1,79 +0,0 @@
-.hero {
-  padding: 140px 0 60px;
-  text-align: center;
-
-  & .logo {
-    display: block;
-    width: 45px;
-    margin: 0 auto 12px;
-  }
-
-  & .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);
-    line-height: 1.6;
-  }
-
-  & .sounds {
-    position: relative;
-    display: flex;
-    width: max-content;
-    align-items: center;
-    justify-content: center;
-    padding: 6px 16px;
-    border: 1px solid var(--color-neutral-200);
-    border-radius: 100px;
-    margin: 20px auto 0;
-    background-color: var(--color-neutral-100);
-    font-size: var(--font-xsm);
-
-    &::before {
-      position: absolute;
-      top: -1px;
-      left: 50%;
-      width: 70%;
-      height: 1px;
-      background: linear-gradient(
-        90deg,
-        transparent,
-        var(--color-neutral-400),
-        transparent
-      );
-      content: '';
-      transform: translateX(-50%);
-    }
-  }
-}
diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx
deleted file mode 100644
index 75a7792..0000000
--- a/src/components/hero/hero.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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, []);
-
-  return (
-    <div className={styles.hero}>
-      <Container>
-        <img
-          alt="Faded Moodist Logo"
-          className={styles.logo}
-          height={45}
-          src="/logo.svg"
-          width={45}
-        />
-
-        <div className={styles.title}>
-          <div className={styles.left} />
-          <h1>Moodist</h1>
-          <div className={styles.right} />
-        </div>
-
-        <p className={styles.desc}>
-          <Balancer>Ambient sounds for focus and calm.</Balancer>
-        </p>
-
-        <p className={styles.sounds}>{count} Sounds</p>
-      </Container>
-    </div>
-  );
-}
diff --git a/src/components/hero/index.ts b/src/components/hero/index.ts
deleted file mode 100644
index 1e9ccae..0000000
--- a/src/components/hero/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Hero } from './hero';
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 02de497..991b709 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,11 @@
 ---
 import Layout from '@/layouts/layout.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';
 ---