feat: mataba landing static site - production ready

2026-09-20 17:44:45 +03:30
parent b78e332966
commit 18280899a1
46 changed files with 1388 additions and 0 deletions
@@ -0,0 +1,217 @@
+# 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.