feat: add some stuff

src/components/card/Content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let classes = "";
+</script>
+
+<div class="flex flex-1 flex-col gap-4 {classes} w-[66%]">
+  <slot />
+</div>

src/components/card/Description.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+</script>
+
+<p class="max-h-32 text-ellipsis overflow-hidden line-clamp-4">
+  <slot />
+</p>
+
+<style>
+</style>

src/components/card/Image.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let alt: string;
+  export let src: string;
+  export let width: number;
+  export let height: number;
+</script>
+
+<img {src} {alt} {width} {height} />
+
+<style>
+  img {
+    width: 33%;
+    object-fit: cover;
+  }
+</style>

src/components/card/ReadMoreButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let link: string;
+</script>
+
+<a
+  href={link}
+  data-astro-prefetch
+  class="bg-light p-2 text-s rounded-md px-4 flex flex-0 items-center gap-2 w-fit"
+>
+  read more <span class="i-tabler-arrow-right inline-block w-4 h-4" />
+</a>

src/components/card/Title.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+</script>
+
+<h2 class="text-2xl">
+  <slot />
+</h2>

src/components/card/Wrapper.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let classes = "flex bg";
+</script>
+
+<div class="relative rounded-diag-md {classes} noise">
+  <slot />
+</div>
+
+<style>
+  .card-wrapper {
+    align-items: stretch;
+
+    min-height: 200px;
+    border: solid thin var(--outline);
+    max-width: 100%;
+    max-height: 300px;
+    overflow: hidden;
+  }
+</style>

src/components/card/index.ts

@@ -0,0 +1,23 @@
+import Wrapper from './Wrapper.svelte';
+import Image from './Image.svelte';
+import Content from './Content.svelte';
+import Title from './Title.svelte';
+import Description from './Description.svelte';
+import ReadMoreButton from './ReadMoreButton.svelte';
+
+const Card = {
+  ...Wrapper,
+  Image,
+  Content,
+  Title,
+  Description,
+  ReadMoreButton
+} as typeof Wrapper & {
+  Image: typeof Image;
+  Content: typeof Content;
+  Title: typeof Title;
+  Description: typeof Description;
+  ReadMoreButton: typeof ReadMoreButton;
+}
+
+export { Card };