MahdiandCursor
b0088c35d1
Adds consultation leads, section editors, and the one-time content reset for this release. Co-authored-by: Cursor <cursoragent@cursor.com>
101 lines
4.8 KiB
Vue
101 lines
4.8 KiB
Vue
<template>
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
:aria-label="`${item.title} — درخواست مشاوره`"
|
|
class="spotlight-card fade-item group bg-white dark:bg-slate-900/90 rounded-3xl p-6 border border-slate-200/90 dark:border-slate-800 shadow-soft-card hover:shadow-hover-card transition-all duration-300 flex flex-col justify-between text-center cursor-pointer"
|
|
:class="accent.border"
|
|
:style="tilt.style.value"
|
|
@mousemove="tilt.onMouseMove"
|
|
@mouseleave="tilt.onMouseLeave"
|
|
@click="select"
|
|
@keydown.enter.prevent="select"
|
|
@keydown.space.prevent="select"
|
|
>
|
|
<div>
|
|
<div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
|
|
<svg class="w-16 h-16 drop-shadow-md" viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
|
<template v-if="item.icon === 'cube'">
|
|
<polygon points="32,6 58,20 32,34 6,20" fill="#38b2f8" />
|
|
<polygon points="6,20 32,34 32,60 6,46" fill="#0062f5" />
|
|
<polygon points="58,20 32,34 32,60 58,46" fill="#0046b8" />
|
|
</template>
|
|
<template v-else-if="item.icon === 'bars'">
|
|
<rect x="8" y="34" width="12" height="24" rx="3" fill="#38b2f8" />
|
|
<rect x="26" y="20" width="12" height="38" rx="3" fill="#007dfc" />
|
|
<rect x="44" y="8" width="12" height="50" rx="3" fill="#0050d8" />
|
|
</template>
|
|
<template v-else-if="item.icon === 'avatars'">
|
|
<circle cx="32" cy="18" r="10" fill="#6366f1" />
|
|
<path d="M16 46C16 38 23 34 32 34C41 34 48 38 48 46V50H16V46Z" fill="#4f46e5" />
|
|
<circle cx="48" cy="22" r="7" fill="#818cf8" />
|
|
<path d="M46 36C49 36 56 39 56 46V48H46V36Z" fill="#6366f1" />
|
|
</template>
|
|
<template v-else-if="item.icon === 'cart'">
|
|
<path d="M10 12H18L24 40H48L54 20H20" stroke="#06b6d4" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
<circle cx="26" cy="50" r="5" fill="#0891b2" />
|
|
<circle cx="46" cy="50" r="5" fill="#0891b2" />
|
|
</template>
|
|
<template v-else>
|
|
<polygon points="12,42 22,26 44,26 34,42" fill="#fde047" />
|
|
<polygon points="34,42 44,26 52,32 42,48" fill="#d97706" />
|
|
<polygon points="12,42 34,42 42,48 20,48" fill="#f59e0b" />
|
|
<polygon points="20,24 30,8 52,8 42,24" fill="#fef08a" />
|
|
<polygon points="42,24 52,8 60,14 50,30" fill="#b45309" />
|
|
<polygon points="20,24 42,24 50,30 28,30" fill="#f59e0b" />
|
|
</template>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white transition-colors" :class="accent.title">{{ item.title }}</h3>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-normal">{{ item.subtitle }}</p>
|
|
</div>
|
|
<div class="mt-6 pt-4 flex justify-center">
|
|
<span class="w-8 h-8 rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-300 group-hover:text-white flex items-center justify-center transition-all duration-300 shadow-sm" :class="accent.bubble">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { SolutionAccent, SolutionItem } from "@montech/shared";
|
|
|
|
const props = defineProps<{ item: SolutionItem }>();
|
|
|
|
const ACCENTS: Record<SolutionAccent, { border: string; title: string; bubble: string }> = {
|
|
brand: {
|
|
border: "hover:border-brand-300 dark:hover:border-brand-500/50",
|
|
title: "group-hover:text-brand-600 dark:group-hover:text-brand-400",
|
|
bubble: "group-hover:bg-brand-600",
|
|
},
|
|
sky: {
|
|
border: "hover:border-sky-300 dark:hover:border-sky-500/50",
|
|
title: "group-hover:text-sky-600 dark:group-hover:text-sky-400",
|
|
bubble: "group-hover:bg-sky-500",
|
|
},
|
|
indigo: {
|
|
border: "hover:border-indigo-300 dark:hover:border-indigo-500/50",
|
|
title: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
|
|
bubble: "group-hover:bg-indigo-600",
|
|
},
|
|
cyan: {
|
|
border: "hover:border-cyan-300 dark:hover:border-cyan-500/50",
|
|
title: "group-hover:text-cyan-600 dark:group-hover:text-cyan-400",
|
|
bubble: "group-hover:bg-cyan-500",
|
|
},
|
|
amber: {
|
|
border: "hover:border-amber-300 dark:hover:border-amber-500/50",
|
|
title: "group-hover:text-amber-600 dark:group-hover:text-amber-400",
|
|
bubble: "group-hover:bg-amber-500",
|
|
},
|
|
};
|
|
|
|
const accent = computed(() => ACCENTS[props.item.accent] ?? ACCENTS.brand);
|
|
const tilt = useCardTilt();
|
|
const consult = useConsultModal();
|
|
|
|
function select() {
|
|
consult.open({ type: props.item.consultType, source: "solution" });
|
|
}
|
|
</script>
|