adapts styling of rvg.legal

src/lib/components/Button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    // Define the types for your props
+    type ButtonType = 'button' | 'submit' | 'reset'
+    type ButtonVariant = 'primary' | 'secondary'
+
+    // Define the props object including the Snippet for children
+    let {
+        type = 'button',
+        disabled = false,
+        variant = 'primary',
+        children
+    }: {
+        type?: ButtonType;
+        disabled?: boolean;
+        variant?: ButtonVariant
+        children: import('svelte').Snippet
+    } = $props();
+    
+    const getBgColor = (variant: ButtonVariant) => {
+        return variant === 'primary' ? '#122f62' : 'transparent'
+    }
+    
+    const getTextColor = (variant: ButtonVariant) => {
+        return variant === 'primary' ? 'white': 'primary-900'
+    }
+    
+    let bgColor = $derived(getBgColor(variant))
+    let textColor = $derived(getTextColor(variant))
+    
+</script>
+
+<button
+        type="{type}"
+        class="rounded-container not-disabled:bg-[{bgColor}] disabled:bg-[#0000001f] not-disabled:text-{textColor} disabled:text-[#00000042] whitespace-nowrap text-center text-[14px] leading-9 font-bold px-4 py-0 focus:outline-none focus:ring-2 focus:ring-primary-300 shadow-sm"
+        disabled={disabled}
+>
+    {@render children()}
+</button>

src/lib/components/Card.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type {Snippet} from "svelte";
+
+    type Props = {
+        title?: Snippet
+        content?: Snippet
+        footer?: Snippet
+        class?: string
+    }
+    let {title, content, footer, class: className = ""}: Props = $props()
+</script>
+
+<div class="bg-white rounded-2xl shadow-sm py-2 px-2 {className}">
+    {#if title}
+        <header>{@render title()}</header>
+    {/if}
+    {#if content}
+        <main class="flex grow items-center">{@render content()}</main>
+    {/if}
+    {#if footer}
+        <footer>{@render footer()}</footer>
+    {/if}
+</div>