feat: add donation header

src/components/donate.astro

@@ -0,0 +1,56 @@
+---
+import { Container } from '@/components/container';
+---
+
+<Container>
+  <section class="wrapper">
+    <p class="text">
+      Enjoy Moodist? <a
+        href="https://buymeacoffee.com"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Support with a donation!
+      </a>
+    </p>
+  </section>
+</Container>
+
+<style>
+  .wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 16px;
+    font-size: var(--font-xsm);
+    color: var(--color-foreground-subtle);
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 80%;
+      height: 1px;
+      content: '';
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-200),
+        transparent
+      );
+      transform: translateX(-50%);
+    }
+
+    & .text {
+      text-align: center;
+
+      & a {
+        font-weight: 500;
+        color: var(--color-foreground);
+        text-decoration: none;
+      }
+    }
+  }
+</style>

src/components/hero.astro

@@ -37,7 +37,7 @@ const count = soundCount();
 
 <style>
   .hero {
-    padding: 140px 0 60px;
+    padding: 100px 0 60px;
     text-align: center;
 
     & .logo {

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 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';
@@ -10,6 +11,7 @@ import { App } from '@/components/app';
 ---
 
 <Layout title="Moodist: Ambient Sounds for Focus and Calm">
+  <Donate />
   <Hero />
   <App client:load />
   <AboutSection />