commit 95733d99d43122e8c076c9e72c64f6c699d4f852
Author: Alireza Hassani <alireza-hassani@outlook.com>
Date:   Thu Sep 3 23:40:37 2026 +0330

    Initial commit of the Mado Motor public website.

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..e10db26
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=http://api.madomotor.com:3001/api/v1
+VITE_DASHBOARD_URL=http://manage.madomotor.com:5175
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f57fea2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
+.env.*
+!.env.example
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 0000000..6fa991d
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..b0a666b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,16 @@
+# React + TypeScript + Vite
+
+## Local development
+
+```bash
+npm install
+npm run dev
+```
+
+Open:
+
+- http://madomotor.com:5174
+- http://www.madomotor.com:5174
+- http://localhost:5174
+
+Local domains are in `/etc/hosts` (`../scripts/setup-hosts.sh`).
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..54b1c90
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="fa" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="خرید انواع موتور برقی با کیفیت از مادو | تجربه‌ ای نو از رانندگی بی‌ صدا، بدون بنزین و دوستدار محیط‌ زیست. قیمت مناسب، خدمات پس از فروش و ارسال سریع در سراسر ایران"
+    />
+    <link rel="canonical" href="https://madomotor.ir/" />
+    <title>خرید موتور سیکلت برقی از کارخانه | سایت رسمی مادو موتور</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8746ebb
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1353 @@
+{
+  "name": "website",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "website",
+      "version": "0.0.0",
+      "dependencies": {
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
+        "react-router-dom": "^7.18.3"
+      },
+      "devDependencies": {
+        "@types/node": "^24.13.3",
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.4",
+        "@vitejs/plugin-react": "^6.1.0",
+        "oxlint": "^1.79.0",
+        "typescript": "~6.0.2",
+        "vite": "^8.2.2"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.148.0.tgz",
+      "integrity": "sha512-Nm4s/jB+4FpFsPhWGEC4h7rzksesmtnMXomo6rCMcg/b8zLQuOziRgkCS1fxDCXOlJB/6Q8oABOZ/OP6RIPj9A==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm-eabi": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.81.0.tgz",
+      "integrity": "sha512-IcCRsXiedJoJopY6mpZUBEeVFsUrutmrG7dZ87zMuKJlhg70Ora9bBl1WcCxZQtyI10YpnVdEso5oCg7YcfSHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm64": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm64/-/binding-android-arm64-1.81.0.tgz",
+      "integrity": "sha512-GRrIPyTGVhx3L3h+0T5xT2A0jFAcdPv4+IfuXpGDLIdl6XeYhgg/zw72A5ILZoUgRqZuM8F1y+V/gfDriXSxzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-arm64": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.81.0.tgz",
+      "integrity": "sha512-qNQ9tXRgLuKbqSV1S2h9h4KPHjbovO7RRR2/enUOtHzTkFZ7B9X5zqqHJua8dRyc7dBy7Aoyq5pqTSLFVcAzGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-x64": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.81.0.tgz",
+      "integrity": "sha512-q0QTm32jWga2Gv4j7IaVZN0jYMi9UV73sWVgFtDA4iIfqwMCLLZ3ve+9KwfYtsaKZSgQhmPaogeZWqDZpcY1Pw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-freebsd-x64": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.81.0.tgz",
+      "integrity": "sha512-/+8wVWDXEC7wHVAhOc59Fw/SkMc1arLkFD8iQCaSsmzenK1X4doFqquL9H1wrtGUzaiycVqkf/sSpcILK6W1UA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-gnueabihf": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.81.0.tgz",
+      "integrity": "sha512-4xt422FEgioRq9hAL4Tq7fujGUWnc8z1BJ+Oi8RN8vB8axaP+sdK6a2xdlcQCCYnJg9QMuMFS0AucuIFx/EacA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-musleabihf": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.81.0.tgz",
+      "integrity": "sha512-u3vna8KdGplH4DRCW9K54D68fcMo7IxVrkCJWwXnIhwtBdnDnYrmzOUA/XjmBlPpcLsgw9Z5BNdY4za9+Dj+MQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-gnu": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.81.0.tgz",
+      "integrity": "sha512-3j9k+gsYsE7nv71GWotXsqsa2l9/aJenD7dVHNt/CBvsb0SgRjSMnHFeP59IXUAl1wvVFhqGl2wJNMwWU3UBlA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-musl": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.81.0.tgz",
+      "integrity": "sha512-k5iAp3dNxW0/uDCBY+WSm8jKB2szu7SkEQZdgRRpDXvuDd69vvDcqhB3A/pWCfCwXyenjNjFn9Td1fVoyAc+Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-ppc64-gnu": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.81.0.tgz",
+      "integrity": "sha512-TFqLja3uYmVSte6nof9GWrex9Z8WgdZrNiLC6Te5rXGDqXB2y4j/26iFhwosXiAFqDhE9JJVuuCkDKLwptTn1g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-gnu": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.81.0.tgz",
+      "integrity": "sha512-UEcySvGS0NOVo7h7n7CYyJL9+6gFAh7Zc/ToDXVScFvzHSTIxtzkMVU30rmQ6+nQ1LF+UdiRDdJajpDu+OylLg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-musl": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.81.0.tgz",
+      "integrity": "sha512-H+diDbhD00+wI1IRP8Kz88x/lat+DgtoBJzoTthS16xkTJGNaEkfb8gzmd1rzc/2uDQQMl7GNl+JFUacVeWxIA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-s390x-gnu": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.81.0.tgz",
+      "integrity": "sha512-8znJ/5TekjOKg1j1Acho4PJMdiAHLtlcXuWEiipOhAMV6rQcXdmDdXCbheyDczN6TjBwiNfjcP81k4AthrKRzw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-gnu": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.81.0.tgz",
+      "integrity": "sha512-Q2Wj70yFsvn5QjlmifFzbj4H+kJy53bwqc41o1fzoM7MpLV1NIbhg/LpWXRfC6KOkSAdUx1Wd8VJsdPmhp/HRA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-musl": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.81.0.tgz",
+      "integrity": "sha512-cPInHp/ddEe5qkyK2IiyQ8Q3Mp2oLLEhhsGgTK2oZx4L6+llGam1H1yBvJZ7qHfOXj8N3hxBS8sj4tO+gtFlIg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-openharmony-arm64": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.81.0.tgz",
+      "integrity": "sha512-0CQxSX4ajqm07AHBf5U33qQzXKdd7wtq/oTL/7vpY6RNNuxrRi8W4bqUV1Jyu/vj+9KmxQyDhxfeVX1nQL6kfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-arm64-msvc": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.81.0.tgz",
+      "integrity": "sha512-l0hbeISm9673hVrrQU8j/p2M7YH9Ouoj7p7E/QM55NTrKVLP+P3PF8hLu+OY+x0VtGRW+ggiQKZqmdYps9H+TA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-ia32-msvc": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.81.0.tgz",
+      "integrity": "sha512-ksqPP5jbFXcYreEQ7zdJh06rJQBymCTyGRCdaXjfcf2aG4f8KxUWY5wcgYHmaTK+FJ4bPG5sUAdOX+6trnH1JA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-x64-msvc": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.81.0.tgz",
+      "integrity": "sha512-IZuUCwGw9emG5JtCp+fYGB+Z4OWEoeEcM8R5BA1pYw63/ieYFVdcU2ylxTpHbVHSenZnsYE+ZZ20uHAJszQ4cA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm-eabi": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.7.tgz",
+      "integrity": "sha512-EypzgnYCwyVY4NDHKzGmNJT5b+XaQEBniHxsMdeIQLB/tcCzZnhqrzHpZFbX9iaxx+5RiB8caATBtfvZP7zVxQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.7.tgz",
+      "integrity": "sha512-l17HE9EweWaqJZhuUuNBN/FzM62xw+DECVnJyvMsxn8vJFAGLy5QfLDoYAcronkAN8VxKZHezDpulHDPx95vFw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.7.tgz",
+      "integrity": "sha512-8ED8ELFvHXc6OCETIn4gXObPiaR6bckM/ipXtbzlPVDRMBfEGjCKgO90F9YtfdpDatVx/ZQw7aZ1vUMf/+T3Mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.7.tgz",
+      "integrity": "sha512-/WPripjtiAIZ2tWY7ddijORT0Ujg87wxWW/qcoFVCKAWVDPhtY0xr7Dj0M3GyNGz60jGwTElhro/mkF9dT7dDQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.7.tgz",
+      "integrity": "sha512-14DI4NcqpvbICxSnGLx3PmtDaWqRP/KGSGb6C+JLLVPeZRl6dKdHba3pGsqT3vpdTqhEYIPG0MMQ8c0xYqoJxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.7.tgz",
+      "integrity": "sha512-bxrWIRvHWQvbJwi+VIie/kDJmQxcNE6xxWwZdqF/ExVAigtHkv54WTLQPb+QsZdnFy18fg7JPfWGL0RH6vwIlQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.7.tgz",
+      "integrity": "sha512-toOY2BChBZyuxU7OYX6Tn389di4IzAqPTycVcci0O7FSfBqzRB3RZn+K5Is6ANf4tmgRd/K1yZTsNTXbkXsnLg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.7.tgz",
+      "integrity": "sha512-lAIXTH/aiLRLxsTgQvfhjo4K1ydWIp00+V0voOr9beb/9ZmkUFrSIb03dXNFRgMNvkE6oGsF10ioQ6UsI+vS5Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.7.tgz",
+      "integrity": "sha512-kdnwS28Pkenp/mZMRwjXXXwxQ7pIsm+bF919LUK93BOyhcLsrVKdP2p9fxpiPNPAbNuch8ypQt0pm2P2LYCAGg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.7.tgz",
+      "integrity": "sha512-516OdsyLdr5E65paF3yBF55t8mfm9+gmtCsK3xI7XKXIT7EfRlHhxL8K/NR6Hu8BWSgF5+1w74lTL0+nxcc8Qw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.7.tgz",
+      "integrity": "sha512-r8/z8n7GFaYRln3xmP1Cxy0HH/HLM0uBUPkEuSVEfKGDA89M0FsZRZJRSwe/tJjRx+fpH/gjorfhB8tmEbSFLA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.7.tgz",
+      "integrity": "sha512-pAsE8iiDxUg1xBqdhrTfg45AVDVpirjz00sblEYClGNNcMnDb+e8beQgqIAw6LvauX/APvgxUnwrgun/YYGBhw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.7.tgz",
+      "integrity": "sha512-lTcIYmmnQQA8Or/2DatS6oSqcdLHvendjS+zLu+FwgToynWMRSmQdpM65fTANJgIS4mjbMOo5KT2lnT9SAb96w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.7.tgz",
+      "integrity": "sha512-e3Gu3WxbNk/UqQhxqU7YIYO+9ZBvWNz3U+h/qRFosscMFzdRPbXYSaSWgSnklv2fz1TgzBTcti2z35c/7irsHw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.7.tgz",
+      "integrity": "sha512-W/jg5qoRSqjsEv0+dZi4e687mcHqmVuU0P4fK6qS/xjetW2Gmc1W8j//z5nAeNcC8Ttm0hV46IjcYeuVwYhuiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.13.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz",
+      "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.6.tgz",
+      "integrity": "sha512-bzczc+lpPxs7hFBkaOht7j/zVcSZVBGZZajtQoMhTDTrwVCcNa+bd0+LfhDXhnEnT4OHHFBE2jLTenVL+UzF7Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.1.tgz",
+      "integrity": "sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "oxc-transform-react": "^0.145.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "oxc-transform-react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/oxlint": {
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.81.0.tgz",
+      "integrity": "sha512-HyrJYqeoOCL0iqaLEzGewGT48ZX99P3hxYh8udAF9RGGIghSamkXE4ClUyBpEDNqasamThgmlPbuMOe7SAZmHg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "oxlint": "bin/oxlint"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      },
+      "optionalDependencies": {
+        "@oxlint/binding-android-arm-eabi": "1.81.0",
+        "@oxlint/binding-android-arm64": "1.81.0",
+        "@oxlint/binding-darwin-arm64": "1.81.0",
+        "@oxlint/binding-darwin-x64": "1.81.0",
+        "@oxlint/binding-freebsd-x64": "1.81.0",
+        "@oxlint/binding-linux-arm-gnueabihf": "1.81.0",
+        "@oxlint/binding-linux-arm-musleabihf": "1.81.0",
+        "@oxlint/binding-linux-arm64-gnu": "1.81.0",
+        "@oxlint/binding-linux-arm64-musl": "1.81.0",
+        "@oxlint/binding-linux-ppc64-gnu": "1.81.0",
+        "@oxlint/binding-linux-riscv64-gnu": "1.81.0",
+        "@oxlint/binding-linux-riscv64-musl": "1.81.0",
+        "@oxlint/binding-linux-s390x-gnu": "1.81.0",
+        "@oxlint/binding-linux-x64-gnu": "1.81.0",
+        "@oxlint/binding-linux-x64-musl": "1.81.0",
+        "@oxlint/binding-openharmony-arm64": "1.81.0",
+        "@oxlint/binding-win32-arm64-msvc": "1.81.0",
+        "@oxlint/binding-win32-ia32-msvc": "1.81.0",
+        "@oxlint/binding-win32-x64-msvc": "1.81.0"
+      },
+      "peerDependencies": {
+        "oxlint-tsgolint": ">=7.0.2001",
+        "vite-plus": "*"
+      },
+      "peerDependenciesMeta": {
+        "oxlint-tsgolint": {
+          "optional": true
+        },
+        "vite-plus": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.27",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.27.tgz",
+      "integrity": "sha512-79Iho8QeYyooJ8e9lCRyTVlyTAkS/kXBYKff6TMzS3kEWGQ8Ds5UEtXpGrSUDLUWok6QTvxeYy0GO8fopHnaSA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.18",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
+      "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.8"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.3.tgz",
+      "integrity": "sha512-gyXgtdr5uACJ5b1Q4udzjVV+tb/rlHIMJKuJ0e89R4Kzgz47z/rgP0dIKxktqIEUhDHluGTPJJH/wRha7CyqsA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.3.tgz",
+      "integrity": "sha512-ytVbyBBM7vMfRCam25r0WMhSVSom909A8p+8m0/f1w853dz/xfFu6etAT2SEbVoSnI+ZoPRDqIsQXVT89gp7kg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.18.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.7.tgz",
+      "integrity": "sha512-g0EtLvBjTUB7jhyV0S/TCup3v/XSVl45vUIGbOGU4QPiyjTenCe4mKuFvW9fEgYmS2Fo42AUssRmNuMziXdrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.148.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm-eabi": "1.2.7",
+        "@rolldown/binding-android-arm64": "1.2.7",
+        "@rolldown/binding-darwin-arm64": "1.2.7",
+        "@rolldown/binding-darwin-x64": "1.2.7",
+        "@rolldown/binding-freebsd-x64": "1.2.7",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.7",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.7",
+        "@rolldown/binding-linux-arm64-musl": "1.2.7",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.7",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.7",
+        "@rolldown/binding-linux-x64-gnu": "1.2.7",
+        "@rolldown/binding-linux-x64-musl": "1.2.7",
+        "@rolldown/binding-openharmony-arm64": "1.2.7",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.7",
+        "@rolldown/binding-win32-x64-msvc": "1.2.7"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.2.tgz",
+      "integrity": "sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.26",
+        "rolldown": "~1.2.4",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.4.0 || ^0.5.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..6c1d16e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "madomotor-website",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.3"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.1.0",
+    "oxlint": "^1.79.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..fe94b76
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/public/icons.svg b/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..7985a19
Binary files /dev/null and b/public/logo.png differ
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..d07c10b
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://madomotor.ir/sitemap.xml
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..404ba1a
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,49 @@
+import { Navigate, Route, Routes } from 'react-router-dom'
+import Header from './components/Header'
+import Footer from './components/Footer'
+import HomePage from './pages/HomePage'
+import ProductsPage from './pages/ProductsPage'
+import ProductPage from './pages/ProductPage'
+import BlogListPage from './pages/BlogListPage'
+import BlogPostPage from './pages/BlogPostPage'
+import DealersPage from './pages/DealersPage'
+import RepresentationRequestPage from './pages/RepresentationRequestPage'
+import LandingModelPage from './pages/LandingModelPage'
+import AboutPage from './pages/AboutPage'
+import ContactPage from './pages/ContactPage'
+import NotFoundPage from './pages/NotFoundPage'
+import { paths } from './lib/paths'
+
+export default function App() {
+  return (
+    <div className="app">
+      <Header />
+      <main>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+
+          <Route path="/product/list/:slug?" element={<ProductsPage />} />
+          <Route path="/product/:id/:slug?" element={<ProductPage />} />
+          <Route path="/products" element={<ProductsPage />} />
+
+          <Route path="/blog/list/:slug?" element={<BlogListPage />} />
+          <Route path="/blog/:id/:slug?" element={<BlogPostPage />} />
+          <Route path="/blog" element={<Navigate to={paths.blog} replace />} />
+
+          <Route path="/representation/list/:slug?" element={<DealersPage />} />
+          <Route path="/dealers" element={<DealersPage />} />
+          <Route path="/representation/request" element={<RepresentationRequestPage />} />
+
+          <Route path="/contactus/:slug?" element={<ContactPage />} />
+          <Route path="/contact" element={<ContactPage />} />
+          <Route path="/aboutus/:slug?" element={<AboutPage />} />
+          <Route path="/about" element={<AboutPage />} />
+
+          <Route path="/landing/:model/:slug?" element={<LandingModelPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </main>
+      <Footer />
+    </div>
+  )
+}
diff --git a/src/assets/fonts/iranyekan/eot/iranyekanwebbold.eot b/src/assets/fonts/iranyekan/eot/iranyekanwebbold.eot
new file mode 100644
index 0000000..16e8fbc
Binary files /dev/null and b/src/assets/fonts/iranyekan/eot/iranyekanwebbold.eot differ
diff --git a/src/assets/fonts/iranyekan/eot/iranyekanweblight.eot b/src/assets/fonts/iranyekan/eot/iranyekanweblight.eot
new file mode 100644
index 0000000..512a46a
Binary files /dev/null and b/src/assets/fonts/iranyekan/eot/iranyekanweblight.eot differ
diff --git a/src/assets/fonts/iranyekan/eot/iranyekanwebmedium.eot b/src/assets/fonts/iranyekan/eot/iranyekanwebmedium.eot
new file mode 100644
index 0000000..e2d5f34
Binary files /dev/null and b/src/assets/fonts/iranyekan/eot/iranyekanwebmedium.eot differ
diff --git a/src/assets/fonts/iranyekan/ttf/iranyekanwebbold.ttf b/src/assets/fonts/iranyekan/ttf/iranyekanwebbold.ttf
new file mode 100644
index 0000000..1c6bbd4
Binary files /dev/null and b/src/assets/fonts/iranyekan/ttf/iranyekanwebbold.ttf differ
diff --git a/src/assets/fonts/iranyekan/ttf/iranyekanweblight.ttf b/src/assets/fonts/iranyekan/ttf/iranyekanweblight.ttf
new file mode 100644
index 0000000..9e81193
Binary files /dev/null and b/src/assets/fonts/iranyekan/ttf/iranyekanweblight.ttf differ
diff --git a/src/assets/fonts/iranyekan/ttf/iranyekanwebmedium.ttf b/src/assets/fonts/iranyekan/ttf/iranyekanwebmedium.ttf
new file mode 100644
index 0000000..4dc2ad7
Binary files /dev/null and b/src/assets/fonts/iranyekan/ttf/iranyekanwebmedium.ttf differ
diff --git a/src/assets/fonts/iranyekan/woff/iranyekanwebbold.woff b/src/assets/fonts/iranyekan/woff/iranyekanwebbold.woff
new file mode 100644
index 0000000..7707c6f
Binary files /dev/null and b/src/assets/fonts/iranyekan/woff/iranyekanwebbold.woff differ
diff --git a/src/assets/fonts/iranyekan/woff/iranyekanweblight.woff b/src/assets/fonts/iranyekan/woff/iranyekanweblight.woff
new file mode 100644
index 0000000..9e6d42c
Binary files /dev/null and b/src/assets/fonts/iranyekan/woff/iranyekanweblight.woff differ
diff --git a/src/assets/fonts/iranyekan/woff/iranyekanwebmedium.woff b/src/assets/fonts/iranyekan/woff/iranyekanwebmedium.woff
new file mode 100644
index 0000000..8fe8e40
Binary files /dev/null and b/src/assets/fonts/iranyekan/woff/iranyekanwebmedium.woff differ
diff --git a/src/assets/fonts/montserrat/Montserrat-Light.woff b/src/assets/fonts/montserrat/Montserrat-Light.woff
new file mode 100644
index 0000000..ff7cd8f
Binary files /dev/null and b/src/assets/fonts/montserrat/Montserrat-Light.woff differ
diff --git a/src/assets/fonts/montserrat/Montserrat-Regular.woff b/src/assets/fonts/montserrat/Montserrat-Regular.woff
new file mode 100644
index 0000000..e77f1bc
Binary files /dev/null and b/src/assets/fonts/montserrat/Montserrat-Regular.woff differ
diff --git a/src/assets/fonts/montserrat/montserrat-bold.woff b/src/assets/fonts/montserrat/montserrat-bold.woff
new file mode 100644
index 0000000..f2f7a8f
Binary files /dev/null and b/src/assets/fonts/montserrat/montserrat-bold.woff differ
diff --git a/src/assets/hero.png b/src/assets/hero.png
new file mode 100644
index 0000000..02251f4
Binary files /dev/null and b/src/assets/hero.png differ
diff --git a/src/assets/images/150.png b/src/assets/images/150.png
new file mode 100644
index 0000000..a1bc604
Binary files /dev/null and b/src/assets/images/150.png differ
diff --git a/src/assets/images/36month.png b/src/assets/images/36month.png
new file mode 100644
index 0000000..922ef03
Binary files /dev/null and b/src/assets/images/36month.png differ
diff --git a/src/assets/images/Funnel.png b/src/assets/images/Funnel.png
new file mode 100644
index 0000000..d6975da
Binary files /dev/null and b/src/assets/images/Funnel.png differ
diff --git a/src/assets/images/about-pattern.png b/src/assets/images/about-pattern.png
new file mode 100644
index 0000000..3e32268
Binary files /dev/null and b/src/assets/images/about-pattern.png differ
diff --git a/src/assets/images/aboutus-motor.png b/src/assets/images/aboutus-motor.png
new file mode 100644
index 0000000..976b1c7
Binary files /dev/null and b/src/assets/images/aboutus-motor.png differ
diff --git a/src/assets/images/back.png b/src/assets/images/back.png
new file mode 100644
index 0000000..99ec8fb
Binary files /dev/null and b/src/assets/images/back.png differ
diff --git a/src/assets/images/bg.jpg b/src/assets/images/bg.jpg
new file mode 100644
index 0000000..1b35423
Binary files /dev/null and b/src/assets/images/bg.jpg differ
diff --git a/src/assets/images/bog-logo.png b/src/assets/images/bog-logo.png
new file mode 100644
index 0000000..2f547b0
Binary files /dev/null and b/src/assets/images/bog-logo.png differ
diff --git a/src/assets/images/casket-hat.svg b/src/assets/images/casket-hat.svg
new file mode 100644
index 0000000..0d7616d
--- /dev/null
+++ b/src/assets/images/casket-hat.svg
@@ -0,0 +1,4 @@
+<svg width="63" height="58" viewBox="0 0 63 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.2141 0.176514C14.7822 0.176514 0.350605 14.6421 0.350605 31.1127V43.855C0.34637 45.8169 1.06417 47.7114 2.36657 49.1759C3.66898 50.6403 5.4645 51.5718 7.40937 51.7921L48.1915 57.8236C51.87 57.8236 55.3978 56.3589 57.9988 53.7517C60.5998 51.1445 62.0611 47.6084 62.0611 43.9213V31.1127C62.0524 22.9135 58.8001 15.0523 53.0176 9.25305C47.235 3.45376 39.3941 0.18967 31.2141 0.176514ZM7.82265 48.5112C6.6784 48.3848 5.6208 47.84 4.85222 46.9809C4.08364 46.1219 3.65803 45.0089 3.65682 43.855V31.1127C3.841 23.845 6.80347 16.926 11.9321 11.7853C17.0607 6.64458 23.9635 3.67513 31.2141 3.49052C36.4656 3.4997 41.6051 5.01274 46.0274 7.85148C50.4498 10.6902 53.9709 14.7364 56.176 19.5137L23.99 16.9454C23.2132 16.8812 22.4315 16.9792 21.6943 17.2333C20.9572 17.4873 20.2806 17.8918 19.7074 18.4213C19.1341 18.9507 18.6766 19.5936 18.3638 20.3093C18.0511 21.0249 17.8897 21.7978 17.8901 22.5792V28.7266C17.8923 31.152 18.6025 33.5238 19.9332 35.5495C21.2638 37.5752 23.1568 39.1663 25.3787 40.1268L54.2088 52.6206C52.4788 53.8367 50.4202 54.4956 48.3073 54.5096L7.82265 48.5112ZM58.7549 43.9213C58.7532 46.1462 58.0534 48.3143 56.7546 50.1185L26.6846 37.0779C25.0675 36.3782 23.6879 35.2227 22.7136 33.7519C21.7393 32.2812 21.2122 30.5583 21.1963 28.7929V22.5792C21.2066 22.2661 21.2792 21.9583 21.4098 21.6738C21.5404 21.3893 21.7263 21.1337 21.9567 20.9222C22.3847 20.5272 22.9454 20.3083 23.5272 20.3091L57.4985 23.01C58.1456 25.6928 58.5658 28.4254 58.7549 31.179V43.9213Z" fill="#2073D2"/>
+<path d="M25.6798 27.5295C25.6798 26.0006 26.9195 24.7598 28.4469 24.7598C29.9744 24.7598 31.2141 26.0006 31.2141 27.5295C31.2141 29.0583 29.9744 30.2991 28.4469 30.2991C26.9195 30.2991 25.6798 29.0583 25.6798 27.5295Z" fill="#D2D2D2"/>
+</svg>
diff --git a/src/assets/images/chat.svg b/src/assets/images/chat.svg
new file mode 100644
index 0000000..69f6224
--- /dev/null
+++ b/src/assets/images/chat.svg
@@ -0,0 +1,12 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_598_43)">
+<path d="M43.3241 0H6.68838C3.07585 0 0.143948 2.93191 0.130859 6.54443V32.5782C0.130859 36.1907 3.06277 39.1226 6.67529 39.1357H17.3165L23.8872 49.4105C24.1228 49.7901 24.5416 50.0126 24.9866 49.9995C25.4316 49.9995 25.8505 49.777 26.0861 49.3974L32.5913 39.1357H43.3241C46.9366 39.1226 49.8686 36.1907 49.8686 32.5782V6.54443C49.8555 2.93191 46.9366 0 43.3241 0ZM47.2508 32.5782C47.2508 34.7509 45.4838 36.5179 43.3241 36.5179H31.8975C31.4525 36.5179 31.0337 36.7405 30.785 37.12L24.9997 46.2561L19.149 37.12C18.9134 36.7405 18.4945 36.5179 18.0495 36.5179H6.67529C4.50254 36.5049 2.74863 34.7509 2.74863 32.5782V6.54443C2.74863 4.37168 4.51563 2.61777 6.67529 2.61777H43.311C45.4838 2.61777 47.2377 4.37168 47.2508 6.54443V32.5782Z" fill="#2C86ED"/>
+<path d="M23.9527 14.3977H14.2669C13.547 14.3977 12.958 14.9867 12.958 15.7066C12.958 16.4265 13.547 17.0155 14.2669 17.0155H23.9527C24.6725 17.0155 25.2615 16.4265 25.2615 15.7066C25.2615 14.9867 24.6725 14.3977 23.9527 14.3977Z" fill="#D0D0D0"/>
+<path d="M35.7326 20.9421H14.2669C13.547 20.9421 12.958 21.5311 12.958 22.251C12.958 22.9709 13.547 23.5599 14.2669 23.5599H35.7326C36.4525 23.5599 37.0415 22.9709 37.0415 22.251C37.0415 21.5311 36.4525 20.9421 35.7326 20.9421Z" fill="#2C86ED"/>
+</g>
+<defs>
+<clipPath id="clip0_598_43">
+<rect width="50" height="50" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/cities/bandare-abbas.jpg b/src/assets/images/cities/bandare-abbas.jpg
new file mode 100644
index 0000000..7635916
Binary files /dev/null and b/src/assets/images/cities/bandare-abbas.jpg differ
diff --git a/src/assets/images/cities/booshehr.jpg b/src/assets/images/cities/booshehr.jpg
new file mode 100644
index 0000000..faa3933
Binary files /dev/null and b/src/assets/images/cities/booshehr.jpg differ
diff --git a/src/assets/images/cities/gorgan.jpg b/src/assets/images/cities/gorgan.jpg
new file mode 100644
index 0000000..3e6e8d3
Binary files /dev/null and b/src/assets/images/cities/gorgan.jpg differ
diff --git a/src/assets/images/cities/isfahan.png b/src/assets/images/cities/isfahan.png
new file mode 100644
index 0000000..764e97e
Binary files /dev/null and b/src/assets/images/cities/isfahan.png differ
diff --git a/src/assets/images/cities/kerman.jpg b/src/assets/images/cities/kerman.jpg
new file mode 100644
index 0000000..81ca7f0
Binary files /dev/null and b/src/assets/images/cities/kerman.jpg differ
diff --git a/src/assets/images/cities/kish.jpg b/src/assets/images/cities/kish.jpg
new file mode 100644
index 0000000..417a9e9
Binary files /dev/null and b/src/assets/images/cities/kish.jpg differ
diff --git a/src/assets/images/cities/mashhad.jpg b/src/assets/images/cities/mashhad.jpg
new file mode 100644
index 0000000..92b54b9
Binary files /dev/null and b/src/assets/images/cities/mashhad.jpg differ
diff --git a/src/assets/images/cities/mazandaran.jpg b/src/assets/images/cities/mazandaran.jpg
new file mode 100644
index 0000000..772d23b
Binary files /dev/null and b/src/assets/images/cities/mazandaran.jpg differ
diff --git a/src/assets/images/cities/qeshm.jpg b/src/assets/images/cities/qeshm.jpg
new file mode 100644
index 0000000..f28478f
Binary files /dev/null and b/src/assets/images/cities/qeshm.jpg differ
diff --git a/src/assets/images/cities/qom.jpg b/src/assets/images/cities/qom.jpg
new file mode 100644
index 0000000..0be25a4
Binary files /dev/null and b/src/assets/images/cities/qom.jpg differ
diff --git a/src/assets/images/cities/rasht.png b/src/assets/images/cities/rasht.png
new file mode 100644
index 0000000..ea93f91
Binary files /dev/null and b/src/assets/images/cities/rasht.png differ
diff --git a/src/assets/images/cities/shiraz.jpg b/src/assets/images/cities/shiraz.jpg
new file mode 100644
index 0000000..ebaf5f4
Binary files /dev/null and b/src/assets/images/cities/shiraz.jpg differ
diff --git a/src/assets/images/cities/tabriz.jpg b/src/assets/images/cities/tabriz.jpg
new file mode 100644
index 0000000..b5bcc33
Binary files /dev/null and b/src/assets/images/cities/tabriz.jpg differ
diff --git a/src/assets/images/cities/tehran.jpg b/src/assets/images/cities/tehran.jpg
new file mode 100644
index 0000000..2403b3b
Binary files /dev/null and b/src/assets/images/cities/tehran.jpg differ
diff --git a/src/assets/images/cities/urmia.jpg b/src/assets/images/cities/urmia.jpg
new file mode 100644
index 0000000..3ad50f1
Binary files /dev/null and b/src/assets/images/cities/urmia.jpg differ
diff --git a/src/assets/images/cities/yazd.jpg b/src/assets/images/cities/yazd.jpg
new file mode 100644
index 0000000..9370d1e
Binary files /dev/null and b/src/assets/images/cities/yazd.jpg differ
diff --git a/src/assets/images/comments.png b/src/assets/images/comments.png
new file mode 100644
index 0000000..c8ac8f6
Binary files /dev/null and b/src/assets/images/comments.png differ
diff --git a/src/assets/images/confirmation.png b/src/assets/images/confirmation.png
new file mode 100644
index 0000000..5a27c25
Binary files /dev/null and b/src/assets/images/confirmation.png differ
diff --git a/src/assets/images/gray-rectangle.png b/src/assets/images/gray-rectangle.png
new file mode 100644
index 0000000..c3cb48c
Binary files /dev/null and b/src/assets/images/gray-rectangle.png differ
diff --git a/src/assets/images/guarantee-typo.png b/src/assets/images/guarantee-typo.png
new file mode 100644
index 0000000..64806ea
Binary files /dev/null and b/src/assets/images/guarantee-typo.png differ
diff --git a/src/assets/images/icons/1.png b/src/assets/images/icons/1.png
new file mode 100644
index 0000000..6168d01
Binary files /dev/null and b/src/assets/images/icons/1.png differ
diff --git a/src/assets/images/icons/2.png b/src/assets/images/icons/2.png
new file mode 100644
index 0000000..71e5fda
Binary files /dev/null and b/src/assets/images/icons/2.png differ
diff --git a/src/assets/images/icons/3.png b/src/assets/images/icons/3.png
new file mode 100644
index 0000000..2a1d481
Binary files /dev/null and b/src/assets/images/icons/3.png differ
diff --git a/src/assets/images/icons/4.png b/src/assets/images/icons/4.png
new file mode 100644
index 0000000..11d5b91
Binary files /dev/null and b/src/assets/images/icons/4.png differ
diff --git a/src/assets/images/icons/angle-down.svg b/src/assets/images/icons/angle-down.svg
new file mode 100644
index 0000000..b2ec534
--- /dev/null
+++ b/src/assets/images/icons/angle-down.svg
@@ -0,0 +1,17 @@
+<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2350_55)">
+<path d="M26 2L16 12L6 2" stroke="#2C86ED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_2350_55" x="0.5" y="0.5" width="31" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.174219 0 0 0 0 0.526245 0 0 0 0 0.929167 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2350_55"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2350_55" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/images/icons/angle-left-2.svg b/src/assets/images/icons/angle-left-2.svg
new file mode 100644
index 0000000..8ce5173
--- /dev/null
+++ b/src/assets/images/icons/angle-left-2.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.579425 4.99881L5.93302 0.351814C6.02428 0.268415 6.0219 0.137073 5.92823 0.0578579C5.83456 -0.019286 5.68804 -0.019286 5.59437 0.0578579L0.0702525 4.85287C-0.0234175 4.93418 -0.0234175 5.06552 0.0702525 5.14683L5.59437 9.94186C5.69045 10.0211 5.84176 10.019 5.93302 9.9377C6.0219 9.85639 6.0219 9.72921 5.93302 9.64791L0.579425 4.99881Z" fill="#2073D2"/>
+</svg>
diff --git a/src/assets/images/icons/angle-left.svg b/src/assets/images/icons/angle-left.svg
new file mode 100644
index 0000000..48bdd4d
--- /dev/null
+++ b/src/assets/images/icons/angle-left.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.738761 6.69054L7.56454 0.470876C7.6809 0.359254 7.67785 0.183463 7.55843 0.0774385C7.439 -0.0258128 7.25219 -0.0258128 7.13276 0.0774385L0.0895711 6.49521C-0.029857 6.60403 -0.029857 6.77983 0.0895711 6.88865L7.13276 13.3064C7.25526 13.4125 7.44818 13.4097 7.56454 13.3009C7.67785 13.1921 7.67785 13.0218 7.56454 12.913L0.738761 6.69054Z" fill="#646464"/>
+</svg>
diff --git a/src/assets/images/icons/arrow-down.svg b/src/assets/images/icons/arrow-down.svg
new file mode 100644
index 0000000..cb41cf4
--- /dev/null
+++ b/src/assets/images/icons/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4085 0.00693525C12.1532 0.0538141 11.9762 0.282984 11.9762 0.538231L11.9762 23.2277L2.44931 13.6956C2.24094 13.4977 1.91279 13.5029 1.71487 13.706C1.52213 13.9092 1.52213 14.2269 1.71487 14.4301L12.1324 24.8476C12.3356 25.0508 12.6637 25.0508 12.8669 24.8476L23.2844 14.4301C23.4824 14.2217 23.4772 13.8936 23.274 13.6956C23.0709 13.5029 22.7531 13.5029 22.55 13.6956L13.0179 23.2277L13.0179 0.522606C13.0179 0.204853 12.7315 -0.0451697 12.4085 0.00693525Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/icons/arrow-left.svg b/src/assets/images/icons/arrow-left.svg
new file mode 100644
index 0000000..1e283e4
--- /dev/null
+++ b/src/assets/images/icons/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.9931 12.4085C24.9462 12.1532 24.717 11.9761 24.4618 11.9761H1.77227L11.3044 2.44929C11.5023 2.24092 11.4971 1.91276 11.294 1.71485C11.0908 1.5221 10.7731 1.5221 10.5699 1.71485L0.152357 12.1324C-0.0507857 12.3356 -0.0507857 12.6637 0.152357 12.8669L10.5699 23.2844C10.7783 23.4823 11.1064 23.4772 11.3044 23.274C11.4971 23.0709 11.4971 22.7531 11.3044 22.55L1.77227 13.0179H24.4774C24.7951 13.0179 25.0452 12.7314 24.9931 12.4085Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/icons/cart.svg b/src/assets/images/icons/cart.svg
new file mode 100644
index 0000000..798baf7
--- /dev/null
+++ b/src/assets/images/icons/cart.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_86)">
+<path d="M8.86403 18.4C7.31763 18.4 6.06403 19.6536 6.06403 21.2C6.06403 22.7464 7.31763 24 8.86403 24C10.4097 23.9982 11.6623 22.7456 11.664 21.2C11.664 19.6536 10.4104 18.4 8.86403 18.4ZM8.86403 23.2C7.75948 23.2 6.86403 22.3045 6.86403 21.2C6.86403 20.0954 7.75948 19.2 8.86403 19.2C9.96803 19.2013 10.8627 20.096 10.864 21.2C10.864 22.3045 9.96858 23.2 8.86403 23.2Z" fill="black"/>
+<path d="M18.464 18.4C16.9176 18.4 15.664 19.6536 15.664 21.2C15.664 22.7464 16.9176 24 18.464 24C20.0097 23.9982 21.2623 22.7456 21.264 21.2C21.264 19.6536 20.0104 18.4 18.464 18.4ZM18.464 23.2C17.3595 23.2 16.464 22.3045 16.464 21.2C16.464 20.0954 17.3595 19.2 18.464 19.2C19.568 19.2013 20.4627 20.096 20.464 21.2C20.464 22.3045 19.5686 23.2 18.464 23.2Z" fill="black"/>
+<path d="M23.536 5.6H4.10683L2.85323 0.308C2.81058 0.12755 2.64948 5e-05 2.46403 0H0.464026C0.243126 0 0.0640259 0.1791 0.0640259 0.4C0.0640259 0.6209 0.243126 0.8 0.464026 0.8H2.14763L5.67483 15.692C5.71748 15.8724 5.87858 16 6.06403 16H21.264C21.4849 16 21.664 15.8209 21.664 15.6C21.664 15.3791 21.4849 15.2 21.264 15.2H6.38043L5.81203 12.8H22.02C22.2409 12.8221 22.438 12.6609 22.4601 12.4401C22.4822 12.2191 22.321 12.0221 22.1001 12C22.0735 11.9973 22.0467 11.9973 22.02 12H5.62403L5.05563 9.6H22.78C23.0009 9.6 23.18 9.4209 23.18 9.2C23.18 8.9791 23.0009 8.8 22.78 8.8H4.86403L4.29603 6.4H23.536C23.7569 6.4 23.936 6.2209 23.936 6C23.936 5.7791 23.7569 5.6 23.536 5.6Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4_86">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/icons/eitaa.png b/src/assets/images/icons/eitaa.png
new file mode 100644
index 0000000..ec30a75
Binary files /dev/null and b/src/assets/images/icons/eitaa.png differ
diff --git a/src/assets/images/icons/fast-charge.svg b/src/assets/images/icons/fast-charge.svg
new file mode 100644
index 0000000..9b7e73f
--- /dev/null
+++ b/src/assets/images/icons/fast-charge.svg
@@ -0,0 +1,10 @@
+<svg width="36" height="49" viewBox="0 0 36 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.5658 23.9866L12.6541 48.4835C12.4113 48.7421 12.0908 48.9149 11.741 48.9757C11.3911 49.0366 11.031 48.9823 10.7148 48.8209C10.3987 48.6596 10.1436 48.4001 9.98828 48.0814C9.83291 47.7628 9.78562 47.4024 9.85352 47.0546L12.8525 32.0849L1.06319 27.6673C0.809996 27.5727 0.584207 27.4171 0.405995 27.2143C0.227782 27.0114 0.102695 26.7677 0.0419101 26.5049C-0.0188751 26.242 -0.0134653 25.9682 0.0576556 25.708C0.128777 25.4477 0.263393 25.2091 0.44948 25.0134L23.3612 0.516462C23.604 0.257888 23.9245 0.0851349 24.2743 0.0242717C24.6242 -0.0365915 24.9843 0.0177376 25.3005 0.179061C25.6166 0.340384 25.8717 0.599948 26.027 0.918583C26.1824 1.23722 26.2297 1.59764 26.1618 1.94545L23.1546 16.9315L34.9439 21.343C35.1953 21.4381 35.4192 21.5936 35.5961 21.7956C35.7729 21.9976 35.8971 22.24 35.9578 22.5013C36.0184 22.7627 36.0137 23.0349 35.9439 23.2939C35.8741 23.5529 35.7414 23.7908 35.5576 23.9866H35.5658Z" fill="url(#paint0_linear_2367_101)"/>
+<defs>
+<linearGradient id="paint0_linear_2367_101" x1="0" y1="24.5" x2="36" y2="24.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A6CAFF"/>
+<stop offset="0.461538" stop-color="#57B1FF"/>
+<stop offset="1" stop-color="#2C86ED"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/images/icons/home.svg b/src/assets/images/icons/home.svg
new file mode 100644
index 0000000..423d6f2
--- /dev/null
+++ b/src/assets/images/icons/home.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0932 1.60767C10.9025 1.60767 9.95381 2.59151 9.89243 2.6565L9.86262 2.6914L9.81352 2.73713C9.75506 2.79129 3.96106 8.17984 2.3863 9.63183C1.38907 10.5519 1.41713 11.558 1.4259 11.6976L1.43583 11.7493V11.8631V20.1869C1.43583 21.388 1.80293 22.2845 2.52718 22.8508C2.99715 23.2184 3.49167 23.3538 3.66294 23.3917C4.455 23.3893 9.33127 23.3767 13.6738 23.3767C16.4481 23.3767 18.4659 23.3821 19.6713 23.3917C19.6865 23.3917 19.7011 23.3917 19.7157 23.3917C20.8959 23.3917 21.6973 23.0078 22.1643 22.2183C22.5227 21.6124 22.5712 20.9625 22.5764 20.8771V11.283C22.5764 10.8022 21.9083 9.91284 21.4383 9.47116C21.1098 9.18594 17.3278 5.89143 14.2204 2.6926C13.5201 1.97293 12.8046 1.60767 12.0932 1.60767ZM12.0932 0.344025C12.9969 0.344025 14.0275 0.708075 15.0879 1.79963C18.2695 5.07488 22.2462 8.51982 22.2462 8.51982C22.2462 8.51982 23.8034 9.95255 23.8034 11.283V20.903C23.8034 20.903 23.7374 24.656 19.7157 24.656C19.6976 24.656 19.6794 24.656 19.6613 24.656C18.3028 24.6445 16.06 24.6409 13.6738 24.6409C8.90163 24.6409 3.55539 24.656 3.55539 24.656C3.55539 24.656 0.208292 24.2125 0.208292 20.1869C0.208292 16.1613 0.208292 11.8631 0.208292 11.8631C0.208292 11.8631 -0.0237732 10.1571 1.56677 8.69071C3.15731 7.22368 8.98989 1.79963 8.98989 1.79963C8.98989 1.79963 10.2864 0.344025 12.0932 0.344025Z" fill="#14244C"/>
+</svg>
diff --git a/src/assets/images/icons/instagram.png b/src/assets/images/icons/instagram.png
new file mode 100644
index 0000000..f2ae6d4
Binary files /dev/null and b/src/assets/images/icons/instagram.png differ
diff --git a/src/assets/images/icons/left-white.png b/src/assets/images/icons/left-white.png
new file mode 100644
index 0000000..37545e8
Binary files /dev/null and b/src/assets/images/icons/left-white.png differ
diff --git a/src/assets/images/icons/motor-icon.png b/src/assets/images/icons/motor-icon.png
new file mode 100644
index 0000000..70937ff
Binary files /dev/null and b/src/assets/images/icons/motor-icon.png differ
diff --git a/src/assets/images/icons/telegram.png b/src/assets/images/icons/telegram.png
new file mode 100644
index 0000000..284482d
Binary files /dev/null and b/src/assets/images/icons/telegram.png differ
diff --git a/src/assets/images/icons/user.svg b/src/assets/images/icons/user.svg
new file mode 100644
index 0000000..7af593f
--- /dev/null
+++ b/src/assets/images/icons/user.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_115)">
+<path d="M11.9999 12.0309C5.67528 12.0309 0.529602 17.1766 0.529602 23.5013C0.529602 23.7765 0.75304 24 1.02833 24C1.30362 24 1.52706 23.7765 1.52706 23.5013C1.52706 17.7262 6.22492 13.0283 12 13.0283C17.7751 13.0283 22.4729 17.7262 22.4729 23.5013C22.4729 23.7765 22.6964 24 22.9717 24C23.2469 24 23.4704 23.7765 23.4704 23.5013C23.4703 17.1756 18.3246 12.0309 11.9999 12.0309Z" fill="black"/>
+<path d="M12 0C8.97577 0 6.51416 2.46063 6.51416 5.48581C6.51416 8.51099 8.97582 10.9716 12 10.9716C15.0241 10.9716 17.4858 8.51099 17.4858 5.48581C17.4858 2.46063 15.0242 0 12 0ZM12 9.97421C9.52536 9.97421 7.51157 7.96041 7.51157 5.48581C7.51157 3.0112 9.52536 0.997407 12 0.997407C14.4746 0.997407 16.4884 3.0112 16.4884 5.48581C16.4884 7.96041 14.4746 9.97421 12 9.97421Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_4_115">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/icons/whatsapp.png b/src/assets/images/icons/whatsapp.png
new file mode 100644
index 0000000..63cad5f
Binary files /dev/null and b/src/assets/images/icons/whatsapp.png differ
diff --git a/src/assets/images/image-51.png b/src/assets/images/image-51.png
new file mode 100644
index 0000000..fbd2d01
Binary files /dev/null and b/src/assets/images/image-51.png differ
diff --git a/src/assets/images/info.png b/src/assets/images/info.png
new file mode 100644
index 0000000..78baec2
Binary files /dev/null and b/src/assets/images/info.png differ
diff --git a/src/assets/images/isfahan.png b/src/assets/images/isfahan.png
new file mode 100644
index 0000000..2d17807
Binary files /dev/null and b/src/assets/images/isfahan.png differ
diff --git a/src/assets/images/login.png b/src/assets/images/login.png
new file mode 100644
index 0000000..7aecb00
Binary files /dev/null and b/src/assets/images/login.png differ
diff --git a/src/assets/images/logo-1.png b/src/assets/images/logo-1.png
new file mode 100644
index 0000000..fece14d
Binary files /dev/null and b/src/assets/images/logo-1.png differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..7985a19
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/mado-130.png b/src/assets/images/mado-130.png
new file mode 100644
index 0000000..1798d89
Binary files /dev/null and b/src/assets/images/mado-130.png differ
diff --git a/src/assets/images/mado-130/battery-130.png b/src/assets/images/mado-130/battery-130.png
new file mode 100644
index 0000000..350d541
Binary files /dev/null and b/src/assets/images/mado-130/battery-130.png differ
diff --git a/src/assets/images/mado-130/battery-icon.png b/src/assets/images/mado-130/battery-icon.png
new file mode 100644
index 0000000..ec8cc2c
Binary files /dev/null and b/src/assets/images/mado-130/battery-icon.png differ
diff --git a/src/assets/images/mado-130/black-white.png b/src/assets/images/mado-130/black-white.png
new file mode 100644
index 0000000..11ab43d
Binary files /dev/null and b/src/assets/images/mado-130/black-white.png differ
diff --git a/src/assets/images/mado-130/blue-130.png b/src/assets/images/mado-130/blue-130.png
new file mode 100644
index 0000000..ca52ce1
Binary files /dev/null and b/src/assets/images/mado-130/blue-130.png differ
diff --git a/src/assets/images/mado-130/colors/black.png b/src/assets/images/mado-130/colors/black.png
new file mode 100644
index 0000000..0a86329
Binary files /dev/null and b/src/assets/images/mado-130/colors/black.png differ
diff --git a/src/assets/images/mado-130/colors/cyan-white.png b/src/assets/images/mado-130/colors/cyan-white.png
new file mode 100644
index 0000000..16357a2
Binary files /dev/null and b/src/assets/images/mado-130/colors/cyan-white.png differ
diff --git a/src/assets/images/mado-130/colors/cyan.png b/src/assets/images/mado-130/colors/cyan.png
new file mode 100644
index 0000000..743358b
Binary files /dev/null and b/src/assets/images/mado-130/colors/cyan.png differ
diff --git a/src/assets/images/mado-130/colors/pink.png b/src/assets/images/mado-130/colors/pink.png
new file mode 100644
index 0000000..c8da658
Binary files /dev/null and b/src/assets/images/mado-130/colors/pink.png differ
diff --git a/src/assets/images/mado-130/colors/red.png b/src/assets/images/mado-130/colors/red.png
new file mode 100644
index 0000000..afafb5c
Binary files /dev/null and b/src/assets/images/mado-130/colors/red.png differ
diff --git a/src/assets/images/mado-130/environment.png b/src/assets/images/mado-130/environment.png
new file mode 100644
index 0000000..2d59b6e
Binary files /dev/null and b/src/assets/images/mado-130/environment.png differ
diff --git a/src/assets/images/mado-130/litiomi.png b/src/assets/images/mado-130/litiomi.png
new file mode 100644
index 0000000..99bd057
Binary files /dev/null and b/src/assets/images/mado-130/litiomi.png differ
diff --git a/src/assets/images/mado-130/price-pic.png b/src/assets/images/mado-130/price-pic.png
new file mode 100644
index 0000000..9bf8842
Binary files /dev/null and b/src/assets/images/mado-130/price-pic.png differ
diff --git a/src/assets/images/mado-130/slider.png b/src/assets/images/mado-130/slider.png
new file mode 100644
index 0000000..8bbd1fd
Binary files /dev/null and b/src/assets/images/mado-130/slider.png differ
diff --git a/src/assets/images/mado-130/weight-icon.svg b/src/assets/images/mado-130/weight-icon.svg
new file mode 100644
index 0000000..450ec06
--- /dev/null
+++ b/src/assets/images/mado-130/weight-icon.svg
@@ -0,0 +1,10 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.8203 8.68049H36.0547C35.6602 6.73781 34.6062 4.99124 33.0714 3.73672C31.5365 2.4822 29.6151 1.79687 27.6328 1.79688C25.6505 1.79687 23.7291 2.4822 22.1942 3.73672C20.6594 4.99124 19.6054 6.73781 19.2109 8.68049H10.4453C9.98947 8.68049 9.5523 8.86157 9.22997 9.1839C8.90764 9.50623 8.72656 9.9434 8.72656 10.3992C8.72656 10.8551 8.90764 11.2923 9.22997 11.6146C9.5523 11.9369 9.98947 12.118 10.4453 12.118H19.2109C19.5835 13.9309 20.5315 15.5751 21.9137 16.8059C19.5198 17.9031 17.4908 19.6639 16.0674 21.8794C14.644 24.0949 13.8858 26.6721 13.8828 29.3055V43.0555C13.8828 43.9672 14.245 44.8415 14.8896 45.4862C15.5343 46.1308 16.4086 46.493 17.3203 46.493H20.7578C20.7578 48.3164 21.4821 50.065 22.7715 51.3543C24.0608 52.6437 25.8094 53.368 27.6328 53.368C29.4562 53.368 31.2049 52.6437 32.4942 51.3543C33.7835 50.065 34.5078 48.3164 34.5078 46.493H37.9453C38.857 46.493 39.7313 46.1308 40.376 45.4862C41.0206 44.8415 41.3828 43.9672 41.3828 43.0555V29.3055C41.3798 26.6721 40.6217 24.0949 39.1982 21.8794C37.7748 19.6639 35.7458 17.9031 33.352 16.8059C34.7342 15.5751 35.6821 13.9309 36.0547 12.118H44.8203C45.2762 12.118 45.7133 11.9369 46.0357 11.6146C46.358 11.2923 46.5391 10.8551 46.5391 10.3992C46.5391 9.9434 46.358 9.50623 46.0357 9.1839C45.7133 8.86157 45.2762 8.68049 44.8203 8.68049ZM31.0703 46.493C31.0703 47.4047 30.7081 48.279 30.0635 48.9237C29.4188 49.5683 28.5445 49.9305 27.6328 49.9305C26.7211 49.9305 25.8468 49.5683 25.2021 48.9237C24.5575 48.279 24.1953 47.4047 24.1953 46.493V36.1805C24.1953 35.2688 24.5575 34.3945 25.2021 33.7498C25.8468 33.1052 26.7211 32.743 27.6328 32.743C28.5445 32.743 29.4188 33.1052 30.0635 33.7498C30.7081 34.3945 31.0703 35.2688 31.0703 36.1805V46.493ZM27.6328 15.5555C26.613 15.5555 25.6161 15.2531 24.7682 14.6865C23.9202 14.1199 23.2593 13.3146 22.8691 12.3725C22.4788 11.4303 22.3767 10.3935 22.5756 9.39331C22.7746 8.39309 23.2657 7.47434 23.9868 6.75322C24.7079 6.03211 25.6267 5.54102 26.6269 5.34207C27.6271 5.14311 28.6638 5.24522 29.606 5.63549C30.5482 6.02575 31.3535 6.68664 31.9201 7.53458C32.4867 8.38252 32.7891 9.37943 32.7891 10.3992C32.7891 11.7668 32.2458 13.0783 31.2788 14.0453C30.3118 15.0122 29.0003 15.5555 27.6328 15.5555Z" fill="url(#paint0_linear_2514_374)"/>
+<defs>
+<linearGradient id="paint0_linear_2514_374" x1="8.72656" y1="27.5824" x2="46.5391" y2="27.5824" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A6CAFF"/>
+<stop offset="0.461538" stop-color="#57B1FF"/>
+<stop offset="1" stop-color="#2C86ED"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/images/mado-230-bg-1.png b/src/assets/images/mado-230-bg-1.png
new file mode 100644
index 0000000..1c785da
Binary files /dev/null and b/src/assets/images/mado-230-bg-1.png differ
diff --git a/src/assets/images/mado-230-bg-2.png b/src/assets/images/mado-230-bg-2.png
new file mode 100644
index 0000000..8ad565a
Binary files /dev/null and b/src/assets/images/mado-230-bg-2.png differ
diff --git a/src/assets/images/mado-230-bg.png b/src/assets/images/mado-230-bg.png
new file mode 100644
index 0000000..157610d
Binary files /dev/null and b/src/assets/images/mado-230-bg.png differ
diff --git a/src/assets/images/mado-230.png b/src/assets/images/mado-230.png
new file mode 100644
index 0000000..720a2ec
Binary files /dev/null and b/src/assets/images/mado-230.png differ
diff --git a/src/assets/images/mado-230/black.png b/src/assets/images/mado-230/black.png
new file mode 100644
index 0000000..f93683a
Binary files /dev/null and b/src/assets/images/mado-230/black.png differ
diff --git a/src/assets/images/mado-230/cyan.png b/src/assets/images/mado-230/cyan.png
new file mode 100644
index 0000000..93f2df7
Binary files /dev/null and b/src/assets/images/mado-230/cyan.png differ
diff --git a/src/assets/images/mado-230/gray.png b/src/assets/images/mado-230/gray.png
new file mode 100644
index 0000000..2c74564
Binary files /dev/null and b/src/assets/images/mado-230/gray.png differ
diff --git a/src/assets/images/mado-230/litiomi.png b/src/assets/images/mado-230/litiomi.png
new file mode 100644
index 0000000..08a6135
Binary files /dev/null and b/src/assets/images/mado-230/litiomi.png differ
diff --git a/src/assets/images/mado-230/mado230-1.png b/src/assets/images/mado-230/mado230-1.png
new file mode 100644
index 0000000..b0af333
Binary files /dev/null and b/src/assets/images/mado-230/mado230-1.png differ
diff --git a/src/assets/images/mado-230/mado230-3.png b/src/assets/images/mado-230/mado230-3.png
new file mode 100644
index 0000000..e1927c1
Binary files /dev/null and b/src/assets/images/mado-230/mado230-3.png differ
diff --git a/src/assets/images/mado-230/mado230-5.png b/src/assets/images/mado-230/mado230-5.png
new file mode 100644
index 0000000..79d3c9a
Binary files /dev/null and b/src/assets/images/mado-230/mado230-5.png differ
diff --git a/src/assets/images/mado-230/mado230-6.png b/src/assets/images/mado-230/mado230-6.png
new file mode 100644
index 0000000..400c112
Binary files /dev/null and b/src/assets/images/mado-230/mado230-6.png differ
diff --git a/src/assets/images/mado-230/mado230.png b/src/assets/images/mado-230/mado230.png
new file mode 100644
index 0000000..2084eae
Binary files /dev/null and b/src/assets/images/mado-230/mado230.png differ
diff --git a/src/assets/images/mado-230/red.png b/src/assets/images/mado-230/red.png
new file mode 100644
index 0000000..46295c6
Binary files /dev/null and b/src/assets/images/mado-230/red.png differ
diff --git a/src/assets/images/mado-230/yellow.png b/src/assets/images/mado-230/yellow.png
new file mode 100644
index 0000000..2371f19
Binary files /dev/null and b/src/assets/images/mado-230/yellow.png differ
diff --git a/src/assets/images/mado-330/1.png b/src/assets/images/mado-330/1.png
new file mode 100644
index 0000000..2513f45
Binary files /dev/null and b/src/assets/images/mado-330/1.png differ
diff --git a/src/assets/images/mado-330/2.png b/src/assets/images/mado-330/2.png
new file mode 100644
index 0000000..830b167
Binary files /dev/null and b/src/assets/images/mado-330/2.png differ
diff --git a/src/assets/images/mado-330/3.png b/src/assets/images/mado-330/3.png
new file mode 100644
index 0000000..3c020c3
Binary files /dev/null and b/src/assets/images/mado-330/3.png differ
diff --git a/src/assets/images/mado-330/4.png b/src/assets/images/mado-330/4.png
new file mode 100644
index 0000000..6060b2b
Binary files /dev/null and b/src/assets/images/mado-330/4.png differ
diff --git a/src/assets/images/mado-330/5.png b/src/assets/images/mado-330/5.png
new file mode 100644
index 0000000..286884d
Binary files /dev/null and b/src/assets/images/mado-330/5.png differ
diff --git a/src/assets/images/mado-330/icon-1.png b/src/assets/images/mado-330/icon-1.png
new file mode 100644
index 0000000..c3f924b
Binary files /dev/null and b/src/assets/images/mado-330/icon-1.png differ
diff --git a/src/assets/images/mado-330/icon-2.png b/src/assets/images/mado-330/icon-2.png
new file mode 100644
index 0000000..93dd417
Binary files /dev/null and b/src/assets/images/mado-330/icon-2.png differ
diff --git a/src/assets/images/mado230-2.png b/src/assets/images/mado230-2.png
new file mode 100644
index 0000000..ceeb970
Binary files /dev/null and b/src/assets/images/mado230-2.png differ
diff --git a/src/assets/images/mado230-4.png b/src/assets/images/mado230-4.png
new file mode 100644
index 0000000..902739b
Binary files /dev/null and b/src/assets/images/mado230-4.png differ
diff --git a/src/assets/images/mashhad.png b/src/assets/images/mashhad.png
new file mode 100644
index 0000000..b45c09c
Binary files /dev/null and b/src/assets/images/mashhad.png differ
diff --git a/src/assets/images/orders.png b/src/assets/images/orders.png
new file mode 100644
index 0000000..4bdd714
Binary files /dev/null and b/src/assets/images/orders.png differ
diff --git a/src/assets/images/plus.svg b/src/assets/images/plus.svg
new file mode 100644
index 0000000..020d7ae
--- /dev/null
+++ b/src/assets/images/plus.svg
@@ -0,0 +1,4 @@
+<svg width="60" height="60" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="25.7038" x2="52" y2="25.7038" stroke="#2C86ED"/>
+<line x1="26.5" y1="2.18557e-08" x2="26.5" y2="52" stroke="black"/>
+</svg>
diff --git a/src/assets/images/products.png b/src/assets/images/products.png
new file mode 100644
index 0000000..15bcc51
Binary files /dev/null and b/src/assets/images/products.png differ
diff --git a/src/assets/images/representation-request.png b/src/assets/images/representation-request.png
new file mode 100644
index 0000000..c89d76a
Binary files /dev/null and b/src/assets/images/representation-request.png differ
diff --git a/src/assets/images/sales-services.png b/src/assets/images/sales-services.png
new file mode 100644
index 0000000..d5d3465
Binary files /dev/null and b/src/assets/images/sales-services.png differ
diff --git a/src/assets/images/shiraz-pattern.png b/src/assets/images/shiraz-pattern.png
new file mode 100644
index 0000000..acf66b8
Binary files /dev/null and b/src/assets/images/shiraz-pattern.png differ
diff --git a/src/assets/images/shiraz.png b/src/assets/images/shiraz.png
new file mode 100644
index 0000000..a52252d
Binary files /dev/null and b/src/assets/images/shiraz.png differ
diff --git a/src/assets/images/shopping-bag.svg b/src/assets/images/shopping-bag.svg
new file mode 100644
index 0000000..206667b
--- /dev/null
+++ b/src/assets/images/shopping-bag.svg
@@ -0,0 +1,4 @@
+<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60.4337 25.4768C59.2149 24.0612 57.4469 23.25 55.5866 23.25H53.8853C53.8853 10.4315 43.524 0 30.7916 0C18.0593 0 7.69791 10.4315 7.69791 23.25H6.41492C4.55203 23.25 2.78664 24.0612 1.56781 25.4768C0.348974 26.8925 -0.197577 28.768 0.064152 30.6228L3.09969 52.0206C3.90797 57.7117 8.8218 62 14.5311 62H47.4678C53.1771 62 58.091 57.7091 58.8992 52.0206L61.9348 30.6228C62.1991 28.768 61.6525 26.8925 60.4337 25.4768ZM30.7916 2.58333C42.1101 2.58333 51.3194 11.8549 51.3194 23.25H10.2639C10.2639 11.8549 19.4731 2.58333 30.7916 2.58333ZM59.397 30.256L56.3615 51.6538C55.7328 56.079 51.9121 59.4167 47.4704 59.4167H14.5336C10.0945 59.4167 6.27123 56.079 5.64257 51.6538L2.60703 30.256C2.44794 29.1426 2.77638 28.0188 3.51025 27.1715C4.24155 26.3216 5.30129 25.8333 6.41749 25.8333H55.5866C56.7028 25.8333 57.7625 26.319 58.4938 27.1689C59.2251 28.0188 59.5561 29.1426 59.397 30.256Z" fill="#2073D2"/>
+<path d="M39.7725 42.625C40.4807 42.625 41.0555 42.0463 41.0555 41.3333C41.0555 40.6203 40.4807 40.0417 39.7725 40.0417H21.8107C21.1025 40.0417 20.5277 40.6203 20.5277 41.3333C20.5277 42.0463 21.1025 42.625 21.8107 42.625H39.7725Z" fill="#D2D2D2"/>
+</svg>
diff --git a/src/assets/images/slider.png b/src/assets/images/slider.png
new file mode 100644
index 0000000..82468dd
Binary files /dev/null and b/src/assets/images/slider.png differ
diff --git a/src/assets/images/special-sale-bg.png b/src/assets/images/special-sale-bg.png
new file mode 100644
index 0000000..cae5dcb
Binary files /dev/null and b/src/assets/images/special-sale-bg.png differ
diff --git a/src/assets/images/special-sale/battery.svg b/src/assets/images/special-sale/battery.svg
new file mode 100644
index 0000000..cefd2f3
--- /dev/null
+++ b/src/assets/images/special-sale/battery.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="17" viewBox="0 0 23 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0312 10.375H17.4062M15.7188 8.6875V12.0625M5.59375 10.375H8.96875M3.90625 4.46875V1.9375C3.90625 1.71372 3.99515 1.49911 4.15338 1.34088C4.31161 1.18265 4.52622 1.09375 4.75 1.09375H8.125C8.34878 1.09375 8.56339 1.18265 8.72162 1.34088C8.87986 1.49911 8.96875 1.71372 8.96875 1.9375V4.46875M14.0312 4.46875V1.9375C14.0312 1.71372 14.1201 1.49911 14.2784 1.34088C14.4366 1.18265 14.6512 1.09375 14.875 1.09375H18.25C18.4738 1.09375 18.6884 1.18265 18.8466 1.34088C19.0049 1.49911 19.0938 1.71372 19.0938 1.9375V4.46875M1.375 4.46875H21.625C22.091 4.46875 22.4688 4.84651 22.4688 5.3125V15.4375C22.4688 15.9035 22.091 16.2812 21.625 16.2812H1.375C0.90901 16.2812 0.53125 15.9035 0.53125 15.4375V5.3125C0.53125 4.84651 0.90901 4.46875 1.375 4.46875Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/special-sale/charge.svg b/src/assets/images/special-sale/charge.svg
new file mode 100644
index 0000000..5316e66
--- /dev/null
+++ b/src/assets/images/special-sale/charge.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="25" viewBox="0 0 19 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.875 0.71875L11.1875 9.15625L17.9375 11.6875L6.125 24.3438L7.8125 15.9062L1.0625 13.375L12.875 0.71875Z" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/special-sale/color.svg b/src/assets/images/special-sale/color.svg
new file mode 100644
index 0000000..0639df1
--- /dev/null
+++ b/src/assets/images/special-sale/color.svg
@@ -0,0 +1,7 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3896 0.906787C17.2387 0.848189 22.0752 5.59249 22.125 11.44C22.1311 12.1623 22.0641 12.8831 21.9248 13.5914L21.8604 13.8941C21.7073 14.5634 21.3318 15.1615 20.7949 15.5894C20.2581 16.0172 19.5917 16.2506 18.9053 16.2505H14.0312C13.4925 16.2505 12.9757 16.4643 12.5947 16.8453C12.2139 17.2262 12 17.7432 12 18.2818L11.9941 18.4634C11.9685 18.8853 11.8552 19.2979 11.6602 19.6744C11.4371 20.1047 11.1137 20.4757 10.7178 20.7554C10.322 21.035 9.86478 21.2153 9.38477 21.2818C8.9046 21.3483 8.41504 21.2988 7.95801 21.1373C3.85852 19.6885 0.875198 16.1839 0.875 11.5318C0.874848 8.73293 1.97954 6.0466 3.94824 4.05718C5.91692 2.06791 8.59107 0.935941 11.3896 0.906787ZM1.875 11.5318C1.8752 15.6984 4.53033 18.8656 8.29199 20.1949C8.59802 20.303 8.92556 20.336 9.24707 20.2916C9.56883 20.247 9.87533 20.1255 10.1406 19.938C10.4059 19.7506 10.623 19.5028 10.7725 19.2144C10.9218 18.9263 10.9996 18.6063 11 18.2818L11.0146 17.982C11.0835 17.2881 11.3904 16.6357 11.8877 16.1382C12.4562 15.5698 13.2273 15.2505 14.0312 15.2505H18.9053C19.3652 15.2506 19.8112 15.0938 20.1709 14.8072C20.5307 14.5204 20.7832 14.1199 20.8857 13.6714C21.0512 12.9421 21.1314 12.1957 21.125 11.4478C21.0798 6.15373 16.6961 1.85268 11.3994 1.90581C8.86424 1.9323 6.44154 2.9582 4.6582 4.7603C2.87492 6.56237 1.87499 8.99654 1.875 11.5318Z" fill="#C2C2C2"/>
+<path d="M11.5 7.10164C12.0825 7.10164 12.5547 6.62944 12.5547 6.04695C12.5547 5.46446 12.0825 4.99226 11.5 4.99226C10.9175 4.99226 10.4453 5.46446 10.4453 6.04695C10.4453 6.62944 10.9175 7.10164 11.5 7.10164Z" fill="#C2C2C2"/>
+<path d="M6.85938 9.63289C7.44186 9.63289 7.91406 9.16069 7.91406 8.5782C7.91406 7.99571 7.44186 7.52351 6.85938 7.52351C6.27689 7.52351 5.80469 7.99571 5.80469 8.5782C5.80469 9.16069 6.27689 9.63289 6.85938 9.63289Z" fill="#C2C2C2"/>
+<path d="M6.85938 15.5391C7.44186 15.5391 7.91406 15.0669 7.91406 14.4844C7.91406 13.902 7.44186 13.4298 6.85938 13.4298C6.27689 13.4298 5.80469 13.902 5.80469 14.4844C5.80469 15.0669 6.27689 15.5391 6.85938 15.5391Z" fill="#C2C2C2"/>
+<path d="M16.1406 9.63289C16.7231 9.63289 17.1953 9.16069 17.1953 8.5782C17.1953 7.99571 16.7231 7.52351 16.1406 7.52351C15.5581 7.52351 15.0859 7.99571 15.0859 8.5782C15.0859 9.16069 15.5581 9.63289 16.1406 9.63289Z" fill="#C2C2C2"/>
+</svg>
diff --git a/src/assets/images/special-sale/ellipse.png b/src/assets/images/special-sale/ellipse.png
new file mode 100644
index 0000000..cd5da4e
Binary files /dev/null and b/src/assets/images/special-sale/ellipse.png differ
diff --git a/src/assets/images/special-sale/gradient-bg.jpg b/src/assets/images/special-sale/gradient-bg.jpg
new file mode 100644
index 0000000..6d4f719
Binary files /dev/null and b/src/assets/images/special-sale/gradient-bg.jpg differ
diff --git a/src/assets/images/special-sale/heart.svg b/src/assets/images/special-sale/heart.svg
new file mode 100644
index 0000000..69e62c6
--- /dev/null
+++ b/src/assets/images/special-sale/heart.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 18.75C11.5 18.75 0.53125 13.0625 0.53125 6.35938C0.53125 4.90483 1.13129 3.50986 2.19937 2.48134C3.26745 1.45282 4.71607 0.875 6.22656 0.875C8.6091 0.875 10.6499 2.12523 11.5 4.125C12.3501 2.12523 14.3909 0.875 16.7734 0.875C18.2839 0.875 19.7326 1.45282 20.8006 2.48134C21.8687 3.50986 22.4687 4.90483 22.4688 6.35938C22.4688 13.0625 11.5 18.75 11.5 18.75Z" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/special-sale/installment-bg.png b/src/assets/images/special-sale/installment-bg.png
new file mode 100644
index 0000000..8a0a8fc
Binary files /dev/null and b/src/assets/images/special-sale/installment-bg.png differ
diff --git a/src/assets/images/special-sale/motor-1.png b/src/assets/images/special-sale/motor-1.png
new file mode 100644
index 0000000..2431757
Binary files /dev/null and b/src/assets/images/special-sale/motor-1.png differ
diff --git a/src/assets/images/special-sale/motor-2.png b/src/assets/images/special-sale/motor-2.png
new file mode 100644
index 0000000..c8b1b9e
Binary files /dev/null and b/src/assets/images/special-sale/motor-2.png differ
diff --git a/src/assets/images/special-sale/motor-3.png b/src/assets/images/special-sale/motor-3.png
new file mode 100644
index 0000000..0595f95
Binary files /dev/null and b/src/assets/images/special-sale/motor-3.png differ
diff --git a/src/assets/images/special-sale/motor.svg b/src/assets/images/special-sale/motor.svg
new file mode 100644
index 0000000..16ef6d8
--- /dev/null
+++ b/src/assets/images/special-sale/motor.svg
@@ -0,0 +1,6 @@
+<svg width="27" height="16" viewBox="0 0 27 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.21875 15.25C6.08271 15.25 7.59375 13.739 7.59375 11.875C7.59375 10.011 6.08271 8.5 4.21875 8.5C2.35479 8.5 0.84375 10.011 0.84375 11.875C0.84375 13.739 2.35479 15.25 4.21875 15.25Z" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.7812 15.25C24.6452 15.25 26.1562 13.739 26.1562 11.875C26.1562 10.011 24.6452 8.5 22.7812 8.5C20.9173 8.5 19.4062 10.011 19.4062 11.875C19.4062 13.739 20.9173 15.25 22.7812 15.25Z" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1875 0.90625H18.5625L22.7812 11.875" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.6875 3.4375C1.6875 3.4375 6.67723 5.3718 9.34031 6.58152C9.76982 6.77898 10.246 6.85222 10.715 6.79294C11.184 6.73367 11.627 6.54424 11.9939 6.24613C12.8292 5.55637 14.175 5.125 16.0312 5.125H22.7812C21.3078 5.12457 19.8748 5.60626 18.7007 6.49654C17.5267 7.38682 16.6762 8.63678 16.2791 10.0557C16.128 10.5817 15.8093 11.044 15.3715 11.3724C14.9337 11.7007 14.4006 11.8772 13.8533 11.875H4.21875" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/special-sale/pattern.png b/src/assets/images/special-sale/pattern.png
new file mode 100644
index 0000000..e4bd877
Binary files /dev/null and b/src/assets/images/special-sale/pattern.png differ
diff --git a/src/assets/images/special-sale/slider-bg.png b/src/assets/images/special-sale/slider-bg.png
new file mode 100644
index 0000000..6492053
Binary files /dev/null and b/src/assets/images/special-sale/slider-bg.png differ
diff --git a/src/assets/images/special-sale/slider-motor.png b/src/assets/images/special-sale/slider-motor.png
new file mode 100644
index 0000000..a1f0289
Binary files /dev/null and b/src/assets/images/special-sale/slider-motor.png differ
diff --git a/src/assets/images/special-sale/speed.svg b/src/assets/images/special-sale/speed.svg
new file mode 100644
index 0000000..b32fefc
--- /dev/null
+++ b/src/assets/images/special-sale/speed.svg
@@ -0,0 +1,7 @@
+<svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.53125 14.5938V12.1817C0.53125 6.11941 5.39863 1.11491 11.461 1.09382C12.9047 1.08868 14.3352 1.36861 15.6705 1.91754C17.0058 2.46647 18.2196 3.27361 19.2423 4.29266C20.265 5.31172 21.0764 6.52264 21.6301 7.85598C22.1838 9.18932 22.4688 10.6188 22.4688 12.0626V14.5938C22.4688 14.8176 22.3799 15.0322 22.2216 15.1904C22.0634 15.3487 21.8488 15.4376 21.625 15.4376H1.375C1.15122 15.4376 0.936612 15.3487 0.778379 15.1904C0.620145 15.0322 0.53125 14.8176 0.53125 14.5938Z" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5 1.09375V4.46875" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.96875 15.4375L15.7188 6.15625" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.0938 10.375H22.3401" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.677734 10.375H3.90613" stroke="#C2C2C2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/special-sale/thirty-six.png b/src/assets/images/special-sale/thirty-six.png
new file mode 100644
index 0000000..702993b
Binary files /dev/null and b/src/assets/images/special-sale/thirty-six.png differ
diff --git a/src/assets/images/special-sale/wallet.png b/src/assets/images/special-sale/wallet.png
new file mode 100644
index 0000000..b6b26bf
Binary files /dev/null and b/src/assets/images/special-sale/wallet.png differ
diff --git a/src/assets/images/upload-image.svg b/src/assets/images/upload-image.svg
new file mode 100644
index 0000000..dcac8ed
--- /dev/null
+++ b/src/assets/images/upload-image.svg
@@ -0,0 +1,5 @@
+<svg width="64" height="58" viewBox="0 0 64 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.1225 23.4427C26.5509 23.4427 28.5195 21.4741 28.5195 19.0457C28.5195 16.6174 26.5509 14.6488 24.1225 14.6488C21.6942 14.6488 19.7256 16.6174 19.7256 19.0457C19.7256 21.4741 21.6942 23.4427 24.1225 23.4427Z" fill="#646464"/>
+<path d="M60.2137 35.2289C58.1374 33.2747 55.5114 31.9923 52.6412 31.6259V9.27475C52.6412 6.89307 51.6641 4.75567 50.1374 3.16788C48.5496 1.58009 46.4122 0.664062 44.0305 0.664062H8.61069C6.22901 0.664062 4.0916 1.64116 2.50382 3.16788C0.916031 4.75567 0 6.89307 0 9.27475V37.4274V40.0534V45.7328C0 48.1144 0.977099 50.2519 2.50382 51.8396C4.0916 53.4274 6.22901 54.3435 8.61069 54.3435H42.8702C45.1298 56.1755 47.9389 57.3358 51.0534 57.3358C54.6565 57.3358 57.8931 55.8702 60.2137 53.5496C62.5344 51.2289 64 47.9923 64 44.3893C64 40.7862 62.5344 37.5496 60.2137 35.2289ZM3.23664 9.27475C3.23664 7.8091 3.84733 6.46559 4.82443 5.54956C5.80153 4.57246 7.14504 3.96177 8.61069 3.96177H44.0305C45.4962 3.96177 46.8397 4.57246 47.8168 5.54956C48.7939 6.52666 49.4046 7.87017 49.4046 9.33582V28.3893L40.3664 19.3511C39.7557 18.7404 38.7176 18.6793 38.0458 19.3511L24.4275 33.0305L15.2061 23.748C14.5954 23.1373 13.5573 23.0763 12.8855 23.748L3.23664 33.519V9.27475ZM8.54962 51.229V51.1068C7.08397 51.1068 5.74046 50.4961 4.76336 49.519C3.84733 48.5419 3.23664 47.1984 3.23664 45.7328V40.0534V38.1602L14.0458 27.29L23.2672 36.5114C23.8779 37.1221 24.916 37.1221 25.5878 36.5114L39.2061 22.832L48.1221 31.8091C47.9389 31.8702 47.7557 31.9312 47.5725 31.9923C47.3282 32.0534 47.084 32.1144 46.7786 32.2366C46.5344 32.2977 46.2901 32.4198 46.0458 32.4809C45.8626 32.5419 45.7405 32.603 45.5573 32.7251C45.313 32.8473 45.1298 32.9083 44.9466 33.0305C44.6412 33.2137 44.3359 33.3969 44.0305 33.5801C43.8473 33.7022 43.7252 33.7633 43.542 33.8854C43.4198 33.9465 43.3588 34.0076 43.2366 34.0686C42.687 34.4351 42.1985 34.8625 41.771 35.3511C39.4504 37.6717 37.9847 40.9083 37.9847 44.5114C37.9847 45.4274 38.1069 46.2824 38.2901 47.1984C38.3511 47.4427 38.4122 47.6259 38.4733 47.8702C38.6565 48.4809 38.8397 49.0915 39.084 49.7022V49.7633C39.3282 50.2519 39.5725 50.8015 39.8779 51.229H8.54962ZM57.8321 51.229C56.0611 52.9999 53.6794 54.0381 50.9924 54.0381C48.4275 54.0381 46.0458 52.9999 44.3359 51.3511C44.0916 51.1068 43.8473 50.8015 43.6031 50.5572C43.4198 50.374 43.2366 50.1297 43.0534 49.9465C42.8092 49.6412 42.626 49.2747 42.4427 48.9083C42.3206 48.6641 42.1985 48.4809 42.0763 48.2366C41.9542 47.9312 41.8321 47.5648 41.771 47.1984C41.7099 46.9541 41.5878 46.6488 41.5267 46.4045C41.4046 45.7938 41.3435 45.1221 41.3435 44.4503C41.3435 41.7633 42.4427 39.3816 44.1527 37.6106C45.8626 35.8396 48.3053 34.8015 50.9924 34.8015C53.6794 34.8015 56.0611 35.9007 57.8321 37.6106C59.6031 39.3816 60.6412 41.7633 60.6412 44.4503C60.6412 47.0763 59.542 49.458 57.8321 51.229Z" fill="#646464"/>
+<path d="M52.1528 37.8549C52.0306 37.7327 51.8474 37.6106 51.6032 37.4885C51.42 37.4274 51.2367 37.3663 51.0535 37.3663C50.9925 37.3663 50.9925 37.3663 50.9925 37.3663C50.9314 37.3663 50.9314 37.3663 50.9314 37.3663C50.7482 37.3663 50.565 37.4274 50.3818 37.4885C50.1986 37.5495 50.0154 37.6717 49.8322 37.8549L46.0459 41.6411C45.4352 42.2518 45.4352 43.29 46.0459 43.9618C46.6566 44.5724 47.6948 44.5724 48.3665 43.9618L49.3436 42.9847V49.7022C49.3436 50.6182 50.0764 51.3511 50.9925 51.3511C51.9085 51.3511 52.6413 50.6182 52.6413 49.7022V42.9847L53.6184 43.9618C54.2291 44.5724 55.2673 44.5724 55.939 43.9618C56.5497 43.3511 56.5497 42.3129 55.939 41.6411L52.1528 37.8549Z" fill="#646464"/>
+</svg>
diff --git a/src/assets/images/user-review.png b/src/assets/images/user-review.png
new file mode 100644
index 0000000..4c91391
Binary files /dev/null and b/src/assets/images/user-review.png differ
diff --git a/src/assets/images/user.svg b/src/assets/images/user.svg
new file mode 100644
index 0000000..d9b4050
--- /dev/null
+++ b/src/assets/images/user.svg
@@ -0,0 +1,4 @@
+<svg width="46" height="61" viewBox="0 0 46 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.53637 15.2976C7.53637 6.86298 14.444 0 22.9336 0C31.4231 0 38.3334 6.86298 38.3334 15.2976C38.3334 23.7322 31.4257 30.5952 22.9336 30.5952C14.4415 30.5952 7.53637 23.7322 7.53637 15.2976ZM10.0919 15.2976C10.0919 22.3332 15.8521 28.0562 22.9336 28.0562C30.015 28.0562 35.7778 22.3332 35.7778 15.2976C35.7778 8.26198 30.0176 2.53902 22.9336 2.53902C15.8496 2.53902 10.0919 8.26198 10.0919 15.2976Z" fill="#2073D2"/>
+<path d="M23 35.6098C10.3193 35.6098 0 45.8598 0 58.461V59.7305C0 60.4313 0.572444 61 1.27778 61C1.98311 61 2.55556 60.4313 2.55556 59.7305V58.461C2.55556 47.2614 11.7274 38.1488 23 38.1488C34.2726 38.1488 43.4444 47.2614 43.4444 58.461V59.7305C43.4444 60.4313 44.0169 61 44.7222 61C45.4276 61 46 60.4313 46 59.7305V58.461C46 45.8598 35.6807 35.6098 23 35.6098Z" fill="#D2D2D2"/>
+</svg>
diff --git a/src/components/BlogCarousel.css b/src/components/BlogCarousel.css
new file mode 100644
index 0000000..e9f2909
--- /dev/null
+++ b/src/components/BlogCarousel.css
@@ -0,0 +1,94 @@
+.blog-carousel {
+  margin-top: 0.75rem;
+}
+
+.blog-carousel__viewport {
+  overflow: hidden;
+  direction: ltr;
+}
+
+.blog-carousel__track {
+  display: flex;
+  transition: transform 0.45s ease;
+}
+
+.blog-carousel__slide {
+  flex: 0 0 50%;
+  min-width: 0;
+  padding-inline: 7.5px;
+  box-sizing: border-box;
+}
+
+.blog-carousel__card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-decoration: none;
+  color: inherit;
+  direction: rtl;
+}
+
+.blog-carousel__meta {
+  display: flex;
+  justify-content: flex-end;
+  color: #9c9c9c;
+  font-size: 12px;
+}
+
+.blog-carousel__card h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.6;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  min-height: 2.9em;
+}
+
+.blog-carousel__card p {
+  margin: 0;
+  color: #808080;
+  font-size: 13px;
+  line-height: 1.7;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.blog-carousel__dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 18px;
+}
+
+.blog-carousel__dots button {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 999px;
+  background: #cfd8e6;
+  cursor: pointer;
+}
+
+.blog-carousel__dots button.is-active {
+  background: #2c86ed;
+}
+
+@media (min-width: 960px) {
+  .blog-carousel__slide {
+    flex-basis: 25%;
+  }
+
+  .blog-carousel__card h3 {
+    font-size: 18px;
+  }
+
+  .blog-carousel__card p {
+    font-size: 14px;
+  }
+}
diff --git a/src/components/BlogCarousel.tsx b/src/components/BlogCarousel.tsx
new file mode 100644
index 0000000..9fd2ee1
--- /dev/null
+++ b/src/components/BlogCarousel.tsx
@@ -0,0 +1,85 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import type { PublicBlog } from '../lib/api'
+import { formatFaDate } from '../lib/api'
+import { blogPostPath } from '../lib/paths'
+import BlogCover from './BlogCover'
+import './BlogCarousel.css'
+
+type Props = {
+  blogs: PublicBlog[]
+}
+
+function usePerView() {
+  const [perView, setPerView] = useState(2)
+
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 960px)')
+    const sync = () => setPerView(mq.matches ? 4 : 2)
+    sync()
+    mq.addEventListener('change', sync)
+    return () => mq.removeEventListener('change', sync)
+  }, [])
+
+  return perView
+}
+
+export default function BlogCarousel({ blogs }: Props) {
+  const perView = usePerView()
+  const pages = Math.max(1, Math.ceil(blogs.length / perView))
+  const [page, setPage] = useState(0)
+
+  useEffect(() => {
+    setPage((current) => Math.min(current, pages - 1))
+  }, [pages])
+
+  useEffect(() => {
+    if (pages <= 1) return
+    const timer = window.setInterval(() => {
+      setPage((current) => (current + 1) % pages)
+    }, 3500)
+    return () => window.clearInterval(timer)
+  }, [pages])
+
+  const offset = useMemo(() => `-${page * 100}%`, [page])
+
+  if (blogs.length === 0) return null
+
+  return (
+    <div className="blog-carousel">
+      <div className="blog-carousel__viewport">
+        <div
+          className="blog-carousel__track"
+          style={{ transform: `translateX(${offset})` }}
+        >
+          {blogs.map((blog) => (
+            <article key={blog.id} className="blog-carousel__slide">
+              <Link to={blogPostPath(blog.id, blog.title)} className="blog-carousel__card">
+                <BlogCover src={blog.imageUrl} alt={blog.title} />
+                <div className="blog-carousel__meta">
+                  <span>{formatFaDate(blog.createdAt)}</span>
+                </div>
+                <h3>{blog.title}</h3>
+                <p>{blog.summary}</p>
+              </Link>
+            </article>
+          ))}
+        </div>
+      </div>
+
+      {pages > 1 ? (
+        <div className="blog-carousel__dots">
+          {Array.from({ length: pages }, (_, index) => (
+            <button
+              key={index}
+              type="button"
+              className={index === page ? 'is-active' : ''}
+              aria-label={`اسلاید ${index + 1}`}
+              onClick={() => setPage(index)}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/components/BlogCover.css b/src/components/BlogCover.css
new file mode 100644
index 0000000..414d9f7
--- /dev/null
+++ b/src/components/BlogCover.css
@@ -0,0 +1,28 @@
+.blog-cover {
+  aspect-ratio: 4 / 3;
+  background: #eef2f8;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.blog-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.blog-cover__placeholder {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(180deg, #f4f7fb 0%, #e7edf6 100%);
+}
+
+.blog-cover__placeholder img {
+  width: min(46%, 120px);
+  height: auto;
+  object-fit: contain;
+  opacity: 0.55;
+}
diff --git a/src/components/BlogCover.tsx b/src/components/BlogCover.tsx
new file mode 100644
index 0000000..13ef383
--- /dev/null
+++ b/src/components/BlogCover.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react'
+import logo from '../assets/images/logo.png'
+import './BlogCover.css'
+
+export function isUsableImageUrl(url: string | null | undefined): boolean {
+  const value = (url ?? '').trim()
+  if (!value) return false
+  if (value === '\\N' || value === 'null' || value === 'undefined') return false
+  return /^https?:\/\//i.test(value) || value.startsWith('/')
+}
+
+type Props = {
+  src: string | null | undefined
+  alt: string
+  className?: string
+}
+
+export default function BlogCover({ src, alt, className = '' }: Props) {
+  const [failed, setFailed] = useState(false)
+  const showImage = isUsableImageUrl(src) && !failed
+
+  return (
+    <div className={`blog-cover ${className}`.trim()}>
+      {showImage ? (
+        <img src={src!} alt={alt} onError={() => setFailed(true)} />
+      ) : (
+        <div className="blog-cover__placeholder" aria-hidden="true">
+          <img src={logo} alt="" />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/Footer.css b/src/components/Footer.css
new file mode 100644
index 0000000..1aedd3f
--- /dev/null
+++ b/src/components/Footer.css
@@ -0,0 +1,91 @@
+.site-footer {
+  background: #fff;
+  border-top: 1px solid #e5e5e5;
+  padding-bottom: 1.5rem;
+}
+
+.site-footer__social {
+  border-block: 1px solid #c5c5c5;
+  padding-block: 1rem;
+}
+
+.site-footer__social-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.site-footer__social-inner > p {
+  color: #333;
+}
+
+.site-footer__social-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.25rem 2rem;
+  align-items: center;
+}
+
+.site-footer__social-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.site-footer__grid {
+  display: grid;
+  gap: 1.75rem;
+  padding-block: 2.75rem 1.5rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.site-footer__grid h3 {
+  margin-bottom: 0.85rem;
+  font-size: 1rem;
+}
+
+.site-footer__grid ul {
+  list-style: disc;
+  padding-inline-start: 1.1rem;
+  opacity: 0.55;
+  line-height: 1.9;
+  font-size: 0.92rem;
+}
+
+.site-footer__brand {
+  display: flex;
+  justify-content: center;
+  grid-column: 1 / -1;
+}
+
+.site-footer__brand img {
+  width: 140px;
+  max-width: 100%;
+  height: auto;
+  aspect-ratio: 209 / 76;
+  object-fit: contain;
+}
+
+.site-footer__copy {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid #ececec;
+  font-size: 0.9rem;
+  color: #444;
+}
+
+@media (min-width: 990px) {
+  .site-footer__grid {
+    grid-template-columns: 1.1fr 1fr 1.4fr 1fr 0.9fr;
+  }
+
+  .site-footer__brand {
+    grid-column: auto;
+    justify-content: flex-end;
+  }
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..45faae8
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,139 @@
+import { Link } from 'react-router-dom'
+import bogLogo from '../assets/images/bog-logo.png'
+import telegram from '../assets/images/icons/telegram.png'
+import whatsapp from '../assets/images/icons/whatsapp.png'
+import eitaa from '../assets/images/icons/eitaa.png'
+import instagram from '../assets/images/icons/instagram.png'
+import { toFaDigits } from '../lib/faDigits'
+import { paths } from '../lib/paths'
+import './Footer.css'
+
+export default function Footer() {
+  return (
+    <footer className="site-footer">
+      <div className="site-footer__social">
+        <div className="container site-footer__social-inner">
+          <p>ما را در شبکه های اجتماعی دنبال کنید.</p>
+          <div className="site-footer__social-links">
+            <div className="site-footer__social-group">
+              <a href="tel:09924606922" dir="ltr">
+                {toFaDigits('09924606922')}
+              </a>
+              <img src={telegram} alt="تلگرام" width={30} height={30} />
+              <img src={whatsapp} alt="واتساپ" width={30} height={30} />
+              <img src={eitaa} alt="ایتا" width={30} height={30} />
+            </div>
+            <div className="site-footer__social-group">
+              <a
+                href="https://instagram.com/Madomotor.ir"
+                target="_blank"
+                rel="noreferrer"
+                className="en"
+              >
+                Madomotor.ir
+              </a>
+              <img src={instagram} alt="اینستاگرام" width={30} height={30} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container site-footer__grid">
+        <div>
+          <h3 className="text-primary medium">لینک ها</h3>
+          <ul>
+            <li>
+              <Link to="/">صفحه ی اصلی</Link>
+            </li>
+            <li>
+              <Link to={paths.contact}>تماس با ما</Link>
+            </li>
+            <li>
+              <Link to={paths.about}>درباره ی ما</Link>
+            </li>
+            <li>
+              <Link to={paths.dealers}>نمایندگی ها</Link>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-primary medium">محصولات</h3>
+          <ul>
+            <li>
+              <Link to="/landing/mado-230/موتور-برقی-مادو-۲۳۰">مادو ۲۳۰</Link>
+            </li>
+            <li>
+              <Link to="/landing/mado-130/موتور-برقی-مادو-۱۳۰">مادو ۱۳۰</Link>
+            </li>
+            <li>
+              <Link to="/landing/mado-330/موتور-برقی-مادو-۳۳۰">مادو ۳۳۰</Link>
+            </li>
+            <li>
+              <Link to={paths.products}>قطعات</Link>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-primary medium">روش های ارتباطی</h3>
+          <ul>
+            <li>آدرس کارخانه: قم، شهرک صنعتی شکوهیه</li>
+            <li>
+              <a href="tel:0251825" dir="ltr">
+                {toFaDigits('025-1825')}
+              </a>
+            </li>
+            <li>
+              <a href="mailto:Info@MadoMotor.ir" className="en" dir="ltr">
+                Info@MadoMotor.ir
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.instagram.com/Madomotor.ir"
+                target="_blank"
+                rel="noreferrer"
+                className="en"
+                dir="ltr"
+              >
+                Instagram: Madomotor.ir
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-primary medium">نماد اعتماد الکترونیکی</h3>
+          <a
+            href="https://trustseal.enamad.ir/?id=217171&Code=KdsPijt4wtJcPgbtVj2f"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              src="https://trustseal.enamad.ir/logo.aspx?id=217171&Code=KdsPijt4wtJcPgbtVj2f"
+              alt="نماد اعتماد الکترونیکی"
+              width={100}
+              height={100}
+            />
+          </a>
+        </div>
+
+        <div className="site-footer__brand">
+          <img src={bogLogo} alt="مادو موتور" width={209} height={76} />
+        </div>
+      </div>
+
+      <div className="container site-footer__copy">
+        <p>
+          تمام حق و حقوق این وبسایت متعلق به شرکت{' '}
+          <span className="text-primary medium">مادوموتور</span> می باشد.
+        </p>
+        <p className="en" dir="ltr">
+          @2014-2024, Iran. All rights reserved for{' '}
+          <span className="text-primary">MadoMotor.</span>
+        </p>
+      </div>
+    </footer>
+  )
+}
diff --git a/src/components/Header.css b/src/components/Header.css
new file mode 100644
index 0000000..3bb1ca9
--- /dev/null
+++ b/src/components/Header.css
@@ -0,0 +1,230 @@
+.site-header {
+  position: relative;
+  z-index: 50;
+  background: #f7f7f7;
+}
+
+.site-header__bar {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 64px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.site-header__burger {
+  display: grid;
+  gap: 5px;
+  width: 28px;
+  padding: 0;
+  grid-column: 1;
+}
+
+.site-header__burger span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--color-navy);
+}
+
+.site-header__logo {
+  display: block;
+  grid-column: 1;
+  justify-self: start;
+}
+
+.site-header__logo img {
+  width: 88px;
+  height: auto;
+}
+
+.site-header__nav {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 0.15rem;
+  grid-column: 2;
+  justify-self: center;
+}
+
+.site-header__home {
+  display: grid;
+  place-items: center;
+  padding: 0.75rem 0.85rem;
+}
+
+.site-header__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.75rem 0.85rem;
+  font-size: 0.92rem;
+  font-weight: 300;
+  color: #222;
+}
+
+.site-header__link:hover,
+.site-header__link.active {
+  color: var(--color-navy);
+}
+
+.site-header__dropdown {
+  position: relative;
+}
+
+.site-header__submenu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  inset-inline-end: 0;
+  min-width: 150px;
+  padding: 0.5rem 0;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px rgba(20, 36, 76, 0.08);
+}
+
+.site-header__submenu a {
+  display: block;
+  padding: 0.55rem 1.1rem;
+  font-size: 0.9rem;
+}
+
+.site-header__submenu a:hover {
+  background: #f5f8ff;
+}
+
+.site-header__dropdown:hover .site-header__submenu {
+  display: block;
+}
+
+.site-header__service {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-inline-start: 0.35rem;
+  padding: 0.35rem 0.75rem;
+  border: 1px solid #2073d2;
+  border-radius: var(--radius);
+  color: #2073d2;
+  font-size: 0.88rem;
+  font-weight: 500;
+}
+
+.site-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  grid-column: 3;
+  justify-self: end;
+}
+
+.site-header__icon,
+.site-header__cart {
+  display: grid;
+  place-items: center;
+  padding: 0.65rem;
+}
+
+.site-header__cart {
+  position: relative;
+}
+
+.site-header__cart span {
+  position: absolute;
+  top: 2px;
+  inset-inline-start: 2px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: #e53935;
+  color: #fff;
+  font-size: 0.65rem;
+  line-height: 16px;
+  text-align: center;
+}
+
+.site-header__phone {
+  padding: 0.35rem 0.5rem;
+  font-size: 1.05rem;
+  font-weight: 300;
+  color: #333;
+  letter-spacing: 0.02em;
+}
+
+@media (max-width: 989px) {
+  .site-header__bar {
+    grid-template-columns: auto 1fr auto;
+  }
+
+  .site-header__burger {
+    display: grid;
+  }
+
+  .site-header__logo {
+    grid-column: 2;
+    justify-self: center;
+  }
+
+  .site-header__nav.is-open {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    z-index: 60;
+    padding: 1rem;
+    background: #fff;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
+    grid-column: auto;
+    justify-self: stretch;
+  }
+
+  .site-header__dropdown:hover .site-header__submenu,
+  .site-header__submenu {
+    display: block;
+    position: static;
+    box-shadow: none;
+    border: 0;
+    padding-inline-start: 1rem;
+  }
+
+  .site-header__phone {
+    display: none;
+  }
+}
+
+@media (min-width: 990px) {
+  .site-header__burger {
+    display: none;
+  }
+
+  .site-header__bar {
+    grid-template-columns: 1fr auto 1fr;
+  }
+
+  .site-header__logo {
+    grid-column: 1;
+    justify-self: start;
+  }
+
+  .site-header__nav {
+    display: flex;
+    grid-column: 2;
+    justify-self: center;
+  }
+
+  .site-header__actions {
+    grid-column: 3;
+    justify-self: end;
+  }
+
+  .site-header__logo img {
+    width: 96px;
+  }
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..c8c5993
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,108 @@
+import { useState } from 'react'
+import { Link, NavLink } from 'react-router-dom'
+import logo from '../assets/images/logo.png'
+import homeIcon from '../assets/images/icons/home.svg'
+import angleDown from '../assets/images/icons/angle-down.svg'
+import angleLeft from '../assets/images/icons/angle-left-2.svg'
+import userIcon from '../assets/images/icons/user.svg'
+import cartIcon from '../assets/images/icons/cart.svg'
+import { LANDING_MODEL_PATHS } from '../data/landingModels'
+import { toFaDigits } from '../lib/faDigits'
+import { paths } from '../lib/paths'
+import './Header.css'
+
+const DASHBOARD_URL = (
+  import.meta.env.VITE_DASHBOARD_URL as string | undefined
+)?.replace(/\/$/, '') ?? 'http://manage.madomotor.com:5175'
+
+const productLinks = [
+  ...LANDING_MODEL_PATHS,
+  { to: paths.products, label: 'قطعات' },
+]
+
+export default function Header() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <header className="site-header">
+      <div className="container site-header__bar">
+        <button
+          className="site-header__burger"
+          type="button"
+          aria-label={open ? 'بستن منو' : 'باز کردن منو'}
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+        >
+          <span />
+          <span />
+          <span />
+        </button>
+
+        <Link to="/" className="site-header__logo" onClick={() => setOpen(false)}>
+          <img src={logo} alt="مادو موتور" width={96} height={35} />
+        </Link>
+
+        <nav className={`site-header__nav ${open ? 'is-open' : ''}`} aria-label="منوی اصلی">
+          <NavLink to="/" end className="site-header__home" onClick={() => setOpen(false)}>
+            <img src={homeIcon} alt="صفحه اصلی" width={20} height={20} />
+          </NavLink>
+
+          <div className="site-header__dropdown">
+            <NavLink to={paths.products} className="site-header__link" onClick={() => setOpen(false)}>
+              محصولات
+              <img src={angleDown} alt="" width={12} height={12} />
+            </NavLink>
+            <ul className="site-header__submenu">
+              {productLinks.map((item) => (
+                <li key={item.to}>
+                  <Link to={item.to} onClick={() => setOpen(false)}>
+                    {item.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <NavLink to={paths.blog} className="site-header__link" onClick={() => setOpen(false)}>
+            اخبار و مطالب
+          </NavLink>
+          <NavLink to={paths.dealers} className="site-header__link" onClick={() => setOpen(false)}>
+            نمایندگی ها
+          </NavLink>
+          <a
+            className="site-header__service"
+            href="http://aramcyclet.sorooshancloud.ir"
+            target="_blank"
+            rel="noreferrer"
+          >
+            خدمات پس از فروش
+            <img src={angleLeft} alt="" width={7} height={12} />
+          </a>
+        </nav>
+
+        <div className="site-header__actions">
+          <a
+            className="site-header__icon"
+            href={`${DASHBOARD_URL}/auth/login`}
+            aria-label="حساب کاربری"
+          >
+            <img src={userIcon} alt="" width={22} height={22} />
+          </a>
+          <a
+            className="site-header__cart"
+            href="https://admin.madomotor.ir/shopping-cart"
+            target="_blank"
+            rel="noreferrer"
+            aria-label="سبد خرید"
+          >
+            <img src={cartIcon} alt="" width={22} height={22} />
+            <span>{toFaDigits(0)}</span>
+          </a>
+          <a className="site-header__phone" href="tel:0251825" dir="ltr">
+            {toFaDigits('025-1825')}
+          </a>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/src/components/PrimaryButton.css b/src/components/PrimaryButton.css
new file mode 100644
index 0000000..b5ff70c
--- /dev/null
+++ b/src/components/PrimaryButton.css
@@ -0,0 +1,67 @@
+.primary-btn {
+  --btn-fill: var(--color-navy);
+  position: relative;
+  display: inline-flex;
+  min-width: 270px;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+  border: 1px solid var(--color-navy);
+  border-radius: var(--radius);
+  background: var(--color-white);
+  color: var(--color-navy);
+  transition: color 0.35s ease;
+}
+
+.primary-btn--dark {
+  --btn-fill: #000;
+  border-color: #000;
+  color: #000;
+}
+
+.primary-btn--full {
+  width: 100%;
+}
+
+.primary-btn__label,
+.primary-btn__icon {
+  position: relative;
+  z-index: 1;
+}
+
+.primary-btn__label {
+  padding: 0.7rem 1rem;
+  font-weight: 500;
+}
+
+.primary-btn__icon {
+  display: grid;
+  place-items: center;
+  width: 52px;
+  height: 45px;
+  background: var(--btn-fill);
+}
+
+.primary-btn__icon img {
+  filter: brightness(0) invert(1);
+}
+
+.primary-btn::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 0;
+  background: var(--btn-fill);
+  transition: width 0.35s ease;
+  z-index: 0;
+}
+
+.primary-btn:hover {
+  color: #fff;
+}
+
+.primary-btn:hover::after {
+  width: 100%;
+}
diff --git a/src/components/PrimaryButton.tsx b/src/components/PrimaryButton.tsx
new file mode 100644
index 0000000..93706f1
--- /dev/null
+++ b/src/components/PrimaryButton.tsx
@@ -0,0 +1,60 @@
+import { Link } from 'react-router-dom'
+import arrowLeft from '../assets/images/icons/arrow-left.svg'
+import './PrimaryButton.css'
+
+type Props = {
+  to: string
+  title?: string
+  variant?: 'default' | 'dark'
+  full?: boolean
+  download?: boolean
+  iconSrc?: string
+  className?: string
+}
+
+export default function PrimaryButton({
+  to,
+  title = 'دوست دارم بیشتر بدونم',
+  variant = 'default',
+  full = false,
+  download = false,
+  iconSrc = arrowLeft,
+  className = '',
+}: Props) {
+  const classes = [
+    'primary-btn',
+    variant === 'dark' ? 'primary-btn--dark' : '',
+    full ? 'primary-btn--full' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  if (download || to.startsWith('http') || to.startsWith('#')) {
+    return (
+      <a
+        className={classes}
+        href={to}
+        {...(download
+          ? { download: true, target: '_blank', rel: 'noreferrer' }
+          : to.startsWith('http')
+            ? { target: '_blank', rel: 'noreferrer' }
+            : {})}
+      >
+        <span className="primary-btn__label">{title}</span>
+        <span className="primary-btn__icon" aria-hidden="true">
+          <img src={iconSrc} alt="" width={18} height={18} />
+        </span>
+      </a>
+    )
+  }
+
+  return (
+    <Link className={classes} to={to}>
+      <span className="primary-btn__label">{title}</span>
+      <span className="primary-btn__icon" aria-hidden="true">
+        <img src={iconSrc} alt="" width={18} height={18} />
+      </span>
+    </Link>
+  )
+}
diff --git a/src/components/SeoHead.tsx b/src/components/SeoHead.tsx
new file mode 100644
index 0000000..19dc046
--- /dev/null
+++ b/src/components/SeoHead.tsx
@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+import { absoluteUrl } from '../lib/paths'
+
+type Props = {
+  title: string
+  description: string
+  path: string
+  noIndex?: boolean
+}
+
+function upsertMeta(selector: string, attrs: Record<string, string>) {
+  let el = document.head.querySelector(selector) as HTMLMetaElement | null
+  if (!el) {
+    el = document.createElement('meta')
+    document.head.appendChild(el)
+  }
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value)
+  }
+}
+
+function upsertLink(rel: string, href: string) {
+  let el = document.head.querySelector(`link[rel="${rel}"]`) as HTMLLinkElement | null
+  if (!el) {
+    el = document.createElement('link')
+    el.setAttribute('rel', rel)
+    document.head.appendChild(el)
+  }
+  el.setAttribute('href', href)
+}
+
+export default function SeoHead({ title, description, path, noIndex = false }: Props) {
+  useEffect(() => {
+    const url = absoluteUrl(path)
+    document.title = title
+    upsertMeta('meta[name="description"]', { name: 'description', content: description })
+    upsertMeta('meta[property="og:title"]', { property: 'og:title', content: title })
+    upsertMeta('meta[property="og:description"]', {
+      property: 'og:description',
+      content: description,
+    })
+    upsertMeta('meta[property="og:url"]', { property: 'og:url', content: url })
+    upsertMeta('meta[property="og:type"]', { property: 'og:type', content: 'website' })
+    upsertMeta('meta[property="og:locale"]', { property: 'og:locale', content: 'fa_IR' })
+    upsertMeta('meta[name="robots"]', {
+      name: 'robots',
+      content: noIndex ? 'noindex, nofollow' : 'index, follow',
+    })
+    upsertLink('canonical', url)
+  }, [title, description, path, noIndex])
+
+  return null
+}
diff --git a/src/data/dealers.ts b/src/data/dealers.ts
new file mode 100644
index 0000000..8349de7
--- /dev/null
+++ b/src/data/dealers.ts
@@ -0,0 +1,146 @@
+import tehran from '../assets/images/cities/tehran.jpg'
+import yazd from '../assets/images/cities/yazd.jpg'
+import shiraz from '../assets/images/cities/shiraz.jpg'
+import qom from '../assets/images/cities/qom.jpg'
+import mashhad from '../assets/images/cities/mashhad.jpg'
+import kish from '../assets/images/cities/kish.jpg'
+import tabriz from '../assets/images/cities/tabriz.jpg'
+import isfahan from '../assets/images/cities/isfahan.png'
+
+export type DealerBranch = {
+  name: string
+  code: number
+  ceo?: string
+  address: string
+  phones: string[]
+  postalCode: string
+  mapURL: string
+}
+
+export type DealerCity = {
+  name: string
+  image: string
+  branches: DealerBranch[]
+}
+
+export const dealerCities: DealerCity[] = [
+  {
+    name: 'تهران',
+    image: tehran,
+    branches: [
+      {
+        name: 'نمایندگی تهران',
+        code: 2107,
+        ceo: 'آقای حسن کاشی',
+        address:
+          'آدرس: تهران، تقاطع خیابان دماوند و خیابان سبلان. همکف درمانگاه پاستور پلاک 932',
+        phones: ['09123121761', '02177820419'],
+        postalCode: '۱۷۳۳۶۴۵۷۴۳',
+        mapURL:
+          'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d481.5833633569428!2d51.47356296989864!3d35.70915219052479!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8e030010794685%3A0x7d9f0db82020577c!2z2YbZhdin24zZhtiv2q_bjCDZhdin2K_ZiCDZhdmI2KrZiNixINi02LHZgiDYqtmH2LHYp9mG!5e0!3m2!1sen!2s!4v1725741467994!5m2!1sen!2s',
+      },
+    ],
+  },
+  {
+    name: 'یزد',
+    image: yazd,
+    branches: [
+      {
+        name: 'شعبه 1: اقای رنجبر',
+        code: 3505,
+        address: 'یزد، چهاراه اطلسی روبرو بانک ایران زمین فروشگاه آداک الکترونیک',
+        phones: ['09133535675', '09131591601'],
+        postalCode: '8915838686',
+        mapURL:
+          'https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d211.84891308407066!2d54.373355849957!3d31.83635785944366!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMzHCsDUwJzExLjEiTiA1NMKwMjInMjQuNiJF!5e0!3m2!1sen!2s!4v1732546028494!5m2!1sen!2s',
+      },
+    ],
+  },
+  {
+    name: 'شیراز',
+    image: shiraz,
+    branches: [
+      {
+        name: 'نمایندگی شیراز',
+        code: 7106,
+        address:
+          'آدرس: شیراز بلوار سلمان فارسی روبروی ترمینال کاراندیش شرکت بازرگانی شیراز تسلیم',
+        phones: ['07137305703', '09177093102'],
+        postalCode: '7145813116',
+        mapURL:
+          'https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1734.3881544381507!2d52.5638708!3d29.6101883!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3fb20d00503d4737%3A0xdb308581ec30ba95!2z2YXZiNiq2YjYsSDYs9uM2qnZhNiqINio2LHZgtuMINmF2KfYr9mI2YXZiNiq2YjYsSDZgdix2YjYtCDZiCDYrtiv2YXYp9iqINm-2LMg2KfYsiDZgdix2YjYtCDYr9ixINmB2KfYsdiz!5e0!3m2!1sen!2s!4v1725742454814!5m2!1sen!2s',
+      },
+    ],
+  },
+  {
+    name: 'قم',
+    image: qom,
+    branches: [
+      {
+        name: 'شعبه 1: اقای حسین بیطرفان',
+        code: 2543,
+        address: 'قم- باجک3(فرهنگیان)- بلوار مهر- بین کوچه 4 و 6- خدمات موتورسیکلت رزمنده',
+        phones: ['09125535153'],
+        postalCode: '3719138634',
+        mapURL:
+          'https://www.google.com/maps/embed?pb=!1m13!1m8!1m3!1d13125.736863215929!2d50.912307!3d34.668989!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMzHCsDUwJzExLjEiTiA1NMKwMjInMjQuNiJF!5e0!3m2!1sen!2sde!4v1761115249515!5m2!1sen!2sde',
+      },
+    ],
+  },
+  {
+    name: 'مشهد',
+    image: mashhad,
+    branches: [
+      {
+        name: 'نمایندگی مشهد',
+        code: 9101,
+        address: 'مشهد',
+        phones: [],
+        postalCode: '',
+        mapURL: '',
+      },
+    ],
+  },
+  {
+    name: 'کیش',
+    image: kish,
+    branches: [
+      {
+        name: 'نمایندگی کیش',
+        code: 7601,
+        address: 'کیش',
+        phones: [],
+        postalCode: '',
+        mapURL: '',
+      },
+    ],
+  },
+  {
+    name: 'تبریز',
+    image: tabriz,
+    branches: [
+      {
+        name: 'نمایندگی تبریز',
+        code: 4101,
+        address: 'تبریز',
+        phones: [],
+        postalCode: '',
+        mapURL: '',
+      },
+    ],
+  },
+  {
+    name: 'اصفهان',
+    image: isfahan,
+    branches: [
+      {
+        name: 'نمایندگی اصفهان',
+        code: 3101,
+        address: 'اصفهان',
+        phones: [],
+        postalCode: '',
+        mapURL: '',
+      },
+    ],
+  },
+]
diff --git a/src/data/landingModels.ts b/src/data/landingModels.ts
new file mode 100644
index 0000000..c826470
--- /dev/null
+++ b/src/data/landingModels.ts
@@ -0,0 +1,285 @@
+import mado230Hero from '../assets/images/mado-230/mado230.png'
+import mado230Intro from '../assets/images/mado-230/mado230-1.png'
+import mado230Dash from '../assets/images/mado230-2.png'
+import mado230ColorMain from '../assets/images/mado-230/mado230-3.png'
+import mado230Parts from '../assets/images/mado230-4.png'
+import mado230Eco from '../assets/images/mado-230/mado230-5.png'
+import mado230Price from '../assets/images/mado-230/mado230-6.png'
+import mado230Cyan from '../assets/images/mado-230/cyan.png'
+import mado230Gray from '../assets/images/mado-230/gray.png'
+import mado230Red from '../assets/images/mado-230/red.png'
+import mado230Yellow from '../assets/images/mado-230/yellow.png'
+import mado230Black from '../assets/images/mado-230/black.png'
+import mado230Battery from '../assets/images/mado-230/litiomi.png'
+
+import mado130Hero from '../assets/images/mado-130/slider.png'
+import mado130Intro from '../assets/images/mado-130/blue-130.png'
+import mado130Battery from '../assets/images/mado-130/litiomi.png'
+import mado130Eco from '../assets/images/mado-130/environment.png'
+import mado130Price from '../assets/images/mado-130/price-pic.png'
+import mado130Black from '../assets/images/mado-130/colors/black.png'
+import mado130Cyan from '../assets/images/mado-130/colors/cyan.png'
+import mado130CyanWhite from '../assets/images/mado-130/colors/cyan-white.png'
+import mado130Red from '../assets/images/mado-130/colors/red.png'
+import mado130Pink from '../assets/images/mado-130/colors/pink.png'
+import weightIcon from '../assets/images/mado-130/weight-icon.svg'
+
+import mado330Hero from '../assets/images/mado-330/1.png'
+import mado330Intro from '../assets/images/mado-330/2.png'
+import mado330Eco from '../assets/images/mado-330/4.png'
+import mado330Price from '../assets/images/mado-330/5.png'
+import mado330Icon1 from '../assets/images/mado-330/icon-1.png'
+import mado330Icon2 from '../assets/images/mado-330/icon-2.png'
+
+import bg1 from '../assets/images/mado-230-bg-1.png'
+import bg2 from '../assets/images/mado-230-bg-2.png'
+import guarantee from '../assets/images/36month.png'
+import guaranteeTypo from '../assets/images/guarantee-typo.png'
+import fastCharge from '../assets/images/icons/fast-charge.svg'
+import angleDown from '../assets/images/icons/angle-down.svg'
+
+export type LandingModelId = 'mado-130' | 'mado-230' | 'mado-330'
+
+export type LandingFeatureBlock = {
+  eyebrow: string
+  title: string
+  body: string
+}
+
+export type LandingModel = {
+  id: LandingModelId
+  slug: string
+  label: string
+  titleFa: string
+  menuLabel: string
+  description: string
+  heroImage: string
+  introImage: string
+  dashImage: string
+  ecoImage: string
+  priceImage: string
+  batteryImage: string
+  partsImage: string
+  colors: string[]
+  colorTitle: string
+  colorSubtitles: string[]
+  maxSpeed: string
+  rangeValue: string
+  rangeNote: string
+  introText: string
+  dashText: string
+  highlight: {
+    icon: string
+    iconWidth: number
+    title: string
+    body?: string
+  }
+  heroExtras?: Array<{
+    image: string
+    title: string
+    subtitle: string
+  }>
+  featureBlocks?: LandingFeatureBlock[]
+  batteryItems: string[]
+  guaranteeItems: string[]
+  priceItems: string[]
+  bg1: string
+  bg2: string
+  guaranteeImage: string
+  guaranteeTypo: string
+  scrollIcon: string
+}
+
+const sharedBattery = [
+  'طول عمر بسیار بالا نسبت به نسل های قبلی باطری های لیتیومی',
+  'وزن سبک تر نسبت به باطری های اسیدی',
+  'پیمایش بالا و شارژ سریع با برق خانگی ( حدود 3 الی 4 ساعت)',
+  'باطری 30آمپر لیتیومی 60 تا 70 کیلومتر با شرایط استاندارد',
+  'باطری 45 آمپر لیتیومی 90 تا 110 کیلومتر با شرایط استاندارد',
+]
+
+const sharedGuarantee = [
+  'گارانتی بیش از 70 قطعه اصلی از 12 تا 36 ماه',
+  'گارانتی باطری 20 ماه',
+  'خدمات پس از فروش گسترده در سراسر کشور',
+  'دارای نمایندگی های فعال در اکثر استان های کشور',
+]
+
+const sharedPrice = [
+  'قیمت بسیار مناسب نسبت به محصولات مشابه دیگر',
+  'شرایط اقساط بلند مدت',
+]
+
+export const LANDING_MODELS: Record<LandingModelId, LandingModel> = {
+  'mado-230': {
+    id: 'mado-230',
+    slug: 'موتور-برقی-مادو-۲۳۰',
+    label: 'مادو 230',
+    titleFa: 'مادو ۲۳۰',
+    menuLabel: 'مادو ۲۳۰',
+    description:
+      'مادو ۲۳۰ یک موتور تمام برقی ساخته ی شرکت مادو موتور هست. این موتور کاملا بی صدا و بسیار با کیفیت هست.',
+    heroImage: mado230Hero,
+    introImage: mado230Intro,
+    dashImage: mado230Dash,
+    ecoImage: mado230Eco,
+    priceImage: mado230Price,
+    batteryImage: mado230Battery,
+    partsImage: mado230Parts,
+    colors: [
+      mado230ColorMain,
+      mado230Cyan,
+      mado230Gray,
+      mado230Red,
+      mado230Yellow,
+      mado230Black,
+    ],
+    colorTitle: 'کیفیت رنگ بسیار بالا',
+    colorSubtitles: ['مطابق با استانداردهای بین المللی'],
+    maxSpeed: '80',
+    rangeValue: '120',
+    rangeNote: '(روی باتــــری 45 آمپـــــر)',
+    introText:
+      'مادو 230 جزء با کیفیت ترین و پر قدرتمندترین موتور سیکت های برقی تولید داخل است که با استفاده از تکنولوژی های روز دنیا تولید شده است',
+    dashText:
+      'میزان سرعت-میزان شارژ-نشانگرچراغ هاو راهنماها-نشانگر دنده عقب -نشانگر خطای موتور-نشانگر خطای ECU',
+    highlight: {
+      icon: fastCharge,
+      iconWidth: 30,
+      title: 'قابلیت فست شارژ',
+      body: 'به زودی...',
+    },
+    batteryItems: sharedBattery,
+    guaranteeItems: sharedGuarantee,
+    priceItems: sharedPrice,
+    bg1,
+    bg2,
+    guaranteeImage: guarantee,
+    guaranteeTypo,
+    scrollIcon: angleDown,
+  },
+  'mado-130': {
+    id: 'mado-130',
+    slug: 'موتور-برقی-مادو-۱۳۰',
+    label: 'مادو 130',
+    titleFa: 'مادو ۱۳۰',
+    menuLabel: 'مادو ۱۳۰',
+    description:
+      'مادو ۱۳۰ یک موتور تمام برقی ساخته ی شرکت مادو موتور هست. سبک، بی‌صدا و مناسب استفاده روزمره.',
+    heroImage: mado130Hero,
+    introImage: mado130Intro,
+    dashImage: mado230Dash,
+    ecoImage: mado130Eco,
+    priceImage: mado130Price,
+    batteryImage: mado130Battery,
+    partsImage: mado230Parts,
+    colors: [mado130Black, mado130Cyan, mado130CyanWhite, mado130Red, mado130Pink],
+    colorTitle: 'کیفیت رنگ متنوع و بسیار بالا',
+    colorSubtitles: [
+      'مطابق با استانداردهـــــای بین المللی',
+      'متناسب با انواع سلیقه ها - حتی شما خانم های عزیز',
+    ],
+    maxSpeed: '80',
+    rangeValue: '70',
+    rangeNote: '(روی باتــــری 30 آمپـــر)',
+    introText:
+      'مادو 130 جزء با کیفیت ترین و پر قدرتمندترین موتور سیکت های برقی تولید داخل است که با استفاده از تکنولوژی های روز دنیا تولید شده است',
+    dashText:
+      'میزان سرعت-میزان شارژ-نشانگرچراغ هاو راهنماها-نشانگر دنده عقب -نشانگر خطای موتور-نشانگر خطای ECU',
+    highlight: {
+      icon: weightIcon,
+      iconWidth: 50,
+      title: 'وزن بسیار سبک',
+      body: 'سبک وزن بودن موتور باعث می شود استفاده ی آن برای افراد مبتدی راحت تر باشد',
+    },
+    batteryItems: sharedBattery,
+    guaranteeItems: sharedGuarantee,
+    priceItems: sharedPrice,
+    bg1,
+    bg2,
+    guaranteeImage: guarantee,
+    guaranteeTypo,
+    scrollIcon: angleDown,
+  },
+  'mado-330': {
+    id: 'mado-330',
+    slug: 'موتور-برقی-مادو-۳۳۰',
+    label: 'مادو 330',
+    titleFa: 'مادو ۳۳۰',
+    menuLabel: 'مادو ۳۳۰',
+    description:
+      'مادو ۳۳۰ آخرین نسل از موتورهای برقی مادو می‌باشد؛ با ترمز CBS، نور دی‌لایت و کیفیت قطعات بالا.',
+    heroImage: mado330Hero,
+    introImage: mado330Intro,
+    dashImage: mado230Dash,
+    ecoImage: mado330Eco,
+    priceImage: mado330Price,
+    batteryImage: mado130Battery,
+    partsImage: mado230Parts,
+    colors: [mado130Black, mado130Cyan, mado130CyanWhite, mado130Red, mado130Pink],
+    colorTitle: 'کیفیت رنگ متنوع و بسیار بالا',
+    colorSubtitles: ['مطابق با استانداردهای بین المللی'],
+    maxSpeed: '80',
+    rangeValue: '70',
+    rangeNote: '(روی باتری 30 آمپــر)',
+    introText:
+      'مادو ۳۳۰ آخرین نسل از موتورهای برقی مادو می باشد. در مادو ۳۳۰ همه چیز بهترین هست. کیفیت قطعات، کیلومتر دیجیتالی، ترمز CBS، نور دی لایت، تنوع رنگ بالا و ... . سال های تجربه ی ما در مادو ۳۳۰ به ظهور رسیده است.',
+    dashText:
+      'این نوع کیلومترشمارها علاوه بر ظاهر مدرن، کارایی بسیار بیشتری نسبت به مدل‌های آنالوگ دارند.',
+    highlight: {
+      icon: weightIcon,
+      iconWidth: 50,
+      title: 'وزن بسیار سبک',
+      body: 'سبک وزن بودن موتور باعث می شود استفاده ی آن برای افراد مبتدی راحت تر باشد',
+    },
+    heroExtras: [
+      {
+        image: mado330Icon1,
+        title: 'ترمز ترکیبی',
+        subtitle: 'CBS Braking System',
+      },
+      {
+        image: mado330Icon2,
+        title: 'چراغ مخصوص روز',
+        subtitle: 'Day Lights',
+      },
+    ],
+    featureBlocks: [
+      {
+        eyebrow: 'کیلومتر',
+        title: 'دیجیتالی',
+        body: 'این نوع کیلومترشمارها علاوه بر ظاهر مدرن، کارایی بسیار بیشتری نسبت به مدل‌های آنالوگ دارند. برای مثال دقت بسیار بالاتر، اطلاعات جامع و کامل تر، خوانایی بهتر در شب، استهلاک کمتر و عیب‌یابی هوشمند',
+      },
+      {
+        eyebrow: 'ترمز',
+        title: 'سی بی اس (CBS)',
+        body: 'در موتورسیکلت‌ها، واژه CBS مخفف عبارت Combined Braking System به معنای سیستم ترمز ترکیبی است. در سیستم CBS وقتی شما ترمز عقب را فشار می‌دهید، سیستم به‌طور خودکار و هم‌زمان نیروی ترمز را بین هر دو چرخ (عقب و جلو) تقسیم می‌کند.',
+      },
+      {
+        eyebrow: 'نور',
+        title: 'دی لایت',
+        body: 'نور دی‌لایت (Daylight) که نام کامل آن Daytime Running Lights (DRL) است، به معنای «چراغ‌های روشنایی در روز» می‌باشد. هدف اصلی دی‌لایت، روشن کردن جاده برای شما نیست؛ بلکه هدف این است که دیگر رانندگان (خودروها و عابران) شما را ببینند.',
+      },
+    ],
+    batteryItems: sharedBattery,
+    guaranteeItems: sharedGuarantee,
+    priceItems: sharedPrice,
+    bg1,
+    bg2,
+    guaranteeImage: guarantee,
+    guaranteeTypo,
+    scrollIcon: angleDown,
+  },
+}
+
+export const LANDING_MODEL_PATHS = (
+  Object.values(LANDING_MODELS) as LandingModel[]
+).map((model) => ({
+  to: `/landing/${model.id}/${model.slug}`,
+  label: model.menuLabel,
+}))
+
+export function resolveLandingModel(id?: string): LandingModel | null {
+  if (!id) return null
+  return LANDING_MODELS[id as LandingModelId] ?? null
+}
diff --git a/src/data/provinces.ts b/src/data/provinces.ts
new file mode 100644
index 0000000..6378569
--- /dev/null
+++ b/src/data/provinces.ts
@@ -0,0 +1,33 @@
+export const IRAN_PROVINCES: Record<string, string[]> = {
+  تهران: ['تهران', 'شهریار', 'ری', 'اسلامشهر', 'قدس', 'ملارد', 'پردیس', 'ورامین'],
+  اصفهان: ['اصفهان', 'کاشان', 'نجف‌آباد', 'خمینی‌شهر', 'شاهین‌شهر'],
+  'خراسان رضوی': ['مشهد', 'نیشابور', 'سبزوار', 'تربت حیدریه'],
+  فارس: ['شیراز', 'مرودشت', 'جهرم', 'لار'],
+  آذربایجان‌شرقی: ['تبریز', 'مراغه', 'مرند', 'اهر'],
+  آذربایجان‌غربی: ['ارومیه', 'خوی', 'مهاباد', 'بوکان'],
+  البرز: ['کرج', 'فردیس', 'نظرآباد', 'هشتگرد'],
+  قم: ['قم'],
+  یزد: ['یزد', 'اردکان', 'میبد'],
+  خوزستان: ['اهواز', 'آبادان', 'دزفول', 'ماهشهر'],
+  گیلان: ['رشت', 'انزلی', 'لاهیجان', 'رودسر'],
+  مازندران: ['ساری', 'بابل', 'آمل', 'قائم‌شهر'],
+  کرمان: ['کرمان', 'رفسنجان', 'جیرفت', 'سیرجان'],
+  هرمزگان: ['بندرعباس', 'قشم', 'کیش', 'میناب'],
+  سیستان‌وبلوچستان: ['زاهدان', 'چابهار', 'ایرانشهر'],
+  کردستان: ['سنندج', 'سقز', 'مریوان'],
+  کرمانشاه: ['کرمانشاه', 'اسلام‌آباد غرب'],
+  همدان: ['همدان', 'ملایر', 'نهاوند'],
+  مرکزی: ['اراک', 'ساوه', 'خمین'],
+  قزوین: ['قزوین', 'تاکستان', 'آبیک'],
+  زنجان: ['زنجان', 'ابهر'],
+  سمنان: ['سمنان', 'شاهرود', 'دامغان'],
+  گلستان: ['گرگان', 'گنبد کاووس', 'بندر ترکمن'],
+  بوشهر: ['بوشهر', 'دیر', 'کنگان'],
+  کهگیلویه‌وبویراحمد: ['یاسوج', 'گچساران'],
+  لرستان: ['خرم‌آباد', 'بروجرد', 'الیگودرز'],
+  ایلام: ['ایلام', 'دهلران'],
+  اردبیل: ['اردبیل', 'مشگین‌شهر'],
+  چهارمحال‌وبختیاری: ['شهرکرد', 'بروجن'],
+  'خراسان شمالی': ['بجنورد', 'شیروان'],
+  'خراسان جنوبی': ['بیرجند', 'قائن'],
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..41adff0
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,156 @@
+@font-face {
+  font-family: 'IranYekan';
+  src: url('./assets/fonts/iranyekan/woff/iranyekanweblight.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IranYekan';
+  src: url('./assets/fonts/iranyekan/woff/iranyekanwebmedium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IranYekan';
+  src: url('./assets/fonts/iranyekan/woff/iranyekanwebbold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('./assets/fonts/montserrat/Montserrat-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('./assets/fonts/montserrat/Montserrat-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('./assets/fonts/montserrat/montserrat-bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --color-navy: #14244c;
+  --color-blue: #2c86ed;
+  --color-blue-deep: #2073d2;
+  --color-gray-bg: #f7f7f7;
+  --color-muted: #9c9c9c;
+  --color-text: #000000;
+  --color-white: #ffffff;
+  --font-fa: 'IranYekan', Tahoma, sans-serif;
+  --font-en: 'Montserrat', sans-serif;
+  --max-width: 1200px;
+  --radius: 5px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-fa);
+  font-weight: 300;
+  color: var(--color-text);
+  background: var(--color-white);
+  -webkit-font-smoothing: antialiased;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+p {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin: 0;
+  font-weight: 500;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-gray-bg);
+}
+
+.app main {
+  flex: 1;
+}
+
+.container {
+  width: min(100% - 2rem, var(--max-width));
+  margin-inline: auto;
+}
+
+.en {
+  font-family: var(--font-en);
+}
+
+.text-primary {
+  color: var(--color-navy);
+}
+
+.text-gradient {
+  background: linear-gradient(90deg, #a6caff, #2c86ed);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-weight: 500;
+}
+
+.medium {
+  font-weight: 500;
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
new file mode 100644
index 0000000..15f41b1
--- /dev/null
+++ b/src/lib/api.ts
@@ -0,0 +1,109 @@
+const API_BASE =
+  (import.meta.env.VITE_API_BASE_URL as string | undefined)?.replace(/\/$/, '') ??
+  'http://api.madomotor.com:3001/api/v1'
+
+export class ApiError extends Error {
+  status: number
+  constructor(status: number, message: string) {
+    super(message)
+    this.status = status
+  }
+}
+
+async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const response = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers: {
+      ...(options.body ? { 'Content-Type': 'application/json' } : {}),
+      ...(options.headers ?? {}),
+    },
+  })
+
+  const payload = await response.json().catch(() => null)
+  if (!response.ok) {
+    const message =
+      typeof payload?.message === 'string'
+        ? payload.message
+        : Array.isArray(payload?.message)
+          ? payload.message.join('، ')
+          : 'خطایی رخ داد'
+    throw new ApiError(response.status, message)
+  }
+  return payload as T
+}
+
+export type PublicProduct = {
+  id: string
+  nameFa: string
+  nameEn: string
+  price: number
+  stock: number
+  category: string
+  imageUrl: string | null
+  createdAt: string
+  updatedAt?: string
+}
+
+export type PublicBlog = {
+  id: string
+  title: string
+  summary: string
+  author: string
+  imageUrl: string | null
+  createdAt: string
+}
+
+export type PublicBlogPost = PublicBlog & {
+  body: string
+  published: boolean
+  updatedAt: string
+}
+
+export type PublicRepresentation = {
+  id: string
+  name: string
+  owner: string
+  mobile: string
+  province: string
+  city: string
+  address: string
+  landline: string
+  createdAt: string
+}
+
+export const listPublicProducts = () => request<PublicProduct[]>('/public/products')
+export const getPublicProduct = (id: string) => request<PublicProduct>(`/public/products/${id}`)
+export const listPublicBlogs = () => request<PublicBlog[]>('/public/blogs')
+export const getPublicBlog = (id: string) => request<PublicBlogPost>(`/public/blogs/${id}`)
+export const listPublicRepresentations = () =>
+  request<PublicRepresentation[]>('/public/representations')
+
+export function submitRepresentationRequest(body: {
+  firstName: string
+  lastName: string
+  nationalCode?: string
+  mobile: string
+  province?: string
+  city: string
+  landline?: string
+  address?: string
+  postalCode?: string
+  description?: string
+}) {
+  return request<{ id: string; name: string; city: string; status: string }>(
+    '/public/representations/request',
+    { method: 'POST', body: JSON.stringify(body) },
+  )
+}
+
+export function formatFaDate(iso: string) {
+  try {
+    return new Intl.DateTimeFormat('fa-IR', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    }).format(new Date(iso))
+  } catch {
+    return iso
+  }
+}
diff --git a/src/lib/faDigits.ts b/src/lib/faDigits.ts
new file mode 100644
index 0000000..58368a1
--- /dev/null
+++ b/src/lib/faDigits.ts
@@ -0,0 +1,6 @@
+const FA_DIGITS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'] as const
+
+/** Convert Latin digits in a string to Persian digits. */
+export function toFaDigits(value: string | number): string {
+  return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)])
+}
diff --git a/src/lib/paths.ts b/src/lib/paths.ts
new file mode 100644
index 0000000..b047931
--- /dev/null
+++ b/src/lib/paths.ts
@@ -0,0 +1,34 @@
+export const SITE_ORIGIN = 'https://madomotor.ir'
+
+export const paths = {
+  home: '/',
+  products: '/product/list/محصولات',
+  blog: '/blog/list/اخبار-و-مقالات',
+  dealers: '/representation/list/نمایندگی-ها',
+  representationRequest: '/representation/request',
+  contact: '/contactus/تماس-با-ما',
+  about: '/aboutus/درباره-ما',
+  landing130: '/landing/mado-130/موتور-برقی-مادو-۱۳۰',
+  landing230: '/landing/mado-230/موتور-برقی-مادو-۲۳۰',
+  landing330: '/landing/mado-330/موتور-برقی-مادو-۳۳۰',
+} as const
+
+export function blogPostPath(id: string, title: string) {
+  return `/blog/${id}/${toSlug(title)}`
+}
+
+export function productPath(id: string, nameFa: string) {
+  return `/product/${id}/${toSlug(nameFa)}`
+}
+
+export function toSlug(value: string) {
+  return value
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\u0600-\u06FFa-zA-Z0-9-]/g, '')
+}
+
+export function absoluteUrl(path: string) {
+  if (path.startsWith('http')) return path
+  return `${SITE_ORIGIN}${path.startsWith('/') ? path : `/${path}`}`
+}
diff --git a/src/lib/phones.ts b/src/lib/phones.ts
new file mode 100644
index 0000000..558e4e2
--- /dev/null
+++ b/src/lib/phones.ts
@@ -0,0 +1,67 @@
+const FA_TO_EN: Record<string, string> = {
+  '۰': '0',
+  '۱': '1',
+  '۲': '2',
+  '۳': '3',
+  '۴': '4',
+  '۵': '5',
+  '۶': '6',
+  '۷': '7',
+  '۸': '8',
+  '۹': '9',
+  '٠': '0',
+  '١': '1',
+  '٢': '2',
+  '٣': '3',
+  '٤': '4',
+  '٥': '5',
+  '٦': '6',
+  '٧': '7',
+  '٨': '8',
+  '٩': '9',
+}
+
+export type PhoneKind = 'mobile' | 'landline'
+
+export type DealerPhone = {
+  kind: PhoneKind
+  display: string
+  href: string
+}
+
+export function normalizePhoneDigits(raw: string): string {
+  const latin = raw.replace(/[۰-۹٠-٩]/g, (d) => FA_TO_EN[d] ?? d)
+  let digits = latin.replace(/\D/g, '')
+  if (digits.startsWith('0098')) digits = digits.slice(4)
+  else if (digits.startsWith('98') && digits.length > 10) digits = digits.slice(2)
+  if (digits.length === 10) digits = `0${digits}`
+  return digits
+}
+
+export function isMobileDigits(digits: string): boolean {
+  return /^09\d{9}$/.test(digits)
+}
+
+export function dealerPhones(mobile: string, landline: string): DealerPhone[] {
+  const seen = new Set<string>()
+  const list: DealerPhone[] = []
+
+  const add = (raw: string | null | undefined) => {
+    const trimmed = (raw ?? '').trim()
+    if (!trimmed || trimmed === '\\N') return
+    const digits = normalizePhoneDigits(trimmed)
+    if (digits.length < 8) return
+    if (seen.has(digits)) return
+    seen.add(digits)
+    const kind: PhoneKind = isMobileDigits(digits) ? 'mobile' : 'landline'
+    list.push({
+      kind,
+      display: trimmed,
+      href: `tel:${digits}`,
+    })
+  }
+
+  add(mobile)
+  add(landline)
+  return list
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..8e0deb1
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+)
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
new file mode 100644
index 0000000..45d8916
--- /dev/null
+++ b/src/pages/AboutPage.tsx
@@ -0,0 +1,75 @@
+import { Link } from 'react-router-dom'
+import SeoHead from '../components/SeoHead'
+import PrimaryButton from '../components/PrimaryButton'
+import { paths } from '../lib/paths'
+import infoImage from '../assets/images/info.png'
+import feature1 from '../assets/images/icons/1.png'
+import feature2 from '../assets/images/icons/2.png'
+import feature3 from '../assets/images/icons/3.png'
+import feature4 from '../assets/images/icons/4.png'
+import './CatalogPages.css'
+import './StaticPages.css'
+
+const features = [
+  { icon: feature1, title: 'خدمات پس از فروش', subtitle: 'به گستردگی ایران' },
+  { icon: feature2, title: 'قیمت بسیار مناسب', subtitle: 'خرید بدون واسطه' },
+  { icon: feature3, title: 'موتور تمام برقی', subtitle: 'لذت آرامش' },
+  { icon: feature4, title: 'شارژ سریع', subtitle: 'آماده به کار' },
+]
+
+export default function AboutPage() {
+  return (
+    <section className="catalog static-page">
+      <SeoHead
+        title="درباره مادو موتور | تولیدکننده موتورسیکلت برقی"
+        description="شرکت مادو موتور از سال ۱۳۹۵ در زمینه تولید و مونتاژ موتورسیکلت برقی فعالیت می‌کند. بیش از ۹۰ قطعه از قطعات اصلی در ایران تولید می‌شود."
+        path={paths.about}
+      />
+      <div className="container">
+        <div className="catalog__head">
+          <h1>
+            درباره <span className="text-primary medium">مادو موتور</span> بیشتر بدانید
+          </h1>
+        </div>
+
+        <div className="about-intro">
+          <img src={infoImage} alt="موتور برقی مادو" />
+          <div>
+            <h2>
+              درباره <span className="text-primary medium">مادو موتور</span>
+            </h2>
+            <p>
+              شرکت تولید مادو موتور در زمینه تولید و مونتاژ موتورسیکلت برقی به صورت تخصصی و با
+              سرمایه‌گذاری تقریبی ۹۰۰ میلیارد تومان و ایجاد زیر ساخت لازم برای تولید موتور سیکلت
+              برقی فعالیت خود را از سال ۱۳۹۵ آغاز نموده است.
+            </p>
+            <PrimaryButton to={paths.contact} title="با ما تماس بگیرید" />
+          </div>
+        </div>
+
+        <p className="about-copy">
+          اکنون به یاری خداوند موفق به بومی سازی بسیاری از قطعات موتورسیکلت برقی در داخل کشور شده
+          بطوریکه بیش از ۹۰ قطعه از ۱۰۰ قطعه اصلی موتورسیکلت با سرمایه گذاری این شرکت در داخل کشور
+          عزیزمان تولید می‌گردد که سه قطعه اصلی شامل: موتور (قوای محرکه)، باطری و ECU در داخل شرکت
+          های زیر مجموعه این شرکت تولید می‌گردد که منجر به اشتغال به کار مستقیم و غیر مستقیم حدود
+          ۱۰۰ نفر گردیده و نتیجه این حجم از بومی سازی، کاهش قیمت تمام شده برای مشتری نهایی و خدمات
+          پس از فروش قابل قبول و مناسب گردیده است.
+        </p>
+
+        <div className="about-features">
+          {features.map((item) => (
+            <div key={item.title}>
+              <img src={item.icon} alt="" width={80} height={80} />
+              <p className="medium">{item.title}</p>
+              <p>{item.subtitle}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="catalog__foot">
+          <Link to="/">بازگشت به صفحه اصلی</Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/BlogListPage.tsx b/src/pages/BlogListPage.tsx
new file mode 100644
index 0000000..b87ad88
--- /dev/null
+++ b/src/pages/BlogListPage.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import SeoHead from '../components/SeoHead'
+import { ApiError, formatFaDate, listPublicBlogs, type PublicBlog } from '../lib/api'
+import { blogPostPath, paths } from '../lib/paths'
+import BlogCover from '../components/BlogCover'
+import './CatalogPages.css'
+
+export default function BlogListPage() {
+  const [posts, setPosts] = useState<PublicBlog[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        setPosts(await listPublicBlogs())
+      } catch (err) {
+        setError(err instanceof ApiError ? err.message : 'بارگذاری مطالب ناموفق بود')
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  return (
+    <section className="catalog">
+      <SeoHead
+        title="بلاگ مادو موتور - تازه ترین اخبار موتور های برقی"
+        description="جدیدترین مقالات، اخبار و آموزش‌ های مرتبط با موتور های برقی را در بلاگ مادو موتور بخوانید. همراه ما باشید با بررسی فناوری‌ ها، نکات فنی و راهنمای خرید موتور برقی."
+        path={paths.blog}
+      />
+      <div className="container">
+        <div className="catalog__head">
+          <h1>اخبار و مطالب</h1>
+          <p>آخرین نوشته‌های مادو موتور</p>
+        </div>
+
+        {loading ? <p className="catalog__status">در حال بارگذاری...</p> : null}
+        {error ? <p className="catalog__status catalog__status--error">{error}</p> : null}
+
+        {!loading && !error ? (
+          <div className="catalog__grid catalog__grid--blogs">
+            {posts.length === 0 ? (
+              <p className="catalog__status">مطلبی برای نمایش وجود ندارد</p>
+            ) : null}
+            {posts.map((post) => (
+              <Link key={post.id} to={blogPostPath(post.id, post.title)} className="catalog-card catalog-card--blog">
+                <div className="catalog-card__media">
+                  <BlogCover src={post.imageUrl} alt={post.title} />
+                </div>
+                <div className="catalog-card__body">
+                  <h2>{post.title}</h2>
+                  <p>{post.summary}</p>
+                  <div className="catalog-card__meta">
+                    <span>{post.author || 'مادو موتور'}</span>
+                    <span>{formatFaDate(post.createdAt)}</span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        ) : null}
+
+        <div className="catalog__foot">
+          <Link to="/">بازگشت به صفحه اصلی</Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/BlogPostPage.css b/src/pages/BlogPostPage.css
new file mode 100644
index 0000000..8fbe46e
--- /dev/null
+++ b/src/pages/BlogPostPage.css
@@ -0,0 +1,39 @@
+.blog-post__card {
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 12px;
+  padding: 28px 24px;
+}
+
+.blog-post__cover {
+  margin: -28px -24px 24px;
+  overflow: hidden;
+  border-radius: 12px 12px 0 0;
+}
+
+.blog-post__card h1 {
+  margin: 0 0 12px;
+  font-size: 22px;
+  font-weight: 500;
+}
+
+.blog-post__meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: #888;
+  font-size: 13px;
+  margin-bottom: 24px;
+}
+
+.blog-post__body {
+  line-height: 2;
+  color: #444;
+  text-align: justify;
+}
+
+.blog-post__body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
diff --git a/src/pages/BlogPostPage.tsx b/src/pages/BlogPostPage.tsx
new file mode 100644
index 0000000..8edc573
--- /dev/null
+++ b/src/pages/BlogPostPage.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import SeoHead from '../components/SeoHead'
+import BlogCover from '../components/BlogCover'
+import { ApiError, formatFaDate, getPublicBlog, type PublicBlogPost } from '../lib/api'
+import { blogPostPath, paths } from '../lib/paths'
+import './CatalogPages.css'
+import './BlogPostPage.css'
+
+export default function BlogPostPage() {
+  const { id } = useParams()
+  const [post, setPost] = useState<PublicBlogPost | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (!id) return
+    void (async () => {
+      setLoading(true)
+      setError('')
+      try {
+        setPost(await getPublicBlog(id))
+      } catch (err) {
+        setError(err instanceof ApiError ? err.message : 'بارگذاری مطلب ناموفق بود')
+        setPost(null)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [id])
+
+  const title = post?.title || 'نمایش مطلب'
+  const description = post?.summary || 'مطلب مادو موتور'
+
+  return (
+    <section className="catalog blog-post">
+      <SeoHead
+        title={post ? `${post.title} | بلاگ مادو موتور` : title}
+        description={description}
+        path={post && id ? blogPostPath(id, post.title) : paths.blog}
+        noIndex={!post}
+      />
+      <div className="container">
+        {loading ? <p className="catalog__status">در حال بارگذاری...</p> : null}
+        {error ? <p className="catalog__status catalog__status--error">{error}</p> : null}
+
+        {post ? (
+          <article className="blog-post__card">
+            {post.imageUrl ? (
+              <div className="blog-post__cover">
+                <BlogCover src={post.imageUrl} alt={post.title} />
+              </div>
+            ) : null}
+            <h1>{post.title}</h1>
+            <div className="blog-post__meta">
+              <span>{post.author || 'مادو موتور'}</span>
+              <span>{formatFaDate(post.createdAt)}</span>
+            </div>
+            {post.body.includes('<') ? (
+              <div className="blog-post__body" dangerouslySetInnerHTML={{ __html: post.body }} />
+            ) : (
+              <div className="blog-post__body">
+                {post.body.split('\n').map((line, index) => (
+                  <p key={index}>{line}</p>
+                ))}
+              </div>
+            )}
+          </article>
+        ) : null}
+
+        <div className="catalog__foot">
+          <Link to={paths.blog}>بازگشت به اخبار و مطالب</Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/CatalogPages.css b/src/pages/CatalogPages.css
new file mode 100644
index 0000000..15f4db5
--- /dev/null
+++ b/src/pages/CatalogPages.css
@@ -0,0 +1,326 @@
+.catalog {
+  padding: 48px 0 80px;
+  background: linear-gradient(180deg, #f7f9fc 0%, #fff 40%);
+  min-height: 70vh;
+}
+
+.catalog__head {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 28px;
+}
+
+.catalog__head h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--color-navy);
+}
+
+.catalog__head p {
+  margin: 0;
+  color: var(--color-muted);
+}
+
+.dealers-search {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+}
+
+.dealers-search input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--color-navy);
+  border-radius: var(--radius, 8px);
+  background: #fff;
+  padding: 14px 16px;
+  font: inherit;
+  font-size: 15px;
+  color: var(--color-navy);
+  outline: none;
+}
+
+.dealers-search input::placeholder {
+  color: #9aa3b2;
+}
+
+.dealers-search input:focus {
+  border-color: var(--color-blue);
+  box-shadow: 0 0 0 3px rgba(37, 99, 176, 0.12);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.catalog__status {
+  padding: 28px 0;
+  color: var(--color-muted);
+}
+
+.catalog__status--error {
+  color: #d32f2f;
+}
+
+.catalog__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.catalog__grid--blogs {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.catalog-card {
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  text-decoration: none;
+}
+
+.catalog-card__media {
+  aspect-ratio: 4 / 3;
+  background: #f0f3f8;
+}
+
+.catalog-card__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.catalog-card__placeholder {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  color: var(--color-blue);
+  font-weight: 700;
+  font-size: 28px;
+}
+
+.catalog-card__media .blog-cover {
+  height: 100%;
+  border-radius: 0;
+}
+
+.catalog-card__body {
+  padding: 16px 18px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.catalog-card__body h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.catalog-card__body p {
+  margin: 0;
+  color: #666;
+  line-height: 1.7;
+  font-size: 14px;
+}
+
+.catalog-card__tag {
+  font-size: 12px;
+  color: var(--color-blue);
+}
+
+.catalog-card__price {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.catalog-card__price strong {
+  font-family: var(--font-en);
+  font-size: 20px;
+  color: var(--color-navy);
+}
+
+.catalog-card__price span,
+.catalog-card__meta {
+  font-size: 12px;
+  color: var(--color-muted);
+}
+
+.catalog-card__meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: auto;
+  padding-top: 10px;
+}
+
+.dealers-cta {
+  margin-top: 36px;
+  background: #fff;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 18px 0;
+}
+
+.dealers-cta__inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.dealers-cta__inner p {
+  margin: 0;
+  color: #333;
+  font-size: 16px;
+}
+
+.catalog__foot {
+  margin-top: 28px;
+}
+
+.catalog__foot a {
+  color: var(--color-blue);
+  text-decoration: none;
+}
+
+.dealers-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.dealers-filter button {
+  border: 1px solid #dde3ee;
+  background: #fff;
+  border-radius: 999px;
+  padding: 8px 14px;
+  cursor: pointer;
+  font: inherit;
+}
+
+.dealers-filter button.is-active {
+  background: var(--color-blue);
+  border-color: var(--color-blue);
+  color: #fff;
+}
+
+.dealers-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dealer-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1.4fr auto;
+  gap: 16px;
+  align-items: center;
+  padding: 18px 20px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 12px;
+}
+
+.dealer-row h2 {
+  margin: 0 0 4px;
+  font-size: 18px;
+}
+
+.dealer-row p {
+  margin: 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.dealer-row__contacts {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 11.5rem;
+}
+
+.dealer-row__phone {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  text-decoration: none;
+  font-family: var(--font-en);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.dealer-row__phone--mobile {
+  color: var(--color-blue);
+}
+
+.dealer-row__phone--landline {
+  color: #222;
+}
+
+.dealer-row__phone-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.product-detail__card {
+  display: grid;
+  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
+  gap: 28px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 12px;
+  overflow: hidden;
+  padding: 20px;
+}
+
+.product-detail__media {
+  aspect-ratio: 4 / 3;
+  background: #f0f3f8;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.product-detail__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.product-detail__body h1 {
+  margin: 12px 0 8px;
+  font-size: 26px;
+  color: var(--color-navy);
+}
+
+@media (max-width: 900px) {
+  .catalog__grid,
+  .catalog__grid--blogs,
+  .dealer-row,
+  .product-detail__card {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx
new file mode 100644
index 0000000..1ae3d53
--- /dev/null
+++ b/src/pages/ContactPage.tsx
@@ -0,0 +1,74 @@
+import { Link } from 'react-router-dom'
+import SeoHead from '../components/SeoHead'
+import { paths } from '../lib/paths'
+import { toFaDigits } from '../lib/faDigits'
+import './CatalogPages.css'
+import './StaticPages.css'
+
+export default function ContactPage() {
+  return (
+    <section className="catalog static-page">
+      <SeoHead
+        title="روش های ارتباطی با مادو موتور | تماس با ما"
+        description="برای دریافت مشاوره، ثبت سفارش یا خدمات پس از فروش موتور های برقی مادو، با ما در تماس باشید. اطلاعات تماس، آدرس و راه‌ های ارتباطی مادو موتور را اینجا ببینید."
+        path={paths.contact}
+      />
+      <div className="container">
+        <div className="catalog__head">
+          <h1>
+            روش ارتباطی با <span className="text-primary medium">مادو موتور</span>
+          </h1>
+        </div>
+
+        <ul className="contact-list">
+          <li>
+            <span>شماره تماس</span>
+            <a href="tel:0251825" dir="ltr">
+              {toFaDigits('025-1825')}
+            </a>
+          </li>
+          <li>
+            <span>آدرس پست الکترونیکی</span>
+            <a href="mailto:Info@MadoMotor.ir" className="en" dir="ltr">
+              Info@MadoMotor.ir
+            </a>
+          </li>
+          <li>
+            <span>آدرس اینستاگرام</span>
+            <a href="https://instagram.com/MadoMotor.ir" className="en" dir="ltr">
+              MadoMotor.ir
+            </a>
+          </li>
+          <li>
+            <span>آدرس لینکدین</span>
+            <a href="https://www.linkedin.com/in/MadoMotor.ir" className="en" dir="ltr">
+              MadoMotor.ir
+            </a>
+          </li>
+          <li>
+            <span>آدرس دفتر مرکزی</span>
+            <strong>قم، شهرک صنعتی شکوهیه</strong>
+          </li>
+          <li>
+            <span>کد پستی</span>
+            <strong className="en" dir="ltr">
+              {toFaDigits('3738116351')}
+            </strong>
+          </li>
+        </ul>
+
+        <iframe
+          className="contact-map"
+          title="موقعیت کارخانه مادو موتور"
+          src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3282.8228714564475!2d50.87084773654098!3d34.633916199999994!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f93bb0047360da5%3A0x3324e01c37fae8f0!2z2KrYudmF24zYsdin2Kog2qnYp9ix2KrYrtmI2KfZhiDYrdix2YHZhyDZvtmI2LI!5e0!3m2!1sen!2s!4v1725281061752!5m2!1sen!2s"
+          loading="lazy"
+          referrerPolicy="no-referrer-when-downgrade"
+        />
+
+        <div className="catalog__foot">
+          <Link to="/">بازگشت به صفحه اصلی</Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/DealersPage.tsx b/src/pages/DealersPage.tsx
new file mode 100644
index 0000000..f05a557
--- /dev/null
+++ b/src/pages/DealersPage.tsx
@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import PrimaryButton from '../components/PrimaryButton'
+import SeoHead from '../components/SeoHead'
+import {
+  ApiError,
+  listPublicRepresentations,
+  type PublicRepresentation,
+} from '../lib/api'
+import { toFaDigits } from '../lib/faDigits'
+import { paths } from '../lib/paths'
+import { dealerPhones, type PhoneKind } from '../lib/phones'
+import './CatalogPages.css'
+
+function PhoneIcon({ kind }: { kind: PhoneKind }) {
+  if (kind === 'mobile') {
+    return (
+      <svg className="dealer-row__phone-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <rect
+          x="7"
+          y="2.5"
+          width="10"
+          height="19"
+          rx="2.2"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.7"
+        />
+        <circle cx="12" cy="18.2" r="0.9" fill="currentColor" />
+      </svg>
+    )
+  }
+
+  return (
+    <svg className="dealer-row__phone-icon" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        fill="currentColor"
+        d="M6.6 3.2c.4-.4 1-.5 1.5-.3l2.2 1c.5.2.8.7.8 1.3l-.2 2.4c0 .4-.2.8-.5 1L9 10c.8 1.8 2.2 3.3 4 4.2l1.5-1.4c.3-.3.7-.5 1.1-.5l2.4.2c.5 0 1 .3 1.2.8l1 2.2c.2.5.1 1.1-.3 1.5l-1.3 1.3c-.4.4-1 .6-1.6.5-3.7-.5-7.1-2.4-9.6-4.9S4.3 8.9 3.8 5.2c-.1-.6.1-1.2.5-1.6Z"
+      />
+    </svg>
+  )
+}
+
+export default function DealersPage() {
+  const [items, setItems] = useState<PublicRepresentation[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [city, setCity] = useState('')
+  const [query, setQuery] = useState('')
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        const data = await listPublicRepresentations()
+        setItems(data)
+      } catch (err) {
+        setError(err instanceof ApiError ? err.message : 'بارگذاری نمایندگی‌ها ناموفق بود')
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  const cities = useMemo(
+    () => [...new Set(items.map((item) => item.city).filter(Boolean))],
+    [items],
+  )
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return items.filter((item) => {
+      if (city && item.city !== city) return false
+      if (!q) return true
+      const haystack = [item.name, item.owner, item.city, item.province, item.address]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase()
+      return haystack.includes(q)
+    })
+  }, [items, city, query])
+
+  return (
+    <section className="catalog">
+      <SeoHead
+        title="نمایندگی های مادو موتور در سراسر ایران"
+        description="با لیست کامل نمایندگی‌ های مادو موتور در سراسر ایران آشنا شوید. آدرس، شماره تماس و خدمات ارائه‌ شده توسط هر نمایندگی را به‌ راحتی مشاهده کنید و نزدیک‌ترین شعبه را انتخاب کنید."
+        path={paths.dealers}
+      />
+      <div className="container">
+        <div className="catalog__head">
+          <h1>نمایندگی های مادو موتور</h1>
+          <p>نمایندگی‌های فعال در سراسر ایران</p>
+          <label className="dealers-search">
+            <span className="visually-hidden">جستجوی نمایندگی</span>
+            <input
+              type="search"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="جستجو بر اساس نام یا شهر..."
+              autoComplete="off"
+            />
+          </label>
+        </div>
+
+        {loading ? <p className="catalog__status">در حال بارگذاری...</p> : null}
+        {error ? <p className="catalog__status catalog__status--error">{error}</p> : null}
+
+        {!loading && !error ? (
+          <>
+            {cities.length > 0 ? (
+              <div className="dealers-filter">
+                <button
+                  type="button"
+                  className={!city ? 'is-active' : ''}
+                  onClick={() => setCity('')}
+                >
+                  همه
+                </button>
+                {cities.map((name) => (
+                  <button
+                    key={name}
+                    type="button"
+                    className={city === name ? 'is-active' : ''}
+                    onClick={() => setCity(name)}
+                  >
+                    {name}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+
+            <div className="dealers-list">
+              {filtered.length === 0 ? (
+                <p className="catalog__status">
+                  {query.trim() || city
+                    ? 'نتیجه‌ای برای این جستجو پیدا نشد'
+                    : 'نمایندگی فعالی ثبت نشده است'}
+                </p>
+              ) : null}
+              {filtered.map((item) => (
+                <article key={item.id} className="dealer-row">
+                  <div>
+                    <h2>{item.name}</h2>
+                    <p>{item.owner || item.city}</p>
+                  </div>
+                  <div>
+                    <strong>{item.city}</strong>
+                    {item.province ? <span> / {item.province}</span> : null}
+                    <p>{item.address || '—'}</p>
+                  </div>
+                  <div className="dealer-row__contacts">
+                    {dealerPhones(item.mobile, item.landline).map((phone) => (
+                      <a
+                        key={`${phone.kind}-${phone.href}`}
+                        className={`dealer-row__phone dealer-row__phone--${phone.kind}`}
+                        href={phone.href}
+                        dir="ltr"
+                      >
+                        <PhoneIcon kind={phone.kind} />
+                        <span>{toFaDigits(phone.display)}</span>
+                      </a>
+                    ))}
+                  </div>
+                </article>
+              ))}
+            </div>
+          </>
+        ) : null}
+      </div>
+
+      <div className="dealers-cta">
+        <div className="container dealers-cta__inner">
+          <p>مایل هستید نماینده ی ما در شهر خودتان باشید؟</p>
+          <PrimaryButton to={paths.representationRequest} title="درخواست نمایندگی" />
+        </div>
+      </div>
+
+      <div className="container">
+        <div className="catalog__foot">
+          <Link to="/">بازگشت به صفحه اصلی</Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css
new file mode 100644
index 0000000..b039398
--- /dev/null
+++ b/src/pages/HomePage.css
@@ -0,0 +1,744 @@
+.section-title {
+  margin-bottom: 1.75rem;
+  text-align: center;
+  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
+  font-weight: 300;
+}
+
+/* Hero — scooter + EN title (bg) and copy share one centered viewport */
+.hero {
+  position: relative;
+  min-height: 640px;
+  background-color: #f7f7f7;
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: auto 520px;
+  display: flex;
+  align-items: center;
+  padding-block: 2.5rem 3.25rem;
+}
+
+.hero__content {
+  position: relative;
+  z-index: 1;
+  max-width: 34rem;
+  margin-inline-start: 0;
+  margin-inline-end: auto;
+  margin-top: 0;
+  text-align: start;
+}
+
+.hero h1 {
+  margin-bottom: 0.65rem;
+  font-size: clamp(1.6rem, 3vw, 2rem);
+  font-weight: 300;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.hero__lead {
+  margin-bottom: 1.1rem;
+  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
+  line-height: 1.7;
+  color: #333;
+}
+
+.hero__model .en {
+  font-weight: 700;
+}
+
+.hero__model {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.85rem;
+  padding-top: 0.85rem;
+  margin-bottom: 1.25rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  color: #555;
+}
+
+.hero__call {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  max-width: 420px;
+  padding: 0.65rem 1rem;
+  border: 1px solid #ddd;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.hero__call-text {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.hero__call-text > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.hero__call-sub {
+  color: #9c9c9c;
+  font-size: 0.85rem;
+}
+
+.hero__phone-icon {
+  flex-shrink: 0;
+}
+
+/* Trade-in banner */
+.trade-in {
+  position: relative;
+  z-index: 2;
+  margin-top: -1.5rem;
+  padding: 1.5rem 0 0;
+}
+
+.trade-in__inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem 3rem;
+  padding: 1.75rem 1.5rem;
+  background: #fff;
+  border-radius: 18px 18px 0 0;
+  box-shadow: 0 -8px 30px rgba(20, 36, 76, 0.04);
+}
+
+.trade-in__title {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+  text-align: center;
+}
+
+.trade-in__eyebrow {
+  display: block;
+  color: #9c9c9c;
+  margin-bottom: 0.25rem;
+}
+
+.trade-in__title h2 {
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.7;
+}
+
+.trade-in__phones {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  margin-top: 0.85rem;
+  font-size: 0.9rem;
+  color: #444;
+}
+
+.trade-in__loan {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  text-align: center;
+}
+
+.trade-in__loan-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.trade-in__loan-top img {
+  height: 72px;
+  width: auto;
+  mix-blend-mode: multiply;
+}
+
+.trade-in__loan-top p {
+  font-size: 0.92rem;
+}
+
+.trade-in__loan-note {
+  color: #9c9c9c;
+  font-size: 0.85rem;
+}
+
+.trade-in__address {
+  max-width: 28rem;
+  font-size: 0.88rem;
+  line-height: 1.8;
+  color: #555;
+}
+
+/* Video */
+.video-section {
+  background: #fff;
+  padding: 1.25rem 0 2rem;
+}
+
+.video-section__frame {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius);
+  background: #000;
+}
+
+.video-section__frame::before {
+  content: '';
+  display: block;
+  padding-top: 57%;
+}
+
+.video-section__frame iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+/* Why us */
+.why-us {
+  background: #fff;
+  padding: 2rem 0 3rem;
+}
+
+.why-us__features {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.5rem 1rem;
+}
+
+.why-us__feature {
+  text-align: center;
+}
+
+.why-us__feature img {
+  width: 70px;
+  height: 70px;
+  margin-inline: auto  auto;
+  margin-bottom: 0.75rem;
+  object-fit: contain;
+}
+
+.why-us__sub {
+  margin-top: 0.2rem;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 0.9rem;
+}
+
+.why-us__divider {
+  height: 1px;
+  margin: 2.5rem 0;
+  background: #ececec;
+}
+
+.why-us__stats {
+  display: grid;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.why-us__stat-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 2rem;
+  text-align: center;
+  min-height: 100%;
+}
+
+.why-us__stat-col h4 {
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.3rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.why-us__stat-col h4 span {
+  font-size: 2rem;
+}
+
+.why-us__stat-col h4 small {
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.why-us__stat-col p {
+  margin-top: 0.4rem;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.why-us__visual img {
+  width: 100%;
+  margin-inline: auto;
+}
+
+.why-us__catalog {
+  max-width: 520px;
+  margin: 2rem auto 0;
+}
+
+/* Motors */
+.motors {
+  padding: 1rem 0 2.5rem;
+}
+
+.motors__grid {
+  display: grid;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.motors__card {
+  text-align: center;
+  padding: 1rem;
+  transition: transform 0.25s ease;
+}
+
+.motors__card:hover {
+  transform: translateY(-4px);
+}
+
+.motors__card img {
+  width: min(100%, 320px);
+  margin-inline: auto  auto;
+  margin-bottom: 0.75rem;
+}
+
+.motors__card h3 {
+  margin-bottom: 0.35rem;
+  font-size: 1.35rem;
+}
+
+.motors__card p {
+  color: #9c9c9c;
+}
+
+.motors__divider {
+  display: none;
+  width: 1px;
+  height: 220px;
+  margin-inline: auto;
+  background: #d9d9d9;
+}
+
+/* Dealers */
+.dealers {
+  padding-top: 1rem;
+}
+
+.dealers__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.85rem;
+}
+
+.dealers__card {
+  overflow: hidden;
+  text-align: start;
+  background: #fff;
+  border-radius: var(--radius);
+  transition: box-shadow 0.2s ease;
+}
+
+.dealers__card.is-open,
+.dealers__card:hover {
+  box-shadow: 0 8px 24px rgba(20, 36, 76, 0.08);
+}
+
+.dealers__card img:first-child {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  object-fit: cover;
+}
+
+.dealers__card-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.7rem 0.9rem;
+}
+
+.dealers__details {
+  margin-top: 1rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.dealers__branch {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+  background: #fff;
+  border-radius: 12px;
+}
+
+.dealers__branch-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.dealers__branch-title {
+  text-align: center;
+  min-width: 7rem;
+}
+
+.dealers__branch-title h3 {
+  margin-bottom: 0.35rem;
+  font-weight: 300;
+}
+
+.dealers__branch ul {
+  list-style: disc;
+  padding-inline-start: 1.2rem;
+  border-inline-start: 1px solid #b9b7bc;
+  padding-inline-start: 1.4rem;
+  margin-inline-start: 0.5rem;
+  color: #646464;
+  line-height: 1.8;
+  font-size: 0.9rem;
+}
+
+.dealers__branch iframe {
+  width: min(100%, 300px);
+  height: 200px;
+  border: 0;
+  border-radius: 12px;
+}
+
+.dealers__all {
+  max-width: 520px;
+  margin: 1.75rem auto 2rem;
+}
+
+.dealers__cta {
+  background: #fff;
+  padding: 1.25rem 0;
+}
+
+.dealers__cta-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes homeFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes homeFadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes homeFadeStart {
+  from {
+    opacity: 0;
+    transform: translateX(32px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes homeFadeEnd {
+  from {
+    opacity: 0;
+    transform: translateX(-32px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes homePop {
+  from {
+    opacity: 0;
+    transform: translateY(28px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.hero--enter {
+  animation: homeFadeIn 1.1s ease both;
+}
+
+.hero--enter h1 {
+  animation: homeFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.hero--enter .hero__lead {
+  animation: homeFadeUp 0.75s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.hero--enter .hero__model {
+  animation: homeFadeUp 0.75s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.hero--enter .hero__call {
+  animation: homePop 0.85s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal {
+  opacity: 0;
+  transform: translateY(40px);
+  transition:
+    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.home-reveal.is-in {
+  opacity: 1;
+  transform: none;
+}
+
+.home-reveal.is-in .trade-in__plan {
+  animation: homeFadeStart 0.8s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .trade-in__loan {
+  animation: homeFadeEnd 0.8s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .video-section__frame {
+  animation: homePop 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .section-title {
+  animation: homeFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .why-us__feature {
+  opacity: 0;
+  animation: homePop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .why-us__feature:nth-child(1) {
+  animation-delay: 0.12s;
+}
+.home-reveal.is-in .why-us__feature:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.home-reveal.is-in .why-us__feature:nth-child(3) {
+  animation-delay: 0.28s;
+}
+.home-reveal.is-in .why-us__feature:nth-child(4) {
+  animation-delay: 0.36s;
+}
+
+.home-reveal.is-in .why-us__stat-col:first-child {
+  animation: homeFadeStart 0.75s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .why-us__visual {
+  animation: homePop 0.85s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .why-us__stat-col:last-child {
+  animation: homeFadeEnd 0.75s 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .why-us__catalog {
+  animation: homeFadeUp 0.65s 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .motors__card:first-child {
+  animation: homeFadeStart 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .motors__card:last-child {
+  animation: homeFadeEnd 0.75s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .motors__divider {
+  animation: homeFadeIn 0.6s 0.2s ease both;
+}
+
+.home-reveal.is-in .dealers__card {
+  opacity: 0;
+  animation: homePop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.home-reveal.is-in .dealers__card:nth-child(1) {
+  animation-delay: 0.08s;
+}
+.home-reveal.is-in .dealers__card:nth-child(2) {
+  animation-delay: 0.14s;
+}
+.home-reveal.is-in .dealers__card:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.home-reveal.is-in .dealers__card:nth-child(4) {
+  animation-delay: 0.26s;
+}
+.home-reveal.is-in .dealers__card:nth-child(5) {
+  animation-delay: 0.32s;
+}
+.home-reveal.is-in .dealers__card:nth-child(6) {
+  animation-delay: 0.38s;
+}
+.home-reveal.is-in .dealers__card:nth-child(7) {
+  animation-delay: 0.44s;
+}
+.home-reveal.is-in .dealers__card:nth-child(8) {
+  animation-delay: 0.5s;
+}
+
+.home-reveal.is-in .dealers__all,
+.home-reveal.is-in .dealers__cta {
+  animation: homeFadeUp 0.7s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.dealers__details {
+  animation: homeFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (max-width: 767px) {
+  .hero {
+    min-height: 480px;
+    background-position: left center;
+    background-size: auto 380px;
+    align-items: center;
+    padding-block: 1.75rem 2.5rem;
+  }
+
+  .hero__content {
+    max-width: 100%;
+    margin-top: 0;
+  }
+
+  .hero__model .primary-btn {
+    min-width: 100%;
+  }
+}
+
+@media (min-width: 768px) {
+  .hero {
+    min-height: 680px;
+    background-position: left center;
+    background-size: auto 540px;
+  }
+
+  .why-us__features {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .why-us__feature img {
+    width: 100px;
+    height: 100px;
+  }
+
+  .dealers__grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 990px) {
+  .hero {
+    min-height: 720px;
+    padding-block: 3rem 4rem;
+    background-size: auto 560px;
+  }
+
+  .hero__content {
+    margin-top: 0;
+  }
+
+  .hero__lead {
+    font-size: 1.7rem;
+  }
+
+  .why-us__stats {
+    grid-template-columns: 1fr 1.6fr 1fr;
+  }
+
+  .motors__grid {
+    grid-template-columns: 1fr auto 1fr;
+  }
+
+  .motors__divider {
+    display: block;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero--enter,
+  .hero--enter h1,
+  .hero--enter .hero__lead,
+  .hero--enter .hero__model,
+  .hero--enter .hero__call,
+  .hero__content,
+  .motors__card,
+  .home-reveal,
+  .home-reveal.is-in .trade-in__plan,
+  .home-reveal.is-in .trade-in__loan,
+  .home-reveal.is-in .video-section__frame,
+  .home-reveal.is-in .section-title,
+  .home-reveal.is-in .why-us__feature,
+  .home-reveal.is-in .why-us__stat-col:first-child,
+  .home-reveal.is-in .why-us__visual,
+  .home-reveal.is-in .why-us__stat-col:last-child,
+  .home-reveal.is-in .why-us__catalog,
+  .home-reveal.is-in .motors__card:first-child,
+  .home-reveal.is-in .motors__card:last-child,
+  .home-reveal.is-in .motors__divider,
+  .home-reveal.is-in .dealers__card,
+  .home-reveal.is-in .dealers__all,
+  .home-reveal.is-in .dealers__cta,
+  .dealers__details {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+    transition: none !important;
+  }
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..d631863
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,337 @@
+import { useEffect, useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
+import PrimaryButton from '../components/PrimaryButton'
+import { dealerCities } from '../data/dealers'
+import { toFaDigits } from '../lib/faDigits'
+import sliderBg from '../assets/images/slider.png'
+import motorIcon from '../assets/images/icons/motor-icon.png'
+import loanNumber from '../assets/images/150.png'
+import feature1 from '../assets/images/icons/1.png'
+import feature2 from '../assets/images/icons/2.png'
+import feature3 from '../assets/images/icons/3.png'
+import feature4 from '../assets/images/icons/4.png'
+import infoImage from '../assets/images/info.png'
+import mado230 from '../assets/images/mado-230.png'
+import mado130 from '../assets/images/mado-130.png'
+import angleLeft from '../assets/images/icons/angle-left.svg'
+import arrowDown from '../assets/images/icons/arrow-down.svg'
+import arrowLeft from '../assets/images/icons/arrow-left.svg'
+import SeoHead from '../components/SeoHead'
+import { paths } from '../lib/paths'
+import './HomePage.css'
+
+const features = [
+  { icon: feature1, title: 'خدمات پس از فروش', subtitle: 'به گستردگی ایران' },
+  { icon: feature2, title: 'قیمت بسیار مناسب', subtitle: 'خرید بدون واسطه' },
+  { icon: feature3, title: 'موتور تمام برقی', subtitle: 'لذت آرامش' },
+  { icon: feature4, title: 'شارژ سریع', subtitle: 'آماده به کار' },
+]
+
+export default function HomePage() {
+  const [openCity, setOpenCity] = useState<string | null>(null)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const nodes = [...root.querySelectorAll('.js-reveal')]
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue
+          entry.target.classList.add('is-in')
+          io.unobserve(entry.target)
+        }
+      },
+      { threshold: 0.14, rootMargin: '0px 0px -6% 0px' },
+    )
+    nodes.forEach((node) => io.observe(node))
+    return () => io.disconnect()
+  }, [])
+
+  const activeCity = dealerCities.find((city) => city.name === openCity)
+
+  return (
+    <div className="home" ref={rootRef}>
+      <SeoHead
+        title="خرید موتور سیکلت برقی از کارخانه | سایت رسمی مادو موتور"
+        description="خرید انواع موتور برقی با کیفیت از مادو | تجربه‌ ای نو از رانندگی بی‌ صدا، بدون بنزین و دوستدار محیط‌ زیست. قیمت مناسب، خدمات پس از فروش و ارسال سریع در سراسر ایران"
+        path={paths.home}
+      />
+      {/* Hero */}
+      <section
+        className="hero hero--enter"
+        style={{ backgroundImage: `url(${sliderBg})` }}
+        aria-label="معرفی مادو موتور"
+      >
+        <div className="container">
+          <div className="hero__content">
+            <h1>موتور برقی مادو</h1>
+            <p className="hero__lead">
+              چقدر برای <span className="text-primary medium">آرامش</span> خود ارزش قائلید؟
+            </p>
+
+            <div className="hero__model">
+              <span>
+                مادو موتور مدل <span className="en">Mado 230</span>
+              </span>
+              <PrimaryButton to="/landing/mado-230/موتور-برقی-مادو-۲۳۰" />
+            </div>
+
+            <a className="hero__call" href="tel:0251825">
+              <div className="hero__call-text">
+                <svg
+                  className="hero__phone-icon"
+                  viewBox="0 0 24 24"
+                  width="36"
+                  height="36"
+                  aria-hidden="true"
+                >
+                  <path
+                    fill="#c5c5c5"
+                    d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1l-2.2 2.9z"
+                  />
+                </svg>
+                <div>
+                  <span className="text-gradient">سوالی دارید؟</span>
+                  <span className="hero__call-sub">باهامون تماس بگیرید</span>
+                </div>
+              </div>
+              <span className="text-gradient" dir="ltr">
+                {toFaDigits('025-1825')}
+              </span>
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* Government trade-in */}
+      <section className="trade-in js-reveal home-reveal">
+        <div className="container trade-in__inner">
+          <div className="trade-in__plan">
+            <div className="trade-in__title">
+              <img src={motorIcon} alt="" width={50} height={50} />
+              <div>
+                <span className="trade-in__eyebrow">طـــــرح دولتــــــــی تعویـــــض</span>
+                <h2>
+                  موتـــور سیکلـــت فرســـــوده
+                  <br />
+                  با موتور سیکلت برقی مـادو
+                </h2>
+              </div>
+            </div>
+            <div className="trade-in__phones">
+              <span dir="ltr">{toFaDigits('0912 900 4142')}</span>
+              <span>|</span>
+              <span dir="ltr">{toFaDigits('0912 3121 761')}</span>
+              <span>|</span>
+              <span className="text-gradient" dir="ltr">
+                {toFaDigits('025-1825')}
+              </span>
+            </div>
+          </div>
+
+          <div className="trade-in__loan">
+            <div className="trade-in__loan-top">
+              <img src={loanNumber} alt="۳۰۰ میلیون" height={90} />
+              <div>
+                <span>میلیون</span>
+                <p>
+                  وام <strong>۴</strong> درصـــــــــد <strong>۲۴</strong> ماهــــه
+                </p>
+                <span className="trade-in__loan-note">(فعـــــلا مخصـــوص تهــــران)</span>
+              </div>
+            </div>
+            <p className="trade-in__address">
+              خیابان دماوند غرب به شرق چهـــار راه اشـــراق، ایستگـــاه بی آر تی سبلان پلاک ۹۳۲،
+              همکــــــف درمانگـــاه پاستــــور
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Aparat video */}
+      <section className="video-section js-reveal home-reveal">
+        <div className="container">
+          <div className="video-section__frame">
+            <iframe
+              src="https://www.aparat.com/video/video/embed/videohash/thg8dsj/vt/frame?titleShow=true"
+              title="ویدیو مادو موتور"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Why us */}
+      <section className="why-us js-reveal home-reveal">
+        <div className="container">
+          <h2 className="section-title">
+            چرا <span className="text-primary medium">مادو موتور</span> را انتخاب کنم؟
+          </h2>
+
+          <div className="why-us__features">
+            {features.map((item) => (
+              <div key={item.title} className="why-us__feature">
+                <img src={item.icon} alt="" width={100} height={100} />
+                <p className="medium">{item.title}</p>
+                <p className="why-us__sub">{item.subtitle}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="why-us__divider" />
+
+          <div className="why-us__stats">
+            <div className="why-us__stat-col">
+              <div>
+                <h4>
+                  <span>۷۰</span> <small>قطعه</small>
+                </h4>
+                <p>
+                  گارانتی بیش از
+                  <br />
+                  ۷۰ قطعه ی اصلی
+                </p>
+              </div>
+              <div>
+                <h4>
+                  <span>۸۰</span> <small>کیلومتر بر ساعت</small>
+                </h4>
+                <p>حداکثر سرعت</p>
+              </div>
+            </div>
+
+            <div className="why-us__visual">
+              <img src={infoImage} alt="موتور برقی مادو" />
+            </div>
+
+            <div className="why-us__stat-col">
+              <div>
+                <h4>
+                  <small>تا</small> <span>۳۶</span> <small>ماه</small>
+                </h4>
+                <p>گارانتی</p>
+              </div>
+              <div>
+                <h4>
+                  <span>۱۲۰</span> <small>کیلومتر پیمایش</small>
+                </h4>
+                <p>با باطری های نسل جدید ۴۵ آمپر لیتیومی</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="why-us__catalog">
+            <PrimaryButton
+              to="https://uploadkon.ir/uploads/032910_25Mado230-Catalog.pdf"
+              title="دانلود کاتالوگ مادو ۲۳۰"
+              variant="dark"
+              full
+              download
+              iconSrc={arrowDown}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Product cards */}
+      <section className="motors js-reveal home-reveal">
+        <div className="container motors__grid">
+          <Link to="/landing/mado-230/موتور-برقی-مادو-۲۳۰" className="motors__card">
+            <img src={mado230} alt="مادو ۲۳۰" />
+            <h3>مــــــــــادو ۲۳۰</h3>
+            <p>قـــــــــــــــدرتمند و پر استقـــــــــــــــامت</p>
+          </Link>
+          <div className="motors__divider" aria-hidden="true" />
+          <Link to="/landing/mado-130/موتور-برقی-مادو-۱۳۰" className="motors__card">
+            <img src={mado130} alt="مادو ۱۳۰" />
+            <h3>مــــــــــادو ۱۳۰</h3>
+            <p>جمع و جور، رنگارنگ و دوســــــــــت داشــــــــــتنی</p>
+          </Link>
+        </div>
+      </section>
+
+      {/* Dealers */}
+      <section className="dealers js-reveal home-reveal">
+        <div className="container">
+          <h2 className="section-title">
+            نمایندگی های <span className="text-primary medium">مادو موتور</span>
+          </h2>
+
+          <div className="dealers__grid">
+            {dealerCities.map((city) => (
+              <button
+                key={city.name}
+                type="button"
+                className={`dealers__card ${openCity === city.name ? 'is-open' : ''}`}
+                onClick={() =>
+                  setOpenCity((current) => (current === city.name ? null : city.name))
+                }
+              >
+                <img src={city.image} alt={city.name} />
+                <div className="dealers__card-foot">
+                  <h4>{city.name}</h4>
+                  <img src={angleLeft} alt="" width={10} height={16} />
+                </div>
+              </button>
+            ))}
+          </div>
+
+          {activeCity && (
+            <div className="dealers__details">
+              {activeCity.branches.map((branch) => (
+                <div key={`${branch.code}-${branch.name}`} className="dealers__branch">
+                  <div className="dealers__branch-info">
+                    <div className="dealers__branch-title">
+                      <h3>{branch.name}</h3>
+                      <p className="text-primary">کد {toFaDigits(branch.code)}</p>
+                    </div>
+                    <ul>
+                      {branch.ceo ? <li>{branch.ceo}</li> : null}
+                      <li>{toFaDigits(branch.address)}</li>
+                      {branch.phones.map((phone) => (
+                        <li key={phone} dir="ltr">
+                          {toFaDigits(phone)}
+                        </li>
+                      ))}
+                      {branch.postalCode ? (
+                        <li>کد پستی: {toFaDigits(branch.postalCode)}</li>
+                      ) : null}
+                    </ul>
+                  </div>
+                  {branch.mapURL ? (
+                    <iframe
+                      src={branch.mapURL}
+                      title={`نقشه ${branch.name}`}
+                      loading="lazy"
+                      referrerPolicy="no-referrer-when-downgrade"
+                      allowFullScreen
+                    />
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          )}
+
+          <div className="dealers__all">
+            <PrimaryButton
+              to={paths.dealers}
+              title="همه ی نمایندگی های مادو موتور"
+              variant="dark"
+              full
+              iconSrc={arrowLeft}
+            />
+          </div>
+        </div>
+
+        <div className="dealers__cta">
+          <div className="container dealers__cta-inner">
+            <p>مایل هستید نماینده ی ما در شهر خودتان باشید؟</p>
+            <PrimaryButton to={paths.representationRequest} title="درخواست نمایندگی" />
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/src/pages/LandingModelPage.css b/src/pages/LandingModelPage.css
new file mode 100644
index 0000000..19ebc2e
--- /dev/null
+++ b/src/pages/LandingModelPage.css
@@ -0,0 +1,661 @@
+.landing {
+  background: #fff;
+  color: #575757;
+}
+
+.landing ul {
+  list-style-type: disc;
+  margin: 0;
+  padding-inline-start: 1.1rem;
+  line-height: 2;
+}
+
+.landing ul li {
+  color: #949494;
+}
+
+.text-gradient-1 {
+  background: linear-gradient(to left, #a6caff, #2c86ed);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.text-gradient-2 {
+  background: linear-gradient(to left, #a6caff, #2c50ed);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.text-gradient-3 {
+  background: linear-gradient(to left, #1a92fb, #0077ff, #3ddfff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.text-gradient-4 {
+  background: linear-gradient(to left, #ff9d00, #57b1ff, #2c50ed);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.text-gradient-5 {
+  background: linear-gradient(to left, #538408, #8caf00);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.text-shadow {
+  filter: drop-shadow(0 6px 7px rgba(181, 216, 255, 0.6));
+}
+
+.text-muted {
+  color: #9c9c9c !important;
+}
+
+.landing__chip {
+  display: inline-block;
+  font-weight: 500;
+  line-height: 1.15;
+}
+
+.landing__chip--sm {
+  font-size: 20px;
+}
+
+.landing__chip--md {
+  font-size: 23px;
+}
+
+.landing__chip--lg {
+  font-size: 18px;
+}
+
+.landing__chip--xl {
+  font-size: 35px;
+  font-weight: 500;
+}
+
+.landing__chip--muted {
+  color: #9c9c9c;
+  font-weight: 300;
+}
+
+.landing__slider {
+  position: relative;
+  padding: 2.5rem 0 1.5rem;
+  background: #fff;
+  overflow: hidden;
+}
+
+.landing__slider-bg {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 100vw;
+  height: 100%;
+  transform: translateX(-50%);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.landing__slider-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 72% 58% at 50% 42%, rgba(255, 255, 255, 0.5) 0%, transparent 68%),
+    linear-gradient(
+      to bottom,
+      #fff 0%,
+      rgba(255, 255, 255, 0.55) 10%,
+      transparent 24%,
+      transparent 62%,
+      rgba(255, 255, 255, 0.7) 86%,
+      #fff 100%
+    ),
+    linear-gradient(
+      to right,
+      #fff 0%,
+      transparent 12%,
+      transparent 88%,
+      #fff 100%
+    );
+}
+
+.landing__slider-inner {
+  position: relative;
+  z-index: 1;
+}
+
+.landing__hero-title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  margin-bottom: 2.5rem;
+  text-align: center;
+}
+
+.landing__hero-title h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.landing__hero-row {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) minmax(280px, 1.6fr) minmax(140px, 1fr);
+  gap: 1rem 1.5rem;
+  align-items: center;
+  justify-items: center;
+}
+
+.landing__stat {
+  justify-self: stretch;
+}
+
+.landing__stat--speed {
+  text-align: start;
+}
+
+.landing__stat--range {
+  text-align: start;
+}
+
+.landing__stat-line {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.15rem;
+}
+
+.landing__stat-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.landing__stat--mobile {
+  display: none;
+}
+
+.landing__hero-image {
+  width: min(100%, 560px);
+}
+
+.landing__hero-image img,
+.landing__intro img,
+.landing__band img,
+.landing__split img,
+.landing__guarantee img,
+.landing-carousel img,
+.landing__blog-card img {
+  width: 100%;
+  display: block;
+}
+
+.landing__extra {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-top: 2rem;
+}
+
+.landing__scroll {
+  width: 40px;
+  height: 80px;
+  margin: 1.75rem auto 0;
+  border-radius: 50px;
+  padding: 5px;
+  border: 2px solid #e5e5e5;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.landing__section {
+  padding: 3.5rem 0;
+}
+
+.landing__intro {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  align-items: center;
+}
+
+.landing__kicker {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.landing__kicker.column {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.35rem;
+}
+
+.landing__copy {
+  margin: 0;
+  color: #9c9c9c;
+  line-height: 1.9;
+  font-size: 16px;
+}
+
+.landing__copy--center {
+  text-align: center;
+}
+
+.landing__band {
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 3.5rem 0;
+}
+
+.landing__band--price {
+  background-size: cover;
+  background-position: center left;
+  background-repeat: no-repeat;
+  padding-top: 4rem;
+}
+
+.landing__band-inner {
+  display: grid;
+  grid-template-columns: minmax(160px, 280px) 1fr;
+  gap: 2rem;
+  align-items: center;
+}
+
+.landing__band-inner--wide {
+  grid-template-columns: 1.1fr 1fr;
+}
+
+.landing__band-media {
+  max-width: 260px;
+}
+
+.landing__feature + .landing__feature {
+  margin-top: 1.75rem;
+}
+
+.landing__highlight {
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 3.5rem 1rem;
+}
+
+.landing__highlight-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  text-align: center;
+}
+
+.landing__colors {
+  text-align: center;
+}
+
+.landing__colors .landing__copy {
+  margin-top: 0.35rem;
+}
+
+.landing-carousel {
+  margin: 2rem auto 0;
+  max-width: 820px;
+}
+
+.landing-carousel__frame {
+  min-height: 260px;
+  display: grid;
+  place-items: center;
+}
+
+.landing-carousel__frame img {
+  max-height: 320px;
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.landing-carousel__dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 1rem;
+}
+
+.landing-carousel__dots button {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 999px;
+  background: #cfd8e6;
+  cursor: pointer;
+}
+
+.landing-carousel__dots button.is-active {
+  background: #2c86ed;
+}
+
+.landing__split {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 2rem;
+  align-items: center;
+  padding: 4rem clamp(1rem, 4vw, 3rem);
+}
+
+.landing__guarantee {
+  width: 100%;
+  background-size: cover;
+  background-position: center left;
+  background-repeat: no-repeat;
+  padding: 3rem 0;
+}
+
+.landing__guarantee-inner {
+  display: grid;
+  grid-template-columns: minmax(180px, 320px) 1fr;
+  gap: 1.75rem;
+  align-items: center;
+}
+
+.landing__blogs {
+  padding-bottom: 2rem;
+}
+
+.landing__blogs > .landing__chip {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.landing__blogs-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.landing__blog-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.landing__blog-card img {
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.landing__blog-card h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.6;
+}
+
+.landing__blog-card p {
+  margin: 0;
+  color: #888;
+  font-size: 13px;
+  line-height: 1.7;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(6px);
+  }
+}
+
+@keyframes landingFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes landingFadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(22px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes landingPop {
+  from {
+    opacity: 0;
+    transform: translateY(40px) scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.landing__slider-bg {
+  animation: landingFadeIn 1.15s ease both;
+}
+
+.landing__hero-title h1 span {
+  animation: landingFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.landing__hero-title h1 strong {
+  animation: landingFadeUp 0.75s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.landing__hero-title .primary-btn {
+  animation: landingFadeUp 0.7s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.landing__hero-image {
+  animation: landingPop 0.95s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.landing__stat--speed {
+  animation: landingFadeUp 0.7s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.landing__stat--range {
+  animation: landingFadeUp 0.7s 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.landing__extra {
+  animation: landingFadeUp 0.7s 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.landing__scroll {
+  animation:
+    landingFadeIn 0.55s 0.9s ease both,
+    bounce 1.6s 1.5s ease infinite;
+}
+
+.reveal {
+  opacity: 0;
+  transform: translateY(36px);
+  transition:
+    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.reveal.is-in {
+  opacity: 1;
+  transform: none;
+}
+
+.reveal.is-in .landing__intro img,
+.reveal--split.is-in > img,
+.reveal.is-in .landing__band-media,
+.reveal.is-in .landing__band-inner > img,
+.reveal.is-in .landing__guarantee-inner > img {
+  animation: landingPop 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.reveal.is-in .landing__intro > div,
+.reveal--split.is-in > div,
+.reveal.is-in .landing__band-copy,
+.reveal.is-in .landing__band-inner > p,
+.reveal.is-in .landing__band-inner > div:not(.landing__band-copy),
+.reveal.is-in .landing__colors > .landing__chip,
+.reveal.is-in .landing__highlight-inner,
+.reveal.is-in .landing__blogs > .landing__chip {
+  animation: landingFadeUp 0.7s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.reveal.is-in .landing__colors .landing-carousel,
+.reveal.is-in .blog-carousel {
+  animation: landingFadeUp 0.75s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.reveal.is-in li {
+  opacity: 0;
+  animation: landingFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.reveal.is-in li:nth-child(1) {
+  animation-delay: 0.18s;
+}
+.reveal.is-in li:nth-child(2) {
+  animation-delay: 0.26s;
+}
+.reveal.is-in li:nth-child(3) {
+  animation-delay: 0.34s;
+}
+.reveal.is-in li:nth-child(4) {
+  animation-delay: 0.42s;
+}
+.reveal.is-in li:nth-child(5) {
+  animation-delay: 0.5s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .landing__slider-bg,
+  .landing__hero-title h1 span,
+  .landing__hero-title h1 strong,
+  .landing__hero-title .primary-btn,
+  .landing__hero-image,
+  .landing__stat--speed,
+  .landing__stat--range,
+  .landing__extra,
+  .landing__scroll,
+  .reveal,
+  .reveal.is-in .landing__intro img,
+  .reveal--split.is-in > img,
+  .reveal.is-in .landing__band-media,
+  .reveal.is-in .landing__band-inner > img,
+  .reveal.is-in .landing__guarantee-inner > img,
+  .reveal.is-in .landing__intro > div,
+  .reveal--split.is-in > div,
+  .reveal.is-in .landing__band-copy,
+  .reveal.is-in .landing__band-inner > p,
+  .reveal.is-in .landing__band-inner > div:not(.landing__band-copy),
+  .reveal.is-in .landing__colors > .landing__chip,
+  .reveal.is-in .landing__highlight-inner,
+  .reveal.is-in .landing__blogs > .landing__chip,
+  .reveal.is-in .landing__colors .landing-carousel,
+  .reveal.is-in .blog-carousel,
+  .reveal.is-in li {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+    transition: none !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .landing__chip--xl {
+    font-size: 60px;
+  }
+
+  .landing__chip--md {
+    font-size: 45px;
+  }
+
+  .landing__chip--sm {
+    font-size: 30px;
+  }
+
+  .landing__chip--lg {
+    font-size: 25px;
+  }
+}
+
+@media (max-width: 960px) {
+  .landing__hero-row,
+  .landing__hero-row--extras {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .landing__hero-image {
+    grid-column: 1 / -1;
+    order: 1;
+  }
+
+  .landing__stat--speed {
+    order: 2;
+  }
+
+  .landing__stat--mobile {
+    display: block;
+    order: 3;
+  }
+
+  .landing__stat--desktop {
+    display: none;
+  }
+
+  .landing__intro,
+  .landing__band-inner,
+  .landing__band-inner--wide,
+  .landing__split,
+  .landing__guarantee-inner {
+    grid-template-columns: 1fr;
+  }
+
+  .landing__band-media {
+    max-width: 200px;
+  }
+}
diff --git a/src/pages/LandingModelPage.tsx b/src/pages/LandingModelPage.tsx
new file mode 100644
index 0000000..93fd175
--- /dev/null
+++ b/src/pages/LandingModelPage.tsx
@@ -0,0 +1,369 @@
+import { useEffect, useRef, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import PrimaryButton from '../components/PrimaryButton'
+import {
+  resolveLandingModel,
+  type LandingModel,
+} from '../data/landingModels'
+import { listPublicBlogs, type PublicBlog } from '../lib/api'
+import { toFaDigits } from '../lib/faDigits'
+import SeoHead from '../components/SeoHead'
+import watermarkBg from '../assets/images/mado-230-bg.png'
+import BlogCarousel from '../components/BlogCarousel'
+import NotFoundPage from './NotFoundPage'
+
+function ColorCarousel({ images }: { images: string[] }) {
+  const [index, setIndex] = useState(0)
+  if (images.length === 0) return null
+
+  return (
+    <div className="landing-carousel">
+      <div className="landing-carousel__frame">
+        <img src={images[index]} alt="" />
+      </div>
+      <div className="landing-carousel__dots">
+        {images.map((_, i) => (
+          <button
+            key={i}
+            type="button"
+            className={i === index ? 'is-active' : ''}
+            aria-label={`رنگ ${i + 1}`}
+            onClick={() => setIndex(i)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function LandingContent({ model }: { model: LandingModel }) {
+  const [blogs, setBlogs] = useState<PublicBlog[]>([])
+  const rootRef = useRef<HTMLDivElement>(null)
+  const modelCode = model.label.replace('مادو ', '')
+
+  useEffect(() => {
+    void listPublicBlogs()
+      .then((data) => setBlogs(data))
+      .catch(() => setBlogs([]))
+  }, [model])
+
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const nodes = [...root.querySelectorAll('.js-reveal')]
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue
+          entry.target.classList.add('is-in')
+          io.unobserve(entry.target)
+        }
+      },
+      { threshold: 0.16, rootMargin: '0px 0px -8% 0px' },
+    )
+    nodes.forEach((node) => io.observe(node))
+    return () => io.disconnect()
+  }, [model.id, blogs.length])
+
+  return (
+    <div className="landing" key={model.id} ref={rootRef}>
+      <SeoHead
+        title={`${model.titleFa} - موتور سکلیت برقی`}
+        description={model.description}
+        path={`/landing/${model.id}/${model.slug}`}
+      />
+      <section className="landing__slider">
+        <div
+          className="landing__slider-bg"
+          style={{ backgroundImage: `url(${watermarkBg})` }}
+          aria-hidden="true"
+        />
+        <div className="container landing__slider-inner">
+          <div className="landing__hero-title">
+            <h1>
+              <span className="landing__chip landing__chip--muted landing__chip--lg">
+                موتورسیکلت
+              </span>
+              <strong className="landing__chip landing__chip--xl text-gradient-1 text-shadow">
+                {model.label}
+              </strong>
+            </h1>
+            <PrimaryButton to="#learn-more" title="بــــــــــرو بریــــــــــــــــم" />
+          </div>
+
+          <div
+            className={`landing__hero-row ${model.heroExtras ? 'landing__hero-row--extras' : ''}`}
+          >
+            <div className="landing__stat landing__stat--speed">
+              <span className="landing__chip landing__chip--lg text-gradient-2">
+                حداکثر سرعت
+              </span>
+              <div className="landing__stat-line">
+                <strong className="landing__chip landing__chip--xl">
+                  {toFaDigits(model.maxSpeed)}
+                </strong>
+                <span className="landing__chip landing__chip--lg">کیلومتــــر</span>
+              </div>
+              {model.heroExtras?.[0] ? (
+                <div className="landing__extra">
+                  <img src={model.heroExtras[0].image} alt="" width={90} />
+                  <strong className="landing__chip landing__chip--lg">
+                    {model.heroExtras[0].title}
+                  </strong>
+                  <span className="landing__chip landing__chip--md en text-muted">
+                    {model.heroExtras[0].subtitle}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+
+            <div className="landing__stat landing__stat--range landing__stat--mobile">
+              <span className="landing__chip landing__chip--lg text-gradient-2">پیمایش تا</span>
+              <div className="landing__stat-line">
+                <strong className="landing__chip landing__chip--xl">
+                  {toFaDigits(model.rangeValue)}
+                </strong>
+                <span className="landing__chip landing__chip--lg">کیلومتر</span>
+              </div>
+              <span className="landing__chip landing__chip--md">{model.rangeNote}</span>
+            </div>
+
+            <div className="landing__hero-image">
+              <img src={model.heroImage} alt={model.titleFa} />
+            </div>
+
+            <div className="landing__stat landing__stat--range landing__stat--desktop">
+              <span className="landing__chip landing__chip--lg text-gradient-2">پیمایش تا</span>
+              <div className="landing__stat-stack">
+                <div className="landing__stat-line">
+                  <strong className="landing__chip landing__chip--xl">
+                    {toFaDigits(model.rangeValue)}
+                  </strong>
+                  <span className="landing__chip landing__chip--lg">کیلومتر</span>
+                </div>
+                <span className="landing__chip landing__chip--md">{model.rangeNote}</span>
+              </div>
+              {model.heroExtras?.[1] ? (
+                <div className="landing__extra">
+                  <img src={model.heroExtras[1].image} alt="" width={80} />
+                  <strong className="landing__chip landing__chip--lg">
+                    {model.heroExtras[1].title}
+                  </strong>
+                  <span className="landing__chip landing__chip--md en text-muted">
+                    {model.heroExtras[1].subtitle}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          <div className="landing__scroll">
+            <img src={model.scrollIcon} alt="" width={25} height={25} />
+          </div>
+        </div>
+      </section>
+
+      <section id="learn-more" className="landing__section js-reveal reveal">
+        <div className="container landing__intro">
+          <img src={model.introImage} alt="" />
+          <div>
+            <div className="landing__kicker">
+              <span className="landing__chip landing__chip--sm text-muted">مـــــــــادو</span>
+              <strong className="landing__chip landing__chip--md text-gradient-1 text-shadow">
+                {modelCode}
+              </strong>
+            </div>
+            <p className="landing__copy">{model.introText}</p>
+          </div>
+        </div>
+      </section>
+
+      <section
+        className="landing__band js-reveal reveal"
+        style={{ backgroundImage: `url(${model.bg1})` }}
+      >
+        <div className="container landing__band-inner">
+          <img className="landing__band-media" src={model.dashImage} alt="" />
+          <div className="landing__band-copy">
+            {model.featureBlocks?.length ? (
+              model.featureBlocks.map((block) => (
+                <div key={block.title} className="landing__feature">
+                  <div className="landing__kicker">
+                    <span className="landing__chip landing__chip--sm">{block.eyebrow}</span>
+                    <strong className="landing__chip landing__chip--md text-gradient-2 text-shadow">
+                      {block.title}
+                    </strong>
+                  </div>
+                  <p className="landing__copy">{block.body}</p>
+                </div>
+              ))
+            ) : (
+              <>
+                <div className="landing__kicker">
+                  <span className="landing__chip landing__chip--sm">کیلومتر</span>
+                  <strong className="landing__chip landing__chip--md text-gradient-2 text-shadow">
+                    دیجیتالی
+                  </strong>
+                </div>
+                <p className="landing__copy">{model.dashText}</p>
+              </>
+            )}
+          </div>
+        </div>
+      </section>
+
+      <section
+        className="landing__highlight js-reveal reveal"
+        style={{ backgroundImage: `url(${model.bg2})` }}
+      >
+        <div className="landing__highlight-inner">
+          <img
+            src={model.highlight.icon}
+            alt=""
+            width={model.highlight.iconWidth}
+            height={model.highlight.iconWidth}
+          />
+          {model.id === 'mado-230' ? (
+            <>
+              <span className="landing__chip landing__chip--sm text-muted">قابلیت</span>
+              <strong className="landing__chip landing__chip--xl text-gradient-3 text-shadow">
+                فست شارژ
+              </strong>
+              <span className="landing__chip landing__chip--sm text-muted">به زودی...</span>
+            </>
+          ) : (
+            <>
+              <strong className="landing__chip landing__chip--xl text-gradient-3 text-shadow">
+                {model.highlight.title}
+              </strong>
+              {model.highlight.body ? (
+                <p className="landing__copy landing__copy--center">{model.highlight.body}</p>
+              ) : null}
+            </>
+          )}
+        </div>
+      </section>
+
+      <section className="landing__section js-reveal reveal">
+        <div className="container landing__colors">
+          <strong className="landing__chip landing__chip--md text-gradient-4 text-shadow">
+            {model.colorTitle}
+          </strong>
+          {model.colorSubtitles.map((line) => (
+            <p key={line} className="landing__copy landing__copy--center">
+              {line}
+            </p>
+          ))}
+          <ColorCarousel images={model.colors} />
+        </div>
+      </section>
+
+      <section className="landing__split js-reveal reveal reveal--split">
+        <img src={model.batteryImage} alt="" />
+        <div>
+          <div className="landing__kicker column">
+            <span className="landing__chip landing__chip--sm text-muted">باطری</span>
+            <strong className="landing__chip landing__chip--md text-gradient-1 text-shadow">
+              لیتیومی نسل جدید
+            </strong>
+          </div>
+          <ul>
+            {model.batteryItems.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section
+        className="landing__band js-reveal reveal"
+        style={{ backgroundImage: `url(${model.bg1})` }}
+      >
+        <div className="container landing__band-inner landing__band-inner--wide">
+          <img src={model.partsImage} alt="" />
+          <p className="landing__copy">
+            دسترسی آسان به تمامی قطعات بواسطه تولید 80 قطعه از 100 قطعه اصلی در داخل کشور قیمت مناسب
+            خدمات و قطعات موتور سیکلت
+          </p>
+        </div>
+      </section>
+
+      <section className="landing__split js-reveal reveal reveal--split">
+        <img src={model.ecoImage} alt="" />
+        <div>
+          <div className="landing__kicker column">
+            <span className="landing__chip landing__chip--sm text-muted">مادوموتور</span>
+            <strong className="landing__chip landing__chip--md text-gradient-5">
+              دوست دار محیط زیست
+            </strong>
+          </div>
+          <p className="landing__copy">
+            با موتور سیکت های برقی مادو موتور با کاهش آلایندگی هوا به سلامت یکدیگر کمک کنیم
+          </p>
+        </div>
+      </section>
+
+      <section
+        className="landing__guarantee js-reveal reveal"
+        style={{ backgroundImage: `url(${model.guaranteeTypo})` }}
+      >
+        <div className="container landing__guarantee-inner">
+          <img src={model.guaranteeImage} alt="گارانتی" />
+          <div>
+            <div className="landing__kicker column">
+              <span className="landing__chip landing__chip--sm text-muted">گارانتی</span>
+              <strong className="landing__chip landing__chip--md text-gradient-1 text-shadow">
+                بلند مدت و خدمات پس از فروش
+              </strong>
+            </div>
+            <ul>
+              {model.guaranteeItems.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section
+        className="landing__band landing__band--price js-reveal reveal"
+        style={{ backgroundImage: `url(${model.bg1})` }}
+      >
+        <div className="container landing__band-inner">
+          <img src={model.priceImage} alt="" />
+          <div>
+            <div className="landing__kicker column">
+              <span className="landing__chip landing__chip--sm text-muted">قیمت</span>
+              <strong className="landing__chip landing__chip--md text-gradient-1">
+                و شرایط مناسب
+              </strong>
+            </div>
+            <ul>
+              {model.priceItems.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      {blogs.length > 0 ? (
+        <section className="landing__section js-reveal reveal">
+          <div className="container landing__blogs">
+            <strong className="landing__chip landing__chip--lg text-gradient-2">
+              آخرین مقالات
+            </strong>
+            <BlogCarousel blogs={blogs} />
+          </div>
+        </section>
+      ) : null}
+    </div>
+  )
+}
+
+export default function LandingModelPage() {
+  const { model } = useParams()
+  const landing = resolveLandingModel(model)
+  if (!landing) return <NotFoundPage />
+  return <LandingContent model={landing} />
+}
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..3efbf28
--- /dev/null
+++ b/src/pages/NotFoundPage.tsx
@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom'
+import SeoHead from '../components/SeoHead'
+import { paths } from '../lib/paths'
+import './CatalogPages.css'
+
+export default function NotFoundPage() {
+  return (
+    <section className="catalog">
+      <SeoHead
+        title="صفحه پیدا نشد | مادو موتور"
+        description="این صفحه در سایت مادو موتور وجود ندارد."
+        path="/404"
+        noIndex
+      />
+      <div className="container">
+        <div className="catalog__head">
+          <h1>صفحه مورد نظر پیدا نشد</h1>
+          <p>ممکن است لینک تغییر کرده باشد یا حذف شده باشد.</p>
+        </div>
+        <div className="catalog__foot">
+          <Link to={paths.home}>بازگشت به صفحه اصلی</Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/ProductPage.tsx b/src/pages/ProductPage.tsx
new file mode 100644
index 0000000..40c3119
--- /dev/null
+++ b/src/pages/ProductPage.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import SeoHead from '../components/SeoHead'
+import { ApiError, getPublicProduct, type PublicProduct } from '../lib/api'
+import { paths, productPath } from '../lib/paths'
+import { toFaDigits } from '../lib/faDigits'
+import './CatalogPages.css'
+
+export default function ProductPage() {
+  const { id } = useParams()
+  const [product, setProduct] = useState<PublicProduct | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (!id) return
+    void (async () => {
+      setLoading(true)
+      setError('')
+      try {
+        setProduct(await getPublicProduct(id))
+      } catch (err) {
+        setError(err instanceof ApiError ? err.message : 'بارگذاری محصول ناموفق بود')
+        setProduct(null)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [id])
+
+  return (
+    <section className="catalog product-detail">
+      <SeoHead
+        title={product ? `${product.nameFa} | مادو موتور` : 'محصول'}
+        description={
+          product
+            ? `${product.nameFa}${product.nameEn ? ` / ${product.nameEn}` : ''} — خرید از مادو موتور`
+            : 'محصولات مادو موتور'
+        }
+        path={product && id ? productPath(id, product.nameFa) : paths.products}
+        noIndex={!product}
+      />
+      <div className="container">
+        {loading ? <p className="catalog__status">در حال بارگذاری...</p> : null}
+        {error ? <p className="catalog__status catalog__status--error">{error}</p> : null}
+
+        {product ? (
+          <article className="product-detail__card">
+            <div className="product-detail__media">
+              {product.imageUrl ? (
+                <img src={product.imageUrl} alt={product.nameFa} />
+              ) : (
+                <div className="catalog-card__placeholder">مادو</div>
+              )}
+            </div>
+            <div className="product-detail__body">
+              <span className="catalog-card__tag">{product.category || 'محصول'}</span>
+              <h1>{product.nameFa}</h1>
+              {product.nameEn ? <p className="en">{product.nameEn}</p> : null}
+              <div className="catalog-card__price">
+                <strong className="en">{toFaDigits(product.price.toLocaleString('en-US'))}</strong>
+                <span>تومان</span>
+              </div>
+            </div>
+          </article>
+        ) : null}
+
+        <div className="catalog__foot">
+          <Link to={paths.products}>بازگشت به لیست محصولات</Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/ProductsPage.tsx b/src/pages/ProductsPage.tsx
new file mode 100644
index 0000000..e7a1a48
--- /dev/null
+++ b/src/pages/ProductsPage.tsx
@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import SeoHead from '../components/SeoHead'
+import { ApiError, listPublicProducts, type PublicProduct } from '../lib/api'
+import { paths, productPath } from '../lib/paths'
+import { toFaDigits } from '../lib/faDigits'
+import './CatalogPages.css'
+
+export default function ProductsPage() {
+  const [products, setProducts] = useState<PublicProduct[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        setProducts(await listPublicProducts())
+      } catch (err) {
+        setError(err instanceof ApiError ? err.message : 'بارگذاری محصولات ناموفق بود')
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  return (
+    <section className="catalog">
+      <SeoHead
+        title="لیست محصولات | مادو موتور"
+        description="لیست موتورها و قطعات رسمی مادو موتور. خرید بدون واسطه از کارخانه با گارانتی و خدمات پس از فروش."
+        path={paths.products}
+      />
+      <div className="container">
+        <div className="catalog__head">
+          <h1>محصولات مادو موتور</h1>
+          <p>موتورها و قطعات رسمی مادو</p>
+        </div>
+
+        {loading ? <p className="catalog__status">در حال بارگذاری...</p> : null}
+        {error ? <p className="catalog__status catalog__status--error">{error}</p> : null}
+
+        {!loading && !error ? (
+          <div className="catalog__grid">
+            {products.length === 0 ? (
+              <p className="catalog__status">محصولی برای نمایش وجود ندارد</p>
+            ) : null}
+            {products.map((product) => (
+              <Link key={product.id} to={productPath(product.id, product.nameFa)} className="catalog-card">
+                <div className="catalog-card__media">
+                  {product.imageUrl ? (
+                    <img src={product.imageUrl} alt={product.nameFa} />
+                  ) : (
+                    <div className="catalog-card__placeholder">مادو</div>
+                  )}
+                </div>
+                <div className="catalog-card__body">
+                  <span className="catalog-card__tag">{product.category || 'محصول'}</span>
+                  <h2>{product.nameFa}</h2>
+                  <p className="en">{product.nameEn}</p>
+                  <div className="catalog-card__price">
+                    <strong className="en">{toFaDigits(product.price.toLocaleString('en-US'))}</strong>
+                    <span>تومان</span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        ) : null}
+
+        <div className="catalog__foot">
+          <Link to="/">بازگشت به صفحه اصلی</Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/RepresentationRequestPage.css b/src/pages/RepresentationRequestPage.css
new file mode 100644
index 0000000..81d5bfc
--- /dev/null
+++ b/src/pages/RepresentationRequestPage.css
@@ -0,0 +1,138 @@
+.rep-request {
+  padding: 40px 0 80px;
+  background: #f3f5f8;
+  min-height: 70vh;
+}
+
+.rep-request__card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 28px;
+  box-shadow: 0 8px 30px rgba(20, 36, 76, 0.06);
+}
+
+.rep-request__notice {
+  background: #eaf3ff;
+  color: #1e5fad;
+  border-radius: 8px;
+  padding: 14px 16px;
+  line-height: 1.8;
+  font-size: 14px;
+  margin-bottom: 24px;
+}
+
+.rep-request__grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.rep-request__grid label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 13px;
+  color: #555;
+}
+
+.rep-request__grid input,
+.rep-request__grid select,
+.rep-request__grid textarea {
+  width: 100%;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  padding: 12px 14px;
+  font: inherit;
+  background: #fff;
+  outline: none;
+}
+
+.rep-request__grid input:focus,
+.rep-request__grid select:focus,
+.rep-request__grid textarea:focus {
+  border-color: var(--color-blue);
+}
+
+.rep-request__span-3 {
+  grid-column: span 3;
+}
+
+.rep-request__full {
+  grid-column: 1 / -1;
+}
+
+.rep-request__actions {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 24px;
+}
+
+.rep-request__actions .primary-btn {
+  border: 0;
+  cursor: pointer;
+}
+
+.rep-request__actions .primary-btn:disabled {
+  opacity: 0.7;
+  cursor: wait;
+}
+
+.rep-request__error {
+  color: #d32f2f;
+  margin: 16px 0 0;
+  font-size: 14px;
+}
+
+.rep-request__success {
+  text-align: center;
+  padding: 40px 12px;
+}
+
+.rep-request__success h1 {
+  margin: 0 0 10px;
+  color: var(--color-navy);
+}
+
+.rep-request__success p {
+  margin: 0 0 24px;
+  color: #666;
+}
+
+.rep-request__success-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.rep-request__success-actions a,
+.rep-request__success-actions button {
+  color: var(--color-blue);
+  background: none;
+  border: 0;
+  font: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+@media (max-width: 1000px) {
+  .rep-request__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .rep-request__span-3 {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 640px) {
+  .rep-request__card {
+    padding: 18px;
+  }
+
+  .rep-request__grid,
+  .rep-request__span-3 {
+    grid-template-columns: 1fr;
+    grid-column: auto;
+  }
+}
diff --git a/src/pages/RepresentationRequestPage.tsx b/src/pages/RepresentationRequestPage.tsx
new file mode 100644
index 0000000..f046171
--- /dev/null
+++ b/src/pages/RepresentationRequestPage.tsx
@@ -0,0 +1,245 @@
+import { useMemo, useState, type FormEvent } from 'react'
+import { Link } from 'react-router-dom'
+import arrowLeft from '../assets/images/icons/arrow-left.svg'
+import SeoHead from '../components/SeoHead'
+import { IRAN_PROVINCES } from '../data/provinces'
+import { ApiError, submitRepresentationRequest } from '../lib/api'
+import { paths } from '../lib/paths'
+import '../components/PrimaryButton.css'
+import './RepresentationRequestPage.css'
+
+type FormState = {
+  firstName: string
+  lastName: string
+  nationalCode: string
+  mobile: string
+  province: string
+  city: string
+  landline: string
+  address: string
+  postalCode: string
+  description: string
+}
+
+const initialForm: FormState = {
+  firstName: '',
+  lastName: '',
+  nationalCode: '',
+  mobile: '',
+  province: '',
+  city: '',
+  landline: '',
+  address: '',
+  postalCode: '',
+  description: '',
+}
+
+export default function RepresentationRequestPage() {
+  const [form, setForm] = useState<FormState>(initialForm)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [done, setDone] = useState(false)
+
+  const cities = useMemo(
+    () => (form.province ? IRAN_PROVINCES[form.province] ?? [] : []),
+    [form.province],
+  )
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((prev) => ({ ...prev, [key]: value }))
+  }
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      if (!/^09\d{9}$/.test(form.mobile.trim())) {
+        throw new Error('شماره همراه معتبر نیست')
+      }
+      if (!form.firstName.trim() || !form.lastName.trim() || !form.city.trim()) {
+        throw new Error('نام، نام خانوادگی و شهر الزامی است')
+      }
+      await submitRepresentationRequest({
+        firstName: form.firstName.trim(),
+        lastName: form.lastName.trim(),
+        nationalCode: form.nationalCode.trim(),
+        mobile: form.mobile.trim(),
+        province: form.province.trim(),
+        city: form.city.trim(),
+        landline: form.landline.trim(),
+        address: form.address.trim(),
+        postalCode: form.postalCode.trim(),
+        description: form.description.trim(),
+      })
+      setDone(true)
+      setForm(initialForm)
+    } catch (err) {
+      setError(err instanceof ApiError || err instanceof Error ? err.message : 'ارسال ناموفق بود')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <section className="rep-request">
+      <SeoHead
+        title="درخواست نمایندگی مادو موتور – فرصت همکاری با پیشتازان موتورهای برقی"
+        description="مایل به همکاری با مادو موتور هستید؟ فرم درخواست نمایندگی را پر کنید و به جمع نمایندگان رسمی موتور های برقی مادو در سراسر ایران بپیوندید. شروع مسیری پر رونق در صنعت حمل‌ و نقل پاک."
+        path={paths.representationRequest}
+      />
+      <div className="container">
+        <div className="rep-request__card">
+          <div className="rep-request__notice">
+            لطفا اطلاعات زیر را با دقت پر نمایید. پس از بررسی اطلاعات ارسالی برای ما، همکاران ما با
+            شما تماس خواهند گرفت.
+          </div>
+
+          {done ? (
+            <div className="rep-request__success">
+              <h1>درخواست شما ثبت شد</h1>
+              <p>همکاران ما پس از بررسی با شما تماس می‌گیرند.</p>
+              <div className="rep-request__success-actions">
+                <Link to={paths.dealers}>مشاهده نمایندگی‌ها</Link>
+                <button type="button" onClick={() => setDone(false)}>
+                  ثبت درخواست جدید
+                </button>
+              </div>
+            </div>
+          ) : (
+            <form className="rep-request__form" onSubmit={(e) => void onSubmit(e)}>
+              <div className="rep-request__grid">
+                <label>
+                  <span>نام شما</span>
+                  <input
+                    value={form.firstName}
+                    onChange={(e) => update('firstName', e.target.value)}
+                    required
+                  />
+                </label>
+                <label>
+                  <span>نام خانوادگی شما</span>
+                  <input
+                    value={form.lastName}
+                    onChange={(e) => update('lastName', e.target.value)}
+                    required
+                  />
+                </label>
+                <label>
+                  <span>کد ملی</span>
+                  <input
+                    value={form.nationalCode}
+                    onChange={(e) => update('nationalCode', e.target.value)}
+                    dir="ltr"
+                  />
+                </label>
+                <label>
+                  <span>شماره همراه</span>
+                  <input
+                    value={form.mobile}
+                    onChange={(e) => update('mobile', e.target.value)}
+                    type="tel"
+                    dir="ltr"
+                    required
+                    placeholder="09xxxxxxxxx"
+                  />
+                </label>
+
+                <label>
+                  <span>استان محل نمایندگی</span>
+                  <select
+                    value={form.province}
+                    onChange={(e) => {
+                      update('province', e.target.value)
+                      update('city', '')
+                    }}
+                  >
+                    <option value="">انتخاب استان</option>
+                    {Object.keys(IRAN_PROVINCES).map((province) => (
+                      <option key={province} value={province}>
+                        {province}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label>
+                  <span>شهر محل نمایندگی</span>
+                  {cities.length > 0 ? (
+                    <select
+                      value={form.city}
+                      onChange={(e) => update('city', e.target.value)}
+                      required
+                    >
+                      <option value="">انتخاب شهر</option>
+                      {cities.map((city) => (
+                        <option key={city} value={city}>
+                          {city}
+                        </option>
+                      ))}
+                    </select>
+                  ) : (
+                    <input
+                      value={form.city}
+                      onChange={(e) => update('city', e.target.value)}
+                      required
+                      placeholder="نام شهر"
+                    />
+                  )}
+                </label>
+                <label>
+                  <span>تلفن ثابت</span>
+                  <input
+                    value={form.landline}
+                    onChange={(e) => update('landline', e.target.value)}
+                    dir="ltr"
+                  />
+                </label>
+
+                <label className="rep-request__span-3">
+                  <span>آدرس محل نمایندگی</span>
+                  <input
+                    value={form.address}
+                    onChange={(e) => update('address', e.target.value)}
+                  />
+                </label>
+                <label>
+                  <span>کد پستی</span>
+                  <input
+                    value={form.postalCode}
+                    onChange={(e) => update('postalCode', e.target.value)}
+                    dir="ltr"
+                  />
+                </label>
+
+                <label className="rep-request__full">
+                  <span>
+                    توضیحات - از جمله سابقه ی شما در این امر، اگر نمایندگی فعال دارید در حال حاضر و
+                    ...
+                  </span>
+                  <textarea
+                    value={form.description}
+                    onChange={(e) => update('description', e.target.value)}
+                    rows={8}
+                  />
+                </label>
+              </div>
+
+              {error ? <p className="rep-request__error">{error}</p> : null}
+
+              <div className="rep-request__actions">
+                <button className="primary-btn" type="submit" disabled={saving}>
+                  <span className="primary-btn__label">
+                    {saving ? 'در حال ارسال...' : 'ثبت درخواست'}
+                  </span>
+                  <span className="primary-btn__icon" aria-hidden="true">
+                    <img src={arrowLeft} alt="" width={18} height={18} />
+                  </span>
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/StaticPages.css b/src/pages/StaticPages.css
new file mode 100644
index 0000000..014957e
--- /dev/null
+++ b/src/pages/StaticPages.css
@@ -0,0 +1,87 @@
+.contact-list {
+  list-style: none;
+  margin: 0 0 32px;
+  padding: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.contact-list li {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px 24px;
+  padding: 14px 18px;
+  background: #f3f3f3;
+  border-radius: 8px;
+}
+
+.contact-list span {
+  color: #888;
+}
+
+.contact-map {
+  width: 100%;
+  height: 400px;
+  border: 0;
+  border-radius: 12px;
+}
+
+.about-intro {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 32px;
+  align-items: center;
+  margin-bottom: 36px;
+}
+
+.about-intro img {
+  width: 100%;
+  max-width: 420px;
+}
+
+.about-intro h2 {
+  margin: 0 0 16px;
+  font-weight: 300;
+}
+
+.about-intro p,
+.about-copy {
+  color: #666;
+  line-height: 2;
+  text-align: justify;
+}
+
+.about-copy {
+  margin: 0 0 40px;
+}
+
+.about-features {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 20px;
+  text-align: center;
+}
+
+.about-features img {
+  margin: 0 auto 10px;
+}
+
+.about-features p:last-child {
+  color: #888;
+  font-size: 14px;
+}
+
+@media (max-width: 900px) {
+  .about-intro,
+  .about-features {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .about-intro,
+  .about-features {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..6830b6f
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..8455dcb
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..1196622
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+const apiOrigin = 'http://api.madomotor.com:3001'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: true,
+    port: 5174,
+    strictPort: true,
+    allowedHosts: [
+      'localhost',
+      '127.0.0.1',
+      'madomotor.com',
+      'www.madomotor.com',
+      'madomotor.ir',
+      'www.madomotor.ir',
+    ],
+    proxy: {
+      '/sitemap.xml': {
+        target: apiOrigin,
+        changeOrigin: true,
+        rewrite: () => '/api/v1/sitemap.xml',
+      },
+    },
+  },
+  preview: {
+    proxy: {
+      '/sitemap.xml': {
+        target: apiOrigin,
+        changeOrigin: true,
+        rewrite: () => '/api/v1/sitemap.xml',
+      },
+    },
+  },
+})