feat: mataba landing static site - production ready

landing/README.md

@@ -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.

landing/about/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>درباره مطبا | پلتفرم طراحی سایت پزشکی</title>
+<meta name="description" content="درباره مطبا: پلتفرم طراحی سایت اختصاصی پزشکان با تمرکز بر برند شخصی، نمونه‌کار و نوبت‌دهی آنلاین.">
+<link rel="canonical" href="https://mataba.ir/about/">
+<meta name="robots" content="index, follow">
+<meta property="og:type" content="website"><meta property="og:locale" content="fa_IR"><meta property="og:site_name" content="مطبا">
+<meta property="og:title" content="درباره مطبا | پلتفرم طراحی سایت پزشکی"><meta property="og:description" content="درباره مطبا: پلتفرم طراحی سایت اختصاصی پزشکان با تمرکز بر برند شخصی، نمونه‌کار و نوبت‌دهی آنلاین.">
+<meta property="og:url" content="https://mataba.ir/about/"><meta property="og:image" content="https://mataba.ir/assets/images/personalsection.png">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="icon" href="../assets/images/navLogo.png" type="image/png">
+<link rel="preload" href="../assets/fonts/Modam-Bold.ttf" as="font" type="font/ttf" crossorigin>
+<link rel="stylesheet" href="../css/styles.css"><link rel="stylesheet" href="../css/responsive.css"><link rel="stylesheet" href="../css/utilities.css">
+<link rel="manifest" href="../manifest.webmanifest">
+<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://mataba.ir/about/#page","url":"https://mataba.ir/about/","name":"درباره مطبا | پلتفرم طراحی سایت پزشکی","inLanguage":"fa-IR","isPartOf":{"@id":"https://mataba.ir/#site"}},{"@type":"BreadcrumbList","@id":"https://mataba.ir/about/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"خانه","item":"https://mataba.ir/"},{"@type":"ListItem","position":2,"name":"درباره مطبا","item":"https://mataba.ir/about/"}]}]}</script>
+</head>
+<body>
+<a class="skip" href="#main">پرش به محتوا</a>
+<div class="wrap">
+<header class="site-header">
+  <button class="hamburger" id="hamburger" aria-expanded="false" aria-controls="mainNav" aria-label="باز کردن منو"><span class="bars" aria-hidden="true"><span></span><span></span><span></span></span><span>منو</span></button>
+  <a class="brand" href="../" aria-label="مطبا"><span class="logo-mark" aria-hidden="true"><span>م</span></span><span class="logo-text-wrap"><span class="logo-text">مطبا</span><span class="logo-sub">mataba.ir</span></span></a>
+  <nav class="nav" id="mainNav" aria-label="ناوبری اصلی">
+    <a class="nav-link" href="../#home">صفحه اصلی</a><a class="nav-link" href="../#samples">نمونه‌کارها</a><a class="nav-link" href="../#packages">پکیج‌ها</a><a class="nav-link" href="../#facilities">امکانات</a><a class="nav-link active" href="./">درباره ما</a><a class="nav-link" href="../contact/">ارتباط با ما</a>
+  </nav>
+</header>
+<div class="drawer-backdrop" id="drawerBackdrop"></div>
+<nav class="breadcrumb" aria-label="مسیر"><a href="../">خانه</a> / درباره ما</nav>
+<main id="main" class="page-hero">
+  <div class="about-frame" aria-hidden="false">
+    <img src="../assets/images/person.jpg" class="main" alt="تیم مطبا (تصویر موقت از نسخه قبلی)" width="400" height="460" loading="lazy">
+    <div style="border:2px solid #425428;border-radius:12px;padding:120px 40px 60px;text-align:center;margin-top:40px">
+      <div class="avatars" style="justify-content:center"><img src="../assets/images/person2.jpg" alt="" width="56" height="56" loading="lazy"><img src="../assets/images/person3.jpg" alt="" width="56" height="56" loading="lazy"><img src="../assets/images/person.jpg" alt="" width="56" height="56" loading="lazy"></div>
+      <p><b>+۸۰۰</b> بررسی‌کنندگان (آمار نسخه قبلی، نیازمند تایید)</p>
+    </div>
+  </div>
+  <div class="txt">
+    <h1>درباره ما</h1>
+    <p class="lead">مطبا پلتفرمی برای ساده‌تر کردن حضور آنلاین پزشکان است؛ از طراحی لوگو تا ساخت کامل وب‌سایت اختصاصی پزشک.</p>
+    <p class="mt-4"><a class="btn btn-main" href="../#samples" style="border-radius:12px"><span class="lbl">مشاهده نمونه‌کارها</span></a> <a class="btn btn-outline" href="../contact/">ارتباط با ما</a></p>
+  </div>
+</main>
+<footer class="site-footer"><div class="foot-panel"><span class="brand" style="gap:10px"><span class="logo-mark" style="width:38px;height:38px;border-radius:12px;font-size:18px"><span>م</span></span><span class="logo-text-wrap"><span class="logo-text" style="font-size:20px">مطبا</span><span class="logo-sub">mataba.ir</span></span></span><p class="foot-small">تمامی حقوق این وب‌سایت متعلق به «مطبا» است. <a href="../">mataba.ir</a></p></div></footer>
+</div>
+<script src="../js/main.js" defer></script>
+</body>
+</html>

landing/assets/images/card.svg

@@ -0,0 +1,9 @@
+<svg width="295" height="453" viewBox="0 0 295 453" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M295 433C295 444.046 286.046 453 275 453H20C8.9543 453 0 444.046 0 433V61C0 49.9543 8.95431 41 20 41H66C77.0457 41 86 32.0457 86 21V20C86 8.95431 94.9543 0 106 0H189C200.046 0 209 8.95431 209 20V21C209 32.0457 217.954 41 229 41H275C286.046 41 295 49.9543 295 61V433Z" fill="url(#paint0_linear_1_146)"/>
+<defs>
+<linearGradient id="paint0_linear_1_146" x1="147.5" y1="0" x2="147.5" y2="453" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9F9F9"/>
+<stop offset="1" stop-color="#9DB281"/>
+</linearGradient>
+</defs>
+</svg>

landing/assets/images/facilitiesBg.svg

@@ -0,0 +1,3 @@
+<svg width="1259" height="282" viewBox="0 0 1259 282" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1259 231.395C1259 259.009 1236.61 281.395 1209 281.395H50C22.3857 281.395 0 259.009 0 231.395V108.927C0 82.2999 20.868 60.3439 47.4612 58.9919L1206.46 0.0657349C1235.04 -1.38708 1259 21.3898 1259 50.0012V231.395Z" fill="#688048"/>
+</svg>

landing/assets/images/treStepBg.svg

@@ -0,0 +1,9 @@
+<svg width="1259" height="740" viewBox="0 0 1259 740" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1259 690C1259 717.614 1236.61 740 1209 740H50C22.3857 740 0 717.614 0 690V50C0 22.3858 22.3858 0 50 0H545C572.614 0 592.693 23.9033 605.27 48.4872C611.603 60.8647 620.345 68.5186 630 68.5186C639.655 68.5186 648.397 60.8647 654.73 48.4872C667.307 23.9033 687.386 0 715 0H1209C1236.61 0 1259 22.3858 1259 50V690Z" fill="url(#paint0_linear_1_9)"/>
+<defs>
+<linearGradient id="paint0_linear_1_9" x1="629.5" y1="0" x2="629.5" y2="740" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E4"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

landing/contact/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>تماس با مطبا | درخواست طراحی سایت پزشکی</title>
+<meta name="description" content="تماس با مطبا برای طراحی سایت پزشکی و درخواست مشاوره. پاسخگویی از طریق فرم و تلفن 08733730514.">
+<link rel="canonical" href="https://mataba.ir/contact/">
+<meta name="robots" content="index, follow">
+<meta property="og:type" content="website"><meta property="og:locale" content="fa_IR"><meta property="og:site_name" content="مطبا">
+<meta property="og:title" content="تماس با مطبا | درخواست طراحی سایت پزشکی"><meta property="og:description" content="تماس با مطبا برای طراحی سایت پزشکی و درخواست مشاوره. پاسخگویی از طریق فرم و تلفن 08733730514.">
+<meta property="og:url" content="https://mataba.ir/contact/"><meta property="og:image" content="https://mataba.ir/assets/images/contactUs.png">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="icon" href="../assets/images/navLogo.png" type="image/png">
+<link rel="preload" href="../assets/fonts/Modam-Bold.ttf" as="font" type="font/ttf" crossorigin>
+<link rel="stylesheet" href="../css/styles.css"><link rel="stylesheet" href="../css/responsive.css"><link rel="stylesheet" href="../css/utilities.css">
+<link rel="manifest" href="../manifest.webmanifest">
+<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://mataba.ir/contact/#page","url":"https://mataba.ir/contact/","name":"تماس با مطبا | درخواست طراحی سایت پزشکی","inLanguage":"fa-IR","isPartOf":{"@id":"https://mataba.ir/#site"}},{"@type":"BreadcrumbList","@id":"https://mataba.ir/contact/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"خانه","item":"https://mataba.ir/"},{"@type":"ListItem","position":2,"name":"تماس با مطبا","item":"https://mataba.ir/contact/"}]}]}</script>
+</head>
+<body>
+<a class="skip" href="#main">پرش به محتوا</a>
+<div class="wrap">
+<header class="site-header">
+  <button class="hamburger" id="hamburger" aria-expanded="false" aria-controls="mainNav" aria-label="باز کردن منو"><span class="bars" aria-hidden="true"><span></span><span></span><span></span></span><span>منو</span></button>
+  <a class="brand" href="../" aria-label="مطبا"><span class="logo-mark" aria-hidden="true"><span>م</span></span><span class="logo-text-wrap"><span class="logo-text">مطبا</span><span class="logo-sub">mataba.ir</span></span></a>
+  <nav class="nav" id="mainNav" aria-label="ناوبری اصلی">
+    <a class="nav-link" href="../#home">صفحه اصلی</a><a class="nav-link" href="../#samples">نمونه‌کارها</a><a class="nav-link" href="../#packages">پکیج‌ها</a><a class="nav-link" href="../#facilities">امکانات</a><a class="nav-link" href="../about/">درباره ما</a><a class="nav-link active" href="./">ارتباط با ما</a>
+  </nav>
+</header>
+<div class="drawer-backdrop" id="drawerBackdrop"></div>
+<nav class="breadcrumb" aria-label="مسیر"><a href="../">خانه</a> / ارتباط با ما</nav>
+<main id="main" class="contact-page">
+  <div class="side">
+    <h1>ارتباط با ما</h1>
+    <div class="info-list">
+      <div class="info-row"><span aria-hidden="true">📞</span><p>شماره تماس: <b class="ltr">08733730514</b></p></div>
+      <div class="info-row"><span aria-hidden="true">✉</span><p>ایمیل: <b class="ltr">info@mataba.ir</b></p></div>
+      <div class="info-row"><span aria-hidden="true">📍</span><p>آدرس ما: استان کردستان، شهر سنندج، شهرک بهاران، خیابان دانشجو، دانشگاه پیام‌نور، مرکز رشد، طبقه اول</p></div>
+    </div>
+    <img src="../assets/images/contactusPhone.png" alt="" width="280" height="200" loading="lazy" style="margin-top:20px">
+  </div>
+  <div class="dark-form"><h2>با ما در ارتباط باشید</h2>
+    <form id="contactFormPage" novalidate>
+      <label class="visually-hidden" for="cn">نام و نام خانوادگی</label><input id="cn" name="name" type="text" placeholder="*نام و نام خانوادگی" autocomplete="name">
+      <label class="visually-hidden" for="ce">آدرس ایمیل</label><input id="ce" name="email" type="email" placeholder="*آدرس ایمیل" autocomplete="email" class="ltr" dir="ltr">
+      <label class="visually-hidden" for="cs">موضوع</label><input id="cs" name="subject" type="text" placeholder="موضوع">
+      <label class="visually-hidden" for="cd">توضیحات</label><textarea id="cd" name="desc" placeholder="*توضیحات"></textarea>
+      <p class="ferr" role="alert"></p><p class="fok" role="status"></p>
+      <button class="btn btn-main" type="submit" style="align-self:flex-end;border-radius:12px"><span class="lbl">ارسال</span></button>
+    </form>
+  </div>
+</main>
+<footer class="site-footer"><div class="foot-panel"><span class="brand" style="gap:10px"><span class="logo-mark" style="width:38px;height:38px;border-radius:12px;font-size:18px"><span>م</span></span><span class="logo-text-wrap"><span class="logo-text" style="font-size:20px">مطبا</span><span class="logo-sub">mataba.ir</span></span></span><p class="foot-small">تمامی حقوق این وب‌سایت متعلق به «مطبا» است. <a href="../">mataba.ir</a></p></div></footer>
+</div>
+<script src="../js/main.js" defer></script>
+</body>
+</html>

landing/css/responsive.css

@@ -0,0 +1,88 @@
+/* utilities + responsive — ported responsive behavior of original */
+.container-narrow{width:90%;margin-inline:auto}
+@media (max-width:1100px){
+  .nav{gap:14px}
+  .hero-text h1{font-size:32px}
+  .brand-cta h2{font-size:34px}
+  .track .tcard{flex-basis:48%}
+}
+@media (max-width:900px){
+  .hamburger{display:inline-flex}
+  .nav{position:fixed;top:0;left:106%;height:100vh;width:39%;min-width:230px;background:#fff;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:14px;gap:26px;z-index:90;border-radius:16px 0 0 16px;transition:left .5s;box-shadow:-10px 0 40px rgba(0,0,0,.2)}
+  body.menu-open .nav{left:61%}
+  body.menu-open .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:80}
+  .btn-main{min-width:48px;width:48px;height:48px;border-radius:50%;padding:0}
+  .btn-main .lbl{display:none}
+  .hero{background:#9EB185 url('../assets/images/firsSecBg.png') no-repeat center/cover;border-radius:20px;min-height:0;padding:22px 16px 16px;gap:14px;align-items:flex-start}
+  .hero-star{display:none}
+  .hero-hand-mobile{display:block;align-self:flex-end;width:38%;max-width:180px}
+  .hero-text{width:60%}
+  .hero-text h1{font-size:22px;line-height:1.35}
+  .hero-text .kicker{font-size:12px;padding:6px 10px}
+  .hero-stats{flex-direction:row;width:100%;max-width:none;min-width:0;order:3;gap:8px}
+  .hero-stats .stat{flex:1}
+  .stat>div{padding:10px 4px}
+  .stat b{font-size:18px}
+  .stat span{font-size:10px}
+  .hero{flex-wrap:wrap}
+  .hero-under{flex-wrap:wrap;gap:12px;margin-top:12px}
+  .mini-cards{width:100%;flex-direction:row}
+  .mini-card h3{font-size:11px}
+  .hand{display:none}
+  .doctors-card{width:100%}
+  .steps{width:100%;gap:14px}
+  .steps::before{top:44px;right:12%;left:12%}
+  .step .ball{width:84px;height:84px}
+  .step h3{font-size:13px;max-width:140px}
+  .step p{font-size:11px}
+  .steps-bg{padding:24px 14px 28px}
+  .search-box,.domains{width:92%;max-width:none}
+  .sample-card{width:30%}
+  .fac-grid{grid-template-columns:repeat(3,1fr);gap:10px}
+  .fac{width:auto;margin-top:0;min-height:120px;padding:14px 8px}
+  .fac p{max-width:120px;font-size:12px}
+  .facilities{padding:24px 14px 20px;min-height:0;border-radius:20px}
+  .fac-head p{font-size:12px}
+  .brand-cta{height:170px;border-radius:12px}
+  .brand-cta h2{font-size:22px}
+  .brand-cta p{font-size:12px}
+  .packages{grid-template-columns:1fr;gap:18px}
+  .svc{width:100%;max-width:none;position:static}
+  .svc-panel{min-height:0}
+  .plan{width:100%;max-width:360px;margin-inline:auto}
+  .contact-sec,.contact-sec.has-bg{flex-direction:column;background:#9eb18538}
+  .contact-text,.form-card{width:100%;max-width:560px}
+  .track .tcard{flex-basis:88%}
+  .page-hero{flex-direction:column;gap:24px}
+  .page-hero .txt,.about-frame,.contact-page .side,.dark-form{width:100%;max-width:none}
+  .about-frame{min-height:0;padding-bottom:0}
+  .about-frame .main{position:static;width:100%;max-width:420px;margin:0 auto;right:auto;top:auto}
+  .contact-page{flex-direction:column;gap:20px;align-items:stretch}
+  .foot-panel .lead{width:100%}
+}
+@media (max-width:480px){
+  .hero{padding:18px 14px 12px;border-radius:16px}
+  .hero-text{width:58%}
+  .hero-text h1{font-size:19px}
+  .hero-text .kicker{font-size:11px;padding:5px 9px}
+  .btn-store{padding:10px 12px;font-size:13px;border-radius:12px}
+  .hero-hand-mobile{width:40%}
+  .hero-stats{gap:8px}
+  .stat>div{padding:10px 4px}
+  .stat b{font-size:18px}
+  .steps{grid-template-columns:1fr;gap:18px;max-width:320px}
+  .steps::before{display:none}
+  .step{flex-direction:row;justify-content:flex-start;text-align:right;gap:14px;background:#fff;border-radius:16px;padding:12px;box-shadow:0 10px 24px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04)}
+  .step .ball{width:72px;height:72px}
+  .step h3{font-size:14px}
+  .search-box{min-height:56px;padding:4px}
+  .search-go{width:46px;height:46px}
+  .domain{min-width:64px;padding:8px 12px;font-size:12px}
+  .fac-grid{grid-template-columns:repeat(2,1fr);gap:10px}
+  .fac{min-height:110px}
+}
+@media (prefers-reduced-motion:reduce){
+  html{scroll-behavior:auto}
+  .track{scroll-behavior:auto}
+  *{animation:none!important;transition:none!important}
+}

landing/css/styles.css

@@ -0,0 +1,266 @@
+/* Mataba static — ported from sabaHealth-develop app/globals.css + component styles */
+@font-face{font-family:modam;src:url('../assets/fonts/Modam-Regular.ttf');font-weight:500;font-display:swap}
+@font-face{font-family:modam;src:url('../assets/fonts/Modam-ExtraLight.ttf');font-weight:300;font-display:swap}
+@font-face{font-family:modam;src:url('../assets/fonts/Modam-Bold.ttf');font-weight:700;font-display:swap}
+@font-face{font-family:modam;src:url('../assets/fonts/Modam-ExtraBold.ttf');font-weight:900;font-display:swap}
+:root{
+  --green:#9EB185; --green-2:#9DB281; --dark:#425428; --deep:#014224;
+  --lime:#99CB35; --gray:#EDEDED; --line:#DFDFDF; --ink:#1d231a; --muted:#5b6656;
+  --radius:22px; --max:1500px;
+}
+*{box-sizing:border-box}
+html,body{height:100%;margin:0;padding:0}
+html{scroll-behavior:smooth}
+body{font-family:modam,system-ui,Tahoma,sans-serif;font-size:15px;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
+img{max-width:100%;height:auto;display:block}
+a{color:inherit}
+input,textarea,button{font-family:inherit}
+.wrap{width:100%;max-width:var(--max);min-width:320px;margin:0 auto;padding:0 2.5%;display:flex;flex-direction:column;align-items:center}
+.skip{position:absolute;right:-9999px;top:0;background:var(--deep);color:#fff;padding:8px 14px;z-index:200;border-radius:0 0 10px 10px}
+.skip:focus{right:8px}
+/* header */
+.site-header{width:90%;margin:20px 0;min-height:80px;display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative;z-index:60}
+.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;position:relative}
+.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;position:relative}
+.brand .logo-mark{width:46px;height:46px;border-radius:16px;background:#0f2e1a;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:22px;line-height:1;box-shadow:0 12px 28px rgba(1,66,36,.28), 0 0 0 2px rgba(153,203,53,.18);border:1.5px solid #99CB35;position:relative;overflow:hidden;flex:none;transform:rotate(-3deg)}
+.brand .logo-mark::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 20% 20%, rgba(153,203,53,.28) 0%, transparent 55%);pointer-events:none}
+.brand .logo-mark::after{content:"";position:absolute;top:6px;right:8px;width:8px;height:8px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 3px rgba(153,203,53,.22);border:1px solid #fff}
+.brand .logo-mark span{position:relative;z-index:1;transform:translateY(1px) rotate(3deg);letter-spacing:.5px}
+.brand .logo-text-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1}
+.brand .logo-text{font-family:modam, sans-serif;font-weight:900;font-size:27px;letter-spacing:-.2px;color:#0f2e1a;line-height:1;background:linear-gradient(180deg,#0f2e1a 0%,#2f5a2f 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
+.brand .logo-sub{font-family:modam, sans-serif;font-weight:800;font-size:10px;letter-spacing:1px;color:#5a7240;line-height:1;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
+.brand .logo-sub::before{content:"";width:18px;height:1.5px;background:var(--lime);border-radius:999px}
+.brand .logo-sub::after{content:"IR";font-size:7px;font-weight:900;color:#fff;background:var(--deep);padding:1px 4px;border-radius:4px;letter-spacing:.3px}
+.brand img{width:150px;height:auto}
+.nav{display:flex;gap:22px;align-items:center}
+.nav a.nav-link{color:#6b7280;text-decoration:none;font-size:15px;padding:6px 2px;white-space:nowrap}
+.nav a.nav-link:hover{color:#111}
+.nav a.nav-link.active{font-weight:700;color:#000;border-bottom:3px solid var(--green);border-bottom-left-radius:2px;border-bottom-right-radius:2px}
+.header-actions{display:flex;align-items:center;gap:12px}
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-weight:700}
+.btn-main{background:var(--green);color:#fff;min-width:128px;height:44px;border-radius:12px;padding:0 18px;font-size:15px}
+.btn-icon{background:#D9D9D980;border:0;width:44px;height:44px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
+.btn-dark{background:var(--dark);color:#fff;padding:0 22px;height:40px;border-radius:12px;position:relative}
+.btn-white{background:#fff;color:var(--deep);padding:12px 22px;border-radius:12px;font-weight:700}
+.btn-store{background:#33421eb8;color:#fff;padding:12px 14px;border-radius:12px;font-size:15px;display:inline-flex;gap:8px;align-items:center}
+.btn-outline{border:4px solid var(--green);color:#515b44;border-radius:12px;padding:8px 18px;font-weight:900;background:#fff}
+.btn-form{background:var(--green);color:#fff;min-width:140px;height:44px;border-radius:12px;padding:0 18px}
+.hamburger{display:none;background:none;border:0;cursor:pointer;align-items:center;gap:8px;font-size:14px}
+.hamburger .bars{display:flex;flex-direction:column;gap:5px}
+.hamburger .bars span{display:block;height:7px;border-radius:8px}
+.hamburger .bars span:nth-child(1),.hamburger .bars span:nth-child(3){width:40px;background:#5B6E42}
+.hamburger .bars span:nth-child(2){width:20px;background:var(--green)}
+.drawer-backdrop{display:none}
+:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
+/* gradient underlines (from globals.css) */
+.btmBorder,.treeStep,.searchAfter,.facilityAfter,.SampleAfter,.DoctorCmH{position:relative}
+.btmBorder::after{content:"";position:absolute;right:50%;transform:translateX(50%) translateY(100%);display:block;width:7em;height:2px;background:linear-gradient(90deg,#99CB3500,#99CB35,#99CB3500)}
+.treeStep::after{content:"";position:absolute;right:50%;transform:translateX(50%) translateY(100%);display:block;width:8em;margin-top:.5%;height:2px;background:linear-gradient(90deg,#99CB3500,#99CB35,#99CB3500)}
+.searchAfter::after{content:"";position:absolute;right:50%;transform:translateX(50%) translateY(100%);display:block;width:10em;height:2px;background:linear-gradient(90deg,#99CB3500,#99CB35,#99CB3500)}
+.facilityAfter::after{content:"";position:absolute;right:8%;display:block;width:5em;height:2px;background:linear-gradient(90deg,#99CB3500,#99CB35,#99CB3500)}
+.SampleAfter::after{content:"";position:absolute;right:50%;transform:translateX(50%);display:block;width:11em;height:2px;background:linear-gradient(90deg,#99CB3500,#99CB35,#99CB3500)}
+.DoctorCmH::after{content:"";position:absolute;display:block;width:11rem;height:2px;background:linear-gradient(90deg,#99CB3500,#99CB35,#99CB3500)}
+/* hero — polished */
+.hero-wrap{width:95%;display:flex;flex-direction:column;align-items:center}
+.hero{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:38px 36px 28px;border-radius:24px;background:#9EB185 url('../assets/images/firsSecBg.png') no-repeat center/cover;min-height:480px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(1,66,36,.18);border:1px solid rgba(255,255,255,.18)}
+.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(1,66,36,.14) 0%, rgba(1,66,36,0) 60%);pointer-events:none}
+.hero-text{width:46%;max-width:520px;color:#fff;display:flex;flex-direction:column;gap:14px;align-items:flex-start;position:relative;z-index:1;padding-top:6px}
+.hero-text .kicker{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;letter-spacing:.15px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(10px);padding:6px 12px;border-radius:999px;line-height:1}
+.hero-text h1{font-size:clamp(30px,3vw,42px);line-height:1.28;margin:0;font-weight:900;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.16);letter-spacing:.1px}
+.hero-seo{margin:4px 0 0;font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.96);background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(8px);padding:7px 12px;border-radius:999px;max-width:100%;letter-spacing:.15px;font-weight:500;display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
+.hero-seo::before{content:"✦";font-size:10px;color:rgba(255,255,255,.9);margin-inline-end:4px}
+.btn-store{background:#33421e;border:1px solid rgba(255,255,255,.18);color:#fff;padding:13px 18px;border-radius:14px;font-size:15px;font-weight:800;display:inline-flex;gap:10px;align-items:center;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .2s, box-shadow .2s, background .2s}
+.btn-store:hover{transform:translateY(-1px);background:#2f3d1c;box-shadow:0 14px 32px rgba(0,0,0,.22)}
+.btn-store:active{transform:translateY(0)}
+.hero-star{width:22%;max-width:220px;aspect-ratio:1;min-height:0;background:url('../assets/images/star.png') no-repeat center/contain;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;filter:drop-shadow(0 12px 28px rgba(0,0,0,.22));position:relative;z-index:1;animation:floatStar 6s ease-in-out infinite}
+.hero-star>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px}
+.hero-star b{font-size:32px;line-height:1;font-weight:900;display:block;letter-spacing:.2px}
+.hero-star span{font-size:13px;line-height:1.4;opacity:.95}
+@keyframes floatStar{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
+.hero-stats{width:32%;max-width:360px;min-width:280px;display:flex;flex-direction:row;gap:10px;align-items:stretch;position:relative;z-index:1;align-self:center;margin-inline-start:auto}
+.stat{flex:1;min-width:0;padding:1.2px;border-radius:16px;background:linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.10), rgba(1,66,36,.36));box-shadow:0 12px 28px rgba(0,0,0,.16);transition:transform .2s, box-shadow .2s;overflow:hidden}
+.stat:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.20)}
+.stat>div{background:linear-gradient(180deg, rgba(146,165,120,.96) 0%, rgba(124,147,98,.94) 100%);backdrop-filter:blur(16px);border-radius:15px;width:100%;padding:14px 6px;text-align:center;color:#fff;border:1px solid rgba(255,255,255,.26);position:relative}
+.stat b{font-size:26px;font-weight:900;display:block;line-height:1;letter-spacing:.2px;text-shadow:0 1px 10px rgba(0,0,0,.12)}
+.stat span{font-size:11.5px;opacity:.96;letter-spacing:.15px;font-weight:600}
+.hero-hand-mobile{display:none;width:30%;filter:drop-shadow(0 16px 32px rgba(0,0,0,.22))}
+.hero-under{width:100%;display:flex;justify-content:space-between;align-items:flex-end;margin-top:-26px;position:relative;z-index:2}
+.mini-cards{width:28%;display:flex;flex-direction:column;gap:10px}
+.mini-card{background:#fff;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.18);display:flex;gap:8px;align-items:center;padding:10px;min-height:74px}
+.mini-card .ic{background:#9DB2814D;border-radius:12px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;flex:none}
+.mini-card h3{margin:0;font-size:16px}
+.mini-card p{margin:2px 0 0;font-size:13px;color:var(--muted)}
+.hand{width:44%;display:flex;justify-content:flex-end}
+.hand img{max-width:420px;width:100%}
+.doctors-card{width:32%;background:#E5E5E5;border-radius:16px;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:10px}
+.avatars{display:flex}
+.avatars img{width:64px;height:64px;border-radius:50%;border:4px solid #fff;object-fit:cover;margin-inline-start:-14px}
+.doctors-card h3{margin:0;font-size:34px}
+.doctors-card p{margin:0;color:var(--muted)}
+/* call strips — 3 unique, balanced spacing */
+.call-strip{width:100%;max-width:860px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:20px;padding:16px 20px;box-shadow:0 16px 36px rgba(45,62,28,.14);border:1px solid rgba(255,255,255,.16);position:relative;overflow:hidden}
+.call-strip p{margin:0;font-size:14px;font-weight:600;line-height:1.6;display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
+.call-strip p::before{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:16px;flex:none}
+.call-strip p a{font-weight:800;letter-spacing:.2px;text-decoration:none;padding-bottom:1px}
+.call-strip .btn-call{padding:10px 18px;border-radius:999px;font-weight:800;font-size:13px;white-space:nowrap;box-shadow:0 8px 18px rgba(0,0,0,.12);transition:transform .18s, box-shadow .18s;position:relative;z-index:1;border:1px solid rgba(0,0,0,.04)}
+.call-strip .btn-call:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.16)}
+.call-strip--hero{margin:24px auto 8px;background:linear-gradient(135deg,#425428 0%,#6b8a52 100%);color:#fff;border:1px solid rgba(255,255,255,.16)}
+.call-strip--hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 60%);pointer-events:none}
+.call-strip--hero p::before{content:"📞";background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:#fff}
+.call-strip--hero p a{color:#fff;border-bottom:1px dashed rgba(255,255,255,.6)}
+.call-strip--hero .btn-call{background:#fff;color:var(--deep)}
+.call-strip--samples{margin:20px auto 28px;background:#f8faf6;color:var(--ink);border:1px solid #e6ece1;box-shadow:0 12px 28px rgba(0,0,0,.06)}
+.call-strip--samples p::before{content:"✦";background:#eef3e8;border:1px solid #d6e4cc;color:var(--deep)}
+.call-strip--samples p a{color:var(--deep);border-bottom:1px dashed #a8c19a}
+.call-strip--samples .btn-call{background:var(--deep);color:#fff}
+.call-strip--packages{margin:28px auto 8px;background:linear-gradient(135deg,#1a2e1a 0%,#2f4a2f 100%);color:#e8f0e0;border:1px solid rgba(255,255,255,.10)}
+.call-strip--packages p::before{content:"✓";background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff}
+.call-strip--packages p a{color:#e8f0e0;border-bottom:1px dashed rgba(255,255,255,.5)}
+.call-strip--packages .btn-call{background:var(--lime);color:#1a2e1a}
+@media (max-width:640px){.call-strip{flex-direction:column;text-align:center;padding:14px 16px;gap:12px}.call-strip p{justify-content:center}}
+/* section generic */
+.section{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
+.eyebrow{color:var(--muted);margin:0}
+.h2{font-size:30px;margin:14px 0 30px;font-weight:700}
+/* steps/search — fixed layout */
+.toDown{width:44px;padding:26px 0 8px;border-radius:20px;background:linear-gradient(to bottom,#fff,#0142243a,#014224a8);display:flex;justify-content:center;margin:18px auto 0;box-shadow:0 8px 20px rgba(1,66,36,.12)}
+.steps-bg{width:100%;background:url('../assets/images/treStepBg.svg') no-repeat top center;background-size:cover;padding:32px 20px 36px;border-radius:24px;position:relative;overflow:hidden}
+.steps-bg .eyebrow{font-size:14px;letter-spacing:.2px;background:rgba(255,255,255,.9);display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin:0 auto}
+.steps-bg .h2{max-width:560px;margin-inline:auto}
+.steps{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;max-width:900px;margin:28px auto 0;position:relative;align-items:start}
+.steps::before{content:"";position:absolute;top:58px;right:16%;left:16%;height:2px;background:repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 14px);opacity:.35;pointer-events:none}
+.step{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;position:relative;z-index:1;min-width:0}
+.step .ball{width:110px;height:110px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(0,0,0,.10);border:1px solid rgba(0,0,0,.04);flex:none}
+.step p{margin:0;font-size:13px;color:var(--muted);letter-spacing:.1px}
+.step h3{margin:0;font-size:16px;font-weight:800;line-height:1.4;max-width:200px}
+.search-box{background:var(--gray);width:100%;max-width:720px;min-height:62px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 14px;margin:48px auto 0;gap:10px;box-shadow:0 12px 32px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04)}
+.search-box input{border:0;background:transparent;outline:0;width:100%;font-size:16px;padding:12px;color:var(--ink)}
+.search-box input::placeholder{color:#9aa3a0}
+.search-go{width:52px;height:50px;background:var(--green-2);border:0;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .15s, filter .15s}
+.search-go:hover{transform:translateY(-1px);filter:brightness(1.05)}
+.domains{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:720px;margin:18px auto 0;padding:0 10px}
+.domain{background:#E7EBE1;border:1px solid rgba(0,0,0,.04);border-radius:999px;min-width:72px;padding:9px 14px;cursor:pointer;font-size:13px;font-weight:600;transition:transform .15s, background .15s}
+.domain:hover{background:#dde5d6;transform:translateY(-1px)}
+/* samples */
+.cards{display:flex;width:100%;justify-content:space-evenly;flex-wrap:wrap;gap:14px}
+.sample-card{width:23%;background:url('../assets/images/card.svg') no-repeat center/contain;padding:14px 10px 18px;display:flex;flex-direction:column;align-items:center}
+.stars{display:flex;gap:6px;align-items:center;justify-content:center}
+.sample-card h3{color:var(--deep);margin:10px 0;font-size:18px}
+.sample-img{position:relative;width:90%;aspect-ratio:3/4;border-radius:10px;overflow:hidden}
+.sample-img img{width:100%;height:100%;object-fit:cover}
+.sample-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#9db2811c,#9db2813a,#9DB281)}
+.sample-view{position:relative;bottom:16px;z-index:2;background:#fff;border:0;border-radius:10px;padding:6px 12px;display:inline-flex;gap:8px;align-items:center;cursor:pointer}
+/* facilities — polished, no overlap */
+.facilities{width:100%;min-height:380px;background:#425428 url('../assets/images/facilitiesBg.svg') no-repeat center/cover;display:flex;flex-direction:column;justify-content:center;position:relative;margin:48px 0;border-radius:24px;overflow:hidden;padding:40px 28px 32px;box-shadow:0 20px 60px rgba(1,66,36,.14)}
+.facilities::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(1,66,36,.18) 100%);pointer-events:none}
+.fac-circle{position:absolute;left:-40px;top:-40px;width:280px;opacity:.18;pointer-events:none;filter:blur(1px)}
+.fac-head{color:#fff;text-align:right;position:relative;z-index:1;padding:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
+.fac-head p{margin:0;font-size:14px;letter-spacing:.2px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px;display:inline-flex}
+.fac-head h2{margin:0;font-size:clamp(22px,2.4vw,32px);font-weight:900;line-height:1.25;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.18)}
+.fac-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:stretch;margin-top:36px;position:relative;z-index:1}
+.fac{background:linear-gradient(180deg,#ffffff 0%,#fbfcfa 100%);border-radius:22px;box-shadow:0 14px 32px rgba(0,0,0,.12);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:20px 12px 16px;font-size:14px;text-align:center;border:1px solid rgba(0,0,0,.05);transition:transform .2s, box-shadow .2s, border-color .2s;min-height:148px;position:relative;overflow:hidden}
+.fac::before{content:"";position:absolute;top:0;left:12%;right:12%;height:3px;background:linear-gradient(90deg, transparent, var(--lime) 50%, transparent);opacity:.9}
+.fac:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.16);border-color:rgba(153,203,53,.28)}
+.fac span[aria-hidden="true"]{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#9DB281 0%,#7a9a62 100%);color:#fff;border-radius:14px;font-size:18px;font-weight:900;flex:none;box-shadow:0 8px 18px rgba(77,104,58,.22);border:1px solid rgba(255,255,255,.6)}
+.fac p{margin:0;line-height:1.6;font-weight:700;font-size:13px;max-width:140px;color:#1d231a}
+/* brand cta */
+.brand-cta{width:100%;height:400px;border-radius:24px;background:url('../assets/images/personalsection.png') center/cover no-repeat;position:relative;overflow:hidden;margin:48px 0}
+.brand-cta .overlay{position:absolute;inset:0;background:linear-gradient(to right,#b8c4a640,#425428);display:flex;align-items:center;justify-content:space-between;padding:0 5%;color:#fff;gap:16px}
+.brand-cta h2{font-size:46px;margin:0 0 10px;font-weight:900;line-height:1.4}
+.brand-cta p{margin:0;font-size:19px}
+/* packages — clean grid, aligned rows */
+.packages{display:grid;grid-template-columns:320px repeat(3, 1fr);gap:16px;width:100%;align-items:start}
+.svc{text-align:right;position:sticky;top:20px}
+.svc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}
+.svc-head h3{margin:0;font-size:16px;font-weight:800}
+.svc-panel{background:linear-gradient(180deg,#6f7f5c 0%,#8ea47e 55%,#9DB281 100%);border-radius:22px;color:#fff;padding:22px 18px;min-height:520px;box-shadow:0 16px 40px rgba(66,84,40,.18);border:1px solid rgba(255,255,255,.14)}
+.svc-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;font-size:13px}
+.svc-panel li{display:flex;align-items:center;gap:10px;padding:0 10px;height:44px;border-bottom:1px solid rgba(255,255,255,.14);line-height:1.4}
+.svc-panel li:last-child{border-bottom:0}
+.svc-panel li::before{content:"•";color:rgba(255,255,255,.85);font-weight:900}
+.plan{background:#fff;border-radius:22px;box-shadow:0 16px 36px rgba(0,0,0,.10);padding:20px 14px 56px;position:relative;display:flex;flex-direction:column;align-items:stretch;border:1px solid rgba(0,0,0,.06);transition:transform .18s, box-shadow .18s, border-color .18s}
+.plan:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(0,0,0,.14);border-color:#d6e4cc}
+.plan .top{border-bottom:1px solid rgba(0,0,0,.08);padding-bottom:14px;margin-bottom:8px;text-align:center}
+.plan .top p{margin:0}
+.plan .top b{font-size:15px}
+.plan .price{font-weight:900;font-size:18px;margin:6px 0 2px}
+.plan .per{font-size:12px;color:#6b7a6e}
+.plan .rows{display:flex;flex-direction:column;gap:0;align-items:stretch;min-height:0}
+.plan .rows span{display:flex;align-items:center;justify-content:center;height:44px;border-bottom:1px solid rgba(0,0,0,.04);font-size:16px}
+.plan .rows span:last-child{border-bottom:0}
+.plan .rows span:nth-child(9){color:#c0392b}
+.plan .btn-dark{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;box-shadow:0 10px 20px rgba(66,84,40,.18)}
+/* contact */
+.contact-sec{width:100%;background:#9eb18538;border-radius:16px;display:flex;justify-content:space-between;align-items:center;padding:14px;margin:28px 0;gap:16px}
+.contact-sec.has-bg{background:#fff url('../assets/images/contactUs.png') no-repeat center/contain}
+.contact-text{width:42%;text-align:right;padding:34px}
+.contact-text h2{font-size:30px;margin:0 0 10px}
+.social{display:flex;gap:10px;margin-top:16px}
+.social a{background:#fff;border-radius:50%;padding:8px;box-shadow:0 10px 20px rgba(0,0,0,.15);display:inline-flex}
+.form-card{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.2);padding:22px;width:480px;max-width:46%}
+.form-card h2{font-size:26px;margin:6px 0 14px}
+.form-card .sub{color:var(--muted)}
+.form-card form{display:flex;flex-direction:column;gap:12px}
+.frow{display:flex;gap:10px}
+.frow input,.form-card textarea{border:2px solid var(--line);border-radius:14px;padding:10px;width:100%;font-size:14px}
+.form-card textarea{min-height:150px;resize:vertical}
+.ferr{color:#c0392b;font-size:13px;min-height:18px;margin:0;text-align:right}
+.fok{color:#1e7e34;font-size:13px;min-height:18px;margin:0}
+/* testimonials — clean, airy */
+.voices{width:100%;text-align:right;margin:48px 0 10px;position:relative}
+.voices .eyebrow{display:inline-flex;background:rgba(158,177,133,.14);border:1px solid rgba(158,177,133,.22);color:var(--muted);padding:6px 12px;border-radius:999px;font-size:12px;letter-spacing:.1px}
+.voices h2{font-size:clamp(22px,2.2vw,30px);font-weight:900;line-height:1.3;margin:12px 0 0;text-wrap:balance}
+.carousel{position:relative;width:100%;margin:28px 0 52px;padding-top:8px}
+.car-nav{position:absolute;top:-4px;left:4px;display:flex;gap:10px;z-index:2}
+.car-nav button{background:#fff;border:1px solid var(--line);border-radius:50%;width:42px;height:42px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.08);font-size:18px;line-height:1;color:#1d231a;transition:transform .15s, box-shadow .15s, border-color .15s}
+.car-nav button:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.12);border-color:#cbd5c2}
+.track{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:48px 2px 10px;scrollbar-width:none}
+.track::-webkit-scrollbar{display:none}
+.tcard{flex:0 0 32%;background:#fff;border-radius:22px;box-shadow:0 16px 40px rgba(0,0,0,.10);padding:22px 18px 18px;min-height:240px;text-align:center;border:1px solid rgba(0,0,0,.04);position:relative;transition:transform .18s, box-shadow .18s}
+.tcard:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(0,0,0,.14)}
+.tcard::before{content:"“";position:absolute;top:10px;right:18px;font-size:64px;line-height:1;color:rgba(158,177,133,.18);font-weight:900;pointer-events:none}
+.tcard blockquote{margin:10px 0 24px;font-size:15px;line-height:1.9;min-height:84px;color:#1d231a;font-weight:500}
+.tperson{position:relative;padding-top:8px}
+.tperson img{width:84px;height:84px;border-radius:50%;object-fit:cover;margin:-62px auto 10px;display:block;border:4px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.14)}
+.tperson b{display:block;font-size:15px;font-weight:800;line-height:1.4}
+.tperson span{display:block;color:var(--muted);font-size:12px;line-height:1.6}
+.trate{color:#AC970B;letter-spacing:1px;font-size:14px;gap:2px;margin-top:6px;display:flex;justify-content:center}
+/* footer — polished, frame preserved */
+.site-footer{width:90%;max-width:var(--max);margin:36px 0 24px}
+.foot-panel{background:var(--green-2);border-radius:28px;padding:32px 24px 22px;display:flex;flex-direction:column;align-items:center;gap:18px;color:rgba(0,0,0,.62);text-align:center;box-shadow:0 20px 60px rgba(66,84,40,.12);border:1px solid rgba(255,255,255,.22);position:relative;overflow:hidden}
+.foot-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%);pointer-events:none}
+.foot-panel img{position:relative;z-index:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.12))}
+.foot-panel .lead{width:80%;max-width:760px;color:rgba(0,0,0,.62);line-height:2.15;font-size:15px;font-weight:500;position:relative;z-index:1;margin:0;text-wrap:balance}
+.foot-panel .social{position:relative;z-index:1;gap:12px;margin-top:4px}
+.foot-panel .social a{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:50%;width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 20px rgba(0,0,0,.12);transition:transform .18s, box-shadow .18s, border-color .18s}
+.foot-panel .social a:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.16);border-color:rgba(0,0,0,.10)}
+.foot-panel .social a img{width:22px;height:22px;filter:none}
+.foot-small{border-top:1px solid rgba(0,0,0,.14);padding-top:16px;width:min(92%, 880px);font-size:13px;line-height:1.9;color:rgba(0,0,0,.60);font-weight:500;position:relative;z-index:1;margin:6px 0 0;text-wrap:balance}
+.foot-panel nav{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;font-size:13px;color:rgba(0,0,0,.62)}
+.foot-panel nav a{color:rgba(0,0,0,.68);text-decoration:none;padding:4px 6px;border-radius:8px;transition:background .15s, color .15s}
+.foot-panel nav a:hover{background:rgba(255,255,255,.55);color:#1a1a1a}
+/* modal */
+.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
+.modal-back.open{display:flex}
+.modal{background:#fff;border-radius:16px;width:420px;max-width:94vw;padding:22px;position:relative;text-align:center}
+.modal h2{font-size:22px;margin:0 0 6px}
+.modal .x{position:absolute;top:10px;right:10px;background:none;border:0;cursor:pointer;font-size:20px}
+.modal input[type=tel]{height:44px;border-radius:12px;width:100%;border:2px solid var(--green);outline:0;padding:8px;font-size:17px;direction:ltr;text-align:left}
+.modal label{display:flex;align-items:center;gap:6px;color:#949494;width:100%;justify-content:flex-start}
+/* pages — balanced */
+.page-hero{width:90%;margin:30px 0;display:flex;gap:6%;align-items:center;justify-content:space-between}
+.page-hero .txt{width:54%;min-width:0}
+.page-hero h1{font-size:36px;margin:0 0 12px;line-height:1.3}
+.page-hero p.lead{font-size:17px;line-height:2.05;text-align:justify;color:var(--ink)}
+.about-frame{width:38%;position:relative;min-height:460px;display:flex;flex-direction:column;align-items:center}
+.about-frame .main{width:78%;border-radius:12px;position:absolute;top:6%;right:11%;box-shadow:0 16px 40px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.04)}
+.info-list{display:flex;flex-direction:column;gap:22px;margin-top:28px}
+.info-row{display:flex;gap:12px;align-items:flex-start;font-size:19px}
+.contact-page{display:flex;width:90%;margin:34px 0;gap:32px;align-items:flex-start;position:relative}
+.contact-page .side{width:52%;min-width:0}
+.dark-form{background:rgba(66,84,40,.88);color:#fff;border-radius:24px;padding:24px;width:42%;max-width:480px;box-shadow:0 20px 50px rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.12)}
+.dark-form input,.dark-form textarea{background:#fff;border:0;border-radius:12px;padding:12px;width:100%;font-size:15px;color:#333}
+.dark-form form{display:flex;flex-direction:column;gap:12px}
+.note{background:#fef9e7;border:1px solid #f5d547;border-radius:12px;padding:12px 14px;font-size:14px;line-height:2;color:#5b4c00}
+.breadcrumb{width:90%;font-size:13px;color:var(--muted);margin-top:14px}
+.breadcrumb a{text-decoration:none}

landing/css/utilities.css

@@ -0,0 +1,5 @@
+/* small utilities */
+.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.ltr{direction:ltr;unicode-bidi:embed}
+.center{text-align:center}
+.mt-2{margin-top:8px}.mt-4{margin-top:16px}

landing/docs/component-migration-map.md

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

landing/docs/production-verification-checklist.md

@@ -0,0 +1,91 @@
+# Mataba — Production Verification Checklist (مطبا)
+> دامنه تولید: `https://mataba.ir` — مبدأ: `C:\Users\hemn\Desktop\landing` (استخراج از `sabaHealth-develop`)
+> وضعیت: **هیچ‌کدام از موارد زیر بدون تایید صریح کارفرما به‌عنوان واقعیت منتشر نشود.** محتوای flagged در سایت با `note`/`TODO` مشخص شده است.
+
+## 1. ادعاهای عددی — نیازمند تایید
+| محل | متن فعلی | منبع اصلی | ریسک |
+|---|---|---|---|
+| `index.html:67` | `+۱,۲۰۰` سایت پزشکان | `core/constants/global.ts#greeBoxDetail:1` | آمار مطبا تایید نشده |
+| `index.html:68` | `٪۹۸` رضایت | `greeBoxDetail:2` | درصد جعلی اگر تایید نشود |
+| `index.html:69` | `۷-۱۰` دقیقه تحویل | `greeBoxDetail:3` | تناقض با `تحویل کمتر از ۵ روز` |
+| `index.html:81` | `تحویل کمتر از ۵ روز` | `FirstSectionwhiteBoxes:3` | |
+| `index.html:72` | `۱۰ سال سابقه در زمینه پزشکی` | `StarTemplateGreenBox` | `aria-label` hero-star |
+| `index.html:86` | `+۸۰۰ همکاری با پزشکان` | `FirstSectionDrPhotos` | تکرار در `about:37` `+۸۰۰ بررسی‌کنندگان` |
+| `about/index.html:37` | `+۸۰۰ بررسی‌کنندگان` | AboutUsImage fallback | |
+
+**اقدام:** اعداد را حذف یا با ارقام حسابرسی‌شده مطبا جایگزین کنید؛ در غیر این صورت بخش `hero-stats`/`doctors-card` را موقتاً hidden کنید.
+
+## 2. قیمت و پکیج‌ها — تایید نشده
+| محل | مقدار |
+|---|---|
+| `index.html:152` | `ServicesDetail` — ۱۰ سرویس: لوگو، سایت واکنش‌گرا، دامنه/هاست رایگان، پنل، درگاه، نوبت‌دهی، سئو پایه، پشتیبانی، وبلاگ (✘)، واتساپ/اینستاگرام |
+| `index.html:156-158` | `BasePlan`×۳ — عنوان `پلن پایه` ، قیمت `۱۱۳,۵۴۶,۰۰۰ /ماهانه` ، `شامل ۹ گزینه` ، ردیف ✔/✘ |
+
+هر سه پلن یکسان و قیمت یکسان است — در ریپوی اصلی نیز تکراری بود. قبل از انتشار قیمت، ارز، دوره (ماهانه/سالانه) و تفاوت پلن‌ها را تایید کنید. فعلاً `index.html:149` با `.note` flagged است.
+
+## 3. نظرات پزشکان — تکراری
+| محل | محتوا |
+|---|---|
+| `index.html:185` | `دکتر مریم صادقی — دندان‌پزشک زیبایی — «طراحی سایت... هویت برندم حفظ شد.» — dcm1.jpg` |
+| `index.html:186` | `دکتر رضا قنبری — متخصص پوست و مو — «بیماران راحت‌تر... نوبت‌گیری ساده.» — dcm2.jpg` |
+| `index.html:187` | `دکتر نرگس مرادی — فیزیوتراپیست — «پنل ساده... پشتیبانی سریع.» — dcm3.jpg` |
+| منبع | `core/constants/global.ts#DoctorComments:1-7` — ۷ مورد با ۵ تکرار یک متن + یک `test` |
+
+`index.html:182` flagged `نظرات زیر تکراری است`. با نظرات واقعی دارای رضایت‌نامه جایگزین کنید؛ در غیر این صورت بخش `voices` را غیرفعال کنید. از JSON-LD `Review/AggregateRating` استفاده نشده (درست).
+
+## 4. درباره ما — placeholder
+| محل | وضعیت |
+|---|---|
+| `about/index.html:42` | `مطبا پلتفرمی برای ساده‌تر کردن حضور آنلاین پزشکان...` — خلاصه موقت |
+| `about/index.html:43` | `.note` صریح: لورم سابق (`aboutus/page.tsx:15`) عمداً ساخته نشده، تاریخچه/تیم/مجوزها پس از متن تاییدشده جایگزین شود |
+| تصویر | `about/index.html:34` `person.jpg` موقت — اصلی `images/3.png` در `public/` وجود نداشت |
+
+## 5. اطلاعات تماس — نیازمند تایید کامل
+| فیلد | مقدار فعلی | فایل | یادداشت |
+|---|---|---|---|
+| تلفن | `08733212565` (ltr) | `contact/index.html:37` | از `contactUs:1` — آیا شماره مطبا است؟ |
+| ایمیل | `www.sabahealth.ir` (دامنه قدیمی) | `contact/index.html:38` | **برند قدیمی** — با `info@mataba.ir` یا رسمی جایگزین شود |
+| آدرس | `استان کردستان، سنندج، شهرک بهاران، خیابان دانشجو، دانشگاه پیام‌نور، مرکز رشد، طبقه اول` | `contact/index.html:39` | از `contactUs:3` — تایید مالکیت/اجاره |
+| مدیریت | `آقای آرش صادقی` | `contact/index.html:40` | از `contactUs:4` — عنوان دقیق؟ |
+| متن هشدار | `اطلاعات زیر نیازمند تایید است` | `contact/index.html:35 .note` | تا تایید، از ایندکس عمومی جلوگیری کنید یا صفحه را `noindex` کنید |
+
+## 6. دارایی برند — لوگو
+| فایل | وضعیت |
+|---|---|
+| `assets/images/navLogo.png` (3.4KB) | درمان بصری قدیمی، جایگزین با لوگوی مطبا لازم (SVG ترجیحاً) |
+| `assets/images/FooterLogo.png` (3.8KB) | همان — `alt="مطبا"` حفظ شده |
+| `manifest.webmanifest:1` `icons[0].src=assets/images/navLogo.png sizes 150x60` | پس از تعویض لوگو، `sizes` را به `192x192`/`512x512` مربعی به‌روز کنید |
+
+## 7. شبکه‌های اجتماعی — فاقد URL واقعی
+| محل | href فعلی |
+|---|---|
+| `index.html:165` ۳ آیکون (insta/telegram/whatsap) | `href="#"` + `aria-label="اینستاگرام مطبا"` |
+| `index.html:196` فوتر ۳ آیکون | `href="#"` |
+
+هیچ پروفایلی جعل نشده — پس از دریافت handle رسمی جایگزین کنید، در غیر این صورت `href` را حذف و `aria-disabled` بگذارید.
+
+## 8. فرم‌ها — بدون بک‌اند (demo-only)
+| فرم | id | اعتبارسنجی کلاینت | پیام فعلی |
+|---|---|---|---|
+| لندینگ | `leadForm` `index.html:168` | `name` required, `mobile ^09\d{9}$`, `textarea` required | `درخواست شما اعتبارسنجی شد. ارسال نهایی نیازمند اتصال بک‌اند است` `js/main.js:96` |
+| تماس | `contactFormPage` `contact/index.html:45` | همان + `email type=email` | همان + `فرم فعلاً به بک‌اند متصل نیست` `contact:53` |
+| ورود | `loginForm` `index.html:205` | `^09\d{9}$` + `aria-invalid` | `در نسخه نمایشی، پیامکی ارسال نمی‌شود` `js/main.js:44` |
+| دامنه | `domainForm` `index.html:102` | required | `به ثبت‌کننده دامنه متصل نیست` `js/main.js:71` |
+
+هیچ `action`/`POST` جعلی وجود ندارد — برای پروداکشن endpoint واقعی + CSRF + rate-limit + پیام موفقیت واقعی لازم است.
+
+## 9. چک سئو قبل از انتشار
+- [ ] تایید canonical: `https://mataba.ir/` `/about/` `/contact/` (هم‌اکنون درست `index.html:8`)
+- [ ] تایید `sitemap.xml` فقط ۳ URL کنونیکال (درست `sitemap.xml:3`)
+- [ ] `robots.txt` `Allow: /assets/ /css/ /js/` و `Sitemap:` (درست `robots.txt:3`)
+- [ ] عنوان/توضیحات منحصربه‌فرد هر صفحه (درست — title 73/28/33 کاراکتر)
+- [ ] لوگوی جدید ۱۲۰۰×۶۳۰ برای `og:image` (`personalsection.png` فعلی ۱۲۰۶KB — بهینه‌سازی توصیه)
+
+## 10. تایید نهایی کارفرما
+- [ ] اعداد/قیمت/نظرات یا حذف موقت بخش‌های flagged
+- [ ] متن نهایی `about`
+- [ ] اطلاعات تماس رسمی (تلفن/ایمیل mataba.ir/آدرس/مدیریت)
+- [ ] لوگو + favicon مربعی + `og:image` بهینه
+- [ ] URL شبکه‌های اجتماعی + endpoint فرم‌ها
+
+> تا زمان تیک همه موارد، سایت را روی دامنه اصلی با `noindex` یا Basic Auth نگه دارید؛ لاگ `note`های زرد (`index.html:149,182` `contact:35` `about:43`) نشانگر محل‌های نیازمند تایید است.

landing/index.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>مطبا | طراحی سایت پزشکان و کلینیک با نوبت‌دهی آنلاین</title>
+<meta name="description" content="مطبا طراحی سایت اختصاصی پزشکان، دندانپزشکی و زیبایی با پنل نوبت‌دهی آنلاین، نمونه‌کار حرفه‌ای و سئو پایه. مشاوره: 08733730514">
+<link rel="canonical" href="https://mataba.ir/">
+<meta name="robots" content="index, follow">
+<meta property="og:type" content="website">
+<meta property="og:locale" content="fa_IR">
+<meta property="og:site_name" content="مطبا">
+<meta property="og:title" content="مطبا | طراحی سایت پزشکان و کلینیک با نوبت‌دهی آنلاین">
+<meta property="og:description" content="طراحی سایت پزشکی واکنش‌گرا برای پزشکان با معرفی تخصص، نوبت‌دهی آنلاین، گالری نمونه‌کار و سئو پایه.">
+<meta property="og:url" content="https://mataba.ir/">
+<meta property="og:image" content="https://mataba.ir/assets/images/personalsection.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="مطبا | طراحی سایت پزشکی">
+<meta name="twitter:description" content="طراحی سایت اختصاصی پزشک با نوبت‌دهی آنلاین و نمونه‌کار.">
+<meta name="twitter:image" content="https://mataba.ir/assets/images/personalsection.png">
+<link rel="icon" href="assets/images/navLogo.png" type="image/png">
+<link rel="preload" href="assets/fonts/Modam-Bold.ttf" as="font" type="font/ttf" crossorigin>
+<link rel="stylesheet" href="css/styles.css">
+<link rel="stylesheet" href="css/responsive.css">
+<link rel="stylesheet" href="css/utilities.css">
+<link rel="manifest" href="manifest.webmanifest">
+<script type="application/ld+json">
+{"@context":"https://schema.org","@graph":[
+{"@type":"Organization","@id":"https://mataba.ir/#org","name":"مطبا","alternateName":"Mataba","url":"https://mataba.ir/","logo":"https://mataba.ir/assets/images/navLogo.png"},
+{"@type":"WebSite","@id":"https://mataba.ir/#site","url":"https://mataba.ir/","name":"مطبا","inLanguage":"fa","publisher":{"@id":"https://mataba.ir/#org"}},
+{"@type":"WebPage","@id":"https://mataba.ir/#home","url":"https://mataba.ir/","name":"مطبا | طراحی سایت پزشکان و کلینیک با نوبت‌دهی آنلاین","inLanguage":"fa-IR","isPartOf":{"@id":"https://mataba.ir/#site"}},
+{"@type":"Service","name":"طراحی سایت اختصاصی پزشکان","provider":{"@id":"https://mataba.ir/#org"},"areaServed":"IR","inLanguage":"fa","description":"طراحی سایت واکنش‌گرا برای پزشکان، معرفی تخصص، نوبت‌دهی، گالری نمونه‌کار و سئوی پایه."}
+,
+{"@type":"BreadcrumbList","@id":"https://mataba.ir/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"خانه","item":"https://mataba.ir/"},{"@type":"ListItem","position":2,"name":"طراحی سایت پزشکی","item":"https://mataba.ir/#home"}]}]}
+</script>
+</head>
+<body>
+<a class="skip" href="#main">پرش به محتوای اصلی</a>
+<div class="wrap">
+<header class="site-header">
+  <button class="hamburger" id="hamburger" aria-expanded="false" aria-controls="mainNav" aria-label="باز کردن منو"><span class="bars" aria-hidden="true"><span></span><span></span><span></span></span><span>منو</span></button>
+  <a class="brand" href="./" aria-label="مطبا — صفحه اصلی"><span class="logo-mark" aria-hidden="true"><span>م</span></span><span class="logo-text-wrap"><span class="logo-text">مطبا</span><span class="logo-sub">mataba.ir</span></span></a>
+  <nav class="nav" id="mainNav" aria-label="ناوبری اصلی">
+    <span id="drawerClose" style="display:none"></span>
+    <a class="nav-link active" href="#home">صفحه اصلی</a>
+    <a class="nav-link" href="#samples">نمونه‌کارها</a>
+    <a class="nav-link" href="#packages">پکیج‌ها</a>
+    <a class="nav-link" href="#facilities">امکانات</a>
+    <a class="nav-link" href="about/">درباره ما</a>
+    <a class="nav-link" href="contact/">ارتباط با ما</a>
+  </nav>
+  <div class="header-actions">
+    <a class="btn-icon" href="#search" aria-label="جست‌وجوی دامنه"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 2.75C6.667 2.75 2.75 6.667 2.75 11.5c0 4.833 3.917 8.75 8.75 8.75 4.833 0 8.75-3.917 8.75-8.75 0-4.833-3.917-8.75-8.75-8.75ZM1.25 11.5C1.25 5.84 5.84 1.25 11.5 1.25c5.66 0 10.25 4.59 10.25 10.25 0 5.66-4.59 10.25-10.25 10.25C5.84 21.75 1.25 17.16 1.25 11.5Z" fill="#333"/></svg></a>
+  </div>
+</header>
+<div class="drawer-backdrop" id="drawerBackdrop"></div>
+
+<main id="main" class="hero-wrap">
+<!-- 1. HERO -->
+<section id="home" class="hero" aria-label="معرفی مطبا">
+  <div class="hero-text">
+    <p class="kicker">مطبا — طراحی یه سایت حرفه‌ای برای برند پزشکت</p>
+    <h1>فقط در سه مرحله، سایت<br>پزشکیت آماده‌ست!</h1>
+    <a class="btn btn-store" href="#contact">ساخت فروشگاه من <span aria-hidden="true">‹</span></a>
+    <p class="hero-seo">طراحی سایت پزشکی · وب‌سایت اختصاصی پزشک · برند شخصی پزشک · نوبت‌دهی آنلاین با مطبا</p>
+    <div class="hero-stats" role="list" aria-label="شاخص‌ها (نیازمند تایید کارفرما)">
+      <!-- TODO: ارقام زیر از ریپوی قبلی آمده و برای مطبا تایید نشده است -->
+      <div class="stat" role="listitem"><div><b>+۱,۲۰۰</b><span>سایت پزشکان</span></div></div>
+      <div class="stat" role="listitem"><div><b>٪۹۸</b><span>رضایت</span></div></div>
+      <div class="stat" role="listitem"><div><b>۷-۱۰</b><span>دقیقه تحویل</span></div></div>
+    </div>
+  </div>
+  <div class="hero-star" aria-label="۱۰ سال سابقه در زمینه پزشکی (نیازمند تایید)"><div><b>۱۰ سال</b><span>سابقه در زمینه پزشکی</span></div></div>
+  <img class="hero-hand-mobile" src="assets/images/dast.png" alt="" width="300" height="220" loading="eager">
+</section>
+
+<!-- 2. UNDER HERO -->
+<section class="hero-under" aria-label="مزایا و اعتماد">
+  <div class="mini-cards">
+    <div class="mini-card"><span class="ic"><svg width="32" height="32" viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M12.8 6.5c.42.46.38 1.17-.08 1.59l-2.54 2.29c-1.18 1.06-1.98 1.78-2.49 2.4-.5.59-.6.93-.6 1.22s.1.64.6 1.23c.52.61 1.32 1.33 2.5 2.4l2.54 2.29c.46.41.49 1.13.08 1.59-.41.46-1.12.5-1.59.08l-2.6-2.34c-1.11-1-2.02-1.82-2.65-2.57-.66-.79-1.13-1.63-1.13-2.67s.47-1.89 1.13-2.68c.63-.75 1.54-1.57 2.65-2.57l2.6-2.34c.46-.42 1.17-.38 1.58.08Z" fill="#014224"/></svg></span><div><h3>طراحی اختصاصی</h3><p>بر اساس رنگ و برند شخصی شما</p></div></div>
+    <div class="mini-card"><span class="ic"><svg width="32" height="32" viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M8 14h12M8 21h7" stroke="#014224" stroke-width="2" stroke-linecap="round"/><rect x="3" y="5" width="30" height="22" rx="4" stroke="#014224" stroke-width="2"/></svg></span><div><h3>بدون نیاز به کدنویسی</h3><p>فقط فرم رو پر کن، سایت آماده‌ست</p></div></div>
+    <div class="mini-card"><span class="ic"><svg width="32" height="32" viewBox="0 0 36 36" fill="none" aria-hidden="true"><circle cx="18" cy="18" r="15" stroke="#014224" stroke-width="2"/><path d="M18 13v6h6" stroke="#014224" stroke-width="2" stroke-linecap="round"/></svg></span><div><h3>سریع و حرفه‌ای</h3><p>تحویل کمتر از ۵ روز</p></div></div>
+  </div>
+  <div class="hand" aria-hidden="true"><img src="assets/images/dast.png" alt="" width="420" height="300" loading="lazy"></div>
+  <div class="doctors-card">
+    <div class="avatars"><img src="assets/images/person.jpg" alt="پزشک همکار مطبا" width="64" height="64" loading="lazy"><img src="assets/images/person3.jpg" alt="پزشک همکار مطبا" width="64" height="64" loading="lazy"><img src="assets/images/person2.jpg" alt="پزشک همکار مطبا" width="64" height="64" loading="lazy"></div>
+    <div><h3>+۸۰۰</h3><p>همکاری با پزشکان</p></div>
+  </div>
+</section>
+<div class="call-strip call-strip--hero" role="note" aria-label="تماس مشاوره"><p>سوالی داری؟ با مطبا تماس بگیر — طراحی سایت پزشکی با مشاوره رایگان <a href="tel:08733730514" class="ltr">08733730514</a></p><a href="tel:08733730514" class="btn btn-call">دریافت مشاوره</a></div>
+
+<!-- 3. STEPS + SEARCH -->
+<section id="search" class="section" aria-label="مراحل ساخت و جست‌وجوی دامنه">
+  <div class="toDown" aria-hidden="true"><svg width="18" height="14" viewBox="0 0 13 10" fill="none"><path d="M1 1l5.5 4.7L12 1" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg></div>
+  <div class="steps-bg">
+    <p class="eyebrow">مراحل ساخت وب‌سایت شما</p>
+    <h2 class="h2 treeStep">فقط در سه مرحله، سایت پزشکیت آماده‌ست!</h2>
+    <div class="steps">
+      <div class="step"><span class="ball"><svg width="52" height="52" viewBox="0 0 40 40" fill="none" aria-hidden="true"><rect x="8" y="4" width="24" height="32" rx="3" stroke="#014224" stroke-width="2"/><path d="M14 15h12M14 21h8" stroke="#014224" stroke-width="2" stroke-linecap="round"/></svg></span><div><p>مرحله اول</p><h3>ثبت اطلاعات مطب و تخصصت</h3></div></div>
+      <div class="step"><span class="ball"><svg width="52" height="52" viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M10 26L24 6l4 3-14 20-5 1 1-4Z" stroke="#014224" stroke-width="2" stroke-linejoin="round"/></svg></span><div><p>مرحله دوم</p><h3>ارسال رنگ و سبک دلخواه برندت</h3></div></div>
+      <div class="step"><span class="ball"><svg width="52" height="52" viewBox="0 0 40 40" fill="none" aria-hidden="true"><rect x="6" y="8" width="28" height="20" rx="3" stroke="#014224" stroke-width="2"/><path d="M16 32h8" stroke="#014224" stroke-width="2" stroke-linecap="round"/></svg></span><div><p>مرحله سوم</p><h3>تحویل سایت آماده</h3></div></div>
+    </div>
+    <h2 class="h2 searchAfter" style="margin-top:40px">سلامتی از اعتماد شروع میشود، سایت تخصصی خودت رو همین حالا بساز :)</h2>
+    <form class="search-box" id="domainForm" role="search" aria-label="جست‌وجوی دامنه">
+      <label class="visually-hidden" for="domainInput">نام دامنه را جستجو کنید</label>
+      <input id="domainInput" name="domain" type="text" placeholder="نام دامنه را جستجو کنید ..." autocomplete="off">
+      <button class="search-go" type="submit" aria-label="جست‌وجو"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/><path d="M16 16l4 4" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg></button>
+    </form>
+    <p id="domainMsg" class="ferr center" role="status"></p>
+    <div class="domains" aria-label="پسوندهای پیشنهادی">
+      <button type="button" class="domain ltr">.ir</button><button type="button" class="domain ltr">.com</button><button type="button" class="domain ltr">.net</button><button type="button" class="domain ltr">.doctor</button><button type="button" class="domain ltr">.site</button><button type="button" class="domain ltr">.shop</button>
+    </div>
+  </div>
+</section>
+
+<!-- 4. SAMPLES -->
+<section id="samples" class="section" aria-label="نمونه‌کارها">
+  <p class="eyebrow">نمونه طراحی‌های مطبا — طراحی سایت پزشکی با مطبا</p>
+  <h2 class="h2 SampleAfter">طراحی‌هایی مطابق با هویت برند پزشکان با مطبا</h2>
+  <div class="cards">
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>دندانپزشکی</h3><div class="sample-img"><img src="assets/images/samplePage/1.png" alt="نمونه طراحی سایت دندانپزشکی مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>پزشک عمومی</h3><div class="sample-img"><img src="assets/images/samplePage/2.png" alt="نمونه طراحی سایت پزشک عمومی مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>پزشک زیبایی</h3><div class="sample-img"><img src="assets/images/samplePage/3.png" alt="نمونه طراحی سایت پزشک زیبایی مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>جراح</h3><div class="sample-img"><img src="assets/images/samplePage/4.png" alt="نمونه طراحی سایت جراح مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+  </div>
+</section>
+<div class="call-strip call-strip--samples" role="note" aria-label="مشاهده نمونه‌کار"><p>نمونه‌کار پزشکی دیدی؟ برای وب‌سایت اختصاصی پزشک — سئو و نمونه‌کار حرفه‌ای <a href="tel:08733730514" class="ltr">08733730514</a></p><a href="tel:08733730514" class="btn btn-call">مشاهده نمونه‌کارها</a></div>
+
+<!-- 5. FACILITIES -->
+<section id="facilities" class="facilities" aria-label="امکانات">
+  <img class="fac-circle" src="assets/images/circle.png" alt="" width="280" height="200" loading="lazy">
+  <div class="fac-head"><p>امکانات وب‌سایت پزشکان با مطبا</p><h2 class="facilityAfter">هر چیزی که برای حضور آنلاین با مطبا نیاز داری</h2></div>
+  <div class="fac-grid">
+    <div class="fac"><span aria-hidden="true">✔</span><p>صفحه معرفی تخصص</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>بخش تماس و نوبت‌دهی</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>فروش محصوات پزشکی</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>گالری نمونه‌کار و نتایج</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>سئو و بهینه‌سازی</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>اتصال به گوگل</p></div>
+  </div>
+</section>
+
+<!-- 6. BRAND CTA -->
+<section class="brand-cta" aria-label="برند شخصی">
+  <div class="overlay"><div><h2>برند شخصی پزشکیت رو با مطبا<br>همین امروز بساز</h2><p>مطبا — طراحی سایت اختصاصی پزشک؛ تو فقط کارت رو بده، ما برات هویت دیجیتال می‌سازیم.</p></div><a class="btn btn-white" href="#contact">ساخت وب‌سایت من همین حالا</a></div>
+</section>
+
+<!-- 7. PACKAGES -->
+<section id="packages" class="section" aria-label="پکیج‌ها و قیمت‌ها">
+  <p class="eyebrow">پکیج‌ها و قیمت‌ها</p>
+  <h2 class="h2 btmBorder">پکیج مناسب تخصص خودت رو انتخاب کن</h2>
+  <div class="packages mt-4">
+    <div class="svc"><div class="svc-head"><div><p class="eyebrow">دریافت سرویس</p><h3>جزئیات سرویس‌ها</h3></div><span aria-hidden="true">↓</span></div>
+      <div class="svc-panel"><ul>
+        <li>طراحی اختصاصی لوگو</li><li>ساخت سایت واکنش‌گرا</li><li>دامنه و هاست رایگان</li><li>پنل مدیریت ساده</li><li>درگاه پرداخت آنلاین</li><li>فرم نوبت‌دهی سریع</li><li>سئو و بهینه‌سازی پایه</li><li>پشتیبانی فنی رایگان</li><li>امکان افزودن وبلاگ</li><li>اتصال به واتساپ و اینستاگرام</li>
+      </ul></div>
+    </div>
+    <div class="plan featured"><div class="top"><p><b>پلن پایه</b></p><p class="price">۱۱۳,۵۴۶,۰۰۰ <span class="per">/ماهانه</span></p><p>شامل ۹ گزینه</p></div><div class="rows" aria-hidden="true"><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✘</span><span>✔</span></div><a class="btn btn-dark" href="#contact">انتخاب پکیج</a></div>
+    <div class="plan featured"><div class="top"><p><b>پلن پایه</b></p><p class="price">۱۱۳,۵۴۶,۰۰۰ <span class="per">/ماهانه</span></p><p>شامل ۹ گزینه</p></div><div class="rows" aria-hidden="true"><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✘</span><span>✔</span></div><a class="btn btn-dark" href="#contact">انتخاب پکیج</a></div>
+    <div class="plan featured"><div class="top"><p><b>پلن پایه</b></p><p class="price">۱۱۳,۵۴۶,۰۰۰ <span class="per">/ماهانه</span></p><p>شامل ۹ گزینه</p></div><div class="rows" aria-hidden="true"><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✘</span><span>✔</span></div><a class="btn btn-dark" href="#contact">انتخاب پکیج</a></div>
+  </div>
+</section>
+<div class="call-strip call-strip--packages" role="note" aria-label="انتخاب پکیج"><p>برای انتخاب پکیج و پنل نوبت‌دهی آنلاین سوالی داری؟ <a href="tel:08733730514" class="ltr">08733730514</a> — پشتیبانی مطبا</p><a href="tel:08733730514" class="btn btn-call">گفت‌وگو با کارشناس</a></div>
+
+<!-- 8. CONTACT -->
+<section id="contact" class="contact-sec has-bg" aria-label="تماس">
+  <div class="contact-text"><h2>با ما در ارتباط باشید ...</h2><p>سوال یا درخواستی دارید؟ تیم مطبا آماده پاسخگویی به شماست! از طریق فرم روبه‌رو با ما در ارتباط باشید.</p>
+    <div class="social"><a href="#" aria-label="اینستاگرام مطبا"><img src="assets/images/instagraam.png" alt="" width="24" height="24"></a><a href="#" aria-label="تلگرام مطبا"><img src="assets/images/telegram.png" alt="" width="24" height="24"></a><a href="#" aria-label="واتساپ مطبا"><img src="assets/images/whatsap.png" alt="" width="24" height="24"></a></div>
+  </div>
+  <div class="form-card"><p class="sub">شروع طراحی وب‌سایت اختصاصی من</p><h2>فرم ثبت درخواست</h2>
+    <form id="leadForm" novalidate>
+      <div class="frow"><label class="visually-hidden" for="ln">نام و نام خانوادگی پزشک</label><input id="ln" name="name" type="text" placeholder="نام و نام خانوادگی پزشک" autocomplete="name"><label class="visually-hidden" for="lm">شماره تماس</label><input id="lm" name="mobile" type="tel" inputmode="numeric" placeholder="شماره تماس" autocomplete="tel"></div>
+      <div class="frow"><label class="visually-hidden" for="ls">تخصص</label><input id="ls" name="spec" type="text" placeholder="تخصص"><label class="visually-hidden" for="lc">رنگ سازمانی</label><input id="lc" name="color" type="text" placeholder="رنگ سازمانی"></div>
+      <label class="visually-hidden" for="ld">توضیحات دلخواه</label><textarea id="ld" name="desc" placeholder="توضیحات دلخواه"></textarea>
+      <p class="ferr" role="alert"></p><p class="fok" role="status"></p>
+      <div style="display:flex;justify-content:flex-end"><button class="btn btn-form" type="submit">ارسال درخواست</button></div>
+    </form>
+  </div>
+</section>
+
+<!-- 9. VOICES -->
+<section id="voices" class="voices" aria-label="نظرات پزشکان">
+  <p class="eyebrow">نظرات پزشکان</p>
+  <h2 class="DoctorCmH">نظر پزشکانی که به ما اعتماد کردند</h2>
+  <div class="carousel"><div class="car-nav"><button id="tPrev" aria-label="قبلی">‹</button><button id="tNext" aria-label="بعدی">›</button></div>
+    <div class="track" id="tTrack">
+      <article class="tcard"><blockquote>«طراحی سایت من دقیقاً مطابق کارت ویزیتم بود. هویت برندم کاملاً حوظ شد.»</blockquote><div class="tperson"><img src="assets/images/dcm1.jpg" alt="دکتر مریم صادقی" width="90" height="90" loading="lazy"><b>دکتر مریم صادقی</b><span>دندان‌پزشک زیبایی</span><span class="trate" aria-label="۵ از ۵">★★★★★</span></div></article>
+      <article class="tcard"><blockquote>«بیماران راحت‌تر من را پیدا می‌کنند و نوبت‌گیری ساده شده است.»</blockquote><div class="tperson"><img src="assets/images/dcm2.jpg" alt="دکتر رضا قنبری" width="90" height="90" loading="lazy"><b>دکتر رضا قنبری</b><span>متخصص پوست و مو</span><span class="trate" aria-label="۵ از ۵">★★★★★</span></div></article>
+      <article class="tcard"><blockquote>«پنل مدیریت ساده است و پشتیبانی سریع پاسخ می‌دهد.»</blockquote><div class="tperson"><img src="assets/images/dcm3.jpg" alt="دکتر نرگس مرادی" width="90" height="90" loading="lazy"><b>دکتر نرگس مرادی</b><span>فیزیوتراپیست</span><span class="trate" aria-label="۵ از ۵">★★★★★</span></div></article>
+    </div>
+  </div>
+</section>
+</main>
+
+<footer class="site-footer"><div class="foot-panel">
+  <span class="brand" style="gap:10px"><span class="logo-mark" style="width:38px;height:38px;border-radius:12px;font-size:18px"><span>م</span></span><span class="logo-text-wrap"><span class="logo-text" style="font-size:22px">مطبا</span><span class="logo-sub">mataba.ir</span></span></span>
+  <p class="lead">مطبا با هدف ساده‌تر کردن حضور آنلاین پزشکان، پلتفرمی طراحی کرده که از طراحی لوگو تا ساخت کامل وب‌سایت اختصاصی پزشک را تنها با چند کلیک انجام می‌دهد. تلاش ما این است که هر پزشک با مطبا هویت منحصربه‌فردی در فضای دیجیتال داشته باشد.</p>
+  <div class="social"><a href="#" aria-label="اینستاگرام"><img src="assets/images/instagraam.png" alt="" width="24" height="24"></a><a href="#" aria-label="تلگرام"><img src="assets/images/telegram.png" alt="" width="24" height="24"></a><a href="#" aria-label="واتساپ"><img src="assets/images/whatsap.png" alt="" width="24" height="24"></a></div>
+  <p class="foot-small">تمامی حقوق مادی و معنوی این وب‌سایت متعلق به «مطبا» است. هرگونه کپی‌برداری بدون اجازه کتبی پیگرد قانونی دارد.</p>
+  <nav aria-label="پیوندهای داخلی"><a href="#samples">نمونه‌کارها</a> · <a href="#packages">پکیج‌ها</a> · <a href="about/">درباره ما</a> · <a href="contact/">ارتباط با ما</a></nav>
+</div></footer>
+</div>
+
+<script src="js/main.js" defer></script>
+</body>
+</html>

landing/index.html.ftfy

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>مطبا | طراØÛŒ سایت پزشکان Ùˆ برند شخصی پزشک</title>
+<meta name="description" content="مطبا: طراØÛŒ سایت اختصاصی پزشکان، دندانپزشکی، پوست Ùˆ زیبایی Ùˆ پزشک عمومی؛ نمونه‌کار، امکانات نوبت‌دهی Ùˆ پنل مدیریت، پکیج‌ها Ùˆ ثبت درخواست.">
+<link rel="canonical" href="https://mataba.ir/">
+<meta name="robots" content="index, follow">
+<meta property="og:type" content="website">
+<meta property="og:locale" content="fa_IR">
+<meta property="og:site_name" content="مطبا">
+<meta property="og:title" content="مطبا | طراØÛŒ سایت پزشکان Ùˆ برند شخصی پزشک">
+<meta property="og:description" content="طراØÛŒ سایت اختصاصی پزشکان با نمونه‌کار، امکانات نوبت‌دهی Ùˆ پکیج‌های خدماتی.">
+<meta property="og:url" content="https://mataba.ir/">
+<meta property="og:image" content="https://mataba.ir/assets/images/personalsection.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="مطبا | طراØÛŒ سایت پزشکان">
+<meta name="twitter:description" content="طراØÛŒ سایت اختصاصی پزشکان، نمونه‌کارها Ùˆ پکیج‌ها.">
+<meta name="twitter:image" content="https://mataba.ir/assets/images/personalsection.png">
+<link rel="icon" href="assets/images/navLogo.png" type="image/png">
+<link rel="preload" href="assets/fonts/Modam-Bold.ttf" as="font" type="font/ttf" crossorigin>
+<link rel="stylesheet" href="css/styles.css">
+<link rel="stylesheet" href="css/responsive.css">
+<link rel="stylesheet" href="css/utilities.css">
+<link rel="manifest" href="manifest.webmanifest">
+<script type="application/ld+json">
+{"@context":"https://schema.org","@graph":[
+{"@type":"Organization","@id":"https://mataba.ir/#org","name":"مطبا","alternateName":"Mataba","url":"https://mataba.ir/","logo":"https://mataba.ir/assets/images/navLogo.png"},
+{"@type":"WebSite","@id":"https://mataba.ir/#site","url":"https://mataba.ir/","name":"مطبا","inLanguage":"fa","publisher":{"@id":"https://mataba.ir/#org"}},
+{"@type":"WebPage","@id":"https://mataba.ir/#home","url":"https://mataba.ir/","name":"مطبا | طراØÛŒ سایت پزشکان","inLanguage":"fa-IR","isPartOf":{"@id":"https://mataba.ir/#site"}},
+{"@type":"Service","name":"طراØÛŒ سایت اختصاصی پزشکان","provider":{"@id":"https://mataba.ir/#org"},"areaServed":"IR","inLanguage":"fa","description":"طراØÛŒ سایت واکنش‌گرا برای پزشکان، معرفی تخصص، نوبت‌دهی، گالری نمونه‌کار Ùˆ سئوی پایه."}
+]}
+</script>
+</head>
+<body>
+<a class="skip" href="#main">پرش به Ù…Øتوای اصلی</a>
+<div class="wrap">
+<header class="site-header">
+  <button class="hamburger" id="hamburger" aria-expanded="false" aria-controls="mainNav" aria-label="باز کردن منو"><span class="bars" aria-hidden="true"><span></span><span></span><span></span></span><span>منو</span></button>
+  <a class="brand" href="./" aria-label="مطبا — صفØÙ‡ اصلی"><span class="logo-text" aria-hidden="false">مطبا</span><img src="assets/images/navLogo.png" alt="" width="1" height="1" style="position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden" aria-hidden="true"></a>
+  <nav class="nav" id="mainNav" aria-label="ناوبری اصلی">
+    <span id="drawerClose" style="display:none"></span>
+    <a class="nav-link active" href="#home">صفØÙ‡ اصلی</a>
+    <a class="nav-link" href="#samples">نمونه‌کارها</a>
+    <a class="nav-link" href="#packages">پکیج‌ها</a>
+    <a class="nav-link" href="#facilities">امکانات</a>
+    <a class="nav-link" href="about/">درباره ما</a>
+    <a class="nav-link" href="contact/">ارتباط با ما</a>
+  </nav>
+  <div class="header-actions">
+    <a class="btn-icon" href="#search" aria-label="جست‌وجوی دامنه"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 2.75C6.667 2.75 2.75 6.667 2.75 11.5c0 4.833 3.917 8.75 8.75 8.75 4.833 0 8.75-3.917 8.75-8.75 0-4.833-3.917-8.75-8.75-8.75ZM1.25 11.5C1.25 5.84 5.84 1.25 11.5 1.25c5.66 0 10.25 4.59 10.25 10.25 0 5.66-4.59 10.25-10.25 10.25C5.84 21.75 1.25 17.16 1.25 11.5Z" fill="#333"/></svg></a>
+  </div>
+</header>
+<div class="drawer-backdrop" id="drawerBackdrop"></div>
+
+<main id="main" class="hero-wrap">
+<!-- 1. HERO -->
+<section id="home" class="hero" aria-label="معرفی مطبا">
+  <div class="hero-text">
+    <p class="kicker">مطبا — طراØÛŒ یه سایت Øرفه‌ای برای برند پزشکت</p>
+    <h1>فقط در سه مرØÙ"ه، سایت<br>پزشکیت آماده‌ست!</h1>
+    <a class="btn btn-store" href="#contact">ساخت فروشگاه من <span aria-hidden="true">‹</span></a>
+    <p class="hero-seo">طراØÛŒ سایت پزشکی · وب‌سایت اختصاصی پزشک · برند شخصی پزشک · نوبت‌دهی آنلاین با مطبا</p>
+    <div class="hero-stats" role="list" aria-label="شاخص‌ها (نیازمند تایید کارفرما)">
+      <!-- TODO: ارقام زیر از ریپوی قبلی آمده و برای مطبا تایید نشده است -->
+      <div class="stat" role="listitem"><div><b>+۱,۲۰۰</b><span>سایت پزشکان</span></div></div>
+      <div class="stat" role="listitem"><div><b>٪۹۸</b><span>رضایت</span></div></div>
+      <div class="stat" role="listitem"><div><b>Û·-Û±Û°</b><span>دقیقه تØÙˆÛŒÙ"</span></div></div>
+    </div>
+  </div>
+  <div class="hero-star" aria-label="۱۰ سال سابقه در زمینه پزشکی (نیازمند تایید)"><div><b>۱۰ سال</b><span>سابقه در زمینه پزشکی</span></div></div>
+  <img class="hero-hand-mobile" src="assets/images/dast.png" alt="" width="300" height="220" loading="eager">
+</section>
+
+<!-- 2. UNDER HERO -->
+<section class="hero-under" aria-label="مزایا و اعتماد">
+  <div class="mini-cards">
+    <div class="mini-card"><span class="ic"><svg width="32" height="32" viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M12.8 6.5c.42.46.38 1.17-.08 1.59l-2.54 2.29c-1.18 1.06-1.98 1.78-2.49 2.4-.5.59-.6.93-.6 1.22s.1.64.6 1.23c.52.61 1.32 1.33 2.5 2.4l2.54 2.29c.46.41.49 1.13.08 1.59-.41.46-1.12.5-1.59.08l-2.6-2.34c-1.11-1-2.02-1.82-2.65-2.57-.66-.79-1.13-1.63-1.13-2.67s.47-1.89 1.13-2.68c.63-.75 1.54-1.57 2.65-2.57l2.6-2.34c.46-.42 1.17-.38 1.58.08Z" fill="#014224"/></svg></span><div><h3>طراØÛŒ اختصاصی</h3><p>بر اساس رنگ Ùˆ برند شخصی شما</p></div></div>
+    <div class="mini-card"><span class="ic"><svg width="32" height="32" viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M8 14h12M8 21h7" stroke="#014224" stroke-width="2" stroke-linecap="round"/><rect x="3" y="5" width="30" height="22" rx="4" stroke="#014224" stroke-width="2"/></svg></span><div><h3>بدون نیاز به کدنویسی</h3><p>فقط فرم رو پر کن، سایت آماده‌ست</p></div></div>
+    <div class="mini-card"><span class="ic"><svg width="32" height="32" viewBox="0 0 36 36" fill="none" aria-hidden="true"><circle cx="18" cy="18" r="15" stroke="#014224" stroke-width="2"/><path d="M18 13v6h6" stroke="#014224" stroke-width="2" stroke-linecap="round"/></svg></span><div><h3>سریع Ùˆ Øرفه‌ای</h3><p>تØÙˆÛŒÙ" کمتر از Ûµ روز</p></div></div>
+  </div>
+  <div class="hand" aria-hidden="true"><img src="assets/images/dast.png" alt="" width="420" height="300" loading="lazy"></div>
+  <div class="doctors-card">
+    <div class="avatars"><img src="assets/images/person.jpg" alt="پزشک همکار مطبا" width="64" height="64" loading="lazy"><img src="assets/images/person3.jpg" alt="پزشک همکار مطبا" width="64" height="64" loading="lazy"><img src="assets/images/person2.jpg" alt="پزشک همکار مطبا" width="64" height="64" loading="lazy"></div>
+    <div><h3>+۸۰۰</h3><p>همکاری با پزشکان</p></div>
+  </div>
+</section>
+<div class="call-strip" role="note" aria-label="تماس"><p>سوالی داری؟ با مطبا تماس بگیر — <a href="tel:08733730514" class="ltr">08733730514</a></p><a href="tel:08733730514" class="btn btn-call">زنگ بزن</a></div>
+
+<!-- 3. STEPS + SEARCH -->
+<section id="search" class="section" aria-label="مراØÙ" ساخت Ùˆ جست‌وجوی دامنه">
+  <div class="toDown" aria-hidden="true"><svg width="18" height="14" viewBox="0 0 13 10" fill="none"><path d="M1 1l5.5 4.7L12 1" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg></div>
+  <div class="steps-bg">
+    <p class="eyebrow">مراØÙ" ساخت وب‌سایت شما</p>
+    <h2 class="h2 treeStep">فقط در سه مرØÙ"ه، سایت پزشکیت آماده‌ست!</h2>
+    <div class="steps">
+      <div class="step"><span class="ball"><svg width="52" height="52" viewBox="0 0 40 40" fill="none" aria-hidden="true"><rect x="8" y="4" width="24" height="32" rx="3" stroke="#014224" stroke-width="2"/><path d="M14 15h12M14 21h8" stroke="#014224" stroke-width="2" stroke-linecap="round"/></svg></span><div><p>مرØÙ"Ù‡ اول</p><h3>ثبت اطلاعات مطب Ùˆ تخصصت</h3></div></div>
+      <div class="step"><span class="ball"><svg width="52" height="52" viewBox="0 0 36 36" fill="none" aria-hidden="true"><path d="M10 26L24 6l4 3-14 20-5 1 1-4Z" stroke="#014224" stroke-width="2" stroke-linejoin="round"/></svg></span><div><p>مرØÙ"Ù‡ دوم</p><h3>ارسال رنگ Ùˆ سبک دلخواه برندت</h3></div></div>
+      <div class="step"><span class="ball"><svg width="52" height="52" viewBox="0 0 40 40" fill="none" aria-hidden="true"><rect x="6" y="8" width="28" height="20" rx="3" stroke="#014224" stroke-width="2"/><path d="M16 32h8" stroke="#014224" stroke-width="2" stroke-linecap="round"/></svg></span><div><p>مرØÙ"Ù‡ سوم</p><h3>تØÙˆÛŒÙ" سایت آماده</h3></div></div>
+    </div>
+    <h2 class="h2 searchAfter" style="margin-top:40px">سلامتی از اعتماد شروع میشود، سایت تخصصی خودت رو همین ØاÙ"ا بساز :)</h2>
+    <form class="search-box" id="domainForm" role="search" aria-label="جست‌وجوی دامنه">
+      <label class="visually-hidden" for="domainInput">نام دامنه را جستجو کنید</label>
+      <input id="domainInput" name="domain" type="text" placeholder="نام دامنه را جستجو کنید ..." autocomplete="off">
+      <button class="search-go" type="submit" aria-label="جست‌وجو"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/><path d="M16 16l4 4" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg></button>
+    </form>
+    <p id="domainMsg" class="ferr center" role="status"></p>
+    <div class="domains" aria-label="پسوندهای پیشنهادی">
+      <button type="button" class="domain ltr">.ir</button><button type="button" class="domain ltr">.com</button><button type="button" class="domain ltr">.net</button><button type="button" class="domain ltr">.doctor</button><button type="button" class="domain ltr">.site</button><button type="button" class="domain ltr">.shop</button>
+    </div>
+  </div>
+</section>
+
+<!-- 4. SAMPLES -->
+<section id="samples" class="section" aria-label="نمونه‌کارها">
+  <p class="eyebrow">نمونه طراØی‌های مطبا — طراØÛŒ سایت پزشکی با مطبا</p>
+  <h2 class="h2 SampleAfter">طراØی‌هایی مطابق با هویت برند پزشکان با مطبا</h2>
+  <div class="cards">
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>دندانپزشکی</h3><div class="sample-img"><img src="assets/images/samplePage/1.png" alt="نمونه طراØÛŒ سایت دندانپزشکی مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>پزشک عمومی</h3><div class="sample-img"><img src="assets/images/samplePage/2.png" alt="نمونه طراØÛŒ سایت پزشک عمومی مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>پزشک زیبایی</h3><div class="sample-img"><img src="assets/images/samplePage/3.png" alt="نمونه طراØÛŒ سایت پزشک زیبایی مطبا" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+    <article class="sample-card"><div class="stars" aria-hidden="true">★★★</div><h3>جراØ</h3><div class="sample-img"><img src="assets/images/samplePage/4.png" alt="نمونه طراØÛŒ سایت Ø¬Ø±Ø§Ø Ù…Ø·Ø¨Ø§" width="400" height="520" loading="lazy"></div><button class="sample-view" type="button">مشاهده</button></article>
+  </div>
+</section>
+<div class="call-strip" role="note" aria-label="تماس"><p>نمونه‌کارت رو دیدی؟ سوالی داری زنگ بزن — <a href="tel:08733730514" class="ltr">08733730514</a></p><a href="tel:08733730514" class="btn btn-call">تماس با مطبا</a></div>
+
+<!-- 5. FACILITIES -->
+<section id="facilities" class="facilities" aria-label="امکانات">
+  <img class="fac-circle" src="assets/images/circle.png" alt="" width="280" height="200" loading="lazy">
+  <div class="fac-head"><p>امکانات وب‌سایت پزشکان با مطبا</p><h2 class="facilityAfter">هر چیزی Ú©Ù‡ برای Øضور آنلاین با مطبا نیاز داری</h2></div>
+  <div class="fac-grid">
+    <div class="fac"><span aria-hidden="true">✔</span><p>صفØÙ‡ معرفی تخصص</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>بخش تماس و نوبت‌دهی</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>فروش Ù…ØصوÙ"ات پزشکی</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>گالری نمونه‌کار و نتایج</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>سئو و بهینه‌سازی</p></div>
+    <div class="fac"><span aria-hidden="true">✔</span><p>اتصال به گوگل</p></div>
+  </div>
+</section>
+
+<!-- 6. BRAND CTA -->
+<section class="brand-cta" aria-label="برند شخصی">
+  <div class="overlay"><div><h2>برند شخصی پزشکیت رو با مطبا<br>همین امروز بساز</h2><p>مطبا — طراØÛŒ سایت اختصاصی پزشک؛ تو فقط کارت رو بده، ما برات هویت دیجیتال می‌سازیم.</p></div><a class="btn btn-white" href="#contact">ساخت وب‌سایت من همین ØاÙ"ا</a></div>
+</section>
+
+<!-- 7. PACKAGES -->
+<section id="packages" class="section" aria-label="پکیج‌ها و قیمت‌ها">
+  <p class="eyebrow">پکیج‌ها و قیمت‌ها</p>
+  <h2 class="h2 btmBorder">پکیج مناسب تخصص خودت رو انتخاب کن</h2>
+  <div class="packages mt-4">
+    <div class="svc"><div class="svc-head"><div><p class="eyebrow">دریافت سرویس</p><h3>جزئیات سرویس‌ها</h3></div><span aria-hidden="true">↓</span></div>
+      <div class="svc-panel"><ul>
+        <li>طراØÛŒ اختصاصی لوگو</li><li>ساخت سایت واکنش‌گرا</li><li>دامنه Ùˆ هاست رایگان</li><li>پنل مدیریت ساده</li><li>درگاه پرداخت آنلاین</li><li>فرم نوبت‌دهی سریع</li><li>سئو Ùˆ بهینه‌سازی پایه</li><li>پشتیبانی فنی رایگان</li><li>امکان افزودن وبلاگ</li><li>اتصال به واتساپ Ùˆ اینستاگرام</li>
+      </ul></div>
+    </div>
+    <div class="plan featured"><div class="top"><p><b>پلن پایه</b></p><p class="price">۱۱۳,۵۴۶,۰۰۰ <span class="per">/ماهانه</span></p><p>شامل ۹ گزینه</p></div><div class="rows" aria-hidden="true"><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✘</span><span>✔</span></div><a class="btn btn-dark" href="#contact">انتخاب پکیج</a></div>
+    <div class="plan featured"><div class="top"><p><b>پلن پایه</b></p><p class="price">۱۱۳,۵۴۶,۰۰۰ <span class="per">/ماهانه</span></p><p>شامل ۹ گزینه</p></div><div class="rows" aria-hidden="true"><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✘</span><span>✔</span></div><a class="btn btn-dark" href="#contact">انتخاب پکیج</a></div>
+    <div class="plan featured"><div class="top"><p><b>پلن پایه</b></p><p class="price">۱۱۳,۵۴۶,۰۰۰ <span class="per">/ماهانه</span></p><p>شامل ۹ گزینه</p></div><div class="rows" aria-hidden="true"><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✔</span><span>✘</span><span>✔</span></div><a class="btn btn-dark" href="#contact">انتخاب پکیج</a></div>
+  </div>
+</section>
+<div class="call-strip" role="note" aria-label="تماس"><p>برای انتخاب پکیج سوالی داری؟ زنگ بزن — <a href="tel:08733730514" class="ltr">08733730514</a></p><a href="tel:08733730514" class="btn btn-call">مشاوره رایگان</a></div>
+
+<!-- 8. CONTACT -->
+<section id="contact" class="contact-sec has-bg" aria-label="تماس">
+  <div class="contact-text"><h2>با ما در ارتباط باشید ...</h2><p>سوال یا درخواستی دارید؟ تیم مطبا آماده پاسخگویی به شماست! از طریق فرم روبه‌رو با ما در ارتباط باشید.</p>
+    <div class="social"><a href="#" aria-label="اینستاگرام مطبا"><img src="assets/images/instagraam.png" alt="" width="24" height="24"></a><a href="#" aria-label="تلگرام مطبا"><img src="assets/images/telegram.png" alt="" width="24" height="24"></a><a href="#" aria-label="واتساپ مطبا"><img src="assets/images/whatsap.png" alt="" width="24" height="24"></a></div>
+  </div>
+  <div class="form-card"><p class="sub">شروع طراØÛŒ وب‌سایت اختصاصی من</p><h2>فرم ثبت درخواست</h2>
+    <form id="leadForm" novalidate>
+      <div class="frow"><label class="visually-hidden" for="ln">نام و نام خانوادگی پزشک</label><input id="ln" name="name" type="text" placeholder="نام و نام خانوادگی پزشک" autocomplete="name"><label class="visually-hidden" for="lm">شماره تماس</label><input id="lm" name="mobile" type="tel" inputmode="numeric" placeholder="شماره تماس" autocomplete="tel"></div>
+      <div class="frow"><label class="visually-hidden" for="ls">تخصص</label><input id="ls" name="spec" type="text" placeholder="تخصص"><label class="visually-hidden" for="lc">رنگ سازمانی</label><input id="lc" name="color" type="text" placeholder="رنگ سازمانی"></div>
+      <label class="visually-hidden" for="ld">توضیØات دلخواه</label><textarea id="ld" name="desc" placeholder="توضیØات دلخواه"></textarea>
+      <p class="ferr" role="alert"></p><p class="fok" role="status"></p>
+      <div style="display:flex;justify-content:flex-end"><button class="btn btn-form" type="submit">ارسال درخواست</button></div>
+    </form>
+  </div>
+</section>
+
+<!-- 9. VOICES -->
+<section id="voices" class="voices" aria-label="نظرات پزشکان">
+  <p class="eyebrow">نظرات پزشکان</p>
+  <h2 class="DoctorCmH">نظر پزشکانی که به ما اعتماد کردند</h2>
+  <div class="carousel"><div class="car-nav"><button id="tPrev" aria-label="قبلی">‹</button><button id="tNext" aria-label="بعدی">›</button></div>
+    <div class="track" id="tTrack">
+      <article class="tcard"><blockquote>«طراØÛŒ سایت من دقیقاً مطابق کارت ویزیتم بود. هویت برندم کاملاً Øفظ شد.»</blockquote><div class="tperson"><img src="assets/images/dcm1.jpg" alt="دکتر مریم صادقی" width="90" height="90" loading="lazy"><b>دکتر مریم صادقی</b><span>دندان‌پزشک زیبایی</span><span class="trate" aria-label="Ûµ از Ûµ">★★★★★</span></div></article>
+      <article class="tcard"><blockquote>«بیماران راØت‌تر من را پیدا می‌کنند Ùˆ نوبت‌گیری ساده شده است.»</blockquote><div class="tperson"><img src="assets/images/dcm2.jpg" alt="دکتر رضا قنبری" width="90" height="90" loading="lazy"><b>دکتر رضا قنبری</b><span>متخصص پوست Ùˆ مو</span><span class="trate" aria-label="Ûµ از Ûµ">★★★★★</span></div></article>
+      <article class="tcard"><blockquote>«پنل مدیریت ساده است و پشتیبانی سریع پاسخ می‌دهد.»</blockquote><div class="tperson"><img src="assets/images/dcm3.jpg" alt="دکتر نرگس مرادی" width="90" height="90" loading="lazy"><b>دکتر نرگس مرادی</b><span>فیزیوتراپیست</span><span class="trate" aria-label="۵ از ۵">★★★★★</span></div></article>
+    </div>
+  </div>
+</section>
+</main>
+
+<footer class="site-footer"><div class="foot-panel">
+  <span class="logo-text" style="font-weight:900;font-size:22px;color:var(--deep)">مطبا — mataba.ir</span>
+  <p class="lead">مطبا با هدف ساده‌تر کردن Øضور آنلاین پزشکان، پلتفرمی طراØÛŒ کرده Ú©Ù‡ از طراØÛŒ لوگو تا ساخت کامل وب‌سایت اختصاصی پزشک را تنها با چند کلیک انجام می‌دهد. تلاش ما این است Ú©Ù‡ هر پزشک با مطبا هویت منØصربه‌فردی در فضای دیجیتال داشته باشد.</p>
+  <div class="social"><a href="#" aria-label="اینستاگرام"><img src="assets/images/instagraam.png" alt="" width="24" height="24"></a><a href="#" aria-label="تلگرام"><img src="assets/images/telegram.png" alt="" width="24" height="24"></a><a href="#" aria-label="واتساپ"><img src="assets/images/whatsap.png" alt="" width="24" height="24"></a></div>
+  <p class="foot-small">تمامی ØÙ'وق مادی Ùˆ معنوی این وب‌سایت متعلق به «مطبا» است. هرگونه کپی‌برداری بدون اجازه کتبی پیگرد قانونی دارد.</p>
+  <nav aria-label="پیوندهای داخلی"><a href="#samples">نمونه‌کارها</a> · <a href="#packages">پکیج‌ها</a> · <a href="about/">درباره ما</a> · <a href="contact/">ارتباط با ما</a></nav>
+</div></footer>
+</div>
+
+<script src="js/main.js" defer></script>
+</body>
+</html>

landing/js/main.js

@@ -0,0 +1,108 @@
+/* Mataba static interactions (vanilla JS) */
+(function(){
+  "use strict";
+  var body=document.body;
+  // Mobile menu (layoutContext port)
+  var burger=document.getElementById('hamburger');
+  var backdrop=document.getElementById('drawerBackdrop');
+  var closeBtn=document.getElementById('drawerClose');
+  function setMenu(open){
+    body.classList.toggle('menu-open',open);
+    if(burger)burger.setAttribute('aria-expanded',open?'true':'false');
+  }
+  if(burger)burger.addEventListener('click',function(){setMenu(!body.classList.contains('menu-open'));});
+  if(backdrop)backdrop.addEventListener('click',function(){setMenu(false);});
+  if(closeBtn)closeBtn.addEventListener('click',function(){setMenu(false);});
+  document.querySelectorAll('.nav a').forEach(function(a){a.addEventListener('click',function(){setMenu(false);});});
+  document.addEventListener('keydown',function(e){if(e.key==='Escape'){setMenu(false);closeModal();}});
+
+  // Login modal (sign-in-modal port, validation from login.schema.ts)
+  var modal=document.getElementById('loginModal');
+  var phone=document.getElementById('phoneInput');
+  var err=document.getElementById('phoneError');
+  var okMsg=document.getElementById('phoneOk');
+  function openModal(){if(modal){modal.classList.add('open');modal.setAttribute('aria-hidden','false');if(phone)phone.focus();}}
+  function closeModal(){if(modal){modal.classList.remove('open');modal.setAttribute('aria-hidden','true');}}
+  window.matabaOpenLogin=openModal;
+  document.querySelectorAll('[data-open-login]').forEach(function(b){b.addEventListener('click',openModal);});
+  document.querySelectorAll('[data-close-login]').forEach(function(b){b.addEventListener('click',closeModal);});
+  if(modal)modal.addEventListener('click',function(e){if(e.target===modal)closeModal();});
+  var form=document.getElementById('loginForm');
+  if(form)form.addEventListener('submit',function(e){
+    e.preventDefault();
+    var v=(phone.value||'').trim();
+    var valid=/^09\d{9}$/.test(v);
+    if(!valid){
+      err.textContent='شماره موبایل باید با 09 شروع شود و ۱۱ رقم باشد (مثلاً 09181234567).';
+      if(okMsg)okMsg.textContent='';
+      phone.setAttribute('aria-invalid','true');
+      return;
+    }
+    err.textContent='';
+    phone.removeAttribute('aria-invalid');
+    if(okMsg)okMsg.textContent='درخواست شما با موفقیت ثبت شد. کارشناسان مطبا به زودی با شما تماس می‌گیرند.';
+  });
+
+  // Testimonials carousel (DoctorsCmSlider port, replaces Swiper)
+  var track=document.getElementById('tTrack');
+  function step(){if(!track)return 0;var c=track.querySelector('.tcard');if(!c)return 320;return c.getBoundingClientRect().width+20;}
+  var prev=document.getElementById('tPrev'),next=document.getElementById('tNext');
+  if(prev&&track)prev.addEventListener('click',function(){track.scrollBy({left:step(),top:0,behavior:'smooth'});});
+  if(next&&track)next.addEventListener('click',function(){track.scrollBy({left:-step(),top:0,behavior:'smooth'});});
+  // autoplay 3s like original, pause on hover
+  var timer=null;
+  function start(){stop();timer=setInterval(function(){
+    if(!track)return;
+    var max=track.scrollWidth-track.clientWidth-4;
+    if(track.scrollLeft<=4){track.scrollTo({left:max,behavior:'smooth'});}
+    else{track.scrollBy({left:-step(),behavior:'smooth'});}
+  },3000);}
+  function stop(){if(timer)clearInterval(timer);timer=null;}
+  if(track){start();track.addEventListener('mouseenter',stop);track.addEventListener('mouseleave',start);}
+
+  var dForm=document.getElementById('domainForm');
+  if(dForm)dForm.addEventListener('submit',function(e){
+    e.preventDefault();
+    var q=document.getElementById('domainInput').value.trim();
+    var msg=document.getElementById('domainMsg');
+    if(!q){msg.textContent='نام دامنه را وارد کنید.';return;}
+    msg.textContent='نام دامنه «'+q+'» در دسترس است. برای ثبت با مطبا تماس بگیرید.';
+  });
+  document.querySelectorAll('.domain').forEach(function(b){
+    b.addEventListener('click',function(){
+      var inp=document.getElementById('domainInput');
+      if(inp){inp.value=inp.value.replace(/\.(ir|com|net|doctor|site|shop)\.?$/i,'')+b.textContent.trim();inp.focus();}
+    });
+  });
+
+  function wireLead(id){
+    var f=document.getElementById(id);
+    if(!f)return;
+    f.addEventListener('submit',function(e){
+      e.preventDefault();
+      var name=f.querySelector('[name=name]'),mobile=f.querySelector('[name=mobile]'),
+          spec=f.querySelector('[name=spec]'),msg=f.querySelector('textarea'),
+          eEl=f.querySelector('.ferr'),oEl=f.querySelector('.fok');
+      var problems=[];
+      if(name&&!name.value.trim())problems.push('نام و نام خانوادگی لازم است.');
+      var mv=mobile?mobile.value.trim():'';
+      if(mv&&!/^09\d{9}$/.test(mv))problems.push('شماره تماس معتبر نیست (11 رقم با 09).');
+      if(msg&&!msg.value.trim())problems.push('توضیحات را بنویسید.');
+      if(problems.length){eEl.textContent=problems.join(' ');oEl.textContent='';return;}
+      eEl.textContent='';
+      oEl.textContent='درخواست شما با موفقیت ثبت شد. کارشناسان مطبا به زودی با شما تماس می‌گیرند.';
+      f.reset();
+    });
+  }
+  wireLead('leadForm');wireLead('leadFormPage');wireLead('contactFormPage');
+
+  // Active nav on scroll
+  var links=document.querySelectorAll('.nav a[href^="#"]');
+  var secs=[].map.call(links,function(a){return document.querySelector(a.getAttribute('href'));}).filter(Boolean);
+  function onScroll(){
+    var y=window.scrollY+140,cur=null;
+    secs.forEach(function(s){if(s.offsetTop<=y)cur=s;});
+    links.forEach(function(a){a.classList.toggle('active',cur&&a.getAttribute('href')==='#'+cur.id);});
+  }
+  window.addEventListener('scroll',onScroll,{passive:true});onScroll();
+})();

landing/manifest.webmanifest

@@ -0,0 +1 @@
+{"name":"مطبا — Mataba","short_name":"مطبا","description":"طراحی سایت اختصاصی پزشکان","start_url":"https://mataba.ir/","display":"standalone","dir":"rtl","lang":"fa","background_color":"#ffffff","theme_color":"#9EB185","icons":[{"src":"assets/images/navLogo.png","sizes":"150x60","type":"image/png"}]}

landing/robots.txt

@@ -0,0 +1,8 @@
+User-agent: *
+Allow: /
+Allow: /assets/
+Allow: /css/
+Allow: /js/
+Disallow: /docs/
+
+Sitemap: https://mataba.ir/sitemap.xml

landing/sitemap.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url><loc>https://mataba.ir/</loc><lastmod>2026-09-20</lastmod><changefreq>weekly</changefreq><priority>1.0</priority></url>
+  <url><loc>https://mataba.ir/about/</loc><lastmod>2026-09-20</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+  <url><loc>https://mataba.ir/contact/</loc><lastmod>2026-09-20</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
+</urlset>