52 lines
1.9 KiB
Vue
52 lines
1.9 KiB
Vue
<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>
|