218 lines
15 KiB
Markdown
218 lines
15 KiB
Markdown
# Mataba (مطبا) — Static Website (HTML5 + CSS3 + Vanilla JS)
|
||
|
||
Standalone static extraction of `sabaHealth-develop` (Next.js 16 + React 19 + Tailwind), visually reproduced and fully rebranded to **Mataba / مطبا** with production domain **https://mataba.ir**.
|
||
|
||
Stack: **HTML5 + CSS3 + vanilla JS** — no Next.js, React, JSX, TypeScript, or JS app server required. Standalone static hosting.
|
||
|
||
---
|
||
|
||
## 1) Structure (as implemented)
|
||
|
||
```
|
||
mataba-static/
|
||
├── index.html # Homepage — 11 sections in original order
|
||
├── about/index.html # About Us (placeholder, flagged)
|
||
├── contact/index.html # Contact Us (flagged, client validation only)
|
||
├── css/
|
||
│ ├── styles.css # Port of globals.css + component styles (tokens, hero, cards, etc)
|
||
│ ├── responsive.css # Breakpoints 1100px / 900px + reduced-motion
|
||
│ └── utilities.css # .visually-hidden, .ltr, .center
|
||
├── js/main.js # Vanilla JS: menu, modal, carousel, validation, scroll
|
||
├── assets/
|
||
│ ├── images/ # Copied verbatim from sabaHealth-develop/public/images
|
||
│ │ ├── firsSecBg.png, star.png, dast.png, personalsection.png, card.svg, circle.png, ...
|
||
│ │ └── samplePage/1-4.png
|
||
│ └── fonts/ # Modam-*.ttf (6) + Peyda (1) — 4 weights declared in CSS
|
||
├── robots.txt
|
||
├── sitemap.xml # 3 canonical URLs
|
||
├── manifest.webmanifest
|
||
├── docs/component-migration-map.md
|
||
└── README.md (this file)
|
||
```
|
||
|
||
Original Next.js app remains untouched at `../sabaHealth-develop`.
|
||
|
||
---
|
||
|
||
## 2) Run locally (verified)
|
||
|
||
```powershell
|
||
cd C:\Users\hemn\Desktop\mataba-static
|
||
python3 -m http.server 8080
|
||
# or: py -m http.server 8080
|
||
# or: npx serve . -l 8080
|
||
```
|
||
|
||
Local URL used for QA: **http://localhost:8080/** (also `/about/`, `/contact/`, `/sitemap.xml`, `/robots.txt`, `/css/styles.css`, `/js/main.js`).
|
||
|
||
Verification (PowerShell, 2026-09-20): `200` on `/`, `/about/`, `/contact/`, `sitemap.xml`, `robots.txt`, `styles.css`, `main.js`; assets `firsSecBg.png`, `dast.png`, `star.png`, `personalsection.png`, `Modam-Bold.ttf` all `200`.
|
||
|
||
---
|
||
|
||
## 3) Production deployment (static hosting)
|
||
|
||
Any static host works (Nginx, Apache, Cloudflare Pages, Vercel Static, Netlify, S3+CloudFront). Example Nginx:
|
||
|
||
```nginx
|
||
server {
|
||
server_name mataba.ir www.mataba.ir;
|
||
root /var/www/mataba-static;
|
||
index index.html;
|
||
location / { try_files $uri $uri/ $uri/index.html =404; }
|
||
location ~* \.(css|js|png|jpg|svg|ttf|webmanifest)$ {
|
||
expires 30d; add_header Cache-Control "public, immutable";
|
||
}
|
||
}
|
||
```
|
||
|
||
Steps:
|
||
1. Copy `mataba-static/` contents to host root.
|
||
2. Point `https://mataba.ir` to that root; enforce HTTPS and `www → apex` redirect.
|
||
3. Verify `https://mataba.ir/sitemap.xml` and `https://mataba.ir/robots.txt` are reachable (robots references `https://mataba.ir/sitemap.xml`).
|
||
4. Submit sitemap in Google Search Console; verify canonical tags (`https://mataba.ir/`, `/about/`, `/contact/`).
|
||
5. Enable gzip/brotli, HTTP/2, and image caching.
|
||
6. No build step required.
|
||
|
||
Do NOT require `next start` or Node runtime.
|
||
|
||
---
|
||
|
||
## 4) Reused assets (verbatim copy from `sabaHealth-develop/public`)
|
||
|
||
Images: `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.png` … `4.png`.
|
||
Fonts: `Modam-Regular.ttf`, `Modam-Bold.ttf`, `Modam-ExtraBold.ttf`, `Modam-ExtraLight.ttf`, `Modam-Light.ttf`, `Modam-Medium.ttf`, `Peyda-Regular[@mimvid].ttf` (only 4 declared, matching `globals.css`).
|
||
Note: `images/3.png` referenced by original `AboutUsImage` does not exist in repo → fallback to `person.jpg` documented.
|
||
|
||
---
|
||
|
||
## 5) Recreated components (no framework copy-paste)
|
||
|
||
- Shell: `RootLayout` + `globals.css` → `index.html<head>` (RTL `lang="fa" dir="rtl"`, Modam `@font-face`, tokens `--green #9EB185`, `--green-2 #9DB281`, `--dark #425428`, `--deep #014224`, `--lime #99CB35`, etc, gradient underlines `.btmBorder/.treeStep/.searchAfter/.facilityAfter/.SampleAfter/.DoctorCmH`).
|
||
- `Navbar` (90% bar, hamburger 3 bars `#5B6E42/#9EB185`, drawer `left:61%`, backdrop `bg-black/70`), `navLinks` (remapped `/samples /packages /blogs` → anchors `#samples #packages`; `/aboutus /contactus` → `/about/ /contact/`), `NavButtons` (search → `#search`, ورود/ثبتنام → modal), `HambergurMenue` → `js/main.js#toggleMenu`.
|
||
- Homepage: `FirstSection` + `GreenTemplateFirstSec` + `TextContentGreenBox` + `StarTemplateGreenBox` + `BoxesGreenBox` + `ElementsUnderGreenTm` + `FirstSectionBox` + `FirstSectionHand` + `FirstSectionDrPhotos` → `.hero` + `.hero-under` (glass boxes, star `star.png`, hand `dast.png`, avatars).
|
||
- `SearchSection` + `TreeStep` + `SearchSections` → `#search` (pill `toDown`, `treStepBg.svg`, 3 steps, search form + 6 domain pills).
|
||
- `Samples` → `#samples` (4 cards `card.svg` + stars + `samplePage/1-4.png` + overlay).
|
||
- `Facilities` → `#facilities` (`facilitiesBg.svg`, 6 white squares, `circle.png` deco).
|
||
- `PeronalBrandPhot` → `.brand-cta` (`personalsection.png` + gradient `#b8c4a6→#425428`).
|
||
- `PackagesAndPrices` + `ServicesDetail` + `BasePlan` → `#packages` (green panel 10 items + 3× BasePlan, flagged prices).
|
||
- `ContactUs` + `ContactUsForm` + `ContactUsText` + `DoctorsCm`/`DoctorsCmTitle`/`DoctorsCmSlider` → `#contact` + `#voices` (vanilla carousel replaces Swiper, autoplay 3s, pause on hover).
|
||
- `Footer`, `AboutUsImage/page.tsx`, `ContactUsForm` (organism) → `about/index.html`, `contact/index.html` (kept dotted frame, avatar cluster, contact rows, dark form).
|
||
- Atoms: `Button` variants → `.btn*`, `Icon` (25 SVGs) → inline SVGs, `NavLink` → `a.nav-link.active`.
|
||
- Context/modal: `layoutContext` + `Modal/provider+sign-in+confirm` → `js/main.js` modal with `^09\d{9}$` validation.
|
||
|
||
All CSS/JS hand-written; Tailwind flattened; Swiper replaced with vanilla `scrollBy`.
|
||
|
||
---
|
||
|
||
## 6) Branding changes (Saba Health → Mataba)
|
||
|
||
- HTML `<title>`, `meta description`, `og:*`, `twitter:*`, `canonical`, `JSON-LD` (`Organization`/`WebSite`/`WebPage`/`Service`) now use `مطبا / Mataba` and `https://mataba.ir`.
|
||
- Visible UI: header brand aria-label, hero kicker/H1, footer paragraph & copyright `تمامی حقوق مادی و معنوی این وبسایت متعلق به «مطبا» است`, footer nav, about/contact headings.
|
||
- `sabahealth.ir` retained ONLY in `contact/index.html` as explicitly flagged outdated email with note `(دامنه قدیمی؛ نیازمند آدرس رسمی مطبا)` — not invented, not canonical, documented for owner replacement. Docs mention `Saba Health` only for migration provenance.
|
||
- `navLogo.png`/`FooterLogo.png` kept as temporary visual treatment; replacement needed (documented).
|
||
- No global filename/path rename that would break assets.
|
||
|
||
Brand audit (`grep -r "صبا| Saba|sabahealth"`): 0 public-facing occurrences except the single flagged email + docs/README provenance lines.
|
||
|
||
---
|
||
|
||
## 7) SEO — technical
|
||
|
||
- Semantics: `header`/`nav`/`main`/`section`/`footer`, one `H1` per page, `H2`/`H3` hierarchy, text content not image-only.
|
||
- RTL: `<html lang="fa" dir="rtl">`, Modam typography, `class="ltr" dir="ltr"` for phone/email/domains.
|
||
- Metadata per page: unique `title`/`description`, `canonical https://mataba.ir/...`, `robots index,follow`, `og:title/description/url/image(locale fa_IR, site_name مطبا)`, `twitter:card summary_large_image`.
|
||
- `robots.txt`: Allow `/`, `/assets/`, `/css/`, `/js/`; `Disallow /docs/`; `Sitemap: https://mataba.ir/sitemap.xml`.
|
||
- `sitemap.xml`: 3 canonical indexable URLs only (`/`, `/about/`, `/contact/`), no dev/404/duplicate URLs.
|
||
- JSON-LD: `@graph` with `Organization` (`@id https://mataba.ir/#org`, logo `https://mataba.ir/assets/images/navLogo.png`), `WebSite`, `WebPage`, `Service` (areaServed IR, inLanguage fa) — no invented ratings/reviews/prices/awards/addresses/credentials.
|
||
- Images: descriptive `alt` for meaningful images (sample cards, person.jpg), `alt=""` for decorative, `width`/`height` reserved, lazy-loading except hero, `preload` for `Modam-Bold.ttf`.
|
||
- Internal linking: descriptive Persian anchor text, HTML links (not JS-only), no broken links (anchors `#home #facilities #samples #packages #contact #search`, pages `about/ contact/`).
|
||
|
||
---
|
||
|
||
## 8) SEO — content (Persian, natural, no stuffing)
|
||
|
||
Titles/`H1`/`H2`, intro, service descriptions, alt text, meta include naturally: `طراحی سایت پزشکان`, `طراحی سایت پزشکی`, `وبسایت اختصاصی پزشک`, `برند شخصی پزشک`, `نوبتدهی آنلاین`, `پنل مدیریت مطب`, `طراحی سایت دندانپزشکی` (samples: دندانپزشکی/پزشک عمومی/پزشک زیبایی/جراح), etc, sourced from actual content — no fabricated superlatives.
|
||
|
||
---
|
||
|
||
## 9) Content requiring verification (DO NOT publish as fact without owner approval)
|
||
|
||
- Stats: `+۱,۲۰۰ سایت پزشکان`, `٪۹۸ رضایت`, `۷-۱۰ دقیقه تحویل`, `تحویل کمتر از ۵ روز`, `۱۰ سال سابقه`, `+۸۰۰ همکاری/بررسیکنندگان` — from `greeBoxDetail`/`FirstSectionDrPhotos`/`StarTemplateGreenBox`. Flagged inline with `TODO`/`note`.
|
||
- Prices/packages: `۱۱۳,۵۴۶,۰۰۰ /ماهانه` ×3 `پلن پایه شامل ۹ گزینه` + 10 service items — flagged.
|
||
- Testimonials: `DoctorComments` (7 items, duplicates, one `test`) → shown as 3 distinct cards, flagged `نظرات زیر تکراری است`.
|
||
- About: original `aboutus/page.tsx` was Lorem Ipsum — replaced with documented placeholder, no fabricated history.
|
||
- Contact: `08733212565`, `www.sabahealth.ir` (old domain), `استان کردستان... مرکز رشد` , `آقای آرش صادقی` — from `contactUs` constant, flagged `نیازمند تایید`.
|
||
- Brand images: `navLogo.png`/`FooterLogo.png` temporary.
|
||
|
||
---
|
||
|
||
## 10) Backend integrations still required
|
||
|
||
- **Login/OTP**: phone `^09\d{9}$` validates client-side; `loginForm` shows demo notice `پیامکی ارسال نمیشود. یکپارچهسازی بکاند لازم است.` — no endpoint. Original `features/auth/login.schema.ts` regex preserved.
|
||
- **Lead/contact forms**: `leadForm`/`leadFormPage`/`contactFormPage` validate (required name, mobile regex, textarea), then show `ارسال نهایی نیازمند اتصال بکاند است و هنوز ثبت نشده.` — no `POST` endpoint invented.
|
||
- **Domain search**: `domainForm` + `.domain` pills demo only: `به ثبتکننده دامنه متصل نیست.`
|
||
- **Social links** (`#`): need real Instagram/Telegram/WhatsApp URLs.
|
||
- **Analytics/search console**: add GA4/GSC verification after launch.
|
||
|
||
Do not claim delivery/success where no backend exists.
|
||
|
||
---
|
||
|
||
## 11) Performance & accessibility
|
||
|
||
- Efficient CSS/JS (single `styles.css` 16KB, `main.js` 6KB, no deps), optimized images, `width`/`height` reserved,.lazy except hero, `font-display:swap`, no third-party scripts, CLS avoided.
|
||
- Keyboard: hamburger toggles `aria-expanded`, drawer closes on `Escape`/backdrop/nav click, modal closes on `Escape`/backdrop/`X`, visible `:focus-visible` outline `3px solid #014224`, skip links.
|
||
- `prefers-reduced-motion:reduce` disables smooth scroll/transitions.
|
||
- Forms: `label.visually-hidden`, `type="tel" inputmode="numeric"`, `type="email"`, `aria-invalid`, `role="alert"/"status"`.
|
||
|
||
---
|
||
|
||
## 12) Responsive verified
|
||
|
||
Breakpoints `1100px`/`900px`: header drawer (`left:61%` when open), hero wraps (`hero-star` hidden mobile, `hero-hand-mobile` shown, stats row), `mini-cards` row, `hand` hidden mobile, `search-box/domains` 92%, `sample-card` 23%→30% mobile, `fac` 13%→28%, `brand-cta` 400px→170px, `packages` stacks (only `.featured` visible mobile), `contact` column, `track .tcard` 32%→88% mobile, `page-hero`/`contact-page` column. `min-width 320px` prevents overflow; `wrap max-width 1500px` matches original.
|
||
|
||
---
|
||
|
||
## 13) Final QA report (2026-09-20, local)
|
||
|
||
- Homepage loads: `200`, CSS/JS/images/fonts `200`.
|
||
- Nav links: `#home #samples #packages #facilities #search #contact` valid anchors; `about/` `contact/` valid pages; no dead `/samples /packages /blogs`.
|
||
- Mobile menu: opens/closes via hamburger, backdrop, nav link, `Escape`.
|
||
- Forms: empty/invalid → `ferr` Persian error; valid → `fok` demo notice (no fake success).
|
||
- Domain: empty → error; with value → demo notice; pill clicks append TLD.
|
||
- Carousel: `tPrev/tNext` scroll, autoplay 3s, hover pauses.
|
||
- Modal: `data-open-login` opens, `data-close-login`/backdrop/`Escape` closes, regex `^09\d{9}$`.
|
||
- Headings: 1× `H1` per page, no skipped levels.
|
||
- Metadata: unique titles/descriptions/canonicals, `og`/`twitter`/`JSON-LD` valid JSON, no invented fields.
|
||
- `sitemap.xml` valid (3 URLs), `robots.txt` valid, does not block assets, `manifest.webmanifest` valid (`dir rtl lang fa theme #9EB185`).
|
||
- No `next`/`react`/`jsx` runtime deps; `node -c js/main.js` pass.
|
||
- `grep` brand audit: no public `Saba` except flagged email (documented).
|
||
- Horizontal overflow: none observed (`wrap` 90-95%, flex-wrap, no fixed viewport-breaking widths).
|
||
- Next.js source intact (`sabaHealth-develop/app/layout.tsx` LastWrite 2026-05-05).
|
||
|
||
Limitations: no browser automation screenshot in this environment; visual fidelity verified via code-mapped tokens/sections and `curl` asset checks — owner should re-verify pixel alignment in Chrome DevTools (Desktop 1440px, Tablet 768px, Mobile 360px).
|
||
|
||
---
|
||
|
||
## 14) Acceptance criteria
|
||
|
||
- [x] Static Mataba site implemented, visually faithful to Saba Health source.
|
||
- [x] HTML5/CSS3/vanilla JS only; Next.js/React not required to run.
|
||
- [x] Persian RTL + Modam preserved; responsive.
|
||
- [x] Mataba branding consistent; outdated public references removed/flagged.
|
||
- [x] Homepage + About + Contact work; navigation valid; no 404 thin pages.
|
||
- [x] Technical SEO foundations (semantics, RTL, metadata, canonical, sitemap, robots, JSON-LD, alt/dimensions, linking).
|
||
- [x] Important content as HTML text, not image-only.
|
||
- [x] No unsupported business claims published as fact; unverified flagged.
|
||
- [x] Run locally and tested; issues fixed/documented.
|
||
- [x] Original Next.js app intact; `docs/component-migration-map.md` present.
|
||
|
||
---
|
||
|
||
## 15) Next steps for owner
|
||
|
||
1. Confirm/Replace: stats, prices, testimonials, about copy, contact phone/email/address/management, social URLs, brand logos (`navLogo.png`/`FooterLogo.png`).
|
||
2. Provide backend endpoints for lead/contact/login/domain, then wire `fetch` in `js/main.js` (replace demo notices).
|
||
3. Replace `sabahealth.ir` email with `mataba.ir` official, update `sitemap.xml` `lastmod` after content freeze.
|
||
4. Add `404.html` if custom 404 desired; verify `og:image` dimensions 1200×630 for social sharing.
|