75 lines
3.7 KiB
Vue
75 lines
3.7 KiB
Vue
 
|
<template>
|
||
|
|
<transition
|
||
|
|
appear
|
||
|
|
enter-active-class="transition duration-300 ease-out"
|
||
|
|
enter-from-class="opacity-0 scale-95"
|
||
|
|
enter-to-class="opacity-100 scale-100"
|
||
|
|
leave-active-class="transition duration-200 ease-in"
|
||
|
|
leave-from-class="opacity-100 scale-100"
|
||
|
|
leave-to-class="opacity-0 scale-95"
|
||
|
|
>
|
||
|
|
<div v-if="ai.isOpen.value" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 dark:bg-black/75 backdrop-blur-sm">
|
||
|
|
<div
|
||
|
|
role="dialog"
|
||
|
|
aria-modal="true"
|
||
|
|
aria-labelledby="ai-modal-title"
|
||
|
|
class="bg-white dark:bg-slate-900 rounded-3xl p-6 sm:p-8 max-w-lg w-full shadow-2xl border border-slate-100 dark:border-slate-800 text-right space-y-5"
|
||
|
|
>
|
||
|
|
<div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="w-3 h-3 rounded-full bg-emerald-500 animate-ping" />
|
||
|
|
<span id="ai-modal-title" class="font-bold text-slate-800 dark:text-white text-sm">{{ content.title }}</span>
|
||
|
|
</div>
|
||
|
|
<button type="button" aria-label="بستن" class="p-1 rounded-lg text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" @click="ai.close()">
|
||
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="text-xs text-slate-400 dark:text-slate-500 mb-1">{{ content.queryLabel }}</div>
|
||
|
|
<div class="text-sm font-semibold text-slate-800 dark:text-slate-200 bg-slate-50 dark:bg-slate-800 p-3 rounded-xl border border-slate-200 dark:border-slate-700">
|
||
|
|
«{{ ai.query.value || content.fallbackQuery }}»
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="text-xs font-bold text-brand-600 dark:text-brand-400">{{ content.packageLabel }}</div>
|
||
|
|
<div class="bg-brand-50/70 dark:bg-brand-950/40 border border-brand-200 dark:border-brand-800/60 rounded-2xl p-4 space-y-2">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<span class="font-bold text-slate-900 dark:text-white text-sm">{{ content.packageTitle }}</span>
|
||
|
|
<span class="text-xs bg-brand-600 text-white px-2 py-0.5 rounded-full font-bold">{{ content.matchBadge }}</span>
|
||
|
|
</div>
|
||
|
|
<ul class="text-xs text-slate-600 dark:text-slate-300 space-y-1.5 list-disc list-inside">
|
||
|
|
<li v-for="item in content.items" :key="item">{{ item }}</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex gap-3 pt-2">
|
||
|
|
<button type="button" class="flex-1 py-3 rounded-xl bg-brand-600 text-white text-sm font-bold shadow-md hover:bg-brand-700 transition-colors" @click="consultThisPackage">
|
||
|
|
{{ content.primaryCta }}
|
||
|
|
</button>
|
||
|
|
<button type="button" class="px-5 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" @click="ai.close()">
|
||
|
|
{{ content.closeLabel }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
const { section } = useSiteContent();
|
||
|
|
const hero = section("hero");
|
||
|
|
const content = computed(() => hero.value.ai);
|
||
|
|
const ai = useAiModal();
|
||
|
|
const consult = useConsultModal();
|
||
|
|
|
||
|
|
useEscapeKey(ai.isOpen, ai.close);
|
||
|
|
|
||
|
|
function consultThisPackage() {
|
||
|
|
ai.close();
|
||
|
|
consult.open({ source: "ai", aiQuery: ai.query.value });
|
||
|
|
}
|
||
|
|
</script>
|