feat: implement barebone zola templates

src/components/Card.astro

@@ -1,57 +0,0 @@
----
-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>