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	—

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)

FirstSection (organism/FirstSection) → <section id=home class=hero-wrap>: composes GreenTemplate + ElementsUnderGreen.
GreenTemplateFirstSec → .hero with bg firsSecBg.png desktop / #9EB185 mobile, rounded-xl, aspect-video-like min-height. Text right, star middle, boxes left.
TextContentGreenBox → .hero-text: «طراحی یه سایت حرفه‌ای برای برندت» + H1 «فقط در سه مرحله، سایت پزشکیت آماده‌ست!» + CTA «ساخت فروشگاه من».
StarTemplateGreenBox → .hero-star with star.png bg: «۱۰ سال سابقه در زمینه پزشکی» (flag: unverified, kept with TODO comment).
BoxesGreenBox (greeBoxDetail) → 3 glass boxes linear-gradient(...#014224), inner #92a578: +۱۲۰۰ سایت پزشکان / ٪۹۸ رضایت / ۷-۱۰ دقیقه تحویل (flagged unverified).
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.
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).
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.
Facilities (organism) → <section id=facilities>: facilitiesBg.svg bg, white title «هر چیزی که برای حضور آنلاین نیاز داری» (.facilityAfter), 6 white squares + checkCircle + circle.png deco.
PeronalBrandPhot (molecule) → <section class=brand-cta> bg personalsection.png + overlay linear-gradient(to left? original to-r, #b8c4a6/40→#425428): H2 «برند شخصی پزشکیت رو همین امروز بساز», sub «تو فقط کارت رو بده…», white btn.
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.
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.
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).
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.

10 KiB Raw Blame History Unescape Escape