# بازنویسی متن استارت‌اپی و رفع نمایش موبایل صفحه فرود (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` بازنویسی کن. **جایگاه/کلاس‌ها/تعداد آیتم‌ها ثابت بماند**؛ فقط متن داخل تگ عوض شود. لحن: کوتاه، قاطع، با فعل عمل، منفعت‌محور (نه فهرست امکانات خشک). اعداد فارسی بمانند.

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

```html
<!-- 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>
```

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

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

```html
<!-- 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) کنار برند سرریز می‌کند.

**وضعیت فعلی:**

```html
<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 را جمع‌وجور کن. مثال:

```css
@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/... دستی). این روش:

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

**وضعیت فعلی:**

```js
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 تمیزتر:

```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 زیر هدر):

```css
@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. عرض دسکتاپ بدون رگرسیون.