Adopt Stitch styling for ticket pages

2026-04-16 08:59:43 +02:00
parent ab86f68638
commit 550c837c5e
5 changed files with 1116 additions and 304 deletions
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { MessageSquareDashed } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+    defineProps<{
+        class?: HTMLAttributes['class'];
+        description?: string;
+        feature: string;
+    }>(),
+    {
+        description:
+            'This area is already part of the Stitch concept and will be wired into the app in a later pass.',
+    },
+);
+</script>
+
+<template>
+    <section
+        :class="
+            cn(
+                'rounded-[1.75rem] border border-[#e7de92] bg-[linear-gradient(180deg,#fffbe3_0%,#fdf6b0_100%)] p-5 text-[#615d27] shadow-[0_24px_60px_-42px_rgba(97,93,39,0.45)] dark:border-[#6c6830]/70 dark:bg-[linear-gradient(180deg,rgba(101,97,42,0.24)_0%,rgba(79,75,22,0.42)_100%)] dark:text-[#fdf6b0]',
+                props.class,
+            )
+        "
+    >
+        <div
+            class="inline-flex items-center rounded-full border border-[#ddd382] bg-white/65 px-3 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.2em] text-[#6c6830] dark:border-[#6c6830] dark:bg-black/15 dark:text-[#fdf6b0]"
+        >
+            Coming soon
+        </div>
+
+        <div class="mt-4 flex items-start gap-4">
+            <div
+                class="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-white/70 text-[#65612a] shadow-[inset_0_1px_0_rgba(255,255,255,0.7)] dark:bg-black/20 dark:text-[#fdf6b0]"
+            >
+                <MessageSquareDashed class="size-5" />
+            </div>
+
+            <div class="space-y-2">
+                <h3 class="font-display text-lg font-semibold">
+                    {{ feature }}
+                </h3>
+                <p class="text-sm leading-6 text-[#7d7737] dark:text-[#eee8a3]">
+                    {{ description }}
+                </p>
+            </div>
+        </div>
+    </section>
+</template>