# 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` | ``, 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` ``+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 `