Add AST JSON representation for insurance API documentation
This commit is contained in:
hamed
@@ -0,0 +1,192 @@
|
||||
# بازنویسی متن استارتاپی و رفع نمایش موبایل صفحه فرود (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 (`۰۷۴۹۱۰۱۲۱۷۸`، `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. عرض دسکتاپ بدون رگرسیون.
|
||||
Reference in New Issue
Block a user