feat: implement barebone zola templates

_src/components/Card.astro

@@ -0,0 +1,57 @@
+---
+export interface Props {
+  title?: string;
+  className?: string;
+}
+
+const { className } = Astro.props;
+---
+
+<div class:list={['card', 'vstack', className]}>
+  <div class="img-header">
+    <slot name="img-header" />
+  </div>
+  <div class="title">
+    <slot name="title" />
+  </div>
+
+  <div class="content flex-grow">
+    <slot />
+  </div>
+
+  <div class="footer">
+    <slot name="footer" />
+  </div>
+</div>
+
+<style lang="scss">
+  .card {
+    background-color: var(--prj-surface-2);
+    color: var(--prj-surface-text);
+    border: 1px solid var(--prj-surface-2);
+    border-radius: var(--prj-border-radius);
+    box-shadow: 5px 5px 5px 5px var(--prj-shadow);
+
+    padding: var(--prj-spacing-2) var(--prj-spacing-3);
+
+    :global(a) {
+      text-decoration-line: none;
+    }
+
+    :global(a):hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  .img-header {
+    :global(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .title > :global(:last-child) {
+    margin-bottom: var(--prj-spacing-2);
+  }
+</style>