Initial commit of the Dr Shahab Mousavi website.

Next.js clone of the clinic site with Meshkee-backed articles and portfolio pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

.env.example

@@ -0,0 +1,11 @@
+# Meshkee Website API — see CONTEXT.md. All values below are the defaults that
+# src/lib/meshkee.ts falls back to, so a local .env.local is only needed to
+# point the site at a different tenant or environment.
+
+NEXT_PUBLIC_MESHKEE_API_BASE=https://api.meshkee.com/api/v1
+
+# Apex domain of this site: no www, api, customer or business prefix.
+NEXT_PUBLIC_SITE_DOMAIN=dr-mousavi.com
+
+# Customer portal used for sign-in and the header account icon.
+NEXT_PUBLIC_CUSTOMER_URL=https://customer.dr-mousavi.com

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+out
+.DS_Store
+*.log
+.env*.local
+tsconfig.tsbuildinfo

Ai-data/prompt-connect-backend.txt

@@ -0,0 +1,15 @@
+Domain: dr-mousavi.com
+Documentation for backend is:https://api.meshkee.com/docs/website
+
+
+Login or user icon should go to customer.{domainName}.com
+
+Create portfolio page and details (نمونه عمل ها) >> connect to portfolios
+Details page: 
+- use light box gallery 
+- has comments. Comment is for authenticated user if not show a login link button or box
+
+Create blog page and details >> connect to blog
+ 
+
+update context md for better use in other Ai and systems - update it on every prompt (If required)

Ai-data/prompt-images-slot.txt

@@ -0,0 +1,19 @@
+Wire this page to arjmandpharmacy.com static-image slots.
+
+Read http://meshkee.com/docs/website (static-images). Env is already set.
+
+Fetch slots, match by key:
+- slider > duplicatable
+- two-banner-below-slider > two slot
+- categories > duplicatable
+- two-banner-row → two slot
+- three-banner-row → three slot
+- about us image - one slot
+
+Use slot.images (all of them if kind=list, first if kind=single).
+url → <img src>. linkUrl → wrap in <a>. Empty or fail → keep current placeholder.
+Use slot.aspectRatio from the API. Do not invent upload APIs.
+
+If image size or aspect ratio has changed during development, please update it for statics image reader. Add this as rule
+
+update context md for better use in other Ai and systems - update it on every prompt (If required)

Ai-data/prompt.txt

@@ -0,0 +1,13 @@
+Clone a website for ent doctor from dr-mousavi.com
+Download and use banners,images and fonts from main website, icon and color Pallete from main website 
+Logo from main website either
+
+Pick data from current website - all data is valid
+Lang:fa
+Directions: rtl
+Use next js
+Color palette like website
+use flat design
+
+Clone only homepage, about us, contact us
+

CONTEXT.md

@@ -0,0 +1,135 @@
+# Project context — dr-mousavi.com clone
+
+Next.js rebuild of the ENT clinic site **dr-mousavi.com** (Dr Sayed Shahab Mousavipour).
+Static marketing pages are a faithful clone of the original theme; articles and
+portfolio entries come from the Meshkee Website API.
+
+Locale is Farsi (`fa`) and the layout is RTL. Keep this file current when the
+project changes — other AI tools and systems read it first.
+
+## Stack
+
+- Next.js 15 (App Router, Turbopack) + React 19 + TypeScript
+- No UI framework: the original theme's CSS is mirrored verbatim and reused
+- Dev server: `npm run dev` (this workspace usually runs it on port 3001)
+
+## Routes
+
+| Route | Source of content |
+| --- | --- |
+| `/` | `src/components/generated/HomeSections.tsx` (mirrored markup) |
+| `/about-us` | `AboutSections.tsx` (mirrored markup) |
+| `/contact-us` | `ContactSections.tsx` (mirrored markup) |
+| `/ourservices` | `ServicesSections.tsx` (mirrored markup) — nav label «تخصص ها» |
+| `/surgeries` | Meshkee API `portfolios` — nav label «نمونه عمل ها» |
+| `/surgeries/[slug]` | `portfolios/{slug}` + lightbox gallery + comments |
+| `/articles` | Meshkee API `blogs` — nav label «مجله سلامت» |
+| `/articles/[slug]` | `blogs/{slug}` + comments |
+
+Header and footer live in `SiteHeader.tsx` / `SiteFooter.tsx` (also generated).
+The account icon in the header points at the customer portal.
+
+## Cloned theme (static pages)
+
+- `public/theme/**` — the original CSS, fonts, icon font (Fontello), images and
+  `aos.js`, mirrored at their original paths so the theme CSS resolves.
+- `src/components/generated/**` — JSX converted from the original HTML by
+  `tools/clone_page.py`. **Do not hand-edit these files**; they are overwritten.
+  Put fixes in the converter or in `src/app/globals.css`.
+- `src/app/globals.css` — fonts, theme variables, and the overrides the clone
+  needs (each one carries a comment explaining what it outranks and why).
+
+Regenerate everything (downloads source HTML into `tools/.cache`, mirrors any new
+asset into `public/theme`, rewrites the components):
+
+```bash
+python3 tools/clone_page.py            # all pages
+python3 tools/clone_page.py services   # one page
+```
+
+Delete `tools/.cache` to pull fresh markup from the live site.
+
+### Conversion rules worth knowing
+
+- Internal links become `next/link`; the account icon becomes `{CUSTOMER_URL}`.
+- `data-aos` attributes are preserved: `ScrollAnimations.tsx` loads the theme's
+  own `aos.js` and calls `AOS.init()`, exactly like the original's `main.js`.
+- React style objects cannot express `!important`, so inline
+  `direction: ltr !important` (how the theme alternates image/text sides) becomes
+  the `wb-force-ltr` class defined in `globals.css`.
+- The theme's `.wb-convert-date` spans keep their timestamp as `data-date`;
+  `SiteBehaviour.tsx` formats them as Jalali dates.
+- Forms rendered by React components carry `data-react-form` so the theme's
+  generic form handler in `SiteBehaviour.tsx` leaves them alone.
+
+## Meshkee Website API
+
+Docs: <https://api.meshkee.com/docs/website> · OpenAPI:
+<https://api.meshkee.com/docs/website/openapi.json>
+
+Only public website endpoints are used — never dashboard/CMS routes.
+Client: `src/lib/meshkee.ts`.
+
+| Purpose | Endpoint |
+| --- | --- |
+| Tenant (businessId `20`, modules: portfolio, blog, videos, instructions) | `GET /tenants/{domain}` |
+| Article list | `GET /tenants/{domain}/blogs?page&pageSize&categoryId&title` |
+| Article detail | `GET /tenants/{domain}/blogs/{slug}` → `{ blog }` |
+| Portfolio list | `GET /tenants/{domain}/portfolios?page&pageSize&categoryId&title` |
+| Portfolio detail | `GET /tenants/{domain}/portfolios/{slug}` → `{ portfolio }` |
+| Farsi category names | `GET /tenants/{domain}/categories?entityType=blog\|portfolio` |
+| Approved comments | `GET /tenants/{domain}/comments?entityType&entityId` |
+| Submit comment | `POST /tenants/{domain}/comments` `{ entityType, entityId, authorName, authorEmail, text }` |
+
+Notes on the payloads:
+
+- Lists return `{ items, total, page, pageSize }`; details are wrapped in a
+  single key (`blog` / `portfolio`).
+- Portfolios add `titleFa` / `titleEn` and a `gallery` array; the Farsi title is
+  preferred. `gallery` is empty for every current entry, so detail pages fall
+  back to `titleImageUrl`.
+- Blog and portfolio items expose only the English `categoryName`, hence the
+  separate categories lookup for Farsi labels.
+- `mainTextHtml` is authored in the business dashboard and rendered with
+  `dangerouslySetInnerHTML`, styled by `.content-body` in `globals.css`.
+- Requests are cached for 300s (`revalidate`). A failed request logs and returns
+  an empty result so the page shows its empty state instead of erroring.
+
+### Comments and sign-in
+
+- Comments are gated: signed-in visitors get the form, everyone else gets a link
+  to the customer portal (`CommentForm.tsx`).
+- `useCustomerSession.ts` looks for a `meshkee_access_token` cookie (the portal
+  shares the apex domain) or the same key in `localStorage`, then confirms it
+  with `GET /auth/me` before trusting it.
+- Submitted comments are held for approval in the dashboard, so they do not
+  appear immediately; the UI says so.
+- The API itself accepts anonymous comments — the sign-in requirement is this
+  site's rule, not the API's.
+
+## Environment
+
+Defaults are in `src/lib/meshkee.ts`; override in `.env.local` (see `.env.example`).
+
+| Variable | Default |
+| --- | --- |
+| `NEXT_PUBLIC_MESHKEE_API_BASE` | `https://api.meshkee.com/api/v1` |
+| `NEXT_PUBLIC_SITE_DOMAIN` | `dr-mousavi.com` (apex only — no `www`) |
+| `NEXT_PUBLIC_CUSTOMER_URL` | `https://customer.<site domain>` |
+
+Pointing `NEXT_PUBLIC_SITE_DOMAIN` at another Meshkee tenant is a quick way to
+test the API-driven pages against a different content set.
+
+## Known gaps
+
+- The homepage «مقالات داغ و جذاب» carousel still shows the articles that were
+  hardcoded in the original markup; its cards link to `/articles`. Wiring it to
+  the API needs a slot mechanism in the converter.
+- Comment item fields (`id`, `authorName`, `text`, `createdAt`) are inferred:
+  no tenant has an approved comment yet to confirm them.
+- Portfolio galleries are empty upstream, so the lightbox has only ever been
+  exercised with the single title image.
+- `www.dr-mousavi.com` currently serves a certificate for an unrelated domain
+  and its HTML now belongs to another site, so re-running the converter against
+  the live site will fail until that hosting issue is fixed. The cached HTML in
+  `tools/.cache` is the last good copy.

eslint.config.mjs

@@ -0,0 +1,14 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends("next/core-web-vitals", "next/typescript")];
+
+export default eslintConfig;

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,9 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  images: {
+    unoptimized: true,
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "dr-mousavi",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.4.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/node": "^20.19.9",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@eslint/eslintrc": "^3.3.1",
+    "eslint": "^9.32.0",
+    "eslint-config-next": "^15.4.6",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.9.2"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

public/theme/css/modify.css

@@ -0,0 +1,158 @@
+/*----------------------------------------------------------------
+                                GLOBAL
+----------------------------------------------------------------*/
+body.wb-rtl .direction-auto {
+    direction: rtl !important;
+}
+
+.direction-auto .about-img-back {
+    left: 0;
+    right: unset;
+}
+
+body.wb-ltr .direction-auto {
+    direction: ltr !important;
+}
+
+body.wb-rtl .text-align-auto,
+body.wb-rtl .dropdown-item {
+    text-align: right !important;
+}
+
+body.wb-ltr .text-align-auto {
+    text-align: left !important;
+}
+
+.MulltipleEllipsis-Clamp2 {
+    overflow: hidden;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+/*----------------------------------------------------------------
+                                HEADER
+----------------------------------------------------------------*/
+@media(min-width: 1200px) {
+    body.wb-rtl .banner-details>figure {
+        margin-right: -180px;
+        margin-left: 0;
+    }
+}
+
+body.wb-rtl .banner-details-txt {
+    left: 0;
+    right: unset;
+}
+
+body.wb-rtl .banner-details-txt p:after {
+    right: -21px;
+    left: unset;
+}
+
+.banner-btn a:hover {
+    color: #000;
+}
+
+body.wb-rtl .dropdown-menu,
+body.wb-rtl .header-con .navbar-light .navbar-nav .nav-item::after {
+    right: 0;
+    left: unset;
+}
+
+body.wb-rtl .phone-txt {
+    padding-left: 0;
+    padding-right: 18px;
+}
+
+body.wb-rtl .service-provide-box {
+    padding-right: 37px;
+    padding-left: 0;
+}
+
+body.wb-rtl .provide-arrow figure {
+    margin-right: 11px;
+    margin-left: 0;
+}
+
+body.wb-rtl .patient-details .patient-rating {
+    margin-left: 0;
+    margin-right: 16px;
+}
+
+/*----------------------------------------------------------------
+                                FEATURE BOX
+----------------------------------------------------------------*/
+body.wb-rtl .contact-img-box {
+    margin-left: 25px;
+    margin-right: 0;
+    margin-top: 4px;
+}
+
+/*----------------------------------------------------------------
+                                CONTACT US
+----------------------------------------------------------------*/
+
+.contact-con:before {
+    background: transparent;
+}
+
+.contact-con.result-section:before {
+    background: transparent;
+}
+
+.dots-img:after,
+.contact-con.result-section:after {
+    width: 0;
+    height: 0;
+}
+
+#accordion button {
+    font-size: 1.1em;
+    text-decoration: none;
+    background-color: rgb(0 166 229 / 5%);
+    color: var(--wb-primary-color);
+    margin-bottom: 7px;
+    border-radius: 14px;
+}
+
+#content h3,
+#content h4, #content h2 {
+    color: #000;
+}
+@media only screen and (min-width: 1200px) {
+    body.wb-rtl .contact-form {
+        margin: auto -15% auto auto;
+    }
+
+    body.wb-rtl .header-con .navbar-expand-lg .navbar-nav {
+        margin-left: 75px;
+        margin-right: 0;
+    }
+
+    body.wb-rtl .banner-title p {
+        padding-left: 100px;
+        padding-right: 0;
+    }
+}
+
+@media only screen and (max-width: 991px) {
+    body.wb-rtl .banner-details>figure {
+        margin-left: -90px;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    body.wb-rtl .banner-details>figure {
+        margin-left: -70px;
+    }
+}
+
+@media only screen and (max-width: 575px) {
+    body.wb-rtl .banner-details>figure {
+        margin-left: 0;
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}

public/theme/css/owl.carousel.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.html) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

public/theme/css/superclasses.css

@@ -0,0 +1,72 @@
+:root {
+    --primary--color: #030d43;
+    --secondary--color: #243ffa;
+    --text-color: #757887;
+    --accent: #243ffa;
+    --white-color: #fff;
+}
+
+.wrapper {
+    max-width: 1374px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.wrapper2 {
+    max-width: 1540px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.wrapper3 {
+    max-width: 1175px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.sub-txt {
+    font-size: 16px;
+    line-height: 16px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: var(--secondary--color);
+}
+
+h1 {
+    font-size: 96px;
+    font-weight: 700;
+    color: var(--white-color);
+}
+
+h2 {
+    font-size: 52px;
+    font-weight: 600;
+    color: var(--primary--color);
+}
+
+h3 {
+    font-size: 28px;
+    font-weight: 500;
+}
+
+h4 {
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 22px;
+    color: var(--primary--color);
+}
+
+h5 {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--primary--color);
+}
+
+.padding-top {
+    padding-top: 150px;
+}
+
+.padding-bottom {
+    padding-bottom: 150px;
+}