clinicpro/.claude/prompt/home-landing-copy-and-mobile.md

بازنویسی متن استارت‌اپی و رفع نمایش موبایل صفحه فرود (Landing)

پروژه

clinicpro — صفحه فرود عمومی روت / (سرو شده توسط HomeController). این صفحه Twig خام + CSS دستی است (نه React، نه پنل ادمین).

زمینه

صفحه https://clinic-pro.ddev.site/ یک landing بازاریابی کامل و self-contained است. دو ایراد دارد:

1. متن‌ها استارت‌اپی نیستند — لحن فعلی توصیفی/خنثی است؛ کاربر متن جذاب‌تر، قلاب‌دار (hook) و محصول-محور می‌خواهد. ارقام/ادعاها هم باید قوی‌تر و باورپذیر بمانند.
2. نمایش موبایل درست نیست — هدر روی گوشی شلوغ می‌شود (برند + دو دکمه + همبرگر کنار هم سرریز می‌کند)، منوی موبایل با inline-style شکننده باز می‌شود و با کلیک روی لینک بسته نمی‌شود، و بین breakpoint ۱۰۰۰px و ۶۴۰px هیچ نقطه میانی تبلت وجود ندارد.

مشکل / هدف

• همه متن‌های فارسی صفحه را به لحن استارت‌اپی، کوتاه، قلاب‌دار و محصول-محور بازنویسی کن (همان معنا، همان RTL، همان جایگاه‌ها — فقط متن داخل تگ‌ها عوض شود).
• نمایش موبایل را واقعاً درست کن: هدر بدون سرریز، منوی موبایل تمیز و قابل‌بستن، و یک breakpoint میانی تبلت اضافه شود.

فایل‌های مرتبط

فایل	نقش
clinicpro/templates/public/home.html.twig	کل HTML صفحه + JS inline منو/اسکرول (تک‌فایل، extends نمی‌کند)
clinicpro/assets/home/styles.css	تمام استایل صفحه، شامل @media (max-width:1000px) و @media (max-width:640px)
clinicpro/src/Shared/Controller/HomeController.php	فقط return $this->render('public/home.html.twig') — نیازی به تغییر ندارد
clinicpro/assets/home/index.js	فقط import './styles.css' — تغییر نمی‌کند

توجه: این صفحه ربطی به پنل ادمین React یا API ندارد. فقط Twig + CSS. نیازی به migration، docs/api، یا BaseController نیست.

---

وظیفه ۱ — بازنویسی استارت‌اپی همه متن‌ها

متن‌ها را در home.html.twig بازنویسی کن. جایگاه/کلاس‌ها/تعداد آیتم‌ها ثابت بماند؛ فقط متن داخل تگ عوض شود. لحن: کوتاه، قاطع، با فعل عمل، منفعت‌محور (نه فهرست امکانات خشک). اعداد فارسی بمانند.

وضعیت فعلی (نمونه‌هایی که باید استارت‌اپی شوند)

<!-- Hero — خط ۴۸ تا ۵۲ -->
<h1 class="reveal">نوبت، پرونده و حساب مطب،<br/>همه یک‌جا</h1>
<p class="reveal d1">کلینیک پرو کارهای روزمره‌ی مطب را سر و سامان می‌دهد؛ از نوبت‌دهی و پرونده‌ی بیمار تا فاکتور و گزارش مالی. دیگر خبری از دفتر نوبت و کاغذبازی نیست.</p>
<button class="btn btn-coral" id="openRegModal2">ثبت نام دکتر / کلینیک</button>
<a href="#contact" class="btn btn-blue">تماس با ما</a>

<!-- Feature columns — خط ۱۴۲ تا ۱۶۹ (۴ ستون) -->
<h3>پرونده‌ی بیمار</h3>
<p>سابقه، نسخه و آزمایش هر بیمار جای خودش است و هر وقت لازم شد، چند ثانیه‌ای پیدایش می‌کنید.</p>
<!-- ... نوبت‌دهی آنلاین / حساب و کتاب / +۵۰۰ مطب -->

<!-- Why icon row — خط ۱۸۱ تا ۲۰۳ -->
<h3>راه‌اندازی با شما</h3> ... <h3>پشتیبانی همیشگی</h3> ... <h3>متناسب با مطب ایرانی</h3> ... <h3>گزارش‌گیری دقیق</h3>

<!-- Devices — خط ۲۱۲ تا ۲۱۳ -->
<h2>هرجا باشید،<br/>مطب دست‌تان است</h2>
<p>روی گوشی، تبلت یا کامپیوتر بازش کنید؛ اطلاعات خودش هماهنگ می‌ماند ...</p>

راهنمای بازنویسی (نمونه لحن استارت‌اپی — می‌توانی بهترش کنی)

• Hero H1: قلاب کوتاه و بلندپروازانه. مثال: مطب‌تان را هوشمند اداره کنید یا کل مطب، توی جیب شما (دو خطی با <br/> مثل الان).
• Hero P: یک جمله منفعت‌محور + یک جمله «خداحافظ کاغذبازی». کوتاه و پانچی.
• Feature cards: تیتر فعل‌محور («پرونده‌ای که گم نمی‌شود»)، توضیح ۱ خطی با نتیجه ملموس.
• Why band: روی اعتماد و سرعت راه‌اندازی مانور بده («در کمتر از یک روز راه می‌افتید»).
• CTAها و eyebrowها (مثل نرم‌افزار دسکتاپ، هر تخصص، روال خودش): کوتاه و دعوت‌کننده.

نکات

• همه‌ی بخش‌های متنی صفحه را پوشش بده: nav، hero، feature columns، why band، devices، specialties (پزشک عمومی/دندان‌پزشک/متخصص پوست/متخصص اطفال و دو tick هرکدام)، app/desktop CTA (کاملاً ایمن/نصب آسان/آپدیت رایگان)، modal ثبت‌نام (دکتر هستم/...)، footer.
• اعداد و ادعاها را باورپذیر نگه‌دار (+۵۰۰ مطب, ۹۵٪ رضایت می‌توانند بمانند یا کمی پانچی‌تر شوند، اما اغراق بی‌پایه نکن).
• آدرس/تلفن/ایمیل footer (۰۷۴۹۱۰۱۲۱۷۸، info@clinic-pro.ir، آدرس یاسوج) دست‌نخورده بماند.
• لینک‌ها و hrefها (#hero, #features, /admin, action مودال) عوض نشوند.

---

وظیفه ۲ — رفع نمایش موبایل

مشکل ۲٫۱ — سرریز هدر روی گوشی

در home.html.twig خط ۳۳ تا ۳۹، nav-right همزمان همبرگر + دکمه «ثبت نام» + دکمه «ورود به پنل» را نشان می‌دهد. روی گوشی باریک (<۴۲۰px) کنار برند سرریز می‌کند.

وضعیت فعلی:

<div class="nav-right">
  <button class="nav-burger nav-toggle" id="navToggle" aria-label="منو">...</button>
  <button class="btn btn-ghost" id="openRegModal" style="font-size:13px;padding:8px 20px">ثبت نام</button>
  <a href="/admin" class="btn btn-blue" style="...">ورود به پنل</a>
</div>

راه‌حل: در styles.css داخل @media (max-width:640px) دکمه «ثبت نام» را مخفی کن (داخل منوی موبایل در دسترس می‌ماند) و فقط «ورود به پنل» + همبرگر بماند؛ یا هر دو دکمه ghost/blue را جمع‌وجور کن. مثال:

@media (max-width: 640px) {
  .nav-right #openRegModal { display: none; }   /* در منوی موبایل می‌آید */
  .nav-right { gap: 10px; }
  .brand small { display: none; }               /* «مدیریت مطب» را جا باز کن */
}

مشکل ۲٫۲ — منوی موبایل با inline-style شکننده باز می‌شود و بسته نمی‌شود

در home.html.twig خط ۷۵۶ تا ۷۷۲، توگل منو با ست‌کردن مستقیم navLinks.style.* کار می‌کند (position/background/... دستی). این روش:

• با کلیک روی آیتم منو بسته نمی‌شود،
• دکمه‌های ثبت‌نام/ورود را شامل نمی‌شود،
• شکننده است.

وضعیت فعلی:

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)';
    }
  });

راه‌حل پیشنهادی: منطق را به یک کلاس CSS منتقل کن (به‌جای inline-style) و با toggle کلاس کنترل کن؛ با کلیک روی هر لینک منو بسته شود.

JS تمیزتر:

var navToggle = document.getElementById('navToggle');
var navLinks = document.getElementById('navLinks');
if (navToggle) {
  navToggle.addEventListener('click', function () {
    navLinks.classList.toggle('open');
  });
  navLinks.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') navLinks.classList.remove('open');
  });
}

CSS متناظر در styles.css داخل @media (max-width:640px) (پنل dropdown زیر هدر):

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 84px;            /* ارتفاع هدر */
    inset-inline: 0;
    flex-direction: column;
    gap: 18px;
    background: #fff;
    padding: 20px 32px;
    box-shadow: 0 16px 30px oklch(0.4 0.08 285 / 0.1);
  }
}

اگر می‌خواهی دکمه «ثبت نام» مخفی‌شده (مشکل ۲٫۱) هم در منوی موبایل بیاید، یک لینک «ثبت نام» داخل #navLinks فقط برای موبایل اضافه کن یا با CSS در .nav-links.open نمایش بده.

مشکل ۲٫۳ — نبودِ breakpoint میانی تبلت

الان فقط max-width:1000px و max-width:640px هست؛ بین ~۶۴۱px تا ۱۰۰۰px (تبلت پرتره) چیدمان جا می‌افتد ولی فاصله/پدینگ بهینه نیست. یک breakpoint میانی اختیاری اما توصیه‌شده اضافه کن (مثلاً @media (max-width:768px)) که grid چهارستونی feature/icon/specs را به ۲ ستون نگه دارد و پدینگ سکشن‌ها را کم کند تا پرش ناگهانی ۱۰۰۰→۶۴۰ نرم شود.

نکات موبایل

• clamp() روی H1/H2 از قبل هست؛ آن را به‌هم نزن.
• بعد از تغییر CSS، build لازم است: ddev exec yarn dev (یا yarn watch). خطای lightningcss.linux-arm64-gnu.node در ddev پیش‌زمینه‌ای و بی‌اهمیت است؛ مانع build نیست.
• art-chipها در ۶۴۰px از قبل display:none شده‌اند — دست نزن.
• در ۶۴۰px مطمئن شو overflow-x: hidden بدنه (خط ۴۴) همچنان جلوی اسکرول افقی را می‌گیرد؛ SVGها با max-width:100% مقیاس می‌شوند.

---

تست نهایی

1. ddev exec yarn dev بدون خطای JS/TS.
2. https://clinic-pro.ddev.site/ را در عرض موبایل (~۳۷۵px) باز کن: هدر سرریز نکند، همبرگر منوی dropdown تمیز باز/بسته کند، کلیک روی لینک منو را ببندد.
3. متن‌ها استارت‌اپی و فارسی صحیح، RTL سالم، بدون شکستن layout.
4. عرض دسکتاپ بدون رگرسیون.