Adds consultation leads, section editors, and the one-time content reset for this release. Co-authored-by: Cursor <cursoragent@cursor.com>
1717 lines
108 KiB
HTML
1717 lines
108 KiB
HTML
<!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> |