Files
Montech_Landing/apps/landing/code_artifact.html
T
MahdiandCursor b0088c35d1 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>
2026-10-01 20:36:06 +03:30

1717 lines
108 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="fa" dir="rtl" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>منتک | هوش‌افزار منظر - پلتفرم راهکارهای نرم‌افزاری و هوش مصنوعی</title>
<!-- Google Font: Vazirmatn -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Vue 3 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- GSAP for Smooth Micro-Animations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<!-- Lenis for Inertial Scrolling -->
<script src="https://unpkg.com/lenis@1.1.18/dist/lenis.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Vazirmatn', 'system-ui', '-apple-system', 'sans-serif'],
},
colors: {
brand: {
50: '#f0f6ff',
100: '#e0effe',
200: '#bae2fd',
300: '#7ccbfd',
400: '#38b2f8',
500: '#007dfc',
600: '#0062f5',
700: '#0050d8',
800: '#0642ad',
900: '#0b3987',
},
deepNavy: '#0a192f',
},
boxShadow: {
'soft-card': '0 12px 36px -8px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.03)',
'hover-card': '0 24px 50px -10px rgba(0, 98, 245, 0.15), 0 8px 24px -4px rgba(15, 23, 42, 0.06)',
'device-3d': '0 45px 95px -20px rgba(15, 23, 42, 0.38), 0 20px 45px -15px rgba(0, 98, 245, 0.18)',
'phone-3d': '0 35px 75px -15px rgba(15, 23, 42, 0.45), 0 15px 30px -10px rgba(0, 98, 245, 0.22)',
'glow-cta': '0 18px 40px -8px rgba(0, 98, 245, 0.35)',
},
}
}
}
</script>
<style>
/* Lenis Smooth Scroll Essential Styles */
html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
body {
font-family: 'Vazirmatn', sans-serif;
background-color: #fafcff;
color: #0f172a;
overflow-x: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Ambient Subtle Mesh Background - Light & Dark */
.hero-mesh {
background-image:
radial-gradient(circle at 15% 15%, rgba(0, 98, 245, 0.06) 0%, transparent 45%),
radial-gradient(circle at 85% 25%, rgba(56, 178, 248, 0.07) 0%, transparent 40%),
radial-gradient(circle at 50% 80%, rgba(2, 132, 199, 0.05) 0%, transparent 60%);
}
html.dark .hero-mesh {
background-image:
radial-gradient(circle at 15% 15%, rgba(0, 98, 245, 0.18) 0%, transparent 50%),
radial-gradient(circle at 85% 25%, rgba(56, 178, 248, 0.12) 0%, transparent 45%),
radial-gradient(circle at 50% 80%, rgba(2, 132, 199, 0.09) 0%, transparent 65%);
}
/* Perspective 3D Stage */
.perspective-stage {
perspective: 1800px;
perspective-origin: 50% 45%;
}
/* Real Studio Depth-of-field Plant Foliage */
.studio-botanical-leaf {
position: absolute;
top: -45px;
right: 25px;
width: 280px;
height: 300px;
pointer-events: none;
z-index: 5;
filter: blur(12px) saturate(1.15);
opacity: 0.42;
transform: rotate(22deg) scale(1.08);
transform-origin: top right;
}
/* Ultra-Realistic MacBook Pro 16" Studio Mockup Frame */
.mockup-macbook-wrap {
transform-style: preserve-3d;
will-change: transform;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
filter: drop-shadow(0 35px 55px rgba(15, 23, 42, 0.26)) drop-shadow(0 15px 25px rgba(0, 98, 245, 0.12));
}
.macbook-screen-chassis {
background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
border: 1.5px solid rgba(255, 255, 255, 0.2);
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.95),
inset 0 1px 2px rgba(255, 255, 255, 0.35),
0 1px 0 rgba(255, 255, 255, 0.1);
}
.macbook-deck-base {
background: linear-gradient(180deg, #94a3b8 0%, #64748b 35%, #334155 70%, #1e293b 100%);
border-top: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 20px 45px -5px rgba(15, 23, 42, 0.45),
0 6px 14px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Ultra-Realistic iPhone 16 Pro (True 19.5:9 Aspect Ratio) */
.mockup-iphone-wrap {
transform-style: preserve-3d;
will-change: transform;
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
filter: drop-shadow(0 32px 50px rgba(15, 23, 42, 0.42)) drop-shadow(0 14px 24px rgba(0, 98, 245, 0.2));
}
.iphone-titanium-bezel {
background: linear-gradient(135deg, #475569 0%, #1e293b 35%, #0f172a 75%, #334155 100%);
border: 2.5px solid #475569;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 0.25),
0 0 0 2px rgba(15, 23, 42, 0.9);
position: relative;
}
/* Physical buttons on titanium chassis */
.iphone-titanium-bezel::before {
content: '';
position: absolute;
left: -5.5px;
top: 95px;
width: 3.5px;
height: 48px;
background: #475569;
border-radius: 2px 0 0 2px;
box-shadow: -1px 0 2px rgba(0,0,0,0.4);
}
.iphone-titanium-bezel::after {
content: '';
position: absolute;
right: -5.5px;
top: 85px;
width: 3.5px;
height: 65px;
background: #475569;
border-radius: 0 2px 2px 0;
box-shadow: 1px 0 2px rgba(0,0,0,0.4);
}
/* Screen Glass Specular Reflection */
.mockup-glass-sheen {
position: absolute;
inset: 0;
background: linear-gradient(132deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 60%);
pointer-events: none;
z-index: 30;
}
/* Photorealistic 3D Gold Bar Shimmer */
.gold-bar-realistic {
background: linear-gradient(135deg, #fffbeb 0%, #fef08a 22%, #f59e0b 55%, #b45309 85%, #78350f 100%);
box-shadow:
inset 0 1.5px 3px rgba(255, 255, 255, 0.95),
inset 0 -2px 4px rgba(0, 0, 0, 0.45),
0 8px 16px -3px rgba(217, 119, 6, 0.4);
}
/* Ground Contact Shadow for 3D realism */
.device-ground-shadow {
position: absolute;
bottom: -15px;
left: 6%;
right: 6%;
height: 38px;
background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.12) 50%, transparent 80%);
filter: blur(9px);
pointer-events: none;
z-index: 1;
}
/* Interactive Spotlight Card */
.spotlight-card {
position: relative;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
will-change: transform;
}
.spotlight-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(300px circle at var(--mouse-x, -200px) var(--mouse-y, -200px), rgba(0, 98, 245, 0.12), transparent 70%);
pointer-events: none;
z-index: 10;
opacity: 0;
transition: opacity 0.3s ease;
}
.spotlight-card:hover::before {
opacity: 1;
}
/* Smooth Progress Header Indicator */
#scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3.5px;
background: linear-gradient(90deg, #38b2f8, #0062f5, #0050d8);
z-index: 100;
transform-origin: 0% 50%;
transform: scaleX(0);
}
/* Fade-in Scroll Item Default */
.fade-item {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.fade-item.revealed {
opacity: 1;
transform: translateY(0);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
html.dark ::-webkit-scrollbar-track {
background: #0b1329;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 9999px;
}
html.dark ::-webkit-scrollbar-thumb {
background: #334155;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
html.dark ::-webkit-scrollbar-thumb:hover {
background: #475569;
}
</style>
</head>
<body class="selection:bg-brand-600 selection:text-white antialiased hero-mesh dark:bg-[#070d19] dark:text-slate-100">
<!-- Top Real-time Scroll Progress Bar -->
<div id="scroll-progress"></div>
<div id="app" class="relative overflow-x-clip min-h-screen flex flex-col justify-between">
<!-- ========================================== -->
<!-- HEADER / NAVIGATION (With Dark Mode Toggle)-->
<!-- ========================================== -->
<header class="sticky top-0 z-50 transition-all duration-300 bg-white/90 dark:bg-[#0b1329]/90 backdrop-blur-xl border-b border-slate-200/70 dark:border-slate-800/80 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
<!-- Left Column in RTL: CTA + Theme Toggle Button -->
<div class="flex items-center gap-3">
<!-- Interactive Dark/Light Theme Switcher -->
<button @click="toggleDarkMode"
type="button"
:title="isDarkMode ? 'تغییر به حالت روشن' : 'تغییر به حالت تاریک'"
class="p-2.5 rounded-full border border-slate-200/90 dark:border-slate-700/80 bg-slate-100/80 dark:bg-slate-800/90 text-slate-600 dark:text-amber-400 hover:text-brand-600 dark:hover:text-amber-300 transition-all duration-300 shadow-sm hover:scale-105 active:scale-95 focus:outline-none">
<!-- Sun Icon (Shown in Dark Mode) -->
<svg v-if="isDarkMode" class="w-5 h-5 transition-transform rotate-0 hover:rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Moon Icon (Shown in Light Mode) -->
<svg v-else class="w-5 h-5 text-slate-700 transition-transform hover:-rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
<button @click="openConsultModal"
class="hidden sm:inline-flex items-center gap-2.5 px-6 py-2.5 rounded-full bg-brand-600 hover:bg-brand-700 active:scale-95 text-white text-sm font-semibold transition-all duration-300 shadow-md shadow-brand-600/25 group">
<span class="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center -mr-1 transition-transform group-hover:-translate-x-1">
<svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
</span>
<span>مشاوره رایگان</span>
</button>
<!-- Mobile Hamburger Toggle -->
<button @click="isMobileMenuOpen = !isMobileMenuOpen" class="md:hidden p-2 rounded-xl text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors focus:outline-none">
<svg v-if="!isMobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Center Column in RTL: Navigation Links -->
<nav class="hidden md:flex items-center gap-8 text-sm font-semibold text-slate-600 dark:text-slate-300">
<a href="#contact" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors duration-200">تماس با ما</a>
<a href="#testimonials" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors duration-200">نظرات مشتریان</a>
<a href="#about" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors duration-200">درباره ما</a>
<a href="#features" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors duration-200">نمونه‌‌کارها</a>
<a href="#solutions" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors duration-200">محصولات</a>
</nav>
<!-- Right Column in RTL: Logo "منتک | MONTECH" -->
<a href="#" class="flex items-center gap-3 group focus:outline-none">
<div class="flex flex-col text-right">
<span class="text-2xl font-black tracking-tight text-slate-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">منتک</span>
<span class="text-[9px] font-black text-slate-400 dark:text-slate-500 tracking-[0.25em] uppercase -mt-1">MONTECH</span>
</div>
<!-- Stylized Origami 'M' Icon -->
<div class="relative flex items-center justify-center w-11 h-11 rounded-2xl bg-gradient-to-br from-brand-600 via-brand-500 to-sky-400 text-white shadow-md shadow-brand-600/25 transition-all duration-500 group-hover:scale-105 group-hover:shadow-brand-600/40">
<svg class="w-7 h-7" viewBox="0 0 32 32" fill="none">
<path d="M6 22L12 8L16 15L20 8L26 22" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="16" cy="22" r="2.2" fill="white"/>
</svg>
</div>
</a>
</div>
<!-- Mobile Navigation Drawer -->
<transition enter-active-class="transition duration-300 ease-out"
enter-from-class="transform -translate-y-4 opacity-0"
enter-to-class="transform translate-y-0 opacity-100"
leave-active-class="transition duration-200 ease-in"
leave-from-class="transform translate-y-0 opacity-100"
leave-to-class="transform -translate-y-4 opacity-0">
<div v-if="isMobileMenuOpen" class="md:hidden bg-white/95 dark:bg-[#0b1329]/95 backdrop-blur-xl border-b border-slate-200 dark:border-slate-800 px-6 py-5 space-y-4 shadow-2xl">
<a @click="isMobileMenuOpen = false" href="#solutions" class="block text-base font-semibold text-slate-700 dark:text-slate-200 hover:text-brand-600 dark:hover:text-brand-400">محصولات</a>
<a @click="isMobileMenuOpen = false" href="#features" class="block text-base font-semibold text-slate-700 dark:text-slate-200 hover:text-brand-600 dark:hover:text-brand-400">نمونه‌کارها</a>
<a @click="isMobileMenuOpen = false" href="#about" class="block text-base font-semibold text-slate-700 dark:text-slate-200 hover:text-brand-600 dark:hover:text-brand-400">درباره ما</a>
<a @click="isMobileMenuOpen = false" href="#testimonials" class="block text-base font-semibold text-slate-700 dark:text-slate-200 hover:text-brand-600 dark:hover:text-brand-400">نظرات مشتریان</a>
<a @click="isMobileMenuOpen = false" href="#contact" class="block text-base font-semibold text-slate-700 dark:text-slate-200 hover:text-brand-600 dark:hover:text-brand-400">تماس با ما</a>
<div class="pt-2 flex flex-col gap-2">
<button @click="openConsultModal(); isMobileMenuOpen = false" class="w-full flex items-center justify-center gap-2 py-3 rounded-full bg-brand-600 text-white font-bold shadow-md">
<span>مشاوره رایگان</span>
<svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
</button>
</div>
</div>
</transition>
</header>
<main class="flex-grow">
<!-- ========================================== -->
<!-- HERO SECTION (Realistic Studio Mockups) -->
<!-- ========================================== -->
<section class="relative pt-8 pb-16 lg:pt-14 lg:pb-24 overflow-hidden hero-parallax-section">
<!-- Ambient Atmospheric Glow Orbs -->
<div class="absolute top-1/4 right-0 w-[550px] h-[550px] bg-brand-100/50 dark:bg-brand-600/15 rounded-full blur-[140px] pointer-events-none -z-10"></div>
<div class="absolute bottom-10 left-10 w-[500px] h-[500px] bg-sky-100/50 dark:bg-sky-600/10 rounded-full blur-[140px] pointer-events-none -z-10"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
<!-- Hero Content Column (Positioned on Right in RTL) -->
<div class="lg:col-span-5 space-y-6 text-right">
<!-- Subtle Eyebrow Label -->
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200/70 dark:border-slate-700/70 text-xs font-semibold text-slate-500 dark:text-slate-300">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
<span>هوش‌افزار،منظر | منتک</span>
</div>
<!-- Main Headline with Accent Gradient matching design -->
<h1 class="text-4xl sm:text-5xl lg:text-[54px] font-black text-slate-900 dark:text-white leading-[1.28] tracking-tight">
کسب‌وکارت را بگو؛
<br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 via-brand-500 to-sky-400">
راهکارش را پیدا کن.
</span>
</h1>
<!-- Subtitle Description -->
<p class="text-base sm:text-lg text-slate-600 dark:text-slate-300 font-normal leading-relaxed max-w-xl">
با کمک هوش مصنوعی منتک، بهترین نرم‌افزارها و خدمات متناسب با کسب‌وکار شما پیشنهاد می‌شود.
</p>
<!-- Interactive AI Smart Search Input with Round Arrow Button -->
<div class="pt-2 max-w-xl">
<form @submit.prevent="handleAiSearch" class="relative group">
<div class="relative flex items-center bg-white dark:bg-slate-900/95 rounded-full p-2 pl-2 shadow-soft-card hover:shadow-hover-card border border-slate-200/90 dark:border-slate-700/80 focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-100/70 dark:focus-within:ring-brand-900/40 transition-all duration-300">
<!-- Submit Round Button on Left (RTL) with White Left Arrow -->
<button type="submit"
aria-label="جستجوی هوشمند"
class="flex-shrink-0 w-12 h-12 rounded-full bg-brand-600 text-white flex items-center justify-center hover:bg-brand-700 active:scale-95 transition-all shadow-md shadow-brand-600/30">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
</button>
<!-- Input Box -->
<input v-model="aiQuery"
type="text"
placeholder="مثلاً: من یک فروشگاه دارم و CRM می‌خواهم..."
class="w-full bg-transparent text-sm sm:text-base text-slate-800 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none pr-3 pl-3 font-normal text-right" />
<!-- Sparkle / AI Star Icon inside input on Right -->
<div class="pr-3 pl-2 text-brand-500 flex items-center justify-center">
<svg class="w-5 h-5 text-brand-500" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L14.2 8.3L20.5 10.5L14.2 12.7L12 19L9.8 12.7L3.5 10.5L9.8 8.3L12 2Z"/>
</svg>
</div>
</div>
<!-- Quick Suggestion Interactive Pills -->
<div class="mt-3.5 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
<span class="font-medium text-slate-400 dark:text-slate-500">پیشنهادات پرطرفدار:</span>
<button type="button" @click="setAiQuery('مدیریت موجودی و حسابداری فروشگاه طلا و جواهر')"
class="px-3 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-brand-50 dark:hover:bg-brand-950 hover:text-brand-600 dark:hover:text-brand-300 border border-transparent hover:border-brand-200 dark:hover:border-brand-800 transition-all">
طلا و جواهر
</button>
<button type="button" @click="setAiQuery('نرم‌افزار CRM و ثبت سفارش آنلاین')"
class="px-3 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-brand-50 dark:hover:bg-brand-950 hover:text-brand-600 dark:hover:text-brand-300 border border-transparent hover:border-brand-200 dark:hover:border-brand-800 transition-all">
سیستم CRM
</button>
<button type="button" @click="setAiQuery('راهکار حسابداری یکپارچه چند شعبه')"
class="px-3 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-brand-50 dark:hover:bg-brand-950 hover:text-brand-600 dark:hover:text-brand-300 border border-transparent hover:border-brand-200 dark:hover:border-brand-800 transition-all">
حسابداری
</button>
<button type="button" @click="setAiQuery('فروشگاه اینترنتی متصل به انبار')"
class="px-3 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-brand-50 dark:hover:bg-brand-950 hover:text-brand-600 dark:hover:text-brand-300 border border-transparent hover:border-brand-200 dark:hover:border-brand-800 transition-all">
فروشگاه آنلاین
</button>
</div>
</form>
</div>
</div>
<!-- Photorealistic 3D Mockup Visual Stage (Left Side in RTL) -->
<div class="lg:col-span-7 relative perspective-stage flex justify-center items-center py-6 min-h-[520px] sm:min-h-[580px]"
@mousemove="handleHeroMouseMove"
@mouseleave="resetHeroMouse">
<!-- Realistic Studio Blurred Foliage Element in Background -->
<div class="studio-botanical-leaf hidden sm:block">
<svg viewBox="0 0 280 280" fill="none" class="w-full h-full text-emerald-950/25 dark:text-emerald-500/15">
<path d="M50,220 C35,120 100,40 220,25 C250,90 200,190 95,235 C75,240 60,235 50,220 Z" fill="currentColor"/>
<path d="M75,195 C110,160 145,120 195,75" stroke="#047857" stroke-width="5" stroke-linecap="round"/>
<path d="M105,170 C130,175 160,190 180,210" stroke="#047857" stroke-width="4" stroke-linecap="round"/>
<path d="M130,135 C160,135 185,150 205,165" stroke="#047857" stroke-width="4" stroke-linecap="round"/>
<path d="M155,100 C185,95 215,105 235,120" stroke="#047857" stroke-width="3" stroke-linecap="round"/>
</svg>
</div>
<!-- Contact Ground Shadow beneath the entire setup -->
<div class="device-ground-shadow"></div>
<!-- Photorealistic MacBook Pro 16" Studio Mockup -->
<div id="hero-laptop"
class="mockup-macbook-wrap relative w-full max-w-[580px] select-none cursor-pointer z-10"
:style="heroTransform.laptop">
<!-- MacBook Display Lid -->
<div class="macbook-screen-chassis rounded-[22px] p-2.5 sm:p-3 relative">
<!-- Screen Glass Sheen Overlay -->
<div class="mockup-glass-sheen rounded-[16px]"></div>
<!-- Deep Black Display Screen with Micro Rounded Corners -->
<div class="bg-[#0b0f19] rounded-[16px] overflow-hidden border border-slate-800 relative shadow-2xl">
<!-- macOS / Montech Cloud Window Bar -->
<div class="bg-[#111827] px-3.5 py-2 flex items-center justify-between border-b border-slate-800 text-[10px] text-slate-400">
<!-- Window Traffic Lights -->
<div class="flex items-center gap-1.5">
<span class="w-2.5 h-2.5 rounded-full bg-[#ff5f56] inline-block shadow-sm"></span>
<span class="w-2.5 h-2.5 rounded-full bg-[#ffbd2e] inline-block shadow-sm"></span>
<span class="w-2.5 h-2.5 rounded-full bg-[#27c93f] inline-block shadow-sm"></span>
</div>
<!-- Center Camera Notch & Specular Lens -->
<div class="w-24 h-3 bg-black rounded-b-md -mt-2 mx-auto flex items-center justify-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-slate-900 border border-slate-700"></span>
<span class="w-1 h-1 rounded-full bg-emerald-500/80"></span>
</div>
<!-- Montech Cloud Domain & Active Badge -->
<div class="flex items-center gap-1.5 text-slate-300 font-bold">
<div class="w-3.5 h-3.5 rounded bg-brand-600 flex items-center justify-center text-[8px] text-white">M</div>
<span class="text-[9px] bg-brand-500/20 text-brand-300 px-2 py-0.5 rounded-full font-mono">cloud.montech.ir</span>
</div>
</div>
<!-- Persian BI & ERP Dashboard Canvas (Adapts to Dark Theme) -->
<div class="p-3 sm:p-4 bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 min-h-[320px] flex gap-3 text-right">
<!-- Dashboard Sidebar Navigation -->
<div class="w-28 hidden sm:flex flex-col justify-between py-1 px-1 border-l border-slate-200 dark:border-slate-800 text-[11px] text-slate-600 dark:text-slate-400 font-medium">
<div class="space-y-1.5">
<button type="button" @click.stop="heroTab = 'dashboard'"
:class="heroTab === 'dashboard' ? 'bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400 font-bold shadow-sm' : 'hover:bg-slate-100 dark:hover:bg-slate-900 text-slate-600 dark:text-slate-400'"
class="w-full text-right px-2.5 py-1.5 rounded-lg flex items-center gap-1.5 transition-all duration-200">
<span class="w-1.5 h-1.5 rounded-full transition-transform duration-200" :class="heroTab === 'dashboard' ? 'bg-brand-600 dark:bg-brand-400 scale-125' : 'bg-slate-400'"></span>
داشبورد
</button>
<button type="button" @click.stop="heroTab = 'gold'"
:class="heroTab === 'gold' ? 'bg-amber-50 dark:bg-amber-950/60 text-amber-700 dark:text-amber-400 font-bold shadow-sm' : 'hover:bg-slate-100 dark:hover:bg-slate-900 text-slate-600 dark:text-slate-400'"
class="w-full text-right px-2.5 py-1.5 rounded-lg flex items-center gap-1.5 transition-all duration-200">
<span class="w-1.5 h-1.5 rounded-full transition-transform duration-200" :class="heroTab === 'gold' ? 'bg-amber-600 dark:bg-amber-400 scale-125' : 'bg-slate-400'"></span>
انبارداری طلا
</button>
<button type="button" @click.stop="heroTab = 'crm'"
:class="heroTab === 'crm' ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-400 font-bold shadow-sm' : 'hover:bg-slate-100 dark:hover:bg-slate-900 text-slate-600 dark:text-slate-400'"
class="w-full text-right px-2.5 py-1.5 rounded-lg flex items-center gap-1.5 transition-all duration-200">
<span class="w-1.5 h-1.5 rounded-full transition-transform duration-200" :class="heroTab === 'crm' ? 'bg-indigo-600 dark:bg-indigo-400 scale-125' : 'bg-slate-400'"></span>
مشتریان (CRM)
</button>
<button type="button" @click.stop="heroTab = 'financial'"
:class="heroTab === 'financial' ? 'bg-cyan-50 dark:bg-cyan-950/60 text-cyan-700 dark:text-cyan-400 font-bold shadow-sm' : 'hover:bg-slate-100 dark:hover:bg-slate-900 text-slate-600 dark:text-slate-400'"
class="w-full text-right px-2.5 py-1.5 rounded-lg flex items-center gap-1.5 transition-all duration-200">
<span class="w-1.5 h-1.5 rounded-full transition-transform duration-200" :class="heroTab === 'financial' ? 'bg-cyan-600 dark:bg-cyan-400 scale-125' : 'bg-slate-400'"></span>
گزارش مالی
</button>
</div>
<div class="px-2 py-1 text-[9px] text-slate-400 dark:text-slate-500 flex items-center justify-between">
<span>نسخه ۴.۲</span>
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
</div>
</div>
<!-- Main Dynamic Content Area -->
<div class="flex-1 space-y-2.5">
<!-- TAB 1: DASHBOARD OVERVIEW -->
<div v-if="heroTab === 'dashboard'" class="space-y-2.5">
<!-- Metric Stats Row -->
<div class="grid grid-cols-2 gap-2">
<div class="bg-white dark:bg-slate-900 p-2.5 rounded-xl border border-slate-200/80 dark:border-slate-800 shadow-sm hover:border-brand-300 dark:hover:border-brand-500/50 transition-colors">
<div class="text-[10px] text-slate-400 dark:text-slate-500 font-medium">فروش کل دوره‌ای</div>
<div class="text-xs sm:text-sm md:text-base font-extrabold text-slate-800 dark:text-white mt-0.5">
۲۸,۴۵۰,۰۰۰,۰۰۰ <span class="text-[9px] font-normal text-slate-500 dark:text-slate-400">تومان</span>
</div>
<div class="text-[9px] text-emerald-600 dark:text-emerald-400 mt-0.5 font-semibold flex items-center gap-1">
↑ +۲۴.۵٪ رشد این ماه
</div>
</div>
<div class="bg-white dark:bg-slate-900 p-2.5 rounded-xl border border-slate-200/80 dark:border-slate-800 shadow-sm hover:border-brand-300 dark:hover:border-brand-500/50 transition-colors">
<div class="text-[10px] text-slate-400 dark:text-slate-500 font-medium">مشتریان وفادار فعال</div>
<div class="text-xs sm:text-sm md:text-base font-extrabold text-slate-800 dark:text-white mt-0.5">
۱,۸۴۲ <span class="text-[9px] font-normal text-slate-500 dark:text-slate-400">نفر</span>
</div>
<div class="text-[9px] text-brand-600 dark:text-brand-400 mt-0.5 font-semibold flex items-center gap-1">
★ ۹۸٪ شاخص رضایت
</div>
</div>
</div>
<!-- Interactive SaaS Area Chart with Live Data Tooltip -->
<div class="bg-white dark:bg-slate-900 p-2.5 rounded-xl border border-slate-200/80 dark:border-slate-800 shadow-sm relative group/chart">
<div class="flex items-center justify-between text-[10px] mb-1.5">
<span class="font-bold text-slate-700 dark:text-slate-300">روند عملکرد فروش و تحلیل هوش مصنوعی</span>
<span class="text-brand-600 dark:text-brand-400 font-bold text-[9px] flex items-center gap-1 bg-brand-50 dark:bg-brand-950 px-2 py-0.5 rounded-full">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping"></span>
زنده
</span>
</div>
<div class="relative">
<svg class="w-full h-20 overflow-visible" viewBox="0 0 300 90" fill="none">
<defs>
<linearGradient id="heroChartGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0062f5" stop-opacity="0.32"/>
<stop offset="100%" stop-color="#0062f5" stop-opacity="0.0"/>
</linearGradient>
</defs>
<path d="M0,70 Q40,55 80,35 T160,45 T240,15 T300,25 L300,90 L0,90 Z" fill="url(#heroChartGrad)"/>
<path d="M0,70 Q40,55 80,35 T160,45 T240,15 T300,25" stroke="#0062f5" stroke-width="2.8" stroke-linecap="round"/>
<circle cx="80" cy="35" r="4" fill="#0062f5" class="cursor-pointer" @mouseenter="chartTooltip = 'تیر: ۹.۴ میلیارد'"/>
<circle cx="160" cy="45" r="4" fill="#0062f5" class="cursor-pointer" @mouseenter="chartTooltip = 'مرداد: ۱۶.۲ میلیارد'"/>
<circle cx="240" cy="15" r="5" fill="#0062f5" stroke="#ffffff" stroke-width="2" class="cursor-pointer" @mouseenter="chartTooltip = 'شهریور: ۲۸.۴ میلیارد (اوج)'"/>
</svg>
<div class="absolute top-1 left-2 bg-slate-900/90 text-white text-[9px] px-2 py-0.5 rounded font-mono shadow pointer-events-none">
{{ chartTooltip }}
</div>
</div>
</div>
</div>
<!-- TAB 2: GOLD MODULE -->
<div v-else-if="heroTab === 'gold'" class="space-y-2.5">
<div class="bg-amber-50/80 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 rounded-xl p-3 text-right">
<div class="flex items-center justify-between text-[11px] mb-2">
<span class="font-extrabold text-amber-950 dark:text-amber-200">محاسبه‌گر نرخ لحظه‌ای و مظنه طلا</span>
<span class="text-[9px] bg-amber-200 dark:bg-amber-800 text-amber-900 dark:text-amber-100 px-2 py-0.5 rounded-full font-bold">اتصال مستقیم به اتحادیه</span>
</div>
<div class="grid grid-cols-2 gap-2 text-[10px]">
<div class="bg-white dark:bg-slate-900 p-2 rounded-lg border border-amber-100 dark:border-amber-900/40">
<span class="text-slate-400 dark:text-slate-500 block">مظنه ۱۷ عیار:</span>
<span class="font-black text-slate-800 dark:text-slate-200 text-xs">۱۸,۷۵۰,۰۰۰ تومان</span>
</div>
<div class="bg-white dark:bg-slate-900 p-2 rounded-lg border border-amber-100 dark:border-amber-900/40">
<span class="text-slate-400 dark:text-slate-500 block">گرم ۱۸ عیار:</span>
<span class="font-black text-slate-800 dark:text-slate-200 text-xs">۴,۳۲۰,۰۰۰ تومان</span>
</div>
</div>
</div>
</div>
<!-- TAB 3: CRM MODULE -->
<div v-else-if="heroTab === 'crm'" class="space-y-2.5">
<div class="bg-indigo-50/70 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 rounded-xl p-3 text-right">
<div class="flex items-center justify-between text-[11px] mb-2">
<span class="font-extrabold text-indigo-950 dark:text-indigo-200">قیف فروش و وضعیت سرنخ‌ها</span>
<span class="text-[9px] bg-indigo-200 dark:bg-indigo-800 text-indigo-900 dark:text-indigo-100 px-2 py-0.5 rounded-full font-bold">اتوماسیون فعال</span>
</div>
<div class="space-y-1.5 text-[10px]">
<div class="flex items-center justify-between bg-white dark:bg-slate-900 px-2 py-1.5 rounded-lg border border-indigo-100 dark:border-indigo-900/40">
<span class="font-semibold text-slate-700 dark:text-slate-300">تماس‌های موفق امروز</span>
<span class="font-bold text-indigo-600 dark:text-indigo-400">۱۴۲ مورد (+۱۸٪)</span>
</div>
<div class="flex items-center justify-between bg-white dark:bg-slate-900 px-2 py-1.5 rounded-lg border border-indigo-100 dark:border-indigo-900/40">
<span class="font-semibold text-slate-700 dark:text-slate-300">پیش‌فاکتورهای در انتظار تایید</span>
<span class="font-bold text-amber-600 dark:text-amber-400">۲۹ قرارداد</span>
</div>
</div>
</div>
</div>
<!-- TAB 4: FINANCIAL MODULE -->
<div v-else-if="heroTab === 'financial'" class="space-y-2.5">
<div class="bg-cyan-50/70 dark:bg-cyan-950/40 border border-cyan-200 dark:border-cyan-800/60 rounded-xl p-3 text-right">
<div class="flex items-center justify-between text-[11px] mb-2">
<span class="font-extrabold text-cyan-950 dark:text-cyan-200">تراز مالی و سامانه مودیان</span>
<span class="text-[9px] bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-300 px-2 py-0.5 rounded-full font-bold">همگام‌سازی برخط</span>
</div>
<div class="space-y-1.5 text-[10px]">
<div class="flex items-center justify-between bg-white dark:bg-slate-900 px-2 py-1.5 rounded-lg border border-cyan-100 dark:border-cyan-900/40">
<span class="text-slate-600 dark:text-slate-400">تسویه تجمیعی کارتخوان‌ها:</span>
<span class="font-bold text-slate-900 dark:text-white">۱,۲۸۰,۰۰۰,۰۰۰ تومان</span>
</div>
</div>
</div>
</div>
<!-- Quick Activity Bar inside Laptop Screen -->
<div class="flex items-center justify-between bg-white dark:bg-slate-900 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-800 text-[10px] text-slate-600 dark:text-slate-400">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping"></span>
<span>آخرین تسویه حسابداری متصل به شتاب</span>
</div>
<span class="font-bold text-slate-800 dark:text-slate-200">موفق (۱ دقیقه پیش)</span>
</div>
</div>
</div>
</div>
</div>
<!-- MacBook Aluminum Precision Deck Base -->
<div class="macbook-deck-base h-4 rounded-b-[18px] mx-auto -mt-0.5 flex justify-center items-center relative">
<div class="w-24 h-1.5 bg-slate-400/80 rounded-full shadow-inner"></div>
</div>
</div>
<!-- Overlapping Studio iPhone 16 Pro Titanium (Authentic Tall 19.5:9 Form Factor) -->
<div id="hero-mobile"
class="mockup-iphone-wrap absolute -bottom-10 -right-2 sm:-right-4 lg:right-2 w-[225px] sm:w-[250px] h-[465px] sm:h-[515px] select-none cursor-pointer z-20"
:style="heroTransform.mobile"
@click="toggleMobileItem">
<!-- iPhone Titanium Outer Chassis with Curvature & Subtle Buttons -->
<div class="iphone-titanium-bezel rounded-[46px] p-2.5 w-full h-full relative">
<!-- Screen Glass Sheen Overlay -->
<div class="mockup-glass-sheen rounded-[38px]"></div>
<!-- Deep Display Screen with Micro-Thin Border (Dark Mode Compatible) -->
<div class="bg-white dark:bg-slate-950 rounded-[38px] overflow-hidden text-right p-3.5 pt-2 text-slate-800 dark:text-slate-100 text-[10px] w-full h-full flex flex-col justify-between relative border border-slate-100 dark:border-slate-800 shadow-xl">
<div>
<!-- iOS Status Bar (Clock, Cellular, Wifi, Battery) -->
<div class="flex items-center justify-between px-2 text-[9px] text-slate-800 dark:text-slate-200 font-bold mb-1">
<span>۰۹:۴۱</span>
<div class="flex items-center gap-1 text-[8px]">
<span>5G</span>
<svg class="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.35 18.25c-.2.2-.2.51 0 .71.2.2.51.2.71 0l.64-.64C7.26 19.46 9.49 20.1 12 20.1c4.97 0 9-4.03 9-9s-4.03-9-9-9z"/></svg>
<span class="w-4 h-2 border border-slate-800 dark:border-slate-300 rounded-sm p-0.5 flex items-center"><span class="w-full h-full bg-slate-800 dark:bg-slate-300 rounded-xs"></span></span>
</div>
</div>
<!-- Dynamic Island Notch with Dual Camera Eyes -->
<div class="w-24 h-4.5 bg-black mx-auto rounded-full mb-2.5 flex items-center justify-between px-2.5 shadow-sm">
<span class="w-1.5 h-1.5 rounded-full bg-slate-900 border border-slate-800"></span>
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
</div>
<!-- Mobile App Store Header -->
<div class="flex items-center justify-between px-1 mb-2.5">
<div class="flex items-center gap-1.5">
<span class="w-5 h-5 rounded-lg bg-amber-500 text-white flex items-center justify-center text-[10px] font-bold">M</span>
<span class="font-black text-slate-900 dark:text-white text-xs">طلا و جواهر</span>
</div>
<span class="text-[9px] bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-300 font-bold px-2 py-0.5 rounded-full">انبار آنلاین</span>
</div>
<!-- Photorealistic 3D Gold Bullion Bar Mockup Widget -->
<div class="bg-gradient-to-l from-amber-50 to-amber-100/70 dark:from-amber-950/30 dark:to-amber-900/20 border border-amber-200/90 dark:border-amber-800/50 rounded-2xl p-2.5 flex items-center gap-2.5 shadow-sm hover:shadow-md transition-shadow mb-2.5">
<!-- 3D Gold Bar Isometric Realistic Shape -->
<div class="gold-bar-realistic w-12 h-12 rounded-xl flex flex-col items-center justify-center text-amber-950 font-black text-[10px] tracking-tight relative overflow-hidden flex-shrink-0">
<div class="absolute inset-0 bg-gradient-to-t from-black/25 via-transparent to-white/40 pointer-events-none"></div>
<span class="relative z-10 text-[9px] font-extrabold tracking-wider">AU 999</span>
<span class="relative z-10 text-[7px] opacity-90 font-mono">100g</span>
</div>
<div class="text-[9px] leading-tight flex-1">
<div class="font-extrabold text-slate-900 dark:text-white text-[10px]">شمش ۱۰۰ گرمی ۲۴ عیار</div>
<div class="text-amber-800 dark:text-amber-300 font-semibold mt-1">موجودی صندوق: {{ goldBarCount }} قطعه</div>
<div class="text-[8px] text-slate-400 dark:text-slate-500 mt-0.5">شناسه استاندارد زرین‌بانک</div>
</div>
</div>
<!-- Real-Time Union Gold Price Widget -->
<div class="bg-slate-50 dark:bg-slate-900 rounded-xl p-2 border border-slate-200/80 dark:border-slate-800 space-y-1.5 mb-2.5">
<div class="flex items-center justify-between text-[9px]">
<span class="text-slate-500 dark:text-slate-400 font-medium">مظنه ۱۷ اتحادیه:</span>
<span class="font-black text-slate-900 dark:text-white">۱۸,۷۵۰,۰۰۰ <span class="text-[8px] font-normal text-slate-400">تومان</span></span>
</div>
<div class="flex items-center justify-between text-[9px]">
<span class="text-slate-500 dark:text-slate-400 font-medium">تسویه آنی شتاب:</span>
<span class="font-black text-emerald-600 dark:text-emerald-400">۴۵۰,۳۰۰,۰۰۰ <span class="text-[8px] font-normal text-slate-400">تومان</span></span>
</div>
</div>
<!-- Recent Transaction Activity -->
<div class="space-y-1.5">
<div class="text-[9px] font-bold text-slate-400 dark:text-slate-500 px-1">آخرین فاکتورهای سیستمی:</div>
<div class="bg-white dark:bg-slate-900 rounded-lg p-1.5 border border-slate-100 dark:border-slate-800 flex items-center justify-between text-[9px] shadow-2xs">
<span class="text-slate-700 dark:text-slate-300 font-medium">فاکتور ۱۸۴۲ (زرگری شمس)</span>
<span class="text-emerald-600 dark:text-emerald-400 font-bold">تایید شد ✓</span>
</div>
<div class="bg-white dark:bg-slate-900 rounded-lg p-1.5 border border-slate-100 dark:border-slate-800 flex items-center justify-between text-[9px] shadow-2xs">
<span class="text-slate-700 dark:text-slate-300 font-medium">حواله سکه بهار آزادی</span>
<span class="text-brand-600 dark:text-brand-400 font-bold">در انتظار</span>
</div>
</div>
</div>
<!-- Bottom App Navigation Bar & iOS Home Indicator -->
<div class="pt-2 border-t border-slate-100 dark:border-slate-800 flex flex-col items-center gap-1.5">
<div class="w-full flex justify-around items-center text-slate-400 dark:text-slate-500 text-xs">
<span class="text-brand-600 font-black">●</span>
<span>■</span>
<span>▲</span>
<span>⚙</span>
</div>
<!-- Authentic iOS Home Bar Pill -->
<div class="w-24 h-1 bg-slate-800 dark:bg-slate-400 rounded-full mt-0.5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========================================== -->
<!-- METRICS / TRUST BAR (Exact match to image) -->
<!-- ========================================== -->
<section class="py-14 border-y border-slate-200/80 dark:border-slate-800/80 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md relative z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Metric 1: Custom Development (Right in RTL) -->
<div class="fade-item flex items-center justify-center sm:justify-start gap-4 p-4 rounded-2xl hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-300">
<div class="w-13 h-13 p-3 rounded-2xl bg-sky-50 dark:bg-sky-950/60 text-sky-600 dark:text-sky-400 flex items-center justify-center flex-shrink-0">
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<div class="text-right">
<div class="text-xl font-extrabold text-slate-900 dark:text-white">توسعه اختصاصی</div>
<div class="text-sm text-slate-500 dark:text-slate-400 font-medium">متناسب با نیاز شما</div>
</div>
</div>
<!-- Metric 2: 100+ Projects (Center) -->
<div class="fade-item flex items-center justify-center sm:justify-start gap-4 p-4 rounded-2xl hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-300">
<div class="w-13 h-13 p-3 rounded-2xl bg-sky-50 dark:bg-sky-950/60 text-sky-600 dark:text-sky-400 flex items-center justify-center flex-shrink-0">
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
</div>
<div class="text-right">
<div class="text-3xl font-black text-slate-900 dark:text-white tracking-tight">۱۰۰+</div>
<div class="text-sm text-slate-500 dark:text-slate-400 font-medium">پروژه موفق</div>
</div>
</div>
<!-- Metric 3: 15+ Specialized Products (Left in RTL) -->
<div class="fade-item flex items-center justify-center sm:justify-start gap-4 p-4 rounded-2xl hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-300">
<div class="w-13 h-13 p-3 rounded-2xl bg-sky-50 dark:bg-sky-950/60 text-sky-600 dark:text-sky-400 flex items-center justify-center flex-shrink-0">
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
</svg>
</div>
<div class="text-right">
<div class="text-3xl font-black text-slate-900 dark:text-white tracking-tight">۱۵+</div>
<div class="text-sm text-slate-500 dark:text-slate-400 font-medium">محصول تخصصی</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========================================== -->
<!-- FEATURE TRANSFORMATION: BASE TO CUSTOMIZED -->
<!-- ========================================== -->
<section id="features" class="py-24 bg-slate-50/70 dark:bg-[#070d19]/90 relative overflow-hidden customization-section">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<!-- Graphic side: Floating layered ERP dashboards (Left in RTL) -->
<div class="lg:col-span-7 relative flex justify-center items-center py-6 min-h-[380px]">
<!-- Background card: Base generic dashboard -->
<div id="base-dashboard-card" class="w-4/5 sm:w-2/3 bg-white/90 dark:bg-slate-900/80 rounded-2xl border border-slate-200/90 dark:border-slate-800 p-5 shadow-xl -rotate-6 transform transition-transform duration-700 hover:-rotate-3">
<div class="flex items-center gap-2 border-b border-slate-100 dark:border-slate-800 pb-2.5 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-slate-700"></span>
<span class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-slate-700"></span>
<div class="text-[11px] text-slate-400 dark:text-slate-500 font-bold">نسخه استاندارد پایه</div>
</div>
<div class="space-y-3 opacity-60">
<div class="h-3.5 w-1/3 bg-slate-200 dark:bg-slate-700 rounded"></div>
<div class="h-16 w-full bg-slate-100 dark:bg-slate-800 rounded-lg"></div>
<div class="grid grid-cols-3 gap-2">
<div class="h-9 bg-slate-100 dark:bg-slate-800 rounded"></div>
<div class="h-9 bg-slate-100 dark:bg-slate-800 rounded"></div>
<div class="h-9 bg-slate-100 dark:bg-slate-800 rounded"></div>
</div>
</div>
</div>
<!-- Connecting Curved Arrow SVG matching design -->
<div class="absolute top-0 right-1/4 z-30 transform -translate-y-6">
<svg class="w-28 h-20 text-brand-500" viewBox="0 0 100 60" fill="none">
<path d="M10,50 Q50,-10 90,30" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="6 6"/>
<polygon points="90,30 82,18 96,22" fill="currentColor"/>
</svg>
</div>
<!-- Foreground Tailored ERP Card -->
<div id="custom-dashboard-card" class="absolute -bottom-4 -right-2 sm:right-6 w-5/6 sm:w-3/4 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md rounded-2xl border border-brand-200 dark:border-brand-500/40 p-6 shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-700">
<div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3 mb-4">
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-lg bg-brand-600 text-white flex items-center justify-center font-bold text-xs shadow-sm">M</div>
<div class="text-xs font-bold text-slate-800 dark:text-slate-100">داشبورد اختصاصی شده برای مشتری</div>
</div>
<span class="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/60 px-2.5 py-1 rounded-full border border-emerald-100 dark:border-emerald-800/40">هماهنگ‌شده ۱۰۰٪</span>
</div>
<div class="grid grid-cols-3 gap-3 text-right">
<div class="col-span-2 space-y-2">
<div class="text-xs text-slate-400 dark:text-slate-400 font-medium">فروش لحظه‌ای شعبه مرکزی:</div>
<div class="text-xl font-black text-slate-900 dark:text-white">۲۸,۴۵۰,۰۰۰,۰۰۰ <span class="text-xs font-normal text-slate-500 dark:text-slate-400">تومان</span></div>
<div class="h-11 bg-gradient-to-l from-brand-50 to-transparent dark:from-brand-950/50 dark:to-transparent border border-brand-100 dark:border-brand-900/60 rounded-xl flex items-center px-3">
<span class="text-[10px] text-brand-700 dark:text-brand-300 font-bold">اتصال مستقیم به درگاه بانکی و انبار</span>
</div>
</div>
<div class="space-y-1 bg-slate-50 dark:bg-slate-800/70 p-2.5 rounded-xl text-center flex flex-col justify-center border border-slate-100 dark:border-slate-800">
<div class="text-[10px] text-slate-500 dark:text-slate-400">هوش مصنوعی</div>
<div class="text-brand-600 dark:text-brand-400 font-extrabold text-sm">فعال</div>
<div class="text-[9px] text-slate-400 dark:text-slate-500">پیش‌‌بینی تقاضا</div>
</div>
</div>
</div>
</div>
<!-- Content column in RTL (Right Side) -->
<div class="lg:col-span-5 text-right space-y-5 fade-item">
<span class="text-xs font-bold text-slate-400 dark:text-slate-500">از نسخه پایه تا راهکار اختصاصی</span>
<h2 class="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white leading-snug">
نرم‌‌افزار را با
<br>
<span>
کسب‌وکارت هماهنگ کن.
</span>
</h2>
<p class="text-base text-slate-600 dark:text-slate-300 leading-relaxed font-normal">
ما در منتک، نرم‌افزارهای آماده را متناسب با فرایند، نیازها و هویت کسب‌وکار شما شخصی‌سازی و توسعه می‌دهیم.
</p>
<div class="pt-2">
<a href="#solutions"
class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 font-bold text-sm hover:border-brand-600 dark:hover:border-brand-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-brand-50/50 dark:hover:bg-slate-800/50 transition-all duration-300">
<svg class="w-4 h-4 text-brand-600 dark:text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
<span>مشاهده نمونه‌کارها</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- ========================================== -->
<!-- 5 SOLUTIONS CARDS GRID (Exact 5 cards) -->
<!-- ========================================== -->
<section id="solutions" class="py-24 bg-white dark:bg-[#070d19] relative solutions-section">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Heading matching image -->
<div class="text-center max-w-2xl mx-auto mb-16 space-y-2 fade-item">
<span class="text-xs font-bold text-slate-400 dark:text-slate-500">محصولات منتک</span>
<h2 class="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white">راهکارهای منتک</h2>
<p class="text-sm sm:text-base text-slate-500 dark:text-slate-400 font-normal">مجموعه‌ای از نرم‌افزارها و خدمات برای کسب‌وکارهای مختلف</p>
</div>
<!-- Solutions 5 Cards Grid in RTL -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
<!-- Card 1: Custom Software (Rightmost in RTL) -->
<div 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 hover:border-brand-300 dark:hover:border-brand-500/50 transition-all duration-300 flex flex-col justify-between text-center cursor-pointer"
:style="cardTilts[0]"
@mousemove="handleCardMouseMove($event, 0)"
@mouseleave="handleCardMouseLeave(0)"
@click="selectSolution('نرم‌افزار اختصاصی', 'توسعه پلتفرم‌ها و نرم‌‌افزارهای سازمانی متناسب با معماری و نیاز دقیق شما.')">
<div>
<!-- 3D Isometric Cube Graphic -->
<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">
<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"/>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">نرم‌افزار اختصاصی</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-normal">توسعه متناسب با نیاز شما</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:bg-brand-600 group-hover:text-white flex items-center justify-center transition-all duration-300 shadow-sm">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
</span>
</div>
</div>
<!-- Card 2: Accounting -->
<div 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 hover:border-sky-300 dark:hover:border-sky-500/50 transition-all duration-300 flex flex-col justify-between text-center cursor-pointer"
:style="cardTilts[1]"
@mousemove="handleCardMouseMove($event, 1)"
@mouseleave="handleCardMouseLeave(1)"
@click="selectSolution('حسابداری', 'سیستم مالی و حسابداری یکپارچه چندشعبه‌ای و اتصال به سامانه مودیان.')">
<div>
<!-- 3D Bar Graph Graphic -->
<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">
<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"/>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-900 dark:text-white group-hover:text-sky-600 dark:group-hover:text-sky-400 transition-colors">حسابداری</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-normal">مدیریت مالی ساده و دقیق</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:bg-sky-500 group-hover:text-white flex items-center justify-center transition-all duration-300 shadow-sm">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
</span>
</div>
</div>
<!-- Card 3: CRM -->
<div 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 hover:border-indigo-300 dark:hover:border-indigo-500/50 transition-all duration-300 flex flex-col justify-between text-center cursor-pointer"
:style="cardTilts[2]"
@mousemove="handleCardMouseMove($event, 2)"
@mouseleave="handleCardMouseLeave(2)"
@click="selectSolution('سیستم CRM', 'سامانه مدیریت ارتباط با مشتریان هوشمند، پیگیری لیدها و اتوماسیون فروش.')">
<div>
<!-- 3D Avatars Graphic -->
<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">
<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"/>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">CRM</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-normal">مدیریت مشتریان و فروش</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:bg-indigo-600 group-hover:text-white flex items-center justify-center transition-all duration-300 shadow-sm">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
</span>
</div>
</div>
<!-- Card 4: Online Store -->
<div 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 hover:border-cyan-300 dark:hover:border-cyan-500/50 transition-all duration-300 flex flex-col justify-between text-center cursor-pointer"
:style="cardTilts[3]"
@mousemove="handleCardMouseMove($event, 3)"
@mouseleave="handleCardMouseLeave(3)"
@click="selectSolution('فروشگاه آنلاین', 'پلتفرم تجارت الکترونیک با سرعت فوق‌العاده بالا و اتصال مستقیم به انبارداری.')">
<div>
<!-- 3D Cyan Shopping Cart Graphic -->
<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">
<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"/>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-900 dark:text-white group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">فروشگاه آنلاین</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-normal">فروش بیشتر، مدیریت آسان‌تر</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:bg-cyan-500 group-hover:text-white flex items-center justify-center transition-all duration-300 shadow-sm">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
</span>
</div>
</div>
<!-- Card 5: Gold & Jewelry (Leftmost in RTL) -->
<div 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 hover:border-amber-300 dark:hover:border-amber-500/50 transition-all duration-300 flex flex-col justify-between text-center cursor-pointer"
:style="cardTilts[4]"
@mousemove="handleCardMouseMove($event, 4)"
@mouseleave="handleCardMouseLeave(4)"
@click="selectSolution('طلا و جواهر', 'جامع‌ترین نرم‌‌افزار تخصصی صنعت طلا، محاسبه مظنه لحظه‌ای، ثبت اجرت و فاکتور رسمی.')">
<div>
<!-- 3D Gold Bars / Bullion Graphic -->
<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">
<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"/>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors">طلا و جواهر</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-normal">نرم‌افزارهای تخصصی صنعت طلا</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:bg-amber-500 group-hover:text-white flex items-center justify-center transition-all duration-300 shadow-sm">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- ========================================== -->
<!-- TESTIMONIALS SECTION (Exact layout & cards) -->
<!-- ========================================== -->
<section id="testimonials" class="py-24 bg-slate-50/70 dark:bg-[#070d19]/90 overflow-hidden relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<!-- Layered Testimonial Cards on Left (in RTL) -->
<div class="lg:col-span-7 relative flex justify-center items-center py-10 fade-item">
<!-- Stacked subtle user avatars in background matching design -->
<div class="absolute -right-2 top-4 w-14 h-14 rounded-full bg-white dark:bg-slate-800 shadow-md p-1 border border-slate-200 dark:border-slate-700 opacity-60">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&q=80" alt="Customer" class="w-full h-full rounded-full object-cover">
</div>
<div class="absolute -right-4 bottom-6 w-14 h-14 rounded-full bg-white dark:bg-slate-800 shadow-md p-1 border border-slate-200 dark:border-slate-700 opacity-60">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80" alt="Customer" class="w-full h-full rounded-full object-cover">
</div>
<!-- Main Front Active Testimonial Card -->
<div class="relative z-10 w-full max-w-lg bg-white dark:bg-slate-900/95 rounded-3xl p-8 border border-slate-100 dark:border-slate-800 shadow-xl space-y-6 text-right">
<!-- Quote Icon & Verification Badge -->
<div class="flex items-center justify-between">
<!-- Montech AI Badge -->
<div class="flex items-center gap-1.5 text-xs font-bold text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-950/60 px-3 py-1 rounded-full border border-brand-100 dark:border-brand-900/50">
<svg class="w-4 h-4 text-brand-600 dark:text-brand-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<span>مشتری تایید شده</span>
</div>
<!-- Quote Symbol -->
<div class="text-slate-300 dark:text-slate-700">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
</svg>
</div>
</div>
<!-- Testimonial Quote -->
<p class="text-slate-800 dark:text-slate-100 text-lg font-bold leading-relaxed min-h-[60px]">
«نرم‌افزار منتک دقیقاً مطابق با نیاز ما شخصی‌سازی شد و باعث نظم و رشد کسب‌وکارمان شد.»
</p>
<!-- Reviewer Bio & Avatar -->
<div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-100 dark:border-slate-800">
<div class="text-right">
<div class="font-bold text-slate-900 dark:text-white text-sm">علی محمدی</div>
<div class="text-xs text-slate-400 dark:text-slate-500 font-medium">مدیر فروشگاه طلا</div>
</div>
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-brand-500 shadow-sm">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&q=80" alt="علی محمدی" class="w-full h-full object-cover"/>
</div>
</div>
</div>
</div>
<!-- Testimonial Content (Right Column in RTL) -->
<div class="lg:col-span-5 text-right space-y-5 fade-item">
<span class="text-xs font-bold text-slate-400 dark:text-slate-500">اعتماد کسب‌وکارها</span>
<h2 class="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white leading-snug">
در کنار کسب‌وکارهای
<br>
<span>واقعی، در مسیر رشد.</span>
</h2>
<p class="text-base text-slate-600 dark:text-slate-300 leading-relaxed font-normal">
از فروشگاه‌های کوچک تا مجموعه‌های بزرگ، منتک انتخاب کسب‌وکارهایی است که به آینده فکر می‌کنند.
</p>
<div class="pt-2">
<button @click="openConsultModal"
class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full bg-brand-600 text-white font-bold text-sm hover:bg-brand-700 active:scale-95 transition-all duration-300 shadow-md shadow-brand-600/25">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
<span>دیدن نظرات مشتریان</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- ========================================== -->
<!-- BOTTOM CALL TO ACTION BANNER (Exact match) -->
<!-- ========================================== -->
<section class="py-16 cta-section">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative overflow-hidden rounded-[36px] bg-gradient-to-l from-sky-50 via-blue-50 to-blue-100/70 dark:from-slate-900 dark:via-[#0c1e3f] dark:to-slate-900 border border-brand-200/80 dark:border-brand-500/30 p-8 sm:p-12 shadow-soft-card">
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 text-right">
<!-- 3D Montech Emblem on Left in RTL -->
<div class="order-3 md:order-1 flex items-center justify-center">
<div class="w-28 h-28 sm:w-32 sm:h-32 rounded-3xl bg-white dark:bg-slate-800 shadow-xl border border-white/80 dark:border-slate-700 p-3 flex items-center justify-center transform hover:scale-105 transition-transform duration-500">
<div class="w-full h-full rounded-2xl bg-gradient-to-br from-brand-600 via-brand-500 to-sky-400 flex items-center justify-center text-white shadow-inner">
<svg class="w-16 h-16" viewBox="0 0 32 32" fill="none">
<path d="M6 22L12 8L16 15L20 8L26 22" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="16" cy="22" r="2.2" fill="white"/>
</svg>
</div>
</div>
</div>
<!-- Blue Round CTA Button in Center -->
<div class="order-2 flex-shrink-0">
<button @click="openConsultModal"
class="inline-flex items-center gap-2.5 px-8 py-3.5 rounded-full bg-brand-600 hover:bg-brand-700 text-white font-bold text-sm shadow-glow-cta active:scale-95 transition-all duration-300">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
<span>درخواست مشاوره رایگان</span>
</button>
</div>
<!-- Content on Right in RTL -->
<div class="order-1 md:order-3 flex-1 space-y-2">
<h2 class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
برای کسب‌وکار خود
<br>
مشاوره رایگان دریافت کنید.
</h2>
<p class="text-slate-600 dark:text-slate-300 text-sm font-normal">
کارشناسان ما آماده‌اند تا بهترین راهکار را متناسب با نیاز شما پیشنهاد دهند.
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ========================================== -->
<!-- FOOTER (Exact 4-column layout as in image) -->
<!-- ========================================== -->
<footer id="contact" class="bg-white dark:bg-[#060a14] border-t border-slate-200/80 dark:border-slate-800/80 pt-16 pb-12 text-right">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 pb-12 border-b border-slate-100 dark:border-slate-800/80">
<!-- Column 4: Contact Info (Leftmost in RTL) -->
<div class="lg:col-span-3 space-y-3">
<h4 class="text-sm font-bold text-slate-900 dark:text-white">تماس با ما</h4>
<ul class="space-y-3 text-xs text-slate-600 dark:text-slate-400 font-medium">
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-brand-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
<span>۰۹۱۲ ۳۴۵ ۶۷۸۹</span>
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-brand-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
<span>info@montech.ir</span>
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-brand-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<span>تهران، ایران</span>
</li>
</ul>
</div>
<!-- Column 3: Products -->
<div class="lg:col-span-3 space-y-3">
<h4 class="text-sm font-bold text-slate-900 dark:text-white">محصولات</h4>
<ul class="space-y-2 text-xs text-slate-600 dark:text-slate-400 font-medium">
<li><a href="#solutions" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">نرم‌افزار طلا و جواهر</a></li>
<li><a href="#solutions" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">فروشگاه آنلاین</a></li>
<li><a href="#solutions" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">مدیریت مشتریان (CRM)</a></li>
<li><a href="#solutions" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">حسابداری</a></li>
<li><a href="#solutions" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">نرم‌افزار اختصاصی</a></li>
</ul>
</div>
<!-- Column 2: Quick Links -->
<div class="lg:col-span-2 space-y-3">
<h4 class="text-sm font-bold text-slate-900 dark:text-white">دسترسی سریع</h4>
<ul class="space-y-2 text-xs text-slate-600 dark:text-slate-400 font-medium">
<li><a href="#solutions" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">محصولات</a></li>
<li><a href="#features" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">نمونه‌کارها</a></li>
<li><a href="#about" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">درباره ما</a></li>
<li><a href="#testimonials" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">نظرات مشتریان</a></li>
<li><a href="#contact" class="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">تماس با ما</a></li>
</ul>
</div>
<!-- Column 1: Brand Info & Socials (Rightmost in RTL) -->
<div class="lg:col-span-4 space-y-4">
<div class="flex items-center gap-3">
<div class="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-brand-600 to-sky-400 text-white">
<svg class="w-6 h-6" viewBox="0 0 32 32" fill="none">
<path d="M6 22L12 8L16 15L20 8L26 22" stroke="white" stroke-width="3" stroke-linecap="round"/>
</svg>
</div>
<div class="flex flex-col">
<span class="text-xl font-black text-slate-900 dark:text-white">منتک</span>
<span class="text-[9px] font-bold text-slate-400 tracking-wider">MONTECH</span>
</div>
</div>
<p class="text-xs text-slate-400 dark:text-slate-500 leading-relaxed font-normal">
هوش‌افزار منظر منتک
<br>
با تکنولوژی، کسب‌وکارها را هوشمندتر می‌کنیم.
</p>
<!-- Social Media Icons -->
<div class="flex items-center gap-3 pt-2">
<a href="#" class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-brand-600 hover:text-white flex items-center justify-center transition-colors">
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/></svg>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-brand-600 hover:text-white flex items-center justify-center transition-colors">
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76a1.64 1.64 0 1 0 0-3.28 1.64 1.64 0 0 0 0 3.28m1.4 9.74v-8.37H5.06v8.37h2.8z"/></svg>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-brand-600 hover:text-white flex items-center justify-center transition-colors">
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</div>
</div>
<!-- Sub-footer copyright and terms -->
<div class="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-400 dark:text-slate-500 gap-4">
<div>© منتک. تمامی حقوق محفوظ است.</div>
<div class="flex items-center gap-6">
<a href="#" class="hover:text-slate-600 dark:hover:text-slate-300 transition-colors">حریم خصوصی</a>
<a href="#" class="hover:text-slate-600 dark:hover:text-slate-300 transition-colors">شرایط استفاده</a>
</div>
</div>
</div>
</footer>
<!-- ========================================== -->
<!-- AI PROMPT MODAL -->
<!-- ========================================== -->
<transition 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="showAiModal" 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 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>
<span class="font-bold text-slate-800 dark:text-white text-sm">پیشنهاد هوشمند هوش‌افزار منتک</span>
</div>
<button @click="showAiModal = false" 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">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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">پرس‌وجوی شما:</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">
«{{ aiQuery || 'درخواست راهکار نرم‌افزاری' }}»
</div>
</div>
<div class="space-y-3">
<div class="text-xs font-bold text-brand-600 dark:text-brand-400">بسته پیشنهادی متناسب با نیاز بیزینس شما:</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">بسته جامع هوشمند منتک</span>
<span class="text-xs bg-brand-600 text-white px-2 py-0.5 rounded-full font-bold">۹۸٪ تطابق</span>
</div>
<ul class="text-xs text-slate-600 dark:text-slate-300 space-y-1.5 list-disc list-inside">
<li>یکپارچه‌سازی سیستم حسابداری و انبارداری متصل به شبکه بانکی</li>
<li>داشبورد تحلیلی CRM با پیش‌بینی هوشمند رفتار مشتریان</li>
<li>اپلیکیشن موبایل اختصاصی و داشبورد مدیریتی تحت وب</li>
</ul>
</div>
</div>
<div class="flex gap-3 pt-2">
<button @click="showAiModal = false; openConsultModal()" class="flex-1 py-3 rounded-xl bg-brand-600 text-white text-sm font-bold shadow-md hover:bg-brand-700 transition-colors">
ثبت مشاوره این بسته
</button>
<button @click="showAiModal = false" 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">
بستن
</button>
</div>
</div>
</div>
</transition>
<!-- ========================================== -->
<!-- CONSULTATION FORM MODAL -->
<!-- ========================================== -->
<transition 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="showConsultModal" 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 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 class="font-bold text-slate-900 dark:text-white text-base">درخواست مشاوره رایگان منتک</h3>
<button @click="showConsultModal = false" 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">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<form @submit.prevent="submitConsultForm" class="space-y-4">
<div>
<label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">نام و نام خانوادگی</label>
<input v-model="consultForm.name" required type="text" placeholder="مثال: رضا احمدی"
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 class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">شماره تماس (جهت هماهنگی جلسه)</label>
<input v-model="consultForm.phone" required type="tel" dir="ltr" placeholder="0912..."
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 class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">زمینه کسب‌وکار شما</label>
<select v-model="consultForm.type" 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 value="طلا و جواهر">طلا و جواهر</option>
<option value="فروشگاه آنلاین">فروشگاه آنلاین</option>
<option value="سیستم CRM">سیستم CRM</option>
<option value="حسابداری">حسابداری</option>
<option value="نرم‌‌افزار اختصاصی">نرم‌افزار اختصاصی</option>
<option value="سایر">سایر زمینه‌ها</option>
</select>
</div>
<div v-if="consultSubmitted" 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">
✓ درخواست شما با موفقیت ثبت شد. کارشناسان ما به زودی با شما تماس خواهند گرفت.
</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">
ارسال درخواست
</button>
</div>
</form>
</div>
</div>
</transition>
</div>
<script>
const { createApp, ref, onMounted } = Vue;
createApp({
setup() {
const isMobileMenuOpen = ref(false);
const isDarkMode = ref(false);
const aiQuery = ref('');
const showAiModal = ref(false);
const showConsultModal = ref(false);
const consultSubmitted = ref(false);
const heroTab = ref('dashboard');
const chartTooltip = ref('شهریور: ۲۸.۴ میلیارد');
const goldBarCount = ref(24);
// Toggle Dark/Light Theme with persistence in localStorage
const toggleDarkMode = () => {
isDarkMode.value = !isDarkMode.value;
if (isDarkMode.value) {
document.documentElement.classList.add('dark');
localStorage.setItem('montech_theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('montech_theme', 'light');
}
};
// 3D Hero Parallax Transform states driven by mouse movement
const heroTransform = ref({
laptop: 'transform: rotateY(-14deg) rotateX(8deg) rotateZ(-1deg);',
mobile: 'transform: rotateY(-10deg) rotateX(6deg) translateY(-12px);'
});
// 3D Card tilt dynamic state for the 5 Solutions
const cardTilts = ref([{}, {}, {}, {}, {}]);
const handleHeroMouseMove = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5; // -0.5 to 0.5
const y = (e.clientY - rect.top) / rect.height - 0.5;
const laptopRotateY = -14 + (x * 14);
const laptopRotateX = 8 - (y * 12);
const mobileRotateY = -10 + (x * 20);
const mobileRotateX = 6 - (y * 15);
const mobileTransY = -12 + (y * 18);
const mobileTransX = (x * 15);
heroTransform.value.laptop = `transform: rotateY(${laptopRotateY.toFixed(2)}deg) rotateX(${laptopRotateX.toFixed(2)}deg) rotateZ(-1deg);`;
heroTransform.value.mobile = `transform: rotateY(${mobileRotateY.toFixed(2)}deg) rotateX(${mobileRotateX.toFixed(2)}deg) translateY(${mobileTransY.toFixed(2)}px) translateX(${mobileTransX.toFixed(2)}px);`;
};
const resetHeroMouse = () => {
heroTransform.value.laptop = 'transform: rotateY(-14deg) rotateX(8deg) rotateZ(-1deg);';
heroTransform.value.mobile = 'transform: rotateY(-10deg) rotateX(6deg) translateY(-12px);';
};
const handleCardMouseMove = (event, index) => {
const card = event.currentTarget;
const rect = card.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
card.style.setProperty('--mouse-x', `${x}px`);
card.style.setProperty('--mouse-y', `${y}px`);
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * -7;
const rotateY = ((x - centerX) / centerX) * 7;
cardTilts.value[index] = {
transform: `perspective(1000px) rotateX(${rotateX.toFixed(1)}deg) rotateY(${rotateY.toFixed(1)}deg) translateY(-6px) scale3d(1.02, 1.02, 1.02)`
};
};
const handleCardMouseLeave = (index) => {
cardTilts.value[index] = {
transform: `perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px) scale3d(1, 1, 1)`
};
};
const toggleMobileItem = () => {
goldBarCount.value = goldBarCount.value === 24 ? 25 : 24;
};
const consultForm = ref({
name: '',
phone: '',
type: 'طلا و جواهر'
});
const setAiQuery = (query) => {
aiQuery.value = query;
handleAiSearch();
};
const handleAiSearch = () => {
if (!aiQuery.value.trim()) {
aiQuery.value = 'من یک فروشگاه دارم و CRM می‌خواهم...';
}
showAiModal.value = true;
};
const selectSolution = (title, description) => {
consultForm.value.type = title;
openConsultModal();
};
const openConsultModal = () => {
consultSubmitted.value = false;
showConsultModal.value = true;
};
const submitConsultForm = () => {
consultSubmitted.value = true;
setTimeout(() => {
showConsultModal.value = false;
consultForm.value = { name: '', phone: '', type: 'طلا و جواهر' };
consultSubmitted.value = false;
}, 2000);
};
onMounted(() => {
// Initialize theme based on preference or system
const savedTheme = localStorage.getItem('montech_theme');
const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
isDarkMode.value = true;
document.documentElement.classList.add('dark');
} else {
isDarkMode.value = false;
document.documentElement.classList.remove('dark');
}
// Initialize Lenis Smooth Scroll Engine
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: 'vertical',
smoothWheel: true,
wheelMultiplier: 1.05,
touchMultiplier: 1.8,
});
// Connect Lenis to Scroll Progress and Reveal Triggers
lenis.on('scroll', (e) => {
const progressEl = document.getElementById('scroll-progress');
if (progressEl) {
const totalScroll = document.documentElement.scrollHeight - window.innerHeight;
const progress = totalScroll > 0 ? e.scroll / totalScroll : 0;
progressEl.style.transform = `scaleX(${progress})`;
}
// Scroll-Driven Batch Reveal
document.querySelectorAll('.fade-item:not(.revealed)').forEach((el) => {
const rect = el.getBoundingClientRect();
if (rect.top <= window.innerHeight * 0.88) {
el.classList.add('revealed');
}
});
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
// Initial reveal check
setTimeout(() => {
document.querySelectorAll('.fade-item').forEach((el) => {
const rect = el.getBoundingClientRect();
if (rect.top <= window.innerHeight * 0.92) {
el.classList.add('revealed');
}
});
}, 150);
// GSAP Hero & Cards Scroll Integration
if (window.gsap && window.ScrollTrigger) {
gsap.registerPlugin(ScrollTrigger);
const heroLaptop = document.getElementById('hero-laptop');
const heroMobile = document.getElementById('hero-mobile');
if (heroLaptop && heroMobile) {
gsap.to(heroLaptop, {
scrollTrigger: {
trigger: '.hero-parallax-section',
start: 'top top',
end: 'bottom top',
scrub: 1.2,
},
y: -40,
rotateY: -25,
rotateX: 13,
scale: 0.98,
ease: 'none',
});
gsap.to(heroMobile, {
scrollTrigger: {
trigger: '.hero-parallax-section',
start: 'top top',
end: 'bottom top',
scrub: 1.5,
},
y: -85,
rotateY: -6,
rotateX: 4,
scale: 1.03,
ease: 'none',
});
}
}
});
return {
isMobileMenuOpen,
isDarkMode,
toggleDarkMode,
aiQuery,
showAiModal,
showConsultModal,
consultSubmitted,
consultForm,
heroTab,
chartTooltip,
goldBarCount,
heroTransform,
cardTilts,
handleHeroMouseMove,
resetHeroMouse,
handleCardMouseMove,
handleCardMouseLeave,
toggleMobileItem,
setAiQuery,
handleAiSearch,
selectSolution,
openConsultModal,
submitConsultForm,
};
}
}).mount('#app');
</script>
</body>
</html>