diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /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/checklist.md b/checklist.md index 4b7562fd7..9ea300fa3 100644 --- a/checklist.md +++ b/checklist.md @@ -3,19 +3,20 @@ ## Tech review -1. Add favicon -2. Add a smooth scroll for the whole page (`scroll-behavior: smooth;`) -3. Menu on mobile should contain navigation links. [Menu example](http://joxi.ru/VrwJRDPcoOzEZA) -4. Logos should become bigger on hover and lead to the first section -5. Icons in the “about us” block should be ***animated*** on hover -6. The arrow icon in the footer should increase when hovering and when clicked smoothly scroll the page to the top -7. Under the button “see more about us”, the strip should stretch to the full width when hovering and lead to the CrazyBaby website -8. All interactive elements(**links, buttons, pictures, icons**) ***should have a hover effect and cursor pointer***. User must intuitively understand that he can interact with them -9. Make sure when you click on logo there is no 404 error (Use `href="#"` in `anchor tag`) -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 +1. Add favicon - ok ! +2. Add a smooth scroll for the whole page (`scroll-behavior: smooth;`) ok ! +3. Menu on mobile should contain navigation links. [Menu example](http://joxi.ru/VrwJRDPcoOzEZA) ok ! +4. Logos should become bigger on hover and lead to the first section ok ! +5. Icons in the “about us” block should be ***animated*** on hover - ok ! +6. The arrow icon in the footer should increase when hovering and when clicked smoothly scroll the page to the top -ok ! +7. Under the button “see more about us”, the strip should stretch to the full width when hovering and lead to the CrazyBaby website - not +8. All interactive elements(**links, buttons, pictures, icons**) ***should have a hover effect and cursor pointer***. User must intuitively understand that he can interact with them -ok ! +9. Make sure when you click on logo there is no 404 error (Use `href="#"` in `anchor tag`) ok ! +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 - ok ! +11. The form shouldn’t submit empty - ok ! 12. After autocomplete the form, change the [default styles](http://joxi.ru/xAeW7w9CMp9GPm). Read more about [changing autocomplete styles](https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/) -13. OPTIONAL: After everything is done you can add a slider in the “features” section (for mobile version) +- ok! +13. OPTIONAL: After everything is done you can add a slider in the “features” section (for mobile version) NO ## HR review diff --git a/index.html b/index.html index d339e6856..b30d05c03 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,430 @@ - - - - Title - - - -

Hello Mate Academy

- - - + + + + + CrazyBaby + + + + + + + +
+ + + +
+
+ background of two soundbox +
+
+

+ Futuristic Wireless Speaker +

+

+ Luna’s performance is balanced and smooth in all frequency ranges which makes the music both naturally + pleasant and distinctly more layered. +

+
+
+ +
+ +
+ +
+

+ Futuristic Design +

+

To give Luna a truly flawless look, we specifically picked + aircraft grade aluminum as its material and adopted both three-dimensional stretch-bending technology and a + high precision cold forging technique.

+
+
+
+ +
+

+ Tweeter Speaker System +

+

To deliver a more layered sound performance better than a sole + full-range speaker, our team equipped Luna with one more tweeter speaker responsible for high-frequency + sound independently.

+
+
+
+ +
+

+ Multiroom System

+

Luna is natively compatible with your home Wi-Fi. Set up + multiple speakers in different rooms to expand your music experience into the entire house.

+
+
+
+ +
+

+ Intuitive Lighting System

+

An intuitive user interface allows you to adjust the hue and + saturation of color for lighting that fits any mood and situation.

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

+ DESIGNED FOR THE FUTURE +

+
+ imagem ilustrativa de technology +
+
+

In 2014, a group of geeky industrial designers, engineering + veterans and acoustic experts formed crazybaby. This is a bunch of passionate people who are crazy enough to + think they can challenge the industry with disruptive audio products.

+ See more about us +
+
+ +
+

+ Luna Eye

+
+ imagem ilustrativa de technology +
+
+

Luna Eye is to the essence of this innovative light and audio + system. It comprises an independent tweeter speaker, a light guiding component, a dome and a ring ornament. +

+ See more about us +
+
+
+ +
+
+ “It really took me by surprise honestly to have such full beautiful sound that coming out of this small compact + device. And with the brush aluminum surface, it feels so familiar. Like my iPhone.” +
+ +
+
+
+
+ photo of martin +
+
Garret Martin
+

Creative Director

+
+
+ +
+

+ features +

+
+
+

Connectivity

+
    +
  • Hands Free Wireless Audio
    • +
  • Bluetooth 4.0 LE
    • +
  • Wi-Fi 2.4 GHz (802.11 b/g/n)
    • +
  • Smart Multiroom System Set Up
    • +
  • Party Mode with 6.0 Units and above
    • +
  • MESHNET Multi Speaker Network
    • +
+
+
+

App Features

+
    +
  • Customize Music Schedule
    • +
  • Wake Up with Favorite Songs
    • +
  • Home Detection Auto Wake Up
    • +
  • Color Wheel
    • +
+
+
+

Sound & Music

+
    +
  • Feel-in-chest Base Power
    • +
  • Lossless Digital Audio Transmission
    • +
  • Easy & Stable Stereo Pairing
    • +
  • Crisp and Clear High Frequency Sound
    • +
  • Streams from Cloud Music and Local Library
    • +
  • Auto Music Playback from Last Song Stopped
    • +
+
+
+ slider para passar os features +
+
+ background de uma caixa de som sendo desmontada +
+
+
+ + +
+

+ DO YOU HAVE ANY QUESTIONS? +

+
+
+ + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ace1ce6c0..606828711 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -60,6 +60,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", @@ -544,6 +545,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" } @@ -592,6 +594,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" }, @@ -633,6 +636,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" } @@ -1315,7 +1319,6 @@ "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", "dev": true, - "peer": true, "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", @@ -1333,7 +1336,6 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -1346,7 +1348,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -1358,15 +1359,13 @@ "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@isaacs/cliui/node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", "dev": true, - "peer": true, "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", @@ -1384,7 +1383,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", "dev": true, - "peer": true, "dependencies": { "ansi-regex": "^6.0.1" }, @@ -1400,7 +1398,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", "dev": true, - "peer": true, "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", @@ -1875,10 +1872,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", @@ -1955,7 +1953,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" } @@ -1984,7 +1981,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" @@ -1998,7 +1994,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", @@ -2012,8 +2007,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", @@ -2075,7 +2069,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", @@ -2092,7 +2085,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" }, @@ -2280,7 +2272,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" } @@ -2587,7 +2578,6 @@ "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", "dev": true, "optional": true, - "peer": true, "engines": { "node": ">=14" } @@ -3073,6 +3063,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" } @@ -3156,6 +3147,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3725,8 +3717,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", @@ -3777,8 +3768,7 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz", "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==", - "dev": true, - "peer": true + "dev": true }, "node_modules/browserslist": { "version": "4.28.0", @@ -3799,6 +3789,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -4797,7 +4788,6 @@ "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz", "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==", "dev": true, - "peer": true, "engines": { "node": ">=0.3.1" } @@ -4939,8 +4929,7 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/ecc-jsbn": { "version": "0.1.2", @@ -4990,6 +4979,7 @@ "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz", "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==", "dev": true, + "peer": true, "dependencies": { "ansi-colors": "^4.1.1", "strip-ansi": "^6.0.1" @@ -5274,6 +5264,7 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -5329,6 +5320,7 @@ "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz", "integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==", "dev": true, + "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -5431,6 +5423,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz", "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -5485,6 +5478,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz", "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==", "dev": true, + "peer": true, "dependencies": { "eslint-plugin-es": "^3.0.0", "eslint-utils": "^2.0.0", @@ -5535,6 +5529,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.3.1.tgz", "integrity": "sha512-bY2sGqyptzFBDLh/GMbAxfdJC+b0f23ME63FOE4+Jao0oZ3E1LEwFtWJX/1pGMJLiTtrSSern2CRM/g+dfc0eQ==", "dev": true, + "peer": true, "engines": { "node": ">=6" } @@ -5558,6 +5553,7 @@ "url": "https://feross.org/support" } ], + "peer": true, "peerDependencies": { "eslint": ">=5.0.0" } @@ -5926,8 +5922,7 @@ "type": "opencollective", "url": "https://opencollective.com/fastify" } - ], - "peer": true + ] }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -6099,7 +6094,6 @@ "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz", "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==", "dev": true, - "peer": true, "bin": { "flat": "cli.js" } @@ -6144,7 +6138,6 @@ "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", "dev": true, - "peer": true, "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" @@ -6161,7 +6154,6 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "dev": true, - "peer": true, "engines": { "node": ">=14" }, @@ -6697,7 +6689,6 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true, - "peer": true, "bin": { "he": "bin/he" } @@ -7620,7 +7611,6 @@ "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", "dev": true, - "peer": true, "dependencies": { "@isaacs/cliui": "^8.0.2" }, @@ -8987,7 +8977,6 @@ "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", "dev": true, - "peer": true, "engines": { "node": ">=16 || 14 >=14.17" } @@ -8997,7 +8986,6 @@ "resolved": "https://registry.npmjs.org/mocha/-/mocha-11.7.5.tgz", "integrity": "sha512-mTT6RgopEYABzXWFx+GcJ+ZQ32kp4fMf0xvpZIIfSq9Z8lC/++MtcCnQ9t5FP2veYEP95FIYSvW+U9fV4xrlig==", "dev": true, - "peer": true, "dependencies": { "browser-stdout": "^1.3.1", "chokidar": "^4.0.1", @@ -9033,15 +9021,13 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true, - "peer": true + "dev": true }, "node_modules/mocha/node_modules/brace-expansion": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "dev": true, - "peer": true, "dependencies": { "balanced-match": "^1.0.0" } @@ -9051,7 +9037,6 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", "dev": true, - "peer": true, "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" @@ -9068,7 +9053,6 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==", "dev": true, - "peer": true, "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", @@ -9089,7 +9073,6 @@ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", "dev": true, - "peer": true, "dependencies": { "argparse": "^2.0.1" }, @@ -9102,7 +9085,6 @@ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", "dev": true, - "peer": true, "dependencies": { "p-locate": "^5.0.0" }, @@ -9118,7 +9100,6 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dev": true, - "peer": true, "dependencies": { "brace-expansion": "^2.0.1" }, @@ -9134,7 +9115,6 @@ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", "dev": true, - "peer": true, "dependencies": { "p-limit": "^3.0.2" }, @@ -9150,7 +9130,6 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", "dev": true, - "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -9166,7 +9145,6 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", "dev": true, - "peer": true, "engines": { "node": ">=12" } @@ -9871,8 +9849,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "dev": true, - "peer": true + "dev": true }, "node_modules/parent-module": { "version": "1.0.1", @@ -9966,7 +9943,6 @@ "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", "dev": true, - "peer": true, "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" @@ -9982,8 +9958,7 @@ "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", - "dev": true, - "peer": true + "dev": true }, "node_modules/path-to-regexp": { "version": "1.9.0", @@ -10097,6 +10072,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -10175,6 +10151,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" @@ -10212,6 +10189,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.1.tgz", "integrity": "sha512-RWKXE4qB3u5Z6yz7omJkjWwmTfLdcbv44jUVHC5NpfXwFGzvpQM798FGv/6WNK879tc+Cn0AAyherCl1KjbyZQ==", "dev": true, + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -10431,7 +10409,6 @@ "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", "dev": true, - "peer": true, "dependencies": { "safe-buffer": "^5.1.0" } @@ -10921,6 +10898,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", @@ -10962,7 +10940,6 @@ "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "dev": true, - "peer": true, "dependencies": { "randombytes": "^2.1.0" } @@ -11360,7 +11337,6 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", "dev": true, - "peer": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -11444,7 +11420,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", "dev": true, - "peer": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -11518,6 +11493,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", @@ -12058,6 +12034,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -12353,8 +12330,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", @@ -12576,6 +12552,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -12933,8 +12910,7 @@ "version": "9.3.4", "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.3.4.tgz", "integrity": "sha512-TmPRQYYSAnnDiEB0P/Ytip7bFGvqnSU6I2BcuSw7Hx+JSg/DsUi5ebYfc8GYaSdpuvOcEs6dXxPurOYpe9QFwg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/wrap-ansi": { "version": "6.2.0", @@ -12956,7 +12932,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "dev": true, - "peer": true, "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -13039,20 +13014,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", @@ -13085,7 +13046,6 @@ "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz", "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==", "dev": true, - "peer": true, "dependencies": { "camelcase": "^6.0.0", "decamelize": "^4.0.0", @@ -13101,7 +13061,6 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -13114,7 +13073,6 @@ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz", "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -13127,7 +13085,6 @@ "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", "dev": true, - "peer": true, "engines": { "node": ">=8" } diff --git a/package.json b/package.json index 19d2ac56e..cd8f44768 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/background/background-about.png b/src/images/background/background-about.png new file mode 100644 index 000000000..60e665fce Binary files /dev/null and b/src/images/background/background-about.png differ diff --git a/src/images/background/background-features-slider.png b/src/images/background/background-features-slider.png new file mode 100644 index 000000000..96d94b4e4 Binary files /dev/null and b/src/images/background/background-features-slider.png differ diff --git a/src/images/background/background-features.png b/src/images/background/background-features.png new file mode 100644 index 000000000..215227c78 Binary files /dev/null and b/src/images/background/background-features.png differ diff --git a/src/images/background/background-quote.png b/src/images/background/background-quote.png new file mode 100644 index 000000000..dd522ddaa Binary files /dev/null and b/src/images/background/background-quote.png differ diff --git a/src/images/background/background-spec.png b/src/images/background/background-spec.png new file mode 100644 index 000000000..79138e778 Binary files /dev/null and b/src/images/background/background-spec.png differ diff --git a/src/images/background/background-technology-2.png b/src/images/background/background-technology-2.png new file mode 100644 index 000000000..9739a8196 Binary files /dev/null and b/src/images/background/background-technology-2.png differ diff --git a/src/images/background/background-technology.png b/src/images/background/background-technology.png new file mode 100644 index 000000000..4be18fdfb Binary files /dev/null and b/src/images/background/background-technology.png differ diff --git a/src/images/background/background-top.png b/src/images/background/background-top.png new file mode 100644 index 000000000..4b05dd50f Binary files /dev/null and b/src/images/background/background-top.png differ diff --git a/src/images/caetano-icon.ico b/src/images/caetano-icon.ico new file mode 100644 index 000000000..94d877ca4 Binary files /dev/null and b/src/images/caetano-icon.ico differ diff --git a/src/images/photo/photo-1.png b/src/images/photo/photo-1.png new file mode 100644 index 000000000..01cd48c29 Binary files /dev/null and b/src/images/photo/photo-1.png differ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..5cfc5b4d0 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..733d32b43 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,16 @@ +.about { + @include page-grid; + + &-back { + grid-column: 1/-1; + + @include on-desktop { + grid-column:3/-3; + } + + &-img { + display: inline-block; + width: 100%; + } + } +} \ No newline at end of file diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..ece467cd8 --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,44 @@ +.benefits { + @include page-grid; + + &-back { + grid-column: 1/-1; + margin-inline: -34px; + + @include on-tablet { + grid-column: 4/span 5; + margin-inline: 0; + } + + @include on-desktop{ + grid-column: 6/-1; + } + + &-img { + display: inline-block; + max-width: 100%; + } + + } + + &-info { + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 3; + grid-row: 1; + } + + @include on-desktop{ + grid-column: span 5; + } + + &-title { + padding-block: 40px 20px; + } + + &-desc { + @include maintext-style; + } + } +} \ No newline at end of file diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..56e4615b9 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,120 @@ +.features { + @include page-grid-nopadd; + + padding-block: 110px; + + @include on-tablet { + padding: 0; + } + + + + &-title { + grid-column: span 4; + padding-bottom: 62px; + padding-inline: 30px; + + @include on-tablet { + grid-column: 1/-1; + + } + + @include on-desktop { + padding: 0; + } + } + + &__container { + grid-column: span 4; + background-color: #D6ECEC; + + @include on-tablet { + position: relative; + display: grid; + grid-column: 1/-1; + grid-template-columns: subgrid; + } + + @include on-desktop{ + row-gap: 56px; + } + + + + &-content { + padding-inline: 30px; + + @include on-tablet { + grid-column: 2/span 3; + padding: 0; + + } + + @include on-desktop { + grid-column: 2/span 4; + + &:nth-child(2) { + grid-column: 7/span 4; + } + } + + &-title { + padding-block: 30px 20px; + color: #0C797A; + } + + &-ul { + display: flex; + flex-direction: column; + gap: 10px; + list-style-position: inside; // Faz a bolinha contar como parte do texto no alinhamento + + @include secondtext-style; + + &-li { + color: #333; + } + } + } + + &-backslider { + display: flex; + justify-content: center; + padding-top: 50px; + + @include on-tablet { + display: inline-block; + grid-column: 2; + padding-bottom: 125px; + } + + + + } + + &-background { + @include on-tablet { + position: absolute; + right: 0; + bottom: 0; + } + + @include on-desktop { + position: inherit; + grid-column: 7/span 5; + } + + &-imagem { + display: block; + width: 100%; + + @include on-tablet { + margin-inline: 0; + background-color: transparent; + } + + } + } + } + +} \ No newline at end of file diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..975a546f1 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,34 @@ +.footer { + @include page-grid; + + &-logo { + display: flex; + grid-column: 1/-1; + gap: 20px; + justify-content: center; + } + + &-desc { + grid-column: 1/-1; + padding-block: 30px 20px; + text-align: center; + + @include secondtext-style; + } + + &-link { + display: flex; + grid-column: 1/-1; + justify-content: center; + padding-bottom: 50px; + &-arrow{ + position: absolute; + right: 5%; + } + } +} + + +.svg-gray { + fill: #4F4F4F; +} diff --git a/src/styles/blocks/presentation.scss b/src/styles/blocks/presentation.scss new file mode 100644 index 000000000..fe94ee5e8 --- /dev/null +++ b/src/styles/blocks/presentation.scss @@ -0,0 +1,63 @@ +.presentation { + @include page-grid; + + padding-block: 110px; + + @include on-desktop{ + padding-block: 170px; + } + &__container { + grid-column: span 4; + text-align: center; + + @include on-desktop { + grid-column: span 3; + } + + &-logo { + display: flex; + justify-content: center; + } + + &-content { + &-title { + padding-block: 40px 20px; + + } + + &-desc { + @include secondtext-style; + } + } + } + + &__nav { + grid-column: 1/-1; + padding-block: 60px; + + &-ul { + display: flex; + flex-direction: row; + gap: 84px; + justify-content: center; + + padding-block: 28px; + + list-style: none; + + &-li { + &-link { + @include third-style; + + color:#333; + text-transform: uppercase; + &:hover { + @include h6-style; + + color:#131313 + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/blocks/questions.scss b/src/styles/blocks/questions.scss new file mode 100644 index 000000000..43d3b8122 --- /dev/null +++ b/src/styles/blocks/questions.scss @@ -0,0 +1,88 @@ +.questions { + @include page-grid; + + padding-bottom: 110px; + + @include on-tablet { + padding-block: 140px; + } + + @include on-desktop { + padding-block: 170px; + } + + &-title { + grid-column: span 4; + padding-bottom: 28px; + + @include on-desktop { + grid-column: span 6; + } + } + + + + &-contact { + display: flex; + grid-column: span 4; + flex-direction: column; + + @include on-desktop { + grid-column: span 6; + } + + &-form { + + &-input { + width: 100%; + height: 48px; + padding-inline: 12px; + border: 1px solid #828282; + + @include maintext-style; + + &::placeholder { + color: #BDBDBD; + } + } + + &-textarea { + resize: vertical; // Permite ao usuário aumentar mas não quebrar a largura + + width: 100%; + min-height: 180px; // Altura generosa para a mensagem + margin-block: 20px 30px; + padding: 20px 12px; + border: 1px solid #828282; + + @include maintext-style; + + &::placeholder { + color: #BDBDBD; + } + } + + + &-button { + width: 35%; + height: 40px; + border: none; + + color: white; + + background-color: #0DB2B3; + + @include button-style; + + } + } + } +} + +input:-webkit-autofill { + /* Muda apenas a cor do fundo (substitua #ffffff pela cor desejada) */ + box-shadow: 0 0 0 1000px #fff inset !important; + + /* Muda apenas a cor do texto */ + -webkit-text-fill-color: #333 !important; +} \ No newline at end of file diff --git a/src/styles/blocks/technology.scss b/src/styles/blocks/technology.scss new file mode 100644 index 000000000..8daea78b3 --- /dev/null +++ b/src/styles/blocks/technology.scss @@ -0,0 +1,107 @@ +.technology { + @include page-grid; + + row-gap: 110px; + padding-block: 110px; + + @include on-desktop { + row-gap: 170px; + padding-block: 170px; + } + + &__container { + grid-column: 1/-1; + + @include on-tablet { + display: grid; + grid-template-columns: subgrid; + + &:nth-child(2) { + // identifica o segundo filho, poderia usar (even) que seria os filhos pares + .technology__container-img { + grid-column: 5/span 4; + grid-row: span 2; + } + + .technology__container-title { + grid-column: 1/span 4; + } + + .technology__container-info { + grid-column: 1/span 4; + } + } + } + + @include on-desktop { + &:nth-child(2) { + // identifica o segundo filho, poderia usar (even) que seria os filhos pares + .technology__container-img { + grid-column: 7/span 6; + grid-row: span 2; + } + + .technology__container-title { + grid-column: 1/span 6; + } + + .technology__container-info { + grid-column: 1/span 6; + } + } + + } + + &-title { + @include on-tablet { + grid-column: 5/span 4; + grid-row: 1; + } + + @include on-desktop { + grid-column: 7/span 6; + } + } + + &-img { + padding-block: 20px; + + @include on-tablet { + grid-column: span 4; + grid-row: span 2; + } + + @include on-desktop { + grid-column: span 6 + } + + &-imagem { + display: inline-block; + width: 100%; + } + } + + &-info { + @include on-tablet { + grid-column: 5/span 4; + grid-row: 2; + } + + @include on-desktop { + grid-column: 7/span 6; + } + + + &-desc { + padding-bottom: 30px; + + @include secondtext-style; + } + + // >>link azul + } + + + + } +} \ No newline at end of file diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 000000000..f62f1a636 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,64 @@ +.testimonials { + @include page-grid; + + &-quote { + position: relative; + z-index: 1; + grid-column: span 4; + + @include quote-style; + + @include on-tablet { + grid-column: 1/-1; + } + + @include on-desktop { + grid-column: 3/-3; + } + + &-background { + &-img { + pointer-events: none; + + position: absolute; + z-index: -1; + + // 1. Move o topo e a esquerda para o meio do pai + top: 50%; + left: 50%; + + // 2. O transform puxa o elemento de volta metade do seu próprio tamanho + transform: translate(-50%, -50%); + + height: 100%; + } + } + } + + &-person { + display: flex; + grid-column: span 4; + flex-direction: column; + align-items: center; + + @include on-tablet { + grid-column: 1/-1; + } + + @include on-desktop { + grid-column: 3/-3; + } + + &-photo { + padding-block: 30px 10px; + } + + &-name { + padding-bottom: 5px + } + + &-profission { + @include secondtext-style; + } + } +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..2c1c518be 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,194 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'nav'; +@import 'blocks/presentation'; +@import 'blocks/benefits'; +@import 'blocks/about'; +@import 'blocks/features'; +@import 'blocks/footer'; +@import 'blocks/questions'; +@import 'blocks/technology'; +@import 'blocks/testimonials'; -body { - background: $c-gray; +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: inter, sans-serif; } + +.page { + scroll-behavior: smooth; + background-color: #F7F7F7; + +} + +h1 { + @include h1-style; +} + +h2 { + @include h2-style; +} + +h3 { + @include h3-style; +} + +h4 { + @include h4-style; +} + +h5 { + @include h5-style; +} + +h6 { + @include h6-style; +} + +// section header +.header { + @include page-grid; + + &-top { + display: flex; + grid-column: 1/-1; + flex-direction: row; + justify-content: space-between; + + padding-block: 20px; + + + &-right { + &-icon { + @include on-tablet { + display: flex; + flex-direction: row-reverse; + gap: 30px; + align-items: center; // Alinha os itens verticalmente ao centro + } + + &-opt { + order: 5; + } + + } + + } + } +} + +.logo-svg { + fill: black; + stroke: black; +} + +.link-azul { + position: relative; + display: inline-block; + color: #0DB2B3; + text-decoration: none; + + @include button-style; + + &::after { + content: ''; + + position: absolute; + bottom: -10px; + left: 0; + + width: 33%; // Começa invisível + height: 2px; + + background-color: #0DB2B3; + + transition: width 0.3s ease; // Suaviza o movimento + } + + &:hover::after { + width: 100%; // Expande a linha até cobrir o link + } + +} + +.svg-claro { + fill: #828282; +} + +.svg-escuro { + fill: #333; +} + +.link { + text-decoration: none; +} + +.ontablet { + @include on-tablet { + display: none; + } +} + +.offmobile { + @include off-tablet { + display: none; + } +} + +.offtablet { + @include off-desktop { + display: none; + } +} + +.offdesktop { + @include on-desktop { + display: none; + } +} + +.link-buy-top { + + &-button { + width: 100px; + height: 48px; + + @include style-buttondark; + + + } +} + +.blue-button { + &:hover { + border: none; + background-color: #0C797A; + } + + &:disabled { + border: none; + background-color: #CFEFF0; + } +} + +.black-button { + &:hover { + background-color: #131313; + } + + &:disabled { + background-color: #D0D0D0; + } +} + +.scale-hover { + cursor: pointer; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } +} \ No newline at end of file diff --git a/src/styles/nav.scss b/src/styles/nav.scss new file mode 100644 index 000000000..6a7150cfc --- /dev/null +++ b/src/styles/nav.scss @@ -0,0 +1,108 @@ +.header { + &__menu { + @include page-grid; + + pointer-events: none; + + position: fixed; + z-index: 10; + top: 0; + right: 0; + left: 0; + transform: translate(100%); + + display: flex; + grid-column: 1/-1; + flex-direction: column; + + height: 100vh; + + opacity: 0; + background-color: #fff; + + transition: all 0.3 ease; + + &:target { + pointer-events: all; + transform: translate(0); + opacity: 1; + } + + &-top { + display: flex; + grid-column: 1/-1; + align-items: center; + justify-content: space-between; + + height: 70px; + border-bottom: 2px solid black; + + } + + &-nav { + display: flex; + grid-column: 1/-1; + flex: 1; // ESSENCIAL: Faz o nav esticar até o final da página + flex-direction: column; + + padding-top: 32px; + + &-ul { + display: flex; + flex-direction: column; + gap: 25px; + list-style: none; + + &-li { + &-link { + @include third-style; + + color: #333; + } + } + } + + + + &-spec { + display: flex; + align-items: center; + padding-top: 50px; + } + + &-link { + width: 100%; + margin-top: auto; + padding-bottom: 30px; + + &-button { + width: 100%; + height: 60px; + margin-top: auto; + border: none; + + font-weight: bold; + color: white; + + background-color: #333; + + @include button-style; + } + } + + } + + } +} + + +.spec-background { + display: inline-block; + width: 20px; + height: 20px; + background-image: url(../images/background/background-spec.png); +} + +.spec-space { + padding-left: 20px; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..29dedb8fd 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,185 @@ @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; + &:hover { #{$_property}: $_toValue; } } + + +@mixin on-tablet { + @media (min-width: 744px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width:1440px) { + @content; + } +} + +@mixin off-tablet{ + @media(max-width:744px){ + @content; + } +} + +@mixin off-desktop{ + @media(max-width:1440px){ + @content; + } +} + +@mixin h1-style { + font-size: 40px; + font-weight: bold; + line-height: 52px; + text-transform: uppercase; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 64px; + line-height: 78px; + } +} + +@mixin h2-style { + font-size: 30px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } +} + +@mixin h3-style { + font-size: 18px; + font-weight: bold; + line-height: 22px; + text-transform: uppercase; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } + + @include on-desktop { + font-size: 34px; + line-height: 42px; + } +} + +@mixin h4-style { + font-size: 22px; + font-weight: bold; + line-height: 28px; + text-transform: uppercase; +} + +@mixin h5-style { + font-size: 16px; + font-weight: bold; + line-height: 22px; +} + +@mixin h6-style { + font-size: 14px; + font-weight: bold; + line-height: 20px; + text-transform: uppercase; +} + +@mixin button-style { + font-size: 12px; + font-weight: bold; + line-height: 14px; + text-transform: uppercase; +} + +@mixin maintext-style { + font-size: 16px; + font-weight: normal; + line-height: 24px; +} + +@mixin secondtext-style { + font-size: 14px; + line-height: 21px; + color:#7C7C7C; +} + +@mixin third-style { + font-size: 14px; + line-height: 21px; + text-transform: uppercase; +} + +@mixin quote-style { + font-size: 24px; + font-weight: bold; + line-height: 36px; + +} + +@mixin page-grid { + --columns:4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + padding-inline: 30px; + + @include on-tablet { + --columns:8; + + padding-inline: 34px; + } + + @include on-desktop{ + --columns:12; + + gap: 30px; + padding-inline:123px; + } +} + +@mixin page-grid-nopadd{ + --columns:4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns:8; + } + + @include on-desktop{ + --columns:12; + + gap: 30px; + } +} + +@mixin style-buttondark { + font-family: 'Helvetica Neue', sans-serif; + font-size: 12px; + font-weight: 500; + color: #FFF; + text-transform: uppercase; + + background-color: #333; +} \ No newline at end of file