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 0eb951919..47e131d1a 100644 --- a/checklist.md +++ b/checklist.md @@ -4,22 +4,22 @@ ## Tech review 1. Add [favicon](http://joxi.ru/MAjagDPid4DEl2) -2. Add a smooth scroll for the whole page (`scroll-behavior: smooth;`) -3. Logos in header and footer should be links to home page -4. Make sure when you click on logo there is no 404 error (Use `href="#"` in `anchor tag`) -5. Pictures in the blocks "What We Bake" should be ***animated*** on hover -6. 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 +2. Add a smooth scroll for the whole page (`scroll-behavior: smooth;`) - OK +3. Logos in header and footer should be links to home page - OK +4. Make sure when you click on logo there is no 404 error (Use `href="#"` in `anchor tag`) - OK +5. Pictures in the blocks "What We Bake" should be ***animated*** on hover - OK +6. 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 ## HR review -1. To make it clear to the recruiter what exactly this landing page is, it is better to give the whole web page the title “Creative Bakery” -2. A landing page is implemented strictly according to the design in Figma -3. Links in the header and footer menus should lead to the corresponding blocks of the landing page -4. ***The speed of animations is the same throughout the landing page*** (for example, increasing when hovering or moving blocks when scrolling) -5. Make sure everything looks neat on mobile and without horizontal scrolling -6. The “learn more” button leads to the “About us” block -7. Buttons "order" lead to the contact in footer -8. All the social icons in the footer should be clickable and open the social networks in a new tab -9. Menu footer buttons when clicked should lead to the relevant blocks of the landing page +1. To make it clear to the recruiter what exactly this landing page is, it is better to give the whole web page the title “Creative Bakery” - OK +2. A landing page is implemented strictly according to the design in Figma - OK +3. Links in the header and footer menus should lead to the corresponding blocks of the landing page - OK +4. ***The speed of animations is the same throughout the landing page*** (for example, increasing when hovering or moving blocks when scrolling) - OK +5. Make sure everything looks neat on mobile and without horizontal scrolling - OK +6. The “learn more” button leads to the “About us” block - OK +7. Buttons "order" lead to the contact in footer - OK +8. All the social icons in the footer should be clickable and open the social networks in a new tab - OK +9. Menu footer buttons when clicked should lead to the relevant blocks of the landing page - OK diff --git a/index.html b/index.html index d339e6856..5a8e8d6b1 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,368 @@ - - - - Title - - - -

Hello Mate Academy

- - - + + + + + Creative Bakery + + + + + + +
+
+ +
+ + +
+
+
+

We bake your fantasies — croissants, cakes, cookies, and cupcakes.

+
+

Creative bakery

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

What we bake

+

We can customize our cookies right for your needs. Just imagine it

+
+
+
+ cake img 01 +
+
+ Cakes +

Oatmeal cookies with golden raisins, orange zest and chocolate chips +

+
+
+ Order +
+
+
+
+ cake img 01 +
+
+ Cakes +

Chocolate biscuit coffee cake topped with a buttercream and powder +

+
+
+ Order +
+
+
+
+ cake img 01 +
+
+ Donuts +

Light multi-layered croissant strewn with cinammon and almond “petals” +

+
+
+ Order +
+
+
+
+ cake img 01 +
+
+ Donuts +

Light multi-layered croissant strewn with coconut and nuts +

+
+
+ Order +
+
+
+
+ cake img 01 +
+
+ Cakes +

Chocolate salted caramel, Vanilla frutti pebbles +

+
+
+ Order +
+
+
+
+ cake img 01 +
+
+ Cookies +

Oatmeal cookies with golden raisins, orange zest and chocolate chips +

+
+
+ Order +
+
+
+ +
+
+

Few words About us

+

Like many design teams, Onfido made the transition from Abstract + Sketch, to Figma + in the last couple of years. One of the common resistance points internally before making that switch, was + Figma’s lack of Git-style branching that Abstract enabled. The design team had come to rely on branching and had + built a lot of our processes around it.

+
+
+
+

2015

+

Foundation year

+
+
+

23

+

Stores

+
+
+

155

+

Companies

+
+
+

10k+

+

Clients

+
+
+ +
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d5f989323..024f685e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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", @@ -52,6 +52,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 +523,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" }, @@ -563,6 +565,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" } @@ -1510,10 +1513,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 +1594,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 +1622,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 +1635,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 +1648,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 +1710,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 +1726,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 +1913,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 +2694,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 +3068,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 +3122,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -4180,8 +4178,7 @@ "type": "opencollective", "url": "https://opencollective.com/fastify" } - ], - "peer": true + ] }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -5925,6 +5922,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 +6719,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -6799,6 +6798,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 +7312,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 +7646,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", @@ -8081,6 +8083,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 +8209,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 +8386,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 +8724,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 2500d08d2..946d86d78 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", diff --git a/src/images/background/background-bot.png b/src/images/background/background-bot.png new file mode 100644 index 000000000..fa073287d Binary files /dev/null and b/src/images/background/background-bot.png differ diff --git a/src/images/background/background-top.png b/src/images/background/background-top.png new file mode 100644 index 000000000..aedb6fbde 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/icon-logo.svg b/src/images/icon-logo.svg new file mode 100644 index 000000000..4eb4c54f3 --- /dev/null +++ b/src/images/icon-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/icon-arrow.png b/src/images/icon/icon-arrow.png new file mode 100644 index 000000000..b6722fafc Binary files /dev/null and b/src/images/icon/icon-arrow.png differ diff --git a/src/images/icon/icon-close.png b/src/images/icon/icon-close.png new file mode 100644 index 000000000..eabd2782a Binary files /dev/null and b/src/images/icon/icon-close.png differ diff --git a/src/images/icon/icon-cookie.png b/src/images/icon/icon-cookie.png new file mode 100644 index 000000000..f194419d6 Binary files /dev/null and b/src/images/icon/icon-cookie.png differ diff --git a/src/images/icon/icon-facebook.png b/src/images/icon/icon-facebook.png new file mode 100644 index 000000000..ea157dda6 Binary files /dev/null and b/src/images/icon/icon-facebook.png differ diff --git a/src/images/icon/icon-instagram.png b/src/images/icon/icon-instagram.png new file mode 100644 index 000000000..594d45323 Binary files /dev/null and b/src/images/icon/icon-instagram.png differ diff --git a/src/images/icon/icon-menu.png b/src/images/icon/icon-menu.png new file mode 100644 index 000000000..97bd7b017 Binary files /dev/null and b/src/images/icon/icon-menu.png differ diff --git a/src/images/icon/icon-phone.png b/src/images/icon/icon-phone.png new file mode 100644 index 000000000..0638f5069 Binary files /dev/null and b/src/images/icon/icon-phone.png differ diff --git a/src/images/icon/icon-twitter.png b/src/images/icon/icon-twitter.png new file mode 100644 index 000000000..5bab37aa3 Binary files /dev/null and b/src/images/icon/icon-twitter.png differ diff --git a/src/images/logo-bakerlab.png b/src/images/logo-bakerlab.png new file mode 100644 index 000000000..e68e0f255 Binary files /dev/null and b/src/images/logo-bakerlab.png differ diff --git a/src/images/produts/photo-product-01.png b/src/images/produts/photo-product-01.png new file mode 100644 index 000000000..4eed1734c Binary files /dev/null and b/src/images/produts/photo-product-01.png differ diff --git a/src/images/produts/photo-product-02.png b/src/images/produts/photo-product-02.png new file mode 100644 index 000000000..1016d7cb1 Binary files /dev/null and b/src/images/produts/photo-product-02.png differ diff --git a/src/images/produts/photo-product-03.png b/src/images/produts/photo-product-03.png new file mode 100644 index 000000000..c9b4e9290 Binary files /dev/null and b/src/images/produts/photo-product-03.png differ diff --git a/src/images/produts/photo-product-04.png b/src/images/produts/photo-product-04.png new file mode 100644 index 000000000..087ce7a80 Binary files /dev/null and b/src/images/produts/photo-product-04.png differ diff --git a/src/images/produts/photo-product-05.png b/src/images/produts/photo-product-05.png new file mode 100644 index 000000000..b5238311d Binary files /dev/null and b/src/images/produts/photo-product-05.png differ diff --git a/src/images/produts/photo-product-06.png b/src/images/produts/photo-product-06.png new file mode 100644 index 000000000..9462ac2cf Binary files /dev/null and b/src/images/produts/photo-product-06.png differ diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/_fonts.scss b/src/styles/base/fonts.scss similarity index 100% rename from src/styles/_fonts.scss rename to src/styles/base/fonts.scss index 45cdd5400..5cfc5b4d0 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/base/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/base/page.scss b/src/styles/base/page.scss new file mode 100644 index 000000000..f186a591e --- /dev/null +++ b/src/styles/base/page.scss @@ -0,0 +1,103 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-size: 16px; +} + +.page { + scroll-behavior: smooth; + background-color: $light-blue; + + @include body-text; + + // remove o barra de rolagem se o page tiver com o #ativo no url. + &:has([id="#menu"]:target) { + overflow: hidden; + } +} + + +.icon { + display: inline-block; + width: 24px; + height: 24px; +} + +.logo { + height: 24px; +} + + +.hoover-img { + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.2); // Aumenta o tamanho em 1.2x + } +} + +.link { + text-decoration: none; +} + +.link-orange { + text-decoration: none; + + &:hover { + color: $ascent-orange; + } +} + +.icon-svg { + fill: $black; + + &:hover { + fill: $ascent-orange; + } + + &:focus { + fill: $dark-orange; + } + + &:disabled { + fill: $light-orange; + } +} + +.contact-us { + display: inline-flex; // Alinha ícone e texto na mesma linha + gap: 8px; // Cria o espaçamento entre o telefone e o texto + align-items: center; // Centraliza verticalmente o ícone com o texto + width: auto; +} + +.contact-us-icon { + display: block; + width: 24px; + height: 24px; + background-image: url(../images/icon/icon-phone.png); +} + + + +.arrow-icon { + display: inline-block; + + width: 24px; + height: 24px; + + background-image: url(/src/images/icon/icon-arrow.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +.email { + padding-top: 24px; + + @include on-desktop { + padding: 0; + } + +} \ No newline at end of file diff --git a/src/styles/_typography.scss b/src/styles/base/typography.scss similarity index 100% rename from src/styles/_typography.scss rename to src/styles/base/typography.scss diff --git a/src/styles/base/utils.scss b/src/styles/base/utils.scss new file mode 100644 index 000000000..3fb975abf --- /dev/null +++ b/src/styles/base/utils.scss @@ -0,0 +1,3 @@ +@import '../utils/vars'; +@import '../utils/mixins'; +@import '../utils/extends'; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..f3e1dae4f --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,76 @@ +.aboutus { + @include page-grid; + @include padding-page; + + position: relative; + gap: 64px; + padding-block: 72px; + + @include on-tablet { + gap: 72px; + padding-block: 152px; + } + + @include on-desktop { + gap: 144px; + } + + &-background { + position: absolute; + z-index: -3; + + grid-row-start: 2; + + // Dimensões baseadas no seu print do Figma (image_5f05bd.png) + width: 100%; + height: 100%; + + background-image: url(/src/images/background/background-bot.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include on-tablet { + grid-column: 2/8; + grid-row-start: 1; + } + + @include on-desktop { + grid-column: 3/8; + } + + } + + &-info { + z-index: 1; + display: grid; + grid-column: 1/-1; + &-title { + @include text-h2; + @include column-span23; + + } + + &-desc { + @include column-span24; + } + } + + &__content { + display: grid; + grid-column: 1/-1; + grid-template-columns: subgrid; + gap: 48px; + + &-numbers { + @include column-span242; + + &-title { + @include big-text; + @include hover-orange; + } + + } + } + +} \ 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..c96474ebc --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,157 @@ +.footer { + color: $white; + background-color: $black; + + @include page-grid; + @include padding-page; + @include padding-block-bottom; + + &__nav { + @include footer-span232; + + padding-bottom: 64px; + + &-logo { + padding-bottom: 24px; + + @include on-tablet { + padding-bottom: 80px; + } + + @include on-desktop { + padding-bottom: 44px; + } + + &-svg { + fill: $white; + transition: fill 0.3s; + + &:hover { + fill: $ascent-orange; + } + + &:focus { + fill: $dark-orange; + } + } + } + + &-ul { + display: flex; + flex-direction: column; + gap: 16px; + list-style: none; + + &-li { + color: $gray; + + &-link { + color: $white; + text-decoration: none; + + &:hover { + color: $ascent-orange; + } + } + } + } + } + + &__contact { + @include footer-span25; + + &-title { + @include text-h2; + + padding-bottom: 24px; + } + + &-list { + + @include on-desktop { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 40px; + + } + + &-ul { + display: flex; + flex-direction: column; + gap: 16px; + list-style: none; + + + &-li { + grid-column: 1; + color: $gray; + + + &-link { + @include body-text; + + color: $white; + } + } + } + + &-ul2 { + display: flex; + flex-direction: column; + gap: 16px; + list-style: none; + + &-li { + color: $gray; + + &-link { + color: $white; + text-decoration: none; + + @include body-text; + } + } + + } + } + + + } + + &-logo { + display: flex; + gap: 32px; + padding-block: 40px; + + @include footer-span232; + + &-svg { + fill: $white; + + &:hover { + fill: $ascent-orange; + } + + &:focus { + fill: $dark-orange; + } + + } + } + + &-allrights { + @include footer-span25; + + place-self: center start; + color: $gray; + } +} + +.email { + padding-top: 24px; + + @include on-desktop { + padding: 0; + } + +} \ No newline at end of file diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..e2704f06b --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,281 @@ +.nav-hiden { + @include displayhidden { + display: none; + } +} + +.hidden { + @include on-desktop { + display: none; + + } +} + +.header { + @include page-grid; + + &__top { + display: flex; + grid-column: 1/-1; + align-items: center; + justify-content: space-between; + + padding-block: 20px; + + &-right { + display: flex; + + &-nav { + &-ul { + display: flex; + flex-direction: row; + gap: 64px; + list-style: none; + } + } + } + } + + &__content { + display: grid; + grid-column: 1/-1; + grid-template-columns: subgrid; + text-align: center; + + @include on-tablet { + position: relative; + + } + + &-desc { + @include body-text; + + grid-column: 1/span 2; + grid-row: 1; + padding-block: 32px; + + @include on-tablet { + grid-column: 1/ span 2; + align-self: center; + padding-block: 80px; + + } + + @include on-desktop { + grid-column: 1/span 2; + grid-row: 1; + } + } + + &-img { + width: 100%; + + @include column-span-img; + + @include on-tablet { + grid-row-start: 1; + } + + + &-title { + @include text-h1; + + z-index: 2; + width: 100%; + background-color: transparent; + + @include on-tablet { + @include padding-page; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: 90%; + + @include hover-orange; + } + + } + + &-imagem { + z-index: 1; + display: block; + width: 100%; + } + } + + &-bot { + grid-column: span 2; + margin-top: 20px; // Espaçamento entre a imagem e o botão + + + + @include on-tablet { + grid-column: 3 /span 4; + grid-row: 3; + + } + + @include on-desktop { + grid-column: 1/span 2; + grid-row: 2; + align-self: flex-start; + } + + + &-link { + position: relative; + z-index: 3; + width: 100%; + &-button { + display: flex; + gap: 10px; + align-items: center; + justify-content: center; + + width: 100%; + + color: $ascent-orange; + + @include button-default; + + &-svg { + fill: $ascent-orange; + } + + &:hover { + color: white; + background-color: $ascent-orange; + + .header__content-bot-link-button-svg { + fill: $white; + } + } + + &:focus { + border-color: $dark-orange; + color: white; + background-color: $dark-orange; + + .header__content-bot-link-button-svg { + fill: $white; + + } + + } + + &:disabled { + color: $light-orange; + background-color: $white; + + .header__content-bot-link-button-svg { + fill: $light-orange; + + } + } + + + + // &-icon { + // background-image: url(../images/icon/icon-cookie.png); + // } + } + } + } + } + + // Menu que se sobrepõe + &__menu { + pointer-events: none; + + position: fixed; + z-index: 10; + top: 0; + right: 0; + left: 0; + transform: translate(100%); + + grid-column: 1/-1; + + height: 100vh; + + opacity: 0; + background-color: #fff; + + transition: all 0.3 ease; + + @include padding-page; + + + &:target { + pointer-events: all; + transform: translate(0); + opacity: 1; + } + + &-top { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: 20px; + + &-logo { + align-items: center; + } + + + } + + &-nav { + + &-ul { + display: flex; + flex-direction: column; + gap: 30px; + justify-content: center; + + height: 40vh; + + text-align: center; + list-style: none; + + @include on-desktop { + height: 50vh; + } + + + &-li { + &-link { + color: $black; + + &:hover { + color: $ascent-orange; + } + + &-c { + line-height: 100%; + color: $black; + text-transform: uppercase; + letter-spacing: 2%; + + &:hover { + color: $ascent-orange; + + .icon-svg-phone { + fill: $ascent-orange; + } + } + } + } + } + } + } + } + + + + + +} \ No newline at end of file diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..ac4626dd5 --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,76 @@ +.products { + @include page-grid; + @include padding-page; + + padding-block: 100px; + + @include gap-products; + + &-info { + grid-column: 1/-1; + + &-title { + @include text-h2; + } + + &-desc { + @include body-text; + } + } + + &__content { + @include column-span243; + + @include on-desktop { + &:nth-child(4) { + grid-column: 3/span 3; + } + } + + + &-info { + display: flex; + flex-direction: column; + gap: 8px; + padding-block: 16px; + + &-type { + @include uppercase-inter; + + color: $gray; + } + + &-desc { + padding-bottom: 16px; + } + } + + &-background { + + &-img { + display: block; + + width: 100%; + height: 100%; + border-radius: 8px; + + object-fit: cover; // Faz o papel do "Fill" do Figma + } + } + + &-order { + + &-link { + display: flex; + gap: 8px; // Cria o espaçamento entre o telefone e o texto + align-items: center; + + width: 100%; + + color: $ascent-orange; + + @include uppercase-inter; + } + } + } +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..3c0c28052 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,10 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@import 'base/utils'; +@import 'base/page'; +@import 'base/typography'; +@import 'base/fonts'; + +@import 'blocks/header'; +@import 'blocks/about'; +@import 'blocks/products'; +@import 'blocks/footer'; -body { - background: $c-gray; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/extends.scss similarity index 100% rename from src/styles/utils/_extends.scss rename to src/styles/utils/extends.scss diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..875dfbfac --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,266 @@ +@mixin hover($_property, $_toValue) { + transition: #{$_property} 0.3s; + + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet { + @media (min-width:768px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width:1024px) { + @content; + } +} + +@mixin on-large-desktop { + @media (min-width:1200px) { + @content; + } +} + +// Fontes + +@mixin font-priorits { + font-family: Inter, sans-serif; + font-weight: normal; + font-style: normal; + line-height: 85%; + text-transform: uppercase; + letter-spacing: -0.05em; +} + +@mixin text-h1 { + /* Mobile headings/H1 */ + @include font-priorits; + + font-size: 64px; + + /* or 54px */ + + + @include on-tablet { + font-size: 80px; + } + + @include on-desktop { + font-size: 136px; + } + + @include on-large-desktop { + font-size: 144px; + } +} + +@mixin text-h2 { + /* Mobile headings/H2 */ + @include font-priorits; + @include hover-orange; + + font-size: 48px; + + /* identical to box height, or 41px */ + + + @include on-tablet { + font-size: 56px; + + } + + @include on-desktop { + font-size: 72px; + + } +} + +@mixin big-text { + /* Big text */ + @include font-priorits; + + font-size: 96px; + +} + +@mixin body-text { + /* Body text */ + + font-family: Inter, sans-serif; + font-weight: normal; + font-style: normal; + line-height: 150%; + + /* identical to box height, or 24px */ + + letter-spacing: -1%; +} + +@mixin uppercase-inter { + /* Uppercase */ + + font-family: Inter, sans-serif; + font-weight: 500; + font-style: normal; + line-height: 100%; + + /* identical to box height, or 16px */ + text-transform: uppercase; + letter-spacing: 0.02em; +} + +// padding page + +@mixin padding-page { + padding-inline: 16px; + + @include on-tablet { + padding-inline: 44px; + } + + @include on-large-desktop { + padding-inline: 124px; + } +} + +// layout grid + +@mixin page-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 16px; + + @include padding-page; + + @include on-tablet { + column-gap: 24px; + + } + + @include on-tablet { + grid-template-columns: repeat(8, 1fr); + } + + @include on-large-desktop { + column-width: 128px; + } +} + +@mixin button-default { + @include uppercase-inter; + + height: 56px; + border: 2px solid $ascent-orange; + border-radius: 32px; + background-color: transparent; + + +} + +// column span + +@mixin column-span242 { + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 2; + } +} + +@mixin column-span243 { + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 3; + } +} + +@mixin column-span24 { + grid-column: span 2; + grid-row: span 1; + + @include on-tablet { + grid-column: span 4; + grid-row: unset; + + } +} + +@mixin column-span23 { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + grid-row: 1; + + } +} + +@mixin column-span-img { + grid-column: span 2; + + @include on-tablet { + grid-column: 3 /span 4; + grid-row: 1/span 2; + } + +} + +@mixin gap-products { + gap: 56px; + + @include on-tablet { + gap: 80px; + } +} + +@mixin padding-block-bottom { + padding-block: 56px; + + @include on-tablet { + padding-block: 88px; + } +} + +@mixin hover-orange { + &:hover { + color: $ascent-orange; + } +} + +@mixin footer-span232 { + grid-column: span 2; + + @include on-tablet { + grid-column: 1/span 3; + } + + @include on-desktop { + grid-column: 1/span 2 + } +} + +@mixin footer-span25 { + grid-column: span 2; + + @include on-tablet { + grid-column: 5/span 3; + } +} + +@mixin displayhidden { + @media (max-width:1024px) { + @content; + } +} \ No newline at end of file diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 000000000..79e23e0f7 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,11 @@ +// colors +$c-gray: #eee; +$white: #fff; +$gray: #7F8096; +$black: #1C1A26; +$light-blue: #EEF7FF; +$light-pink: #FFEEFC; +$light-orange: #FBA28F; +$ascent-orange: #F9512E; +$dark-orange: #B2341A; +