60 lines
10 KiB
Markdown
60 lines
10 KiB
Markdown
# Mataba — Component Migration Map (Saba Health → Mataba static)
|
||
|
||
Source: `C:\Users\hemn\Desktop\sabaHealth-develop` (Next.js 16 + React 19 + Tailwind 4)
|
||
Target: `C:\Users\hemn\Desktop\mataba-static` (HTML5 + CSS3 + vanilla JS, no Next/React)
|
||
Brand: Saba Health / صبا هلث → Mataba / مطبا, canonical domain `https://mataba.ir`
|
||
|
||
## Global / shell
|
||
|
||
| Original | Path | Purpose / visible content | Tokens / assets | Behavior | Destination (static) | Approach | Limits |
|
||
|---|---|---|---|---|---|---|---|
|
||
| RootLayout | `app/layout.tsx` | `<html lang=fa dir=rtl>`, Geist vars, metadata title `صبا هلث`, desc `طراحی سایت مختص پزشکان`, icon `/images/navLogo.png`, centers `max-w-[1500px]`, mounts Navbar+ModalProvider | max-width 1500, min 320 | static shell | `index.html / about/index.html / contact/index.html` `<head>`+header | Rewrite as plain HTML shell, keep RTL/fa, replace brand + canonical `https://mataba.ir/...` | Geist dropped; Modam kept |
|
||
| globals.css | `app/globals.css` | Tailwind import, Modam `@font-face` ×4, `body{font-family:modam}`, `.active` nav underline `#9EB185`, gradient underlines `.btmBorder/.treeStep/.searchAfter/.facilityAfter/.SampleAfter/.DoctorCmH` with `#99CB35` gradient, radius tokens, oklch theme | `#9EB185 #99CB35 #014224 #425428`, Modam TTFs | none | `css/styles.css` + `css/utilities.css` | Hand-port font-face (paths `../assets/fonts/...`), underline classes, tokens as CSS vars | Tailwind utilities flattened to plain CSS; oklch theme simplified |
|
||
| constants | `core/constants/global.ts` | All copy: navLinks, FirstSectionwhiteBoxes, PackageDetailsItem (10), Steps (3), domains (6), cardDetails (4), FacilitiyItems (6), DoctorComments (7), greeBoxDetail (3), contactUs (4) | — | data only | inlined into HTML sections | Copy text verbatim (fa), rebrand mentions; prices/testimonials flagged unverified | Claims (1200 sites, 98%, 800 doctors, prices) need owner approval |
|
||
| layoutContext | `context/layoutContext.tsx` | `openHambergurMenue` boolean | — | hamburger toggle | `js/main.js` `toggleMenu()` | Vanilla class toggle | — |
|
||
| Modal provider + sign-in + confirm | `components/ui/molecule/Modal/{provider,sign-in-modal,confirm-login-modal}.tsx` | Phone modal: label شماره موبایل, input `09123456789`, validation `^09\d{9}$` (`features/auth/login.schema.ts`), error text, ادامه button; confirm modal empty | border `#9EB185`, btn `#9EB185` | open via ورود/ثبتنام, close on backdrop/X, fake submit → opens confirm | Login modal in all pages (`#loginModal`), `js/main.js` open/close + regex validation | Re-implement validation message in fa; submit shows demo notice, no backend | No backend endpoint exists — documented as TODO |
|
||
| Button | `components/ui/atom/Button/index.tsx` | Variants: main_btn `#9EB185`, search_btn, packages_btn `#425428`, Personal_btn, domainBtn `#E7EBE1`, searchInput `#9DB281`, FormBtn, create_my_store `#33421eb8`, packages outline | see tokens | — | `.btn*` classes in `styles.css` | Plain `<button>/<a>` + classes | — |
|
||
| Icon | `components/ui/atom/Icon/index.tsx` | 25 inline SVGs: search, user, pipette, programming, clock, documentAdd, device, checkCircle, checkSquare `#33CD65`, closeCircle, arrowDown `#9EB185`, felesh, toDown, arrow1/2, starMain/star2 `#014224`, FleshTo, ContactUsArrow, altArrR/L, starRate `#AC970B`, phone/email/mapPoint/userCheck `#425428`, close `#9EB185`, loginPhone | `#014224 #425428 #9EB185` | decorative | inline SVGs copied into HTML / `assets/icons/` reuse | Copy SVG markup verbatim where used; no sprite to keep diff small | — |
|
||
| NavLink | `components/ui/atom/NavLink/index.tsx` | Active underline handling | `.active` | — | `a.nav-link` | `:hover` + `.active` class | — |
|
||
|
||
## Navbar
|
||
|
||
| Original | Path | Content | Assets | Destination | Approach |
|
||
|---|---|---|---|---|---|
|
||
| Navbar | `organism/Navbar/index.tsx` | 90% width bar: hamburger + `navLogo.png` 150×100 + links + buttons | `assets/images/navLogo.png` (temp brand img, kept + documented) | `header.site-header > nav` | Flex header, sticky |
|
||
| navLinks | `molecule/navLinks/index.tsx` | 6 links (/, /samples, /packages, /blogs, /aboutus, /contactus); mobile drawer `left-[61%]`, backdrop `bg-black/70`, title `Saba Health` | — | same `nav` | Anchors: `#home #samples #packages #facilities`, pages `/about/ /contact/`; `/samples /packages /blogs` dead routes remapped to anchors (no thin pages) |
|
||
| NavButtons | `molecule/NavButtons/index.tsx` | search icon btn + ورود/ثبت نام btn | — | header actions | Search btn scrolls to `#search`; login btn opens modal |
|
||
| HambergurMenue | `molecule/HambergurMenue/index.tsx` | 3 bars `#5B6E42/#9EB185` + «منو» | — | hamburger button | CSS bars + `aria-expanded` |
|
||
|
||
## Homepage sections (order preserved)
|
||
|
||
1. `FirstSection (organism/FirstSection)` → `<section id=home class=hero-wrap>`: composes GreenTemplate + ElementsUnderGreen.
|
||
2. `GreenTemplateFirstSec` → `.hero` with `bg firsSecBg.png` desktop / `#9EB185` mobile, `rounded-xl`, `aspect-video`-like min-height. Text right, star middle, boxes left.
|
||
3. `TextContentGreenBox` → `.hero-text`: «طراحی یه سایت حرفهای برای برندت» + H1 «فقط در سه مرحله، سایت پزشکیت آمادهست!» + CTA «ساخت فروشگاه من».
|
||
4. `StarTemplateGreenBox` → `.hero-star` with `star.png` bg: «۱۰ سال سابقه در زمینه پزشکی» (flag: unverified, kept with TODO comment).
|
||
5. `BoxesGreenBox (greeBoxDetail)` → 3 glass boxes `linear-gradient(...#014224)`, inner `#92a578`: `+۱۲۰۰ سایت پزشکان / ٪۹۸ رضایت / ۷-۱۰ دقیقه تحویل` (flagged unverified).
|
||
6. `ElementsUnderGreenTm` → `.hero-under` flex: `FirstSectionBox` (3 white cards pipette/programming/clock) + `FirstSectionHand` (`dast.png` + 2 gray shapes) + `FirstSectionDrPhotos` (person.jpg/person2.jpg/person3.jpg circles + `+۸۰۰ همکاری`) — flagged.
|
||
7. `SearchSection (organism)` → `<section id=search>`: toDown pill `linear-gradient(white→#014224a8)`, wrapper `treStepBg.svg`; `TreeStep` (title «مراحل ساخت وبسایت» + H2 «فقط در سه مرحله…» + 3 white circles + arrow1/2) + `SearchSections` (H2 «سلامتی از اعتماد شروع میشود…», input «نام دامنه را جستجو کنید…», 6 domain pills).
|
||
8. `Samples (organism)` → `<section id=samples>`: eyebrow «نمونه طراحیها…», H2 «طراحیهایی مطابق با هویت برند پزشکان» (`.SampleAfter`), 4 cards `card.svg` frame + stars + title `#014224` + `samplePage/1-4.png` + green overlay `linear-gradient(#9db2811c→#9DB281)` + «مشاهده» btn. Desktop 4-col, mobile 3.
|
||
9. `Facilities (organism)` → `<section id=facilities>`: `facilitiesBg.svg` bg, white title «هر چیزی که برای حضور آنلاین نیاز داری» (`.facilityAfter`), 6 white squares + checkCircle + `circle.png` deco.
|
||
10. `PeronalBrandPhot (molecule)` → `<section class=brand-cta>` bg `personalsection.png` + overlay `linear-gradient(to left? original to-r, #b8c4a6/40→#425428)`: H2 «برند شخصی پزشکیت رو همین امروز بساز», sub «تو فقط کارت رو بده…», white btn.
|
||
11. `PackagesAndPrices (organism)` → `<section id=packages>`: eyebrow «پکیجها و قیمتها» + H2 «پکیج مناسب تخصص خودت رو انتخاب کن» (`.btmBorder`); `ServicesDetail` (green gradient panel, 10 items) + 3× `BasePlan` («پلن پایه ۱۱۳,۵۴۶,۰۰۰/ماهانه، شامل ۹ گزینه», checkSquare/closeCircle rows, «انتخاب پکیج» btn `#425428`) + outline «مشاهده پکیج ها» (original dead `/Packages` link → `#packages`). Prices flagged unverified.
|
||
12. `ContactUs (organism landing)` → `<section id=contact>`: bg `contactUs.png` desktop / `#9eb18538` mobile; `ContactUsText` (H2 «با ما در ارتباط باشید…», support text, insta/telegram/whatsap icons) + `ContactUsForm` (H2 «فرم ثبت درخواست فروشگاه», inputs نام/موبایل/تخصص/رنگ سازمانی + textarea, labels, validation, «ارسال درخواست»). No backend → client validation + demo success note documented.
|
||
13. `DoctorsCm (organism)` + `DoctorsCmTitle` + `DoctorsCmSlider` → `<section id=voices>`: eyebrow «نظرات پزشکان» + H2 «نظر پزشکانی که به ما اعتماد کردند» (`.DoctorCmH`); vanilla carousel (replaces Swiper): 3 visible desktop / 1 mobile, loop, autoplay 3s, prev/next `altArrL/R`, cards with quote, `dcm1/2/3.jpg` 110px circle, name/title, 5× starRate. Testimonials flagged (duplicates + `test`).
|
||
14. `Footer (organism)` → `<footer>`: `#9DB281` rounded panel, `FooterLogo.png`, brand paragraph (rewritten to مطبا), social icons, copyright «مطبا» + legal line.
|
||
|
||
## About / Contact pages
|
||
|
||
| Original | Static | Notes |
|
||
|---|---|---|
|
||
| `app/aboutus/page.tsx` + `organism/AboutUsImage/page.tsx` | `about/index.html` | Keep dotted-frame SVG + `/images/3.png`→ missing in repo (falls back to person.jpg; documented) + avatar cluster + `+۸۰۰ بررسیکنندگان`. Lorem paragraph replaced with documented placeholder (no fabricated history) + link to contact/packages. |
|
||
| `app/contactus/page.tsx` + `organism/ContactUsForm` | `contact/index.html` | Keep `contactusPhone.png` deco, 4 info rows (phone/email/mapPoint/userCheck icons + contactUs data). Form: name/email/subject/message with labels, types, validation; demo-only submit note. Contact values kept from repo (NOT invented); flagged for owner verification. |
|
||
|
||
## Assets reused (copied verbatim)
|
||
|
||
`card.svg, circle.png, contactUs.png, contactusPhone.png, dast.png, dcm1.jpg, dcm2.jpg, dcm3.jpg, facilitiesBg.svg, firsSecBg.png, FooterLogo.png, instagraam.png, navLogo.png, person.jpg, person2.jpg, person3.jpg, personalsection.png, star.png, telegram.png, treStepBg.svg, whatsap.png, samplePage/1-4.png, Modam-*.ttf (6), favicon→navLogo.png`. Missing: `images/3.png` referenced by AboutUsImage (not in public/) → fallback documented.
|
||
|
||
## Recreated (no copy-paste of framework code)
|
||
|
||
All layout/CSS/JS rewritten: header/nav/drawer, hero, steps, search, cards, facilities, brand CTA, pricing, forms, carousel, modal, footer, responsive breakpoints, focus states, reduced-motion, lazy loading (except hero), SEO head + JSON-LD, sitemap/robots/manifest.
|