feat: add main page

This commit is contained in:
Сюткина Дарья Александровна (4047910) 2023-12-29 01:14:28 +04:00
parent 3feb760b42
commit e0d790b3fa
63 changed files with 5794 additions and 277 deletions

View File

@ -10,7 +10,8 @@
},
"Main": {
"title": "Bbuddy - Main",
"description": "Bbuddy desc"
"description": "Bbuddy desc",
"news": "Professional Articles & Project News"
},
"Account": {
"menu": {

View File

@ -1,5 +1,6 @@
// @ts-check
const withNextIntl = require('next-intl/plugin')();
const path = require('path');
/** @type {import('next').NextConfig} */
const nextConfig = {
@ -9,6 +10,9 @@ const nextConfig = {
displayName: true,
namespace: 'bbuddy'
}
},
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
}
};

116
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.1",
"dependencies": {
"@ant-design/cssinjs": "^1.18.1",
"@ant-design/icons": "^5.2.6",
"antd": "^5.12.1",
"next": "14.0.3",
"next-intl": "^3.3.1",
@ -25,6 +26,7 @@
"eslint-config-molindo": "^7.0.0",
"eslint-config-next": "^14.0.3",
"postcss": "^8",
"sass": "^1.69.5",
"typescript": "^5"
}
},
@ -1471,8 +1473,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dev": true,
"peer": true,
"devOptional": true,
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
@ -1744,8 +1745,7 @@
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true,
"peer": true,
"devOptional": true,
"engines": {
"node": ">=8"
}
@ -1776,7 +1776,7 @@
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"devOptional": true,
"dependencies": {
"fill-range": "^7.0.1"
},
@ -1934,14 +1934,13 @@
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
"dev": true,
"devOptional": true,
"funding": [
{
"type": "individual",
"url": "https://paulmillr.com/funding/"
}
],
"peer": true,
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
@ -1962,8 +1961,7 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"peer": true,
"devOptional": true,
"dependencies": {
"is-glob": "^4.0.1"
},
@ -3253,7 +3251,7 @@
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"devOptional": true,
"dependencies": {
"to-regex-range": "^5.0.1"
},
@ -3335,7 +3333,6 @@
"os": [
"darwin"
],
"peer": true,
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
@ -3661,6 +3658,12 @@
"node": ">= 4"
}
},
"node_modules/immutable": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
"devOptional": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -3804,8 +3807,7 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"peer": true,
"devOptional": true,
"dependencies": {
"binary-extensions": "^2.0.0"
},
@ -3902,7 +3904,7 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true,
"devOptional": true,
"engines": {
"node": ">=0.10.0"
}
@ -3938,7 +3940,7 @@
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true,
"devOptional": true,
"dependencies": {
"is-extglob": "^2.1.1"
},
@ -3989,7 +3991,7 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"devOptional": true,
"engines": {
"node": ">=0.12.0"
}
@ -4611,8 +4613,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"peer": true,
"devOptional": true,
"engines": {
"node": ">=0.10.0"
}
@ -4960,7 +4961,7 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"devOptional": true,
"engines": {
"node": ">=8.6"
},
@ -5951,8 +5952,7 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"peer": true,
"devOptional": true,
"dependencies": {
"picomatch": "^2.2.1"
},
@ -6256,6 +6256,23 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/sass": {
"version": "1.69.5",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
"integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
"devOptional": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/scheduler": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@ -6789,7 +6806,7 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"devOptional": true,
"dependencies": {
"is-number": "^7.0.0"
},
@ -8219,8 +8236,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dev": true,
"peer": true,
"devOptional": true,
"requires": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
@ -8418,8 +8434,7 @@
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true,
"peer": true
"devOptional": true
},
"bplist-parser": {
"version": "0.2.0",
@ -8444,7 +8459,7 @@
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"devOptional": true,
"requires": {
"fill-range": "^7.0.1"
}
@ -8532,8 +8547,7 @@
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
"dev": true,
"peer": true,
"devOptional": true,
"requires": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
@ -8549,8 +8563,7 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"peer": true,
"devOptional": true,
"requires": {
"is-glob": "^4.0.1"
}
@ -9506,7 +9519,7 @@
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"devOptional": true,
"requires": {
"to-regex-range": "^5.0.1"
}
@ -9564,8 +9577,7 @@
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true,
"optional": true,
"peer": true
"optional": true
},
"function-bind": {
"version": "1.1.2",
@ -9786,6 +9798,12 @@
"integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
"dev": true
},
"immutable": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
"devOptional": true
},
"import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -9904,8 +9922,7 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"peer": true,
"devOptional": true,
"requires": {
"binary-extensions": "^2.0.0"
}
@ -9963,7 +9980,7 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true
"devOptional": true
},
"is-finalizationregistry": {
"version": "1.0.2",
@ -9987,7 +10004,7 @@
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true,
"devOptional": true,
"requires": {
"is-extglob": "^2.1.1"
}
@ -10017,7 +10034,7 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true
"devOptional": true
},
"is-number-object": {
"version": "1.0.7",
@ -10470,8 +10487,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"peer": true
"devOptional": true
},
"normalize-range": {
"version": "0.1.2",
@ -10716,7 +10732,7 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true
"devOptional": true
},
"pify": {
"version": "2.3.0",
@ -11369,8 +11385,7 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"peer": true,
"devOptional": true,
"requires": {
"picomatch": "^2.2.1"
}
@ -11573,6 +11588,17 @@
"is-regex": "^1.1.4"
}
},
"sass": {
"version": "1.69.5",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
"integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
"devOptional": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
}
},
"scheduler": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@ -11969,7 +11995,7 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"devOptional": true,
"requires": {
"is-number": "^7.0.0"
}

View File

@ -10,6 +10,7 @@
},
"dependencies": {
"@ant-design/cssinjs": "^1.18.1",
"@ant-design/icons": "^5.2.6",
"antd": "^5.12.1",
"next": "14.0.3",
"next-intl": "^3.3.1",
@ -26,6 +27,7 @@
"eslint-config-molindo": "^7.0.0",
"eslint-config-next": "^14.0.3",
"postcss": "^8",
"sass": "^1.69.5",
"typescript": "^5"
}
}

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4375 18.75L4.6875 12L11.4375 5.25M5.625 12H19.3125" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 232 B

View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3333 10.6666L18.6666 16L13.3333 21.3333" stroke="#2C7873" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 223 B

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.1297 9.00003V15.743C10.1375 16.2361 10.3388 16.7063 10.6903 17.0522C11.0417 17.3982 11.5151 17.5921 12.0082 17.5921C12.5013 17.5921 12.9747 17.3982 13.3261 17.0522C13.6776 16.7063 13.8789 16.2361 13.8867 15.743L13.8928 6.90472C13.8979 6.48328 13.8193 6.06502 13.6616 5.67418C13.5039 5.28334 13.2701 4.9277 12.9739 4.62787C12.6777 4.32804 12.3249 4.09 11.936 3.92753C11.5471 3.76506 11.1298 3.6814 10.7084 3.6814C10.2869 3.6814 9.86961 3.76506 9.48071 3.92753C9.09182 4.09 8.73904 4.32804 8.44283 4.62787C8.14661 4.9277 7.91286 5.28334 7.75512 5.67418C7.59738 6.06502 7.51879 6.48328 7.52391 6.90472V15.8025C7.51532 16.3958 7.62477 16.985 7.84588 17.5356C8.067 18.0863 8.39537 18.5875 8.81191 19.0101C9.22845 19.4327 9.72484 19.7683 10.2722 19.9973C10.8196 20.2264 11.4071 20.3443 12.0005 20.3443C12.5939 20.3443 13.1813 20.2264 13.7287 19.9973C14.2761 19.7683 14.7725 19.4327 15.189 19.0101C15.6056 18.5875 15.9339 18.0863 16.1551 17.5356C16.3762 16.985 16.4856 16.3958 16.477 15.8025V7.48784" stroke="#2C7873" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

3
public/images/attach.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.1287 9.00003V15.743C10.1365 16.2361 10.3378 16.7063 10.6893 17.0523C11.0407 17.3982 11.5141 17.5921 12.0072 17.5921C12.5004 17.5921 12.9737 17.3982 13.3252 17.0523C13.6766 16.7063 13.878 16.2361 13.8857 15.743L13.8918 6.90472C13.8969 6.48328 13.8184 6.06502 13.6606 5.67418C13.5029 5.28334 13.2691 4.9277 12.9729 4.62787C12.6767 4.32804 12.3239 4.09 11.935 3.92753C11.5461 3.76506 11.1289 3.6814 10.7074 3.6814C10.2859 3.6814 9.86863 3.76506 9.47974 3.92753C9.09084 4.09 8.73806 4.32804 8.44185 4.62787C8.14564 4.9277 7.91189 5.28334 7.75415 5.67418C7.59641 6.06502 7.51782 6.48328 7.52293 6.90472V15.8025C7.51434 16.3959 7.62379 16.985 7.8449 17.5356C8.06602 18.0863 8.39439 18.5875 8.81093 19.0101C9.22747 19.4327 9.72386 19.7683 10.2713 19.9973C10.8186 20.2264 11.4061 20.3443 11.9995 20.3443C12.5929 20.3443 13.1803 20.2264 13.7277 19.9973C14.2751 19.7683 14.7715 19.4327 15.1881 19.0101C15.6046 18.5875 15.933 18.0863 16.1541 17.5356C16.3752 16.985 16.4846 16.3959 16.4761 15.8025V7.48785" stroke="#6FB98F" stroke-miterlimit="10" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/images/author.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V19.5C2.25 20.7426 3.25736 21.75 4.5 21.75H19.5C20.7426 21.75 21.75 20.7426 21.75 19.5V6C21.75 4.75736 20.7426 3.75 19.5 3.75Z" stroke="#2C7873" stroke-width="2" stroke-linejoin="round"/>
<path d="M21.75 7.5H2.25M6 2.25V3.75V2.25ZM18 2.25V3.75V2.25Z" stroke="#2C7873" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 493 B

View File

@ -0,0 +1,14 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V19.5C2.25 20.7426 3.25736 21.75 4.5 21.75H19.5C20.7426 21.75 21.75 20.7426 21.75 19.5V6C21.75 4.75736 20.7426 3.75 19.5 3.75Z" stroke="#003B46" stroke-linejoin="round"/>
<path d="M13.875 12C14.4963 12 15 11.4963 15 10.875C15 10.2537 14.4963 9.75 13.875 9.75C13.2537 9.75 12.75 10.2537 12.75 10.875C12.75 11.4963 13.2537 12 13.875 12Z" fill="#003B46"/>
<path d="M17.625 12C18.2463 12 18.75 11.4963 18.75 10.875C18.75 10.2537 18.2463 9.75 17.625 9.75C17.0037 9.75 16.5 10.2537 16.5 10.875C16.5 11.4963 17.0037 12 17.625 12Z" fill="#003B46"/>
<path d="M13.875 15.75C14.4963 15.75 15 15.2463 15 14.625C15 14.0037 14.4963 13.5 13.875 13.5C13.2537 13.5 12.75 14.0037 12.75 14.625C12.75 15.2463 13.2537 15.75 13.875 15.75Z" fill="#003B46"/>
<path d="M17.625 15.75C18.2463 15.75 18.75 15.2463 18.75 14.625C18.75 14.0037 18.2463 13.5 17.625 13.5C17.0037 13.5 16.5 14.0037 16.5 14.625C16.5 15.2463 17.0037 15.75 17.625 15.75Z" fill="#003B46"/>
<path d="M6.375 15.75C6.99632 15.75 7.5 15.2463 7.5 14.625C7.5 14.0037 6.99632 13.5 6.375 13.5C5.75368 13.5 5.25 14.0037 5.25 14.625C5.25 15.2463 5.75368 15.75 6.375 15.75Z" fill="#003B46"/>
<path d="M10.125 15.75C10.7463 15.75 11.25 15.2463 11.25 14.625C11.25 14.0037 10.7463 13.5 10.125 13.5C9.50368 13.5 9 14.0037 9 14.625C9 15.2463 9.50368 15.75 10.125 15.75Z" fill="#003B46"/>
<path d="M6.375 19.5C6.99632 19.5 7.5 18.9963 7.5 18.375C7.5 17.7537 6.99632 17.25 6.375 17.25C5.75368 17.25 5.25 17.7537 5.25 18.375C5.25 18.9963 5.75368 19.5 6.375 19.5Z" fill="#003B46"/>
<path d="M10.125 19.5C10.7463 19.5 11.25 18.9963 11.25 18.375C11.25 17.7537 10.7463 17.25 10.125 17.25C9.50368 17.25 9 17.7537 9 18.375C9 18.9963 9.50368 19.5 10.125 19.5Z" fill="#003B46"/>
<path d="M13.875 19.5C14.4963 19.5 15 18.9963 15 18.375C15 17.7537 14.4963 17.25 13.875 17.25C13.2537 17.25 12.75 17.7537 12.75 18.375C12.75 18.9963 13.2537 19.5 13.875 19.5Z" fill="#003B46"/>
<path d="M6 2.25V3.75M18 2.25V3.75" stroke="#003B46" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.75 7.5H2.25" stroke="#003B46" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

5
public/images/camera.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.9088 4.2925L18.245 1.66375C17.8944 1.255 17.4137 1 16.875 1H11.125C10.5863 1 10.1056 1.255 9.755 1.66375L8.09125 4.2925C7.74063 4.70187 7.28875 5 6.75 5H3C2.46957 5 1.96086 5.21071 1.58579 5.58579C1.21071 5.96086 1 6.46957 1 7V19C1 19.5304 1.21071 20.0391 1.58579 20.4142C1.96086 20.7893 2.46957 21 3 21H25C25.5304 21 26.0391 20.7893 26.4142 20.4142C26.7893 20.0391 27 19.5304 27 19V7C27 6.46957 26.7893 5.96086 26.4142 5.58579C26.0391 5.21071 25.5304 5 25 5H21.3125C20.7719 5 20.2594 4.70187 19.9088 4.2925Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 17C16.7614 17 19 14.7614 19 12C19 9.23858 16.7614 7 14 7C11.2386 7 9 9.23858 9 12C9 14.7614 11.2386 17 14 17Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M5.75 4.875V3.5H4.25V4.875" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1006 B

3
public/images/close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5909 12L18.0441 7.54687C18.2554 7.3359 18.3743 7.04962 18.3745 6.75099C18.3748 6.45237 18.2564 6.16587 18.0455 5.95453C17.8345 5.74319 17.5482 5.62431 17.2496 5.62404C16.951 5.62378 16.6645 5.74215 16.4531 5.95312L12 10.4062L7.54687 5.95312C7.33553 5.74178 7.04888 5.62305 6.75 5.62305C6.45111 5.62305 6.16447 5.74178 5.95312 5.95312C5.74178 6.16447 5.62305 6.45111 5.62305 6.75C5.62305 7.04888 5.74178 7.33553 5.95312 7.54687L10.4062 12L5.95312 16.4531C5.74178 16.6645 5.62305 16.9511 5.62305 17.25C5.62305 17.5489 5.74178 17.8355 5.95312 18.0469C6.16447 18.2582 6.45111 18.3769 6.75 18.3769C7.04888 18.3769 7.33553 18.2582 7.54687 18.0469L12 13.5937L16.4531 18.0469C16.6645 18.2582 16.9511 18.3769 17.25 18.3769C17.5489 18.3769 17.8355 18.2582 18.0469 18.0469C18.2582 17.8355 18.3769 17.5489 18.3769 17.25C18.3769 16.9511 18.2582 16.6645 18.0469 16.4531L13.5909 12Z" fill="#D93E5C"/>
</svg>

After

Width:  |  Height:  |  Size: 1002 B

View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.25 21C20.1515 21.0001 20.0539 20.9808 19.9629 20.9431C19.8719 20.9053 19.7893 20.85 19.7198 20.7801L3.2198 4.28013C3.08509 4.13833 3.0111 3.94952 3.0136 3.75395C3.0161 3.55838 3.09491 3.37152 3.23321 3.23322C3.37151 3.09492 3.55837 3.01612 3.75394 3.01361C3.94951 3.01111 4.13832 3.0851 4.28012 3.21982L20.7801 19.7198C20.8849 19.8247 20.9563 19.9583 20.9852 20.1038C21.0141 20.2492 20.9993 20.4 20.9426 20.537C20.8858 20.674 20.7897 20.7911 20.6665 20.8735C20.5432 20.9559 20.3983 20.9999 20.25 21ZM11.984 18C10.0392 18 8.16371 17.4244 6.40965 16.289C4.81262 15.2578 3.37496 13.7808 2.25183 12.0234V12.0197C3.18652 10.6804 4.21027 9.54795 5.30996 8.63482C5.31991 8.6265 5.32802 8.61621 5.33379 8.6046C5.33956 8.59299 5.34286 8.58031 5.34347 8.56735C5.34409 8.5544 5.34201 8.54146 5.33738 8.52935C5.33274 8.51725 5.32564 8.50623 5.31652 8.49701L4.38277 7.56466C4.36618 7.54793 4.3439 7.53807 4.32036 7.53702C4.29682 7.53598 4.27375 7.54384 4.25574 7.55904C3.08762 8.54341 2.0034 9.75091 1.01761 11.1647C0.848014 11.4081 0.754608 11.6964 0.749266 11.9931C0.743924 12.2897 0.826888 12.5812 0.987615 12.8306C2.22558 14.768 3.81887 16.3997 5.59449 17.5486C7.59371 18.8437 9.74528 19.5 11.984 19.5C13.1924 19.4962 14.3923 19.2971 15.5372 18.9103C15.5523 18.9052 15.5658 18.8963 15.5765 18.8845C15.5872 18.8726 15.5947 18.8583 15.5984 18.8428C15.602 18.8272 15.6016 18.811 15.5972 18.7957C15.5928 18.7804 15.5845 18.7664 15.5733 18.7551L14.5617 17.7436C14.5384 17.7209 14.5096 17.7046 14.4781 17.6964C14.4466 17.6882 14.4136 17.6883 14.3822 17.6967C13.5988 17.8984 12.793 18.0003 11.984 18ZM23.0081 11.1844C21.7678 9.26623 20.1586 7.63685 18.3548 6.47201C16.3593 5.18201 14.1562 4.49997 11.984 4.49997C10.7884 4.50209 9.60169 4.7054 8.47356 5.10138C8.45853 5.10661 8.44507 5.11558 8.43447 5.12745C8.42386 5.13931 8.41645 5.15368 8.41294 5.16921C8.40942 5.18473 8.40991 5.20089 8.41437 5.21617C8.41882 5.23145 8.42709 5.24534 8.4384 5.25654L9.44856 6.26669C9.47207 6.28981 9.50127 6.30632 9.5332 6.31455C9.56514 6.32278 9.59867 6.32244 9.63043 6.31357C10.3978 6.106 11.1891 6.00055 11.984 5.99997C13.8914 5.99997 15.7612 6.58263 17.5411 7.73435C19.1681 8.78435 20.6226 10.26 21.7486 12C21.7494 12.001 21.7499 12.0024 21.7499 12.0037C21.7499 12.0051 21.7494 12.0064 21.7486 12.0075C20.9313 13.2942 19.917 14.4446 18.7429 15.4167C18.7329 15.425 18.7247 15.4353 18.7188 15.4469C18.713 15.4586 18.7096 15.4713 18.7089 15.4843C18.7083 15.4973 18.7103 15.5103 18.715 15.5225C18.7196 15.5347 18.7267 15.5457 18.7359 15.555L19.6687 16.4873C19.6852 16.504 19.7074 16.5139 19.7308 16.515C19.7542 16.5161 19.7773 16.5084 19.7953 16.4934C21.0487 15.438 22.1337 14.1975 23.0128 12.8147C23.1682 12.571 23.2503 12.2878 23.2495 11.9988C23.2487 11.7098 23.1649 11.4271 23.0081 11.1844Z" fill="#2C7873"/>
<path d="M12 7.5C11.6629 7.49982 11.3269 7.53756 10.9983 7.6125C10.9817 7.61595 10.9663 7.62383 10.9538 7.63531C10.9414 7.64679 10.9322 7.66144 10.9274 7.6777C10.9226 7.69395 10.9223 7.71121 10.9265 7.72763C10.9307 7.74405 10.9393 7.75901 10.9514 7.77094L16.229 13.0472C16.241 13.0592 16.2559 13.0678 16.2723 13.0721C16.2888 13.0763 16.306 13.076 16.3223 13.0712C16.3385 13.0663 16.3532 13.0572 16.3647 13.0447C16.3761 13.0323 16.384 13.0169 16.3875 13.0003C16.5377 12.3413 16.5376 11.6568 16.3871 10.9979C16.2365 10.3389 15.9395 9.72228 15.5179 9.19385C15.0964 8.66542 14.5613 8.23874 13.9522 7.9455C13.3432 7.65226 12.6759 7.49999 12 7.5ZM7.77091 10.9528C7.75899 10.9408 7.74402 10.9322 7.7276 10.9279C7.71118 10.9237 7.69392 10.924 7.67767 10.9289C7.66141 10.9337 7.64676 10.9428 7.63528 10.9553C7.6238 10.9677 7.61592 10.9831 7.61247 10.9997C7.44248 11.7424 7.46382 12.516 7.67451 13.2482C7.88519 13.9803 8.27832 14.647 8.81704 15.1857C9.35577 15.7245 10.0224 16.1176 10.7546 16.3283C11.4868 16.539 12.2604 16.5603 13.0031 16.3903C13.0197 16.3869 13.035 16.379 13.0475 16.3675C13.06 16.356 13.0691 16.3414 13.0739 16.3251C13.0787 16.3089 13.0791 16.2916 13.0748 16.2752C13.0706 16.2588 13.062 16.2438 13.05 16.2319L7.77091 10.9528Z" fill="#2C7873"/>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.3">
<path d="M11.9841 5.25C8.33067 5.25 4.58301 7.36453 1.6327 11.5936C1.54849 11.7156 1.50234 11.8599 1.50009 12.0082C1.49783 12.1564 1.53958 12.302 1.62004 12.4266C3.88692 15.975 7.58442 18.75 11.9841 18.75C16.336 18.75 20.1094 15.9666 22.3805 12.4102C22.4591 12.2881 22.5009 12.1459 22.5009 12.0007C22.5009 11.8555 22.4591 11.7134 22.3805 11.5912C20.1043 8.07562 16.3032 5.25 11.9841 5.25Z" stroke="#2C7873" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="#2C7873" stroke-width="2" stroke-miterlimit="10"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 821 B

View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.0577 5C18.0002 5 16.0002 9 16.0002 9C16.0002 9 14.0002 5 9.94265 5C6.64515 5 4.0339 7.75875 4.00015 11.0506C3.9314 17.8837 9.42078 22.7431 15.4377 26.8269C15.6035 26.9397 15.7995 27.0001 16.0002 27.0001C16.2008 27.0001 16.3968 26.9397 16.5627 26.8269C22.5789 22.7431 28.0683 17.8837 28.0002 11.0506C27.9664 7.75875 25.3552 5 22.0577 5Z" stroke="#D93E5C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 536 B

BIN
public/images/info.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 21H15M18 9.75V11.25C18 14.55 15.3 17.25 12 17.25C8.7 17.25 6 14.55 6 11.25V9.75M12 17.25V21" stroke="#6FB98F" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 3.00004C11.6055 2.99805 11.2145 3.07429 10.8496 3.22435C10.4848 3.37441 10.1533 3.59531 9.87429 3.87429C9.59531 4.15326 9.37441 4.48477 9.22435 4.84964C9.07429 5.21451 8.99805 5.60552 9.00004 6.00004V11.2032C9.00004 12.8532 10.3594 14.25 12 14.25C13.6407 14.25 15 12.8907 15 11.2032V6.00004C15 4.31254 13.6875 3.00004 12 3.00004Z" stroke="#6FB98F" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 684 B

BIN
public/images/news-top.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

BIN
public/images/news.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

BIN
public/images/news1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 730 KiB

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.5622 2.43744L10.6403 13.3593M2.4897 9.37213L21.2397 2.27572C21.3073 2.24985 21.381 2.24412 21.4519 2.25922C21.5227 2.27432 21.5876 2.3096 21.6388 2.36081C21.69 2.41202 21.7253 2.47696 21.7404 2.54779C21.7555 2.61861 21.7498 2.6923 21.7239 2.75994L14.6275 21.5099C14.5993 21.5811 14.5499 21.642 14.4861 21.6843C14.4222 21.7266 14.347 21.7484 14.2704 21.7467C14.1938 21.7449 14.1196 21.7198 14.0578 21.6746C13.9959 21.6294 13.9494 21.5664 13.9244 21.494L10.765 13.7085C10.7282 13.5982 10.6662 13.498 10.5839 13.4157C10.5017 13.3335 10.4014 13.2715 10.2911 13.2346L2.50563 10.0781C2.43229 10.0537 2.36828 10.0072 2.32236 9.94501C2.27645 9.88283 2.25086 9.80798 2.24912 9.73071C2.24737 9.65343 2.26955 9.5775 2.31262 9.51332C2.35568 9.44913 2.41753 9.39982 2.4897 9.37213V9.37213Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 958 B

BIN
public/images/sertific.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.0001 21C23.4613 20.9998 22.9281 21.1088 22.4327 21.3205C21.9373 21.5321 21.4899 21.8419 21.1176 22.2313L11.8676 17.0269C12.0467 16.3541 12.0467 15.646 11.8676 14.9732L21.1176 9.7688C21.7911 10.4671 22.6962 10.8959 23.6632 10.9748C24.6303 11.0538 25.5929 10.7774 26.3708 10.1975C27.1487 9.61762 27.6884 8.77401 27.889 7.82471C28.0895 6.87542 27.937 5.88557 27.4602 5.04062C26.9833 4.19567 26.2146 3.55358 25.2983 3.23465C24.382 2.91571 23.3808 2.94182 22.4823 3.30808C21.5839 3.67433 20.8498 4.3556 20.4176 5.22426C19.9854 6.09292 19.8847 7.08937 20.1344 8.02692L10.8844 13.2313C10.3319 12.6552 9.61963 12.2576 8.83927 12.0896C8.0589 11.9216 7.24612 11.991 6.50549 12.2887C5.76487 12.5865 5.13026 13.099 4.68333 13.7604C4.23639 14.4218 3.99756 15.2018 3.99756 16C3.99756 16.7983 4.23639 17.5783 4.68333 18.2397C5.13026 18.9011 5.76487 19.4136 6.50549 19.7113C7.24612 20.0091 8.0589 20.0785 8.83927 19.9105C9.61963 19.7425 10.3319 19.3449 10.8844 18.7688L20.1344 23.9732C19.92 24.7806 19.9637 25.6349 20.2595 26.4162C20.5552 27.1975 21.0882 27.8666 21.7836 28.3296C22.479 28.7926 23.3019 29.0262 24.1368 28.9977C24.9717 28.9692 25.7768 28.68 26.439 28.1707C27.1012 27.6614 27.5873 26.9575 27.8291 26.1579C28.071 25.3582 28.0563 24.5029 27.7873 23.712C27.5183 22.9211 27.0084 22.2342 26.3292 21.7479C25.6499 21.2615 24.8355 21 24.0001 21Z" fill="#2C7873"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

7
public/images/stars.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="168" height="32" viewBox="0 0 168 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3503 2.40717C15.1447 1.24803 16.8553 1.24803 17.6497 2.40717L21.2407 7.64679C21.5007 8.02625 21.8837 8.30446 22.3249 8.43453L28.4177 10.2306C29.7656 10.6279 30.2943 12.2549 29.4373 13.3686L25.5638 18.4029C25.2833 18.7675 25.137 19.2176 25.1497 19.6775L25.3243 26.0271C25.363 27.4318 23.979 28.4373 22.655 27.9665L16.6701 25.8383C16.2367 25.6842 15.7633 25.6842 15.3299 25.8383L9.34501 27.9665C8.02099 28.4373 6.63703 27.4318 6.67567 26.0271L6.8503 19.6775C6.86295 19.2176 6.71669 18.7675 6.43616 18.4029L2.56266 13.3686C1.70573 12.2549 2.23435 10.6279 3.58225 10.2306L9.67508 8.43453C10.1163 8.30446 10.4993 8.02625 10.7593 7.64679L14.3503 2.40717Z" fill="#FFBD00"/>
<path d="M48.3503 2.40717C49.1447 1.24803 50.8553 1.24803 51.6497 2.40717L55.2407 7.64679C55.5007 8.02625 55.8837 8.30446 56.3249 8.43453L62.4177 10.2306C63.7656 10.6279 64.2943 12.2549 63.4373 13.3686L59.5638 18.4029C59.2833 18.7675 59.137 19.2176 59.1497 19.6775L59.3243 26.0271C59.363 27.4318 57.979 28.4373 56.655 27.9665L50.6701 25.8383C50.2367 25.6842 49.7633 25.6842 49.3299 25.8383L43.345 27.9665C42.021 28.4373 40.637 27.4318 40.6757 26.0271L40.8503 19.6775C40.863 19.2176 40.7167 18.7675 40.4362 18.4029L36.5627 13.3686C35.7057 12.2549 36.2344 10.6279 37.5823 10.2306L43.6751 8.43453C44.1163 8.30446 44.4993 8.02625 44.7593 7.64679L48.3503 2.40717Z" fill="#FFBD00"/>
<path d="M82.3503 2.40717C83.1447 1.24803 84.8553 1.24803 85.6497 2.40717L89.2407 7.64679C89.5007 8.02625 89.8837 8.30446 90.3249 8.43453L96.4177 10.2306C97.7656 10.6279 98.2943 12.2549 97.4373 13.3686L93.5638 18.4029C93.2833 18.7675 93.137 19.2176 93.1497 19.6775L93.3243 26.0271C93.363 27.4318 91.979 28.4373 90.655 27.9665L84.6701 25.8383C84.2367 25.6842 83.7633 25.6842 83.3299 25.8383L77.345 27.9665C76.021 28.4373 74.637 27.4318 74.6757 26.0271L74.8503 19.6775C74.863 19.2176 74.7167 18.7675 74.4362 18.4029L70.5627 13.3686C69.7057 12.2549 70.2344 10.6279 71.5823 10.2306L77.6751 8.43453C78.1163 8.30446 78.4993 8.02625 78.7593 7.64679L82.3503 2.40717Z" fill="#FFBD00"/>
<path d="M116.35 2.40717C117.145 1.24803 118.855 1.24803 119.65 2.40717L123.241 7.64679C123.501 8.02625 123.884 8.30446 124.325 8.43453L130.418 10.2306C131.766 10.6279 132.294 12.2549 131.437 13.3686L127.564 18.4029C127.283 18.7675 127.137 19.2176 127.15 19.6775L127.324 26.0271C127.363 27.4318 125.979 28.4373 124.655 27.9665L118.67 25.8383C118.237 25.6842 117.763 25.6842 117.33 25.8383L111.345 27.9665C110.021 28.4373 108.637 27.4318 108.676 26.0271L108.85 19.6775C108.863 19.2176 108.717 18.7675 108.436 18.4029L104.563 13.3686C103.706 12.2549 104.234 10.6279 105.582 10.2306L111.675 8.43453C112.116 8.30446 112.499 8.02625 112.759 7.64679L116.35 2.40717Z" fill="#FFBD00"/>
<path d="M150.35 2.40717C151.145 1.24803 152.855 1.24803 153.65 2.40717L157.241 7.64679C157.501 8.02625 157.884 8.30446 158.325 8.43453L164.418 10.2306C165.766 10.6279 166.294 12.2549 165.437 13.3686L161.564 18.4029C161.283 18.7675 161.137 19.2176 161.15 19.6775L161.324 26.0271C161.363 27.4318 159.979 28.4373 158.655 27.9665L152.67 25.8383C152.237 25.6842 151.763 25.6842 151.33 25.8383L145.345 27.9665C144.021 28.4373 142.637 27.4318 142.676 26.0271L142.85 19.6775C142.863 19.2176 142.717 18.7675 142.436 18.4029L138.563 13.3686C137.706 12.2549 138.234 10.6279 139.582 10.2306L145.675 8.43453C146.116 8.30446 146.499 8.02625 146.759 7.64679L150.35 2.40717Z" fill="#C4DFE6"/>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5683 14.474L21.4453 17.2031C21.5595 17.2539 21.6846 17.2753 21.8091 17.2654C21.9337 17.2556 22.0539 17.2148 22.1586 17.1467C22.2634 17.0786 22.3495 16.9854 22.4092 16.8756C22.4688 16.7657 22.5 16.6428 22.5 16.5178V7.48217C22.5 7.3572 22.4688 7.23422 22.4092 7.12439C22.3495 7.01456 22.2634 6.92137 22.1586 6.85328C22.0539 6.78519 21.9337 6.74437 21.8091 6.73451C21.6846 6.72466 21.5595 6.74609 21.4453 6.79686L17.5683 9.52592C17.47 9.59512 17.3897 9.68695 17.3343 9.79365C17.279 9.90036 17.25 10.0188 17.25 10.139V13.8609C17.25 13.9811 17.279 14.0996 17.3343 14.2063C17.3897 14.313 17.47 14.4048 17.5683 14.474Z" stroke="#003B46" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5625 18H3.9375C3.29161 17.9981 2.67269 17.7407 2.21598 17.284C1.75926 16.8273 1.50186 16.2084 1.5 15.5625V8.4375C1.50186 7.79161 1.75926 7.1727 2.21598 6.71598C2.67269 6.25926 3.29161 6.00186 3.9375 6H12.585C13.2249 6.00198 13.838 6.25705 14.2905 6.70952C14.743 7.16199 14.998 7.77511 15 8.415V15.5625C14.9981 16.2084 14.7407 16.8273 14.284 17.284C13.8273 17.7407 13.2084 17.9981 12.5625 18Z" stroke="#003B46" stroke-miterlimit="10"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

14
public/images/wave-2.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="1920" height="80" viewBox="0 0 1920 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H160V80C127 80 115.017 39.5 80 39.5C44.9827 39.5 34.9999 80 0 80V0Z" fill="#DFF5FB"/>
<path d="M320 0H480V80C447 80 435.017 39.5 400 39.5C364.983 39.5 355 80 320 80V0Z" fill="#DFF5FB"/>
<path d="M640 0H800V80C767 80 755.017 39.5 720 39.5C684.983 39.5 675 80 640 80V0Z" fill="#DFF5FB"/>
<path d="M960 0H1120V80C1087 80 1075.02 39.5 1040 39.5C1004.98 39.5 995 80 960 80V0Z" fill="#DFF5FB"/>
<path d="M1280 0H1440V80C1407 80 1395.02 39.5 1360 39.5C1324.98 39.5 1315 80 1280 80V0Z" fill="#DFF5FB"/>
<path d="M1600 0H1760V80C1727 80 1715.02 39.5 1680 39.5C1644.98 39.5 1635 80 1600 80V0Z" fill="#DFF5FB"/>
<path d="M160 0H320V80C287 80 275.017 39.5 240 39.5C204.983 39.5 195 80 160 80V0Z" fill="#DFF5FB"/>
<path d="M480 0H640V80C607 80 595.017 39.5 560 39.5C524.983 39.5 515 80 480 80V0Z" fill="#DFF5FB"/>
<path d="M800 0H960V80C927 80 915.017 39.5 880 39.5C844.983 39.5 835 80 800 80V0Z" fill="#DFF5FB"/>
<path d="M1120 0H1280V80C1247 80 1235.02 39.5 1200 39.5C1164.98 39.5 1155 80 1120 80V0Z" fill="#DFF5FB"/>
<path d="M1440 0H1600V80C1567 80 1555.02 39.5 1520 39.5C1484.98 39.5 1475 80 1440 80V0Z" fill="#DFF5FB"/>
<path d="M1760 0H1920V80C1887 80 1875.02 39.5 1840 39.5C1804.98 39.5 1795 80 1760 80V0Z" fill="#DFF5FB"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,14 @@
<svg width="1920" height="80" viewBox="0 0 1920 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1920 80L1760 80L1760 1.39876e-05C1793 1.11027e-05 1804.98 40.5 1840 40.5C1875.02 40.5 1885 3.05979e-06 1920 0L1920 80Z" fill="#DFF5FB"/>
<path d="M1600 80L1440 80L1440 4.19629e-05C1473 3.9078e-05 1484.98 40.5 1520 40.5C1555.02 40.5 1565 3.10351e-05 1600 2.79753e-05L1600 80Z" fill="#DFF5FB"/>
<path d="M1280 80.0001L1120 80.0001L1120 6.99382e-05C1153 6.70533e-05 1164.98 40.5001 1200 40.5001C1235.02 40.5001 1245 5.90104e-05 1280 5.59506e-05L1280 80.0001Z" fill="#DFF5FB"/>
<path d="M960 80.0001L800 80.0001L800 9.79135e-05C833 9.50286e-05 844.983 40.5001 880 40.5001C915.017 40.5001 925 8.69857e-05 960 8.39259e-05L960 80.0001Z" fill="#DFF5FB"/>
<path d="M640 80.0001L480 80.0001L480 0.000125889C513 0.000123004 524.983 40.5001 560 40.5001C595.017 40.5001 605 0.000114961 640 0.000111901L640 80.0001Z" fill="#DFF5FB"/>
<path d="M320 80.0001L160 80.0002L160 0.000153864C193 0.000150979 204.983 40.5001 240 40.5001C275.017 40.5001 285 0.000142936 320 0.000139876L320 80.0001Z" fill="#DFF5FB"/>
<path d="M1760 80L1600 80L1600 2.79753e-05C1633 2.50903e-05 1644.98 40.5 1680 40.5C1715.02 40.5 1725 1.70474e-05 1760 1.39876e-05L1760 80Z" fill="#DFF5FB"/>
<path d="M1440 80L1280 80.0001L1280 5.59506e-05C1313 5.30656e-05 1324.98 40.5001 1360 40.5C1395.02 40.5 1405 4.50227e-05 1440 4.19629e-05L1440 80Z" fill="#DFF5FB"/>
<path d="M1120 80.0001L960 80.0001L960 8.39259e-05C993 8.10409e-05 1004.98 40.5001 1040 40.5001C1075.02 40.5001 1085 7.2998e-05 1120 6.99382e-05L1120 80.0001Z" fill="#DFF5FB"/>
<path d="M800 80.0001L640 80.0001L640 0.000111901C673 0.000109016 684.983 40.5001 720 40.5001C755.017 40.5001 765 0.000100973 800 9.79135e-05L800 80.0001Z" fill="#DFF5FB"/>
<path d="M480 80.0001L320 80.0001L320 0.000139876C353 0.000136991 364.983 40.5001 400 40.5001C435.017 40.5001 445 0.000128949 480 0.000125889L480 80.0001Z" fill="#DFF5FB"/>
<path d="M160 80.0002L0 80.0002L-6.99382e-06 0.000167852C33 0.000164967 44.9827 40.5002 80 40.5002C115.017 40.5002 125 0.000156924 160 0.000153864L160 80.0002Z" fill="#DFF5FB"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,4 @@
<svg width="1920" height="188" viewBox="0 0 1920 188" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 187C469.5 35.9039 797.5 76.4933 1216 123.867C1421 147.072 1676.5 -27.2295 1920 3.6881V187H0Z" fill="#CAEAD8"/>
<path d="M0 94.8925C793 339.074 859.5 -108.288 1920 94.8925V187.291H0L0 94.8925Z" fill="#DFF5FB"/>
</svg>

After

Width:  |  Height:  |  Size: 331 B

View File

@ -4,7 +4,7 @@ export default function Directions() {
return (
<div className="main-popular">
<div className="b-inner">
<h2 className="title-h2">Popular Directions</h2>
<h2 className="title-h2">Popular Topics</h2>
<div className="main-popular__row">
<div className="main-popular__coll">
<div className="b-popular">

View File

@ -1,120 +1,92 @@
'use client';
import React from 'react';
import { Avatar, List, Typography, Tag } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import { Link } from '../../../../navigation';
import { ExpertsFilter, ExpertsAdditionalFilter } from '../../../../components/Experts';
const { Text } = Typography;
const data = Array.from({ length: 10 }).map((_, i) => ({
href: '/',
name: 'Matthew Weeks',
avatar: '/images/person.png',
duration: '45min',
price: '45$',
skills: ['Engineering & Data', 'Soft skills', 'Interview'],
speciality: 'Senior Software Engineer',
specialityDesc: 'Auth0',
description: 'I have worked across a variety of organizations, lead teams, and delivered quality software for 8 years. In that time I\'ve worked as an independent consultant, at agencies as a team lead, and as a senior engineer at Auth0. I also host a podcast https://anchor.fm/work-in-programming where I break down how …'
}));
export default function Experts() {
const expertsList = (
<List
itemLayout="vertical"
size="large"
pagination={{
className: 'pagination',
onChange: (page) => {
console.log(page);
},
pageSize: 5
}}
dataSource={data}
renderItem={(item) => (
<List.Item key={item.title}>
<List.Item.Meta
avatar={<Avatar src={item.avatar} />}
title={item.name}
description={(
<div className="card-profile__header__price">
{item.price} <span>/ {item.duration}</span>
</div>
)}
/>
<div className="card-profile__skills">
<div className="skills__list">
{item.skills.map((skill) => <Tag color="#f50">{skill}</Tag>)}
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">{item.speciality}</div>
<div className="card-profile__subtitle">{item.specialityDesc}</div>
<div className="card-profile__desc">{item.description}</div>
<div className="card-profile__footer">
<Link href={item.href}>
<Text
copyable={{
icon: <RightOutlined key="copy-icon" style={{ fontSize: '15px' }}/>,
onCopy: undefined,
tooltips: false
}}
>
Details
</Text>
</Link>
</div>
</List.Item>
)}
/>
);
return (
<div className="main-find">
<div className="b-inner">
<div className="main-find__top">
<h2 className="title-h2">Find a expert</h2>
<h2 className="title-h2">Find an expert</h2>
<div className="open-filter">
<img src="/images/options-outline.svg" className="" alt=""/>
</div>
</div>
<div className="row">
<div className="col-xl-3 col-lg-4 d-none d-lg-block">
<div className="b-filter">
<h3 className="title-h3">Coaching</h3>
<div className="b-filter__inner">
<div className="b-filter__item">
<div className="b-filter__title">Work-life Balance</div>
<label className="base-switcher">
<input className="base-switcher__input" type="checkbox" />
<span className="base-switcher__line" />
<span className="base-switcher__circle" />
</label>
</div>
<div className="b-filter__item">
<div className="b-filter__title">Strategic Session</div>
<label className="base-switcher">
<input className="base-switcher__input" type="checkbox" />
<span className="base-switcher__line" />
<span className="base-switcher__circle" />
</label>
</div>
<div className="b-filter__item">
<div className="b-filter__title">Personal Growth</div>
<label className="base-switcher">
<input className="base-switcher__input" type="checkbox" />
<span className="base-switcher__line" />
<span className="base-switcher__circle" />
</label>
</div>
<div className="b-filter__item">
<div className="b-filter__title">Career Planning</div>
<label className="base-switcher">
<input className="base-switcher__input" type="checkbox" />
<span className="base-switcher__line" />
<span className="base-switcher__circle" />
</label>
</div>
<div className="b-filter__item">
<div className="b-filter__title">Executive Coaching</div>
<label className="base-switcher">
<input className="base-switcher__input" type="checkbox" />
<span className="base-switcher__line" />
<span className="base-switcher__circle" />
</label>
</div>
</div>
<h3 className="title-h3">Mentoring</h3>
<div className="b-filter__inner">
<div className="b-filter__item">
<div className="b-filter__title">Career Development</div>
<label className="base-switcher">
<input className="base-switcher__input" type="checkbox" />
<span className="base-switcher__line" />
<span className="base-switcher__circle" />
</label>
</div>
<div className="b-filter__item">
<div className="b-filter__title">Networking</div>
<label className="base-switcher">
<input className="base-switcher__input" type="checkbox" />
<span className="base-switcher__line" />
<span className="base-switcher__circle" />
</label>
</div>
</div>
<h3 className="title-h3">Business-consultation</h3>
<div className="b-filter__inner">
<div className="b-filter__item">
<div className="b-filter__title">Business Model Review</div>
<label className="base-switcher">
<input className="base-switcher__input" type="checkbox" />
<span className="base-switcher__line" />
<span className="base-switcher__circle" />
</label>
</div>
</div>
<h3 className="title-h3">Price from 45$ to 170$</h3>
<div className="b-filter__range">
<div />
</div>
<h3 className="title-h3">Duration from 45m to 120m</h3>
<div className="b-filter__range">
<div />
</div>
<button className="btn-apply">Apply</button>
</div>
<ExpertsFilter />
</div>
<div className="col-xl-9 col-lg-8 ">
<div className="main-find__search">
<div className="main-find__search__input">
<input className="base-input" type="text" placeholder="Search expert by name or anothe text" />
</div>
<div className="main-find__search__sort">
<select name="" id="" aria-label="By top views">
<option selected>By top views</option>
</select>
</div>
<div className="main-find__search__language">
<select name="" id="" aria-label="All">
<option selected>All</option>
<option value="1">Fr</option>
</select>
</div>
<button className="btn-apply">Find</button>
</div>
<ExpertsAdditionalFilter />
<div className="search-result">
<div className="card-profile">
<div className="card-profile__header">
@ -149,106 +121,7 @@ export default function Experts() {
</a>
</div>
</div>
<div className="card-profile">
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">Matthew Weeks</div>
<div className="card-profile__header__price">
45$ <span>/ 45min</span>
</div>
</div>
</div>
<div className="card-profile__skills">
<div className="skills__list">
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">Senior Software Engineer</div>
<div className="card-profile__subtitle">Auth0</div>
<div className="card-profile__desc">
I have worked across a variety of organizations, lead teams, and delivered quality
software for 8 years. In that time I've worked as an independent consultant, at
agencies as a team lead, and as a senior engineer at Auth0. I also host a podcast
https://anchor.fm/work-in-programming where I break down how …
</div>
<div className="card-profile__footer">
<a href="#">Details
<img className="" src="/images/chevron-forward.svg" alt="" />
</a>
</div>
</div>
<div className="card-profile">
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">Matthew Weeks</div>
<div className="card-profile__header__price">
45$ <span>/ 45min</span>
</div>
</div>
</div>
<div className="card-profile__skills">
<div className="skills__list">
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">Senior Software Engineer</div>
<div className="card-profile__subtitle">Auth0</div>
<div className="card-profile__desc">
I have worked across a variety of organizations, lead teams, and delivered quality
software for 8 years. In that time I've worked as an independent consultant, at
agencies as a team lead, and as a senior engineer at Auth0. I also host a podcast
https://anchor.fm/work-in-programming where I break down how …
</div>
<div className="card-profile__footer">
<a href="#">Details
<img className="" src="/images/chevron-forward.svg" alt="" />
</a>
</div>
</div>
<div className="card-profile">
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">Matthew Weeks</div>
<div className="card-profile__header__price">
45$ <span>/ 45min</span>
</div>
</div>
</div>
<div className="card-profile__skills">
<div className="skills__list">
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">Senior Software Engineer</div>
<div className="card-profile__subtitle">Auth0</div>
<div className="card-profile__desc">
I have worked across a variety of organizations, lead teams, and delivered quality
software for 8 years. In that time I've worked as an independent consultant, at
agencies as a team lead, and as a senior engineer at Auth0. I also host a podcast
https://anchor.fm/work-in-programming where I break down how …
</div>
<div className="card-profile__footer">
<a href="#">Details
<img className="" src="/images/chevron-forward.svg" alt="" />
</a>
</div>
</div>
{expertsList}
</div>
<ul className="pagination">
<li className="page-item"><a className="page-link" href="#">1</a></li>

View File

@ -4,7 +4,7 @@ export default function News() {
return (
<div className="main-articles">
<div className="b-inner">
<h2 className="title-h2">Articles form Experts & News of Project</h2>
<h2 className="title-h2">Professional Articles & Project News</h2>
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-6">
<div className="b-article">
@ -24,7 +24,7 @@ export default function News() {
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 d-none d-sm-block">
<div className="col-lg-4 d-none d-lg-block">
<div className="b-article">
<div className="b-article__image">
<img className="" src="/images/article.png" alt=""/>

View File

@ -1,8 +0,0 @@
html, body {
height: 100%;
}
body {
font-family: var(--font-comfortaa), -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: #ffffff;
}

View File

@ -4,9 +4,11 @@ import type { Metadata } from 'next';
import { Comfortaa, Inter } from 'next/font/google';
import { notFound } from 'next/navigation';
import { ConfigProvider } from 'antd';
import StyledRegistry from '../../lib/StyleRegistry';
import StyledComponentsRegistry from '../../lib/AntdRegistry';
import { ALLOWED_LOCALES } from '../../constants/locale';
import './global.css'
import theme from '../../constants/theme';
import '../../styles/style.scss';
type RootLayoutProps = {
children: ReactNode;
@ -43,11 +45,13 @@ export default function RootLayout({ children, params: { locale } }: RootLayoutP
return (
<html lang={locale} className={`${comfortaa.variable} ${inter.variable}`}>
<body>
<StyledComponentsRegistry>
<ConfigProvider theme={{ cssVar: true, hashed: false }}>
{children}
</ConfigProvider>
</StyledComponentsRegistry>
<StyledRegistry>
<StyledComponentsRegistry>
<ConfigProvider theme={theme}>
{children}
</ConfigProvider>
</StyledComponentsRegistry>
</StyledRegistry>
</body>
</html>
);

View File

@ -0,0 +1,45 @@
'use client';
import React, { useCallback, useState } from 'react';
import { Input, Select } from 'antd';
import { AdditionalFilter } from '../../types/experts';
import { INITIAL_ADD_FILTER } from '../../constants/experts';
import { LOCALES } from '../../constants/locale';
export const ExpertsAdditionalFilter = () => {
const [filter, setFilter] = useState<AdditionalFilter>(INITIAL_ADD_FILTER);
const onChangeFilter = useCallback((key: string, value: any) => {
setFilter({
...filter,
[key]: value
})
}, [filter]);
return (
<div className="main-find__search">
<div className="main-find__search__input">
<input className="base-input" type="text" placeholder="Search for an Expert" />
</div>
<Input placeholder="Search for an Expert" onChange={(e) => onChangeFilter('text', e?.target?.value)}/>
<div className="main-find__search__sort">
<Select
defaultValue={INITIAL_ADD_FILTER.sort}
onChange={(val) => onChangeFilter('sort', val)}
options={[
{ value: 'By top views', label: 'By top views' }
]}
/>
</div>
<div className="main-find__search__language">
<Select
mode="multiple"
defaultValue={INITIAL_ADD_FILTER.language}
onChange={(val) => onChangeFilter('language', val)}
options={Object.entries(LOCALES).map(([ value, label ]) => ({ value, label }))}
/>
</div>
<button className="btn-apply">Find</button>
</div>
);
};

View File

@ -0,0 +1,183 @@
'use client';
import React, { useCallback, useState } from 'react';
import { List, Switch, Slider } from 'antd';
import styled from 'styled-components';
import { FilterType, INITIAL_FILTER } from '../../constants/experts';
import { Filter } from '../../types/experts';
const CustomSwitch = styled(Switch)`
height: 24px !important;
background: #F8F8F7 !important;
.ant-switch-handle {
height: 24px !important;
width: 24px !important;
top: 0 !important;
&::before {
box-shadow: none !important;
background: #C4DFE6 !important;
border-radius: 50% !important;
}
}
&.ant-switch-checked {
background: #2c7873 !important;
}
`;
const WrapSlider = styled.div`
width: 100%;
position: relative;
margin: 8px 0 16px -5px;
`;
const CustomSlider = styled(Slider)`
padding-block: 7px !important;
height: 16px !important;
.ant-slider-rail {
background-color: #E5E5E5 !important;
}
.ant-slider-track {
background-color: #66A5AD !important;
}
.ant-slider-handle {
width: 16px !important;
height: 16px !important;
&::before {
width: 16px !important;
height: 16px !important;
inset-inline-start: 0 !important;
inset-block-start: 0 !important;
}
&::after {
width: 16px !important;
height: 16px !important;
background-color: #66A5AD !important;
inset-inline-start: 0 !important;
inset-block-start: 0 !important;
box-shadow: none !important;
}
&:focus, &:hover {
&::after {
box-shadow: 0 0 0 10px rgba(102, 165, 173, .2) !important;
}
}
}
`;
const dataCoaching = [
{
key: FilterType.WorkLifeBalance,
title: 'Work-life Balance'
},
{
key: FilterType.StrategicSession,
title: 'Strategic Session'
},
{
key: FilterType.PersonalGrowth,
title: 'Personal Growth'
},
{
key: FilterType.PersonalGrowth,
title: 'Career Planning'
},
{
key: FilterType.ExecutiveCoaching,
title: 'Executive Coaching'
}
];
const dataMentoring = [
{
key: FilterType.CareerDevelopment,
title: 'Career Development'
},
{
key: FilterType.Networking,
title: 'Networking'
}
];
const dataConsultation = [
{
key: FilterType.BusinessModelReview,
title: 'Business Model Review'
}
];
export const ExpertsFilter = () => {
const [filter, setFilter] = useState<Filter>(INITIAL_FILTER);
const onChangeFilter = useCallback((key: string, value: any) => {
setFilter({
...filter,
[key]: value
})
}, [filter]);
const getList = useCallback((data) => (
<div className="b-filter__inner">
<List
itemLayout="vertical"
size="small"
dataSource={data}
split={false}
style={{ width: '100%' }}
renderItem={({ key, title }) => (
<List.Item key={key} style={{ padding: 0 }}>
<div className="b-filter__item">
<div className="b-filter__title">{title}</div>
<CustomSwitch
defaultChecked={filter[key]}
onChange={(checked) => onChangeFilter(key, checked)}
/>
</div>
</List.Item>
)}
/>
</div>
), [filter]);
return (
<div className="b-filter">
<h3 className="title-h3">Coaching</h3>
{getList(dataCoaching)}
<h3 className="title-h3">Mentoring</h3>
{getList(dataMentoring)}
<h3 className="title-h3">Business-consultation</h3>
{getList(dataConsultation)}
<h3 className="title-h3">Price from 45 to 170</h3>
<WrapSlider>
<CustomSlider
range
step={1}
defaultValue={INITIAL_FILTER[FilterType.Price]}
min={45}
max={170}
onChange={(val) => onChangeFilter(FilterType.Price, val)}
/>
</WrapSlider>
<h3 className="title-h3">Duration from 45m to 120m</h3>
<WrapSlider>
<CustomSlider
range
step={1}
defaultValue={INITIAL_FILTER[FilterType.Duration]}
min={45}
max={120}
onChange={(val) => onChangeFilter(FilterType.Duration, val)}
/>
</WrapSlider>
<button className="btn-apply">Apply</button>
</div>
);
};

View File

@ -0,0 +1,2 @@
export * from './Filter';
export * from './AdditionalFilter';

View File

@ -1,8 +1,9 @@
'use client';
import React, { useTransition } from 'react';
import { Button, Dropdown } from 'antd';
import React, { useTransition, useState } from 'react';
import { Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { useRouter, usePathname } from '../../../navigation';
import { LOCALES } from '../../../constants/locale';
import { Locale } from '../../../types/locale';
@ -10,6 +11,7 @@ import { Locale } from '../../../types/locale';
export const LanguageSwitcher = ({ locale }: { locale: string }) => {
const router = useRouter();
const [isPending, startTransition] = useTransition();
const [menuOpen, setMenuOpen] = useState<boolean>(false);
const pathname = usePathname();
const onClick: MenuProps['onClick'] = (e) => {
@ -18,6 +20,8 @@ export const LanguageSwitcher = ({ locale }: { locale: string }) => {
});
};
const onOpen = (open: boolean) => setMenuOpen(open);
const menuProps = {
items: Object.entries(LOCALES).map(([ key, label ]) => ({ key, label })),
selectable: true,
@ -26,10 +30,16 @@ export const LanguageSwitcher = ({ locale }: { locale: string }) => {
};
return (
<Dropdown menu={menuProps} disabled={isPending}>
<Button>
{LOCALES[locale as Locale]}
</Button>
<Dropdown
menu={menuProps}
disabled={isPending}
trigger={['click']}
onOpenChange={onOpen}
>
<button className="b-lang-button">
<span>{LOCALES[locale as Locale]}</span>
{menuOpen ? <CaretUpOutlined /> : <CaretDownOutlined />}
</button>
</Dropdown>
);
};

33
src/constants/experts.ts Normal file
View File

@ -0,0 +1,33 @@
import { AdditionalFilter, Filter } from '../types/experts';
import { LOCALES } from "./locale";
export enum FilterType {
'WorkLifeBalance' = 'workLifeBalance',
'StrategicSession' = 'strategicSession',
'PersonalGrowth' = 'personalGrowth',
'CareerPlaning' = 'careerPlaning',
'ExecutiveCoaching' = 'executiveCoaching',
'CareerDevelopment' = 'careerDevelopment',
'Networking' = 'networking',
'BusinessModelReview' = 'businessModelReview',
'Price' = 'price',
'Duration' = 'duration'
}
export const INITIAL_FILTER: Filter = {
[FilterType.WorkLifeBalance]: false,
[FilterType.StrategicSession]: false,
[FilterType.PersonalGrowth]: false,
[FilterType.CareerPlaning]: false,
[FilterType.ExecutiveCoaching]: false,
[FilterType.CareerDevelopment]: false,
[FilterType.Networking]: false,
[FilterType.BusinessModelReview]: false,
[FilterType.Price]: [65, 170],
[FilterType.Duration]: [60, 120]
};
export const INITIAL_ADD_FILTER: AdditionalFilter = {
sort: 'By top views',
language: Object.keys(LOCALES)
};

View File

@ -5,10 +5,10 @@ export const ALLOWED_LOCALES = [Locale.en, Locale.ru, Locale.de, Locale.it, Loca
export const LOCALE_PREFIX = undefined;
export const LOCALES = {
[Locale.en]: 'English',
[Locale.ru]: 'Russian',
[Locale.de]: 'German',
[Locale.it]: 'Italian',
[Locale.es]: 'Spanish',
[Locale.fr]: 'French',
[Locale.en]: 'En',
[Locale.ru]: 'Ru',
[Locale.de]: 'Ge',
[Locale.it]: 'It',
[Locale.es]: 'Es',
[Locale.fr]: 'Fr',
};

26
src/constants/theme.ts Normal file
View File

@ -0,0 +1,26 @@
import type { ThemeConfig } from 'antd';
const theme: ThemeConfig = {
token: {
fontFamily: 'var(--font)',
colorPrimary: '#2C7873',
controlItemBgActive: '#F8F8F7',
controlItemBgActiveHover: '#E5E5E5'
}
};
export default theme;
// components: {
// Switch: {
// handleSize: '24px',
// handleBg: '#C4DFE6',
// trackPadding: 0,
// trackHeight: '24px',
// handleShadow: 'none'
// },
// Pagination: {
// itemActiveBg: '#2C7873',
// itemSize: '40px'
// }
// }

25
src/lib/StyleRegistry.tsx Normal file
View File

@ -0,0 +1,25 @@
'use client';
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
export default function StyledRegistry({ children }: { children: React.ReactNode }) {
// Only create stylesheet once with lazy initial state
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}</>
})
if (typeof window !== 'undefined') return <>{children}</>
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
{children}
</StyleSheetManager>
);
};

1507
src/styles/_cols.scss Normal file

File diff suppressed because it is too large Load Diff

912
src/styles/_default.scss Normal file
View File

@ -0,0 +1,912 @@
@import "_variables";
html, body {
height: 100%;
}
body{
--font: var(--font-comfortaa), -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: var(--font);
background-color: #ffffff;
}
.b-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.b-content {
flex: 1 0 auto;
position: relative;
padding-bottom: 16px;
@media (min-width: 768px) {
padding-bottom: 80px;
}
}
.b-inner{
width: 100%;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.b-inner {
max-width: 750px;
}
}
@media (min-width: 992px) {
.b-inner {
max-width: 990px;
}
}
@media (min-width: 1200px) {
.b-inner {
max-width: 1290px;
}
}
.title-h1 {
color: #2C7873;
@include rem(18);
font-style: normal;
font-weight: 600;
line-height: normal;
@media (min-width: 576px) {
@include rem(30);
}
@media (min-width: 768px) {
@include rem(42);
}
}
.title-h2 {
color: #6FB98F;
@include rem(18);
font-style: normal;
font-weight: 500;
line-height: 133.333%;
@media (min-width: 768px) {
@include rem(24);
}
}
.title-h3 {
color: #6FB98F;
@include rem(18);
font-style: normal;
font-weight: 500;
line-height: 133.333%;
}
.b-article {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 16px;
background: linear-gradient(147deg, #E4F5FA 1.06%, #FFF 100%);
box-shadow: 0px 4px 8px 0px rgba(102, 165, 173, 0.16);
&__image {
width: 100%;
height: 197px;
img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
}
&__inner {
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: space-between;
flex: 1 0 auto;
height: 122px;
}
&__title {
color: #003B46;
@include rem(15);
font-style: normal;
font-weight: 600;
line-height: 120%;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
overflow: hidden;
}
&__text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #66A5AD;
@include rem(13);
font-style: normal;
font-weight: 500;
line-height: 123.077%;
flex: 1 0 auto;
}
&__link {
color: #FF8A00;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
display: inline-flex;
align-items: center;
text-decoration: none;
}
}
.b-popular {
display: flex;
flex-direction: column;
gap: 8px;
&__image {
width: 100%;
height: 200px;
background: lightgray 50%;
border-radius: 16px;
overflow: hidden;
img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
}
&__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
height: 46px;
}
&__title {
overflow: hidden;
color: #003B46;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
@include rem(18);
font-style: normal;
font-weight: 600;
line-height: 133.333%;
width: 100%;
}
&__wrap-link {
display: flex;
gap: 4px;
color: #C4DFE6;
@include rem(15);
font-style: normal;
font-weight: 600;
line-height: 120%;
}
&__link {
text-decoration: none;
color: #2C7873;
@include rem(15);
font-style: normal;
font-weight: 600;
line-height: 120%;
}
}
//lang button
.b-lang-button {
border-radius: 8px;
background: #66A5AD;
display: inline-flex;
color: #fff;
padding: 8px;
gap: 10px;
outline: none;
border: none;
cursor: pointer;
}
//switcher
.base-switcher {
position: relative;
display: block;
width: 48px;
height: 24px;
cursor: pointer;
&__circle {
background: #C4DFE6;
width: 24px;
height: 24px;
border-radius: 50%;
top: 0;
left: 0;
position: absolute;
transition: left .25s ease, background .25s ease;
}
&__line {
background-color: #F8F8F7;
border: none;
border-radius: 24px;
display: block;
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 24px;
}
&__input {
opacity: 0;
&:checked {
+ .base-switcher__line {
+ .base-switcher__circle {
background: #66A5AD;
left: 24px;
}
}
}
}
}
.b-filter {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
&__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin-bottom: 16px;
}
&__range {
width: 100%;
margin-bottom: 16px;
}
&__item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
width: 100%;
gap: 16px;
}
&__title {
color: $black;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
}
.base-btn {
user-select: none;
outline: none;
border: none;
text-decoration: none;
width: 100%;
cursor: pointer;
border-radius: 8px;
box-shadow: 0px 2px 4px 0px rgba(252, 214, 70, 0.16);
display: flex;
gap: 10px;
height: 54px;
padding: 8px 31px;
justify-content: center;
align-items: center;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
@media (max-width: 767px) {
padding: 8px;
height: 40px;
}
}
.btn-edit {
user-select: none;
outline: none;
border: none;
text-decoration: none;
width: 100%;
cursor: pointer;
border-radius: 8px;
background: #66A5AD;
box-shadow: 0px 2px 4px 0px rgba(102, 165, 173, 0.32);
display: flex;
gap: 10px;
height: 54px;
padding: 8px 31px;
justify-content: center;
align-items: center;
color: $white;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
.btn-add {
user-select: none;
outline: none;
text-decoration: none;
width: 100%;
cursor: pointer;
border-radius: 8px;
background: $white;
border: 1px solid #66A5AD;
box-shadow: none;
display: flex;
gap: 10px;
height: 54px;
padding: 8px 31px;
justify-content: center;
align-items: center;
color: #66A5AD;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
.btn-cancel {
user-select: none;
outline: none;
text-decoration: none;
width: 100%;
cursor: pointer;
border-radius: 8px;
background: $white;
border: 1px solid #D93E5C;
box-shadow: none;
display: flex;
gap: 10px;
height: 54px;
padding: 8px 31px;
justify-content: center;
align-items: center;
color: #D93E5C;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
.btn-apply {
user-select: none;
outline: none;
border: none;
text-decoration: none;
width: 100%;
cursor: pointer;
border-radius: 8px;
background: #FFBD00;
box-shadow: 0px 2px 4px 0px rgba(252, 214, 70, 0.16);
display: flex;
gap: 10px;
height: 54px;
padding: 8px 31px;
justify-content: center;
align-items: center;
color: #003B46;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
.btn-back {
user-select: none;
outline: none;
border: none;
text-decoration: none;
width: 100%;
cursor: pointer;
border-radius: 8px;
background: #2C7873;
box-shadow: 0px 2px 4px 0px rgba(252, 214, 70, 0.16);
display: flex;
gap: 10px;
height: 54px;
padding: 8px 31px;
justify-content: center;
align-items: center;
color: $white;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
.btn-video {
user-select: none;
outline: none;
border: none;
text-decoration: none;
width: 100%;
cursor: pointer;
border-radius: 8px;
background: #DFF5FB;
box-shadow: 0px 2px 4px 0px rgba(252, 214, 70, 0.16);
display: flex;
gap: 10px;
height: 54px;
padding: 8px 31px;
justify-content: center;
align-items: center;
color: #003B46;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
//
.card-profile {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #C4DFE6;
&__header {
display: flex;
padding-bottom: 8px;
align-items: center;
gap: 16px;
align-self: stretch;
&__portrait {
width: 86px;
height: 86px;
border-radius: 16px;
border: 2px solid #FFF;
background: lightgray 50%;
box-shadow: 0px 8px 16px 0px rgba(102, 165, 173, 0.32);
overflow: hidden;
img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
border-radius: 16px;
}
}
&__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;
}
&__name {
overflow: hidden;
color: #003B46;
text-overflow: ellipsis;
white-space: nowrap;
@include rem(18);
font-style: normal;
font-weight: 600;
line-height: 133.333%;
}
&__price {
color: #6FB98F;
@include rem(15);
font-style: normal;
font-weight: 600;
line-height: 120%;
span {
color: #B7B7B7;
}
}
}
&__skills {}
&__title {
color: #003B46;
@include rem(18);
font-style: normal;
font-weight: 600;
line-height: 133.333%;
}
&__subtitle {
color: #003B46;
@include rem(15);
font-style: normal;
font-weight: 600;
line-height: 120%;
}
&__desc {
color: #66A5AD;
@include rem(13);
font-style: normal;
font-weight: 500;
line-height: 123.077%;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
&__footer {
display: flex;
justify-content: flex-end;
align-items: center;
a {
text-decoration: none;
color: #FF8A00;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
display: inline-flex;
align-items: center;
}
}
}
.skills__list {
display: flex;
flex-flow: wrap;
align-items: flex-start;
gap: 4px;
align-self: stretch;
&__item {
height: 22px;
border-radius: 4px;
background: #2C7873;
display: inline-flex;
padding: 4px;
color: #FFF;
@include rem(12);
font-style: normal;
font-weight: 300;
line-height: 116.667%;
align-items: center;
}
&__more {
height: 22px;
display: inline-flex;
align-items: center;
padding: 4px;
border-radius: 4px;
border: 1px solid #2C7873;
color: #2C7873;
@include rem(12);
font-style: normal;
font-weight: 300;
line-height: 116.667%;
}
}
.pagination {
display: flex;
gap: 8px;
.page-item {
border-radius: 8px;
display: inline-flex;
height: 40px;
width: 40px;
.page-link {
border-radius: 8px;
border: 1px solid #2C7873;
display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
background: $white;
height: 40px;
width: 40px;
color: #2C7873;
text-align: center;
font-family: 'Inter', sans-serif;
@include rem(16);
font-style: normal;
font-weight: 400;
line-height: 150%;
text-decoration: none;
}
&.active {
.page-link {
background: #2C7873;
color: $white;
}
}
}
}
.expert-card {
position: relative;
border-radius: 16px;
background: #66A5AD;
padding: 16px;
flex-flow: wrap;
display: flex;
&__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 2px solid $white;
background: lightgray 50%;
box-shadow: 0px 8px 16px 0px rgba(102, 165, 173, 0.32);
img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
border-radius: 16px;
}
}
&__inner {
display: flex;
flex-direction: column;
gap: 8px;
padding-left: 16px;
margin-bottom: 16px;
}
&__wrap-btn {
flex: 0 0 100%;
display: flex;
gap: 16px;
.btn-apply,
.btn-video {
@media (max-width: 767px) {
padding: 8px;
height: 40px;
}
}
}
&__title {
color: $white;
@include rem(18);
font-style: normal;
font-weight: 500;
line-height: normal;
}
&__info {
color: $white;
@include rem(13);
font-style: normal;
font-weight: 500;
line-height: 123.077%;
display: flex;
flex-flow: column;
gap: 8px;
i {
display: none;
font-style: normal;
}
}
&__rating {
display: flex;
align-items: center;
gap: 8px;
flex-flow: wrap;
span {
display: block;
color: #2C7873;
@include rem(13);
font-style: normal;
font-weight: 500;
line-height: 123.077%;
}
img {
width: 120px;
object-fit: cover;
}
}
&__wrap {
display: flex;
}
@media (min-width: 992px) {
padding: 38px 24px 38px 24px;
flex-flow: nowrap;
justify-content: space-between;
&__avatar {
width: 220px;
height: 220px;
position: absolute;
top: 24px;
left: 24px;
}
&__inner {
padding-left: 244px;
gap: 16px;
margin-bottom: 0;
}
&__wrap-btn {
flex: 0 0 auto;
width: 168px;
.btn-video {
position: absolute;
padding: 0;
gap: 0;
left: 24px;
bottom: -32px;
width: 64px;
height: 64px;
font-size: 0;
color: transparent;
border-radius: 50%;
background: $white;
box-shadow: 0px 2px 4px 0px rgba(102, 165, 173, 0.32);
img {
width: 32px;
height: 32px;
object-fit: cover;
}
}
}
&__title {
@include rem(48);
}
&__info {
@include rem(18);
flex-flow: nowrap;
gap: 16px;
i {
display: block;
}
}
&__rating {
@include rem(15);
gap: 16px;
img {
width: 168px;
}
}
}
}
.base-text {
color: #66A5AD;
@include rem(13);
font-style: normal;
font-weight: 500;
line-height: 123.077%;
margin-bottom: 16px;
}
.offers-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.form-link {
display: flex;
justify-content: center;
a {
color: #003B46;
@include rem(18);
font-style: normal;
font-weight: 600;
line-height: 133.333%;
}
@media (min-width: 768px) {
justify-content: flex-start;
}
}
.breadcrumb {
margin-bottom: 16px;
list-style: none;
display: flex;
align-items: center;
flex-flow: wrap;
.breadcrumb-item {
color: #6FB98F;
@include rem(18);
font-style: normal;
font-weight: 500;
line-height: 133.333%;
a {
color: #2C7873;
}
+.breadcrumb-item {
padding-left: 0.5rem;
&:before {
float: left;
padding-right: 0.5rem;
color: #6FB98F;
content: "/";
}
}
}
@media (min-width: 768px) {
margin-bottom: 24px;
.breadcrumb-item {
@include rem(24);
}
}
}

150
src/styles/_footer.scss Normal file
View File

@ -0,0 +1,150 @@
@import "_variables";
.b-footer {
background: #DFF5FB;
position: relative;
padding-top: 16px;
padding-bottom: 16px;
&:after {
content: "";
position: absolute;
background-image: url(/images/wave-footer.svg);
background-position: center;
height: 16px;
width: 100%;
top: -15px;
overflow: hidden;
left: 0;
background-size: contain;
@media (max-width: 400px) {
background-size: cover;
}
@media (min-width: 768px) {
height: 80px;
top: -79px;
background-size: 1920px 80px;
}
}
&__logo {
margin-right: auto;
width: 104px;
height: 38px;
display: block;
text-decoration: none;
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
&__row {
display: flex;
gap: 24px;
}
&__coll,
&__coll-2 {
display: flex;
gap: 16px;
&__item {
display: flex;
gap: 16px;
}
}
&__social {
display: flex;
gap: 16px;
margin-left: auto;
}
&__link {
display: inline-flex;
gap: 8px;
text-decoration: none;
color: #003B46;
@include rem(16);
font-style: normal;
font-weight: 700;
line-height: 150%;
white-space: nowrap;
}
&__text {
display: inline-flex;
gap: 8px;
color: #003B46;
@include rem(16);
font-style: normal;
font-weight: 700;
line-height: 150%;
}
@media (max-width: 767px) {
&__logo {
margin-bottom: 16px;
}
&__row {
flex-direction: column;
gap: 16px;
}
&__coll {
flex-direction: column;
&__item {
flex-direction: column;
gap: 16px;
}
}
}
@media (min-width: 768px) {
padding-bottom: 32px;
&__row {
gap: 18px;
}
&__coll,
&__coll-2 {
gap: 16px 18px;
flex-direction: column;
&__item {
gap: 18px;
}
}
}
@media (min-width: 992px) {
&__logo {
margin-right: auto;
margin-left: 14px;
width: 178px;
height: 64px;
}
&__row {
gap: 24px;
}
&__coll,
&__coll-2 {
gap: 16px 24px;
flex-direction: column;
&__item {
gap: 24px;
}
}
}
}

144
src/styles/_form.scss Normal file
View File

@ -0,0 +1,144 @@
@import "_variables";
.form-field {
position: relative;
&.date,
&.password-hide,
&.password-show {
input {
padding-right: 32px !important;
}
}
&.date {
&:before {
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-image: url(/images/calendar-clear-outline.svg);
background-position: 50%;
background-repeat: no-repeat;
}
}
&.password-hide {
&:before {
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-image: url(/images/eye-off.svg);
background-position: 50%;
background-repeat: no-repeat;
}
}
&.password-show {
&:before {
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-image: url(/images/eye-outline.svg);
background-position: 50%;
background-repeat: no-repeat;
}
}
}
input {
&.base-input {
height: 54px;
width: 100%;
padding: 8px 8px 8px 16px;
border-radius: 8px;
background: #F8F8F7;
border: 1px solid #F8F8F7;
outline: none;
color: $black;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
}
textarea {
&.base-textarea {
height: 120px;
width: 100%;
padding: 15px 16px;
border-radius: 8px;
background: #F8F8F7;
border: 1px solid #F8F8F7;
outline: none;
color: $black;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
}
.user-avatar {
display: flex;
gap: 16px;
align-items: center;
&__edit {
position: relative;
width: 100px;
height: 100px;
border-radius: 16px;
border: 2px solid #FFF;
box-shadow: 0px 8px 16px 0px rgba(102, 165, 173, 0.32);
background-image: url(/images/user-avatar.png);
background-position: 50%;
background-repeat: no-repeat;
input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
label {
position: absolute;
right: -8px;
bottom: -8px;
cursor: pointer;
display: block;
width: 42px;
height: 42px;
border-radius: 8px;
background-color: #66A5AD;
background-image: url(/images/camera.svg);
background-position: 50%;
background-repeat: no-repeat;
}
}
&__text {
color: #66A5AD;
@include rem(13);
font-style: normal;
font-weight: 500;
line-height: 123.077%;
}
}

99
src/styles/_header.scss Normal file
View File

@ -0,0 +1,99 @@
@import "_variables";
.b-header {
.b-inner {
display: flex;
justify-content: space-between;
padding-top: 16px;
align-items: center;
@media (max-width: 991px) {
gap: 24px;
}
}
&__logo {
width: 166px;
height: 60px;
margin-right: auto;
img {
width: 100%;
height: auto;
object-fit: cover;
}
@media (max-width: 991px) {
width: 104px;
height: 38px;
}
}
&__menu-open {
display: none;
cursor: pointer;
@media (max-width: 991px) {
display: flex;
}
}
&__nav {
display: flex;
align-items: center;
gap: 16px;
margin-right: 16px;
&__list {
display: none;
align-items: center;
gap: 16px;
height: inherit;
list-style:none;
margin: 0;
padding: 0;
li {
height: 100%;
}
a {
font-style: normal;
font-weight: 600;
line-height: normal;
color: #66A5AD;
height: 100%;
display: inline-flex;
align-items: center;
text-decoration: none;
}
.text {
font-style: normal;
font-weight: 600;
line-height: normal;
color: #003B46;
height: 100%;
display: inline-flex;
align-items: center;
}
&__line {
color: #C4C4C4;
@include rem(16);
font-style: normal;
font-weight: 600;
line-height: normal;
}
@media (min-width: 992px) {
display: flex;
a,
.text {
@include rem(16);
}
}
}
}
}

619
src/styles/_main.scss Normal file
View File

@ -0,0 +1,619 @@
@import "_variables";
.main-top {
padding-top: 16px;
overflow: hidden;
max-height: 570px;
position: relative;
@media (min-width: 576px) {
max-height: 600px;
}
@media (min-width: 768px) {
max-height: 700px;
}
@media (min-width: 992px) {
min-height: 516px;
max-height: 555px;
&:after {
content: "";
width: 28px;
height: 28px;
background: #4566E8;
filter: blur(4px);
position: absolute;
border-radius: 50%;
z-index: 1;
top: 30px;
right: 106px;
}
&:before {
content: "";
width: 65px;
height: 65px;
background: #7CE6EE;
filter: blur(16px);
position: absolute;
border-radius: 50%;
left: calc(((100% - 990px) / 2) / 2);
top: 32px;
}
}
@media (min-width: 1200px) {
min-height: 555px;
&:before {
left: calc(((100% - 1290px) / 2) / 2);
top: 32px;
}
}
.b-inner {
position: relative;
&:before {
@media (min-width: 992px) {
content: "";
width: 65px;
height: 65px;
background: #7CE6EE;
filter: blur(16px);
position: absolute;
border-radius: 50%;
z-index: 1;
left: 500px;
top: 300px;
}
@media (min-width: 1200px) {
left: 520px;
top: 310px;
}
}
&:after {
@media (min-width: 992px) {
width: 65px;
height: 65px;
background: #D280FF;
filter: blur(6.5px);
position: absolute;
border-radius: 50%;
z-index: 1;
top: 110px;
right: -2px;
content: "";
}
@media (min-width: 1200px) {
top: 320px;
right: -2%;
}
@media (min-width: 1420px) {
top: 320px;
right: -8%;
}
@media (min-width: 1770px) {
top: 320px;
right: -18%;
}
}
}
.title-h1 {
text-align: center;
margin-bottom: 16px;
padding-top: 8px;
@media (min-width: 768px) {
padding-top: 24px;
}
@media (min-width: 992px) {
max-width: 690px;
text-align: left;
padding-top: 70px;
margin-bottom: 24px;
}
}
&__wrap-text {
margin-bottom: 24px;
text-align: center;
@media (min-width: 992px) {
max-width: 530px;
text-align: left;
}
@media (min-width: 1200px) {
max-width: 580px;
}
@media (min-width: 1450px) {
max-width: 690px;
}
}
&__text {
color: #2C7873;
@include rem(13);
font-style: normal;
font-weight: 500;
line-height: 133.333%;
@media (min-width: 576px) {
@include rem(16);
}
@media (min-width: 768px) {
@include rem(24);
}
@media (max-width: 1249px) {
br {
display: none;
}
}
}
&__wrap-btn {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
justify-content: center;
position: relative;
@media (min-width: 992px) {
gap: 24px;
justify-content: flex-start;
}
@media (min-width: 1200px) {
&:after {
content: "";
width: 41px;
height: 41px;
background: #FCFF3D;
position: absolute;
border-radius: 50%;
z-index: 1;
left: -63px;
bottom: -75px;
}
}
}
&__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 12px;
@include rem(14);
border-radius: 24px;
gap: 6px;
color: $white;
font-style: normal;
font-weight: 700;
line-height: 133.333%;
text-decoration: none;
&--android {
background: #D280FF;
}
&--apple {
background: #5AADCC;
}
img {
width: 24px;
height: 24px;
object-fit: cover;
}
.line {
background: #D9D9D9;
width: 1px;
height: 24px;
}
@media (min-width: 430px) {
height: 56px;
padding: 16px;
@include rem(18);
border-radius: 24px;
min-width: 191px;
gap: 8px;
}
@media (min-width: 768px) {
height: 64px;
padding: 11px 15px 11px 24px;
@include rem(24);
border-radius: 62px;
justify-content: flex-start;
.line {
height: 42px;
}
img {
width: 32px;
height: 32px;
}
}
}
&__img {
width: 397px;
height: 403px;
left: 50%;
position: relative;
transform: translateX(-50%);
img {
width: 100%;
height: auto;
object-fit: cover;
}
@media (max-width: 991px) {
&:before {
content: "";
position: absolute;
width: 65px;
height: 65px;
background: #7CE6EE;
filter: blur(16px);
border-radius: 50%;
top: 255px;
z-index: 2;
left: -20px;
}
&:after {
content: "";
width: 65px;
height: 65px;
background: #D280FF;
filter: blur(6.5px);
position: absolute;
border-radius: 50%;
z-index: 1;
right: -35px;
top: 25px;
}
}
@media (min-width: 992px) {
width: 415px;
height: 421px;
right: 0;
top: 90px;
left: auto;
position: absolute;
transform: none;
}
@media (min-width: 1200px) {
top: 0;
right: 0;
width: 615px;
height: 624px;
}
@media (min-width: 1420px) {
width: 615px;
height: 624px;
right: -44px;
top: 0;
}
}
}
.main-articles {
position: relative;
background: #DFF5FB;
padding-bottom: 4px;
&:before {
content: "";
position: absolute;
background-image: url(/images/wave-top.svg);
background-position: center;
height: 86px;
width: 100%;
top: -86px;
overflow: hidden;
background-size: 893px 87px;
@media (min-width: 768px) {
height: 97px;
width: 100%;
top: -96px;
background-size: 992px 97px;
}
@media (min-width: 992px) {
height: 150px;
width: 100%;
top: -149px;
background-size: 1538px 150px;
}
@media (min-width: 1200px) {
height: 187px;
top: -186px;
background-size: cover;
}
}
&:after {
content: "";
position: absolute;
background-image: url(/images/wave-2.svg);
background-position: center;
height: 16px;
width: 100%;
bottom: -15px;
overflow: hidden;
left: 0;
background-size: contain;
background-color: $white;
@media (min-width: 768px) {
height: 80px;
bottom: -79px;
width: 100%;
background-size: 1920px 80px;
}
}
.title-h2 {
margin-bottom: 16px;
}
}
.main-popular {
padding-top: 32px;
padding-bottom: 16px;
.title-h2 {
margin-bottom: 16px;
}
&__row {
display: flex;
gap: 16px;
}
@media (max-width: 400px) {
&__coll {
width: 100%;
display: none;
&:first-child {
display: block;
}
}
}
@media (min-width: 576px) {
&__coll {
width: calc(50% - 8px);
}
}
@media (min-width: 768px) {
padding-top: 104px;
padding-bottom: 24px;
&__coll {
width: calc(33.33333333% - 8px);
}
}
@media (min-width: 992px) {
&__coll {
width: calc(20% - 8px);
}
}
@media (min-width: 1200px) {
&__coll {
width: calc(16.66666667% - 8px);
}
}
}
.main-find {
position: relative;
overflow: hidden;
padding-bottom: 25px;
.b-inner {
position: relative;
&:before {
@media (min-width: 992px) {
content: "";
width: 65px;
height: 65px;
background: #7CE6EE;
filter: blur(16px);
position: absolute;
border-radius: 50%;
z-index: 1;
top: 379px;
right: -6%;
}
@media (min-width: 1200px) {
top: 379px;
right: -10%;
}
}
&:after {
@media (min-width: 992px) {
width: 65px;
height: 65px;
background: #D280FF;
filter: blur(6.5px);
position: absolute;
border-radius: 50%;
z-index: 1;
bottom: -5px;
right: -2px;
content: "";
}
@media (min-width: 1200px) {
right: -2%;
}
}
}
@media (min-width: 768px) {
padding-bottom: 16px;
}
@media (min-width: 992px) {
&:before {
content: "";
width: 51px;
height: 51px;
background: #EC8238;
filter: blur(6.5px);
position: absolute;
border-radius: 50%;
left: 20px;
top: 923px;
}
}
@media (min-width: 1200px) {
&:before {
left: 126px;
top: 923px;
}
}
&__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.open-filter {
display: flex;
cursor: pointer;
width: 24px;
height: 24px;
@media (min-width: 992px) {
display: none;
}
}
.b-filter {
padding-right: 8px;
position: relative;
@media (min-width: 992px) {
&:before {
content: "";
width: 65px;
height: 65px;
background: #D280FF;
filter: blur(6.5px);
position: absolute;
border-radius: 50%;
left: -126px;
top: 300px;
}
&:after {
content: "";
width: 65px;
height: 65px;
background: #F5F944;
filter: blur(6.5px);
position: absolute;
border-radius: 50%;
left: 51px;
bottom: -110px;
}
}
}
&__search {
width: 100%;
display: none;
height: 54px;
gap: 16px;
margin-bottom: 16px;
select,
input {
width: 100%;
height: 100%;
}
&__input {
height: 100%;
flex: 1 0 0%;
}
&__sort {
width: 200px;
height: 100%;
}
&__language {
width: 150px;
height: 100%;
}
@media (min-width: 992px) {
display: flex;
&__sort {
width: 120px;
}
&__language {
width: 120px;
}
}
@media (min-width: 1200px) {
&__sort {
width: 200px;
}
&__language {
width: 150px;
}
}
.btn-apply {
width: 97px;
}
}
}
.search-result {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}

View File

@ -0,0 +1,118 @@
@import "_variables";
.menu-mobile {
background-color: #66A5AD;
width: 100%;
max-width: 430px;
position: fixed;
left: 0;
top: 0;
height: 100vh;
z-index: 9999;
&__header {
background-color: rgba(255, 255, 255, 0.20);
display: flex;
padding: 24px 16px;
align-items: center;
gap: 16px;
&__avatar {
box-shadow: 0px 2px 4px 0px rgba(102, 165, 173, 0.32);
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
}
&__nav {
list-style:none;
margin: 0;
display: flex;
gap: 8px;
&__line {
color: #C4C4C4;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
a {
font-style: normal;
font-weight: 600;
@include rem(16);
line-height: normal;
color: $white;
display: inline-flex;
align-items: center;
text-decoration: none;
}
}
}
&__inner {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
}
&__body {
flex: 1 0 auto;
}
&__list {
display: flex;
flex-direction: column;
padding: 0;
height: inherit;
list-style:none;
margin: 0;
li {
width: 100%;
padding: 0 16px;
&:last-child {
a {
border: none;
}
}
&.chosen {
padding: 0;
a {
border-color: #2C7873;
padding-left: 16px;
padding-right: 16px;
color: #D93E5C;
}
}
}
a {
width: 100%;
font-style: normal;
font-weight: 600;
@include rem(16);
line-height: normal;
color: $white;
display: inline-flex;
align-items: center;
text-decoration: none;
padding: 16px 0;
border-bottom: 1px solid rgba(252, 214, 70, 0.16);
&.active {
color: #FFBD00;
}
}
}
@media (max-width: 991px) {
//display: block;
}
}

161
src/styles/_message.scss Normal file
View File

@ -0,0 +1,161 @@
@import "_variables";
.b-message {
width: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
height: calc(100% - 40px);
@media (min-width: 768px) {
height: calc(100% - 56px);
}
&__inner {
flex-grow: 1;
height: 0;
position: relative;
overflow-y: auto;
}
&__list {
padding-top: 18px;
margin-bottom: 16px;
display: flex;
justify-content: flex-start;
&--me {
justify-content: flex-end;
.b-message__item {
flex-direction: row-reverse;
.b-message__text {
border-radius: 8px 8px 0px 8px;
}
}
}
}
&__item {
display: flex;
align-items: flex-end;
gap: 8px;
justify-content: flex-start;
position: revert;
width: 100%;
max-width: 85%;
.date {
position: absolute;
top: -17px;
left: 0;
color: #66A5AD;
@include rem(13);
font-style: normal;
font-weight: 500;
line-height: 123.077%;
}
}
&__avatar {
width: 36px;
min-width: 36px;
height: 36px;
overflow: hidden;
border-radius: 50%;
background: lightgray 50%;
box-shadow: 0px 8px 16px 0px rgba(102, 165, 173, 0.32);
img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
}
&__text {
background: #DFF5FB;
padding: 8px 16px;
border-radius: 8px 8px 8px 0px;
position: relative;
}
&__form {
height: 72px;
width: 100%;
border-radius: 48px;
border: 1px solid #6FB98F;
background: #FFF;
display: flex;
padding: 8px;
align-items: center;
textarea {
width: calc(100% - 136px);
height: 24px;
padding: 0 8px;
border-radius: 0;
background: transparent;
border: none;
outline: none;
color: #66A5AD;
@include rem(15);
font-style: normal;
font-weight: 400;
line-height: 160%;
}
}
&__btn {
user-select: none;
outline: none;
border: none;
text-decoration: none;
width: 56px;
cursor: pointer;
border-radius: 50%;
box-shadow: none;
display: flex;
height: 56px;
padding: 8px ;
justify-content: center;
align-items: center;
background-color: #6FB98F;
background-image: url(/images/paper-plane-outline.svg);
background-position: 50%;
background-repeat: no-repeat;
}
&__upload-file {
position: relative;
cursor: pointer;
width: 24px;
height: 24px;
background-image: url(/images/attach.svg);
background-position: 50%;
background-repeat: no-repeat;
margin-right: 16px;
input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
}
&__microphone {
cursor: pointer;
width: 24px;
height: 24px;
background-image: url(/images/mic-outline.svg);
background-position: 50%;
background-repeat: no-repeat;
margin-right: 16px;
}
}

1373
src/styles/_pages.scss Normal file

File diff suppressed because it is too large Load Diff

68
src/styles/_reset.scss Normal file
View File

@ -0,0 +1,68 @@
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 100%;
font-family: var(--font);
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background-color: transparent;
-webkit-text-decoration-skip: objects;
outline:none;
text-decoration: none;
color: #fff;
}
a:active, a:hover {
outline-width: 0;
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, td img {
vertical-align: top;
}
input, select, button, textarea {
margin: 0;
font-size: 100%;
outline: none;
}
input[type="text"], input[type="password"], textarea {
padding: 0;
}
input[type="checkbox"] {
vertical-align: bottom;
}
input[type="radio"] {
vertical-align: text-bottom;
}
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
*,
*::before,
*::after {
box-sizing: border-box;
}

View File

@ -0,0 +1,13 @@
//font-size
@mixin rem($size) {
font-size: $size/16*1rem;
}
.w-100 {
width: 100% !important;
}
//color
$white: #ffffff;
$black: #000000;

13
src/styles/style.scss Normal file
View File

@ -0,0 +1,13 @@
@import "_variables.scss";
@import "_reset.scss";
@import "_default.scss";
@import "_header.scss";
@import "_menu-mobile.scss";
@import "_main.scss";
@import "_footer.scss";
@import "_cols.scss";
@import "_pages.scss";
@import "_form.scss";
@import "_message.scss";

7
src/types/experts.ts Normal file
View File

@ -0,0 +1,7 @@
export type Filter = Record<string, any>;
export type AdditionalFilter = {
text?: string;
sort?: string;
language?: string[];
};