1<!DOCTYPE html> 2<html lang="fa" dir="rtl"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>اتÙ٠اسÛÙÙ ÙØ´Ø±Ûات جار â ØªØÙÛÙ Ø®ÙØ¯Ú©Ø§Ø± Ø±ÙØ²Ùا٠ÙâÙØ§ ÙØ± Ø±ÙØ² ساعت Û¶ ØµØ¨Ø Ø±ÙÛ Ø´Ø¨Ú©Ù٠ساز٠اÙ</title> 7 <meta name="description" content="سرÙÛØ³ اتÙ٠اسÛÙÙ ÙØ´Ø±Ûات جار ÙØ± Ø±ÙØ² ØµØ¨ØØ Ø±ÙØ²Ùا٠ÙâÙØ§ Ù ÙØ´Ø±Ûات را بÙâØµÙØ±Øª Ø®ÙØ¯Ú©Ø§Ø± رÙÛ Ø´Ø¨Ú©Ù٠داخÙÛ Ø³Ø§Ø²Ù Ø§Ù Ø´Ù Ø§ ÙØ±Ø§Ø± Ù ÛâØ¯ÙØ¯Ø بدÙ٠داÙÙÙØ¯ Ø¯Ø³ØªÛØ بدÙÙ Ø³Ø±ÙØ± Ø§Ø®ØªØµØ§ØµÛ Ù Ø¨Ø¯ÙÙ ÙÛØ§Ø² Ú©Ø§Ø±Ù ÙØ¯Ø§Ù ب٠اÛÙØªØ±Ùت." /> 8 <meta name="theme-color" content="#0c0c0f" /> 9 10 <meta property="og:title" content="اتÙ٠اسÛÙÙ ÙØ´Ø±Ûات جار" /> 11 <meta property="og:description" content="ÙØ´Ø±Ûات ÙØ± Ø±ÙØ² ساعت Û¶ ØµØ¨Ø Ø±ÙÛ Ø´Ø¨Ú©ÙÙ Ø³Ø§Ø²Ù Ø§ÙØªØ§Ù â Ø¨Ø¯Ù٠اÛÙÚ©Ù Ú©Ø³Û Ø¯Ø§ÙÙÙØ¯Ø´Ø§Ù Ú©ÙØ¯." /> 12 <meta property="og:type" content="website" /> 13 14 <link rel="icon" type="image/png" href="assets/Jaaar-App-Logo.png" /> 15 16 <!-- No-JS guard: mark that JS is active. Anything that HIDES content until JS 17 runs must be gated behind `.js` so the page stays fully readable when 18 scripts are blocked (common on locked-down government browsers). --> 19
19<script>document.documentElement.classList.add('js');</script>
19 20 21 <!-- Brand font: Vazirmatn (per blueprint â closest open match to the Jaaar site face) --> 22 <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin /> 23 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/Vazirmatn-font-face.css" /> 24 25 <style> 26 /* ========================================================= 27 DESIGN TOKENS (discipline from docs/DESIGN-replicate.md, 28 values are Jaaar's: dark mode + brand red #E8232A + Vazirmatn) 29 ========================================================= */ 30 :root { 31 --bg-deep: #0c0c0f; 32 --bg-surface: #15151a; 33 --bg-elevated: #1e1e25; 34 --bg-inset: #101014; 35 36 --brand-red: #E8232A; 37 --brand-red-dim: #b81d23; 38 --brand-glow: #ff4d54; 39 40 --text: #f4f4f5; 41 --text-muted: #a1a1aa; 42 --text-faint: #71717a; 43 44 --border: #27272e; 45 --border-strong: #3a3a44; 46 47 --focus-ring: rgba(232, 35, 42, 0.55); 48 --success: #2fb56b; 49 50 --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-full: 9999px; 51 52 --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; 53 --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; 54 --s-section: 96px; 55 56 --maxw: 1200px; 57 --header-h: 80px; 58 59 --shadow-soft: 0 18px 50px rgba(0,0,0,0.45); 60 --ease: cubic-bezier(0.22, 0.61, 0.36, 1); 61 } 62 63 /* ===================== RESET / BASE ===================== */ 64 *, *::before, *::after { box-sizing: border-box; } 65 html { scroll-behavior: smooth; } 66 body { 67 margin: 0; 68 font-family: "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif; 69 background: var(--bg-deep); 70 color: var(--text); 71 line-height: 1.8; 72 font-size: 16px; 73 -webkit-font-smoothing: antialiased; 74 text-rendering: optimizeLegibility; 75 overflow-x: hidden; 76 } 77 h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 800; letter-spacing: -0.01em; } 78 p { margin: 0; } 79 a { color: inherit; text-decoration: none; } 80 img { max-width: 100%; display: block; } 81 button { font-family: inherit; cursor: pointer; } 82 83 a:focus-visible, button:focus-visible, input:focus-visible, 84 textarea:focus-visible, summary:focus-visible { 85 outline: 3px solid var(--focus-ring); 86 outline-offset: 2px; 87 border-radius: var(--r-sm); 88 } 89 90 .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); } 91 .section { padding-block: var(--s-section); } 92 93 .eyebrow { 94 display: inline-flex; align-items: center; gap: var(--s-2); 95 font-size: 0.8rem; font-weight: 700; color: var(--brand-red); 96 letter-spacing: 0.02em; margin-bottom: var(--s-4); 97 } 98 .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brand-red); border-radius: var(--r-full); } 99 100 .section-title { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); max-width: 24ch; } 101 .section-lead { color: var(--text-muted); font-size: 1.05rem; max-width: 62ch; margin-top: var(--s-4); } 102 103 /* ===================== BUTTONS ===================== */ 104 .btn { 105 display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); 106 border: 1px solid transparent; border-radius: var(--r-full); 107 padding: 13px 26px; font-weight: 700; font-size: 0.98rem; line-height: 1; 108 transition: transform 0.15s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease); 109 white-space: nowrap; 110 } 111 .btn:hover { transform: translateY(-2px); } 112 .btn:active { transform: translateY(0); } 113 .btn-primary { background: var(--brand-red); color: #fff; box-shadow: 0 8px 24px rgba(232,35,42,0.28); } 114 .btn-primary:hover { background: var(--brand-red-dim); box-shadow: 0 10px 30px rgba(232,35,42,0.4); } 115 .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } 116 .btn-ghost:hover { background: var(--bg-elevated); } 117 .btn-sm { padding: 9px 18px; font-size: 0.875rem; } 118 .btn-lg { padding: 16px 34px; font-size: 1.05rem; } 119 120 /* ===================== HEADER ===================== */ 121 .site-header { 122 position: sticky; top: 0; z-index: 50; height: var(--header-h); 123 display: flex; align-items: center; 124 border-bottom: 1px solid transparent; 125 transition: background 0.3s var(--ease), border-color 0.3s var(--ease); 126 } 127 .site-header.scrolled { background: rgba(12,12,15,0.78); backdrop-filter: blur(14px); border-bottom-color: var(--border); } 128 .header-inner { 129 width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); 130 display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); 131 } 132 .brand-logo { height: 48px; width: auto; } /* enlarged to match jaaar.com header weight */ 133 .nav-links { display: flex; align-items: center; gap: var(--s-6); } 134 .nav-links a { color: var(--text-muted); font-size: 0.92rem; font-weight: 500; transition: color 0.2s var(--ease); } 135 .nav-links a:hover { color: var(--text); } 136 .header-cta { display: flex; align-items: center; gap: var(--s-3); } 137 .nav-toggle { display: none; background: none; border: 0; color: var(--text); padding: 6px; } 138 139 /* ===================== HERO ===================== */ 140 .hero { position: relative; overflow: hidden; padding-top: var(--s-7); } 141 .hero::before { 142 content: ""; position: absolute; inset: 0; pointer-events: none; 143 background: 144 radial-gradient(60% 55% at 78% 28%, rgba(232,35,42,0.18), transparent 60%), 145 radial-gradient(40% 40% at 20% 0%, rgba(232,35,42,0.07), transparent 70%); 146 } 147 .hero::after { 148 content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4; 149 background-image: 150 linear-gradient(var(--border) 1px, transparent 1px), 151 linear-gradient(90deg, var(--border) 1px, transparent 1px); 152 background-size: 64px 64px; 153 mask-image: radial-gradient(70% 60% at 70% 30%, #000 0%, transparent 75%); 154 } 155 .hero-grid { 156 position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; 157 align-items: center; gap: var(--s-7); padding-block: var(--s-7) var(--s-8); 158 } 159 .hero-copy { max-width: 38rem; } 160 .hero-clock-badge { 161 display: inline-flex; align-items: center; gap: var(--s-2); 162 background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-full); 163 padding: 6px 14px 6px 6px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); 164 margin-bottom: var(--s-5); 165 } 166 .hero-clock-badge strong { color: var(--text); font-weight: 700; } 167 .hero-clock-badge .clock-chip { 168 display: inline-flex; width: 26px;
168 height: 26px; align-items: center; justify-content: center; 169 background: var(--brand-red); border-radius: var(--r-full); 170 } 171 .hero h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); line-height: 1.28; font-weight: 800; } 172 .hero h1 .accent { color: var(--brand-red); } 173 .hero-sub { color: var(--text-muted); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); margin-top: var(--s-5); max-width: 36rem; } 174 .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } 175 .hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-6); color: var(--text-faint); font-size: 0.85rem; } 176 .hero-meta span { display: inline-flex; align-items: center; gap: var(--s-2); } 177 .hero-meta svg { color: var(--success); } 178 179 .hero-visual { position: relative; } 180 .hero-visual .glow { 181 position: absolute; inset: 8% 6% 14% 6%; 182 background: radial-gradient(closest-side, rgba(232,35,42,0.4), transparent 72%); 183 filter: blur(38px); z-index: 0; 184 } 185 .hero-visual img { position: relative; z-index: 1; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55)); } 186 .hero-mini-clock { 187 position: absolute; z-index: 2; top: -6px; left: 8%; 188 width: 84px; height: 84px; background: var(--bg-elevated); border: 1px solid var(--border); 189 border-radius: var(--r-full); display: grid; place-items: center; box-shadow: var(--shadow-soft); 190 } 191 192 /* ===================== SOCIAL PROOF BAR ===================== */ 193 .proof { border-block: 1px solid var(--border); background: var(--bg-surface); padding-block: var(--s-5); } 194 .proof-inner { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; text-align: center; } 195 .proof p { color: var(--text-muted); font-size: 0.98rem; } 196 .proof strong { color: var(--text); } 197 /* TODO[jaaar]: replace placeholders with real organization logos */ 198 .proof-logos { display: flex; gap: var(--s-5); align-items: center; opacity: 0.55; } 199 .proof-logo-ph { width: 92px; height: 30px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); } 200 201 /* ===================== PROBLEM ===================== */ 202 .problem-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--s-7); align-items: center; } 203 .problem-points { margin-top: var(--s-5); display: grid; gap: var(--s-3); } 204 .problem-point { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-muted); } 205 .problem-point .x { 206 flex: none; width: 22px; height: 22px; margin-top: 4px; border-radius: var(--r-full); 207 background: rgba(232,35,42,0.12); color: var(--brand-red); display: grid; place-items: center; 208 font-size: 13px; font-weight: 800; 209 } 210 .before-card { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); } 211 .before-card .win-bar { display: flex; gap: 6px; margin-bottom: var(--s-4); } 212 .before-card .win-bar i { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--border-strong); display: inline-block; } 213 .file-row { 214 display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px; 215 border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); 216 color: var(--text-muted); font-size: 0.85rem; margin-bottom: var(--s-2); 217 } 218 .file-row .pdf { flex: none; font-size: 0.6rem; font-weight: 800; background: var(--brand-red); color: #fff; padding: 3px 5px; border-radius: 4px; } 219 .file-row.dim { opacity: 0.5; } 220 221 /* ===================== HOW IT WORKS / DIAGRAM ===================== */ 222 .how { background: var(--bg-surface); } 223 .how-head { text-align: center; max-width: 46rem; margin-inline: auto; } 224 .how-head .section-lead { margin-inline: auto; } 225 .diagram-wrap { 226 margin-top: var(--s-7); background: var(--bg-inset); border: 1px solid var(--border); 227 border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); overflow: hidden; 228 } 229 .flow-diagram { width: 100%; height: auto; display: block; } 230 .flow-diagram.flow-v { display: none; } 231 232 /* All diagram colors set via CSS classes (NOT via var() in SVG presentation 233 attributes, which browsers do not reliably resolve). */ 234 .flow-node-label { fill: var(--text); font-weight: 700; font-size: 15px; } 235 .flow-node-label.hot { fill: var(--brand-red); } 236 .flow-node-sub { fill: var(--text-faint); font-size: 12px; } 237 .flow-icon { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } 238 .flow-node-box { fill: var(--bg-elevated); stroke: var(--border-strong); stroke-width: 1.5; } 239 .flow-node-box.hot { stroke: var(--brand-red); } 240 .flow-line { stroke: var(--border-strong); stroke-width: 2; fill: none; } 241 .flow-arrow { fill: var(--brand-red); } 242 .flow-clock { fill: none; stroke: var(--brand-red); stroke-width: 2.4; stroke-linecap: round; } 243 244 /* Flowing dash along the connectors (right -> left) */ 245 .flow-dash { 246 stroke: var(--brand-red); stroke-width: 2.6; fill: none; 247 stroke-dasharray: 6 12; stroke-linecap: round; 248 animation: flow-move 2.6s linear infinite; /* gentle, unhurried flow */ 249 }
250 @keyframes flow-move { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -36; } } 251 252 /* Pulsing clock in the "automatic" node */ 253 .clock-pulse { transform-box: fill-box; transform-origin: center; animation: clock-pulse 3s ease-in-out infinite; } 254 @keyframes clock-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } } 255 256 .steps { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } 257 .step { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); } 258 .step-num { 259 width: 38px; height: 38px; border-radius: var(--r-full); background: rgba(232,35,42,0.12); 260 color: var(--brand-red); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; margin-bottom: var(--s-4); 261 } 262 .step h3 { font-size: 1.1rem; margin-bottom: var(--s-2); } 263 .step p { color: var(--text-muted); font-size: 0.95rem; } 264 265 /* ===================== BENEFITS ===================== */ 266 .benefits-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; } 267 .app-logo-deco { width: 64px; height: 64px; opacity: 0.95; flex: none; } 268 .benefit-cards { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } 269 .benefit { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-6); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); } 270 .benefit:hover { border-color: var(--border-strong); transform: translateY(-3px); } 271 .benefit-icon { width: 50px; height: 50px; border-radius: var(--r-md); background: var(--bg-elevated); border: 1px solid var(--border); display: grid; place-items: center; color: var(--brand-red); margin-bottom: var(--s-5); } 272 .benefit h3 { font-size: 1.15rem; margin-bottom: var(--s-3); } 273 .benefit p { color: var(--text-muted); font-size: 0.96rem; } 274 275 /* ===================== IT OBJECTION ===================== */ 276 .it-box { 277 background: linear-gradient(180deg, rgba(232,35,42,0.06), transparent 60%), var(--bg-inset); 278 border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: var(--s-7); 279 display: grid; grid-template-columns: auto 1fr; gap: var(--s-6); align-items: start; 280 } 281 .it-box .it-icon { width: 64px; height: 64px; flex: none; border-radius: var(--r-md); background: var(--bg-elevated); border: 1px solid var(--border); display: grid; place-items: center; color: var(--brand-red); } 282 .it-list { margin-top: var(--s-5); display: grid; gap: var(--s-3); } 283 .it-item { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-muted); font-size: 0.97rem; } 284 .it-item .chk { flex: none; color: var(--success); margin-top: 3px; } 285 286 /* ===================== FAQ (native <details> â works without JS) ===================== */ 287 .faq { background: var(--bg-surface); } 288 .faq-list { margin-top: var(--s-6); max-width: 820px; margin-inline: auto; } 289 .faq-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-deep); margin-bottom: var(--s-3); overflow: hidden; } 290 .faq-q { 291 list-style: none; cursor: pointer; 292 display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); 293 color: var(--text); padding: var(--s-5); font-size: 1.02rem; font-weight: 700; 294 } 295 .faq-q::-webkit-details-marker { display: none; } 296 .faq-q .chevron { flex: none; transition: transform 0.3s var(--ease); color: var(--text-muted); } 297 .faq-item[open] .faq-q .chevron { transform: rotate(180deg); } 298 .faq-a-inner { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); font-size: 0.97rem; } 299 300 /* ===================== FINAL CTA ===================== */ 301 .final-cta-inner { 302 position: relative; background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dim)); 303 border-radius: var(--r-lg); padding: var(--s-8) var(--s-6); text-align: center; overflow: hidden; 304 } 305 .final-cta-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% -10%, rgba(255,255,255,0.22), transparent 60%); } 306 .final-cta-inner > * { position: relative; } 307 .final-cta h2 { color: #fff; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.4rem); max-width: 26ch; margin-inline: auto; } 308 .final-cta p { color: rgba(255,255,255,0.9); margin-top: var(--s-4); font-size: 1.05rem; max-width: 52ch; margin-inline: auto; } 309 .final-cta .btn-white { background: #fff; color: var(--brand-red-dim); margin-top: var(--s-6); box-shadow: 0 14px 40px rgba(0,0,0,0.3); } 310 .final-cta .btn-white:hover { background: #f4f4f5; } 311 .final-cta .secondary-link { display: inline-block; margin-top: var(--s-5); color: #fff; font-size: 0.95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; opacity: 0.9; } 312 .final-cta .secondary-link:hover { opacity: 1; } 313 314 /* ===================== FOOTER (minimal) ===================== */ 315 .site-footer { background: #000; border-top: 1px solid var(--border); padding-block: var(--s-7) var(--s-6); } 316 .footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; } 317 .footer-brand img { height: 40px; margin-bottom: var(--s-4); } 318 .footer-brand p { color: var(--text-faint); font-size: 0.9rem; max-width: 34ch; } 319 .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-4); } 320 .footer-links { display: flex; gap: var(--s-5); } 321 .footer-links a { color: var(--text-muted); font-size: 0.92rem; font-weight: 500; transition: color 0.2s var(--ease); } 322 .footer-links a:hover { color: var(--text); } 323 .footer-socials { display: flex; gap: var(--s-3); } 324 .footer-socials a { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--r-full); display: grid; place-items: center; color: var(--text-muted); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } 325 .footer-socials a:hover { color: var(--text); border-color: var(--border-strong); } 326 .footer-bottom { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); color: var(--text-faint); font-size: 0.85rem; } 327 328 /* ===================== MODAL ===================== */
329 .modal-backdrop { 330 position: fixed; inset: 0; z-index: 100; background: rgba(5,5,7,0.72); backdrop-filter: blur(6px); 331 display: flex; align-items: center; justify-content: center; padding: var(--s-4); 332 opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease); 333 } 334 .modal-backdrop.open { opacity: 1; visibility: visible; } 335 .modal { 336 width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; 337 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); 338 padding: var(--s-7); box-shadow: var(--shadow-soft); transform: scale(0.94) translateY(10px); 339 transition: transform 0.28s var(--ease); 340 } 341 .modal-backdrop.open .modal { transform: scale(1) translateY(0); } 342 .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); } 343 .modal-head h2 { font-size: 1.4rem; } 344 .modal-head p { color: var(--text-muted); font-size: 0.92rem; margin-top: var(--s-2); } 345 .modal-close { flex: none; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); display: grid; place-items: center; }
346 .modal-close:hover { color: var(--text); } 347 348 /* ----- Contact-channel list ----- */ 349 .contact-list { display: grid; gap: var(--s-3); margin-top: var(--s-2); } 350 .contact-option { 351 display: flex; align-items: center; gap: var(--s-4); 352 background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); 353 padding: var(--s-4); color: var(--text); width: 100%; text-align: right; 354 transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease); 355 } 356 .contact-option:hover { border-color: var(--border-strong); background: #23232b; transform: translateY(-2px); } 357 /* Per-option accent comes from inline --chip / --chip-bg custom properties */ 358 .contact-chip { 359 flex: none; width: 48px; height: 48px; border-radius: var(--r-full); 360 display: grid; place-items: center; 361 color: var(--chip, var(--text)); background: var(--chip-bg, var(--bg-surface)); 362 } 363 .contact-chip svg, .contact-chip img { width: 24px; height: 24px; display: block; } 364 .contact-text { flex: 1 1 auto; min-width: 0; } 365 .contact-text .t { display: block; font-weight: 700; font-size: 1rem; } 366 .contact-text .s { display: block; color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; } 367 .contact-option .chev { flex: none; color: var(--text-faint); transition: transform 0.2s var(--ease); } 368 .contact-option:hover .chev { transform: translateX(-3px); } 369 370 /* ===================== REVEAL ON SCROLL ===================== 371 Gated behind `.js`: without JS the .reveal rule below never applies, 372 so all content is visible by default. */ 373 .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } 374 .js .reveal.in { opacity: 1; transform: none; } 375 376 /* ===================== RESPONSIVE ===================== */ 377 @media (max-width: 980px) { 378 .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); } 379 .hero-visual { max-width: 560px; margin-inline: auto; } 380 .problem-grid { grid-template-columns: 1fr; } 381 } 382 @media (max-width: 760px) { 383 :root { --s-section: 64px; --header-h: 68px; } 384 .brand-logo { height: 38px; } 385 .nav-links { display: none; } 386 .nav-toggle { display: grid; place-items: center; } 387 .nav-links.mobile-open { 388 display: flex; flex-direction: column; align-items: flex-start; 389 position: absolute; top: var(--header-h); inset-inline: 0; 390 background: var(--bg-surface); border-bottom: 1px solid var(--border); padding: var(--s-5); gap: var(--s-4); 391 } 392 .steps { grid-template-columns: 1fr; } 393 .benefit-cards { grid-template-columns: 1fr; } 394 .it-box { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6); } 395 .footer-top { flex-direction: column; } 396 .footer-right { align-items: flex-start; } 397 .modal { padding: var(--s-6); } 398 .header-cta .btn-text-hide { display: none; } 399 /* swap to vertical diagram on mobile */ 400 .flow-diagram.flow-h { display: none; } 401 .flow-diagram.flow-v { display: block; max-width: 320px; margin-inline: auto; } 402 } 403 404 /* ===================== REDUCED MOTION ===================== */ 405 @media (prefers-reduced-motion: reduce) { 406 *, *::before, *::after { 407 animation-duration: 0.001ms !important; 408 animation-iteration-count: 1 !important; 409 transition-duration: 0.001ms !important; 410 scroll-behavior: auto !important; 411 } 412 .js .reveal { opacity: 1; transform: none; } 413 414 /* The global reset above (`* { animation-duration: .001ms !important }`) is 415 what was silently killing the diagram flow on reduced-motion machines. 416 Per design choice ("gentle motion always"), exempt the flow diagram and 417 keep it animating â just slower/softer than the default â so it still 418 reads as an active pipeline. Higher specificity + !important overrides 419 the `*` reset. */ 420 .flow-dash { 421 stroke-dasharray: 6 12 !important; 422 animation: flow-move 3.6s linear infinite !important; 423 animation-duration: 3.6s !important; 424 animation-iteration-count: infinite !important; 425 } 426 .clock-pulse { 427 animation: clock-pulse 4s ease-in-out infinite !important; 428 animation-duration: 4s !important; 429 animation-iteration-count: infinite !important; 430 } 431 } 432 </style> 433</head> 434<body> 435 436 <!-- ============================ HEADER ============================ --> 437 <header class="site-header" id="siteHeader"> 438 <div class="header-inner"> 439 <a href="#" aria-label="جار â ØµÙØÙ٠اصÙÛ"> 440 <img class="brand-logo" src="assets/Jaaar_Logo_Domain.png" alt="ÙÙÚ¯ÙÛ Ø¬Ø§Ø±" /> 441 </a> 442 443 <nav class="nav-links" id="navLinks" aria-label="ÙØ§ÙØ¨Ø±Û Ø§ØµÙÛ"> 444 <a href="#how">Ø±ÙØ´ کار</a> 445 <a href="#benefits">Ù Ø²Ø§ÛØ§</a> 446 <a href="#faq">Ø³ÙØ§Ùات ٠تداÙÙ</a> 447 </nav> 448 449 <div class="header-cta"> 450 <button class="btn btn-primary btn-sm" data-open-modal>
451 <span class="btn-text-hide">سرÙÛØ³ Ø¢Ø²Ù Ø§ÛØ´Û</span> راÛگا٠452 </button> 453 <button class="nav-toggle" id="navToggle" aria-label="باز کرد٠٠ÙÙ" aria-expanded="false"> 454 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg> 455 </button> 456 </div> 457 </div> 458 </header> 459 460 <!-- ============================ HERO ============================ --> 461 <section class="hero"> 462 <div class="container"> 463 <div class="hero-grid"> 464 <div class="hero-copy"> 465 <span class="hero-clock-badge"> 466 <span class="clock-chip" aria-hidden="true"> 467 <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> 468 </span> 469 ÙØ± Ø±ÙØ² رأس ساعت <strong>Û¶:Û°Û° صبØ</strong>Ø Ø®ÙØ¯Ú©Ø§Ø± ٠بÛâÙÙÙÙ 470 </span> 471 472 <h1> 473 ÙØ´Ø±Ûات ÙØ± Ø±ÙØ² ساعت <span class="accent">Û¶ صبØ</span> رÙÛ Ø´Ø¨Ú©ÙÙ Ø³Ø§Ø²Ù Ø§ÙØªØ§Ù â 474 بدÙ٠اÛÙÚ©Ù Ú©Ø³Û Ø¯Ø§ÙÙÙØ¯Ø´Ø§Ù Ú©ÙØ¯ 475 </h1> 476 477 <p class="hero-sub"> 478 اتÙ٠اسÛÙÙ ÙØ´Ø±Ûات جار ÙØ± Ø±ÙØ² ØµØ¨Ø ÙØ§ÛÙâÙØ§Û PDF را Ø®ÙØ¯Ú©Ø§Ø± Ø¯Ø±ÛØ§Ùت Ù ÛâÚ©ÙØ¯ ٠در شبکÙ٠داخÙÛ Ø³Ø§Ø²Ù Ø§ÙØªØ§Ù ÙØ±Ø§Ø± Ù ÛâØ¯ÙØ¯. 479 Ú©Ø§Ø±Ù ÙØ¯Ø§Ù از شبکÙ٠داخÙÛ Ù ÛâØ®ÙØ§ÙÙØ¯ â ØØªÛ Ø¨Ø¯Ù٠اÛÙØªØ±Ùت. 480 </p> 481 482 <div class="hero-actions"> 483 <button class="btn btn-primary btn-lg" data-open-modal>سرÙÛØ³ Ø¢Ø²Ù Ø§ÛØ´Û راÛگا٠را Ø´Ø±ÙØ¹ Ú©ÙÛØ¯</button> 484 <a class="btn btn-ghost btn-lg" href="#how">Ø±ÙØ´ کار را ببÛÙÛØ¯</a> 485 </div> 486 487 <div class="hero-meta"> 488 <span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> بدÙÙ ÙÛØ§Ø² ب٠اÛÙØªØ±Ùت Ø¨Ø±Ø§Û Ú©Ø§Ø±Ù ÙØ¯Ø§Ù</span> 489 <span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> رÙÛ ÛÚ© کا٠پÛÙØªØ± ٠ع٠ÙÙÛ Ø¯Ø± شبکÙ</span> 490 <span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> بدÙÙ Ø³Ø±ÙØ± اختصاصÛ</span> 491 </div> 492 </div> 493 494 <div class="hero-visual"> 495 <div class="glow" aria-hidden="true"></div> 496 <!-- 6AM motif: mini clock fixed at 6:00 (minute up, hour down) --> 497 <div class="hero-mini-clock" aria-hidden="true"> 498 <svg width="52" height="52" viewBox="0 0 52 52"> 499 <circle cx="26" cy="26" r="22" fill="none" stroke="#27272e" stroke-width="3"/> 500 <circle cx="26" cy="26" r="2.4" fill="#E8232A"/> 501 <line x1="26" y1="26" x2="26" y2="12" stroke="#f4f4f5" stroke-width="3" stroke-linecap="round"/> 502 <line x1="26" y1="26" x2="26" y2="37" stroke="#E8232A" stroke-width="3" stroke-linecap="round"/> 503 <text x="26" y="49" text-anchor="middle" fill="#a1a1aa" font-size="7" font-family="Vazirmatn">Û¶:Û°Û°</text> 504 </svg> 505 </div> 506 <img src="assets/jaaar-devices.png" 507 alt="ÙÙ Ø§ÛØ´ سرÙÛØ³ اتÙ٠اسÛÙÙ ÙØ´Ø±Ûات جار رÙÛ Ú©Ø§Ù Ù¾ÛÙØªØ±Ø ØªØ¨ÙØª Ù Ù ÙØ¨Ø§Û٠با ØµÙØÙâØ§Û Ù¾Ø± از Ø±ÙØ²Ùا٠ÙâÙØ§Û Ø±ÙØ²" /> 508 </div> 509 </div> 510 </div> 511 </section> 512 513 <!-- ====================== SOCIAL PROOF BAR ====================== --> 514 <section class="proof"> 515 <div class="container proof-inner"> 516 <p><strong>دÙâÙØ§ ساز٠ا٠دÙÙØªÛ Ù Ø®ØµÙØµÛ در Ø§ÛØ±Ø§Ù</strong>Ø ØªÙØ²Ûع Ø±ÙØ²Ø§ÙÙÙ ÙØ´Ø±Ûاتشا٠را ب٠اتÙ٠اسÛÙ٠جار سپردÙâØ§ÙØ¯.</p> 517 <!-- TODO[jaaar]: replace placeholders with real organization logos --> 518 <div class="proof-logos" aria-hidden="true">
519 <span class="proof-logo-ph"></span><span class="proof-logo-ph"></span> 520 <span class="proof-logo-ph"></span><span class="proof-logo-ph"></span> 521 </div> 522 </div> 523 </section> 524 525 <!-- ============================ PROBLEM ============================ --> 526 <section class="section" id="problem"> 527 <div class="container"> 528 <div class="problem-grid"> 529 <div class="reveal"> 530 <span class="eyebrow">٠سئÙÙ</span> 531 <h2 class="section-title">ÙØ± Ø±ÙØ² ØµØ¨ØØ ÛÚ© ÙÙØ± در ساز٠ا٠ش٠ا اÛ٠کار را Ø§ÙØ¬Ø§Ù Ù ÛâØ¯ÙØ¯</h2> 532 <p class="section-lead"> 533 ÙØ§Ø±Ø¯ Ø³Ø§ÛØª جار Ù ÛâØ´ÙØ¯. Ø±ÙØ²Ùا٠ÙâÙØ§ را ÛÚ©ÛâÛÚ©Û Ø¯Ø§ÙÙÙØ¯ Ù ÛâÚ©ÙØ¯. ÙØ§ÛÙâÙØ§ را در ÛÚ© Ù¾ÙØ´Ù رÙÛ Ø´Ø¨Ú©Ù٠داخÙÛ Ù Ûâگذارد. 534 Ø¨Ø±Ø§Û Ø¨Ø¹Ø¶Û Ù Ø¯ÛØ±Ø§ÙØ ÛÚ© ÙØ³Ø®ÙÙ ÚØ§Ù¾Û Ù٠جداگاÙ٠تÙÛÙ Ù ÛâØ´ÙØ¯. 535 </p> 536 <div class="problem-points"> 537 <div class="problem-point"><span class="x" aria-hidden="true">â</span><span>اÛ٠کار ÙØ± Ø±ÙØ² ÙÙØª Ù ÛâØ¨Ø±Ø¯Ø ÙÙØªÛ Ú©Ù Ù ÛâØªÙØ§Ùست صر٠کار اصÙÛ Ø¢Ù ÙÛØ±Ù Ø´ÙØ¯.</span></div> 538 <div class="problem-point"><span class="x" aria-hidden="true">â</span><span>اگر Ø¢Ù ÙÙØ± ÙØ¨Ø§Ø´Ø¯ ÛØ§ کار را ÙØ±Ø§Ù ÙØ´ Ú©ÙØ¯Ø Ú©Ø§Ø±Ù ÙØ¯Ø§Ù Ø¯Ø³ØªØ±Ø³Û ÙØ¯Ø§Ø±Ùد.</span></div> 539 <div class="problem-point"><span class="x" aria-hidden="true">â</span><span>در ساز٠اÙâÙØ§ÛÛ Ú©Ù Ú©Ø§Ù Ù¾ÛÙØªØ±Ùا ب٠اÛÙØªØ±Ùت ÙØµÙ ÙÛØ³ØªÙØ¯Ø Ø§Û٠تÙÙØ§ Ø±Ø§Ù Ø¯Ø³ØªØ±Ø³Û Ú©Ø§Ø±Ù ÙØ¯Ø§Ù Ø¨Ù Ù Ø·Ø¨ÙØ¹Ø§Øª است.</span></div> 540 </div> 541 </div> 542 543 <!-- "Before" illustration â messy PDF network folder, pure SVG/HTML --> 544 <div class="before-card reveal" aria-hidden="true"> 545 <div class="win-bar"><i></i><i></i><i></i></div> 546 <div class="file-row"><span class="pdf">PDF</span> Ø±ÙØ²Ùا٠Ù_ÙÙ Ø´ÙØ±Û_ÙÙØ§ÛÛ(Û²).pdf</div> 547 <div class="file-row"><span class="pdf">PDF</span> دÙÛØ§Û-Ø§ÙØªØµØ§Ø¯ Û±Û´Û°Û³ Ú©Ù¾Û.pdf</div> 548 <div class="file-row dim"><span class="pdf">PDF</span> jam-e-jam_final_FINAL.pdf</div> 549 <div class="file-row dim"><span class="pdf">PDF</span> Untitled-Ø±ÙØ²Ùا٠Ù.pdf</div> 550 <div class="file-row"><span class="pdf">PDF</span> Ø§ÛØ±Ø§Ù_صبØ_Û¶-Û°Û°.pdf</div> 551 </div> 552 </div> 553 </div> 554 </section> 555 556 <!-- ====================== HOW IT WORKS / DIAGRAM ====================== --> 557 <section class="section how" id="how"> 558 <div class="container"> 559 <div class="how-head reveal"> 560 <span class="eyebrow">Ø±ÙØ´ کار</span> 561 <h2 class="section-title" style="margin-inline:auto;">از Ø§Ù Ø±ÙØ² تا ÙØ±Ø¯Ø§ ØµØ¨ØØ Ø³Ù ÙØ¯Ù Ø¨ÛØ´ØªØ± ÙØ§ØµÙÙ ÙØ¯Ø§Ø±Ûد</h2> 562 <p class="section-lead"> 563 ÙØ± Ø±ÙØ² ØµØ¨ØØ سا٠اÙÙ٠اتÙ٠اسÛÙ٠جار ØªÙ Ø§Ù ÙØ´Ø±Ûات Ø¯Ø±Ø®ÙØ§Ø³ØªÛ را Ø®ÙØ¯Ú©Ø§Ø± Ø¯Ø±ÛØ§Ùت Ù ÛâÚ©ÙØ¯ ٠در شبکÙ٠داخÙÛ Ø³Ø§Ø²Ù Ø§Ù ÙØ±Ø§Ø± Ù ÛâØ¯ÙØ¯ â 564 بدÙÙ Ø¯Ø®Ø§ÙØª Ø§ÙØ³Ø§ÙÛ Ù Ø¨Ø¯ÙÙ ØªØ£Ø®ÛØ±. Ø¨Ø±Ø§Û Ø§Ø¬Ø±Ø§ ÛÚ© کا٠پÛÙØªØ± ٠ع٠ÙÙÛ Ø¯Ø± شبکÙ٠ساز٠ا٠کاÙÛ Ø§Ø³ØªØ ÙÛØ§Ø²Û Ø¨Ù Ø³Ø±ÙØ± Ø§Ø®ØªØµØ§ØµÛ ÙÛØ³Øª. 565 </p> 566 </div> 567 568 <!-- ===== Animated SVG flow diagram (rebuilt from scratch â diagram.png NOT embedded) ===== 569 Logic: Ø³Ø±ÙØ± جار â Ø¯Ø±ÛØ§ÙØª Ø®ÙØ¯Ú©Ø§Ø± Û¶ ØµØ¨Ø â کا٠پÛÙØªØ± شبک٠â Ú©Ø§Ø±Ù ÙØ¯Ø§Ù 570 Horizontal RTL (rightâleft) on desktop; a separate vertical SVG shows on mobile. --> 571 <div class="diagram-wrap reveal"> 572 <!-- DESKTOP / horizontal --> 573 <svg class="flow-diagram flow-h" viewBox="0 0 1000 240" role="img" 574 aria-label="ÙÙ ÙØ¯Ø§Ø± Ø¬Ø±ÛØ§Ù: Ø³Ø±ÙØ± Ø¬Ø§Ø±Ø ÙØ´Ø±Ûات را رأس ساعت Û¶ ØµØ¨Ø Ø¨ÙâØµÙØ±Øª Ø®ÙØ¯Ú©Ø§Ø± ب٠ÛÚ© کا٠پÛÙØªØ± در شبکÙÙ Ø³Ø§Ø²Ù Ø§Ù Ù ÙØªÙÙ Ù ÛâÚ©ÙØ¯ Ù Ú©Ø§Ø±Ù ÙØ¯Ø§Ù آ٠را بدÙ٠اÛÙØªØ±Ùت Ù ÛâØ®ÙØ§ÙÙØ¯."> 575 <line class="flow-line" x1="740" y1="110" x2="640" y2="110"/> 576 <line class="flow-line" x1="500" y1="110" x2="400" y2="
576110"/> 577 <line class="flow-line" x1="260" y1="110" x2="160" y2="110"/> 578 <path class="flow-dash" d="M740 110 H640"/> 579 <path class="flow-dash" d="M500 110 H400"/> 580 <path class="flow-dash" d="M260 110 H160"/> 581 <g class="flow-arrow"> 582 <path d="M640 110 l10 -6 v12 z"/> 583 <path d="M400 110 l10 -6 v12 z"/> 584 <path d="M160 110 l10 -6 v12 z"/> 585 </g> 586 587 <!-- NODE 1 â Ø³Ø±Ùر جار (right) --> 588 <g transform="translate(800,60)"> 589 <rect class="flow-node-box" x="0" y="0" width="120" height="100" rx="16"/> 590 <g class="flow-icon" transform="translate(43,22)"> 591 <rect x="0" y="0" width="34" height="10" rx="2"/> 592 <rect x="0" y="16" width="34" height="10" rx="2"/> 593 </g> 594 <text class="flow-node-label" x="60" y="74" text-anchor="middle">Ø³Ø±ÙØ± جار</text> 595 <text class="flow-node-sub" x="60" y="92" text-anchor="middle">Ù ÙØ¨Ø¹ ÙØ´Ø±Ûات</text> 596 </g> 597 598 <!-- NODE 2 â Ø¯Ø±ÛØ§ÙØª Ø®ÙØ¯Ú©Ø§Ø± Û¶ ØµØ¨Ø (hot, clock at 6:00) --> 599 <g transform="translate(560,60)"> 600 <rect class="flow-node-box hot" x="0" y="0" width="120" height="100" rx="16"/> 601 <g class="clock-pulse" transform="translate(60,38)"> 602 <circle class="flow-clock" cx="0" cy="0" r="17"/> 603 <line class="flow-clock" x1="0" y1="0" x2="0" y2="-10"/> 604 <line class="flow-clock" x1="0" y1="0" x2="0" y2="9"/> 605 </g> 606 <text class="flow-node-label hot" x="60" y="74" text-anchor="middle">Ø¯Ø±ÛØ§Ùت Ø®ÙØ¯Ú©Ø§Ø±</text> 607 <text class="flow-node-sub" x="60" y="92" text-anchor="middle">رأس ساعت Û¶:Û°Û° صبØ</text> 608 </g> 609 610 <!-- NODE 3 â کا٠پÛÙØªØ± شبک٠--> 611 <g transform="translate(320,60)"> 612 <rect class="flow-node-box" x="0" y="0" width="120" height="100" rx="16"/> 613 <g class="flow-icon" transform="translate(43,20)"> 614 <rect x="0" y="0" width="34" height="22" rx="3"/> 615 <path d="M17 22 v6 M9 28 h16"/> 616 </g> 617 <text class="flow-node-label" x="60" y="74" text-anchor="middle">کا٠پÛÙØªØ± شبکÙ</text> 618 <text class="flow-node-sub" x="60" y="92" text-anchor="middle">شبکÙ٠داخÙÛ Ø´Ù Ø§</text> 619 </g> 620 621 <!-- NODE 4 â Ú©Ø§Ø±Ù ÙØ¯Ø§Ù (left) --> 622 <g transform="translate(80,60)"> 623 <rect class="flow-node-box" x="0" y="0" width="120" height="100" rx="16"/> 624 <g class="flow-icon" transform="translate(46,20)"> 625 <circle cx="14" cy="8" r="6"/> 626 <path d="M3 26 a11 9 0 0 1 22 0"/> 627 </g> 628 <text class="flow-node-label" x="60" y="74" text-anchor="middle">Ú©Ø§Ø±Ù ÙØ¯Ø§Ù</text> 629 <text class="flow-node-sub" x="60" y="92" text-anchor="middle">بدÙ٠اÛÙØªØ±Ùت</text> 630 </g> 631 </svg> 632 633 <!-- MOBILE / vertical (same logic, topâbottom) --> 634 <svg class="flow-diagram flow-v" viewBox="0 0 240 760" role="img" 635 aria-label="ÙÙ ÙØ¯Ø§Ø± Ø¬Ø±ÛØ§Ù Ø¹Ù ÙØ¯Û: Ø³Ø±ÙØ± Ø¬Ø§Ø±Ø Ø¯Ø±ÛØ§Ùت Ø®ÙØ¯Ú©Ø§Ø± ساعت Û¶ ØµØ¨ØØ کا٠پÛÙØªØ± Ø´Ø¨Ú©ÙØ Ú©Ø§Ø±Ù ÙØ¯Ø§Ù."> 636 <line class="flow-line" x1="120" y1="150" x2="120" y2="210"/> 637 <line class="flow-line" x1="120" y1="350" x2="120" y2="410"/> 638 <line class="flow-line" x1="120" y1="550" x2="120" y2="610"/> 639 <path class="flow-dash" d="M120 150 V210"/> 640 <path class="flow-dash" d="M120 350 V410"/> 641 <path class="flow-dash" d="M120 550 V610"/> 642 <g class="flow-arrow"> 643 <path d="M120 210 l-6 -10 h12 z"/> 644 <path d="M120 410 l-6 -10 h12 z"/> 645 <path d="M120 610 l-6 -10 h12 z"/> 646 </g> 647 648 <g transform="translate(60,20)"> 649 <rect class="flow-node-box" x="0" y="0" width="120" height="120" rx="16"/> 650 <text class="flow-node-label" x="60" y="70" text-anchor="middle">Ø³Ø±ÙØ± جار</text> 651 <text class="flow-node-sub" x="60" y="92" text-anchor="middle">Ù ÙØ¨Ø¹ ÙØ´Ø±Ûات</text> 652 </g> 653 <g transform="translate(60,220)"> 654 <rect class="flow-node-box hot" x="0" y="0" width="120" height="120" rx="16"/> 655 <g class="clock-pulse" transform="translate(60,40)"> 656 <circle class="flow-clock" cx="0" cy="0" r="16"/> 657 <line class="flow-clock" x1="0" y1="0" x2="0" y2="-9"/> 658 <line class="flow-clock" x1="0" y1="0" x2="0" y2="8"/> 659 </g> 660 <text class="flow-node-label hot" x="60" y="86" text-anchor="middle">Ø¯Ø±ÛØ§Ùت Ø®ÙØ¯Ú©Ø§Ø±</text> 661 <text class="flow-node-sub" x="60" y="105" text-anchor="middle">ساعت Û¶:Û°Û° صبØ</text> 662 </g> 663 <g transform="translate(60,420)"> 664 <rect class="flow-node-box" x="0" y="0" width="120" height="120" rx="16"/> 665 <text class="flow-node-label" x="60" y="70" text-anchor="middle">کا٠پÛÙØªØ± شبکÙ</text> 666 <text class="flow-node-sub" x="60" y="92" text-anchor="middle">شبکÙ٠داخÙÛ Ø´Ù Ø§</text> 667 </g> 668 <g transform="translate(60,620)"> 669 <rect class="flow-node-box" x="0" y="0" width="120" height="120" rx="16"/> 670 <text class="flow-node-label" x="60" y="70" text-anchor="middle">Ú©Ø§Ø±Ù ÙØ¯Ø§Ù</text> 671 <text class="flow-node-sub" x="60" y="92" text-anchor="middle">بدÙ٠اÛÙØªØ±Ùت</text> 672 </g> 673 </svg> 674 </div> 675 676 <!-- three steps (official copy) --> 677 <div class="steps"> 678 <div class="step reveal"> 679 <div class="step-num">Û±</div> 680 <h3>ÙØ´Ø±Ûاتتا٠را Ø§ÙØªØ®Ø§Ø¨ Ú©ÙÛØ¯</h3> 681 <p>
681از Ø¨ÛØ´ از Û³Û¸Û¹ عÙÙØ§Ù â Ø±ÙØ²ÙØ§Ù ÙâÙØ§Û ع٠ÙÙ ÛØ Ø§ÙØªØµØ§Ø¯ÛØ ÙØ±Ø²Ø´ÛØ ÙØ±ÙÙÚ¯ÛØ استاÙÛ Ù Ù Ø¬ÙØ§Øª ØªØ®ØµØµÛ â Ù٠اÙâÙØ§ÛÛ Ø±Ø§ Ú©Ù Ø³Ø§Ø²Ù Ø§ÙØªØ§Ù ÙÛØ§Ø² دارد ٠شخص Ú©ÙÛØ¯.</p> 682 </div> 683 <div class="step reveal"> 684 <div class="step-num">Û²</div> 685 <h3>رÙÛ Ø´Ø¨Ú©Ù٠داخÙÛ Ø±Ø§ÙâØ§ÙØ¯Ø§Ø²Û Ú©ÙÛØ¯</h3> 686 <p>سرÙÛØ³ رÙÛ ÛÚ© کا٠پÛÙØªØ± ٠ع٠ÙÙÛ Ø¯Ø± شبکÙÙ Ø³Ø§Ø²Ù Ø§Ù ÙØµØ¨ Ù ÛâØ´ÙØ¯ â Ø¨Ø§ Ø§ÙØ²ÙÙÙ٠آ٠ادÙÙ ÙØ±Ø¯Ù¾Ø±Ø³ ÛØ§ راÙâØ§ÙØ¯Ø§Ø²Û ٠ستÙÛÙ . ÙÛØ§Ø²Û Ø¨Ù Ø³Ø±ÙØ± Ø§Ø®ØªØµØ§ØµÛ ÙÛØ³Øª ٠تÛÙ Ù¾Ø´ØªÛØ¨Ø§ÙÛ Ø¬Ø§Ø± Ù٠را٠ش٠است.</p> 687 </div> 688 <div class="step reveal"> 689 <div class="step-num">Û³</div> 690 <h3>از ÙØ±Ø¯Ø§ ØµØ¨Ø ÙÙ ÙâÚÛØ² Ø®ÙØ¯Ú©Ø§Ø± است</h3> 691 <p>ÙØ± Ø±ÙØ² رأس ساعت Û¶ ØµØ¨ØØ ØªÙ Ø§Ù ÙØ§ÛÙâÙØ§ در شبکÙ٠داخÙÛ Ø¢Ù Ø§Ø¯ÙâØ§ÙØ¯. Ú©Ø§Ø±Ù ÙØ¯Ø§Ù ÙØ§Ø±Ø¯ Ù ÛâØ´ÙÙØ¯Ø جستج٠٠ÛâÚ©ÙÙØ¯Ø Ù ÛâØ®ÙØ§ÙÙØ¯.</p> 692 </div> 693 </div> 694 </div> 695 </section> 696 697 <!-- ============================ BENEFITS ============================ -->
698 <section class="section" id="benefits"> 699 <div class="container"> 700 <div class="benefits-head reveal"> 701 <div> 702 <span class="eyebrow">Ù Ø²Ø§ÛØ§</span> 703 <h2 class="section-title">Ø³Ù Ø§ØªÙØ§Ù Ù ÛâØ§ÙØªØ¯ ک٠با داÙÙÙØ¯ Ø¯Ø³ØªÛ Ø§Ù Ú©Ø§ÙâÙ¾Ø°ÛØ± ÙÛØ³Øª</h2> 704 </div> 705 <img class="app-logo-deco" src="assets/Jaaar-App-Logo.png" alt="" aria-hidden="true" loading="lazy" /> 706 </div> 707 708 <div class="benefit-cards"> 709 <div class="benefit reveal"> 710 <div class="benefit-icon" aria-hidden="true"> 711 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> 712 </div> 713 <h3>ÙÙØª ÛÚ© ÙÛØ±ÙÛ Ø³Ø§Ø²Ù Ø§ÙÛ Ø¢Ø²Ø§Ø¯ Ù ÛâØ´ÙØ¯</h3> 714 <p>Ø¢Ù ÙÙØ±Û Ú©Ù ÙØ± Ø±ÙØ² ØµØ¨Ø Ø¯Ø§ÙÙÙØ¯ Ù ÛâÚ©Ø±Ø¯Ø Ø§Ø² ÙØ±Ø¯Ø§ اÛ٠کار را ÙØ¯Ø§Ø±Ø¯. Ø¢Ù ÙÙØª صر٠کار اصÙÛâØ§Ø´ Ù ÛâØ´ÙØ¯.</p> 715 </div> 716 <div class="benefit reveal"> 717 <div class="benefit-icon" aria-hidden="true"> 718 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 21h8M12 18v3"/></svg> 719 </div> 720 <h3>Ú©Ø§Ø±Ù ÙØ¯Ø§Ù بدÙ٠اÛÙØªØ±Ùت ÙÙ Ø¯Ø³ØªØ±Ø³Û Ø¯Ø§Ø±ÙØ¯</h3> 721 <p>ÙØ´Ø±Ûات در شبکÙ٠داخÙÛ ÙØ³ØªÙد. ÙØ± Ú©Ø§Ø±Ù ÙØ¯Û از ÙØ± Ø§ÛØ³ØªÚ¯Ø§Ù Ú©Ø§Ø±ÛØ در ÙØ± ÙØØ¸Ù Ø§Ø² Ø±ÙØ² Ù ÛâØªÙØ§Ùد Ø¨Ø®ÙØ§Ùد â ØØªÛ Ø§Ú¯Ø± کا٠پÛÙØªØ±Ø´ Ø§ØµÙØ§Ù ب٠اÛÙØªØ±Ùت ÙØµÙ ÙØ¨Ø§Ø´Ø¯.</p> 722 </div> 723 <div class="benefit reveal"> 724 <div class="benefit-icon" aria-hidden="true"> 725 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg> 726 </div> 727 <h3>ÛÚ© رابط Ú©Ø§Ø±Ø¨Ø±Û Ø´Ú©Û٠بÙâØ¬Ø§Û Ù¾ÙØ´ÙÙ PDF</h3> 728 <p>بÙâØ¬Ø§Û ÙÛØ³Øª ÙØ§Û٠در ÛÚ© Ù¾ÙØ´ÙÙ Ø´Ø¨Ú©ÙØ Ú©Ø§Ø±Ù ÙØ¯Ø§Ù ÛÚ© Ù ØÛØ· آراست٠٠ÛâØ¨ÛÙÙØ¯: جستج٠در Ù ØªÙ Ù ÙØ§ÙØ§ØªØ Ø¢Ø±Ø´ÛÙ Ø±ÙØ²ÙØ§Û Ú¯Ø°Ø´ØªÙ Ù Ø¯Ø³ØªØ±Ø³Û Ø³Ø±ÛØ¹ Ø¨Ù ÙØ± ÙØ´Ø±ÛÙ.</p> 729 </div> 730 </div> 731 </div> 732 </section> 733 734 <!-- ====================== IT OBJECTION HANDLING ====================== --> 735 <section class="section" id="it"> 736 <div class="container"> 737 <div class="it-box reveal"> 738 <div class="it-icon" aria-hidden="true"> 739 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 8 8 11 4.5-3 8-6 8-11V5z"/><path d="M9 12l2 2 4-4"/></svg> 740 </div> 741 <div> 742 <span class="eyebrow">ÙÛÚÙ٠تÛÙ IT</span> 743 <h2 class="section-title">Ø¨Ø±Ø§Û ØªÛÙ IT: راÙâØ§ÙØ¯Ø§Ø²Û Ú©Ù Ù¾ÛÚÛØ¯Ù ÙÛØ³Øª</h2> 744 <p class="section-lead"> 745 Ø±ÙØ§Ø¨Ø· ع٠ÙÙ Û Ø§Û٠سرÙÛØ³ را Ù ÛâØ®ÙØ§ÙØ¯Ø IT Ø¨Ø§ÛØ¯ آ٠را را٠بÛÙØ¯Ø§Ø²Ø¯. Ù ÛâØ¯Ø§ÙÛ٠اÛÙ ØªØ±Ú©ÛØ¨ گاÙÛ Ú©Ø§Ø±ÙØ§ را سخت Ù ÛâÚ©ÙØ¯ â 746 ب٠ÙÙ Û٠دÙÛ٠راÙâØ§ÙØ¯Ø§Ø²Û را تا ØØ¯ ٠٠ک٠ساد٠Ùگ٠داشتÙâØ§ÛÙ . 747 </p> 748 <div class="it-list"> 749 <div class="it-item"><span class="chk" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span>سرÙÛØ³ رÙÛ ÛÚ© کا٠پÛÙØªØ± ٠ع٠ÙÙÛ Ø¯Ø± شبک٠اجرا Ù ÛâØ´ÙØ¯Ø ÙÛØ§Ø²Û Ø¨Ù Ø³Ø±ÙØ± Ø¬Ø¯ÛØ¯ ÙÛØ³Øª.</span></div> 750 <div class="it-item"><span class="chk" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span>
750ÛÚ© Ø§ÙØ²ÙÙÙÙ Ø¢Ù Ø§Ø¯Ù Ø¨Ø±Ø§Û ÙØ±Ø¯Ù¾Ø±Ø³ Ø¯Ø§Ø±Ø¯Ø ÙØµØ¨ Ø³Ø±ÛØ¹ ٠بدÙÙ ØªÙØ³Ø¹ÙÙ ÙØ±Ù âØ§ÙØ²Ø§Ø±.</span></div> 751 <div class="it-item"><span class="chk" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span>Ù Ø³ØªÙØ¯Ø§Øª ÙÙÛ Ú©Ø§Ù Ù Ø§Ø³Øª ٠تÛÙ Ù¾Ø´ØªÛØ¨Ø§ÙÛ Ø¬Ø§Ø± در ٠رØÙÙÙ ÙØµØ¨ Ù٠را٠است.</span></div> 752 <div class="it-item"><span class="chk" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span>ÙØ§Ø¨Ù اجرا در شبکÙ٠بست٠٠٠ØÛØ·âÙØ§Û با Ù ØØ¯ÙØ¯ÛØª Ø¯Ø³ØªØ±Ø³Û Ø§ÛÙØªØ±Ùت.</span></div> 753 </div> 754 </div> 755 </div> 756 </div> 757 </section> 758 759 <!-- ============================ FAQ ============================ --> 760 <section class="section faq" id="faq"> 761 <div class="container"> 762 <div style="text-align:center;" class="reveal"> 763 <span class="eyebrow">Ø³ÙØ§Ùات ٠تداÙÙ</span> 764 <h2 class="section-title" style="margin-inline:auto;">پاسخ پرسشâÙØ§Û Ø±Ø§ÛØ¬</h2> 765 </div> 766 767 <!-- Native <details>: open/close works without JavaScript --> 768 <div class="faq-list"> 769 <details class="faq-item"> 770 <summary class="faq-q">Ø¢ÛØ§ Ø¨Ø±Ø§Û Ø±Ø§ÙâØ§ÙØ¯Ø§Ø²Û ب٠٠تخصص IT ÙÛØ§Ø² دارÛÙ Ø 771 <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span> 772 </summary> 773 <div class="faq-a-inner">Ø¨Ø±Ø§Û ÙØµØ¨ از طرÛÙ Ø§ÙØ²ÙÙÙÙ ÙØ±Ø¯Ù¾Ø±Ø³Ø ÙÙ. Ø¨Ø±Ø§Û Ø±Ø§ÙâØ§ÙØ¯Ø§Ø²Û رÙÛ Ú©Ø§Ù Ù¾ÛÙØªØ± Ø´Ø¨Ú©ÙØ ÙÙ Ú©Ø§Ø±Û IT داخÙÛ Ú©Ø§ÙÛ Ø§Ø³Øª. تÛ٠جار در Ø·ÙÙ ÙØµØ¨ در دسترس است.</div> 774 </details> 775 776 <details class="faq-item"> 777 <summary class="faq-q">Ø¢ÛØ§ Ø¨Ù Ø³Ø±ÙØ± Ø§Ø®ØªØµØ§ØµÛ ÛØ§ Ø²ÛØ±Ø³Ø§Ø®Øª Ø®Ø§ØµÛ ÙÛØ§Ø² دارÛÙ Ø 778 <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span> 779 </summary> 780 <div class="faq-a-inner">ÙÙ. سرÙÛØ³ رÙÛ ÛÚ© کا٠پÛÙØªØ± ٠ع٠ÙÙÛ Ø¯Ø± شبکÙ٠ساز٠ا٠اجرا Ù ÛâØ´ÙØ¯. ÙÛØ§Ø²Û Ø¨Ù Ø³Ø±ÙØ± Ù¾Ø±ÙØ¯Ø±Øª ÛØ§ تجÙÛØ²Ø§Øª خاص ÙÛØ³Øª.</div> 781 </details> 782 783 <details class="faq-item"> 784 <summary class="faq-q">اگر کا٠پÛÙØªØ±ÙØ§Û Ù Ø§ ب٠اÛÙØªØ±Ùت ÙØµÙ ÙØ¨Ø§Ø´Ùد ÚØ·ÙØ±Ø 785 <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span> 786 </summary> 787 <div class="faq-a-inner">اتÙ٠اسÛÙ٠جار دÙÛÙØ§Ù Ø¨Ø±Ø§Û ÙÙ Û٠طراØÛ شدÙ. ÙØ§ÛÙâÙØ§ از طرÛÙ ÛÚ© ÙÙØ·ÙÙ Ø§ØªØµØ§Ù Ø¯Ø±ÛØ§Ùت ٠در شبکÙ٠داخÙÛ ÙØ±Ø§Ø± Ù ÛâÚ¯ÛØ±Ùد. پس از Ø¢ÙØ ØªÙ Ø§Ù Ú©Ø§Ø±Ù ÙØ¯Ø§Ù از شبکÙ٠داخÙÛ Ø¯Ø³ØªØ±Ø³Û Ø¯Ø§Ø±ÙØ¯ â Ø¨Ø¯ÙÙ ÙÛØ§Ø² ب٠اÛÙØªØ±Ùت.</div> 788 </details> 789 790 <details class="faq-item"> 791 <summary class="faq-q">ÙØ²ÛÙÙ٠اتÙ٠اسÛÙ٠از اشتراک ÙØ¹ÙÛ Ù Ø§ Ø¬Ø¯Ø§Ø³ØªØ 792 <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span> 793 </summary> 794 <div class="faq-a-inner">بÙÙØ اتÙ٠اسÛÙÙ ÛÚ© سرÙÛØ³ جداگاÙ٠است. Ø¨Ø±Ø§Û Ø§Ø·ÙØ§Ø¹ از ÙÛ٠تâÚ¯Ø°Ø§Ø±ÛØ سرÙÛØ³ Ø¢Ø²Ù Ø§ÛØ´Û را Ø´Ø±ÙØ¹ Ú©ÙÛØ¯ ÛØ§ با تÛÙ ÙØ±ÙØ´ ت٠اس بگÛ
794Ø±ÛØ¯.</div> 795 </details> 796 797 <details class="faq-item"> 798 <summary class="faq-q">ÚÙ ÙØ´Ø±ÛØ§ØªÛ Ø±Ø§ Ù ÛâØªÙØ§ÙÛÙ Ø¯Ø±ÛØ§Ùت Ú©ÙÛÙ Ø 799 <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span> 800 </summary> 801 <div class="faq-a-inner">Ø¨ÛØ´ از Û³Û¸Û¹ عÙÙØ§Ù: ÛµÛµ Ø±ÙØ²Ùا٠Ù٠ع٠ÙÙ ÛØ Û±Ûµ Ø±ÙØ²Ùا٠ÙÙ Ø§ÙØªØµØ§Ø¯ÛØ Û¸ ÙØ´Ø±ÛÙÙ ÙØ±Ø²Ø´ÛØ Ûµ Ø±ÙØ²Ùا٠Ù٠اÙÚ¯ÙÛØ³ÛâØ²Ø¨Ø§ÙØ Û³ ÙØ´Ø±ÛÙÙ ÙØ±ÙÙÚ¯Û Ù ÙÙØ±ÛØ Û±Ûµ Ø±ÙØ²Ùا٠Ù٠استاÙÛ Ù Û²Û´Û· ٠جÙÙ.</div> 802 </details> 803 </div> 804 </div> 805 </section> 806 807 <!-- ============================ FINAL CTA ============================ --> 808 <section class="section final-cta"> 809 <div class="container"> 810 <div class="final-cta-inner reveal"> 811 <h2>اگر Ø³Ø§Ø²Ù Ø§ÙØªØ§Ù Ø§ÙØ§Ù از جار Ø§Ø³ØªÙØ§Ø¯Ù Ù ÛâÚ©ÙØ¯Ø ÛÚ© ÙØ¯Ù Ù Ø§ÙØ¯Ù</h2> 812 <p>Ú©Ø§Ø±Û Ú©Ù Ø§ÙØ§Ù ÙØ± Ø±ÙØ² Ø¯Ø³ØªÛ Ø§ÙØ¬Ø§Ù Ù ÛâØ´ÙØ¯Ø Ù ÛâØªÙØ§Ùد از ÙØ±Ø¯Ø§ Ø®ÙØ¯Ú©Ø§Ø± باشد. سرÙÛØ³ Ø¢Ø²Ù Ø§ÛØ´Û راÛگا٠را Ø´Ø±ÙØ¹ Ú©ÙÛØ¯ â Ø¨Ø¯ÙÙ Ù¾ÛØ´âÙ¾Ø±Ø¯Ø§Ø®ØªØ Ø¨Ø¯ÙÙ ØªØ¹ÙØ¯.</p> 813 <div> 814 <button class="btn btn-lg btn-white" data-open-modal>سرÙÛØ³ Ø¢Ø²Ù Ø§ÛØ´Û راÛگا٠را Ø´Ø±ÙØ¹ Ú©ÙÛØ¯</button> 815 </div> 816 <a class="secondary-link" href="#" data-open-modal>Ø³ÙØ§Ù Ø¯Ø§Ø±ÛØ¯Ø با تÛ٠٠ا ØµØØ¨Øª Ú©ÙÛØ¯</a> 817 </div> 818 </div> 819 </section> 820 821 <!-- ====================== FOOTER (minimal) ====================== --> 822 <footer class="site-footer"> 823 <div class="container"> 824 <div class="footer-top"> 825 <div class="footer-brand"> 826 <img src="assets/Jaaar_Logo_Domain.png" alt="ÙÙÚ¯ÙÛ Ø¬Ø§Ø±" loading="lazy" /> 827 <p>اتÙ٠اسÛÙÙ ÙØ´Ø±Ûات جار â ØªØÙÛÙ Ø®ÙØ¯Ú©Ø§Ø± Ø±ÙØ²Ùا٠ÙâÙØ§ Ù Ù Ø¬ÙØ§Øª رÙÛ Ø´Ø¨Ú©Ù٠داخÙÛ Ø³Ø§Ø²Ù Ø§Ù Ø´Ù Ø§Ø ÙØ± Ø±ÙØ² رأس ساعت Û¶ صبØ.</p> 828 </div> 829 </div> 830 831 <div class="footer-bottom"> 832 <span>© Û±Û´Û°Ûµ جار â ÙÙ ÙÙ ØÙÙÙ Ù ØÙÙØ¸ است.</span> 833 <span>jaaar.com</span> 834 </div> 835 </div> 836 </footer> 837 838 <!-- ============================ CONTACT LIGHTBOX ============================ --> 839 <div class="modal-backdrop" id="modalBackdrop" role="dialog" aria-modal="true" aria-labelledby="modalTitle" hidden> 840 <div class="modal" role="document"> 841 <div class="modal-head"> 842 <div> 843 <h2 id="modalTitle">Ø¯Ø±Ø®ÙØ§Ø³Øª سرÙÛØ³ Ø¢Ø²Ù Ø§ÛØ´Û راÛگاÙ</h2> 844 <p>از ÙØ± راÙÛ Ú©Ù Ø±Ø§ØØªâØªØ±ÛØ¯ با ٠ا در ت٠اس Ø¨Ø§Ø´ÛØ¯ â Ø³Ø±Ûع پاسخ Ù ÛâØ¯ÙÛÙ .</p> 845 </div> 846 <button class="modal-close" data-close-modal aria-label="بستÙ"> 847 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg> 848 </button> 849 </div> 850 851 <div class="contact-list"> 852 853 <!-- 1) Telegram â opens chat with admin (no pre-filled text for usernames) --> 854 <a class="contact-option" href="https://t.me/jaaar_admin" target="_blank" rel="noopener" 855 style="--chip:#2AABEE; --chip-bg:rgba(42,171,238,0.14)"> 856 <span class="contact-chip" aria-hidden="true"> 857 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21.9 4.3 18.7 19c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.3-4.9 8.9-8c.4-.3-.1-.5-.6-.2L6.4 13 1.7 11.5c-1-.3-1-1 .2-1.5L20.6 3c.8-.3 1.6.2 1.3 1.3z"/></svg> 858 </span> 859 <span class="contact-text"><span class="t">تÙگرا٠</span><span class="s">Ø§Ø±Ø³Ø§Ù Ù¾ÛØ§Ù در تÙگرا٠</span></span> 860 <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span> 861 </a> 862 863 <!-- 2) WhatsApp â wa.me with URL-encoded pre-filled message --> 864 <a class="contact-option" href="https://wa.me/989036381172?text=%D8%B3%D9%84%D8%A7%D9%85%D8%8C%20%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%20%D8%B3%D8%B1%D9%88%DB%8C%D8%B3%20%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4%DB%8C%20%D8%A7%D8%AA%D9%88%D9%85%D8%A7%D8%B3%DB%8C%D9%88%D9%86%20%D9%86%D8%B4%D8%B1%DB%8C%D8%A7%D8%AA%20%D8%AC%D8%A7%D8%B1%20%D8%B1%D8%A7%20%D8%AF%D8%A7%D8%B1%D9%85." 865 target="_blank" rel="noopener" 866 style="--chip:#25D366; --chip-bg:rgba(37,211,102,0.14)">
867 <span class="contact-chip" aria-hidden="true"> 868 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.8 14.04c-.25.68-1.2 1.26-1.97 1.42-.52.11-1.2.2-3.5-.75-2.94-1.22-4.84-4.2-4.99-4.4-.14-.2-1.2-1.6-1.2-3.05 0-1.45.76-2.16 1.03-2.46.27-.3.59-.37.79-.37h.56c.18 0 .42-.07.66.5.24.59.82 2.04.89 2.19.07.15.12.32.02.52-.1.2-.15.32-.3.49-.15.17-.31.39-.45.52-.15.15-.3.31-.13.6.17.3.76 1.25 1.63 2.02 1.12 1 2.07 1.31 2.37 1.46.3.15.47.12.64-.07.17-.2.74-.86.94-1.16.2-.3.39-.25.66-.15.27.1 1.72.81 2.01.96.3.15.5.22.57.34.07.12.07.71-.18 1.4z"/></svg> 869 </span> 870 <span class="contact-text"><span class="t">ÙØ§ØªØ³Ø§Ù¾</span><span class="s">Ø§Ø±Ø³Ø§Ù Ù¾ÛØ§Ù در ÙØ§ØªØ³Ø§Ù¾</span></span> 871 <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span> 872 </a> 873 874 <!-- 3) Bale â TODO[jaaar]: replace generic message icon + accent with the official Bale logo/color from assets/ --> 875 <a class="contact-option" href="https://web.bale.ai/chat?uid=955388938" target="_blank" rel="noopener" 876 style="--chip:#1AA5B0; --chip-bg:rgba(26,165,176,0.14)"> 877 <span class="contact-chip" aria-hidden="true"> 878 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.5 8.5 0 0 1-12.2 7.7L3 21l1.8-5.8A8.5 8.5 0 1 1 21 11.5z"/></svg> 879 </span> 880 <span class="contact-text"><span class="t">بÙÙ</span><span class="s">Ø§Ø±Ø³Ø§Ù Ù¾ÛØ§Ù در بÙÙ</span></span> 881 <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span> 882 </a> 883 884 <!-- 4) Email / contact form --> 885 <a class="contact-option" href="https://www.jaaar.com/kiosk/contacts" target="_blank" rel="noopener" 886 style="--chip:#E8232A; --chip-bg:rgba(232,35,42,0.14)"> 887 <span class="contact-chip" aria-hidden="true"> 888 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg> 889 </span> 890 <span class="contact-text"><span class="t">اÛÙ ÛÙ Ù ÙØ±Ù ت٠اس</span><span class="s">تک٠ÛÙ ÙØ±Ù در ØµÙØÙ ØªÙ Ø§Ø³</span></span> 891 <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span> 892 </a> 893 894 <!-- 5) Phone call â tel: (no new tab) --> 895 <a class="contact-option" href="tel:02191001955" 896 style="--chip:#a1a1aa; --chip-bg:rgba(161,161,170,0.14)"> 897 <span class="contact-chip" aria-hidden="true"> 898 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg> 899 </span> 900 <span class="contact-text"><span class="t">ت٠اس تÙÙÙÛ</span><span class="s">ت٠اس ٠ستÙÛ٠با ٠ا</span></span> 901 <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span> 902 </a> 903 904 </div> 905 </div> 906 </div> 907 908
908<script> 909 /* ---------- Header scroll state ---------- */ 910 const header = document.getElementById('siteHeader'); 911 const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 8); 912 window.addEventListener('scroll', onScroll, { passive: true }); 913 onScroll(); 914 915 /* ---------- Mobile nav ---------- */ 916 const navToggle = document.getElementById('navToggle'); 917 const navLinks = document.getElementById('navLinks'); 918 navToggle.addEventListener('click', () => { 919 const open = navLinks.classList.toggle('mobile-open'); 920 navToggle.setAttribute('aria-expanded', String(open)); 921 }); 922 navLinks.querySelectorAll('a').forEach(a => 923 a.addEventListener('click', () => { 924 navLinks.classList.remove('mobile-open'); 925 navToggle.setAttribute('aria-expanded', 'false'); 926 }) 927 ); 928 929 /* ---------- Reveal on scroll (enhancement; content is visible without JS) ---------- */ 930 const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 931 if (reduceMotion) { 932 document.querySelectorAll('.reveal').forEach(el => el.classList.add('in')); 933 } else { 934 const io = new IntersectionObserver((entries) => { 935 entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); 936 }, { threshold: 0.12 }); 937 document.querySelectorAll('.reveal').forEach(el => io.observe(el)); 938 } 939 940 /* ---------- Contact lightbox (channel picker) ---------- */ 941 const backdrop = document.getElementById('modalBackdrop'); 942 let lastFocused = null; 943 944 function openModal(e) { 945 if (e) e.preventDefault(); 946 lastFocused = document.activeElement; 947 backdrop.hidden = false; 948 requestAnimationFrame(() => backdrop.classList.add('open')); 949 document.body.style.overflow = 'hidden'; 950 const first = backdrop.querySelector('a, button'); 951 if (first) setTimeout(() => first.focus(), 50); 952 } 953 function closeModal() { 954 backdrop.classList.remove('open'); 955 document.body.style.overflow = ''; 956 setTimeout(() => { backdrop.hidden = true; }, 260); 957 if (lastFocused) lastFocused.focus(); 958 } 959 960 document.querySelectorAll('[data-open-modal]').forEach(b => b.addEventListener('click', openModal)); 961 document.querySelectorAll('[data-close-modal]').forEach(b => b.addEventListener('click', closeModal)); 962 backdrop.addEventListener('click', (e) => { if (e.target === backdrop) closeModal(); }); 963 document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !backdrop.hidden) closeModal(); }); 964 965 // Close the lightbox after a channel is chosen (link opens in its own tab / dialer). 966 backdrop.querySelectorAll('.contact-option').forEach(a => 967 a.addEventListener('click', () => setTimeout(closeModal, 80)) 968 ); 969 970 // Focus trap. 971 backdrop.addEventListener('keydown', (e) => { 972 if (e.key !== 'Tab') return; 973 const list = Array.from(backdrop.querySelectorAll('a[href], button')).filter(el => el.offsetParent !== null); 974 if (!list.length) return; 975 const first = list[0], last = list[list.length - 1]; 976 if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } 977 else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } 978 }); 979 </script>
979 980</body> 981</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.