Replace the landing with the artifact design and rebuild the admin in Ant Design.
Adds consultation leads, section editors, and the one-time content reset for this release. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,74 @@
|
||||
<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>
|
||||
@@ -0,0 +1,140 @@
|
||||
<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="consult.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="consult-modal-title"
|
||||
class="bg-white dark:bg-slate-900 rounded-3xl p-6 sm:p-8 max-w-md 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">
|
||||
<h3 id="consult-modal-title" class="font-bold text-slate-900 dark:text-white text-base">{{ content.title }}</h3>
|
||||
<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="consult.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>
|
||||
|
||||
<form class="space-y-4" @submit.prevent="submit">
|
||||
<div>
|
||||
<label for="consult-name" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">{{ content.nameLabel }}</label>
|
||||
<input
|
||||
id="consult-name"
|
||||
v-model="name"
|
||||
required
|
||||
type="text"
|
||||
autocomplete="name"
|
||||
maxlength="120"
|
||||
:placeholder="content.namePlaceholder"
|
||||
class="w-full text-sm px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100 dark:focus:ring-brand-900/40"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="consult-phone" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">{{ content.phoneLabel }}</label>
|
||||
<input
|
||||
id="consult-phone"
|
||||
v-model="phone"
|
||||
required
|
||||
type="tel"
|
||||
dir="ltr"
|
||||
autocomplete="tel"
|
||||
inputmode="tel"
|
||||
maxlength="20"
|
||||
:placeholder="content.phonePlaceholder"
|
||||
class="w-full text-sm px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100 dark:focus:ring-brand-900/40 text-left"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="consult-type" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">{{ content.typeLabel }}</label>
|
||||
<select
|
||||
id="consult-type"
|
||||
v-model="consult.type.value"
|
||||
class="w-full text-sm px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100 dark:focus:ring-brand-900/40"
|
||||
>
|
||||
<option v-for="opt in content.types" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="submitted" role="status" class="p-3 bg-emerald-50 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-300 text-xs rounded-xl font-medium border border-emerald-200 dark:border-emerald-800/50">
|
||||
{{ content.successMessage }}
|
||||
</div>
|
||||
<div v-else-if="failed" role="alert" class="p-3 bg-rose-50 dark:bg-rose-950/60 text-rose-700 dark:text-rose-300 text-xs rounded-xl font-medium border border-rose-200 dark:border-rose-800/50">
|
||||
{{ content.errorMessage }}
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="w-full py-3 rounded-xl bg-brand-600 text-white text-sm font-bold hover:bg-brand-700 shadow-md transition-colors">
|
||||
{{ content.submitLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { LeadInput } from "@montech/shared";
|
||||
|
||||
const CLOSE_DELAY_MS = 2000;
|
||||
|
||||
const { section } = useSiteContent();
|
||||
const content = section("consult");
|
||||
const consult = useConsultModal();
|
||||
|
||||
const name = ref("");
|
||||
const phone = ref("");
|
||||
const submitted = ref(false);
|
||||
const failed = ref(false);
|
||||
let sending = false;
|
||||
let closeTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
useEscapeKey(consult.isOpen, consult.close);
|
||||
|
||||
watch(consult.isOpen, (open) => {
|
||||
if (open) {
|
||||
submitted.value = false;
|
||||
failed.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function submit() {
|
||||
if (sending) return;
|
||||
sending = true;
|
||||
failed.value = false;
|
||||
const payload: LeadInput = {
|
||||
name: name.value.trim(),
|
||||
phone: phone.value.trim(),
|
||||
businessType: consult.type.value,
|
||||
source: consult.source.value,
|
||||
aiQuery: consult.aiQuery.value || undefined,
|
||||
};
|
||||
try {
|
||||
await apiFetch("/api/public/leads", { method: "POST", body: payload });
|
||||
submitted.value = true;
|
||||
clearTimeout(closeTimer);
|
||||
closeTimer = setTimeout(() => {
|
||||
consult.close();
|
||||
name.value = "";
|
||||
phone.value = "";
|
||||
consult.resetType();
|
||||
submitted.value = false;
|
||||
}, CLOSE_DELAY_MS);
|
||||
} catch {
|
||||
failed.value = true;
|
||||
} finally {
|
||||
sending = false;
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => clearTimeout(closeTimer));
|
||||
</script>
|
||||
Reference in New Issue
Block a user