Implement Fluid Emerald app redesign

2026-07-18 16:45:54 +02:00
parent 59817ad30f
commit a46695c2eb
62 changed files with 2165 additions and 1434 deletions
@@ -1,27 +1,26 @@
 <script setup lang="ts">
-type Props = {
-    title: string;
-    description?: string;
-    variant?: 'default' | 'small';
-};
+import type { HeadingProps } from '@/types';

-withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<HeadingProps>(), {
    variant: 'default',
 });
 </script>

 <template>
-    <header :class="variant === 'small' ? '' : 'mb-8 space-y-0.5'">
+    <header :class="variant === 'small' ? '' : 'space-y-1.5'">
        <h2
            :class="
                variant === 'small'
-                    ? 'mb-0.5 text-base font-medium'
-                    : 'text-xl font-semibold tracking-tight'
+                    ? 'mb-0.5 text-base font-semibold tracking-tight'
+                    : 'text-2xl font-semibold tracking-[-0.025em] sm:text-[1.75rem]'
            "
        >
            {{ title }}
        </h2>
-        <p v-if="description" class="text-muted-foreground text-sm">
+        <p
+            v-if="description"
+            class="text-muted-foreground max-w-3xl text-sm leading-6"
+        >
            {{ description }}
        </p>
    </header>