Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -0,0 +1,509 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fa" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>کلینیک پرو — نرمافزار مدیریت مطب</title>
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" />
|
||||
{{ encore_entry_link_tags('home') }}
|
||||
<script>document.documentElement.classList.add('js');</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ===================== Header ===================== -->
|
||||
<header class="site-header" id="header">
|
||||
<div class="wrap nav">
|
||||
<a class="brand" href="#hero" aria-label="کلینیک پرو">
|
||||
<b>کلینیک پرو</b><span class="dot"></span>
|
||||
<small>مدیریت مطب</small>
|
||||
</a>
|
||||
|
||||
<nav class="nav-links" id="navLinks">
|
||||
<a href="#hero" class="active">خانه</a>
|
||||
<a href="#features">امکانات</a>
|
||||
<a href="#why">چرا کلینیک پرو</a>
|
||||
<a href="#download">دانلود</a>
|
||||
<a href="#contact">تماس با ما</a>
|
||||
</nav>
|
||||
|
||||
<div class="nav-right">
|
||||
<button class="nav-ico search" aria-label="جستجو">
|
||||
<svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/><path d="m20 20-3.2-3.2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
<button class="nav-burger nav-toggle" id="navToggle" aria-label="منو">
|
||||
<svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
<a href="#download" class="nav-burger" aria-label="دانلود" style="text-decoration:none">
|
||||
<svg viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 19h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- ===================== Hero ===================== -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-copy">
|
||||
<h1 class="reveal">نوبت، پرونده و حساب مطب،<br />همه یکجا</h1>
|
||||
<p class="reveal d1">کلینیک پرو کارهای روزمرهی مطب را سر و سامان میدهد؛ از نوبتدهی و پروندهی بیمار تا فاکتور و گزارش مالی. دیگر خبری از دفتر نوبت و کاغذبازی نیست.</p>
|
||||
<div class="hero-actions reveal d2">
|
||||
<a href="#download" class="btn btn-coral">دانلود رایگان</a>
|
||||
<a href="#contact" class="btn btn-blue">تماس با ما</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-art reveal d1">
|
||||
<div class="art-chip chip-1">
|
||||
<span class="ci"><svg viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.3-7-9.5A4 4 0 0 1 12 8a4 4 0 0 1 7 3.5C19 16.7 12 21 12 21Z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg></span>
|
||||
<div><b class="mono">۹۵٪</b><span>رضایت بیماران</span></div>
|
||||
</div>
|
||||
<div class="art-chip chip-2">
|
||||
<span class="ci"><svg viewBox="0 0 24 24" fill="none"><path d="M8 7V5m8 2V5M4 9h16M5 7h14v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7Z" stroke="currentColor" stroke-width="1.9"/></svg></span>
|
||||
<div><b class="mono">۳۸</b><span>نوبت امروز</span></div>
|
||||
</div>
|
||||
|
||||
<svg viewBox="0 0 600 480" role="img" aria-label="تصویر مدیریت مطب">
|
||||
<ellipse cx="300" cy="438" rx="250" ry="30" fill="#e2e9fb"/>
|
||||
<circle cx="300" cy="244" r="184" fill="#eaeffb"/>
|
||||
<g fill="#dbe4fb"><ellipse cx="138" cy="150" rx="42" ry="20"/><ellipse cx="476" cy="120" rx="48" ry="22"/><ellipse cx="508" cy="250" rx="30" ry="15"/></g>
|
||||
|
||||
<rect x="196" y="184" width="208" height="152" rx="13" fill="#fff" stroke="#dde3f7" stroke-width="3"/>
|
||||
<rect x="210" y="198" width="180" height="124" rx="7" fill="#eef2fd"/>
|
||||
<rect x="223" y="211" width="68" height="9" rx="4.5" fill="#c4cef2"/>
|
||||
<circle cx="378" cy="216" r="6" fill="#f8b3a6"/>
|
||||
<path d="M223 272 h24 l9 -22 12 40 10 -28 8 14 h62" fill="none" stroke="#5666e0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g fill="#cdd6f4"><rect x="226" y="292" width="14" height="22" rx="3"/><rect x="246" y="284" width="14" height="30" rx="3"/><rect x="266" y="298" width="14" height="16" rx="3"/></g>
|
||||
<rect x="330" y="288" width="50" height="26" rx="6" fill="#fde3df"/>
|
||||
<path d="M166 336 h268 l26 28 H140 z" fill="#cfd9f9"/>
|
||||
<path d="M166 336 h268 l6 6 H160 z" fill="#aab6ee"/>
|
||||
<rect x="268" y="350" width="64" height="6" rx="3" fill="#9aa8ea"/>
|
||||
|
||||
<g fill="#fff"><ellipse cx="300" cy="190" rx="58" ry="22"/><ellipse cx="258" cy="196" rx="26" ry="15"/><ellipse cx="342" cy="196" rx="26" ry="15"/></g>
|
||||
|
||||
<path d="M276 150 q-20 16 -15 42 l19 -11 z" fill="#3a3a7d"/>
|
||||
<path d="M324 150 q20 16 15 42 l-19 -11 z" fill="#3a3a7d"/>
|
||||
<rect x="278" y="70" width="44" height="118" rx="22" fill="#fff" stroke="#dfe4f7" stroke-width="2"/>
|
||||
<path d="M300 50 a22 22 0 0 1 22 26 h-44 a22 22 0 0 1 22 -26z" fill="#f17a6b"/>
|
||||
<circle cx="300" cy="106" r="13" fill="#cfe0fb" stroke="#5666e0" stroke-width="3"/>
|
||||
<g fill="#5666e0"><rect x="295" y="130" width="10" height="30" rx="3"/><rect x="285" y="140" width="30" height="10" rx="3"/></g>
|
||||
<path d="M289 188 q11 24 11 30 q0 -6 11 -30 z" fill="#f8b3a6"/>
|
||||
<g stroke="#bcc7f2" stroke-width="4" stroke-linecap="round"><path d="M250 92 h-20"/><path d="M258 112 h-13"/><path d="M350 92 h20"/><path d="M342 112 h13"/></g>
|
||||
|
||||
<g>
|
||||
<path d="M86 332 h36 l-2 86 a6 6 0 0 1 -12 0 l-4 -52 -4 52 a6 6 0 0 1 -12 0 z" fill="#3a3a7d"/>
|
||||
<ellipse cx="90" cy="420" rx="12" ry="6" fill="#2b2b5e"/>
|
||||
<ellipse cx="118" cy="420" rx="12" ry="6" fill="#2b2b5e"/>
|
||||
<path d="M80 262 q-14 30 -6 58" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"/>
|
||||
<circle cx="76" cy="318" r="7" fill="#f3c6a5"/>
|
||||
<path d="M78 256 q26 -18 54 0 l8 80 h-70 z" fill="#fff" stroke="#dde3f7" stroke-width="2"/>
|
||||
<path d="M105 250 l-9 56 9 7 9 -7 -9 -56z" fill="#eef2fd"/>
|
||||
<path d="M99 254 q-12 28 9 42" fill="none" stroke="#5666e0" stroke-width="2.6"/>
|
||||
<circle cx="110" cy="298" r="5" fill="#5666e0"/>
|
||||
<path d="M128 260 q42 -6 66 -54" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"/>
|
||||
<circle cx="196" cy="206" r="7.5" fill="#f3c6a5"/>
|
||||
<rect x="99" y="232" width="12" height="16" rx="4" fill="#e8b594"/>
|
||||
<circle cx="105" cy="218" r="22" fill="#f3c6a5"/>
|
||||
<path d="M83 216 q0 -30 31 -28 q19 1 21 22 q-13 -12 -30 -7 q-15 4 -22 13z" fill="#3a3a7d"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path d="M478 332 h36 l-2 86 a6 6 0 0 1 -12 0 l-4 -52 -4 52 a6 6 0 0 1 -12 0 z" fill="#4f51a8"/>
|
||||
<ellipse cx="482" cy="420" rx="12" ry="6" fill="#34356f"/>
|
||||
<ellipse cx="510" cy="420" rx="12" ry="6" fill="#34356f"/>
|
||||
<path d="M512 258 q26 -16 30 -54" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"/>
|
||||
<circle cx="543" cy="200" r="8" fill="#f3c6a5"/>
|
||||
<path d="M462 256 q26 -18 54 0 l6 80 h-66 z" fill="#fff" stroke="#dde3f7" stroke-width="2"/>
|
||||
<path d="M489 250 l-8 56 8 7 8 -7 -8 -56z" fill="#fde3df"/>
|
||||
<path d="M464 260 q-12 28 -6 54" fill="none" stroke="#fff" stroke-width="14" stroke-linecap="round"/>
|
||||
<circle cx="460" cy="316" r="7" fill="#f3c6a5"/>
|
||||
<rect x="483" y="232" width="12" height="16" rx="4" fill="#e8b594"/>
|
||||
<circle cx="489" cy="218" r="22" fill="#f3c6a5"/>
|
||||
<path d="M467 220 q-4 -32 28 -32 q24 0 22 30 q-2 14 -6 20 q4 -22 -8 -30 q4 12 -2 18 q-10 -20 -34 -6z" fill="#3a3a7d"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== Feature columns ===================== -->
|
||||
<section class="fcols" id="features">
|
||||
<div class="wrap fcols-grid">
|
||||
<div class="fcol reveal">
|
||||
<h3>پروندهی بیمار</h3>
|
||||
<p>سابقه، نسخه و آزمایش هر بیمار جای خودش است و هر وقت لازم شد، چند ثانیهای پیدایش میکنید.</p>
|
||||
<a href="#why" class="readmore">بیشتر بدانید <svg viewBox="0 0 24 24" fill="none"><path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
<div class="fcol reveal d1">
|
||||
<h3>نوبتدهی آنلاین</h3>
|
||||
<p>بیمار خودش آنلاین نوبت میگیرد و پیامک یادآوری برایش میرود؛ نوبتهای فراموششده کمتر میشود.</p>
|
||||
<a href="#why" class="readmore">بیشتر بدانید <svg viewBox="0 0 24 24" fill="none"><path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
<div class="fcol reveal d2">
|
||||
<h3>حساب و کتاب</h3>
|
||||
<p>فاکتور صادر کنید، درآمد و خرج را ثبت کنید و آخر ماه دقیق بدانید مطب چهقدر کار کرده است.</p>
|
||||
<a href="#why" class="readmore">بیشتر بدانید <svg viewBox="0 0 24 24" fill="none"><path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
<div class="fcol reveal d3">
|
||||
<h3>+۵۰۰ مطب</h3>
|
||||
<p>همین حالا بیش از ۵۰۰ پزشک و کلینیک در شهرهای مختلف هر روز کارشان را با کلینیک پرو پیش میبرند.</p>
|
||||
<a href="#why" class="readmore">بیشتر بدانید <svg viewBox="0 0 24 24" fill="none"><path d="M14 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== Icon row (band) ===================== -->
|
||||
<section class="band">
|
||||
<div class="icons" id="why">
|
||||
<div class="wrap icon-grid">
|
||||
<div class="icon-cell reveal">
|
||||
<div class="ic-circ"><svg viewBox="0 0 24 24" fill="none"><path d="M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-linejoin="round"/><path d="M8.5 10.5h7M8.5 13h4" stroke="currentColor" stroke-linecap="round"/></svg></div>
|
||||
<h3>راهاندازی با شما</h3>
|
||||
<p>اول کار تنهایتان نمیگذاریم؛ تنظیمات اولیه و انتقال اطلاعات را با هم انجام میدهیم.</p>
|
||||
</div>
|
||||
<div class="icon-cell reveal d1">
|
||||
<div class="ic-circ"><svg viewBox="0 0 24 24" fill="none"><path d="M4 13v-1a8 8 0 0 1 16 0v1" stroke="currentColor" stroke-linecap="round"/><rect x="3" y="13" width="4" height="7" rx="2" stroke="currentColor"/><rect x="17" y="13" width="4" height="7" rx="2" stroke="currentColor"/><path d="M20 19v1a3 3 0 0 1-3 3h-3" stroke="currentColor" stroke-linecap="round"/></svg></div>
|
||||
<h3>پشتیبانی همیشگی</h3>
|
||||
<p>هر ساعت از شبانهروز که جایی گیر کردید، یک تماس یا پیام کافی است تا کنارتان باشیم.</p>
|
||||
</div>
|
||||
<div class="icon-cell reveal d2">
|
||||
<div class="ic-circ"><svg viewBox="0 0 24 24" fill="none"><path d="M7 11v9H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3Z" stroke="currentColor" stroke-linejoin="round"/><path d="M7 11l4.5-7a2 2 0 0 1 3.5 1.3V9h4.2a2 2 0 0 1 2 2.4l-1.3 7A2 2 0 0 1 17.9 20H7" stroke="currentColor" stroke-linejoin="round"/></svg></div>
|
||||
<h3>متناسب با مطب ایرانی</h3>
|
||||
<p>امکانات را طوری چیدهایم که با روال واقعی کار مطبها در ایران جور دربیاید.</p>
|
||||
</div>
|
||||
<div class="icon-cell reveal d3">
|
||||
<div class="ic-circ"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3a9 9 0 1 0 9 9h-9V3Z" stroke="currentColor" stroke-linejoin="round"/><path d="M14 3.5a8 8 0 0 1 6.5 6.5H14V3.5Z" stroke="currentColor" stroke-linejoin="round"/></svg></div>
|
||||
<h3>گزارشگیری دقیق</h3>
|
||||
<p>تحلیل عملکرد مطب با نمودارهای روشن، کاربردی و قابلفهم.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== Devices section ===================== -->
|
||||
<section class="devices">
|
||||
<div class="wrap devices-grid">
|
||||
<div class="devices-copy reveal">
|
||||
<h2>هرجا باشید،<br />مطب دستتان است</h2>
|
||||
<p>روی گوشی، تبلت یا کامپیوتر بازش کنید؛ اطلاعات خودش هماهنگ میماند و لازم نیست نگران جابهجایی بین دستگاهها باشید.</p>
|
||||
<a href="#download" class="btn btn-coral" style="margin-top:30px">بیشتر بدانید</a>
|
||||
</div>
|
||||
<div class="devices-art reveal d1">
|
||||
<svg viewBox="0 0 520 420" role="img" aria-label="کار روی همه دستگاهها">
|
||||
<ellipse cx="260" cy="384" rx="220" ry="26" fill="#e2e9fb"/>
|
||||
<circle cx="300" cy="120" r="22" fill="#fff" stroke="#cdd6f4" stroke-width="3"/>
|
||||
<path d="M294 120l4 4 8-9" stroke="#5666e0" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<rect x="150" y="300" width="220" height="12" rx="6" fill="#cfd9f9"/>
|
||||
<rect x="168" y="312" width="10" height="58" rx="4" fill="#aab6ee"/>
|
||||
<rect x="342" y="312" width="10" height="58" rx="4" fill="#aab6ee"/>
|
||||
|
||||
<rect x="206" y="196" width="120" height="86" rx="9" fill="#fff" stroke="#dde3f7" stroke-width="3"/>
|
||||
<rect x="216" y="206" width="100" height="66" rx="5" fill="#eef2fd"/>
|
||||
<path d="M226 252 l16 -16 12 12 18 -22 16 18" fill="none" stroke="#5666e0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="226" cy="250" r="3.5" fill="#f17a6b"/>
|
||||
<rect x="252" y="300" width="28" height="8" rx="4" fill="#bcc7f2"/>
|
||||
|
||||
<g>
|
||||
<rect x="338" y="150" width="92" height="60" rx="10" fill="#fff" stroke="#e3e8fa" stroke-width="2"/>
|
||||
<rect x="350" y="162" width="22" height="22" rx="6" fill="#fde3df"/>
|
||||
<g fill="#f17a6b"><rect x="358" y="167" width="6" height="12" rx="2"/><rect x="355" y="170" width="12" height="6" rx="2"/></g>
|
||||
<rect x="380" y="164" width="40" height="7" rx="3.5" fill="#cdd6f4"/>
|
||||
<rect x="380" y="176" width="28" height="7" rx="3.5" fill="#e1e7f7"/>
|
||||
<rect x="350" y="192" width="70" height="7" rx="3.5" fill="#e1e7f7"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path d="M120 300 q-2 -40 22 -40 q24 0 22 40 z" fill="#fff" stroke="#dde3f7" stroke-width="2"/>
|
||||
<path d="M118 268 q-22 -8 -26 -34" fill="none" stroke="#fff" stroke-width="13" stroke-linecap="round"/>
|
||||
<circle cx="91" cy="232" r="7" fill="#f3c6a5"/>
|
||||
<path d="M120 300 h44 l-2 64 a5 5 0 0 1 -10 0 l-10 -40 -10 40 a5 5 0 0 1 -10 0z" fill="#4f51a8"/>
|
||||
<rect x="135" y="244" width="12" height="16" rx="4" fill="#e8b594"/>
|
||||
<circle cx="141" cy="232" r="19" fill="#f3c6a5"/>
|
||||
<path d="M122 232 q-2 -26 24 -25 q18 1 17 22 q-12 -12 -26 -6 q-12 4 -15 9z" fill="#3a3a7d"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M356 300 q-2 -40 22 -40 q24 0 22 40 z" fill="#fff" stroke="#dde3f7" stroke-width="2"/>
|
||||
<path d="M398 268 q22 -6 24 -36" fill="none" stroke="#fff" stroke-width="13" stroke-linecap="round"/>
|
||||
<circle cx="423" cy="228" r="7" fill="#f3c6a5"/>
|
||||
<path d="M356 300 h44 l-2 64 a5 5 0 0 1 -10 0 l-10 -40 -10 40 a5 5 0 0 1 -10 0z" fill="#3a3a7d"/>
|
||||
<rect x="371" y="244" width="12" height="16" rx="4" fill="#e8b594"/>
|
||||
<circle cx="377" cy="232" r="19" fill="#f3c6a5"/>
|
||||
<path d="M358 234 q-4 -28 26 -27 q20 1 17 26 q-10 -16 -22 -12 q-12 4 -21 13z" fill="#2b2b5e"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path d="M444 370 h26 l-4 -26 h-18 z" fill="#aab6ee"/>
|
||||
<path d="M457 344 q-14 -10 -10 -34 q12 6 12 22" fill="#bcc7f2"/>
|
||||
<path d="M457 344 q14 -12 10 -38 q-12 8 -12 24" fill="#cdd6f4"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- ===================== Specialties ===================== -->
|
||||
<section class="specs">
|
||||
<div class="wrap">
|
||||
<div class="specs-head reveal">
|
||||
<span class="eyebrow">هر تخصص، روال خودش</span>
|
||||
<h2>برای کار شما تنظیم میشود</h2>
|
||||
<p>فرقی نمیکند پزشک عمومی باشید یا دندانپزشک؛ کلینیک پرو خودش را با روال کارتان جور میکند.</p>
|
||||
</div>
|
||||
<div class="specs-grid">
|
||||
<div class="spec-card reveal">
|
||||
<div class="av">
|
||||
<svg viewBox="0 0 116 116"><circle cx="58" cy="58" r="58" fill="#e7ecfb"/><g><path d="M30 116 q0 -34 28 -34 q28 0 28 34z" fill="#fff"/><path d="M44 86 l14 18 14 -18 -6 -8 -8 6 -8 -6z" fill="#eef2fd"/><circle cx="58" cy="58" r="20" fill="#f3c6a5"/><path d="M37 58 q-2 -30 21 -29 q22 0 20 28 q-10 -14 -22 -9 q-13 4 -19 10z" fill="#3a3a7d"/><path d="M50 86 q-10 26 8 36" fill="none" stroke="#5666e0" stroke-width="2.4"/><circle cx="59" cy="120" r="4" fill="#5666e0"/></g></svg>
|
||||
</div>
|
||||
<h3>پزشک عمومی</h3>
|
||||
<div class="role">GENERAL</div>
|
||||
<ul class="feats">
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>پروندهی بیمار</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>نسخهنویسی سریع</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spec-card reveal d1">
|
||||
<div class="av">
|
||||
<svg viewBox="0 0 116 116"><circle cx="58" cy="58" r="58" fill="#fdeae6"/><g><path d="M30 116 q0 -34 28 -34 q28 0 28 34z" fill="#fff"/><circle cx="58" cy="58" r="20" fill="#f3c6a5"/><path d="M37 56 q-2 -28 21 -28 q23 0 20 30 q-6 -10 -10 -10 l-2 8 -6 -10 q-12 2 -23 10z" fill="#5a3b2e"/><path d="M40 116 q2 -18 18 -18 q16 0 18 18z" fill="#fde3df"/></g></svg>
|
||||
</div>
|
||||
<h3>دندانپزشک</h3>
|
||||
<div class="role">DENTAL</div>
|
||||
<ul class="feats">
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>نقشهی دندان</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>طرح درمان</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spec-card reveal d2">
|
||||
<div class="av">
|
||||
<svg viewBox="0 0 116 116"><circle cx="58" cy="58" r="58" fill="#e7ecfb"/><g><path d="M30 116 q0 -34 28 -34 q28 0 28 34z" fill="#fff"/><circle cx="58" cy="58" r="20" fill="#f3c6a5"/><path d="M36 60 q-2 -32 22 -31 q24 1 22 31 q-6 -8 -10 -8 q-2 -10 -12 -8 q-14 2 -22 16z" fill="#1f2452"/><path d="M40 116 q2 -18 18 -18 q16 0 18 18z" fill="#e7ecfb"/></g></svg>
|
||||
</div>
|
||||
<h3>متخصص پوست</h3>
|
||||
<div class="role">DERMATOLOGY</div>
|
||||
<ul class="feats">
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>گالری تصاویر</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>پیگیری درمان</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spec-card reveal d3">
|
||||
<div class="av">
|
||||
<svg viewBox="0 0 116 116"><circle cx="58" cy="58" r="58" fill="#fdeae6"/><g><path d="M30 116 q0 -34 28 -34 q28 0 28 34z" fill="#fff"/><circle cx="58" cy="58" r="20" fill="#f3c6a5"/><path d="M36 58 q-2 -30 22 -29 q24 1 21 29 q-10 -12 -21 -8 q-13 4 -22 8z" fill="#7a4a2e"/><path d="M48 84 q-8 24 10 34" fill="none" stroke="#f17a6b" stroke-width="2.4"/><circle cx="59" cy="119" r="4" fill="#f17a6b"/></g></svg>
|
||||
</div>
|
||||
<h3>متخصص اطفال</h3>
|
||||
<div class="role">PEDIATRICS</div>
|
||||
<ul class="feats">
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>نمودار رشد</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>یادآور واکسن</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===================== App / phone CTA ===================== -->
|
||||
<section class="appcta" id="download">
|
||||
<div class="wrap appcta-grid">
|
||||
<div class="appcta-art reveal">
|
||||
<svg viewBox="0 0 440 360" role="img" aria-label="نرمافزار دسکتاپ کلینیک پرو برای مک و ویندوز">
|
||||
<ellipse cx="220" cy="322" rx="180" ry="24" fill="#e2e9fb"/>
|
||||
<circle cx="220" cy="158" r="150" fill="#eef2fd"/>
|
||||
|
||||
<rect x="96" y="48" width="248" height="170" rx="14" fill="#fff" stroke="#dde3f7" stroke-width="3"/>
|
||||
<rect x="108" y="60" width="224" height="146" rx="8" fill="#f5f7fe"/>
|
||||
<path d="M108 68a8 8 0 0 1 8-8h208a8 8 0 0 1 8 8v14H108z" fill="#5666e0"/>
|
||||
<circle cx="122" cy="71" r="4" fill="#aebcff"/>
|
||||
<rect x="132" y="67" width="40" height="7" rx="3.5" fill="#aebcff"/>
|
||||
<circle cx="320" cy="71" r="5" fill="#aebcff"/>
|
||||
<rect x="108" y="82" width="32" height="124" fill="#eef2fd"/>
|
||||
<rect x="116" y="92" width="16" height="6" rx="3" fill="#c4cef2"/>
|
||||
<rect x="116" y="104" width="16" height="6" rx="3" fill="#5666e0"/>
|
||||
<rect x="116" y="116" width="16" height="6" rx="3" fill="#c4cef2"/>
|
||||
<rect x="116" y="128" width="16" height="6" rx="3" fill="#c4cef2"/>
|
||||
<g>
|
||||
<rect x="150" y="92" width="54" height="40" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<rect x="158" y="100" width="20" height="6" rx="3" fill="#cdd6f4"/>
|
||||
<rect x="158" y="112" width="30" height="10" rx="3" fill="#5666e0"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="212" y="92" width="54" height="40" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<rect x="220" y="100" width="20" height="6" rx="3" fill="#cdd6f4"/>
|
||||
<rect x="220" y="112" width="30" height="10" rx="3" fill="#f17a6b"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="274" y="92" width="50" height="40" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<rect x="282" y="100" width="20" height="6" rx="3" fill="#cdd6f4"/>
|
||||
<rect x="282" y="112" width="28" height="10" rx="3" fill="#4ca77a"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="150" y="140" width="108" height="58" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<rect x="160" y="180" width="10" height="10" rx="2" fill="#c4cef2"/>
|
||||
<rect x="176" y="172" width="10" height="18" rx="2" fill="#5666e0"/>
|
||||
<rect x="192" y="164" width="10" height="26" rx="2" fill="#c4cef2"/>
|
||||
<rect x="208" y="156" width="10" height="34" rx="2" fill="#5666e0"/>
|
||||
<rect x="224" y="168" width="10" height="22" rx="2" fill="#c4cef2"/>
|
||||
<rect x="240" y="150" width="10" height="40" rx="2" fill="#f17a6b"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="266" y="140" width="58" height="58" rx="7" fill="#fff" stroke="#e6eafa" stroke-width="1.6"/>
|
||||
<circle cx="278" cy="152" r="6" fill="#fde3df"/><rect x="288" y="149" width="28" height="6" rx="3" fill="#cdd6f4"/>
|
||||
<circle cx="278" cy="168" r="6" fill="#e0e6fb"/><rect x="288" y="165" width="28" height="6" rx="3" fill="#e1e7f7"/>
|
||||
<circle cx="278" cy="184" r="6" fill="#e6f0e6"/><rect x="288" y="181" width="22" height="6" rx="3" fill="#e1e7f7"/>
|
||||
</g>
|
||||
<path d="M70 218h300l22 26H48z" fill="#cfd9f9"/>
|
||||
<path d="M70 218h300l5 6H65z" fill="#aab6ee"/>
|
||||
<rect x="196" y="232" width="48" height="6" rx="3" fill="#9aa8ea"/>
|
||||
|
||||
<g>
|
||||
<rect x="34" y="92" width="92" height="46" rx="13" fill="#fff" stroke="#e3e8fa" stroke-width="2"/>
|
||||
<g transform="translate(46,104)" fill="#3a3a7d"><path d="M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-3 .9-3.7 2.3-1.6 2.8-.4 6.9 1.1 9.2.8 1.1 1.6 2.3 2.8 2.3 1.1 0 1.6-.7 2.9-.7 1.4 0 1.7.7 2.9.7 1.2 0 2-1.1 2.7-2.2.9-1.2 1.2-2.5 1.2-2.5s-2.3-.9-2.3-3.6ZM14.2 5.7c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.6 1.4-.6.7-1.1 1.7-.9 2.7 1 .1 2-.5 2.6-1.2Z"/></g>
|
||||
<rect x="74" y="105" width="40" height="7" rx="3.5" fill="#cdd6f4"/>
|
||||
<rect x="74" y="117" width="28" height="6" rx="3" fill="#e6eafa"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<rect x="300" y="250" width="100" height="46" rx="13" fill="#fff" stroke="#e3e8fa" stroke-width="2"/>
|
||||
<g transform="translate(312,262)" fill="#5666e0"><path d="M3 5.5 10.5 4.4v7.1H3V5.5Zm0 13L10.5 19.6v-7H3v6Zm8.5 1.3L21 21V12.5h-9.5v7.3Zm0-15.6V11.5H21V3l-9.5 1.2Z"/></g>
|
||||
<rect x="342" y="263" width="46" height="7" rx="3.5" fill="#cdd6f4"/>
|
||||
<rect x="342" y="275" width="30" height="6" rx="3" fill="#e6eafa"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<circle cx="360" cy="96" r="20" fill="#f17a6b"/>
|
||||
<path d="M360 86v16m0 0 6-6m-6 6-6-6M351 108h18" stroke="#fff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="appcta-copy">
|
||||
<span class="eyebrow reveal">نرمافزار دسکتاپ</span>
|
||||
<h2 class="reveal d1">روی کامپیوتر مطب،<br />سریع و بیدردسر</h2>
|
||||
<p class="reveal d2">نسخهی دسکتاپ کلینیک پرو را برای مک یا ویندوز نصب کنید؛ نوبتها، پروندهها و حساب مطب همه روی سیستم خودتان و در دسترساند.</p>
|
||||
<div class="dl-trust reveal d2">
|
||||
<span><svg viewBox="0 0 24 24" fill="none"><path d="M12 3 4 6v5c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>کاملاً ایمن</span>
|
||||
<span><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>نصب آسان</span>
|
||||
<span><svg viewBox="0 0 24 24" fill="none"><path d="M4 17V9m5 8V5m5 12v-6m5 6V8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>آپدیت رایگان</span>
|
||||
</div>
|
||||
<div class="store-badges reveal d3">
|
||||
<a class="store-badge" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-3 .9-3.7 2.3-1.6 2.8-.4 6.9 1.1 9.2.8 1.1 1.6 2.3 2.8 2.3 1.1 0 1.6-.7 2.9-.7 1.4 0 1.7.7 2.9.7 1.2 0 2-1.1 2.7-2.2.9-1.2 1.2-2.5 1.2-2.5s-2.3-.9-2.3-3.6ZM14.2 5.7c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.6 1.4-.6.7-1.1 1.7-.9 2.7 1 .1 2-.5 2.6-1.2Z"/></svg>
|
||||
<span class="sb-t"><small>دانلود برای</small><b>مک · macOS</b></span>
|
||||
</a>
|
||||
<a class="store-badge" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 5.5 10.5 4.4v7.1H3V5.5Zm0 13L10.5 19.6v-7H3v6Zm8.5 1.3L21 21V12.5h-9.5v7.3Zm0-15.6V11.5H21V3l-9.5 1.2Z"/></svg>
|
||||
<span class="sb-t"><small>دانلود برای</small><b>ویندوز</b></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- ===================== Footer ===================== -->
|
||||
<footer class="site-footer" id="contact">
|
||||
<div class="wrap">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-col footer-brand">
|
||||
<a class="brand" href="#hero"><b>کلینیک پرو</b><span class="dot"></span></a>
|
||||
<p>کلینیک پرو را ساختیم تا پزشکها بهجای درگیری با دفتر و کاغذ، حواسشان به کار اصلیشان باشد: بیمار.</p>
|
||||
<div class="foot-socials">
|
||||
<a href="#" aria-label="اینستاگرام"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.8"/><circle cx="17.4" cy="6.6" r="1.2" fill="currentColor"/></svg></a>
|
||||
<a href="#" aria-label="تلگرام"><svg viewBox="0 0 24 24" fill="none"><path d="M21 4 3 11l5 2 2 6 3-4 5 4 3-15Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></a>
|
||||
<a href="#" aria-label="واتساپ"><svg viewBox="0 0 24 24" fill="none"><path d="M4 20l1.4-4A8 8 0 1 1 9 18.6L4 20Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<h4>دسترسی سریع</h4>
|
||||
<div class="foot-links">
|
||||
<a href="#features">امکانات</a>
|
||||
<a href="#why">چرا کلینیک پرو</a>
|
||||
<a href="#download">دانلود نرمافزار</a>
|
||||
<a href="#contact">تماس با ما</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<h4>اطلاعات تماس</h4>
|
||||
<div class="foot-contact">
|
||||
<div class="fl"><svg viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><circle cx="12" cy="10" r="2.6" stroke="currentColor" stroke-width="1.7"/></svg><span>یاسوج، مهریان، خیابان شهید ستاره شیرازی، خیابان امامزاده احمد، پلاک ۸</span></div>
|
||||
<div class="fl"><svg viewBox="0 0 24 24" fill="none"><path d="M4 6.5C4 5 5 4 6.5 4h2c.6 0 1.1.4 1.3 1l1 3c.2.6 0 1.2-.5 1.6L9 11c1 2 2.5 3.5 4.5 4.5l1.4-1.3c.4-.4 1-.6 1.6-.4l3 1c.6.2 1 .7 1 1.3v2c0 1.5-1 2.5-2.5 2.4C10.5 20 4 13.5 4 6.5Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg><a href="tel:07491012178" class="mono" dir="ltr">۰۷۴۹۱۰۱۲۱۷۸</a></div>
|
||||
<div class="fl"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="m4 7 8 5 8-5" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg><a href="mailto:info@clinic-pro.ir" class="mono" dir="ltr">info@clinic-pro.ir</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<h4>دانلود نرمافزار</h4>
|
||||
<div class="foot-badges">
|
||||
<a class="store-badge" href="#" style="background:oklch(1 0 0 / 0.08)">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-3 .9-3.7 2.3-1.6 2.8-.4 6.9 1.1 9.2.8 1.1 1.6 2.3 2.8 2.3 1.1 0 1.6-.7 2.9-.7 1.4 0 1.7.7 2.9.7 1.2 0 2-1.1 2.7-2.2.9-1.2 1.2-2.5 1.2-2.5s-2.3-.9-2.3-3.6ZM14.2 5.7c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.6 1.4-.6.7-1.1 1.7-.9 2.7 1 .1 2-.5 2.6-1.2Z"/></svg>
|
||||
<span class="sb-t"><small>دانلود برای</small><b>مک · macOS</b></span>
|
||||
</a>
|
||||
<a class="store-badge" href="#" style="background:oklch(1 0 0 / 0.08)">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 5.5 10.5 4.4v7.1H3V5.5Zm0 13L10.5 19.6v-7H3v6Zm8.5 1.3L21 21V12.5h-9.5v7.3Zm0-15.6V11.5H21V3l-9.5 1.2Z"/></svg>
|
||||
<span class="sb-t"><small>دانلود برای</small><b>ویندوز</b></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">© ۲۰۲۶ کلینیک پرو · ساختهشده در ایران برای پزشکان ایران</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
var FA = ['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹'];
|
||||
function groupFa(n){ return String(n).replace(/\B(?=(\d{3})+(?!\d))/g,'،').replace(/\d/g,function(d){return FA[+d];}); }
|
||||
|
||||
var header = document.getElementById('header');
|
||||
function onScroll(){ header.classList.toggle('scrolled', window.scrollY > 12); }
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
onScroll();
|
||||
|
||||
var navToggle = document.getElementById('navToggle');
|
||||
var navLinks = document.getElementById('navLinks');
|
||||
if (navToggle) navToggle.addEventListener('click', function(){
|
||||
var open = navLinks.style.display === 'flex';
|
||||
navLinks.style.display = open ? '' : 'flex';
|
||||
if (!open) {
|
||||
navLinks.style.position='absolute'; navLinks.style.top='84px'; navLinks.style.insetInline='0';
|
||||
navLinks.style.flexDirection='column'; navLinks.style.background='#fff';
|
||||
navLinks.style.padding='20px 32px'; navLinks.style.gap='18px';
|
||||
navLinks.style.boxShadow='0 16px 30px oklch(0.4 0.08 285 / 0.1)';
|
||||
}
|
||||
});
|
||||
|
||||
var sections = ['hero','features','why','download','contact'];
|
||||
var links = Array.prototype.slice.call(document.querySelectorAll('.nav-links a'));
|
||||
function syncActive(){
|
||||
var y = window.scrollY + 120, cur = 'hero';
|
||||
sections.forEach(function(id){ var el=document.getElementById(id); if(el && el.offsetTop<=y) cur=id; });
|
||||
links.forEach(function(a){ a.classList.toggle('active', a.getAttribute('href')==='#'+cur); });
|
||||
}
|
||||
window.addEventListener('scroll', syncActive, { passive: true });
|
||||
syncActive();
|
||||
|
||||
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var reveals = Array.prototype.slice.call(document.querySelectorAll('.reveal'));
|
||||
function inView(el){ var r=el.getBoundingClientRect(); return r.top < (window.innerHeight||document.documentElement.clientHeight)-30 && r.bottom > 0; }
|
||||
function reveal(el){ el.classList.add('in'); }
|
||||
|
||||
if (reduce) { reveals.forEach(reveal); }
|
||||
else {
|
||||
reveals.forEach(function(el){ if(inView(el)) reveal(el); });
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ reveal(e.target); io.unobserve(e.target);} }); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
|
||||
reveals.forEach(function(el){ if(!el.classList.contains('in')) io.observe(el); });
|
||||
}
|
||||
var ticking=false;
|
||||
function sweep(){ if(ticking) return; ticking=true; requestAnimationFrame(function(){ reveals.forEach(function(el){ if(inView(el)) reveal(el); }); ticking=false; }); }
|
||||
window.addEventListener('scroll', sweep, { passive: true });
|
||||
window.addEventListener('resize', sweep, { passive: true });
|
||||
setTimeout(function(){ reveals.forEach(reveal); }, 2800);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
{{ encore_entry_script_tags('home') }}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user