diff --git a/next.config.js b/next.config.js index 767719f..19ddb5e 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,10 @@ /** @type {import('next').NextConfig} */ +const path = require('path') const nextConfig = {} -module.exports = nextConfig +module.exports = { + sassOptions: { + includePaths: [path.join(__dirname, 'styles')], + }, + ...nextConfig +} diff --git a/package-lock.json b/package-lock.json index 9068903..02b2f9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "tours", "version": "0.1.0", "dependencies": { + "@next/font": "^13.4.12", "@types/node": "20.4.5", "@types/react": "18.2.17", "@types/react-dom": "18.2.7", @@ -17,6 +18,9 @@ "react": "18.2.0", "react-dom": "18.2.0", "typescript": "5.1.6" + }, + "devDependencies": { + "sass": "^1.64.1" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -133,6 +137,11 @@ "glob": "7.1.7" } }, + "node_modules/@next/font": { + "version": "13.4.12", + "resolved": "https://registry.npmjs.org/@next/font/-/font-13.4.12.tgz", + "integrity": "sha512-w/ygNFuscvvFKFTMoIqhU8Kaq1wM6x4XEu9bwzJaj8G7aloH866TUPeCgiKf+M/ACpMKfRahQa06REcg6T3CyA==" + }, "node_modules/@next/swc-darwin-arm64": { "version": "13.4.12", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.12.tgz", @@ -522,6 +531,19 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "devOptional": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -701,6 +723,15 @@ "node": ">=0.6" } }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "devOptional": true, + "engines": { + "node": ">=8" + } + }, "node_modules/bplist-parser": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz", @@ -811,6 +842,45 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "devOptional": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "devOptional": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -1663,6 +1733,20 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -1937,6 +2021,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.1.tgz", + "integrity": "sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==", + "devOptional": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2011,6 +2101,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "devOptional": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-boolean-object": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -2527,6 +2629,15 @@ } } }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "devOptional": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/npm-run-path": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", @@ -2904,6 +3015,18 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "devOptional": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/regenerator-runtime": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", @@ -3128,6 +3251,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sass": { + "version": "1.64.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.1.tgz", + "integrity": "sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==", + "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", @@ -3736,6 +3876,11 @@ "glob": "7.1.7" } }, + "@next/font": { + "version": "13.4.12", + "resolved": "https://registry.npmjs.org/@next/font/-/font-13.4.12.tgz", + "integrity": "sha512-w/ygNFuscvvFKFTMoIqhU8Kaq1wM6x4XEu9bwzJaj8G7aloH866TUPeCgiKf+M/ACpMKfRahQa06REcg6T3CyA==" + }, "@next/swc-darwin-arm64": { "version": "13.4.12", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.12.tgz", @@ -3960,6 +4105,16 @@ "color-convert": "^2.0.1" } }, + "anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "devOptional": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, "argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -4091,6 +4246,12 @@ "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz", "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==" }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "devOptional": true + }, "bplist-parser": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz", @@ -4160,6 +4321,33 @@ "supports-color": "^7.1.0" } }, + "chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "devOptional": true, + "requires": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "dependencies": { + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "devOptional": true, + "requires": { + "is-glob": "^4.0.1" + } + } + } + }, "client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -4800,6 +4988,13 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true + }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -4981,6 +5176,12 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==" }, + "immutable": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.1.tgz", + "integrity": "sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==", + "devOptional": true + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -5037,6 +5238,15 @@ "has-bigints": "^1.0.1" } }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "devOptional": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, "is-boolean-object": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -5364,6 +5574,12 @@ "zod": "3.21.4" } }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "devOptional": true + }, "npm-run-path": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", @@ -5611,6 +5827,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "devOptional": true, + "requires": { + "picomatch": "^2.2.1" + } + }, "regenerator-runtime": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", @@ -5750,6 +5975,17 @@ "is-regex": "^1.1.4" } }, + "sass": { + "version": "1.64.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.1.tgz", + "integrity": "sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==", + "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", diff --git a/package.json b/package.json index 2ddd0b7..33b7841 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@next/font": "^13.4.12", "@types/node": "20.4.5", "@types/react": "18.2.17", "@types/react-dom": "18.2.7", @@ -18,5 +19,8 @@ "react": "18.2.0", "react-dom": "18.2.0", "typescript": "5.1.6" + }, + "devDependencies": { + "sass": "^1.64.1" } } diff --git a/public/booking.png b/public/booking.png new file mode 100644 index 0000000..b7257d4 Binary files /dev/null and b/public/booking.png differ diff --git a/public/cloud.png b/public/cloud.png new file mode 100644 index 0000000..1532478 Binary files /dev/null and b/public/cloud.png differ diff --git a/public/destination.png b/public/destination.png new file mode 100644 index 0000000..7ac4273 Binary files /dev/null and b/public/destination.png differ diff --git a/public/first.png b/public/first.png new file mode 100644 index 0000000..b0f7e75 Binary files /dev/null and b/public/first.png differ diff --git a/public/image.jpg b/public/image.jpg new file mode 100644 index 0000000..2ef4f60 Binary files /dev/null and b/public/image.jpg differ diff --git a/public/layer.svg b/public/layer.svg new file mode 100644 index 0000000..e69de29 diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/second.png b/public/second.png new file mode 100644 index 0000000..58cb7a5 Binary files /dev/null and b/public/second.png differ diff --git a/public/third.png b/public/third.png new file mode 100644 index 0000000..a775326 Binary files /dev/null and b/public/third.png differ diff --git a/public/travlog.svg b/public/travlog.svg new file mode 100644 index 0000000..cb6833c --- /dev/null +++ b/public/travlog.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/components/block/block.module.css b/src/app/components/block/block.module.css new file mode 100644 index 0000000..c0a492e --- /dev/null +++ b/src/app/components/block/block.module.css @@ -0,0 +1,14 @@ +.container{ + border-radius: 100px; + background: #FFF; + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.07), 0px 34px 75px 0px rgba(0, 0, 0, 0.07), 0px 137px 137px 0px rgba(0, 0, 0, 0.06), 0px 308px 185px 0px rgba(0, 0, 0, 0.04), 0px 548px 219px 0px rgba(0, 0, 0, 0.01), 0px 856px 240px 0px rgba(0, 0, 0, 0.00); + display: inline-flex; + padding: 20px; + padding-top: 15px; + padding-bottom: 15px; + overflow: visible; + justify-content: center; + align-items: center; + gap: 10px; + width: 300px; +} \ No newline at end of file diff --git a/src/app/components/block/index.tsx b/src/app/components/block/index.tsx new file mode 100644 index 0000000..cbb8de9 --- /dev/null +++ b/src/app/components/block/index.tsx @@ -0,0 +1,14 @@ +'use client' + +import react from 'react' +import styles from './block.module.css' + +interface IBlock{ + children: react.ReactElement | string | react.ReactElement[]; + className?: string; +} + +export const Block: react.FC = (props) => { + const className = props.className ? styles.container + ' ' + props.className : styles.container + return
{props.children}
+} \ No newline at end of file diff --git a/src/app/components/button/button.module.scss b/src/app/components/button/button.module.scss new file mode 100644 index 0000000..5663133 --- /dev/null +++ b/src/app/components/button/button.module.scss @@ -0,0 +1,19 @@ +.button{ + outline: none; + border: none; + border-radius: 1000px; + padding: 15px 30px; + cursor: pointer; +} + +.active{ + @extend .button; + background-color: #5D50C6; + +} + +.disabled{ + @extend .button; + background-color: white; + color: black; +} \ No newline at end of file diff --git a/src/app/components/button/index.tsx b/src/app/components/button/index.tsx new file mode 100644 index 0000000..0ad2d1a --- /dev/null +++ b/src/app/components/button/index.tsx @@ -0,0 +1,18 @@ +'use client' +import React from "react" +import styles from './button.module.scss' +import { montserrat } from "@/app/fonts"; + +interface IButton{ + children: React.ReactElement | string; + type: "active" | "disabled"; + onClick?: () => {} +} + +const Button: React.FC = (props) => { + const className = props.type == 'active' ? styles.active : styles.disabled; + const onClick = props.onClick ? props.onClick : () => {} + return +} + +export default Button \ No newline at end of file diff --git a/src/app/components/functional/functional.module.css b/src/app/components/functional/functional.module.css new file mode 100644 index 0000000..b97fe27 --- /dev/null +++ b/src/app/components/functional/functional.module.css @@ -0,0 +1,81 @@ +.sized{ + overflow: visible; + margin-top: 50px; + display: flex; + gap: 300px; + padding-left: calc((100% - var(--max-width)) / 2); +} +.centered{ +} + +.header{ + display: flex; + flex-direction: column; + gap: 10px; + width: 400px; +} +.pink{ + color: #F85E9F; + font-size: 20px; + font-style: normal; + line-height: 120%; /* 27.6px */ + letter-spacing: 2.5px; + text-transform: uppercase; +} + +.header__head{ + color: #191825; + font-size: 44px; + font-style: normal; + font-weight: 700; + line-height: 120%; /* 52.8px */ +} +.blocks{ + display: flex; + gap: 30px; +} + +.block{ + display: flex; + flex-direction: column; + gap: 32px; + padding: 30px; + border-radius: 30px; +} + +.block__head{ + padding-top: 30px; + color: #191825; + text-align: center; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 120%; /* 33.6px */ +} + +.block__descr{ + color: rgba(25, 24, 37, 0.50); + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 160%; /* 28.8px */ +} + +.container{ + display: flex; + gap: 100px; + width: 1500px; +} + +.size__box{ + width: 100%; + overflow-x: scroll; + overflow-y: visible; + padding-top: 150px; + padding-bottom: 500px; +} + +.size__box::-webkit-scrollbar{ + display: none; +} \ No newline at end of file diff --git a/src/app/components/functional/index.tsx b/src/app/components/functional/index.tsx new file mode 100644 index 0000000..48c0c37 --- /dev/null +++ b/src/app/components/functional/index.tsx @@ -0,0 +1,87 @@ +import react from 'react' +import styles from './functional.module.css' +import { inter, montserrat, montserratNormal } from '@/app/fonts' +import { Block } from '../block' + + +interface IFunctionalBlock{ + src: string; + head: string; + description: string; +} + +const FunctionalBlock: react.FC = (props) => { + return + +
{props.head}
+
{props.description}
+ +} + + +export const Functional: react.FC = () => { + + // react.useEffect(() => { + // function isElementVisible(el: any) { + // var rect = el.getBoundingClientRect(), + // vWidth = window.innerWidth || document.documentElement.clientWidth, + // vHeight = window.innerHeight || document.documentElement.clientHeight, + // efp = function (x: any, y: any) { return document.elementFromPoint(x, y) }; + + // // Return false if it's not in the viewport + // if (rect.right < 0 || rect.bottom < 0 + // || rect.left > vWidth || rect.top > vHeight) + // return false; + + // // Return true if any of its four corners are visible + // return ( + // el.contains(efp(rect.left, rect.top)) + // || el.contains(efp(rect.right, rect.top)) + // || el.contains(efp(rect.right, rect.bottom)) + // || el.contains(efp(rect.left, rect.bottom)) + // ); + // } + // var mouseWheelEvt = function (event: any) { + // if ((document as any).body.doScroll) + // (document as any).body.doScroll(event.wheelDelta>0?"left":"right"); + // else if ((event.wheelDelta || event.detail) > 0) + // document.body.scrollLeft -= 10; + // else + // document.body.scrollLeft += 10; + + // return false; + // } + // document.body.addEventListener("mousewheel", mouseWheelEvt); + // }) + + return
+
+
+
+
+
ФУНКЦИОНАЛ
+
Чем мы можем вам помочь
+
+
+ + + +
+
+ +
+
+
+} \ No newline at end of file diff --git a/src/app/components/functionality/functionality.module.css b/src/app/components/functionality/functionality.module.css new file mode 100644 index 0000000..ad1105b --- /dev/null +++ b/src/app/components/functionality/functionality.module.css @@ -0,0 +1,81 @@ +.sized{ + width: var(--max-width); +} +.centered{ + display: flex; + justify-content: center; + transform: translateY(-300px); +} + +.tour_container{ + width: 285px; + display: inline-flex; + flex-direction: column; + gap: 10px; + border-radius: 32px; + overflow: hidden; + padding: 0px; +} + +.img_block{ + display: flex; + justify-content: center; + align-items: center; + width: 285px; + height: 270px; + overflow: hidden; +} + +.body{ + padding: 10px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.head__city{ + color: #191825; + font-size: 23px; + font-style: normal; + font-weight: 700; + line-height: 120%; /* 27.6px */ + width: 150px; +} + +.head{ + display: flex; + justify-content: space-between; + align-items: center; +} + +.time{ + color: #F85E9F; + font-size: 23px; + font-style: normal; + font-weight: 700; + line-height: 120%; +} + +.description{ + color: rgba(25, 24, 37, 0.75); + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 160%; +} + +.places{ + padding-top: 10px; + padding-bottom: 10px; + color: #FF5722; + font-size: 23px; + font-style: normal; + font-weight: 700; + line-height: 120%; +} + +.tours{ + display: flex; + justify-content: space-between; + padding-top: 60px; +} \ No newline at end of file diff --git a/src/app/components/functionality/index.tsx b/src/app/components/functionality/index.tsx new file mode 100644 index 0000000..c09d2ac --- /dev/null +++ b/src/app/components/functionality/index.tsx @@ -0,0 +1,78 @@ +import react from 'react' +import styles from './functionality.module.css' +import { PinkHeader } from '../pinkHeader' +import { Block } from '../block'; +import { inter } from '@/app/fonts'; + + +interface ITour{ + src: string; + title: string; + description: string; + places: string; + time: string; +} + +const Tour: react.FC = (props) => { + return +
+ +
+
+
+
+ {props.title} +
+
+ {props.time} +
+
+
+ {props.description} +
+
+ {props.places} +
+
+ +} + + +export const Functionality: react.FC = () => { + + return
+
+ +
+ + + + +
+
+
+} diff --git a/src/app/components/header/header.module.css b/src/app/components/header/header.module.css new file mode 100644 index 0000000..fd1deb2 --- /dev/null +++ b/src/app/components/header/header.module.css @@ -0,0 +1,18 @@ +.container{ + padding: 32px 0px; + width: var(--max-width); + display: flex; + justify-content: space-between; + align-items: center; +} + +.login_block{ + display: flex; + gap: 10px; +} + +.centered{ + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/src/app/components/header/index.tsx b/src/app/components/header/index.tsx new file mode 100644 index 0000000..8793735 --- /dev/null +++ b/src/app/components/header/index.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import styles from './header.module.css' +import Logo from "../icons/logo"; +import Select from "../select"; +import Button from "../button"; + +const Header: React.FC = () => { + return
+
+ +