feat: add hero section

public/faded-logo.svg

@@ -0,0 +1,36 @@
+<svg width="490" height="299" viewBox="0 0 490 299" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100 0L0 100V298.626L100 198.626V0Z" fill="url(#paint0_linear_68_23)"/>
+<path d="M130 0L230 100V298.626L130 198.626V0Z" fill="url(#paint1_linear_68_23)"/>
+<path d="M260 100L360 0V198.626L260 298.626V100Z" fill="url(#paint2_linear_68_23)"/>
+<path d="M390 0L490 100V298.626L390 198.626V0Z" fill="url(#paint3_linear_68_23)"/>
+<defs>
+<linearGradient id="paint0_linear_68_23" x1="245" y1="0" x2="245" y2="299" gradientUnits="userSpaceOnUse">
+<stop offset="0.12659" stop-color="#F4F4F5"/>
+<stop offset="0.434428" stop-color="#F4F4F5" stop-opacity="0.686026"/>
+<stop offset="0.589354" stop-color="#F4F4F5" stop-opacity="0.450813"/>
+<stop offset="0.795076" stop-color="#F4F4F5" stop-opacity="0.178894"/>
+<stop offset="0.939843" stop-color="#F4F4F5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_68_23" x1="245" y1="0" x2="245" y2="299" gradientUnits="userSpaceOnUse">
+<stop offset="0.12659" stop-color="#F4F4F5"/>
+<stop offset="0.434428" stop-color="#F4F4F5" stop-opacity="0.686026"/>
+<stop offset="0.589354" stop-color="#F4F4F5" stop-opacity="0.450813"/>
+<stop offset="0.795076" stop-color="#F4F4F5" stop-opacity="0.178894"/>
+<stop offset="0.939843" stop-color="#F4F4F5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_68_23" x1="245" y1="0" x2="245" y2="299" gradientUnits="userSpaceOnUse">
+<stop offset="0.12659" stop-color="#F4F4F5"/>
+<stop offset="0.434428" stop-color="#F4F4F5" stop-opacity="0.686026"/>
+<stop offset="0.589354" stop-color="#F4F4F5" stop-opacity="0.450813"/>
+<stop offset="0.795076" stop-color="#F4F4F5" stop-opacity="0.178894"/>
+<stop offset="0.939843" stop-color="#F4F4F5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_68_23" x1="245" y1="0" x2="245" y2="299" gradientUnits="userSpaceOnUse">
+<stop offset="0.12659" stop-color="#F4F4F5"/>
+<stop offset="0.434428" stop-color="#F4F4F5" stop-opacity="0.686026"/>
+<stop offset="0.589354" stop-color="#F4F4F5" stop-opacity="0.450813"/>
+<stop offset="0.795076" stop-color="#F4F4F5" stop-opacity="0.178894"/>
+<stop offset="0.939843" stop-color="#F4F4F5" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

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';

src/env.d.ts

@@ -1 +1,3 @@
 /// <reference types="astro/client" />
+
+declare module '*.module.css';

src/pages/index.astro

@@ -1,76 +1,9 @@
 ---
 import Layout from '@/layouts/layout.astro';
+
+import { Hero } from '@/components/hero';
 ---
 
 <Layout title="Welcome to Astro.">
-  <main>Hello World</main>
+  <Hero />
 </Layout>
-
-<style>
-  main {
-    width: 800px;
-    max-width: calc(100% - 2rem);
-    padding: 1rem;
-    margin: auto;
-    color: white;
-    font-size: 20px;
-    line-height: 1.6;
-  }
-
-  .astro-a {
-    position: absolute;
-    z-index: -1;
-    top: -32px;
-    left: 50%;
-    width: 220px;
-    height: auto;
-    transform: translateX(-50%);
-  }
-
-  h1 {
-    margin-bottom: 1em;
-    font-size: 4rem;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-  }
-
-  .text-gradient {
-    background-clip: text;
-    background-image: var(--accent-gradient);
-    background-position: 0%;
-    background-size: 400%;
-    -webkit-text-fill-color: transparent;
-  }
-
-  .instructions {
-    padding: 1.5rem;
-    border: 1px solid rgb(var(--accent-light) 25%);
-    border-radius: 8px;
-    margin-bottom: 2rem;
-    background: linear-gradient(
-      rgb(var(--accent-dark) 66%),
-      rgb(var(--accent-dark) 33%)
-    );
-  }
-
-  .instructions code {
-    padding: 0.3em 0.4em;
-    border-radius: 4px;
-    background: rgb(var(--accent-light) 12%);
-    color: rgb(var(--accent-light));
-    font-size: 0.8em;
-    font-weight: bold;
-  }
-
-  .instructions strong {
-    color: rgb(var(--accent-light));
-  }
-
-  .link-card-grid {
-    display: grid;
-    padding: 0;
-    gap: 2rem;
-    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-  }
-</style>