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 (02191550875، 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. عرض دسکتاپ بدون رگرسیون.