feat(Components): Add Button and BackgroudnImage

src/components/BackgroundImageDiv.astro

@@ -0,0 +1,35 @@
+---
+import { getImage } from 'astro:assets';
+
+interface Props {
+  src: string;
+  width: number;
+  height: number;
+}
+
+const { src, width, height } = Astro.props;
+
+const optimizedBackground = await getImage({
+  src,
+  width,
+  height,
+  format: 'webp',
+});
+---
+
+<div id="bg">
+  <slot />
+</div>
+
+<style define:vars={{ bgImage: `url(${optimizedBackground.src})` }}>
+  #bg {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+      var(--bgImage);
+    background-position: center;
+    background-size: cover;
+    color: var(--prj-bg);
+
+    padding-top: var(--prj-spacing-3);
+    padding-bottom: var(--prj-spacing-3);
+  }
+</style>

src/components/Button/Button.astro

@@ -0,0 +1,27 @@
+---
+interface Props {
+  className?: string;
+}
+
+const { className = '' } = Astro.props;
+---
+
+<button class:list={className}>
+  <slot />
+</button>
+
+<style>
+  button {
+    font-size: 1rem;
+    padding: var(--prj-spacing-1) var(--prj-spacing-3);
+    background-color: var(--prj-accent-bg);
+    color: var(--prj-accent-text);
+
+    border-radius: 6px;
+    border-color: var(--prj-accent-bg);
+
+    cursor: pointer;
+
+    margin-bottom: 0;
+  }
+</style>

src/components/Card.astro

@@ -9,7 +9,7 @@ export interface Props {
     <slot name="title" />
   </div>
 
-  <div class="content flex-grow mb-3">
+  <div class="content flex-grow">
     <slot />
   </div>