hemn/mataba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
mataba/landing
T
History

README.md

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)

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:

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

  • Static Mataba site implemented, visually faithful to Saba Health source.
  • HTML5/CSS3/vanilla JS only; Next.js/React not required to run.
  • Persian RTL + Modam preserved; responsive.
  • Mataba branding consistent; outdated public references removed/flagged.
  • Homepage + About + Contact work; navigation valid; no 404 thin pages.
  • Technical SEO foundations (semantics, RTL, metadata, canonical, sitemap, robots, JSON-LD, alt/dimensions, linking).
  • Important content as HTML text, not image-only.
  • No unsupported business claims published as fact; unverified flagged.
  • Run locally and tested; issues fixed/documented.
  • 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.
Reference in New Issue View Git Blame Copy Permalink