diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..44da05a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# 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/settings.json
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..7cfa00f
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+dist/
+node_modules/
+public/
+*.min.js
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..bd686c7
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,13 @@
+{
+ "semi": true,
+ "trailingComma": "es5",
+ "singleQuote": true,
+ "printWidth": 100,
+ "tabWidth": 2,
+ "useTabs": false,
+ "bracketSpacing": true,
+ "arrowParens": "always",
+ "endOfLine": "lf",
+ "embeddedLanguageFormatting": "auto",
+ "htmlWhitespaceSensitivity": "css"
+}
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..2ff0d26
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+ "recommendations": ["esbenp.prettier-vscode"],
+ "unwantedRecommendations": []
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..1be65d1
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,19 @@
+{
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.formatOnSave": true,
+ "editor.formatOnPaste": true,
+ "editor.tabSize": 2,
+ "[html]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[css]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[javascript]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "files.associations": {
+ "*.xml": "html",
+ "*.svg": "html"
+ }
+}
diff --git a/README.md b/README.md
index 486564a..74077bc 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,32 @@
-# final-protfolio
+# Inova - Frontend
+فرانتاند قالب وردپرس پروژه Inova
+
+## درباره پروژه
+
+این ریپوزیتوری بخش فرانتاند قالب وردپرس پروژه اصلی است. اینجا تمام طراحیها، کامپوننتها و assetها با استفاده از Vite توسعه داده میشود.
+
+## نحوه راهاندازی پروژه
+
+### پیشنیازها
+
+- Node.js نسخه 18 یا بالاتر (نسخه 22 پیشنهاد میشه)
+- ادیتور Vs Code
+- نصب بودن اکستنشن prettier روی vs code
+- نصب بودن git روی سیستم عامل
+
+### نصب و اجرا
+
+```bash
+# کلون کردن پروژه
+git clone https://dev.novindiyar.com/Inova-Agency/inova-frontend.git
+
+# ورود به پوشه
+cd inova-frontend
+
+# نصب وابستگیها
+npm install
+
+# اجرای محیط توسعه
+npm run dev
+```
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6f6b375
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ Inova
+
+
+
+ سلام دنیا
+
+
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..bfe917c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,889 @@
+{
+ "name": "inova-frontend",
+ "version": "0.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "inova-frontend",
+ "version": "0.0.0",
+ "devDependencies": {
+ "prettier": "^3.8.3",
+ "vite": "^8.0.4"
+ }
+ },
+ "node_modules/@emnapi/core": {
+ "version": "1.9.2",
+ "resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-1.9.2.tgz",
+ "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "dependencies": {
+ "@emnapi/wasi-threads": "1.2.1",
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@emnapi/runtime": {
+ "version": "1.9.2",
+ "resolved": "https://registry.npmmirror.com/@emnapi/runtime/-/runtime-1.9.2.tgz",
+ "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "dependencies": {
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@emnapi/wasi-threads": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmmirror.com/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+ "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "dependencies": {
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@napi-rs/wasm-runtime": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmmirror.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+ "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "dependencies": {
+ "@tybys/wasm-util": "^0.10.1"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/Brooooooklyn"
+ },
+ "peerDependencies": {
+ "@emnapi/core": "^1.7.1",
+ "@emnapi/runtime": "^1.7.1"
+ }
+ },
+ "node_modules/@oxc-project/types": {
+ "version": "0.124.0",
+ "resolved": "https://registry.npmmirror.com/@oxc-project/types/-/types-0.124.0.tgz",
+ "integrity": "sha512-VBFWMTBvHxS11Z5Lvlr3IWgrwhMTXV+Md+EQF0Xf60+wAdsGFTBx7X7K/hP4pi8N7dcm1RvcHwDxZ16Qx8keUg==",
+ "dev": true,
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/Boshen"
+ }
+ },
+ "node_modules/@rolldown/binding-android-arm64": {
+ "version": "1.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.15.tgz",
+ "integrity": "sha512-YYe6aWruPZDtHNpwu7+qAHEMbQ/yRl6atqb/AhznLTnD3UY99Q1jE7ihLSahNWkF4EqRPVC4SiR4O0UkLK02tA==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.15.tgz",
+ "integrity": "sha512-oArR/ig8wNTPYsXL+Mzhs0oxhxfuHRfG7Ikw7jXsw8mYOtk71W0OkF2VEVh699pdmzjPQsTjlD1JIOoHkLP1Fg==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.15.tgz",
+ "integrity": "sha512-YzeVqOqjPYvUbJSWJ4EDL8ahbmsIXQpgL3JVipmN+MX0XnXMeWomLN3Fb+nwCmP/jfyqte5I3XRSm7OfQrbyxw==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.15.tgz",
+ "integrity": "sha512-9Erhx956jeQ0nNTyif1+QWAXDRD38ZNjr//bSHrt6wDwB+QkAfl2q6Mn1k6OBPerznjRmbM10lgRb1Pli4xZPw==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.15.tgz",
+ "integrity": "sha512-cVwk0w8QbZJGTnP/AHQBs5yNwmpgGYStL88t4UIaqcvYJWBfS0s3oqVLZPwsPU6M0zlW4GqjP0Zq5MnAGwFeGA==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.15.tgz",
+ "integrity": "sha512-eBZ/u8iAK9SoHGanqe/jrPnY0JvBN6iXbVOsbO38mbz+ZJsaobExAm1Iu+rxa4S1l2FjG0qEZn4Rc6X8n+9M+w==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.15.tgz",
+ "integrity": "sha512-ZvRYMGrAklV9PEkgt4LQM6MjQX2P58HPAuecwYObY2DhS2t35R0I810bKi0wmaYORt6m/2Sm+Z+nFgb0WhXNcQ==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.15.tgz",
+ "integrity": "sha512-VDpgGBzgfg5hLg+uBpCLoFG5kVvEyafmfxGUV0UHLcL5irxAK7PKNeC2MwClgk6ZAiNhmo9FLhRYgvMmedLtnQ==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.15.tgz",
+ "integrity": "sha512-y1uXY3qQWCzcPgRJATPSOUP4tCemh4uBdY7e3EZbVwCJTY3gLJWnQABgeUetvED+bt1FQ01OeZwvhLS2bpNrAQ==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.15.tgz",
+ "integrity": "sha512-023bTPBod7J3Y/4fzAN6QtpkSABR0rigtrwaP+qSEabUh5zf6ELr9Nc7GujaROuPY3uwdSIXWrvhn1KxOvurWA==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.15.tgz",
+ "integrity": "sha512-witB2O0/hU4CgfOOKUoeFgQ4GktPi1eEbAhaLAIpgD6+ZnhcPkUtPsoKKHRzmOoWPZue46IThdSgdo4XneOLYw==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.15.tgz",
+ "integrity": "sha512-UCL68NJ0Ud5zRipXZE9dF5PmirzJE4E4BCIOOssEnM7wLDsxjc6Qb0sGDxTNRTP53I6MZpygyCpY8Aa8sPfKPg==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "openharmony"
+ ],
+ "engines": {
+ "node": "^20.19.0 || >=22.12.0"
+ }
+ },
+ "node_modules/@rolldown/binding-wasm32-wasi": {
+ "version": "1.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.15.tgz",
+ "integrity": "sha512-ApLruZq/ig+nhaE7OJm4lDjayUnOHVUa77zGeqnqZ9pn0ovdVbbNPerVibLXDmWeUZXjIYIT8V3xkT58Rm9u5Q==",
+ "cpu": [
+ "wasm32"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "dependencies": {
+ "@emnapi/core": "1.9.2",
+ "@emnapi/runtime": "1.9.2",
+ "@napi-rs/wasm-runtime": "^1.1.3"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
+ "node_modules/@rolldown/binding-win32-arm64-msvc": {
+ "version": "1.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.15.tgz",
+ "integrity": "sha512-KmoUoU7HnN+Si5YWJigfTws1jz1bKBYDQKdbLspz0UaqjjFkddHsqorgiW1mxcAj88lYUE6NC/zJNwT+SloqtA==",
+ "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.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.15.tgz",
+ "integrity": "sha512-3P2A8L+x75qavWLe/Dll3EYBJLQmtkJN8rfh+U/eR3MqMgL/h98PhYI+JFfXuDPgPeCB7iZAKiqii5vqOvnA0g==",
+ "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.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.15.tgz",
+ "integrity": "sha512-UromN0peaE53IaBRe9W7CjrZgXl90fqGpK+mIZbA3qSTeYqg3pqpROBdIPvOG3F5ereDHNwoHBI2e50n1BDr1g==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/@tybys/wasm-util": {
+ "version": "0.10.1",
+ "resolved": "https://registry.npmmirror.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+ "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "dependencies": {
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/detect-libc": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmmirror.com/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.npmmirror.com/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.npmmirror.com/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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz",
+ "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+ "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.32.0",
+ "lightningcss-darwin-arm64": "1.32.0",
+ "lightningcss-darwin-x64": "1.32.0",
+ "lightningcss-freebsd-x64": "1.32.0",
+ "lightningcss-linux-arm-gnueabihf": "1.32.0",
+ "lightningcss-linux-arm64-gnu": "1.32.0",
+ "lightningcss-linux-arm64-musl": "1.32.0",
+ "lightningcss-linux-x64-gnu": "1.32.0",
+ "lightningcss-linux-x64-musl": "1.32.0",
+ "lightningcss-win32-arm64-msvc": "1.32.0",
+ "lightningcss-win32-x64-msvc": "1.32.0"
+ }
+ },
+ "node_modules/lightningcss-android-arm64": {
+ "version": "1.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+ "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+ "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+ "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+ "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+ "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+ "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+ "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+ "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+ "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+ "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+ "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.32.0",
+ "resolved": "https://registry.npmmirror.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+ "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+ "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.11",
+ "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
+ "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+ "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/picocolors": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+ "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+ "dev": true,
+ "license": "ISC"
+ },
+ "node_modules/picomatch": {
+ "version": "4.0.4",
+ "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.4.tgz",
+ "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/jonschlinkert"
+ }
+ },
+ "node_modules/postcss": {
+ "version": "8.5.10",
+ "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.10.tgz",
+ "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+ "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.11",
+ "picocolors": "^1.1.1",
+ "source-map-js": "^1.2.1"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ }
+ },
+ "node_modules/prettier": {
+ "version": "3.8.3",
+ "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.8.3.tgz",
+ "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
+ "dev": true,
+ "license": "MIT",
+ "bin": {
+ "prettier": "bin/prettier.cjs"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "funding": {
+ "url": "https://github.com/prettier/prettier?sponsor=1"
+ }
+ },
+ "node_modules/rolldown": {
+ "version": "1.0.0-rc.15",
+ "resolved": "https://registry.npmmirror.com/rolldown/-/rolldown-1.0.0-rc.15.tgz",
+ "integrity": "sha512-Ff31guA5zT6WjnGp0SXw76X6hzGRk/OQq2hE+1lcDe+lJdHSgnSX6nK3erbONHyCbpSj9a9E+uX/OvytZoWp2g==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@oxc-project/types": "=0.124.0",
+ "@rolldown/pluginutils": "1.0.0-rc.15"
+ },
+ "bin": {
+ "rolldown": "bin/cli.mjs"
+ },
+ "engines": {
+ "node": "^20.19.0 || >=22.12.0"
+ },
+ "optionalDependencies": {
+ "@rolldown/binding-android-arm64": "1.0.0-rc.15",
+ "@rolldown/binding-darwin-arm64": "1.0.0-rc.15",
+ "@rolldown/binding-darwin-x64": "1.0.0-rc.15",
+ "@rolldown/binding-freebsd-x64": "1.0.0-rc.15",
+ "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.15",
+ "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.15",
+ "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.15",
+ "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.15",
+ "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.15",
+ "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.15",
+ "@rolldown/binding-linux-x64-musl": "1.0.0-rc.15",
+ "@rolldown/binding-openharmony-arm64": "1.0.0-rc.15",
+ "@rolldown/binding-wasm32-wasi": "1.0.0-rc.15",
+ "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.15",
+ "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.15"
+ }
+ },
+ "node_modules/source-map-js": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmmirror.com/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.16",
+ "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.16.tgz",
+ "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+ "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/tslib": {
+ "version": "2.8.1",
+ "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+ "dev": true,
+ "license": "0BSD",
+ "optional": true
+ },
+ "node_modules/vite": {
+ "version": "8.0.8",
+ "resolved": "https://registry.npmmirror.com/vite/-/vite-8.0.8.tgz",
+ "integrity": "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "lightningcss": "^1.32.0",
+ "picomatch": "^4.0.4",
+ "postcss": "^8.5.8",
+ "rolldown": "1.0.0-rc.15",
+ "tinyglobby": "^0.2.15"
+ },
+ "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.1.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..44bcb07
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "inova-frontend",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "devDependencies": {
+ "prettier": "^3.8.3",
+ "vite": "^8.0.4"
+ }
+}
diff --git a/portfolio.html b/portfolio.html
new file mode 100644
index 0000000..b7d63f5
--- /dev/null
+++ b/portfolio.html
@@ -0,0 +1,1015 @@
+
+
+
+
+
+
+
+
+
+
+
+ Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
طراحی وبسایت | گیمیفیکیشن
+
+
+
طراحی وبسایت اینوا | ترکیب خلاقیت با نوآوری
+
+
+
+
+
+
+
+
+
+ اسکرول کنید
+
+
+
+
+
+
+
+
+ درباره پروژه
+
+
درباره پروژه
+
+
+
+
+ ما در وبسایت اینوا تلاش کردیم که کشف ناشناختهها را با خلاقیت و کیفیت گره بزنیم
+
+
+ نمونه پروژههای ما در طراحی UI/UX، طراحی وبسایت و توسعه محصولات دیجیتال که با تمرکز
+ بر تجربه کاربری و عملکرد ساخته شدهاند.
+
+
+ نمونه پروژههای ما در طراحی UI/UX، طراحی وبسایت و توسعه محصولات دیجیتال که با تمرکز
+ بر تجربه کاربری و عملکرد ساخته شدهاند.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
2300+
+
ثبت نام در هفته اول
+
+
+
+
80%
+
رضایت کامل کارفرما
+
+
+
+
2300+
+
ثبت نام در هفته اول
+
+
+
+
80%
+
رضایت کامل کارفرماfsdfsdfsdfsdfsdfsdfs
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/.gitkeep b/public/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/public/images/.gitkeep b/public/images/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/public/images/1.png b/public/images/1.png
new file mode 100644
index 0000000..6103de6
Binary files /dev/null and b/public/images/1.png differ
diff --git a/public/images/2.png b/public/images/2.png
new file mode 100644
index 0000000..28a0433
Binary files /dev/null and b/public/images/2.png differ
diff --git a/public/images/3.png b/public/images/3.png
new file mode 100644
index 0000000..c739eab
Binary files /dev/null and b/public/images/3.png differ
diff --git a/public/images/Component 28.svg b/public/images/Component 28.svg
new file mode 100644
index 0000000..fdc34b7
--- /dev/null
+++ b/public/images/Component 28.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/images/media.jpg b/public/images/media.jpg
new file mode 100644
index 0000000..6892503
Binary files /dev/null and b/public/images/media.jpg differ
diff --git a/public/images/petboom-logo-v4.svg fill.svg b/public/images/petboom-logo-v4.svg fill.svg
new file mode 100644
index 0000000..c4f2bfa
--- /dev/null
+++ b/public/images/petboom-logo-v4.svg fill.svg
@@ -0,0 +1,35 @@
+
diff --git a/public/images/petboom-mobile.png b/public/images/petboom-mobile.png
new file mode 100644
index 0000000..6325a66
Binary files /dev/null and b/public/images/petboom-mobile.png differ
diff --git a/public/images/petboom.png b/public/images/petboom.png
new file mode 100644
index 0000000..7e06a6d
Binary files /dev/null and b/public/images/petboom.png differ
diff --git a/public/images/videotest.mp4 b/public/images/videotest.mp4
new file mode 100644
index 0000000..d4f3e65
Binary files /dev/null and b/public/images/videotest.mp4 differ
diff --git a/src/assets/css/portfolio-gallery.css b/src/assets/css/portfolio-gallery.css
new file mode 100644
index 0000000..6650357
--- /dev/null
+++ b/src/assets/css/portfolio-gallery.css
@@ -0,0 +1,272 @@
+.gallery-section {
+ margin: 100px 0;
+}
+.gallery-section .tabs {
+ display: flex;
+ gap: 1rem;
+ margin-top: 16px;
+}
+.gallery-section .tabs button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 36px;
+ padding: 0 13px;
+ border-radius: 10px;
+ border: 1px solid #505068;
+ color: #505068;
+}
+.gallery-section .tabs button .txt {
+ font-size: 14px;
+ color: inherit;
+}
+.gallery-section .tabs button:hover {
+ border-color: #0274b3;
+ color: #0274b3;
+}
+.gallery-section .tabs button.current {
+ border-color: #0274b3;
+ background-color: #0274b3;
+ color: #fff;
+}
+.gallery-section .gallery-thumbnail {
+ margin: 24px 0 32px;
+}
+.gallery-section .gallery-thumbnail p {
+ display: none;
+}
+.gallery-section .gallery-thumbnail .thumbnail {
+ position: relative;
+ max-width: 720px;
+ margin: 0 auto;
+ border-radius: 16px;
+ overflow: hidden;
+ cursor: pointer;
+}
+.gallery-section .gallery-thumbnail .thumbnail::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background-image: linear-gradient(#00000000, #000000);
+ opacity: 0;
+ transition: opacity 200ms;
+}
+.gallery-section .gallery-thumbnail .thumbnail:hover::before {
+ opacity: 1;
+}
+.gallery-section .gallery-thumbnail .thumbnail img {
+ display: block;
+ width: 100%;
+ height: auto;
+ aspect-ratio: 16 / 9;
+ object-fit: cover;
+}
+.gallery-section .gallery-thumbnail .thumbnail .expand-icon {
+ position: absolute;
+ right: 50%;
+ bottom: 0;
+ transform: translateX(50%);
+
+ display: grid;
+ place-items: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 6px 6px 0 0;
+ background-color: #fff;
+}
+.gallery-section .gallery-thumbnail .thumbnail .expand-icon svg {
+ width: 32px;
+ height: 32px;
+ transition: scale 200ms;
+}
+.gallery-section .gallery-thumbnail .thumbnail .cta {
+ position: absolute;
+ bottom: 50%;
+ right: 50%;
+ transform: translate(50%, 50%);
+height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 4px 12px 4px 10px;
+ background-color: #eaf7ff;
+ border-radius: 8px;
+ opacity: 0;
+ transition: opacity 200ms;
+}
+.gallery-section .gallery-thumbnail .thumbnail .cta .txt {
+ font-size: 14px;
+ color: #0274b3;
+}
+.gallery-section .gallery-thumbnail .thumbnail .cta svg {
+ width: 20px;
+ height: 20px;
+ stroke: #0274b3;
+}
+.gallery-section .gallery-thumbnail .thumbnail:hover .expand-icon svg {
+ scale: 1.15;
+}
+.gallery-section .gallery-thumbnail .thumbnail:hover .cta {
+ opacity: 1;
+ height: 40px;
+ font-size: 15px;
+}
+.gallery-section .gallery-items {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 24px 16px;
+ list-style-type: none;
+}
+.gallery-section .gallery-items li {
+ position: relative;
+ border-radius: 10px;
+ overflow: hidden;
+ cursor: pointer;
+}
+.gallery-section .gallery-items li::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: linear-gradient(#00141f00, #00141f);
+ opacity: 0;
+ transition: opacity 200ms;
+}
+.gallery-section .gallery-items li img {
+ display: block;
+ width: 100%;
+ height: auto;
+ aspect-ratio: 4 / 3;
+ object-fit: cover;
+}
+.gallery-section .gallery-items li .title {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ padding: 0px 12px 16px;
+ display: flex;
+ opacity: 0;
+ transition: opacity 200ms;
+}
+.gallery-section .gallery-items li .title .txt {
+ font-size: 15px;
+ line-height: 1.7;
+ font-weight: bold;
+ color: #fff;
+}
+.gallery-section .gallery-items li .title svg {
+ width: 24px;
+ height: 24px;
+ stroke: #fff;
+ margin-right: auto;
+}
+.gallery-section .gallery-items li:hover .title {
+ opacity: 1;
+}
+.gallery-section .gallery-items li:hover::before {
+ opacity: 1;
+}
+.gallery-section .b-cta {
+ height: 40px;
+ background-color: var(--color-primary);
+ border-radius: 10px;
+ padding: 0 12px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+
+ width: fit-content;
+ margin: 32px auto 0;
+}
+.gallery-section .b-cta .txt {
+ font-size: 15px;
+ color: #ffffff;
+ font-weight: 400;
+}
+.gallery-section .b-cta svg {
+ width: 20px;
+ height: 20px;
+ stroke: #fff;
+}
+.pagination {
+ margin-top: 32px;
+}
+.pagination ul {
+ list-style-type: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ margin: initial;
+}
+.pagination ul a {
+ width: 32px;
+ height: 32px;
+ display: grid;
+ place-items: center;
+ border-radius: 8px;
+ font-size: 16px;
+ font-weight: normal;
+ border: none;
+ color: #000;
+ transform: none;
+ line-height: normal;
+ transition: none;
+ box-shadow: 2px 10px 20px 0 #595c6018;
+}
+.pagination ul a svg {
+ width: 16px;
+ height: 16px;
+ stroke: #505068;
+}
+.pagination ul li:hover a {
+ background-color: #e5efff;
+}
+.pagination ul li:hover a svg {
+ stroke: var(--color-primary);
+}
+.pagination ul .current a {
+ background-color: var(--color-primary);
+ color: #fff;
+}
+@media screen and (max-width: 768px) {
+ .gallery-section .gallery-items {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ .gallery-section .gallery-thumbnail .thumbnail {
+ margin: 0 -20px;
+ border-radius: 0;
+ }
+ .gallery-section .gallery-thumbnail p {
+ display: inline-block;
+ font-size: 15px;
+ font-weight: bold;
+ margin-top: 16px;
+ color: var(--color-title);
+ }
+ .gallery-section .gallery-items li:hover::before,
+ .gallery-section .gallery-items li .title svg {
+ display: none;
+ }
+ .gallery-section .gallery-items li .title {
+ position: static;
+ padding: initial;
+ opacity: 1 !important;
+ }
+ .gallery-section .gallery-items li .title .txt {
+ font-size: 15px;
+ font-weight: bold;
+ margin-top: 8px;
+ color: var(--color-title);
+ }
+ .gallery-section .gallery-items li {
+ overflow: visible;
+ }
+ .gallery-section .gallery-items li img {
+ border-radius: 10px;
+ }
+}
diff --git a/src/assets/css/portfolio-responsive.css b/src/assets/css/portfolio-responsive.css
new file mode 100644
index 0000000..cb31767
--- /dev/null
+++ b/src/assets/css/portfolio-responsive.css
@@ -0,0 +1,444 @@
+@media screen and (max-width: 1400px) {
+}
+@media screen and (max-width: 1200px) {
+}
+@media screen and (max-width: 992px) {
+ .about-section > .container {
+ flex-direction: column;
+ padding: 48px 20px 78px;
+ gap: 24px;
+ }
+ .about-section-title,
+ .about-section-p {
+ flex-basis: initial;
+ }
+ .about-section-uptitle,
+ .about-section-title svg {
+ display: none;
+ }
+ .vs,
+ .column-titlec,
+ .column-titler {
+ display: none;
+ }
+ .challenge-header {
+ text-align: right;
+ }
+ .challenge-header p {
+ font-size: 14px;
+ }
+ .mobile-toggle {
+ display: flex;
+ overflow: hidden;
+ }
+ .toggle-btn {
+ display: none;
+ }
+ .toggle-btn.is-active {
+ display: flex;
+ }
+ .scroll-pagination {
+ display: flex;
+ }
+ .table-wrapper {
+ overflow-x: auto;
+ scroll-snap-type: x mandatory;
+ scroll-behavior: smooth;
+ -webkit-overflow-scrolling: touch;
+ }
+ .column {
+ min-width: 100%;
+ scroll-snap-align: start;
+ }
+ .form-section-left {
+ flex: 0 1 100%;
+ margin-top: 24px;
+ }
+
+ .form-section-right {
+ flex: 0 1 100%;
+ }
+
+ .form-img p {
+ font-size: 36px;
+ }
+ .form-btn {
+ width: 100%;
+ }
+
+ .media {
+ width: auto;
+ }
+}
+@media screen and (max-width: 992px) and (orientation: landscape) {
+ .portfolio-logo-wrapper {
+ width: 660px !important;
+ max-width: 660px !important;
+ }
+}
+@media screen and (max-width: 768px) {
+ .about-section {
+ padding: initial;
+ }
+ .about-section > .container {
+ border-radius: initial;
+ }
+ .about-section-title {
+ font-size: 48px;
+ }
+ .about-section-p .bold {
+ font-size: 20px;
+ }
+ .related-boxes {
+ flex-wrap: wrap;
+ }
+ .related-button {
+ display: none;
+ }
+ .related-button-mobile {
+ display: flex;
+ gap: 8px;
+ height: 40px;
+ padding: 0px 12px 0px 10px;
+ background-color: var(--color-primary);
+ border-radius: 10px;
+ color: #ffffff;
+ align-items: center;
+ align-self: center;
+ margin-top: 24px;
+ }
+ .related-button-mobile span {
+ font-size: 15px;
+ font-weight: 400;
+ }
+ .showcase-section > .container-showcase {
+ height: calc(var(--slides-count) * 100dvh);
+ }
+ .showcase-sticky {
+ height: 100vh;
+ }
+ .showcase-inner {
+ position: relative;
+ width: 100%;
+ height: 100vh;
+ display: block;
+ }
+ .showcase-media-side,
+ .showcase-text-side {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ }
+ .showcase-media-wrapper {
+ width: 100%;
+ height: 100%;
+ max-width: unset;
+ border-radius: 0;
+ }
+ .media-item {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transform: translateY(80px);
+ transition:
+ opacity 0.9s ease,
+ transform 0.9s ease;
+ }
+ .media-item.active {
+ opacity: 1;
+ transform: translateY(0);
+ z-index: 2;
+ }
+ .mobile-pos-one img,
+ .mobile-pos-one video,
+ .mobile-pos-two img,
+ .mobile-pos-two video,
+ .mobile-pos-three img,
+ .mobile-pos-three video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ .media-item::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ }
+ .gradient-one::after,
+ .gradient-two::after,
+ .gradient-three::after {
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 20, 31, 0.9) 6.09%,
+ rgba(0, 20, 31, 0.8) 17.54%,
+ rgba(0, 20, 31, 0.7) 26.09%,
+ rgba(0, 20, 31, 0.6) 36.3%,
+ rgba(0, 20, 31, 0.5) 43.43%,
+ rgba(0, 63, 97, 0) 87.09%
+ );
+ }
+ .showcase-text-side {
+ z-index: 5;
+ overflow: hidden;
+ pointer-events: none;
+ }
+ .text-track {
+ position: absolute;
+ inset: 0;
+ }
+ .text-item {
+ position: absolute;
+ inset: 0;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+
+ padding: 0 24px calc(env(safe-area-inset-bottom) + 48px);
+
+ color: white;
+
+ opacity: 0;
+
+ visibility: hidden;
+ pointer-events: none;
+ z-index: 1;
+
+ transform: translateY(60px);
+
+ transition:
+ transform 0.6s ease,
+ opacity 0.6s ease,
+ visibility 0.6s ease;
+ }
+ .text-item.active {
+ opacity: 1;
+ visibility: visible;
+ z-index: 5;
+ transform: translateY(0);
+ }
+
+ .text-item span {
+ color: #aebcc5;
+ font-size: 18px;
+ margin-bottom: 8px;
+ }
+ .text-item h2 {
+ color: #ffffff;
+ font-size: 22px;
+ margin-bottom: 16px;
+ }
+ .text-item p {
+ color: #e9ecee;
+ font-size: 16px;
+ line-height: 1.8;
+ }
+ .container-showcase {
+ padding: 0;
+ margin: 0 auto;
+ }
+ .showcase-text-side::after {
+ display: none;
+ }
+ .hero-section {
+ padding-right: 19px;
+ padding-bottom: 122px;
+ margin-top: 78px;
+ }
+
+ .hero-section video,
+ .hero-section .bg-gif {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ .hero-content {
+ position: relative;
+ z-index: 2;
+ text-align: right;
+ display: flex;
+ flex-direction: column;
+ }
+ .hero-category {
+ position: relative;
+ display: inline-block;
+ }
+ .hero-category p {
+ font-size: 13px;
+ }
+ .hero-category::after {
+ content: '';
+ position: absolute;
+ width: 225px;
+ height: 1px;
+ background: #8898a3;
+ margin-top: 8px;
+ }
+ .hero-title {
+ font-size: 24px;
+ padding-left: 850px;
+ }
+ .hero-meta-inner {
+ font-size: 13px;
+ }
+ .hero-scroll-down span {
+ font-size: 12px;
+ margin-top: 8px;
+ }
+
+ .portfolio-floating-nav {
+ width: 390px;
+ max-width: calc(100vw - 16px);
+ bottom: -140px;
+ }
+
+ .portfolio-floating-nav.show {
+ bottom: 16px;
+ }
+
+ .portfolio-nav-inner {
+ width: 100%;
+ padding: 8px 10px;
+ gap: 8px;
+ border-radius: 24px;
+ }
+ .portfolio-nav-action {
+ display: none;
+ }
+
+ .portfolio-nav-scroll-wrapper,
+ .portfolio-nav-scroll {
+ flex: 1;
+ min-width: 0;
+ }
+
+ .portfolio-nav-scroll {
+ width: 100%;
+ overflow-x: auto;
+ }
+
+ .portfolio-nav-links {
+ gap: 6px;
+ padding: 8px;
+ }
+
+ .portfolio-nav-btn {
+ font-size: 12px;
+ padding: 7px 10px;
+ white-space: nowrap;
+ }
+
+ .portfolio-nav-meeting {
+ min-width: auto;
+ flex-shrink: 0;
+ font-size: 12px;
+ padding: 7px 10px;
+ white-space: nowrap;
+ }
+ .portfolio-scroll-track {
+ transform: translateX(-50%);
+ bottom: 6px;
+ right: 187px;
+ width: 56px;
+ height: 4px;
+ border-radius: 999px;
+ background: #d9d9d9;
+ overflow: hidden;
+ }
+
+ .portfolio-scroll-thumb {
+ width: 28px;
+ right: 0;
+ }
+
+ .next-popup,
+ .prev-popup {
+ display: none;
+ }
+ .down-txt {
+ display: block;
+ }
+ .img-popup-img {
+ width: 390px;
+ height: 292px;
+ border-radius: 0;
+ }
+}
+
+@media screen and (max-width: 576px) {
+ .about-section-circleup {
+ top: -192px;
+ right: -210px;
+ }
+ .about-section-circledown {
+ bottom: -240px;
+ left: -220px;
+ }
+ .process-section > .container {
+ padding: 0;
+ }
+ .process-title {
+ padding: 0 20px;
+ }
+ .step {
+ padding: 24px 67px 24px 20px;
+ }
+ .step-title {
+ font-size: 16px;
+ line-height: 1.5;
+ }
+ .step.active .step-title {
+ font-size: 18px;
+ padding-left: 10px;
+ }
+ .toggle-icon {
+ width: 24px;
+ height: 24px;
+ }
+ .step-number-bg {
+ right: 15px;
+ top: 6px;
+ font-size: 40px;
+ font-weight: normal;
+ letter-spacing: -5px;
+ transform: initial;
+ }
+ .step-list li,
+ .step-intro {
+ font-size: 15px;
+ line-height: 1.7;
+ color: var(--color-body-text);
+ }
+ .star-form {
+ top: 35px;
+ left: 20px;
+ width: 56px;
+ height: 56px;
+ }
+ .form-section-text h2 {
+ margin-bottom: 16px;
+ font-size: 18px;
+ }
+ .form-section-text p,
+ .result-section-header p,
+ .process-title p,
+ .related-titlep {
+ font-size: 14px;
+ }
+ .form-input,
+ .form-text {
+ flex-basis: 100%;
+ }
+ .side-buttons {
+ display: none;
+ }
+ .container-hero {
+ max-width: 1240px;
+ padding: 0;
+ margin: 0 auto;
+ }
+}
diff --git a/src/assets/css/portfolio.css b/src/assets/css/portfolio.css
new file mode 100644
index 0000000..3a8df1b
--- /dev/null
+++ b/src/assets/css/portfolio.css
@@ -0,0 +1,1807 @@
+section > .container {
+ /* اینجا کنتیر عمومی تعریف شده برای سکشن ها */
+
+ /* چهل پیکسل اضافه برای پدینگ راست و چپ */
+ max-width: 1240px;
+ padding: 0 20px;
+ margin: 0 auto;
+}
+.about-section {
+ padding: 0 20px;
+}
+section[class*='-section'] {
+ margin-bottom: 100px;
+}
+.container-hero{
+ max-width: 1240px;
+ padding: 0 20px;
+ margin: 0 auto;
+}
+.hero-section {
+ position: relative;
+ width: 100%;
+ height: 100vh;
+ overflow: hidden;
+ display: flex;
+ align-items: end;
+ justify-content: flex-start;
+ /* color: #fff; */
+ /* padding-right: 120px; */
+ padding-bottom: 88px;
+ margin-top: 80px;
+}
+.hero-section video,
+.hero-section .bg-gif {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.hero-section::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ background:
+ linear-gradient(
+ 0deg,
+ rgba(0, 20, 31, 0.9) -11.31%,
+ rgba(0, 20, 31, 0.8) -3.78%,
+ rgba(0, 20, 31, 0.7) 1.84%,
+ rgba(0, 20, 31, 0.578084) 8.55%,
+ rgba(0, 20, 31, 0.493025) 13.23%,
+ rgba(0, 63, 97, 0) 41.93%
+ ),
+ linear-gradient(106.84deg, rgba(0, 63, 97, 0) 0%, rgba(0, 20, 31, 0.6) 94.22%),
+ linear-gradient(0deg, rgba(0, 20, 31, 0.15), rgba(0, 20, 31, 0.15));
+}
+.hero-content {
+ position: relative;
+ z-index: 2;
+ text-align: right;
+ display: flex;
+ flex-direction: column;
+ min-width: 1200px;
+}
+
+.hero-category {
+ position: relative;
+ display: inline-block;
+}
+.hero-category p {
+ color: #eaeef0;
+ font-size: 14px;
+ line-height: 1.8;
+}
+.hero-category::after {
+ content: '';
+ position: absolute;
+ width: 225px;
+ height: 1px;
+ background: #8898a3;
+ margin-top: 8px;
+}
+.hero-title {
+ font-size: 36px;
+ line-height: 1.5;
+ font-weight: bold;
+ margin-bottom: 16px;
+ margin-top: 8px;
+ color: #eaeef0;
+ padding-left: 600px;
+}
+.hero-meta {
+ display: flex;
+ gap: 12px;
+}
+.hero-meta-inner {
+ display: flex;
+ gap: 8px;
+ font-size: 14px;
+ color: var(--color-pastel-main);
+}
+.hero-scroll-down {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ bottom: 30px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 2;
+ text-align: center;
+ font-size: 14px;
+ opacity: 0.8;
+}
+.hero-scroll-down span {
+ font-size: 12px;
+ margin-top: 8px;
+ color: #ffffff;
+}
+.hero-scroll-down svg {
+ color: #777;
+ transition: fill 0.3s ease;
+}
+.icon-main * {
+ animation: mainStep 3s infinite;
+}
+.arrow-1 * {
+ animation: firstStep 3s infinite;
+}
+.arrow-2 * {
+ animation: secondStep 3s infinite;
+}
+@keyframes mainStep {
+ 0% {
+ color: #777;
+ filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
+ }
+
+ 10%,
+ 85% {
+ color: #fff;
+ filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
+ }
+
+ 100% {
+ color: #777;
+ filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
+ }
+}
+@keyframes firstStep {
+ 0%,
+ 40% {
+ color: #fff;
+ }
+ 50%,
+ 100% {
+ color: #777;
+ }
+}
+@keyframes secondStep {
+ 0%,
+ 40% {
+ color: #777;
+ }
+ 50%,
+ 90% {
+ color: #fff;
+ }
+ 100% {
+ color: #777;
+ }
+}
+
+.portfolio-floating-nav {
+ position: fixed;
+ left: 50%;
+ bottom: -140px;
+ transform: translateX(-50%);
+ width: 668px;
+ z-index: 999;
+ transition: bottom 0.45s ease;
+}
+.portfolio-floating-nav.show {
+ bottom: 24px;
+}
+.portfolio-nav-inner {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ background: #ffffff;
+ border: 1px solid #acacac;
+ border-radius: 32px;
+ padding: 8px 16px;
+ overflow: hidden;
+}
+.portfolio-nav-scroll::-webkit-scrollbar {
+ display: none;
+}
+.portfolio-nav-links {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: max-content;
+ padding: 8px;
+ background-color: #f0f4f8;
+ border-radius: 10px;
+ width: max-content;
+
+}
+.portfolio-nav-scroll-wrapper {
+ position: relative;
+ flex: 1;
+ min-width: 0;
+}
+.portfolio-nav-scroll {
+ overflow-x: auto;
+ overflow-y: hidden;
+ scrollbar-width: none;
+ direction: rtl;
+ flex: 1;
+ min-width: 0;
+ max-width: 100%;
+ cursor: grab;
+}
+.portfolio-nav-scroll::-webkit-scrollbar {
+ display: none;
+}
+.portfolio-nav-links {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: max-content;
+}
+.portfolio-scroll-track {
+ /* position: absolute; */
+ position: fixed;
+ bottom: 10px;
+ width: 56px;
+ height: 4px;
+ right: 460px;
+ border-radius: 999px;
+ background: #d9d9d9;
+ overflow: hidden;
+}
+.portfolio-scroll-thumb {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 28px;
+ height: 100%;
+ border-radius: 999px;
+ background: var(--color-primary);
+ transition: right 0.08s linear;
+}
+.portfolio-nav-btn {
+ border-radius: 10px;
+ border: 1px solid var(--color-body-text);
+ padding: 8px 12px;
+ flex-shrink: 0;
+ font-size: 13px;
+ font-weight: normal;
+ color: var(--color-body-text);
+ position: relative;
+ z-index: 2;
+}
+.portfolio-nav-btn:hover,
+.portfolio-nav-btn.active {
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+}
+.portfolio-nav-project-btn {
+ border-radius: 10px;
+ background-color: var(--color-primary);
+ padding: 8px 12px;
+ flex-shrink: 0;
+ font-size: 13px;
+ font-weight: normal;
+ color: #ffffff;
+ display: flex;
+ text-align: center;
+ align-items: center;
+ gap: 4px;
+ min-width: 135px;
+}
+.portfolio-nav-project-btn svg {
+ align-items: center;
+}
+.portfolio-nav-project-btn:hover {
+ background: var(--color-primary);
+}
+.portfolio-nav-link-btn {
+ background: var(--color-primary);
+ color: white;
+}
+.portfolio-nav-link-btn:hover {
+ background-color: var(--color-primary);
+}
+.portfolio-nav-meeting {
+ background: #c5d7ec;
+ color: var(--color-primary);
+ font-size: 13px;
+ font-weight: normal;
+ padding: 8px 12px;
+ border-radius: 10px;
+ min-width: 111px;
+}
+.portfolio-nav-meeting:hover {
+ background: #c8ddf1;
+}
+
+.portfolio-preview-modal {
+ position: fixed;
+ inset: 0;
+ z-index: 2000;
+ opacity: 0;
+ visibility: hidden;
+ transition: 0.35s ease;
+}
+.portfolio-preview-modal.show {
+ opacity: 1;
+ visibility: visible;
+}
+.portfolio-preview-backdrop {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.72);
+ backdrop-filter: blur(5px);
+}
+.portfolio-preview-content {
+ position: relative;
+ width: min(1000px, calc(100% - 32px));
+ max-height: calc(100vh - 40px);
+ overflow: auto;
+ background: white;
+ border-radius: 24px;
+ padding: 20px;
+ margin: 20px auto;
+ z-index: 2;
+}
+.portfolio-preview-content img {
+ width: 100%;
+ display: block;
+ border-radius: 18px;
+}
+.portfolio-preview-close {
+ position: sticky;
+ top: 0;
+ margin-right: auto;
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ border: none;
+ background: #0f87ca;
+ color: white;
+ font-size: 22px;
+ cursor: pointer;
+ margin-bottom: 16px;
+}
+.portfolio-popup {
+ position: fixed;
+ inset: 0;
+ width: 100%;
+ height: 100vh;
+ background: #04263b;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 999;
+ opacity: 0;
+ visibility: hidden;
+ transition: 0.35s ease;
+}
+.portfolio-popup.active {
+ opacity: 1;
+ visibility: visible;
+}
+.portfolio-logo-wrapper {
+ position: relative;
+ top: 69px;
+ /* width: 794px; */
+ height: 892px;
+ overflow: hidden;
+ transition:
+ width 0.5s ease,
+ height 0.5s ease;
+}
+.portfolio-wrapper {
+ display: flex;
+ gap: 0;
+ position: relative;
+}
+.portfolio-modal {
+ width: 704px;
+ height: 684px;
+ background: #ffffff;
+ border-radius: 7px;
+ overflow: hidden;
+ padding: 6px 7px;
+ transition:
+ width 0.5s ease,
+ height 0.5s ease,
+ border-radius 0.5s ease,
+ transform 0.5s ease;
+}
+.portfolio-popup.active .portfolio-modal {
+ transform: translateY(0) scale(1);
+}
+.portfolio-logo-wrapper.mobile-view {
+ width: 350px;
+ height: 820px;
+}
+.portfolio-logo-wrapper.mobile-view .logo-popup {
+ left: -50%;
+}
+.portfolio-logo-wrapper.mobile-view .portfolio-modal {
+ width: 360px;
+ height: 740px;
+}
+.portfolio-logo-wrapper.mobile-view .desktop-image {
+ opacity: 0;
+ visibility: hidden;
+}
+
+.portfolio-logo-wrapper.mobile-view .mobile-image {
+ opacity: 1;
+ visibility: visible;
+}
+.close-popup {
+ position: absolute;
+ top: 24px;
+ right: 20px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ z-index: 99999;
+ pointer-events: auto;
+}
+.close-popup svg {
+ transition: transform 0.3s ease;
+}
+.close-popup:hover svg {
+ transform: rotate(90deg);
+}
+.next-popup {
+ position: absolute;
+ top: 50%;
+ right: 24px;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+.prev-popup {
+ position: absolute;
+ top: 50%;
+ left: 24px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ transform: rotate(180deg);
+}
+.portfolio-scroll {
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ border-radius: 7px;
+ scroll-behavior: smooth;
+ overscroll-behavior: contain;
+ scrollbar-width: none;
+ border: 1px solid var(--color-primary);
+ position: relative;
+}
+.portfolio-scroll::-webkit-scrollbar {
+ display: none;
+}
+.portfolio-scroll img {
+ width: 100%;
+}
+.portfolio-scroll::-webkit-scrollbar {
+ display: none;
+}
+.custom-scroll {
+ width: 39px;
+ height: 112px;
+ background: #ffffff;
+ border-radius: 0 7px 7px 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ z-index: 10;
+ top: 125px;
+}
+.custom-scroll::before {
+ content: '';
+ position: absolute;
+ top: -40px;
+ left: 0;
+ width: 35px;
+ height: 40px;
+ background: transparent;
+ border-bottom-left-radius: 7px;
+ box-shadow: -6px 6px 0 #ffffff;
+}
+
+.custom-scroll::after {
+ content: '';
+ position: absolute;
+ bottom: -40px;
+ left: 0;
+ width: 35px;
+ height: 40px;
+ background: transparent;
+ border-top-left-radius: 7px;
+ box-shadow: -6px -6px 0 #ffffff;
+}
+.logo-popup::before {
+ content: '';
+ position: absolute;
+ right: -30px;
+ left: 0;
+ bottom: 0;
+ width: 30px;
+ height: 30px;
+ background: transparent;
+ border-bottom-left-radius: 7px;
+ box-shadow: -6px 6px 0 #ffffff;
+}
+
+.portfolio-modal-switch {
+ width: 90px;
+ padding: 14px 10px;
+ border-radius: 60px;
+ background: rgba(255, 255, 255, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ backdrop-filter: blur(10px);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 18px;
+
+ position: relative;
+}
+.switch-btn {
+ width: 58px;
+ height: 58px;
+ border: none;
+ border-radius: 50%;
+ background: transparent;
+ cursor: pointer;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ transition: all 0.35s ease;
+ position: relative;
+ z-index: 2;
+}
+.switch-btn::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #2563eb, #06b6d4);
+ opacity: 0;
+ transform: scale(0.7);
+ transition: all 0.35s ease;
+ z-index: -1;
+}
+
+.switch-btn.active::before {
+ opacity: 1;
+ transform: scale(1);
+}
+
+.switch-btn:hover {
+ transform: scale(1.08);
+}
+.icon,
+.arrow {
+ fill: white;
+}
+
+.portfolio-modal-switch::before {
+ content: '';
+ position: absolute;
+ width: 58px;
+ height: 58px;
+ border-radius: 50%;
+ background: white;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 14px;
+ transition: top 0.45s cubic-bezier(0.76, 0, 0.24, 1);
+ z-index: 1;
+}
+
+.portfolio-modal-switch.mobile-active::before {
+ top: 108px;
+}
+.rotate-overlay {
+ display: none;
+}
+
+.rotate-overlay.show {
+ display: flex;
+}
+
+.portfolio-logo-wrapper.mobile-view {
+ display: block;
+}
+
+.portfolio-logo-wrapper.rotated-desktop {
+ transform: rotate(90deg);
+ transform-origin: center;
+}
+
+.logo-popup::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: -30px;
+ width: 30px;
+ height: 30px;
+ background: transparent;
+ border-bottom-right-radius: 7px;
+ box-shadow: 6px 6px 0 #ffffff;
+}
+.scroll-track {
+ width: 5px;
+ height: 93px;
+ background: #dfdfdf;
+ border-radius: 26.6px;
+ position: relative;
+}
+.scroll-thumb {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ user-select: none;
+ touch-action: none;
+ border-radius: 50%;
+ background: var(--color-primary);
+ width: 16.62px;
+ height: 16.62px;
+ border: 5px solid #d9ecff;
+ cursor: pointer;
+ box-shadow: 0 4px 12px var(--color-pastel-main);
+}
+body.dragging-scroll {
+ user-select: none;
+}
+.side-buttons-wrapper {
+ display: flex;
+ align-items: flex-start;
+ gap: 48px;
+ position: relative;
+ top: 69px;
+ transition: transform 0.3s ease;
+}
+.side-buttons {
+ position: relative;
+ top: 168px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+.logo-popup {
+ width: 151px;
+ height: 37px;
+ background: #fff;
+ border-radius: 7px 7px 0 0;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ left: -70%;
+ top: 0;
+ align-items: center;
+}
+.logo-popup-img img {
+ border-radius: 7px;
+ width: 109px;
+ height: 32px;
+}
+/* پیشفرض دسکتاپ */
+.desktop-image {
+ display: block;
+}
+
+.mobile-image {
+ display: none;
+}
+
+.portfolio-logo-wrapper.mobile-view .desktop-image {
+ display: none;
+}
+
+.portfolio-logo-wrapper.mobile-view .mobile-image {
+ display: block;
+}
+.desktop-image {
+ opacity: 1;
+ visibility: visible;
+ z-index: 2;
+}
+.mobile-image {
+ opacity: 0;
+ visibility: hidden;
+ z-index: 1;
+}
+.desktop-image,
+.mobile-image {
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+ transition: opacity 0.4s ease;
+ backface-visibility: hidden;
+}
+.portfolio-logo-wrapper.mobile-view .desktop-image {
+ opacity: 0;
+ visibility: hidden;
+}
+.portfolio-logo-wrapper.mobile-view .mobile-image {
+ opacity: 1;
+ visibility: visible;
+}
+.rotate-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(4, 38, 59, 0.92);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 9990;
+ opacity: 0;
+ visibility: hidden;
+ transition: 0.35s ease;
+}
+.rotate-overlay.show {
+ opacity: 1;
+ visibility: visible;
+}
+.rotate-message {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ color: #fff;
+ font-size: 22px;
+ font-weight: 600;
+}
+.portfolio-rotate-container {
+ width: 100%;
+ height: 100%;
+ transition: transform 0.6s ease;
+}
+.portfolio-popup.is-rotated2 .next-popup,
+.portfolio-popup.is-rotated2 .prev-popup {
+ display: none;
+}
+
+.side-buttons-wrapper.is-rotated {
+ top: 220px;
+}
+
+.portfolio-logo-wrapper.rotated-desktop .portfolio-scroll {
+ overflow-x: auto;
+ overflow-y: auto;
+}
+.next-popup.disabled,
+.prev-popup.disabled {
+ opacity: 0.3;
+ pointer-events: none;
+}
+.img-popup-link {
+ text-decoration: none;
+ color: #ffffff;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+.img-popup-link span {
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 1.6;
+}
+.img-popup-link svg {
+ width: 20px;
+ height: 20px;
+}
+.img-popup-img {
+ width: 720px;
+ height: 540px;
+ border-radius: 8px;
+}
+.video-popup-player {
+ width: 100%;
+ max-width: 100%;
+ max-height: 80vh;
+ object-fit: contain;
+}
+
+.img-popup-img {
+ width: 100%;
+ max-width: 100%;
+ max-height: 80vh;
+ object-fit: contain;
+}
+
+.about-section > .container {
+ position: relative;
+ justify-content: space-between;
+ display: flex;
+ max-width: 1200px;
+ border-radius: 10px;
+ background-color: #0b7fbf;
+ padding: 80px 48px 96px;
+ overflow: hidden;
+}
+.about-section-title {
+ flex-basis: 47%;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+}
+.about-section h2 {
+ color: #54a5d2;
+ font-size: 56px;
+ line-height: 1.2;
+}
+.about-section-uptitle {
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 1.5;
+ margin-bottom: 12px;
+ color: #fff;
+}
+.about-section-title svg {
+ width: 100%;
+}
+.about-section-p {
+ flex-basis: 47%;
+ display: flex;
+ flex-direction: column;
+ z-index: 1;
+ margin-top: 24px;
+}
+.about-section-p p {
+ font-size: 16px;
+ font-weight: normal;
+ /* 28 % 16 = 1.75 */
+ line-height: 1.75;
+ color: #e6f2f8;
+}
+.about-section-p .bold {
+ font-size: 22px;
+ font-weight: bold;
+ /* 34 % 22 ~= 1.5 */
+ line-height: 1.5;
+ margin-bottom: 16px;
+}
+.about-section-circleup {
+ position: absolute;
+ display: block;
+ width: 356px;
+ height: 356px;
+ border-radius: 50%;
+ top: -142px;
+ right: -142px;
+ background-color: #1e8ecb;
+ z-index: 0;
+}
+.about-section-circledown {
+ width: 356px;
+ height: 356px;
+ background-color: #1e8ecb;
+ border-radius: 50%;
+ display: block;
+ position: absolute;
+ z-index: 0;
+ bottom: -184px;
+ left: -94px;
+}
+
+.challenge-section {
+ padding: 0px 20px;
+}
+.challenge-section > .container {
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+}
+.challenge-header {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 24px;
+}
+.challenge-header h2 {
+ margin-bottom: 8px;
+}
+
+.table-wrapper {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ overflow-x: hidden;
+ scroll-snap-type: x mandatory;
+ scroll-behavior: smooth;
+ max-width: 1200px;
+}
+
+.column {
+ flex-basis: 50%;
+ scroll-snap-align: start;
+}
+.scroll-pagination {
+ display: none;
+ justify-content: center;
+ margin-top: 16px;
+}
+.scroll-dots {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+.scroll-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: #d1d5db;
+ transition:
+ width 0.3s ease,
+ background 0.3s ease,
+ transform 0.3s ease;
+ cursor: pointer;
+}
+.scroll-dot.active {
+ width: 24px;
+ border-radius: 8px;
+ background-color: var(--color-primary);
+}
+
+.column-titlec {
+ margin-bottom: 16px;
+ color: var(--color-body-text);
+ padding: 17px;
+ text-align: center;
+}
+.column-titler {
+ margin-bottom: 16px;
+ color: var(--blue-600);
+ padding: 17px;
+ text-align: center;
+}
+.items {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+.itemc,
+.itemr {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ padding: 12px 16px 12px 24px;
+ border-radius: 8px;
+ max-height: 76px;
+ overflow: hidden;
+}
+.itemc {
+ background-color: #f0f5fe;
+ background-image: url(/src/img/dot-pattrn.svg);
+ background-repeat: no-repeat;
+ background-position: bottom;
+ background-size: auto;
+}
+.itemr {
+ background-color: #e5efff;
+ position: relative;
+}
+.itemr::after {
+ content: '';
+ position: absolute;
+ top: 20%;
+ right: 0;
+ width: 2px;
+ height: 60%;
+ border-radius: 16px;
+ background: var(--color-primary);
+}
+.item-textc {
+ color: var(--color-body-text);
+}
+.item-textr {
+ color: var(--blue-600);
+}
+.item-textc,
+.item-textr {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+.item-icon {
+ align-items: flex-start;
+}
+.vs {
+ position: absolute;
+ top: 7%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 64px;
+ height: 64px;
+ background-color: var(--color-pastel-main);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.vs span {
+ font-size: 25.6px;
+ line-height: 38.4px;
+ font-weight: bold;
+ color: #0274b3;
+}
+.mobile-toggle {
+ display: none;
+}
+.toggle-btn {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+ background-color: #e8f0ff;
+ padding: 10px 12px;
+ border-radius: 10px;
+ min-width: 100%;
+}
+.toggle-btn p {
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 1.7;
+ color: var(--color-body-text);
+}
+.arr-icon {
+ display: flex;
+ align-self: center;
+}
+
+.process-section,
+.result-section,
+.form-section {
+ margin-top: 100px;
+}
+.process-title {
+ margin-bottom: 24px;
+}
+.process-title p {
+ margin-top: 8px;
+}
+.step {
+ border-top: 1px solid var(--color-pastel-main);
+ border-bottom: 1px solid var(--color-pastel-main);
+ padding: 24px 290px 24px 12px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+.step-number-bg {
+ position: absolute;
+ right: 15px;
+ left: auto;
+ top: -51px;
+ font-size: 235px;
+ font-weight: bold;
+ letter-spacing: -30px;
+ color: #a4cde3;
+ transform: translateY(-10px);
+ transition: transform 0.3s ease;
+ z-index: 0;
+}
+.step.active .step-number-bg {
+ transform: translateY(0);
+}
+.step-header {
+ display: flex;
+ justify-content: flex-start;
+ width: 100%;
+ background: none;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+ text-align: right;
+}
+.step-title {
+ font-size: 22px;
+ font-weight: 700;
+ line-height: 34px;
+ color: var(--color-title);
+ flex-grow: 1;
+}
+.step.active .step-title {
+ color: var(--color-primary);
+}
+.step-list {
+ list-style: none;
+ margin-top: 8px;
+}
+.step-list li {
+ position: relative;
+ padding-right: 20px;
+}
+.step-list li::before {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 12px;
+ transform: translateY(-50%);
+ width: 6px;
+ height: 6px;
+ background-color: var(--color-primary);
+ border-radius: 50%;
+}
+.step-list li,
+.step-intro {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.8;
+ color: var(--color-body-text);
+}
+.step-body {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.4s ease;
+ margin-top: 0;
+ max-width: 812px;
+}
+.step.active .step-body {
+ max-height: 380px;
+ margin-top: 16px;
+}
+.toggle-icon {
+ font-size: 28px;
+ color: var(--color-primary);
+ background-color: var(--color-pastel-main);
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+.step.active .toggle-icon {
+ transform: none;
+}
+.step:not(.active) .toggle-icon::before {
+ content: '+';
+}
+.step.active .toggle-icon::before {
+ content: '-';
+}
+
+.result-section > .container {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+.result-section-header h2 {
+ margin-bottom: 8px;
+}
+.result-section-box {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ gap: 16px;
+ align-items: stretch;
+}
+.result-card {
+ background-color: #f0f4fd;
+ background-image: url(/src/img/dot-pattrn.svg);
+ background-repeat: no-repeat;
+ background-position: bottom;
+ background-size: auto;
+ border-radius: 16px;
+ padding: 20px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 100%;
+}
+.result-card__number {
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 40px;
+ color: var(--color-primary);
+ margin-bottom: 8px;
+}
+.result-card__text {
+ font-size: 15px;
+ line-height: 26px;
+ color: var(--color-body-text);
+}
+
+.form-section > .container {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ position: relative;
+}
+.star-form {
+ position: absolute;
+ top: 0;
+ left: 20px;
+ z-index: -1;
+ width: 100px;
+ height: 100px;
+}
+.form-section-left {
+ flex: 0 1 50%;
+ margin-top: 87px;
+}
+form {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+}
+.form-input label,
+.required-label {
+ font-size: 14px;
+ margin-bottom: 8px;
+ display: block;
+ color: #1a1a2e;
+}
+.required-label::after {
+ content: '*';
+ color: #ff0000;
+ margin-left: 4px;
+}
+input,
+.select-box,
+textarea {
+ width: 100%;
+ border: 1px solid #dbdbdb;
+ border-radius: 8px;
+ padding: 0px 12px;
+ height: 38px;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.8;
+ color: var(--color-title);
+ background-color: #f9f9f9;
+}
+textarea {
+ min-height: 114px;
+ resize: vertical;
+}
+.form-input {
+ flex-basis: 48%;
+ position: relative;
+}
+.label {
+ display: block;
+ margin-bottom: 10px;
+ font-size: 18px;
+ font-weight: 500;
+ color: #222;
+}
+.custom-select {
+ position: relative;
+ width: 100%;
+ user-select: none;
+}
+.select-box {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ transition: 0.25s;
+}
+.selected-text {
+ font-size: 14px;
+ color: #222;
+ font-weight: 500;
+}
+.arrow {
+ display: flex;
+ transition: 0.25s;
+}
+.custom-select.active .arrow {
+ transform: rotate(180deg);
+}
+.options {
+ position: absolute;
+ right: 0;
+ width: 100%;
+ border-radius: 8px;
+ overflow: hidden;
+ list-style: none;
+ border: 1px solid #dbdbdb;
+ opacity: 0;
+ visibility: hidden;
+ z-index: 100;
+}
+.custom-select.active .options {
+ opacity: 1;
+ visibility: visible;
+}
+.option {
+ padding: 0px 12px;
+ height: 38px;
+ font-size: 17px;
+ transition: 0.2s;
+ background-color: #f9f9f9;
+ display: flex;
+ align-items: center;
+}
+.option.active {
+ background: var(--color-primary);
+ color: #fff;
+}
+.form-text {
+ flex-basis: 98%;
+}
+.form-btn {
+ background-color: var(--color-primary);
+ border: none;
+ border-radius: 10px;
+ padding: 10px 12px 10px 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ cursor: pointer;
+ transition: 0.3s ease;
+}
+.form-btn-icon {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ color: #000;
+}
+.form-btn.loading .btn-icon-default {
+ display: none;
+}
+.form-btn.loading .btn-icon-loading {
+ display: flex;
+}
+.btn-icon-default {
+ display: flex;
+}
+.spinner {
+ width: 24px;
+ height: 24px;
+ border: 4px solid #c5d7ec;
+ border-top-color: transparent;
+ border-radius: 50%;
+ box-sizing: border-box;
+ animation: spin 300ms linear infinite;
+}
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+.btn-text {
+ color: #ffffff;
+ font-size: 16px;
+ font-weight: 400;
+}
+.form-section-right {
+ flex: 0 1 45%;
+}
+.form-section-text h2 {
+ margin-bottom: 16px;
+}
+.form-section-text p {
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 1.7;
+ color: var(--color-body-text);
+}
+.form-img {
+ position: relative;
+}
+.form-img p {
+ position: absolute;
+ top: 28%;
+ right: 16%;
+ font-size: 56px;
+ font-weight: 700;
+ color: #c8dff9;
+}
+.form-img img {
+ max-width: 100%;
+ height: auto;
+ display: block;
+}
+.end-form-img {
+ left: 184px;
+ top: -28px;
+}
+.success-message {
+ display: none;
+}
+.success-message p {
+ margin-top: 16px;
+}
+.success-message h3 {
+ margin-top: 24px;
+}
+.success-btn {
+ margin-top: 24px;
+ border: none;
+ border-radius: 10px;
+ background-color: var(--color-primary);
+ color: #ffffff;
+ font-size: 16px;
+ font-weight: 500;
+ cursor: pointer;
+ padding: 10px 24px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+.success-message.visible {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+.related-section > .container {
+ display: flex;
+ flex-direction: column;
+}
+.related-header {
+ display: flex;
+ justify-content: space-between;
+ gap: 100px;
+ padding-bottom: 24px;
+}
+.related-title {
+ margin-bottom: 8px;
+}
+.related-button {
+ display: flex;
+ gap: 8px;
+ height: 40px;
+ align-self: center;
+ align-items: center;
+}
+.related-button span {
+ font-size: 15px;
+ font-weight: normal;
+ line-height: 1.6;
+}
+.related-button svg {
+ fill: var(--color-title);
+}
+.related-button span {
+ color: var(--color-title);
+}
+.related-button:hover svg {
+ fill: var(--color-primary);
+}
+.related-button:hover span {
+ color: var(--color-primary);
+}
+.related-button-mobile {
+ display: none;
+}
+.related-button:hover svg {
+ transform: translateX(-4px);
+}
+
+.related-boxes {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 389px));
+ gap: 16px;
+
+ justify-content: center;
+}
+.related-card {
+ width: 100%;
+ aspect-ratio: 4 / 3;
+}
+.related-image {
+ width: 100%;
+ height: 292px;
+ border-radius: 10px;
+ overflow: hidden;
+ position: relative;
+ object-fit: cover;
+}
+.media-container {
+ width: 100%;
+ height: 100%;
+}
+.related-image img,
+.media-container video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ transition: transform 0.5s ease;
+}
+.related-content {
+ margin-top: 16px;
+}
+.related-content h3 {
+ font-size: 15px;
+ margin-bottom: 8px;
+}
+.related-content p {
+ font-size: 12px;
+}
+.down-txt {
+ display: none;
+ margin-top: 8px;
+}
+.down-txt span {
+ font-size: 15px;
+ font-weight: bold;
+}
+.overlay-layer {
+ position: absolute;
+ inset: 0;
+ background-image: url(/src/img/overlay.svg);
+ border-radius: 10px;
+ display: flex;
+ align-items: flex-end;
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ opacity 0.35s ease,
+ visibility 0.35s ease;
+ z-index: 2;
+}
+.related-card:hover .overlay-layer {
+ opacity: 1;
+ visibility: visible;
+}
+.button-overlay {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 3;
+ padding: 12px 12px 16px 12px;
+}
+.button-overlay svg {
+ width: 24px;
+ height: 24px;
+ fill: white;
+ transition: 0.3s;
+}
+.date {
+ color: #ffffff;
+ font-size: 13px;
+ font-weight: normal;
+}
+.namepopup {
+ color: #ffffff;
+ font-size: 18px;
+ font-weight: bold;
+ line-height: 1.4;
+}
+.play-btn {
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ border-radius: 50%;
+ border: none;
+ opacity: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 10;
+ width: 32px;
+ height: 32px;
+}
+.progress-ring {
+ position: absolute;
+ top: 13px;
+ left: 13px;
+ overflow: visible;
+ z-index: 20;
+ transform: rotate(180deg);
+}
+.progress-circle {
+ fill: transparent;
+ stroke: white;
+ stroke-width: 2;
+ stroke-linecap: round;
+}
+.play-icon {
+ width: 100%;
+ height: 100%;
+ fill: white;
+ position: absolute;
+ z-index: 3;
+ transition:
+ opacity 0.25s ease,
+ transform 0.25s ease;
+}
+.icon-play {
+ opacity: 1;
+}
+.icon-pause {
+ opacity: 0;
+}
+.related-card:hover .icon-pause {
+ opacity: 1;
+}
+.related-card:hover .icon-play {
+ opacity: 0;
+}
+.is-video .play-btn {
+ opacity: 1;
+}
+.is-image .play-btn {
+ display: none;
+}
+
+.media-section {
+ width: 100%;
+ overflow: hidden;
+}
+.media {
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ object-position: center;
+ display: block;
+}
+.container-showcase {
+ max-width: 1240px;
+ padding: 0 20px;
+ margin: 0 auto;
+}
+.showcase-section > .container-showcase {
+ height: 200vh;
+}
+.showcase-sticky {
+ position: sticky;
+ top: 0;
+ width: 100%;
+ height: 100dvh;
+ overflow: hidden;
+}
+.showcase-inner {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ gap: 40px;
+ height: 100dvh;
+}
+.showcase-media-side {
+ flex-basis: 58%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.showcase-media-wrapper {
+ width: 100%;
+ max-width: 679px;
+ aspect-ratio: 1/1;
+ position: relative;
+ overflow: hidden;
+ border-radius: 8px;
+}
+.media-item {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transition:
+ opacity 0.8s ease,
+ transform 1.4s ease;
+ will-change: opacity, transform;
+}
+.media-item.active {
+ opacity: 1;
+ z-index: 2;
+}
+.media-item img,
+.media-item video {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 8px;
+}
+.showcase-text-side {
+ flex-basis: 40%;
+ height: 90%;
+ overflow: visible;
+ position: relative;
+}
+.text-track {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+}
+.text-item {
+ height: 60dvh;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: flex-start;
+ opacity: 1;
+ transform: translateY(0);
+ filter: blur(0);
+ transition:
+ opacity 0.4s linear,
+ transform 0.4s linear,
+ filter 0.4s linear;
+ will-change: transform, opacity, filter;
+}
+.text-item span {
+ font-size: 20px;
+ color: var(--color-primary);
+ margin-bottom: 4px;
+ font-weight: bold;
+}
+.text-item h2 {
+ font-size: 22px;
+ color: var(--color-title);
+ line-height: 1.5;
+ margin-bottom: 16px;
+}
+.text-item p {
+ color: var(--color-body-text);
+ line-height: 1.7;
+ font-size: 15px;
+}
+.devidermedia {
+ margin-top: 100px;
+ margin-bottom: 100px;
+}
+.devidermedia > .container {
+ max-width: 1240px;
+ padding: 0 20px;
+ margin: 0 auto;
+}
+.devidermedia .media {
+ display: block;
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ border-radius: 10px;
+}
+.devidermedia .sclae-in-view {
+ animation: scale-in-view linear;
+ animation-timeline: view();
+ animation-range: entry 0% cover 40%;
+}
+.devidermedia .media.ar16-9 {
+ aspect-ratio: 16 / 9;
+}
+.devidermedia .media.ar4-5 {
+ aspect-ratio: 4 / 5;
+}
+@keyframes scale-in-view {
+ from {
+ scale: 0.6;
+ }
+ to {
+ scale: 1;
+ }
+}
+.form-input input,
+.form-text textarea {
+ border: 1px solid #ccc;
+ outline: none;
+ transition: all 0.3s ease;
+}
+
+.form-input input:focus,
+.form-text textarea:focus {
+ border-color: var(--color-primary);
+ background-color: #EAF7FF;
+}
+.error-message {
+ color: #DC2626;
+ font-size: 13px;
+ margin-top: 6px;
+ display: block;
+}
+
+.input-error {
+ background-color: #FFEBEB !important;
+ border-color: #ef4444 !important;
+}
diff --git a/src/assets/icons/portfolioGallery.svg b/src/assets/icons/portfolioGallery.svg
new file mode 100644
index 0000000..bbe4b26
--- /dev/null
+++ b/src/assets/icons/portfolioGallery.svg
@@ -0,0 +1,77 @@
+
diff --git a/src/assets/icons/portfolioP.svg b/src/assets/icons/portfolioP.svg
new file mode 100644
index 0000000..de574e1
--- /dev/null
+++ b/src/assets/icons/portfolioP.svg
@@ -0,0 +1,506 @@
+
diff --git a/src/assets/images/.gitkeep b/src/assets/images/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..6103de6
Binary files /dev/null and b/src/assets/images/1.png differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..28a0433
Binary files /dev/null and b/src/assets/images/2.png differ
diff --git a/src/assets/images/3.png b/src/assets/images/3.png
new file mode 100644
index 0000000..c739eab
Binary files /dev/null and b/src/assets/images/3.png differ
diff --git a/src/assets/images/4.png b/src/assets/images/4.png
new file mode 100644
index 0000000..0d8ca44
Binary files /dev/null and b/src/assets/images/4.png differ
diff --git a/src/assets/images/5.png b/src/assets/images/5.png
new file mode 100644
index 0000000..5b9634f
Binary files /dev/null and b/src/assets/images/5.png differ
diff --git a/src/assets/images/6.png b/src/assets/images/6.png
new file mode 100644
index 0000000..7d3d29a
Binary files /dev/null and b/src/assets/images/6.png differ
diff --git a/src/assets/images/devidermedia.mp4 b/src/assets/images/devidermedia.mp4
new file mode 100644
index 0000000..36c0249
Binary files /dev/null and b/src/assets/images/devidermedia.mp4 differ
diff --git a/src/assets/images/devidermedia.webp b/src/assets/images/devidermedia.webp
new file mode 100644
index 0000000..43f3ded
Binary files /dev/null and b/src/assets/images/devidermedia.webp differ
diff --git a/src/assets/images/gallery-img.webp b/src/assets/images/gallery-img.webp
new file mode 100644
index 0000000..9d89a65
Binary files /dev/null and b/src/assets/images/gallery-img.webp differ
diff --git a/src/assets/images/gallery-thumbnail.webp b/src/assets/images/gallery-thumbnail.webp
new file mode 100644
index 0000000..c097a18
Binary files /dev/null and b/src/assets/images/gallery-thumbnail.webp differ
diff --git a/src/assets/images/high.mp4 b/src/assets/images/high.mp4
new file mode 100644
index 0000000..cb12748
Binary files /dev/null and b/src/assets/images/high.mp4 differ
diff --git a/src/assets/js/portfolio-gallery.js b/src/assets/js/portfolio-gallery.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/js/portfolio.js b/src/assets/js/portfolio.js
new file mode 100644
index 0000000..b03f449
--- /dev/null
+++ b/src/assets/js/portfolio.js
@@ -0,0 +1,1403 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const buttons = document.querySelectorAll('.toggle-btn');
+ const wrapper = document.querySelector('.table-wrapper');
+ const columns = document.querySelectorAll('.column');
+
+ let isClickScrolling = false;
+ let isInitialLoad = true;
+ setTimeout(() => {
+ isInitialLoad = false;
+ }, 100);
+
+ buttons.forEach((btn) => {
+ btn.addEventListener('click', (e) => {
+ e.preventDefault();
+
+ const currentTarget = btn.dataset.target;
+ const targetId = currentTarget === 'challenges' ? 'solutions' : 'challenges';
+ const targetColumn = document.getElementById(targetId);
+
+ if (targetColumn) {
+ isClickScrolling = true;
+
+ targetColumn.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'start',
+ block: 'nearest',
+ });
+
+ buttons.forEach((b) => {
+ const active = b.dataset.target === targetId;
+ b.classList.toggle('is-active', active);
+ b.setAttribute('aria-selected', active);
+ });
+
+ setTimeout(() => {
+ isClickScrolling = false;
+ }, 800);
+ }
+ });
+ });
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ if (isClickScrolling || isInitialLoad) return;
+
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ const id = entry.target.id;
+ buttons.forEach((btn) => {
+ const isActive = btn.dataset.target === id;
+ btn.classList.toggle('is-active', isActive);
+ btn.setAttribute('aria-selected', isActive);
+ });
+ }
+ });
+ },
+ {
+ root: wrapper,
+ threshold: 0.6,
+ }
+ );
+
+ columns.forEach((col) => observer.observe(col));
+});
+
+const stepsData = [
+ {
+ number: '01',
+ title: 'ایدهیابی و پیدا کردن مشکلات صفحه',
+ intro:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ content: [
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ ],
+ },
+ {
+ number: '02',
+ title: 'ایدهیابی و پیدا کردن مشکلات صفحه',
+ intro:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ content: [
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ ],
+ },
+ {
+ number: '03',
+ title: 'ایدهیابی و پیدا کردن مشکلات صفحه',
+ intro:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ content: [
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ ],
+ },
+ {
+ number: '04',
+ title: 'ایدهیابی و پیدا کردن مشکلات صفحه',
+ intro:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ content: [
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ ],
+ },
+ {
+ number: '05',
+ title: 'ایدهیابی و پیدا کردن مشکلات صفحه',
+ intro:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ content: [
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ ],
+ },
+ {
+ number: '06',
+ title: 'ایدهیابی و پیدا کردن مشکلات صفحه',
+ intro:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ content: [
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ ],
+ },
+ {
+ number: '07',
+ title: 'ایدهیابی و پیدا کردن مشکلات صفحه',
+ intro:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ content: [
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ ],
+ },
+ {
+ number: '08',
+ title: 'ایدهیابی و پیدا کردن مشکلات صفحه',
+ intro:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ content: [
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ ],
+ },
+ {
+ number: '09',
+ title: 'ایدهیابی و پیدا کردن مشکلات صفحه',
+ intro:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ content: [
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ ],
+ },
+];
+
+const container = document.getElementById('stepsProcess');
+const isMobile = window.innerWidth <= 768;
+const visibleSteps = isMobile ? stepsData.filter((step) => Number(step.number) <= 7) : stepsData;
+
+visibleSteps.forEach((step, i) => {
+ const intro = step.intro || '';
+ const items = step.content || [];
+
+ container.insertAdjacentHTML(
+ 'beforeend',
+ `
+
+
+ ${step.number}
+
+
+
+
+
+ ${intro ? `
${intro}
` : ''}
+
+
+ ${items.map((item) => `- ${item}
`).join('')}
+
+
+
+`
+ );
+});
+
+const steps = document.querySelectorAll('.step');
+
+steps.forEach((step) => {
+ const toggleStep = () => {
+ steps.forEach((s) => {
+ if (s !== step) s.classList.remove('active');
+ });
+
+ step.classList.toggle('active');
+ };
+
+ step.querySelector('.step-header').addEventListener('click', toggleStep);
+
+ step.querySelector('.step-number-bg').addEventListener('click', toggleStep);
+});
+
+const form = document.getElementById('contactForm');
+const submitBtn = document.getElementById('submitBtn');
+const backBtn = document.getElementById('backBtn');
+const successMessage = document.getElementById('successMessage');
+const submitBtnText = submitBtn.querySelector('.btn-text');
+
+form.addEventListener('submit', function (event) {
+ event.preventDefault();
+
+ submitBtn.classList.add('loading');
+ submitBtnText.textContent = 'درحال ارسال فرم';
+ submitBtn.disabled = true;
+
+ setTimeout(() => {
+ form.style.display = 'none';
+
+ successMessage.classList.add('visible');
+ }, 1500);
+});
+
+backBtn.addEventListener('click', function () {
+ successMessage.classList.remove('visible');
+
+ form.style.display = 'flex';
+
+ submitBtn.disabled = false;
+ submitBtn.classList.remove('loading');
+ submitBtnText.textContent = 'ثبت درخواست';
+
+ form.reset();
+});
+
+const customSelect = document.getElementById('customSelect');
+const selectBox = customSelect.querySelector('.select-box');
+const options = customSelect.querySelectorAll('.option');
+const selectedText = customSelect.querySelector('.selected-text');
+
+selectBox.addEventListener('click', () => {
+ customSelect.classList.toggle('active');
+});
+
+options.forEach((option) => {
+ option.addEventListener('click', () => {
+ options.forEach((item) => {
+ item.classList.remove('active');
+ });
+
+ option.classList.add('active');
+ selectedText.textContent = option.textContent;
+ customSelect.classList.remove('active');
+ });
+});
+
+document.addEventListener('click', (e) => {
+ if (!customSelect.contains(e.target)) {
+ customSelect.classList.remove('active');
+ }
+});
+
+function initRelatedSection(section) {
+ const cards = section.querySelectorAll('.related-card');
+
+ cards.forEach((card) => {
+ const container = card.querySelector('.media-container');
+
+ if (!container) return;
+ if (container.dataset.initialized === 'true') return;
+ container.dataset.initialized = 'true';
+
+ const progressCircle = card.querySelector('.progress-circle');
+ const type = container.dataset.type;
+ const src = container.dataset.src;
+
+ if (!type || !src) return;
+
+ card.classList.add(type === 'video' ? 'is-video' : 'is-image');
+ if (type === 'video') {
+ const ext = src.split('.').pop().toLowerCase();
+ const video = document.createElement('video');
+ video.muted = true;
+ video.playsInline = true;
+ video.preload = 'metadata';
+
+ const source = document.createElement('source');
+ source.src = src;
+ source.type = `video/${ext}`;
+
+ video.appendChild(source);
+ container.appendChild(video);
+
+ if (!progressCircle) return;
+ const radius = progressCircle.r.baseVal.value;
+ const circumference = 2 * Math.PI * radius;
+ progressCircle.style.strokeDasharray = circumference;
+ progressCircle.style.strokeDashoffset = circumference;
+
+ let stopTimeout;
+
+ card.addEventListener('mouseenter', async () => {
+ clearTimeout(stopTimeout);
+
+ try {
+ video.currentTime = 0;
+
+ await video.play();
+
+ progressCircle.style.transition = 'none';
+ progressCircle.style.strokeDashoffset = circumference;
+
+ requestAnimationFrame(() => {
+ progressCircle.style.transition = 'stroke-dashoffset 5s linear';
+
+ progressCircle.style.strokeDashoffset = 0;
+ });
+
+ stopTimeout = setTimeout(() => {
+ video.pause();
+ video.currentTime = 0;
+
+ progressCircle.style.transition = 'none';
+ progressCircle.style.strokeDashoffset = circumference;
+ }, 5000);
+ } catch (err) {
+ console.error(err);
+ }
+ });
+
+ card.addEventListener('mouseleave', () => {
+ clearTimeout(stopTimeout);
+
+ video.pause();
+ video.currentTime = 0;
+
+ progressCircle.style.transition = 'none';
+ progressCircle.style.strokeDashoffset = circumference;
+ });
+ card.addEventListener('click', () => {
+ if (type === 'video') {
+ openVideoPopup(src);
+ } else {
+ openImagePopup(src);
+ }
+ });
+ } else if (type === 'image') {
+ const img = document.createElement('img');
+ img.src = src;
+ img.alt = 'portfolio';
+
+ container.appendChild(img);
+ }
+ });
+}
+function initGalleryFilter(section) {
+ const tabs = section.querySelectorAll('.tabs button');
+ const cards = section.querySelectorAll('.related-card');
+
+ tabs.forEach((tab) => {
+ tab.addEventListener('click', () => {
+ tabs.forEach((btn) => {
+ btn.classList.remove('current');
+ });
+
+ tab.classList.add('current');
+
+ const text = tab.querySelector('.txt')?.textContent.trim();
+ cards.forEach((card) => {
+ const media = card.querySelector('.media-container');
+ if (!media) return;
+
+ const type = media.dataset.type;
+ if (text === 'همه') {
+ card.style.display = '';
+ } else if (text === 'ویدیو') {
+ if (type === 'video') {
+ card.style.display = '';
+ } else {
+ card.style.display = 'none';
+ }
+ } else if (text === 'تصاویر') {
+ if (type === 'image') {
+ card.style.display = '';
+ } else {
+ card.style.display = 'none';
+ }
+ }
+ });
+ });
+ });
+}
+
+document.querySelectorAll('.related-content p').forEach((item) => {
+ item.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ });
+});
+document.addEventListener('DOMContentLoaded', () => {
+ document.querySelectorAll('[data-related-section]').forEach((section) => {
+ initRelatedSection(section);
+ initGalleryFilter(section);
+ });
+});
+
+const slides = [
+ {
+ type: 'image',
+ src: 'src/assets/images/5.png',
+ number: '01',
+ title: 'لورم ایپسوم متن ساختگی',
+ description:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ gradientClass: 'gradient-one',
+ mobilePositionClass: 'mobile-pos-one',
+ },
+ {
+ type: 'image',
+ src: 'src/assets/images/4.png',
+ number: '02',
+ title: 'لورم اپسیلون متن ساختگی',
+ description:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ gradientClass: 'gradient-two',
+ mobilePositionClass: 'mobile-pos-two',
+ },
+ {
+ type: 'image',
+ src: 'src/assets/images/6.png',
+ number: '03',
+ title: 'لورم اپسیلون متن ساختگی',
+ description:
+ 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ',
+ gradientClass: 'gradient-three',
+ mobilePositionClass: 'mobile-pos-three',
+ },
+];
+
+const showcase = document.getElementById('showcase');
+const mediaWrapper = document.getElementById('showcasemediaWrapper');
+const textTrack = document.getElementById('textTrack');
+function renderMedia() {
+ slides.forEach((slide, index) => {
+ const item = document.createElement('div');
+
+ item.className = `
+ media-item
+ ${slide.gradientClass || ''}
+ ${slide.mobilePositionClass || ''}
+`;
+
+ if (index === 0) {
+ item.classList.add('active');
+ }
+ if (slide.type === 'image' || slide.type === 'gif') {
+ const img = document.createElement('img');
+ img.src = slide.src;
+ item.appendChild(img);
+ }
+
+ if (slide.type === 'video') {
+ const video = document.createElement('video');
+
+ video.src = slide.src;
+
+ video.autoplay = true;
+ video.loop = true;
+ video.muted = true;
+ video.playsInline = true;
+
+ item.appendChild(video);
+ }
+ mediaWrapper.appendChild(item);
+ });
+}
+function renderTexts() {
+ slides.forEach((slide) => {
+ const item = document.createElement('div');
+ item.className = 'text-item';
+ item.innerHTML = `
+ ${slide.number}
+
+ ${slide.title}
+
+
+ ${slide.description}
+
+ `;
+ textTrack.appendChild(item);
+ });
+}
+renderMedia();
+
+renderTexts();
+
+const mediaItems = document.querySelectorAll('.media-item');
+const textItems = document.querySelectorAll('.text-item');
+const totalSlides = slides.length;
+const showcaseScrollContainer = showcase.querySelector('.container-showcase');
+
+document.documentElement.style.setProperty('--slides-count', slides.length);
+
+function setActiveSlide(current) {
+ mediaItems.forEach((item, index) => {
+ item.classList.toggle('active', index === current);
+ });
+
+ textItems.forEach((item, index) => {
+ item.classList.toggle('active', index === current);
+ });
+}
+
+function resetTextItemInlineStyles() {
+ textItems.forEach((item) => {
+ item.style.opacity = '';
+ item.style.filter = '';
+ });
+}
+function updateScrollScene() {
+ const isMobile = window.innerWidth <= 768;
+ const rect = showcase.getBoundingClientRect();
+ const sectionTop = window.scrollY + rect.top;
+ const scrollInside = window.scrollY - sectionTop;
+ const scrollHeight = showcaseScrollContainer?.offsetHeight ?? showcase.offsetHeight;
+ const maxScroll = Math.max(scrollHeight - window.innerHeight, 1);
+ const progress = Math.min(Math.max(scrollInside / maxScroll, 0), 1);
+ const exactIndex = progress * (totalSlides - 1);
+ const current = Math.round(exactIndex);
+
+ if (isMobile) {
+ textTrack.style.transform = 'translateY(0)';
+ resetTextItemInlineStyles();
+ setActiveSlide(current);
+
+ return;
+ }
+
+ textTrack.style.transform = `translateY(-${exactIndex * 60}vh)`;
+
+ textItems.forEach((item) => {
+ item.classList.remove('active');
+ });
+
+ textItems.forEach((item, index) => {
+ const offset = index - exactIndex;
+
+ let blur = 0;
+ let opacity = 1;
+
+ if (offset > 0) {
+ const enterProgress = Math.min(offset, 1);
+
+ blur = Math.max((enterProgress - 0.35) * 14, 0);
+
+ opacity = Math.min(1.2 - enterProgress, 1);
+ }
+
+ item.style.filter = `blur(${blur}px)`;
+
+ item.style.opacity = opacity;
+ });
+
+ setActiveSlide(current);
+}
+
+window.addEventListener('scroll', updateScrollScene);
+
+window.addEventListener('resize', updateScrollScene);
+
+updateScrollScene();
+
+const portfolioNavConfig = {
+ actionType: 'project',
+ projectPreviewImage: './src/assets/images/gallery-thumbnail.webp',
+ websiteUrl: 'https://example.com',
+};
+
+const overlay = document.getElementById('portfolioOverlay');
+const imagePopup = document.getElementById('portfolioOverlayimg');
+const navLinksContainer = document.getElementById('portfolioNavLinks');
+const navAction = document.getElementById('portfolioNavAction');
+
+const navSections = [...document.querySelectorAll('section[data-nav-title]')].filter(
+ (section) => section.dataset.nav !== 'false' && section.offsetParent !== null
+);
+
+navSections.forEach((section) => {
+ const id = section.id || section.className.split(' ')[0];
+ section.id = id;
+ const btn = document.createElement('button');
+
+ btn.className = 'portfolio-nav-btn';
+ btn.textContent = section.dataset.navTitle;
+ btn.dataset.target = id;
+
+ btn.addEventListener('click', () => {
+ document.getElementById(id).scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ });
+ });
+
+ navLinksContainer.appendChild(btn);
+});
+
+const navButtons = document.querySelectorAll('.portfolio-nav-btn');
+const sectionObserver = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ const activeId = entry.target.id;
+
+ navButtons.forEach((btn) => {
+ btn.classList.remove('active');
+
+ if (btn.dataset.target === activeId) {
+ btn.classList.add('active');
+
+ btn.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'start',
+ block: 'nearest',
+ });
+ }
+ });
+ }
+ });
+ },
+ { threshold: 0.45 }
+);
+
+navSections.forEach((section) => sectionObserver.observe(section));
+const portfolioNav = document.getElementById('portfolioNav');
+
+document.querySelector('.portfolio-nav-meeting').addEventListener('click', function () {
+ const target = document.querySelector(this.dataset.scrollTarget);
+
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ });
+ }
+});
+const aboutSection = document.querySelector('.about-section');
+const showcaseSection = document.querySelector('.showcase-section');
+const mediaSection = document.querySelector('.media-section');
+
+function togglePortfolioNav() {
+ const aboutTop = aboutSection.getBoundingClientRect().top;
+ const showcaseRect = showcaseSection.getBoundingClientRect();
+ const mediaTop = mediaSection.getBoundingClientRect().top;
+ const afterAbout = aboutTop <= window.innerHeight;
+ const showcaseVisible = showcaseRect.top <= window.innerHeight && showcaseRect.bottom >= 0;
+ const mediaVisible = mediaTop <= window.innerHeight;
+
+ if (afterAbout) {
+ portfolioNav.classList.add('show');
+ } else {
+ portfolioNav.classList.remove('show');
+ }
+
+ if (showcaseVisible && !mediaVisible) {
+ portfolioNav.classList.remove('show');
+ }
+}
+
+window.addEventListener('scroll', togglePortfolioNav);
+window.addEventListener('load', togglePortfolioNav);
+
+function openPortfolioPopup() {
+ overlay.classList.add('active');
+ document.body.style.overflow = 'hidden';
+
+ const sideWrapper = document.querySelector('.side-buttons-wrapper');
+ const portfolioWrapper = document.querySelector('.portfolio-logo-wrapper');
+ const desktopBtn = document.querySelector('.desktop-btn');
+ const phoneBtn = document.querySelector('.phone-btn');
+ const desktopUse = document.getElementById('desktopIcon');
+ const phoneUse = document.getElementById('phoneIcon');
+
+ sideWrapper?.classList.remove('rotated-desktop');
+
+ if (window.innerWidth <= 768) {
+ handleMobilePopupView();
+
+ phoneBtn?.classList.add('active');
+ desktopBtn?.classList.remove('active');
+
+ desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon');
+
+ phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon-active');
+ } else {
+ rotateOverlay?.classList.remove('show');
+
+ portfolioWrapper?.classList.remove('mobile-view');
+
+ sideWrapper?.classList.remove('rotated-desktop');
+
+ desktopBtn?.classList.add('active');
+ phoneBtn?.classList.remove('active');
+
+ desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon-active');
+
+ phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon');
+ }
+}
+
+if (portfolioNavConfig.actionType === 'project') {
+ navAction.innerHTML = `
+
+ `;
+
+ document
+ .querySelector('.portfolio-nav-project-btn')
+ ?.addEventListener('click', openPortfolioPopup);
+}
+
+if (portfolioNavConfig.actionType === 'website') {
+ navAction.innerHTML = `
+
+ بازدید از سایت
+
+ `;
+}
+
+document.querySelectorAll('.close-popup').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ const video = imagePopup.querySelector('.video-popup-player');
+
+ if (video) {
+ video.pause();
+ video.removeAttribute('src');
+ video.load();
+ // video.src = '';
+ }
+ overlay.classList.remove('active');
+ imagePopup.classList.remove('active');
+
+ document.body.style.overflow = '';
+ });
+});
+
+// overlay?.addEventListener('click', (e) => {
+// if (e.target === overlay) {
+// overlay.classList.remove('active');
+// document.body.style.overflow = '';
+// }
+// });
+
+function openImagePopup(src) {
+ // const img = imagePopup?.querySelector('img');
+ const img = imagePopup.querySelector('.img-popup-img');
+ const video = imagePopup.querySelector('.video-popup-player');
+
+ // if (img && src) {
+ // img.src = src;
+ // }
+ video.pause();
+ // video.src = '';
+ video.style.display = 'none';
+
+ img.style.display = 'block';
+ img.src = src;
+
+ imagePopup?.classList.add('active');
+ document.body.style.overflow = 'hidden';
+}
+
+imagePopup?.addEventListener('click', (e) => {
+ const video = imagePopup.querySelector('.video-popup-player');
+
+ if (video) {
+ video.pause();
+ video.src = '';
+ }
+});
+function openVideoPopup(src, poster = '') {
+ const img = imagePopup.querySelector('.img-popup-img');
+ const video = imagePopup.querySelector('.video-popup-player');
+
+ img.style.display = 'none';
+
+ video.style.display = 'block';
+ video.pause();
+ // if (poster) {
+ // video.poster = poster;
+ // }
+ video.removeAttribute('poster');
+
+ if (poster) {
+ video.poster = poster;
+ }
+ video.src = src;
+ video.load();
+ // video.currentTime = 0;
+ // video.play();
+
+ imagePopup.classList.add('active');
+ document.body.style.overflow = 'hidden';
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const mediaContainer = document.getElementById('media-section-container');
+ const section = document.querySelector('.media-section');
+ const mediaData = {
+ type: 'image',
+ src: './public/images/media.jpg',
+ hideOnMobile: false,
+ };
+ function handleMobileVisibility() {
+ if (window.innerWidth <= 768 && mediaData.hideOnMobile) {
+ section.style.display = 'none';
+ } else {
+ section.style.display = 'block';
+ }
+ }
+
+ handleMobileVisibility();
+
+ window.addEventListener('resize', handleMobileVisibility);
+
+ function renderMedia(data) {
+ let element;
+
+ if (data.type === 'image') {
+ element = document.createElement('img');
+
+ element.src = data.src;
+ element.alt = '';
+ } else if (data.type === 'gif') {
+ element = document.createElement('img');
+
+ element.src = data.src;
+ element.alt = '';
+ } else if (data.type === 'video') {
+ element = document.createElement('video');
+
+ element.src = data.src;
+
+ element.autoplay = true;
+ element.muted = true;
+ element.loop = true;
+ element.playsInline = true;
+ }
+
+ element.classList.add('media');
+
+ mediaContainer.appendChild(element);
+ }
+
+ renderMedia(mediaData);
+});
+
+// document.querySelectorAll('.wrapper').forEach((item) => {
+// item.addEventListener('click', (e) => {
+// e.preventDefault();
+// openPortfolioPopup();
+// });
+// });
+document.querySelector('.gallery-thumbnail .wrapper')?.addEventListener('click', (e) => {
+ e.preventDefault();
+ openPopupByIndex(0);
+});
+
+const navScroll = document.getElementById('portfolioNavScroll');
+const scrollThumb = document.querySelector('.portfolio-scroll-thumb');
+const scrollTrack = document.querySelector('.portfolio-scroll-track');
+
+function updateFakeScrollbar() {
+ if (!navScroll || !scrollThumb || !scrollTrack) return;
+
+ const maxScroll = navScroll.scrollWidth - navScroll.clientWidth;
+ const currentScroll = Math.abs(navScroll.scrollLeft);
+ const trackWidth = scrollTrack.clientWidth;
+ const thumbWidth = 28;
+ const maxThumbMove = trackWidth - thumbWidth;
+ const scrollPercent = currentScroll / maxScroll;
+
+ scrollThumb.style.right = `${scrollPercent * maxThumbMove}px`;
+}
+
+navScroll?.addEventListener('scroll', updateFakeScrollbar);
+window.addEventListener('load', updateFakeScrollbar);
+window.addEventListener('resize', updateFakeScrollbar);
+
+document.addEventListener('DOMContentLoaded', () => {
+ const phoneBtn = document.querySelector('.phone-btn');
+ const desktopBtn = document.querySelector('.desktop-btn');
+ const portfolioWrapper = document.querySelector('.portfolio-logo-wrapper');
+ const desktopUse = document.getElementById('desktopIcon');
+ const phoneUse = document.getElementById('phoneIcon');
+ const sideWrapper = document.querySelector('.side-buttons-wrapper');
+
+ let isMobileView = window.innerWidth <= 768;
+
+ function updateUI() {
+ sideWrapper?.classList.remove('rotated-desktop');
+
+ if (isMobileView) {
+ portfolioWrapper?.classList.add('mobile-view');
+
+ phoneBtn?.classList.add('active');
+ desktopBtn?.classList.remove('active');
+
+ phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon-active');
+
+ desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon');
+ } else {
+ portfolioWrapper?.classList.remove('mobile-view');
+
+ desktopBtn?.classList.add('active');
+ phoneBtn?.classList.remove('active');
+ desktopUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#descktop-icon-active');
+
+ phoneUse?.setAttribute('href', './src/assets/icons/portfolioP.svg#phone-icon');
+ }
+ }
+ phoneBtn?.addEventListener('click', () => {
+ isMobileView = true;
+ updateUI();
+ });
+
+ desktopBtn?.addEventListener('click', () => {
+ isMobileView = false;
+ updateUI();
+ });
+
+ updateUI();
+});
+
+// const relatedCards = [
+// ...document.querySelectorAll('[data-related-section="gallery"] .related-card'),
+// ];
+
+// let currentPopupIndex = 0;
+
+// function openPopupByIndex(index) {
+// const card = relatedCards[index];
+// if (!card) return;
+
+// currentPopupIndex = index;
+// const media = card.querySelector('.media-container');
+
+// if (!media) return;
+// const type = media.dataset.type;
+// const src = media.dataset.src;
+
+// if (type === 'image') {
+// const popupImg = imagePopup.querySelector('.img-wrapper img');
+
+// if (popupImg) {
+// popupImg.src = src;
+// }
+
+// imagePopup.classList.add('active');
+// } else if (type === 'video') {
+// return;
+// }
+
+// document.body.style.overflow = 'hidden';
+
+// updatePopupButtons();
+// }
+
+// function updatePopupButtons() {
+// const allPopups = document.querySelectorAll('.portfolio-popup.active');
+
+// allPopups.forEach((popup) => {
+// const nextBtn = popup.querySelector('.next-popup');
+// const prevBtn = popup.querySelector('.prev-popup');
+
+// if (!nextBtn || !prevBtn) return;
+
+// if (currentPopupIndex <= 0) {
+// prevBtn.classList.add('disabled');
+// } else {
+// prevBtn.classList.remove('disabled');
+// }
+// if (currentPopupIndex >= relatedCards.length - 1) {
+// nextBtn.classList.add('disabled');
+// } else {
+// nextBtn.classList.remove('disabled');
+// }
+// });
+// }
+
+// relatedCards.forEach((card, index) => {
+// card.addEventListener('click', (e) => {
+// if (e.target.closest('.play-btn')) return;
+// if (e.target.closest('.related-content p')) return;
+// openPopupByIndex(index);
+// });
+// });
+// document.querySelectorAll('.next-popup').forEach((btn) => {
+// btn.addEventListener('click', () => {
+// if (currentPopupIndex >= relatedCards.length - 1) return;
+
+// currentPopupIndex++;
+// overlay.classList.remove('active');
+// imagePopup.classList.remove('active');
+// openPopupByIndex(currentPopupIndex);
+// });
+// });
+
+// document.querySelectorAll('.prev-popup').forEach((btn) => {
+// btn.addEventListener('click', () => {
+// if (currentPopupIndex <= 0) return;
+
+// currentPopupIndex--;
+// overlay.classList.remove('active');
+// imagePopup.classList.remove('active');
+
+// openPopupByIndex(currentPopupIndex);
+// });
+// });
+
+// window.addEventListener('keydown', (e) => {
+// const popupIsOpen =
+// overlay.classList.contains('active') || imagePopup.classList.contains('active');
+
+// if (!popupIsOpen) return;
+
+// if (e.key === 'ArrowRight') {
+// if (currentPopupIndex < relatedCards.length - 1) {
+// currentPopupIndex++;
+// overlay.classList.remove('active');
+// imagePopup.classList.remove('active');
+// openPopupByIndex(currentPopupIndex);
+// }
+// }
+
+// if (e.key === 'ArrowLeft') {
+// if (currentPopupIndex > 0) {
+// currentPopupIndex--;
+// overlay.classList.remove('active');
+// imagePopup.classList.remove('active');
+// openPopupByIndex(currentPopupIndex);
+// }
+// }
+// if (e.key === 'Escape') {
+// overlay.classList.remove('active');
+// imagePopup.classList.remove('active');
+// document.body.style.overflow = '';
+// }
+// });
+const relatedCards = [
+ ...document.querySelectorAll('[data-related-section="gallery"] .related-card'),
+];
+
+let currentPopupIndex = 0;
+const galleryItems = [
+ {
+ type: 'project',
+ },
+
+ ...[...document.querySelectorAll('[data-related-section="gallery"] .related-card')].map(
+ (card) => ({
+ type: 'card',
+ element: card,
+ })
+ ),
+];
+
+// function openPopupByIndex(index) {
+// const card = relatedCards[index];
+
+// if (!card) return;
+
+// currentPopupIndex = index;
+
+// const media = card.querySelector('.media-container');
+
+// const type = media.dataset.type;
+// const src = media.dataset.src;
+// const poster = media.dataset.poster;
+
+// if (type === 'video') {
+// openVideoPopup(src, poster);
+// } else {
+// openImagePopup(src);
+// }
+
+// updatePopupButtons();
+// }
+
+function openPopupByIndex(index) {
+ const item = galleryItems[index];
+
+ if (!item) return;
+
+ currentPopupIndex = index;
+
+ // اول هر دو پاپآپ بسته شوند
+ overlay.classList.remove('active');
+ imagePopup.classList.remove('active');
+
+ if (item.type === 'project') {
+ openPortfolioPopup();
+ } else {
+ const media = item.element.querySelector('.media-container');
+
+ const mediaType = media.dataset.type;
+ const src = media.dataset.src;
+ const poster = media.dataset.poster;
+
+ if (mediaType === 'video') {
+ openVideoPopup(src, poster);
+ } else {
+ openImagePopup(src);
+ }
+ }
+
+ updatePopupButtons();
+}
+// function updatePopupButtons() {
+// const nextBtn = imagePopup.querySelector('.next-popup');
+// const prevBtn = imagePopup.querySelector('.prev-popup');
+
+// if (!nextBtn || !prevBtn) return;
+// prevBtn.disabled = currentPopupIndex === 0;
+// nextBtn.disabled = currentPopupIndex === galleryItems.length - 1;
+
+// prevBtn.classList.toggle('disabled', currentPopupIndex === 0);
+// nextBtn.classList.toggle('disabled', currentPopupIndex === galleryItems.length - 1);
+// }
+function updatePopupButtons() {
+ document.querySelectorAll('.next-popup').forEach((btn) => {
+ btn.disabled = currentPopupIndex === galleryItems.length - 1;
+
+ btn.classList.toggle('disabled', currentPopupIndex === galleryItems.length - 1);
+ });
+
+ document.querySelectorAll('.prev-popup').forEach((btn) => {
+ btn.disabled = currentPopupIndex === 0;
+
+ btn.classList.toggle('disabled', currentPopupIndex === 0);
+ });
+}
+// relatedCards.forEach((card, index) => {
+// card.addEventListener('click', (e) => {
+// if (e.target.closest('.play-btn')) return;
+
+// openPopupByIndex(index);
+// });
+// });
+document.querySelector('.gallery-thumbnail .wrapper')?.addEventListener('click', (e) => {
+ e.preventDefault();
+ openPopupByIndex(0);
+});
+
+relatedCards.forEach((card, index) => {
+ card.addEventListener('click', (e) => {
+ if (e.target.closest('.play-btn')) return;
+
+ openPopupByIndex(index + 1);
+ });
+});
+// imagePopup.querySelector('.next-popup').addEventListener('click', () => {
+// if (currentPopupIndex >= galleryItems.length - 1) return;
+
+// openPopupByIndex(currentPopupIndex + 1);
+// });
+
+// imagePopup.querySelector('.prev-popup').addEventListener('click', () => {
+// if (currentPopupIndex <= 0) return;
+
+// openPopupByIndex(currentPopupIndex - 1);
+// });
+
+document.querySelectorAll('.next-popup').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ if (currentPopupIndex < galleryItems.length - 1) {
+ openPopupByIndex(currentPopupIndex + 1);
+ }
+ });
+});
+
+document.querySelectorAll('.prev-popup').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ if (currentPopupIndex > 0) {
+ openPopupByIndex(currentPopupIndex - 1);
+ }
+ });
+});
+window.addEventListener('keydown', (e) => {
+ if (!imagePopup.classList.contains('active')) return;
+
+ if (e.key === 'ArrowRight') {
+ if (currentPopupIndex < galleryItems.length - 1) {
+ openPopupByIndex(currentPopupIndex + 1);
+ }
+ }
+
+ if (e.key === 'ArrowLeft') {
+ if (currentPopupIndex > 0) {
+ openPopupByIndex(currentPopupIndex - 1);
+ }
+ }
+});
+
+let rotationTimer = null;
+
+function handleMobilePopupView() {
+ const rotateOverlay = document.getElementById('rotateOverlay');
+ const portfolioWrapper = document.querySelector('.portfolio-logo-wrapper');
+ const sideWrapper = document.querySelector('.side-buttons-wrapper');
+
+ if (!rotateOverlay || !portfolioWrapper || !sideWrapper) return;
+
+ rotateOverlay.classList.add('show');
+
+ clearTimeout(rotationTimer);
+
+ rotationTimer = setTimeout(() => {
+ rotateOverlay.classList.remove('show');
+ updateOrientationState();
+ }, 2000);
+
+ window.removeEventListener('resize', updateOrientationState);
+ window.removeEventListener('orientationchange', updateOrientationState);
+
+ window.addEventListener('resize', updateOrientationState);
+ window.addEventListener('orientationchange', updateOrientationState);
+
+ function updateOrientationState() {
+ const isLandscape = window.innerWidth > window.innerHeight;
+
+ if (isLandscape) {
+ portfolioWrapper.classList.remove('mobile-view');
+ sideWrapper.classList.add('rotated-desktop');
+ sideWrapper.classList.add('is-rotated');
+ overlay.classList.add('is-rotated2');
+ } else {
+ portfolioWrapper.classList.add('mobile-view');
+ sideWrapper.classList.remove('rotated-desktop');
+ sideWrapper.classList.remove('is-rotated');
+ overlay.classList.remove('is-rotated2');
+ }
+ }
+ updateOrientationState();
+}
+
+window.addEventListener('load', () => {
+ const portfolioImageScroll = document.getElementById('portfolioScroll');
+ const portfolioCustomThumb = document.getElementById('scrollThumb');
+ const portfolioCustomTrack = document.querySelector('.scroll-track');
+
+ if (!portfolioImageScroll || !portfolioCustomThumb || !portfolioCustomTrack) {
+ console.log('Portfolio scroll elements not found');
+ return;
+ }
+
+ let isDraggingPortfolioThumb = false;
+
+ function updatePortfolioThumb() {
+ if (isDraggingPortfolioThumb) return;
+ const maxScroll = portfolioImageScroll.scrollHeight - portfolioImageScroll.clientHeight;
+ const maxThumbMove = portfolioCustomTrack.clientHeight - portfolioCustomThumb.clientHeight;
+ if (maxScroll <= 0) return;
+ const thumbPosition = (portfolioImageScroll.scrollTop / maxScroll) * maxThumbMove;
+
+ portfolioCustomThumb.style.top = `${thumbPosition}px`;
+ }
+
+ portfolioImageScroll.addEventListener('scroll', updatePortfolioThumb);
+ updatePortfolioThumb();
+
+ let portfolioDragOffsetY = 0;
+ portfolioCustomThumb.addEventListener('mousedown', (event) => {
+ isDraggingPortfolioThumb = true;
+ document.body.style.userSelect = 'none';
+
+ portfolioDragOffsetY = event.clientY - portfolioCustomThumb.getBoundingClientRect().top;
+ });
+ document.addEventListener('mouseup', () => {
+ isDraggingPortfolioThumb = false;
+
+ document.body.style.userSelect = '';
+ });
+
+ document.addEventListener('mousemove', (event) => {
+ if (!isDraggingPortfolioThumb) return;
+
+ const trackRect = portfolioCustomTrack.getBoundingClientRect();
+ let newThumbTop = event.clientY - trackRect.top - portfolioDragOffsetY;
+ const maxThumbTop = portfolioCustomTrack.clientHeight - portfolioCustomThumb.clientHeight;
+
+ newThumbTop = Math.max(0, Math.min(newThumbTop, maxThumbTop));
+ portfolioCustomThumb.style.top = `${newThumbTop}px`;
+ const scrollPercent = newThumbTop / maxThumbTop;
+ const maxImageScroll = portfolioImageScroll.scrollHeight - portfolioImageScroll.clientHeight;
+
+ portfolioImageScroll.scrollTop = scrollPercent * maxImageScroll;
+ });
+});
+
+const nameInput = document.getElementById('name');
+const nameError = document.getElementById('nameError');
+
+nameInput.addEventListener('input', function () {
+ const hasNumber = /\d/.test(this.value);
+
+ if (hasNumber) {
+ this.classList.add('input-error');
+ nameError.textContent = '* فقط حروف فارسی و انگلیسی مجاز است';
+ } else {
+ this.classList.remove('input-error');
+ nameError.textContent = '';
+ }
+});
+
+const phoneInput = document.getElementById('phone');
+const phoneError = document.getElementById('phoneError');
+
+phoneInput.addEventListener('input', function () {
+ const hasLetter = /[a-zA-Zآ-ی]/.test(this.value);
+
+ if (hasLetter) {
+ this.classList.add('input-error');
+ phoneError.textContent = 'فقط عدد مجاز است';
+ } else {
+ this.classList.remove('input-error');
+ phoneError.textContent = '';
+ }
+ this.value = this.value.replace(/\D/g, '');
+});
+
+const emailInput = document.getElementById('email');
+const emailError = document.getElementById('emailError');
+
+emailInput.addEventListener('input', function () {
+ if (this.value !== '' && !this.value.includes('@')) {
+ this.classList.add('input-error');
+ emailError.textContent = 'ایمیل باید شامل @ باشد';
+ } else {
+ this.classList.remove('input-error');
+ emailError.textContent = '';
+ }
+});
+
+const slider = document.getElementById('portfolioNavScroll');
+
+let isDown = false;
+let startX = 0;
+let scrollLeft = 0;
+
+slider.addEventListener('mousedown', (e) => {
+ isDown = true;
+ slider.style.cursor = 'grabbing';
+
+ startX = e.pageX;
+ scrollLeft = slider.scrollLeft;
+});
+
+window.addEventListener('mouseup', () => {
+ isDown = false;
+ slider.style.cursor = 'grab';
+});
+
+slider.addEventListener('mousemove', (e) => {
+ if (!isDown) return;
+
+ e.preventDefault();
+
+ const walk = e.pageX - startX;
+ slider.scrollLeft = scrollLeft - walk;
+});
+slider.addEventListener(
+ 'wheel',
+ (e) => {
+ e.preventDefault();
+ slider.scrollLeft += e.deltaY;
+ },
+ { passive: false }
+);
diff --git a/src/components/.gitkeep b/src/components/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Black.woff b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Black.woff
new file mode 100644
index 0000000..8cdd87a
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Black.woff differ
diff --git a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Bold.woff b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Bold.woff
new file mode 100644
index 0000000..97c2ba6
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Bold.woff differ
diff --git a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBlack.woff b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBlack.woff
new file mode 100644
index 0000000..6ba65e5
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBlack.woff differ
diff --git a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBold.woff b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBold.woff
new file mode 100644
index 0000000..ea45bdf
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-ExtraBold.woff differ
diff --git a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Light.woff b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Light.woff
new file mode 100644
index 0000000..c9895eb
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Light.woff differ
diff --git a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Regular.woff b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Regular.woff
new file mode 100644
index 0000000..1cedfdf
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Regular.woff differ
diff --git a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-SemiBold.woff b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-SemiBold.woff
new file mode 100644
index 0000000..2032742
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-SemiBold.woff differ
diff --git a/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Thin.woff b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Thin.woff
new file mode 100644
index 0000000..44ac03a
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff/YekanBakhFaNum-Thin.woff differ
diff --git a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Black.woff2 b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Black.woff2
new file mode 100644
index 0000000..4e9fe01
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Black.woff2 differ
diff --git a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Bold.woff2 b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Bold.woff2
new file mode 100644
index 0000000..19b4bb3
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Bold.woff2 differ
diff --git a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBlack.woff2 b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBlack.woff2
new file mode 100644
index 0000000..4791333
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBlack.woff2 differ
diff --git a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBold.woff2 b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBold.woff2
new file mode 100644
index 0000000..c4f86ee
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-ExtraBold.woff2 differ
diff --git a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Light.woff2 b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Light.woff2
new file mode 100644
index 0000000..530dfcf
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Light.woff2 differ
diff --git a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Regular.woff2 b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Regular.woff2
new file mode 100644
index 0000000..fd16033
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Regular.woff2 differ
diff --git a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-SemiBold.woff2 b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-SemiBold.woff2
new file mode 100644
index 0000000..7d070d8
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-SemiBold.woff2 differ
diff --git a/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Thin.woff2 b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Thin.woff2
new file mode 100644
index 0000000..19c44b9
Binary files /dev/null and b/src/core/fonts/yekanbakhpro/woff2/YekanBakhFaNum-Thin.woff2 differ
diff --git a/src/core/javascript/core.js b/src/core/javascript/core.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/core/stylesheet/core.css b/src/core/stylesheet/core.css
new file mode 100644
index 0000000..3b94478
--- /dev/null
+++ b/src/core/stylesheet/core.css
@@ -0,0 +1,232 @@
+@font-face {
+ font-family: Yekan Bakh FaNum;
+ font-style: normal;
+ font-weight: 100;
+ src:
+ url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-thin.woff') format('woff'),
+ url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-thin.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: Yekan Bakh FaNum;
+ font-style: normal;
+ font-weight: 300;
+ src:
+ url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-Light.woff') format('woff'),
+ url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-Light.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: Yekan Bakh FaNum;
+ font-style: normal;
+ font-weight: normal;
+ src:
+ url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-Regular.woff') format('woff'),
+ url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-Regular.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: Yekan Bakh FaNum;
+ font-style: normal;
+ font-weight: 600;
+ src:
+ url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-SemiBold.woff') format('woff'),
+ url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: Yekan Bakh FaNum;
+ font-style: normal;
+ font-weight: bold;
+ src:
+ url('../fonts/yekanbakhpro/woff/YekanBakhFaNum-Bold.woff') format('woff'),
+ url('../fonts/yekanbakhpro/woff2/YekanBakhFaNum-Bold.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: Yekan Bakh FaNum;
+ font-style: normal;
+ font-weight: 800;
+ src:
+ url('../fonts/yekanbakhpro/woff/Yekan Bakh FaNum-ExtraBold.woff') format('woff'),
+ url('../fonts/yekanbakhpro/woff2/Yekan Bakh FaNum-ExtraBold.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: Yekan Bakh FaNum;
+ font-style: normal;
+ font-weight: 900;
+ src:
+ url('../fonts/yekanbakhpro/woff/Yekan Bakh FaNum-Black.woff') format('woff'),
+ url('../fonts/yekanbakhpro/woff2/Yekan Bakh FaNum-Black.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: Yekan Bakh FaNum;
+ font-style: normal;
+ font-weight: 950;
+ src:
+ url('../fonts/yekanbakhpro/woff/Yekan Bakh FaNum-ExtraBlack.woff') format('woff'),
+ url('../fonts/yekanbakhpro/woff2/Yekan Bakh FaNum-ExtraBlack.woff2') format('woff2');
+}
+:root {
+ --color-primary: #0274b3;
+ --color-title: #1a1a2e;
+ --color-text: #505068;
+ --color-body-text: #6a6a6a;
+ --bg-gray: #f9f9f9;
+ --color-pastel-main: #c5d7ec;
+
+ --blue-50: #eaf7ff;
+ --blue-100: #c5eaff;
+ --blue-150: #a1ddff;
+ --blue-200: #7cd0ff;
+ --blue-300: #57c3ff;
+ --blue-400: #32b6ff;
+ --blue-500: #1796dc;
+ --blue-600: #0274b3; /* همان primary */
+ --blue-700: #00598a;
+ --blue-800: #003f61;
+
+ /* Breakpoints */
+ /* --breakpoint-sm: 576px;
+ --breakpoint-md: 768px;
+ --breakpoint-lg: 992px;
+ --breakpoint-xl: 1200px;
+ --breakpoint-xxl: 1400px; */
+}
+* {
+ margin: 0;
+ padding: 0;
+ direction: rtl;
+ box-sizing: border-box;
+ font-family: 'Yekan Bakh FaNum', sans-serif;
+ font-weight: normal;
+}
+html {
+ scroll-behavior: smooth;
+ /* scrollbar-gutter: stable; */
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: bold;
+ line-height: 1.5;
+ color: var(--color-title);
+}
+h1 {
+ font-size: 36px;
+}
+h2 {
+ font-size: 24px;
+}
+h3 {
+ font-size: 22px;
+}
+h4 {
+ font-size: 20px;
+}
+h5 {
+ font-size: 15px;
+}
+p {
+ line-height: 1.75;
+ font-size: 15px;
+ color: var(--color-text);
+}
+a {
+ text-decoration: none;
+ line-height: 1.75;
+ color: var(--blue-500);
+}
+div,
+span,
+button,
+a,
+li {
+ line-height: inherit;
+}
+i {
+ font-style: normal;
+}
+/* برای Chrome، Edge و Safari */
+
+@media (max-width: 767px) {
+ h1 {
+ font-size: 24px;
+ }
+ h2 {
+ font-size: 22px;
+ }
+ h3 {
+ font-size: 18px;
+ }
+ h4 {
+ font-size: 16px;
+ }
+ h5 {
+ font-size: 14px;
+ }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+ *::-webkit-scrollbar {
+ width: 10px;
+ }
+
+ *::-webkit-scrollbar-track {
+ background: #fff;
+ }
+
+ *::-webkit-scrollbar-thumb {
+ background-color: var(--color-primary);
+ border-radius: 10px;
+ border: 3px solid #fff;
+ }
+}
+
+/* برای Firefox */
+@-moz-document url-prefix() {
+ * {
+ scrollbar-width: thin;
+ scrollbar-color: var(--color-primary) #fff;
+ }
+}
+
+::selection {
+ background: var(--color-primary);
+ color: #fff;
+}
+
+/* Hide number arrows */
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+ -moz-appearance: textfield;
+}
+button {
+ border: none;
+ outline: none;
+ background: none;
+ cursor: pointer;
+}
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+ display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
diff --git a/src/img/Star 2.svg b/src/img/Star 2.svg
new file mode 100644
index 0000000..4862de4
--- /dev/null
+++ b/src/img/Star 2.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/img/chair.svg b/src/img/chair.svg
new file mode 100644
index 0000000..5787510
--- /dev/null
+++ b/src/img/chair.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/img/dot-pattrn.svg b/src/img/dot-pattrn.svg
new file mode 100644
index 0000000..646fcf1
--- /dev/null
+++ b/src/img/dot-pattrn.svg
@@ -0,0 +1,3876 @@
+
diff --git a/src/img/line-pattern.svg b/src/img/line-pattern.svg
new file mode 100644
index 0000000..6a71145
--- /dev/null
+++ b/src/img/line-pattern.svg
@@ -0,0 +1,62 @@
+
diff --git a/src/img/massage-send.svg b/src/img/massage-send.svg
new file mode 100644
index 0000000..675042a
--- /dev/null
+++ b/src/img/massage-send.svg
@@ -0,0 +1,17 @@
+
diff --git a/src/img/overlay.svg b/src/img/overlay.svg
new file mode 100644
index 0000000..0a3ceb1
--- /dev/null
+++ b/src/img/overlay.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/img/playicon.svg b/src/img/playicon.svg
new file mode 100644
index 0000000..a7f6729
--- /dev/null
+++ b/src/img/playicon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/img/puse-icon.svg b/src/img/puse-icon.svg
new file mode 100644
index 0000000..b44ad2f
--- /dev/null
+++ b/src/img/puse-icon.svg
@@ -0,0 +1,25 @@
+
diff --git a/src/templates/.gitkeep b/src/templates/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..96133ba
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '@': resolve(__dirname, 'src'), // @ → src/
+ '@core': resolve(__dirname, 'src/core'),
+ '@components': resolve(__dirname, 'src/components'),
+ },
+ },
+
+ build: {
+ rollupOptions: {
+ input: {
+ main: resolve(__dirname, 'index.html'),
+ portfolio: resolve(__dirname, 'portfolio.html'),
+ },
+ },
+ manifest: true,
+ cssCodeSplit: true,
+ },
+
+ server: {
+ open: true,
+ port: 5173,
+ },
+});