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 + + +
+
+ +
+ + + +
+
+
+ تلفن خود را بچرخانید + +
+
+ + + + + + +
+
+
+
+ logo-petboom +
+
+ +
+
+
+
+
+
+ +
+
+
+ petboom + + petboom +
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+
+
+
+ +
+ + + + + + +
+
+ imgpopup + +
+ +
+
+ +
+ +
+
+
+

طراحی وبسایت | گیمیفیکیشن

+
+ +

طراحی وبسایت اینوا | ترکیب خلاقیت با نوآوری

+ +
+
+ + کارفرما: علیرضا زندی +
+
+ + اردیبهشت ۱۴۰۴ +
+
+
+
+ +
+ + + + اسکرول کنید +
+
+ +
+
+ + +
+ درباره پروژه + +

درباره پروژه

+
+ +
+

+ ما در وبسایت اینوا تلاش کردیم که کشف ناشناخته‌ها را با خلاقیت و کیفیت گره بزنیم +

+

+ نمونه پروژه‌های ما در طراحی UI/UX، طراحی وب‌سایت و توسعه محصولات دیجیتال که با تمرکز + بر تجربه کاربری و عملکرد ساخته شده‌اند. +

+

+ نمونه پروژه‌های ما در طراحی UI/UX، طراحی وب‌سایت و توسعه محصولات دیجیتال که با تمرکز + بر تجربه کاربری و عملکرد ساخته شده‌اند. +

+
+
+
+ +
+
+ + + +
+
+ +
+
+
+

چالش‌های هوشمندانه، راهکارهای نوآورانه می‌خواهد

+

+ اینوا با ترکیب خلاقیت، داده‌ها و تکنولوژی راهکارهایی نوآورانه برای حل چالش‌های پروژه + ارائه می‌دهد. +

+
+ +
+ + + +
+ +
+
+

چالش‌های پروژه

+ +
    +
  • + + +

    بازار اشباع شده و وجود رقبای قدرتمند در این عرصه

    +
  • +
  • + + +

    + بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای + ازار اشباع شده و وجود رقبای قدرتمند در این عرصه +

    +
  • +
  • + + +

    + بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای + ازار اشباع شده و وجود رقبای قدرتمند در این عرصه +

    +
  • +
  • + + +

    بازار اشباع شده و وجود رقبای قدرتمند در این عرصه

    +
  • +
+
+ + + +
+

راهکارهای ما

+ +
    +
  • + +

    تمرکز بر نقاط قوت و بولد کردن آن‌ها در سراسر وب‌سایت

    +
  • +
  • + +

    + بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای + ازاریشیشسی +

    +
  • +
  • + +

    + بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای + ازاریشیشسی +

    +
  • +
  • + +

    تمرکز بر نقاط قوت و بولد کردن آن‌ها در سراسر وب‌سایت

    +
  • +
+
+
+ +
+
+
+
+
+ +
+
+
+

روند و فرایند شروع و پایان پروژه

+

+ در اینوا، کیفیت اتفاقی نیست؛ ما برای هر پروژه مسیری مهندسی‌شده و خلاقانه را طی + می‌کنیم. +

+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + +
+
+
+

دستاوردهای پروژه

+

اعداد و نتایج، داستان واقعی این پروژه را روایت می‌کنند.

+
+ +
+
+ 2300+ +

ثبت نام در هفته اول

+
+ +
+ 80% +

رضایت کامل کارفرما

+
+ +
+ 2300+ +

ثبت نام در هفته اول

+
+ +
+ 80% +

رضایت کامل کارفرماfsdfsdfsdfsdfsdfsdfs

+
+
+
+
+ +
+
+ +
+
+

پروژه بعدی می‌تونه برای شما باشه، اگر آماده‌اید وقتشه در موردش صحبت کنیم

+

ما از ایده‌های جدید همواره استقبال می‌کنیم.

+

+ با پرکردن فرم و ثبت درخواست، ما در کمتر از 24 ساعت باهاتون تماس می‌گیریم و آماده + شنیدن ایده‌ها و پروژه‌هاتون هستیم. +

+
+
+ درخواست جلسه +

درخواست‌جلسه

+
+
+ +
+
+
+ + + +
+ +
+ +
+
+ درخواست پروژه + + + + + + +
+
    +
  • درخواست پروژه
  • +
  • جلسه مشاوره
  • +
  • همکاری با اینوا
  • +
  • سایر موارد
  • +
+
+
+ +
+ + + +
+ +
+ + + +
+ +
+ + +
+ + +
+ +
+ +

درخواست شما با موفقیت ثبت شد

+

+ کارشناسان ما حداکثر تا ۲۴ ساعت آینده با شما تماس خواهند گرفت. جزئیات جلسه نیز از + طریق پیامک و ایمیل برای شما ارسال می‌شود. +

+ +
+
+
+
+ + +
+
+ + 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}

` : ''} + + +
+
+` + ); +}); + +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, + }, +});