diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.stylelintrc.js b/.stylelintrc.js index 2e345321d6..fe2b483da1 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -3,5 +3,23 @@ module.exports = { plugins: [ "stylelint-scss" ], - rules: {} + rules: { + // Project uses many non-kebab placeholders/keyframes from Mate templates. + "scss/percent-placeholder-pattern": null, + "keyframes-name-pattern": null, + + // Allow custom property ordering and avoid noisy reordering rules. + "order/properties-order": null, + "order/order": null, + "declaration-empty-line-before": null, + "at-rule-empty-line-before": null, + "custom-property-empty-line-before": null, + "declaration-block-no-redundant-longhand-properties": null, + + // Formatting/style preferences that don't affect layout + "color-hex-length": null, + "shorthand-property-no-redundant-values": null, + "font-family-no-missing-generic-family-keyword": null, + "font-family-name-quotes": null + } }; diff --git a/LICENSE b/LICENSE index f288702d2f..d5b0bf6659 100644 --- a/LICENSE +++ b/LICENSE @@ -647,7 +647,7 @@ the "copyright" line and a pointer to where the full notice is found. You should have received a copy of the GNU General Public License along with this program. If not, see . -Also add information on how to contact you by electronic and paper mail. +Also add information on how to Contact us you by electronic and paper mail. If the program does terminal interaction, make it output a short notice like this when it starts in an interactive mode: diff --git a/README.md b/README.md index 93d9738cc4..285ad59ffa 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ Adapt the page to the following screens: 8. Implement `Vision, Passion, Results` block. - use https://github.com/mate-academy/layout_dia/blob/master/src/images/Shapes.png as background picture 9. Implement `Send us a message` block. -10. Implement `Contact us` block. +10. Implement `Contact us us` block. 11. Implement the footer. ## Checklist for preparing a portfolio project for HR review @@ -39,10 +39,10 @@ Adapt the page to the following screens: 10. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded 11. The form shouldn’t submit empty 12. The "Learn more" button should lead to the closest block (Our expertise) -13. The "Hire Us" button in the header menu should lead to the contact form +13. The "Hire Us" button in the header menu should lead to the Contact us form 14. In the PROCESS section add a hover effect to cards (for example, let them increase in size a little) 15. Inside the cards in PROCESS sections, make a link out of the "Learn More" text, so that it hovers simultaneously with the arrow button on the left -16. In the Vision, Passion, Results section, the “Apply” button also should lead to the contact form +16. In the Vision, Passion, Results section, the “Apply” button also should lead to the Contact us form 17. In the Testimonials and Our expertise section add hover effects for each review 18. After clicking the menu buttons, the landing page will scroll exactly to the beginning of the desired block (exactly where its section begins) 19. The arrows at the bottom of the first block should not respond slowly to pressing (this is possible if the pictures are too large) @@ -65,7 +65,7 @@ Adapt the page to the following screens: 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_dia/). + [DEMO LINK](https://itNepes.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/checklist.md b/checklist.md index c24c685fb5..28f13087be 100644 --- a/checklist.md +++ b/checklist.md @@ -27,6 +27,6 @@ 5. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number 6. Make sure everything looks neat on mobile and without horizontal scrolling 7. The "Learn more" button should lead to the closest block (Our expertise) -8. The "Hire Us" button in the header menu should lead to the contact form -9. In the `Vision`, `Passion`, `Results` sections, the “Apply” button also should lead to the contact form +8. The "Hire Us" button in the header menu should lead to the Contact us form +9. In the `Vision`, `Passion`, `Results` sections, the “Apply” button also should lead to the Contact us form 10. All the social icons in the footer should be clickable and open the social networks in a new tab diff --git a/index.html b/index.html index 1eca937738..1bd7309d1b 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,454 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Dia + AIR + + + - -

Dia

- + +
+
+
+ + +
+
+ +
+
+ Hire us +
+
+
+ + +
+
+
+
+

Strategic Agency

+

+ We believe in the power of bold ideas that
can solve business challenges. +

+ + Learn more + +
+
+
+
+
+
+ slide-3 +
+
+ slide-3 +
+
+ slide-3 +
+
+
+
+ Previous Slide +
+
+ Next Slide +
+

+ By the same illusion which lifts the
horizon. +

+
+
+
+
+

+ Who we are +

+

+ We embrace a strategic approach to creative ideas. We are interested in people and human relationships. This is the main thing you need to know about us. We believe in the power of bold ideas that can solve business challenges. +

+
+
+
+
+

Our expertise

+
+
+ Branding +

Branding

+

+ We create additional value for companies, products, services as well as verbal and visual ways to deliver it to the audience. +

+
+
+ Communication +

Communication

+

+ We strive to create communications that can increase media performance. We use everything — words, meanings, stories, art, movies. +

+
+
+ Strategy icon +

Strategy

+

+ We create business growth strategies, from the moment of its birth to the achievement of the necessary business indicators. +

+
+
+
+
+
+
+

Services

+

Air is a full service creative agency

+

+ Deep analytics, strong strategy and bright creative ideas.

We are sure that first-rate job is possible only if all three components are united. +

+
+
+
+
001
+
+ Brand Development + Copywriting + Logo & Webite Design + Packaging +
+ +
+
+
+

Learn more

+ +
+
+
002
+
+ Content Production + Graphic Design + Video Production + Post Production +
+ +
+
+
+

Learn more

+ +
+
+
003
+
+ Marketing Strategy + Email Marketing + Paid Advertising + Blog Content & SEO +
+ +
+
+
+

Learn more

+ +
+
+
004
+
+ Digital Communications + Influencer Marketing + Product Placements + Strategic Partnerships +
+ +
+
+
+

Learn more

+ +
+
+
+ +
+
+

Testimonials

+

What people say

+
+
+
+
+
+
+ photo-1 +
+
+ +
+

+ AIR’s ideas are refreshing and out of the box. Authentic team that focuses on the important path of the brand. +

+

Tal Gilad

+

Teach for America

+
+
+
+ +
+
+
+
+ photo-2 +
+
+ +
+

+ AIR is an exceptional agency that leads with creative talent, first-class account servicing. +

+

Azadeh Hawkins

+

Hawkins Consulting

+
+
+
+ +
+
+
+
+ photo-3 +
+
+ +
+

+ AIR raises the agency bar to stratospheric heights on both creative output and client service. +

+

Michel Grover

+

Hulu

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

Send us a message

+
+ + + + +
+
+
+

Contact us us

+
+
+

Call us

+ 654 321 987 +
+
+

Visit us

+ + 2905 West Drive, Buffalo Grove + +
+
+

our socials

+
+ + + + +
+
+
+
+
+
+
+ +
+
+
diff --git a/package-lock.json b/package-lock.json index 1b7e1f550b..d85063a0a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,14 @@ "version": "1.0.0", "hasInstallScript": true, "license": "GPL-3.0", + "dependencies": { + "swiper": "^12.1.3" + }, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -52,6 +55,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -522,6 +526,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" }, @@ -563,6 +568,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" } @@ -1510,10 +1516,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -1590,7 +1597,6 @@ "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-6.0.0.tgz", "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==", "dev": true, - "peer": true, "engines": { "node": ">= 20" } @@ -1619,7 +1625,6 @@ "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-11.0.2.tgz", "integrity": "sha512-4zCpzP1fWc7QlqunZ5bSEjxc6yLAlRTnDwKtgXfcI/FxxGoqedDG8V2+xJ60bV2kODqcGB+nATdtap/XYq2NZQ==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0", "universal-user-agent": "^7.0.2" @@ -1633,7 +1638,6 @@ "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-9.0.3.tgz", "integrity": "sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==", "dev": true, - "peer": true, "dependencies": { "@octokit/request": "^10.0.6", "@octokit/types": "^16.0.0", @@ -1647,8 +1651,7 @@ "version": "27.0.0", "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-27.0.0.tgz", "integrity": "sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@octokit/plugin-paginate-rest": { "version": "2.21.3", @@ -1710,7 +1713,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request/-/request-10.0.7.tgz", "integrity": "sha512-v93h0i1yu4idj8qFPZwjehoJx4j3Ntn+JhXsdJrG9pYaX6j/XRz2RmasMUHtNgQD39nrv/VwTWSqK0RNXR8upA==", "dev": true, - "peer": true, "dependencies": { "@octokit/endpoint": "^11.0.2", "@octokit/request-error": "^7.0.2", @@ -1727,7 +1729,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-7.1.0.tgz", "integrity": "sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0" }, @@ -1915,7 +1916,6 @@ "resolved": "https://registry.npmjs.org/@octokit/types/-/types-16.0.0.tgz", "integrity": "sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==", "dev": true, - "peer": true, "dependencies": { "@octokit/openapi-types": "^27.0.0" } @@ -2697,6 +2697,7 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "dev": true, + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3070,8 +3071,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz", "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==", - "dev": true, - "peer": true + "dev": true }, "node_modules/bl": { "version": "4.1.0", @@ -3125,6 +3125,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -4180,8 +4181,7 @@ "type": "opencollective", "url": "https://opencollective.com/fastify" } - ], - "peer": true + ] }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -5925,6 +5925,7 @@ "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.4.tgz", "integrity": "sha512-eohl3hKTiVyD1ilYdw9T0OiB4hnjef89e3dMYKz+mVKDzj+5IteTseASUsOB+EU9Tf6VNTCjDePcP6wkDGmLKQ==", "dev": true, + "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -6721,6 +6722,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -6799,6 +6801,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "dev": true, + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -7312,6 +7315,7 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz", "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==", "dev": true, + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -7645,6 +7649,7 @@ "url": "https://github.com/sponsors/stylelint" } ], + "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-syntax-patches-for-csstree": "^1.0.19", @@ -7986,6 +7991,25 @@ "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", "dev": true }, + "node_modules/swiper": { + "version": "12.1.3", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.3.tgz", + "integrity": "sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -8081,6 +8105,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -8206,8 +8231,7 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz", "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==", - "dev": true, - "peer": true + "dev": true }, "node_modules/universalify": { "version": "2.0.1", @@ -8384,6 +8408,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -8721,20 +8746,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index aebda906fc..53c8548750 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -42,5 +42,8 @@ "tests": { "backstop": false } + }, + "dependencies": { + "swiper": "^12.1.3" } } diff --git a/src/images/banner/bg-banner.png b/src/images/banner/bg-banner.png new file mode 100644 index 0000000000..a84a7a7c7e Binary files /dev/null and b/src/images/banner/bg-banner.png differ diff --git a/src/images/banner/cta-block.png b/src/images/banner/cta-block.png new file mode 100644 index 0000000000..33a5bc6466 Binary files /dev/null and b/src/images/banner/cta-block.png differ diff --git a/src/images/expertise/branding-icon.svg b/src/images/expertise/branding-icon.svg new file mode 100644 index 0000000000..174ac6d661 --- /dev/null +++ b/src/images/expertise/branding-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/expertise/communication-icon.svg b/src/images/expertise/communication-icon.svg new file mode 100644 index 0000000000..62073d3ee3 --- /dev/null +++ b/src/images/expertise/communication-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/expertise/strategy-icon.svg b/src/images/expertise/strategy-icon.svg new file mode 100644 index 0000000000..d6255b19cb --- /dev/null +++ b/src/images/expertise/strategy-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/expertise/vector-icon.svg b/src/images/expertise/vector-icon.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/expertise/vector-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 0000000000..c6f8204490 --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,15 @@ + + + + Air + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 0000000000..48fc38e477 --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/air-logo.svg b/src/images/logo/air-logo.svg new file mode 100644 index 0000000000..70e90d9356 --- /dev/null +++ b/src/images/logo/air-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/logo/menu-close.png b/src/images/logo/menu-close.png new file mode 100644 index 0000000000..5029f7ad33 Binary files /dev/null and b/src/images/logo/menu-close.png differ diff --git a/src/images/logo/menu-close.svg b/src/images/logo/menu-close.svg new file mode 100644 index 0000000000..8eb5973230 --- /dev/null +++ b/src/images/logo/menu-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/service/cursor.zip b/src/images/service/cursor.zip new file mode 100644 index 0000000000..3dd60fa767 Binary files /dev/null and b/src/images/service/cursor.zip differ diff --git a/src/images/service/vector-right.svg b/src/images/service/vector-right.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/service/vector-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg index 66daed19a5..d0ead7c04a 100644 --- a/src/images/slider/arrow-left.svg +++ b/src/images/slider/arrow-left.svg @@ -1,3 +1,3 @@ - + diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg index e9ddf85873..86d6e15422 100644 --- a/src/images/slider/arrow-right.svg +++ b/src/images/slider/arrow-right.svg @@ -1,3 +1,3 @@ - + diff --git a/src/images/slider/icon-arrow-left.svg b/src/images/slider/icon-arrow-left.svg new file mode 100644 index 0000000000..e0e78c500f --- /dev/null +++ b/src/images/slider/icon-arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/icon-arrow-right.svg b/src/images/slider/icon-arrow-right.svg new file mode 100644 index 0000000000..4319096bd3 --- /dev/null +++ b/src/images/slider/icon-arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/slide-1.svg b/src/images/slider/slide-1.svg new file mode 100644 index 0000000000..99c0af74b0 --- /dev/null +++ b/src/images/slider/slide-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/slider/slide-2.svg b/src/images/slider/slide-2.svg new file mode 100644 index 0000000000..8af309c445 --- /dev/null +++ b/src/images/slider/slide-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/slider/slide-3.svg b/src/images/slider/slide-3.svg new file mode 100644 index 0000000000..4386d0a203 --- /dev/null +++ b/src/images/slider/slide-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/slider/slide-left-photo.png b/src/images/slider/slide-left-photo.png new file mode 100644 index 0000000000..d2d7a6f01a Binary files /dev/null and b/src/images/slider/slide-left-photo.png differ diff --git a/src/images/slider/slide-right-photo.png b/src/images/slider/slide-right-photo.png new file mode 100644 index 0000000000..7eb8e4b979 Binary files /dev/null and b/src/images/slider/slide-right-photo.png differ diff --git a/src/images/social-icons/cursor.zip b/src/images/social-icons/cursor.zip new file mode 100644 index 0000000000..6e92bcc094 Binary files /dev/null and b/src/images/social-icons/cursor.zip differ diff --git a/src/images/social-icons/facebook.png b/src/images/social-icons/facebook.png new file mode 100644 index 0000000000..f1810471dd Binary files /dev/null and b/src/images/social-icons/facebook.png differ diff --git a/src/images/social-icons/instagram.png b/src/images/social-icons/instagram.png new file mode 100644 index 0000000000..ff5cb08cdc Binary files /dev/null and b/src/images/social-icons/instagram.png differ diff --git a/src/images/social-icons/twitter.png b/src/images/social-icons/twitter.png new file mode 100644 index 0000000000..171a853fdc Binary files /dev/null and b/src/images/social-icons/twitter.png differ diff --git a/src/images/testimonial/azadeh-hawkins-2.svg b/src/images/testimonial/azadeh-hawkins-2.svg new file mode 100644 index 0000000000..f59a1efa0e --- /dev/null +++ b/src/images/testimonial/azadeh-hawkins-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/testimonial/michel-grover-3.svg b/src/images/testimonial/michel-grover-3.svg new file mode 100644 index 0000000000..244d0df953 --- /dev/null +++ b/src/images/testimonial/michel-grover-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/testimonial/quotes.svg b/src/images/testimonial/quotes.svg new file mode 100644 index 0000000000..14efa5df60 --- /dev/null +++ b/src/images/testimonial/quotes.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/testimonial/tal-gilad-1.svg b/src/images/testimonial/tal-gilad-1.svg new file mode 100644 index 0000000000..40c071f0e6 --- /dev/null +++ b/src/images/testimonial/tal-gilad-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..d79f05a268 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,101 @@ +import Swiper from 'swiper/bundle'; +import 'swiper/css/bundle'; 'use strict'; + +const burger = document.querySelector('.header__burger'); +const closeBtn = document.querySelector('.menu__close'); +const menu = document.querySelector('.page__menu'); +const menuLinks = document.querySelectorAll('.menu__nav .nav__item'); + +const closeMenu = (e) => { + if (e) e.preventDefault(); + menu.classList.remove('page__menu--is-open'); + document.body.style.overflow = ''; +}; + +burger.addEventListener('click', (e) => { + e.preventDefault(); + menu.classList.add('page__menu--is-open'); + document.body.style.overflow = 'hidden'; +}); + +closeBtn.addEventListener('click', closeMenu); + +menuLinks.forEach(link => { + link.addEventListener('click', (e) => { + menu.classList.remove('page__menu--is-open'); + document.body.style.overflow = ''; + }); +}); + +window.addEventListener('resize', () => { + if (window.innerWidth >= 1024) { + menu.classList.remove('page__menu--is-open'); + document.body.style.overflow = ''; + } +}); + +const swiper = new Swiper('.slider__swiper', { + loop: true, + initialSlide: 0, + navigation: { + nextEl: '.slider__navigation--next', + prevEl: '.slider__navigation--prev', + }, +}); + +const siteHeader = document.querySelector('.header'); +const triggerButton = document.querySelector('.home__button--learn-more'); + + + +let lastScroll = 0; +const header = document.querySelector('.header'); + +window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + if (currentScroll > lastScroll && currentScroll > 100) { + header.classList.add('header--hidden'); + } else { + header.classList.remove('header--hidden'); + } + + lastScroll = currentScroll; +}); + +const revealItems = document.querySelectorAll('.reveal'); + +const revealObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + } + }); +}, { + threshold: 0.15, +}); + +revealItems.forEach(item => { + revealObserver.observe(item); +}); + +const contactForm = document.querySelector('.contact-us__form'); + +if (contactForm) { + contactForm.addEventListener('submit', (event) => { + event.preventDefault(); + + if (!contactForm.checkValidity()) { + contactForm.reportValidity(); + return; + } + + contactForm.reset(); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }); +} + + + diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e2..0000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/blocks/_about-us.scss b/src/styles/blocks/_about-us.scss new file mode 100644 index 0000000000..ee45ea0734 --- /dev/null +++ b/src/styles/blocks/_about-us.scss @@ -0,0 +1,36 @@ +.about-us { + &__content { + text-align: center; + justify-content: center; + row-gap: 24px; + display: grid; + padding-block: 120px; + opacity: 1; + transform: translateY(0) scale(1); + } + + &__title { + @extend %fm-poppins_w-600_fs-32_lh-150_c-253757; + margin: 0; + } + + &__text { + @extend %fm-opensans_w-600_fs-22_lh-150_c-6C788BF; + margin: 0; + + @include on-tablet { + font-size: 24px; + max-width: 558px; + } + + @include on-desktop-small { + font-size: 24px; + max-width: 716px; + } + + @include on-desktop { + font-size: 24px; + max-width: 754px; + } + } +} diff --git a/src/styles/blocks/_banner.scss b/src/styles/blocks/_banner.scss new file mode 100644 index 0000000000..0e44a4a5bb --- /dev/null +++ b/src/styles/blocks/_banner.scss @@ -0,0 +1,36 @@ +.banner { + @include padding-block-section-bigger; + background-color: $card-bg-color; + + @include on-tablet { + background-image: url('../images/banner/bg-banner.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + } + + &__title { + @extend %fm-poppins_w-600_fs-44_lh-120_c-253757; + } + + &__text { + @include on-desktop-small { + max-width: 754px; + margin-inline: auto; + } + @extend %fm-opensans_w-600_fs-22_lh-150_c-6C788BF; + } + + &__button { + @extend %button; + @extend %fm-poppins_w-600_fs-15_lh-100_c-FFFFFF; + } +} diff --git a/src/styles/blocks/_contact-us.scss b/src/styles/blocks/_contact-us.scss new file mode 100644 index 0000000000..280d3972ab --- /dev/null +++ b/src/styles/blocks/_contact-us.scss @@ -0,0 +1,125 @@ +.contact-us { + @include padding-block-section-bigger; + background-color: $hd-cs-ft-bg-color; + border-radius: 20px 20px 0 0; + + &__container { + @include page-grid; + row-gap: 80px; + + @include on-tablet { + row-gap: 120px; + } + + @include on-desktop-small { + row-gap: 0; + } + } + + &__side { + grid-column: 1 / -1; + + @include on-tablet { + &--top, + &--bottom { + grid-column: span 4; + } + } + + @include on-desktop-small { + &--top { + grid-column: 1 / 6; + } + + &--bottom { + grid-column: 8 / -1; + } + } + } + + &__title { + @extend %fm-poppins_w-600_fs-32_lh-130_c-ffffff; + } + + &__side--bottom &__title { + margin-bottom: 56px; + } + + &__block-item-text { + @extend %fm-poppins_w-700_fs-13_lh-100_c-c0cdd7; + } + + &__block-item + &__block-item { + margin-top: 48px; + } + + &__block-item-data { + @extend %fm-opensans_w-600_fs-24_lh-150_c-ffffff; + } + + &__socials { + margin-top: 16px; + display: flex; + align-items: center; + gap: 16px; + } + + &__form { + display: flex; + flex-direction: column; + padding-inline: 20px; + margin-top: 48px; + + @include on-desktop-small { + padding-inline: 0; + } + } + + &__form-input { + resize: none; + @extend %input; + } + + &__form-input + &__form-input { + margin-top: 40px; + } + + &__form-button { + margin-top: 56px; + + @extend %button; + } + + .icon { + width: 32px; + height: 32px; + display: block; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + flex-shrink: 0; + filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) + hue-rotate(347deg) brightness(105%) contrast(102%); + transition: + filter 0.3s ease, + transform 0.3s ease; + + &:hover { + filter: brightness(0) saturate(100%) invert(34%) sepia(96%) + saturate(1911%) hue-rotate(214deg) brightness(100%) contrast(94%); + transform: translateY(-2px); + } + } + + .icon--facebook { + background-image: url(../images/social-icons/facebook.png); + } + + .icon--twitter { + background-image: url(../images/social-icons/twitter.png); + } + + .icon--instagram { + background-image: url(../images/social-icons/instagram.png); + } +} diff --git a/src/styles/blocks/_container.scss b/src/styles/blocks/_container.scss new file mode 100644 index 0000000000..d99224da01 --- /dev/null +++ b/src/styles/blocks/_container.scss @@ -0,0 +1,16 @@ +.container { + box-sizing: border-box; + width: 100%; + max-width: 100%; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } + + @include on-desktop { + max-width: 1280px; + padding-inline: 55px; + margin-inline: auto; + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 0000000000..e064be1d70 --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,65 @@ +.footer { + background-color: $hd-cs-ft-bg-color; +} + +.footer__content { + @include page-grid; + padding-block: 80px 64px; + row-gap: 40px; + + @include on-tablet { + padding-block: 120px 80px; + row-gap: 48px; + } + + @include on-desktop-small { + align-items: center; + row-gap: 0; + } +} + +.footer__logo { + grid-column: 1 / -1; + line-height: 0; + text-decoration: none; + + @include on-desktop-small { + grid-column: 1 / 2; + } +} + +.footer__logo img { + display: block; + width: $logo-width; + height: auto; + transform: scale(1); + transform-origin: center; +} + +.footer__logo:hover img { + animation: logo-pop 0.9s cubic-bezier(0.22, 1, 0.36, 1); +} + +.footer__nav.nav { + grid-column: 1 / -1; + display: flex; + flex-wrap: wrap; + align-items: center; + row-gap: 20px; + column-gap: 24px; + + @include on-tablet { + justify-content: center; + row-gap: 0; + column-gap: 40px; + width: 100%; + } + + @include on-desktop-small { + grid-column: 2 / -1; + margin-left: auto; + justify-content: flex-end; + flex-wrap: nowrap; + column-gap: 48px; + } +} diff --git a/src/styles/blocks/_home.scss b/src/styles/blocks/_home.scss new file mode 100644 index 0000000000..a6e29f1598 --- /dev/null +++ b/src/styles/blocks/_home.scss @@ -0,0 +1,93 @@ +.home { + position: relative; + background-color: $hd-cs-ft-bg-color; + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; + + &__content { + padding-top: 28px; + padding-bottom: 48px; + + @include on-tablet { + padding-top: 36px; + padding-bottom: 147px; + } + @include on-desktop { + flex-direction: column; + justify-content: center; + width: 362px; + padding-top: 0; + padding-bottom: 0; + display: flex; + height: calc(100vh - 125px); + max-height: 800px; + } + } + + &__title { + letter-spacing: 1px; + color: $hd-subtitle-title-color; + font-size: 52px; + line-height: 120%; + font-family: $font-family; + font-weight: 700; + transform: translateX(0); + opacity: 1; + margin: 0; + } + + &__subtitle { + margin-top: 32px; + margin-bottom: 72px; + color: $hd-subtitle-title-color; + font-size: 18px; + line-height: 150%; + font-family: 'Open Sans'; + font-weight: 500; + transform: translateX(0); + opacity: 1; + + @include on-tablet { + max-width: 362px; + margin-top: 24px; + margin-bottom: 56px; + } + + @include on-desktop { + margin-top: 32px; + margin-bottom: 84px; + } + } + + &__button--learn-more { + cursor: pointer; + text-transform: none; + background-color: $button-bg-color; + border: none; + border-radius: 8px; + justify-content: center; + align-items: center; + width: 100%; + max-width: 100%; + height: 50px; + display: flex; + opacity: 1; + letter-spacing: 0; + font-family: $font-family; + font-weight: 600; + font-size: 15px; + line-height: 100%; + text-decoration: none; + color: $btn-btn-title-color; + + &:hover { + transform: scale(1.05); + transition: transform 0.5s; + } + + @include on-tablet { + width: 264px; + margin-inline: 0; + } + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 0000000000..bd7bce0a17 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,106 @@ +.menu { + height: 100%; + + &__content { + display: flex; + flex-direction: column; + height: 100%; + } + + &__top { + display: flex; + column-gap: 12px; + align-items: center; + padding-block: 20px; + background-color: $hd-cs-ft-bg-color; + + @include on-design { + padding-top: 48px; + padding-inline: 227px; + } + } + + &__logo { + line-height: 0; + text-decoration: none; + } + + &__bottom { + flex-direction: column; + flex-grow: 1; + justify-content: center; + row-gap: 32px; + align-items: center; + display: flex; + } + + &__nav { + display: flex; + flex-direction: column; + row-gap: 32px; + align-items: center; + } + + .nav__item { + font-family: $font-family; + text-decoration: none; + font-weight: 700; + color: $hd-subtitle-title-color; + transition: transform 0.3s; + font-size: 13px; + line-height: 1.5; + letter-spacing: 3px; + text-transform: uppercase; + + &:hover { + transform: translateY(-4px); + } + } + + &__hire--us { + padding-bottom: 10px; + display: inline-block; + position: relative; + font-family: $font-family; + font-weight: 700; + font-size: 13px; + line-height: 1.5; + letter-spacing: 3px; + text-transform: uppercase; + color: $hd-subtitle-title-color; + text-decoration: none; + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 2px; + background-color: $button-bg-color; + bottom: 0; + left: 0; + display: block; + } + + transition: transform 0.3s ease; + + &:hover { + transform: translateY(-4px); + } + } + + &__close { + display: block; + line-height: 0; + text-decoration: none; + cursor: pointer; + filter: brightness(0) invert(1); + } +} + +.icon { + aspect-ratio: 1/1; + background-size: cover; + width: 18px; + display: block; + transition: transform 0.3s; +} diff --git a/src/styles/blocks/_our-expertise.scss b/src/styles/blocks/_our-expertise.scss new file mode 100644 index 0000000000..a29623d05d --- /dev/null +++ b/src/styles/blocks/_our-expertise.scss @@ -0,0 +1,96 @@ +.our-expertise { + background-color: #ffffff; + border-radius: 30px; + display: block; + opacity: 1; + transform: translateY(0) scale(1); + + &__content { + row-gap: 56px; + display: grid; + padding-block: 72px; + + @include on-tablet { + padding-block: 128px; + row-gap: 64px; + } + } + + &__title { + @extend %fm-poppins_w-600_fs-44_lh-120_c-253757; + text-align: center; + + @include on-tablet { + font-size: 52px; + line-height: 150%; + } + } + + &__cards-content { + row-gap: 56px; + --columns: 2; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + display: grid; + opacity: 1; + + @include on-tablet { + --columns: 6; + column-gap: 30px; + row-gap: 72px; + } + + @include on-desktop-small { + --columns: 12; + column-gap: 40px; + justify-content: space-between; + } + } + + &__card { + flex-direction: column; + align-items: center; + display: flex; + grid-column: 1 / -1; + + transition: transform 0.3s ease-in-out; + + &.reveal.is-visible:hover, + &:hover { + transform: translateY(-10px); + } + + @include on-desktop-small { + grid-column: span 4; + } + } + + &__card-photo { + width: 166px; + aspect-ratio: 1 / 1; + border-radius: 30px; + } + + &__card-title { + @extend %fm-poppins_w-600_fs-20_lh-140_c-253757; + margin-bottom: 16px; + margin-top: 32px; + text-align: center; + } + + &__card-text { + @extend %fm-opensans_w-400_fs-14_lh-150_c-6C788B; + text-align: center; + margin-inline: auto; + width: 100%; + max-width: 280px; + + @include on-tablet { + max-width: 364px; + } + + @include on-desktop-small { + max-width: 380px; + } + } +} diff --git a/src/styles/blocks/_page-menu.scss b/src/styles/blocks/_page-menu.scss new file mode 100644 index 0000000000..c60c8f1ec5 --- /dev/null +++ b/src/styles/blocks/_page-menu.scss @@ -0,0 +1,34 @@ +@import 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'; + +.page { + scroll-behavior: smooth; + font-family: Poppins, Helvetica, sans-serif; + overflow-x: hidden; + + &__body { + background-color: $c-gray; + min-height: 320px; + margin: 0; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 100vh; + z-index: 1000; + background-color: $hd-cs-ft-bg-color; + opacity: 0; + visibility: hidden; + transform: translateY(-100%); + transition: all 0.5s ease-in-out; + + &--is-open { + opacity: 1; + visibility: visible; + transform: translateY(0); + overflow: hidden; + } + } +} diff --git a/src/styles/blocks/_services.scss b/src/styles/blocks/_services.scss new file mode 100644 index 0000000000..e874c3129d --- /dev/null +++ b/src/styles/blocks/_services.scss @@ -0,0 +1,159 @@ +.services { + @include page-grid; + + @include padding-block-section-bigger; + + padding-bottom: 0; + + row-gap: 48px; + + @include on-tablet { + row-gap: 56px; + } + + @include on-desktop-small { + padding-bottom: 132px; + row-gap: 176px; + } + + @include on-desktop { + row-gap: 226px; + } + + &__top { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop-small { + grid-column: 1 / 5; + gap: 20px; + } + } + + &__sub-title { + @extend %fm-poppins_w-700_fs-13_lh-100_c-C0CDD7; + } + + &__title { + margin-top: 16px; + margin-bottom: 24px; + @extend %fm-poppins_w-600_fs-32_lh-150_c-253757; + } + + &__text { + margin: 0; + @extend %fm-opensans_w-400_fs-14_lh-150_c-6C788B; + } + + &__bottom { + grid-column: 1 / -1; + display: grid; + gap: 30px; + + @include on-tablet { + grid-template-columns: repeat(2, 1fr); + grid-column: span 6; + } + + @include on-desktop-small { + grid-column: 6 / -1; + gap: 20px; + } + } + + &__card { + --stagger: 0px; + transform: translateY(var(--stagger)); + + background-color: #ffffff; + border-radius: 16px; + padding: 32px; + box-sizing: border-box; + display: flex; + flex-direction: column; + height: 264px; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; + + &:hover { + transform: translateY(calc(var(--stagger) - 8px)); + box-shadow: 0 8px 24px rgba($vector-section-title-color, 0.12); + } + + @include on-tablet { + &:nth-child(2), + &:nth-child(4) { + --stagger: -132px; + } + } + + @include on-desktop-small { + &:nth-child(2), + &:nth-child(4) { + --stagger: 0px; + } + + &:nth-child(1), + &:nth-child(3) { + --stagger: 132px; + } + } + } + + &__card-number { + background-color: $body-bg-color; + border-radius: 23px; + padding: 2px 12px; + width: fit-content; + height: 20px; + display: flex; + align-items: center; + @extend %fm-poppins_w-700_fs-13_lh-100_c-2060F6; + } + + &__card-text { + margin-top: 24px; + margin-bottom: 32px; + @extend %fm-opensans_w-600_fs-13_lh-150_c-6C788BF; + } + + &__card-action { + color: $vector-section-title-color; + justify-content: left; + align-items: center; + column-gap: 16px; + width: fit-content; + display: flex; + text-decoration: none; + cursor: pointer; + margin-top: auto; + @extend %fm-poppins_w-600_fs-15_lh-100_c-FFFFFF; + } + + &__card-circle { + aspect-ratio: 1 / 1; + background-color: $button-bg-color; + justify-content: center; + align-items: center; + width: 40px; + display: flex; + border-radius: 100%; + } +} + +.icon { + aspect-ratio: 1 / 1; + background-size: cover; + width: 16px; + display: block; + transform: scale(1); + transition: transform 0.3s ease; +} + +.icon--arow-right-white { + background-image: url(../images/service/vector-right.svg); +} diff --git a/src/styles/blocks/_slider.scss b/src/styles/blocks/_slider.scss new file mode 100644 index 0000000000..9b9f56e7c1 --- /dev/null +++ b/src/styles/blocks/_slider.scss @@ -0,0 +1,132 @@ +.slider { + position: relative; + right: 0; + bottom: 0; + width: 100%; + height: 390px; + border-radius: 30px; + overflow: hidden; + z-index: 5; + transform: translateY(0); + opacity: 1; + + @include on-desktop-small { + position: absolute; + right: 0; + bottom: 0; + width: 50%; + height: calc(100vh - 125px); + max-height: 800px; + border-radius: 30px 0 30px 0; + } + + .swiper { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; + list-style: none; + padding: 0; + display: block; + } + + .swiper-wrapper { + position: relative; + width: 100%; + height: 100%; + z-index: 1; + display: flex; + transition-property: transform; + box-sizing: content-box; + } + + .swiper-slide { + flex-shrink: 0; + width: 100%; + height: 100%; + position: relative; + } + + &__item { + height: 390px; + width: 100%; + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + + &__slider-text { + color: $hd-subtitle-title-color; + z-index: 10; + font-family: $font-family; + font-size: 14px; + line-height: 140%; + position: absolute; + bottom: 24px; + left: 20px; + pointer-events: none; + margin: 0; + + &::before { + content: 'Intro'; + display: block; + letter-spacing: 3px; + text-transform: uppercase; + font-size: 13px; + font-weight: 700; + margin-bottom: 8px; + } + + @include on-desktop { + left: 120px; + bottom: 24px; + } + } + + &__navigation { + cursor: pointer; + z-index: 2000; + background-color: $hd-subtitle-title-color; + border-radius: 50%; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + transition: background-color 0.3s; + display: flex; + position: absolute; + + &--prev { + bottom: 132px; + left: 20px; + + @include on-desktop { + left: 20px; + bottom: 48px; + } + } + + &--next { + bottom: 132px; + left: 68px; + + @include on-desktop { + left: 68px; + bottom: 48px; + } + } + + img { + width: 6px; + height: auto; + } + + &:active { + background-color: $button-bg-color; + } + } +} diff --git a/src/styles/blocks/_testimonials.scss b/src/styles/blocks/_testimonials.scss new file mode 100644 index 0000000000..ac8d505564 --- /dev/null +++ b/src/styles/blocks/_testimonials.scss @@ -0,0 +1,205 @@ +.testimonials { + @include page-grid; + @include padding-block-section-bigger; + + &__top { + grid-column: 1 / -1; + } + + &__sub-title { + margin: 0 0 16px 0; + @extend %fm-poppins_w-700_fs-13_lh-100_c-C0CDD7; + } + + &__title { + margin: 0; + @extend %fm-poppins_w-600_fs-32_lh-150_c-253757; + + @include on-tablet { + width: 200px; + max-width: 100%; + } + } + + &__content { + grid-column: 1 / -1; + display: grid; + row-gap: 24px; + margin-top: 48px; + justify-items: center; + } + + &__card { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + text-align: center; + background-color: $card-bg-color; + border-radius: 30px; + overflow: visible; + width: 100%; + max-width: 280px; + justify-self: center; + box-sizing: border-box; + transition: transform 0.3s ease-in-out; + + &.reveal.is-visible:hover, + &:hover { + transform: translateY(-10px); + } + + @include on-tablet { + max-width: 558px; + } + } + + &__quotes-img { + display: block; + } + + @include on-tablet { + &__content { + margin-top: 56px; + row-gap: 30px; + column-gap: 30px; + } + } + + @include on-desktop-small { + &__content { + margin-top: 85px; + row-gap: 0; + column-gap: 20px; + grid-template-columns: repeat(3, minmax(0, 296px)); + justify-content: center; + justify-items: stretch; + } + + &__card { + grid-column: auto; + max-width: 296px; + width: 100%; + padding-inline: 44px; + } + } + + @include on-desktop { + &__content { + grid-template-columns: repeat(3, minmax(0, 362px)); + } + + &__card { + max-width: 362px; + } + } + + &__card-text { + margin: 0; + @extend %fm-opensans_w-600_fs-13_lh-150_c-6C788BF; + width: 196px; + margin-inline: auto; + + @include on-tablet { + width: 362px; + } + + @include on-desktop-small { + width: 196px; + min-height: 96px; + } + + @include on-desktop { + width: 250px; + } + } + + &__card-name { + margin: 0; + margin-top: 16px; + @extend %fm-opensans_w-600_fs-13_lh-150_c-253757; + } + + &__card-profesion { + margin: 4px 0 32px 0; + @extend %fm-poppins_w-700_fs-13_lh-100_c-C0CDD7; + } + + &__quotes { + aspect-ratio: 1 / 1; + margin-inline: auto; + width: 21px; + display: block; + margin-top: 0; + margin-bottom: 11px; + } + + &__card-photo-wrapper { + margin-top: 36px; + display: flex; + flex-direction: column; + align-items: center; + } + + &__card-photo { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + &__photo-holder { + position: relative; + width: max-content; + margin-inline: auto; + margin-top: 32px; + margin-bottom: 68px; + + &::before, + &::after { + content: ''; + position: absolute; + z-index: 0; + width: 100%; + height: 44px; + border-radius: 12px; + background-color: $button-bg-color; + } + + &::before { + top: 12%; + left: 0; + transform: translate(-28%, -35%) rotate(-60deg); + } + + &::after { + bottom: 12%; + right: 0; + transform: translate(28%, 35%) rotate(-60deg); + } + } + + &__photo { + position: relative; + z-index: 1; + display: block; + width: 110px; + height: 110px; + border-radius: 50%; + object-fit: cover; + + @include on-tablet { + width: 140px; + height: 140px; + } + + @include on-desktop-small { + width: 110px; + height: 110px; + } + + @include on-desktop { + width: 140px; + height: 140px; + } + } +} diff --git a/src/styles/blocks/header/_center.scss b/src/styles/blocks/header/_center.scss new file mode 100644 index 0000000000..b66706d74d --- /dev/null +++ b/src/styles/blocks/header/_center.scss @@ -0,0 +1,9 @@ +.header__center { + align-items: center; + display: none; + + @include on-desktop { + display: flex; + column-gap: 48px; + } +} diff --git a/src/styles/blocks/header/_header.scss b/src/styles/blocks/header/_header.scss new file mode 100644 index 0000000000..7b88820608 --- /dev/null +++ b/src/styles/blocks/header/_header.scss @@ -0,0 +1,29 @@ +.header { + z-index: 500; + background-color: $hd-cs-ft-bg-color; + position: sticky; + top: 0; + width: 100%; + transition: transform 0.5s ease-in-out; + + &--hidden { + transform: translateY(-100%); + } + + &__content { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 20px; + + @include on-desktop { + padding-block: 48px; + } + } + + &__top--left { + display: flex; + align-items: center; + column-gap: 32px; + } +} diff --git a/src/styles/blocks/header/_nav.scss b/src/styles/blocks/header/_nav.scss new file mode 100644 index 0000000000..009287189e --- /dev/null +++ b/src/styles/blocks/header/_nav.scss @@ -0,0 +1,41 @@ +.header__burger { + display: block; + width: 18px; + height: 11px; + background-image: url('../images/icons/icon-menu.svg'); + background-size: contain; + background-repeat: no-repeat; + border: none; + background-color: transparent; + cursor: pointer; + + @include on-desktop { + display: none !important; + } +} + +.nav { + display: none; + + @include on-desktop { + display: flex; + align-items: center; + column-gap: 48px; + } + + &__item { + font-family: $font-family; + text-decoration: none; + font-weight: 700; + color: $hd-subtitle-title-color; + transition: transform 0.3s; + font-size: 13px; + line-height: 1.5; + letter-spacing: 3px; + text-transform: uppercase; + + &:hover { + transform: translateY(-4px); + } + } +} diff --git a/src/styles/blocks/header/_right.scss b/src/styles/blocks/header/_right.scss new file mode 100644 index 0000000000..ca5d9b141a --- /dev/null +++ b/src/styles/blocks/header/_right.scss @@ -0,0 +1,30 @@ +.header__hire--us { + padding-bottom: 10px; + display: inline-block; + position: relative; + font-family: $font-family; + font-weight: 700; + font-size: 13px; + line-height: 1.5; + letter-spacing: 3px; + text-transform: uppercase; + color: $hd-subtitle-title-color; + text-decoration: none; + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 2px; + background-color: $button-bg-color; + bottom: 0; + left: 0; + display: block; + } + + transition: transform 0.3s ease; + + &:hover { + transform: translateY(-4px); + } +} diff --git a/src/styles/blocks/header/_top.scss b/src/styles/blocks/header/_top.scss new file mode 100644 index 0000000000..8a1ea34e87 --- /dev/null +++ b/src/styles/blocks/header/_top.scss @@ -0,0 +1,26 @@ +@keyframes logo-pop { + 0% { + transform: scale(1); + } + 35% { + transform: scale(1.12); + } + 62% { + transform: scale(1.12); + } + 100% { + transform: scale(1); + } +} + +.logo { + display: block; + width: $logo-width; + height: auto; + transform: scale(1); + transform-origin: center; + + &:hover { + animation: logo-pop 0.9s cubic-bezier(0.22, 1, 0.36, 1); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..209d1680b9 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,48 @@ -@import 'utils'; +@import 'utils/vars'; +@import 'utils/mixins'; @import 'fonts'; -@import 'typography'; +@import 'utils/extends'; +@import 'utils/typography'; +@import 'blocks/container'; +@import 'blocks/header/header'; +@import 'blocks/header/right'; +@import 'blocks/header/center'; +@import 'blocks/header/nav'; +@import 'blocks/menu'; +@import 'blocks/home'; +@import 'blocks/slider'; +@import 'blocks/header/top'; +@import 'blocks/page-menu'; +@import 'blocks/about-us'; +@import 'blocks/our-expertise'; +@import 'blocks/services'; +@import 'blocks/testimonials'; +@import 'blocks/banner'; +@import 'blocks/contact-us'; +@import 'blocks/footer'; + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + display: block; + margin: 0; + border: 0; + padding: 0; + font: inherit; + line-height: 1; +} + +.reveal { + opacity: 0; + transform: translateY(20px) scale(0.98); + transition: + opacity 0.6s ease, + transform 0.6s ease; +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0) scale(1); } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3e..59db7c195a 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -2,3 +2,61 @@ font-family: Roboto, sans-serif; font-weight: 400; } + +%button { + display: flex; + align-items: center; + justify-content: center; + background-color: #2060f6; + width: 100%; + max-width: 100%; + height: 56px; + border: none; + cursor: pointer; + border-radius: 8px; + text-transform: none; + text-decoration: none; + @extend %fm-poppins_w-600_fs-15_lh-100_c-FFFFFF; + + @include on-tablet { + width: 264px; + } + + @include hover(transform, scale(1.1)); +} + +%input { + box-sizing: border-box; + background-color: $hd-cs-ft-bg-color; + height: 40px; + border: none; + border-bottom: 2px solid $hd-subtitle-title-color; + @extend %fm-poppins_w-600_fs-15_lh-100_c-FFFFFF; + + padding: 0 0 12px; + outline: none; + transition: border-color $effect-duration; + + &::placeholder { + font: inherit; + letter-spacing: inherit; + color: $third-text-color; + opacity: 1; + } + &:focus::placeholder { + opacity: 0.7; + } + + &:hover, + &:focus { + border-color: $button-bg-color; + } + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 1000px $hd-cs-ft-bg-color inset !important; + -webkit-text-fill-color: $hd-subtitle-title-color !important; + transition: background-color 5000s ease-in-out 0s; + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..084b0f7940 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -2,5 +2,102 @@ transition: #{$_property} 0.3s; &:hover { #{$_property}: $_toValue; + cursor: pointer; + } +} + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-desktop-small { + @media (min-width: 1024px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin on-design { + @media (min-width: 1600px) { + @content; + } +} + +@mixin on-large { + @media (min-width: 2560px) { + @content; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + column-gap: 30px; + + --columns: 6; + } + + @include on-desktop-small { + --columns: 12; + } +} + +@mixin padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } + + @include on-desktop { + padding-inline: 55px; + } +} + +@mixin padding-block-section-bigger { + padding-block: 120px; + @include on-tablet { + padding-block: 148px; + } +} +@mixin padding-block-section-smaller { + padding-block: 72px; + @include on-tablet { + padding-block: 128px; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px) scale(0.9); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes flowerReveal { + from { + opacity: 0; + transform: translateY(40px) scale(0.9); + } + to { + opacity: 1; + transform: translateY(0) scale(1); } } diff --git a/src/styles/utils/_typography.scss b/src/styles/utils/_typography.scss new file mode 100644 index 0000000000..bf27c0d04e --- /dev/null +++ b/src/styles/utils/_typography.scss @@ -0,0 +1,184 @@ +h1 { + @extend %h1; + margin: 0; +} + +body { + display: block; + margin: 0; + border: 0; + padding: 0; + font: inherit; + line-height: 1; +} + +%fm-poppins_w-700_fs-13_lh-150_c-FFFFFF { + font-size: 13px; + font-weight: 700; + font-family: Poppins; + line-height: 150%; + letter-spacing: 3px; + color: $hd-subtitle-title-color; +} + +%fm-poppins_w-600_fs-52_lh-120_c-FFFFFF { + font-size: 52px; + font-weight: 600; + font-family: Poppins; + line-height: 120%; + letter-spacing: -2px; + color: $hd-subtitle-title-color; +} + +%fm-poppins_w-600_fs-52_lh-150_c-253757 { + font-size: 52px; + font-weight: 600; + font-family: Poppins; + line-height: 150%; + letter-spacing: 0; + color: $vector-section-title-color; +} + +%fm-poppins_w-600_fs-15_lh-100_c-FFFFFF { + font-family: Poppins; + font-weight: 600; + font-size: 15px; + line-height: 100%; + letter-spacing: 0; + color: $hd-subtitle-title-color; +} + +%fm-poppins_w-600_fs-32_lh-150_c-253757 { + font-family: Poppins; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0; + color: $vector-section-title-color; +} +%fm-poppins_w-600_fs-32_lh-130_c-ffffff { + font-family: Poppins; + font-weight: 600; + font-size: 32px; + line-height: 130%; + letter-spacing: 0; + color: $hd-subtitle-title-color; +} + +%fm-poppins_w-600_fs-44_lh-120_c-253757 { + font-family: Poppins; + font-weight: 600; + font-size: 44px; + line-height: 120%; + letter-spacing: 0; + color: $vector-section-title-color; +} +%fm-poppins_w-600_fs-20_lh-140_c-253757 { + font-family: Poppins; + font-weight: 600; + font-size: 20px; + line-height: 140%; + letter-spacing: 0; + text-align: center; + color: $vector-section-title-color; +} +%fm-poppins_w-600_fs-13_lh-100_c-C0CDD7 { + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + color: $third-text-color; +} + +%fm-poppins_w-700_fs-13_lh-100_c-C0CDD7 { + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + color: $third-text-color; +} +%fm-poppins_w-700_fs-13_lh-100_c-c0cdd7 { + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + color: $third-text-color; +} + +%fm-poppins_w-700_fs-13_lh-100_c-2060F6 { + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + color: $button-bg-color; +} + +%fm-opensans_w-400_fs-18_lh-150_c-FFFFFF { + color: $hd-subtitle-title-color; + font-family: Open Sans; + font-weight: 400; + font-size: 18px; + line-height: 150%; + letter-spacing: 0; +} + +%fm-opensans_w-600_fs-22_lh-150_c-6C788BF { + color: $main-text-color; + font-family: Open Sans; + font-weight: 600; + font-size: 22px; + line-height: 150%; + letter-spacing: 0; +} + +%fm-opensans_w-400_fs-14_lh-150_c-6C788B { + color: $main-text-color; + font-family: Open Sans; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0; +} + +%fm-opensans_w-600_fs-13_lh-150_c-6C788BF { + color: $main-text-color; + font-family: Open Sans; + font-weight: 600; + font-size: 13px; + line-height: 150%; + letter-spacing: 0; +} +%fm-opensans_w-600_fs-13_lh-150_c-253757 { + color: $vector-section-title-color; + font-family: Open Sans; + font-weight: 600; + font-size: 13px; + line-height: 150%; + letter-spacing: 0; +} + +%fm-opensans_w-600_fs-24_lh-150_c-6C788BF { + color: $main-text-color; + font-family: Open Sans; + font-weight: 600; + font-size: 24px; + line-height: 150%; + letter-spacing: 0; +} +%fm-opensans_w-600_fs-24_lh-150_c-ffffff { + color: $hd-subtitle-title-color; + font-family: Open Sans; + font-weight: 600; + font-size: 24px; + line-height: 150%; + letter-spacing: 0; + text-decoration: none; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..cc897a9efa 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,16 @@ $c-gray: #eee; +$vector-section-title-color: #253757; +$hd-cs-ft-bg-color: #2c2c2c; +$hd-subtitle-title-color: #ffffff; +$btn-btn-title-color: #ffffff; +$button-bg-color: #2060f6; +$font-family: Poppins, sans-serif; +$font-family-OS: 'Open Sans', sans-serif; +$main-text-color: #6c788b; +$body-bg-color: #f2f6fa; +$logo-width: 46px; +$logo-height: 28px; +$top-bar-button-width: 67px; +$effect-duration: 0.3s; +$third-text-color: #c0cdd7; +$card-bg-color: #ffffff;