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/README.md b/README.md index a95e97afe..ce6e8304f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Kickstarter landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS - The design 1440px @@ -34,7 +34,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 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/Kickstarter/) + [DEMO LINK](https://weuler007.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/index.html b/index.html index d339e6856..fa0286c66 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,517 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + CrazyBaby + - -

Hello Mate Academy

- + + +
+
+ + + + + + + +
+ + EN + + / + + UA + + + Buy + +
+ + + +
+ + +
+ + Our story + + + About us + + + Technology + + + Get in touch + + + Buy + +
+
+ +
+ +
+
+
+

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. +

+
+ + + + + Two silver Luna wireless speakers + +
+
+ + + + + +
+
+ +
+ +

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. +

+
+
+
+ + +
+
+ Meet Luna product family +
+
+ + +
+
+ Industrial design sketches +
+

+ Designed for the
+ future +

+

+ 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

+

+ 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 + +
+ Luna eye speaker on wood +
+
+ + +
+
+
+ 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. +
+ Garrett Martin +

Garrett 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 Luna 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 Bass Power
    • +
  • Lossless Digital Audio Transmission
    • +
  • Easy & Stable Stereo Pairing
    • +
  • Crisp and Clear High Frequency Sound
    • +
  • Streams from Cloud Music and Local Library
    • +
  • Auto Music from Last Song Stopped
    • +
+
+ + + Exploded view of the Luna speaker +
+
+
+ + +
+
+

+ Do you have any + questions? +

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

+ © 2019 All rights reserved. Terms of Use & Privacy Policy +

+
+
+ + diff --git a/package-lock.json b/package-lock.json index ace1ce6c0..aaa6d39c3 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", @@ -1875,10 +1875,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", diff --git a/package.json b/package.json index 19d2ac56e..63d7c71f2 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "kickstarter", "version": "1.0.0", "description": "Kickstarter", - "homepage": "Kickstarter", + "homepage": "https://weuler007.github.io/Kickstarter/", "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", @@ -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/ADD.png b/src/images/ADD.png new file mode 100644 index 000000000..c80ed356d Binary files /dev/null and b/src/images/ADD.png differ diff --git a/src/images/Ellipse.png b/src/images/Ellipse.png new file mode 100644 index 000000000..c66b5aae8 Binary files /dev/null and b/src/images/Ellipse.png differ diff --git a/src/images/Frame.png b/src/images/Frame.png new file mode 100644 index 000000000..dee248a57 Binary files /dev/null and b/src/images/Frame.png differ diff --git a/src/images/Frame2.png b/src/images/Frame2.png new file mode 100644 index 000000000..919e304f8 Binary files /dev/null and b/src/images/Frame2.png differ diff --git a/src/images/Group 8 (1).png b/src/images/Group 8 (1).png new file mode 100644 index 000000000..482eb421f Binary files /dev/null and b/src/images/Group 8 (1).png differ diff --git a/src/images/SWITCH.png b/src/images/SWITCH.png new file mode 100644 index 000000000..a96f0f56b Binary files /dev/null and b/src/images/SWITCH.png differ diff --git a/src/images/Slider.png b/src/images/Slider.png new file mode 100644 index 000000000..8976318f3 Binary files /dev/null and b/src/images/Slider.png differ diff --git a/src/images/esfera1.png b/src/images/esfera1.png new file mode 100644 index 000000000..bf08ec7bb Binary files /dev/null and b/src/images/esfera1.png differ diff --git a/src/images/esfera2.png b/src/images/esfera2.png new file mode 100644 index 000000000..5a86594f1 Binary files /dev/null and b/src/images/esfera2.png differ diff --git a/src/images/esfera3.png b/src/images/esfera3.png new file mode 100644 index 000000000..954bf409b Binary files /dev/null and b/src/images/esfera3.png differ diff --git a/src/images/facebook.svg b/src/images/facebook.svg new file mode 100644 index 000000000..d617dc785 --- /dev/null +++ b/src/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 000000000..1ef706718 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/frame13.png b/src/images/frame13.png new file mode 100644 index 000000000..d07807900 Binary files /dev/null and b/src/images/frame13.png differ diff --git a/src/images/frame19.png b/src/images/frame19.png new file mode 100644 index 000000000..b2ee5a6c1 Binary files /dev/null and b/src/images/frame19.png differ diff --git a/src/images/frame23.png b/src/images/frame23.png new file mode 100644 index 000000000..018a8dbf6 Binary files /dev/null and b/src/images/frame23.png differ diff --git a/src/images/frame34.png b/src/images/frame34.png new file mode 100644 index 000000000..87edd9530 Binary files /dev/null and b/src/images/frame34.png differ diff --git a/src/images/frame35.png b/src/images/frame35.png new file mode 100644 index 000000000..8e7997455 Binary files /dev/null and b/src/images/frame35.png differ diff --git a/src/images/frame36.png b/src/images/frame36.png new file mode 100644 index 000000000..5aa0ab154 Binary files /dev/null and b/src/images/frame36.png differ diff --git a/src/images/frame37.png b/src/images/frame37.png new file mode 100644 index 000000000..4f3c6919f Binary files /dev/null and b/src/images/frame37.png differ diff --git a/src/images/frame9.png b/src/images/frame9.png new file mode 100644 index 000000000..df667258d Binary files /dev/null and b/src/images/frame9.png differ diff --git a/src/images/image 2 (1).png b/src/images/image 2 (1).png new file mode 100644 index 000000000..0370313af Binary files /dev/null and b/src/images/image 2 (1).png differ diff --git a/src/images/image 2 (2).png b/src/images/image 2 (2).png new file mode 100644 index 000000000..ebe907467 Binary files /dev/null and b/src/images/image 2 (2).png differ diff --git a/src/images/image 2.png b/src/images/image 2.png new file mode 100644 index 000000000..3a611b4d8 Binary files /dev/null and b/src/images/image 2.png differ diff --git a/src/images/image 6.png b/src/images/image 6.png new file mode 100644 index 000000000..d2349e676 Binary files /dev/null and b/src/images/image 6.png differ diff --git a/src/images/mapa1.png b/src/images/mapa1.png new file mode 100644 index 000000000..9cf8bd179 Binary files /dev/null and b/src/images/mapa1.png differ diff --git a/src/images/mapa2.png b/src/images/mapa2.png new file mode 100644 index 000000000..9c5592357 Binary files /dev/null and b/src/images/mapa2.png differ diff --git a/src/images/mapa3.png b/src/images/mapa3.png new file mode 100644 index 000000000..92bfe1bb7 Binary files /dev/null and b/src/images/mapa3.png differ diff --git a/src/images/twitter (1).svg b/src/images/twitter (1).svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/twitter (1).svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/twitter.svg b/src/images/twitter.svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/vector1.png b/src/images/vector1.png new file mode 100644 index 000000000..bf6ea2aff Binary files /dev/null and b/src/images/vector1.png differ diff --git a/src/images/vector2.png b/src/images/vector2.png new file mode 100644 index 000000000..bf6ea2aff Binary files /dev/null and b/src/images/vector2.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..5f4d0e787 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,38 @@ 'use strict'; + +// Elements: seleciona os blocos que precisam de interacao na pagina. +const header = document.querySelector('.header'); +const menu = document.querySelector('.mobile-menu'); +const menuButton = document.querySelector('.header__menu'); +const menuLinks = document.querySelectorAll('.mobile-menu__link, .mobile-menu__button'); +const form = document.querySelector('.form'); + +// Mobile menu: fecha o menu e atualiza o estado acessivel do botao. +const closeMenu = () => { + header.classList.remove('header--menu-open'); + menu.classList.remove('mobile-menu--open'); + menuButton.setAttribute('aria-expanded', 'false'); +}; + +// Mobile menu: alterna entre menu aberto e fechado ao clicar no hamburger. +menuButton.addEventListener('click', () => { + const isOpen = menu.classList.toggle('mobile-menu--open'); + + header.classList.toggle('header--menu-open', isOpen); + menuButton.setAttribute('aria-expanded', String(isOpen)); +}); + +// Mobile menu: fecha o menu depois que o usuario escolhe uma secao. +menuLinks.forEach(link => { + link.addEventListener('click', closeMenu); +}); + +// Form: evita recarregar a pagina e limpa os campos apos o envio. +form.addEventListener('submit', event => { + event.preventDefault(); + form.reset(); + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..30654ed4e 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,7 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-family: Roboto; font-weight: normal; font-style: normal; + font-display: swap; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..60b37a838 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,7 @@ -h1 { - @extend %h1; +h1, +h2, +h3, +p, +blockquote { + margin: 0; } diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..0c0413d16 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,1064 @@ @import 'fonts'; @import 'typography'; +// Base: regras globais que normalizam comportamento e tipografia. +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + body { - background: $c-gray; + min-width: 320px; + margin: 0; + + font-family: Roboto, Arial, sans-serif; + font-size: 14px; + line-height: 1.5; + color: $color-dark; + + background: $color-page; +} + +img { + display: block; + max-width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +a, +button { + cursor: pointer; +} + +button, +input, +textarea { + font: inherit; +} + +// Layout: container reutilizavel com larguras responsivas do design. +.container { + width: min(100% - 60px, $content-max-width); + margin: 0 auto; + + @include on-tablet { + width: min(100% - 68px, $content-max-width); + } + + @include on-desktop { + width: min(100% - 246px, $content-max-width); + } +} + +// Acessibilidade: texto visivel apenas para leitores de tela. +.visually-hidden { + position: absolute; + + overflow: hidden; + + width: 1px; + height: 1px; + + white-space: nowrap; + + clip: rect(0 0 0 0); +} + +// Tipografia compartilhada: titulo usado em varias sections. +.section-title { + font-size: 30px; + font-weight: 700; + line-height: 1.3; + color: $color-dark; + text-transform: uppercase; + + @include on-tablet { + font-size: 36px; + } + + @include on-desktop { + font-size: 56px; + line-height: 1.25; + } +} + +// Link decorado usado nas chamadas "See more about us". +.text-link { + display: inline-block; + + font-weight: 700; + line-height: 1.2; + color: $color-accent; + text-transform: uppercase; + + &::after { + content: ''; + + transform-origin: left; + + display: block; + + width: 53px; + height: 1px; + margin-top: 5px; + + background-color: $color-accent; + + transition: transform 0.3s; + } + + &:hover::after { + transform: scaleX(2.15); + } +} + +// Botao reutilizavel com variacoes de cor. +.button { + cursor: pointer; + + display: inline-flex; + align-items: center; + justify-content: center; + + min-width: 102px; + min-height: 48px; + border: 0; + + font-size: 12px; + font-weight: 700; + line-height: 1; + color: $color-white; + text-transform: uppercase; + + transition: + background-color 0.3s, + color 0.3s; + + &--dark { + background-color: $color-dark; + + &:hover { + background-color: $color-black; + } + } + + &--accent { + background-color: $color-accent; + + &:hover { + background-color: $color-accent-dark; + } + } +} + +// Logo da marca criado com texto e simbolo em CSS. +.logo { + display: inline-flex; + gap: 4px; + align-items: center; + + font-weight: 700; + line-height: 1; + color: $color-black; + text-transform: uppercase; + letter-spacing: 2px; + + transition: transform 0.3s; + + &:hover { + transform: scale(1.08); + } + + &__mark { + position: relative; + + width: 20px; + height: 20px; + border-radius: 50%; + + background-color: $color-black; + + &::before { + content: ''; + + position: absolute; + top: -6px; + left: 6px; + + width: 8px; + height: 8px; + border-radius: 8px 8px 0 0; + + background-color: $color-black; + } + + &::after { + content: ''; + + position: absolute; + top: 5px; + left: 5px; + + width: 10px; + height: 10px; + border-radius: 50%; + + background-color: $color-page; + } + } +} + +// Header: topo da pagina, acoes e menu hamburger. +.header { + position: sticky; + z-index: 20; + top: 0; + background-color: rgba($color-page, 0.96); + + &__container { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 76px; + } + + &__logo { + font-size: 18px; + } + + &__nav, + &__actions { + display: none; + } + + &__menu { + cursor: pointer; + + display: grid; + + width: 32px; + height: 32px; + padding: 7px 4px; + border: 0; + + background-color: transparent; + } + + &__menu-line { + width: 24px; + height: 2px; + background-color: $color-dark; + transition: + transform 0.3s, + opacity 0.3s; + } + + &__lang { + font-size: 14px; + color: $color-light-gray; + + &--active { + color: $color-dark; + } + } + + &__divider { + color: $color-light-gray; + } + + &--menu-open { + .header__menu-line:nth-child(1) { + transform: translateY(8px) rotate(45deg); + } + + .header__menu-line:nth-child(2) { + opacity: 0; + } + + .header__menu-line:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); + } + } + + @include on-tablet { + &__container { + min-height: 100px; + } + + &__actions { + display: flex; + gap: 4px; + align-items: center; + } + + &__button { + margin-left: 22px; + } + } + + @include on-desktop { + position: static; + + &__container { + min-height: 112px; + } + + &__nav { + display: flex; + } + + &__menu { + display: none; + } + } +} + +// Navegacao principal do header. +.nav { + gap: 84px; + align-items: center; + + &__link { + font-size: 14px; + color: $color-dark; + text-transform: uppercase; + transition: color 0.3s; + + &:hover { + color: $color-accent; + } + } +} + +// Menu mobile aberto pelo botao hamburger. +.mobile-menu { + position: fixed; + inset: 76px 0 auto; + transform: translateY(-130%); + + display: grid; + gap: 26px; + + padding: 28px 30px 40px; + + background-color: $color-page; + box-shadow: 0 12px 24px rgba($color-black, 0.08); + + transition: transform 0.3s; + + &__link { + font-weight: 700; + color: $color-dark; + text-transform: uppercase; + } + + &__button { + width: 102px; + } + + &--open { + transform: translateY(0); + } + + @include on-tablet { + inset-block-start: 100px; + padding-inline: 34px; + } + + @include on-desktop { + display: none; + } +} + +// Navegacao interna exibida abaixo do hero no desktop. +.page-nav { + display: none; + + @include on-desktop { + display: block; + padding: 0 0 40px; + + &__container { + display: flex; + gap: 84px; + justify-content: center; + } + + &__link { + font-size: 12px; + font-weight: 400; + line-height: 1.2; + color: $color-dark; + text-transform: uppercase; + + transition: color 0.3s; + + &--active { + font-weight: 700; + } + + &:hover { + color: $color-accent; + } + } + } +} + +// Hero: primeira dobra com texto principal e imagem do produto. +.hero { + padding: 38px 0 46px; + + &__container { + display: flex; + flex-direction: column-reverse; + gap: 36px; + } + + &__title { + max-width: 420px; + + font-size: 40px; + font-weight: 700; + line-height: 1.3; + color: $color-dark; + text-transform: uppercase; + } + + &__text { + max-width: 276px; + margin-top: 24px; + font-size: 16px; + color: $color-dark; + } + + &__picture { + align-self: center; + width: min(100%, 430px); + } + + &__image { + cursor: pointer; + width: 100%; + } + + @include on-tablet { + padding: 24px 0 66px; + + &__container { + display: grid; + grid-template-columns: 1fr 58%; + gap: 0; + align-items: center; + } + + &__content { + position: relative; + z-index: 1; + } + + &__title { + font-size: 48px; + } + + &__picture { + width: 100%; + margin-left: -36px; + } + } + + @include on-desktop { + padding: 56px 0 78px; + + &__container { + grid-template-columns: 380px 1fr; + } + + &__title { + font-size: 64px; + line-height: 1.2; + } + + &__picture { + margin-left: -6px; + } + } +} + +// Benefits: grid com os quatro diferenciais do produto. +.benefits { + padding: 44px 0; + + &__container { + display: grid; + gap: 64px; + } + + &__item { + display: grid; + justify-items: center; + text-align: center; + } + + &__icon { + cursor: pointer; + + width: 70px; + height: 50px; + + object-fit: contain; + + transition: transform 0.3s; + + &:hover { + transform: translateY(-8px) scale(1.08); + } + } + + &__title { + min-height: 44px; + margin-top: 36px; + + font-size: 22px; + font-weight: 700; + line-height: 1.27; + color: $color-dark; + text-transform: uppercase; + } + + &__text { + max-width: 276px; + margin-top: 20px; + + font-size: 14px; + line-height: 1.5; + color: $color-gray; + } + + @include on-tablet { + padding: 52px 0; + + &__container { + grid-template-columns: repeat(2, 1fr); + gap: 64px 28px; + } + } + + @include on-desktop { + padding: 62px 0; + + &__container { + grid-template-columns: repeat(4, 1fr); + gap: 30px; + } + } +} + +// Presentation: imagem central de apresentacao da familia Luna. +.presentation { + padding: 36px 0 58px; + + &__image { + cursor: pointer; + width: min(100%, 846px); + margin: 0 auto; + transition: transform 0.3s; + + &:hover { + transform: scale(1.02); + } + } + + @include on-tablet { + padding: 58px 0 88px; + } +} + +// About: bloco com imagem de sketches e texto institucional. +.about { + padding: 36px 0; + + &__container { + display: grid; + gap: 32px; + } + + &__image { + cursor: pointer; + + width: 100%; + min-height: 210px; + + object-fit: cover; + + transition: transform 0.3s; + + &:hover { + transform: scale(1.02); + } + } + + &__text { + margin: 24px 0 30px; + font-size: 16px; + line-height: 1.5; + color: $color-gray; + } + + &__nowrap { + white-space: nowrap; + } + + @include on-tablet { + padding: 54px 0; + + &__container { + grid-template-columns: 50% 1fr; + gap: 36px; + align-items: center; + } + } + + @include on-desktop { + padding: 70px 0; + + &__container { + grid-template-columns: 582px 1fr; + gap: 78px; + } + + &__text { + margin: 30px 0 60px; + font-size: 20px; + } + } +} + +// Technology: bloco sobre o Luna Eye com texto e imagem lateral. +.technology { + padding: 36px 0 54px; + + &__container { + display: grid; + gap: 28px; + } + + &__text { + margin: 24px 0 30px; + font-size: 16px; + color: $color-gray; + } + + &__image { + cursor: pointer; + + width: 100%; + min-height: 210px; + + object-fit: cover; + + transition: transform 0.3s; + + &:hover { + transform: scale(1.02); + } + } + + @include on-tablet { + padding: 54px 0 76px; + + &__container { + grid-template-columns: 1fr 50%; + gap: 36px; + align-items: center; + } + + &__image { + order: 2; + } + } + + @include on-desktop { + padding: 70px 0 92px; + + &__container { + grid-template-columns: 1fr 582px; + gap: 78px; + } + + &__text { + max-width: 470px; + } + } +} + +// Testimonials: depoimento com aspas decorativas e avatar. +.testimonials { + padding: 66px 0 82px; + text-align: center; + + &__container { + position: relative; + display: grid; + justify-items: center; + + &::before { + content: '“'; + + position: absolute; + z-index: -1; + top: -64px; + left: 50%; + transform: translateX(-50%); + + font-size: 220px; + font-weight: 700; + line-height: 1; + color: $color-extra-light; + } + } + + &__quote { + max-width: 786px; + + font-size: 18px; + font-weight: 700; + line-height: 1.5; + color: $color-dark; + } + + &__avatar { + width: 62px; + height: 62px; + margin-top: 30px; + border-radius: 50%; + } + + &__name { + margin-top: 20px; + font-size: 16px; + font-weight: 700; + color: $color-dark; + } + + &__position { + margin-top: 5px; + color: $color-gray; + } + + @include on-tablet { + padding: 86px 0 104px; + + &__quote { + font-size: 22px; + } + } + + @include on-desktop { + padding: 92px 0 116px; + + &__quote { + font-size: 24px; + } + } +} + +// Features: painel tecnico com listas e imagem explodida do produto. +.features { + padding: 0 0 44px; + + &__title { + margin-bottom: 28px; + } + + &__panel { + position: relative; + + overflow: hidden; + display: grid; + gap: 28px; + + padding: 30px; + + background-color: #d6ecec; + } + + &__subtitle { + margin-bottom: 16px; + + font-size: 18px; + font-weight: 700; + line-height: 1.2; + color: $color-accent-dark; + text-transform: uppercase; + } + + &__list { + margin: 0; + padding-left: 18px; + color: $color-dark; + } + + &__item { + margin-bottom: 4px; + font-size: 14px; + } + + &__image { + cursor: pointer; + + place-self: end; + + width: min(100%, 416px); + margin-right: -30px; + margin-bottom: -30px; + + transition: transform 0.3s; + + &:hover { + transform: scale(1.03); + } + } + + @include on-tablet { + padding-bottom: 70px; + + &__panel { + grid-template-columns: repeat(2, 1fr); + padding: 38px 52px 0; + } + + &__image { + grid-column: 2; + } + } + + @include on-desktop { + padding-bottom: 86px; + + &__title { + margin-bottom: 30px; + } + + &__panel { + grid-template-columns: 1fr 1fr 420px; + min-height: 458px; + padding: 60px 60px 0; + } + + &__group:nth-child(3) { + grid-column: 1 / 2; + } + + &__image { + grid-column: 3; + grid-row: 1 / 4; + width: 416px; + margin-right: -60px; + } + } +} + +// Questions: chamada de contato com titulo e formulario. +.questions { + padding: 32px 0 54px; + + &__title-line { + display: block; + white-space: nowrap; + } + + &__container { + display: grid; + gap: 28px; + } + + @include on-tablet { + padding: 46px 0 72px; + + &__container { + grid-template-columns: 1fr 1fr; + gap: 34px; + } + } + + @include on-desktop { + padding: 54px 0 88px; + + &__container { + grid-template-columns: 480px 1fr; + gap: 112px; + } + } +} + +// Form: campos e botao do formulario de contato. +.form { + display: grid; + + &__input { + width: 100%; + height: 48px; + padding: 12px 18px; + border: 1px solid $color-light-gray; + + color: $color-dark; + + background-color: transparent; + outline: none; + + transition: border-color 0.3s; + + &::placeholder { + color: $color-light-gray; + } + + &:focus { + border-color: $color-accent; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + border-color: $color-accent; + box-shadow: 0 0 0 1000px $color-page inset; + transition: background-color 5000s ease-in-out 0s; + + -webkit-text-fill-color: $color-dark; + } + + &--textarea { + resize: none; + height: 128px; + } + } + + &__field + &__field { + margin-top: -1px; + } + + &__button { + width: 102px; + margin-top: 30px; + } +} + +// Footer: logo, seta para topo, redes sociais e copyright. +.footer { + padding: 34px 0 28px; + + &__container { + position: relative; + display: grid; + justify-items: center; + } + + &__logo { + font-size: 16px; + } + + &__top { + position: absolute; + top: 0; + right: 0; + + width: 28px; + height: 28px; + + transition: transform 0.3s; + + &::before, + &::after { + content: ''; + position: absolute; + background-color: $color-dark; + } + + &::before { + top: 6px; + left: 13px; + width: 2px; + height: 18px; + } + + &::after { + top: 6px; + left: 9px; + transform: rotate(45deg); + + width: 10px; + height: 10px; + border-top: 2px solid $color-dark; + border-left: 2px solid $color-dark; + + background-color: transparent; + } + + &:hover { + transform: scale(1.22); + } + } + + &__social { + margin-top: 56px; + } + + &__copy { + margin-top: 34px; + color: #bdbdbd; + text-align: center; + } + + @include on-tablet { + padding: 54px 0 30px; + } +} + +// Social: icones do footer usando o sprite exportado do Figma. +.social { + display: flex; + gap: 40px; + + margin-bottom: 0; + padding: 0; + + list-style: none; + + &__link { + display: block; + + width: 24px; + height: 24px; + + background-image: url('../images/Group 8 (1).png'); + background-repeat: no-repeat; + background-size: 152px 24px; + + transition: + opacity 0.3s, + transform 0.3s; + + &:hover { + transform: scale(1.15); + opacity: 0.7; + } + + &--facebook { + background-position: 0 0; + } + + &--twitter { + background-position: -64px 0; + } + + &--instagram { + background-position: -128px 0; + } + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..0097f0977 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,19 @@ @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; + &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..5d0c75871 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,12 @@ -$c-gray: #eee; +$color-white: #f7f7f7; +$color-page: #f6f6f6; +$color-black: #131313; +$color-dark: #333; +$color-gray: #7c7c7c; +$color-light-gray: #d0d0d0; +$color-extra-light: #eefafa; +$color-accent: #0db2b3; +$color-accent-dark: #0c797a; +$content-max-width: 1194px; +$desktop-min-width: 1280px; +$tablet-min-width: 640px;