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 302783df5..e07ce66c6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # KateVR 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/Blpg4iapsI7fRqJeSp6DvK/KatVR?node-id=1%3A370) - Use BEM and SCSS @@ -25,7 +25,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Bl 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_KateVR/). + [DEMO LINK](https://Natalia-Onufrienko.github.io/layout_KateVR/). 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..8ecd8c8b2 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,1489 @@ - + - Title + KatVR + + + + + + + + + - -

Hello Mate Academy

- + + +
+
+
+ + +
+
+ + +
+
    +
  • + English +
    • +
  • + Arabic +
    • +
  • + Chinese (Simplified) +
    • +
  • + Chinese (Traditional) +
    • +
  • + French +
    • +
  • + German +
    • +
  • + Italian +
    • +
  • + Polish +
    • +
  • + Russian +
    • +
  • + Ukrainian +
    • +
+
+
+ + +
+ + +
+ +
+
+

+ THE NEW START OF +
+ VR LOCOMOTION +

+ +
+

+ Discover the most comprehensive VR Locomotion system, and unlock + infinite motion in any games on any platforms! +

+

1200$

+ + +
+
+ +
+
+
+
+ + + KAT locos + +
+ +
+ + + KAT loco + +
+ +
+ + + KATVr player + +
+
+
+ + + + KAT locos + +
+
+ +
+
+ + + +
+ + + +
+
+ + +
+ +
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+

+ MORE THAN + GAMING! +

+

+ This also made for people who are interested in... +

+
+
+
+ Mortarboard +

EDUCATION

+

+ Create aducational simulations, trainings and much more with + unlimited virtual space and minimum physical space +

+
+
+ Buildings +

REAL ESTATE

+

+ Design architectural projects in a deeply realistic + environment allowing visitors to freely walk around, and feel + their vibe +

+
+
+ Arm holding a dumbbell +

FITNESS

+

+ Combine business with pleasure, and discover countless ways to + stay fit while playing your favorite VR Games! +

+
+
+ Social interaction +

SOCIAL INTERACTIONS

+

+ Hang out with your friends in the virtual world when you can’t + meet space requirements +

+
+
+
+
+ +
+
+
+

+ ABOUT + PRODUCT +

+ +
+
+ +
+
+
+ portative KAT loco +
+ +
+ KATVr player +
+ +
+ portative KAT loco +
+ +
+ KATVr player +
+ +
+ portative KAT loco +
+
+
+ +
+ +
+
+ + +
+ +
+
+
+ +
+

+ ABOUT + PRODUCT +

+

+ KAT loco is a foot-based VR locomotion system that gives + complete physical control over lower-body actions, allowing + you to freely walk, run, and carry out just any other movement + in virtual reality. +

+ +
+
+
+
+

Hello,

+

+ NICE TO MEET + YOU! +

+

+ KAT VR is an independent company dedicated to the research, + development, and sales of VR Locomotion products and + solutions. Founded in 2013, we have quickly grown to become + one of the world’s leading professional suppliers of VR games’ + & simulations’ equipment +

+
+
+
+
+
+ +
+
+

+ TECH + SPECS +

+ +
+
+

SENSOR

+ +

+ Weight: 35g/1.23oz each +
+ Dimension: 50mm/1.97in +
+ 24mm/0.94in +
+ Light: LED lights +

+
+ +
+ + + + + KAT loco + + +
+
+
+
+ +
+
+

+ Weight: 35g/1.23oz each +
+ Dimension: 50mm/1.97in +
+ 24mm/0.94in +
+ Light: LED lights +

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

+ Wireless: Bluetooth 4.2 +
+ Signal range: 5m +
+ Receiver: USB 2.0 and above +

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

+ Type: Lthium-lon polymer batteries +
+ Capacity: 370mAh +
+ Battery life: 10h of continuous use 150 hours on stand + by +
+ Charging: Fast charging - 1 hour +
+ Charging voltage and current: 5V = 0.5A +

+
+
+
+
+ +
+

BATTERIES

+ +

+ Type: Lthium-lon polymer batteries +
+ Capacity: 370mAh +
+ Battery life: 10h of continuous use 150 hours on stand by +
+ Charging: Fast charging - 1 hour +
+ Charging voltage and current: 5V = 0.5A +

+
+ +
+

CONNECTION

+ +

+ Wireless: Bluetooth 4.2 +
+ Signal range: 5m +
+ Receiver: USB 2.0 and above +

+
+
+
+
+ +
+
+

+ WHY + KAT LOCO? +

+
+
+ Сompatibility diagram +

UNIVERSALLY COMPATIBLE

+

+ KAT Loco offers universal compatibility across all major VR + headsets and platforms allowing you to play any VR game with + support for Free Locomotion +

+
+
+ Computer +

VR/PC CONTROL PANEL

+

+ Our Multifunctional Software allows for quick access to KAT + Loco’s control panel both from a computer desktop, and + directly from your VR headset +

+
+
+ Wireless connection +

WIRELESS SENSORS

+

+ What makes it even more advanced, KAT Loco is entirely + wireless, and comes with a complete system of algorithms, + super durable batteries and more! +

+
+
+ + Buy Now + +
+
+ +
+
+ + Buy Now + +
+
+
+ +
+
+
+

Have any questions?

+ +

+ GET IN + TOUCH +

+ +

+ Our manager will reply you within 15 minutes +

+ +
+ + +86-0571-86105373 + + + + global@katvr.com + + + + overseas@katvr.com + +
+
+ +

+ Our manager will reply you within 15 minutes +

+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + + + +
+
+
+
+
+ + + + diff --git a/package-lock.json b/package-lock.json index 87fcefd81..e0b0d490d 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", @@ -1510,10 +1510,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 7149ff15d..754178035 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/KAT-loco-details-l.png b/src/images/KAT-loco-details-l.png new file mode 100644 index 000000000..05c6b72f5 Binary files /dev/null and b/src/images/KAT-loco-details-l.png differ diff --git a/src/images/KAT-loco-details-m.png b/src/images/KAT-loco-details-m.png new file mode 100644 index 000000000..dc55b4631 Binary files /dev/null and b/src/images/KAT-loco-details-m.png differ diff --git a/src/images/KAT-loco-details-s.png b/src/images/KAT-loco-details-s.png new file mode 100644 index 000000000..fd035ca71 Binary files /dev/null and b/src/images/KAT-loco-details-s.png differ diff --git a/src/images/KAT-loco-details-xl.png b/src/images/KAT-loco-details-xl.png new file mode 100644 index 000000000..b9bc195c7 Binary files /dev/null and b/src/images/KAT-loco-details-xl.png differ diff --git a/src/images/KAT-loco.png b/src/images/KAT-loco.png new file mode 100644 index 000000000..8791854b0 Binary files /dev/null and b/src/images/KAT-loco.png differ diff --git a/src/images/KAT-locos-l.png b/src/images/KAT-locos-l.png new file mode 100644 index 000000000..3f3e0be66 Binary files /dev/null and b/src/images/KAT-locos-l.png differ diff --git a/src/images/KAT-locos-m.png b/src/images/KAT-locos-m.png new file mode 100644 index 000000000..db1825f2f Binary files /dev/null and b/src/images/KAT-locos-m.png differ diff --git a/src/images/KAT-locos-s.png b/src/images/KAT-locos-s.png new file mode 100644 index 000000000..06d8aa6b3 Binary files /dev/null and b/src/images/KAT-locos-s.png differ diff --git a/src/images/KAT-player.png b/src/images/KAT-player.png new file mode 100644 index 000000000..d57b8ddc4 Binary files /dev/null and b/src/images/KAT-player.png differ diff --git a/src/images/about-us-small.png b/src/images/about-us-small.png new file mode 100644 index 000000000..6d645af85 Binary files /dev/null and b/src/images/about-us-small.png differ diff --git a/src/images/about-us.png b/src/images/about-us.png new file mode 100644 index 000000000..424e541f1 Binary files /dev/null and b/src/images/about-us.png differ diff --git a/src/images/icons/arrow-left-icon.svg b/src/images/icons/arrow-left-icon.svg new file mode 100644 index 000000000..1e430c088 --- /dev/null +++ b/src/images/icons/arrow-left-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow-up-icon.svg b/src/images/icons/arrow-up-icon.svg new file mode 100644 index 000000000..f209a8333 --- /dev/null +++ b/src/images/icons/arrow-up-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/buildings-icon.svg b/src/images/icons/buildings-icon.svg new file mode 100644 index 000000000..89be44c11 --- /dev/null +++ b/src/images/icons/buildings-icon.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/burger-menu-icon.svg b/src/images/icons/burger-menu-icon.svg new file mode 100644 index 000000000..4f8cca587 --- /dev/null +++ b/src/images/icons/burger-menu-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/close-circle-hover-icon.svg b/src/images/icons/close-circle-hover-icon.svg new file mode 100644 index 000000000..f7faae228 --- /dev/null +++ b/src/images/icons/close-circle-hover-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/close-circle-icon.svg b/src/images/icons/close-circle-icon.svg new file mode 100644 index 000000000..6fee4ce3b --- /dev/null +++ b/src/images/icons/close-circle-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/close-icon.svg b/src/images/icons/close-icon.svg new file mode 100644 index 000000000..2dda1acb0 --- /dev/null +++ b/src/images/icons/close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/compatibility-diagram-icon.svg b/src/images/icons/compatibility-diagram-icon.svg new file mode 100644 index 000000000..f9b53761c --- /dev/null +++ b/src/images/icons/compatibility-diagram-icon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/computer-icon.svg b/src/images/icons/computer-icon.svg new file mode 100644 index 000000000..6927580a2 --- /dev/null +++ b/src/images/icons/computer-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/dumbbell-hand-icon.svg b/src/images/icons/dumbbell-hand-icon.svg new file mode 100644 index 000000000..b84079b45 --- /dev/null +++ b/src/images/icons/dumbbell-hand-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/facebook-icon.svg b/src/images/icons/facebook-icon.svg new file mode 100644 index 000000000..56624e300 --- /dev/null +++ b/src/images/icons/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo (2).svg b/src/images/icons/logo (2).svg new file mode 100644 index 000000000..105f9e7f1 --- /dev/null +++ b/src/images/icons/logo (2).svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/icons/logo-br.svg b/src/images/icons/logo-br.svg new file mode 100644 index 000000000..dc3fb5da1 --- /dev/null +++ b/src/images/icons/logo-br.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/icons/mortarboard-icon.svg b/src/images/icons/mortarboard-icon.svg new file mode 100644 index 000000000..ebd73b9d1 --- /dev/null +++ b/src/images/icons/mortarboard-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/icons/open-circle-hover-icon.svg b/src/images/icons/open-circle-hover-icon.svg new file mode 100644 index 000000000..224df03a0 --- /dev/null +++ b/src/images/icons/open-circle-hover-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/open-circle-icon.svg b/src/images/icons/open-circle-icon.svg new file mode 100644 index 000000000..c1c91e514 --- /dev/null +++ b/src/images/icons/open-circle-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/play-button-active.svg b/src/images/icons/play-button-active.svg new file mode 100644 index 000000000..708ec1357 --- /dev/null +++ b/src/images/icons/play-button-active.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/play-button.svg b/src/images/icons/play-button.svg new file mode 100644 index 000000000..f737eed2d --- /dev/null +++ b/src/images/icons/play-button.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/reddit-icon.svg b/src/images/icons/reddit-icon.svg new file mode 100644 index 000000000..a0ba9b0bc --- /dev/null +++ b/src/images/icons/reddit-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social-media-icon.svg b/src/images/icons/social-media-icon.svg new file mode 100644 index 000000000..8d37db9c7 --- /dev/null +++ b/src/images/icons/social-media-icon.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/twitter-icon.svg b/src/images/icons/twitter-icon.svg new file mode 100644 index 000000000..0318bbf1e --- /dev/null +++ b/src/images/icons/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/wireless-connection-icon.svg b/src/images/icons/wireless-connection-icon.svg new file mode 100644 index 000000000..45fd1e34c --- /dev/null +++ b/src/images/icons/wireless-connection-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/icons/youtube-icon.svg b/src/images/icons/youtube-icon.svg new file mode 100644 index 000000000..0636fcb91 --- /dev/null +++ b/src/images/icons/youtube-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/portativ-loco.png b/src/images/portativ-loco.png new file mode 100644 index 000000000..d8d3645dd Binary files /dev/null and b/src/images/portativ-loco.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..60754a5f3 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,23 @@ -'use strict'; +import { setupDropdownToggle } from './modules/dropdownToggle.js'; +import { setupLangSelection } from './modules/langSelection.js'; +import { setupHeaderSwiper } from './modules/headerSwiper.js'; +import { setupAboutSwiper } from './modules/aboutSwiper.js'; +import { setupMenuToggle } from './modules/menuToggle.js'; +import { setupPageScroll } from './modules/pageScroll.js'; +import { setupHelpToggle } from './modules/helpToggle.js'; +import { setupFaqToggle } from './modules/faqToggle.js'; +import { setupTechDetailToggle } from './modules/techDetailToggle.js'; +import { setupSubmitForm } from './modules/setupSubmitForm.js'; + +document.addEventListener('DOMContentLoaded', () => { + setupDropdownToggle(); + setupLangSelection(); + setupHeaderSwiper(); + setupAboutSwiper(); + setupMenuToggle(); + setupPageScroll(); + setupHelpToggle(); + setupFaqToggle(); + setupTechDetailToggle(); + setupSubmitForm(); +}); diff --git a/src/scripts/modules/aboutSwiper.js b/src/scripts/modules/aboutSwiper.js new file mode 100644 index 000000000..6fd5e567d --- /dev/null +++ b/src/scripts/modules/aboutSwiper.js @@ -0,0 +1,60 @@ +export const setupAboutSwiper = () => { + const TABLET_MIN_WIDTH = 1280; + let aboutSwiper; + + const initSwiper = () => { + aboutSwiper = new Swiper('.about__swiper', { + loop: false, + grabCursor: true, + pagination: { + el: window.innerWidth < TABLET_MIN_WIDTH ? '.about__bullets' : '.about__fraction', + type: window.innerWidth < TABLET_MIN_WIDTH ? 'bullets' : 'fraction', + clickable: true, + }, + scrollbar: { + el: '.about__scrollbar', + draggable: true, + }, + spaceBetween: 10, + }); + + const prevBtn = document.querySelector('.about__prev-btn'); + const nextBtn = document.querySelector('.about__next-btn'); + + const updateAboutButtons = () => { + prevBtn.disabled = aboutSwiper.isBeginning; + nextBtn.disabled = aboutSwiper.isEnd; + }; + + prevBtn.addEventListener('click', () => { + aboutSwiper.slidePrev(); + }); + + nextBtn.addEventListener('click', () => { + aboutSwiper.slideNext(); + }); + + aboutSwiper.on('slideChange', updateAboutButtons); + aboutSwiper.on('scrollbarDragEnd', updateAboutButtons); + aboutSwiper.on('scrollbarDragMove', updateAboutButtons); + updateAboutButtons(); + }; + + const updateSwiperOnResize = () => { + const isSmallScreen = window.innerWidth < TABLET_MIN_WIDTH; + + if (isSmallScreen && !aboutSwiper.pagination.bullets.length) { + aboutSwiper.destroy(); + initSwiper(); + } else if (!isSmallScreen && aboutSwiper.pagination.bullets.length) { + aboutSwiper.destroy(); + initSwiper(); + } + }; + + initSwiper(); + + window.addEventListener('resize', () => { + updateSwiperOnResize(); + }); +} diff --git a/src/scripts/modules/dropdownToggle.js b/src/scripts/modules/dropdownToggle.js new file mode 100644 index 000000000..3b32d2856 --- /dev/null +++ b/src/scripts/modules/dropdownToggle.js @@ -0,0 +1,42 @@ +export const setupDropdownToggle = () => { + const dropdown = document.querySelector('.dropdown'); + const dropdownTrigger = document.querySelector('.dropdown__trigger'); + const dropdownContent = document.querySelector('.dropdown__content'); + + if (!dropdown || !dropdownTrigger || !dropdownContent) return; + + const closeDropdown = () => { + dropdownTrigger.classList.remove('dropdown__trigger--active'); + dropdownContent.classList.remove('dropdown__content--active'); + } + + const toggleDropdown = () => { + const isActive = dropdownTrigger.classList.toggle('dropdown__trigger--active'); + dropdownContent.classList.toggle('dropdown__content--active', isActive); + }; + + dropdownTrigger.addEventListener('click', toggleDropdown); + + dropdown.addEventListener('click', (e) => { + const target = e.target.closest('.dropdown__item'); + + if (target) { + closeDropdown(); + } + }) + + document.addEventListener('click', (e) => { + if ( + dropdownTrigger.classList.contains('dropdown__trigger--active') + && !dropdown.contains(e.target) + ) { + closeDropdown(); + } + }); + + window.addEventListener('resize', () => { + if (window.innerWidth < 1280 && dropdownTrigger.classList.contains('dropdown__trigger--active')) { + closeDropdown(); + } + }); +} diff --git a/src/scripts/modules/faqToggle.js b/src/scripts/modules/faqToggle.js new file mode 100644 index 000000000..f1c909f99 --- /dev/null +++ b/src/scripts/modules/faqToggle.js @@ -0,0 +1,60 @@ +export const setupFaqToggle = () => { + const faq = document.querySelector('.faq'); + const faqContent = document.querySelector('.faq__content'); + const closeFaqBtn = document.querySelector('.faq__close'); + const faqMoreBtn = document.querySelector('.faq__more'); + const openFaqBtns = document.querySelectorAll('.faq-btn'); + + const resetAccordion = () => { + [...accordions].forEach(accordion => { + console.log(accordion); + + if (accordion.classList.contains('accordion--open')) { + accordion.classList.remove('accordion--open'); + } + }) + } + + const openFaq = () => { + faq.classList.add('page__aside--active'); + } + + const closeFaq = () => { + faq.classList.remove('page__aside--active'); + resetAccordion(); + } + + [...openFaqBtns].forEach(btn => btn.addEventListener('click', openFaq)); + + closeFaqBtn.addEventListener('click', () => { + closeFaq(); + }) + + const articles = document.querySelector('.faq__articles'); + const accordions = document.querySelectorAll('.accordion'); + + faqMoreBtn.addEventListener('click', () => { + closeFaq(); + }); + + + articles.addEventListener('click', (e) => { + const article = e.target.closest('article'); + + if (!article.classList.contains('accordion--open')) { + article.classList.add('accordion--open'); + } else { + article.classList.remove('accordion--open'); + } + }); + + document.addEventListener('click', (e) => { + const en = e.target; + + if (!faqContent.contains(en)) { + if (faq.classList.contains('page__aside--active') && [...openFaqBtns].every(btn => btn !== en)) { + closeFaq(); + } + } + }); +} diff --git a/src/scripts/modules/headerSwiper.js b/src/scripts/modules/headerSwiper.js new file mode 100644 index 000000000..95f71498c --- /dev/null +++ b/src/scripts/modules/headerSwiper.js @@ -0,0 +1,65 @@ +export const setupHeaderSwiper = () => { + const TABLET_MIN_WIDTH = 1280; + let swiper; + + const initSwiper = () => { + swiper = new Swiper('.header__swiper', { + loop: false, + grabCursor: true, + scrollbar: { + el: '.header__scrollbar', + draggable: true, + }, + autoplay: { + delay: 5000, + }, + speed: 600, + }); + + const prevBtn = document.querySelector('.header__prev-btn'); + const nextBtn = document.querySelector('.header__next-btn'); + + const updateHeaderButtons = () => { + prevBtn.disabled = swiper.isBeginning; + nextBtn.disabled = swiper.isEnd; + }; + + nextBtn.addEventListener('click', () => { + swiper.slideNext(); + }); + + prevBtn.addEventListener('click', () => { + swiper.slidePrev(); + }); + + swiper.on('slideChange', updateHeaderButtons); + swiper.on('scrollbarDragEnd', updateHeaderButtons); + swiper.on('scrollbarDragMove', updateHeaderButtons); + updateHeaderButtons(); + } + + const destroySwiper = () => { + if (swiper) { + swiper.destroy(true, true); + swiper = null; + } + }; + + const updateSwiperOnResize = () => { + const isSmallScreen = window.innerWidth < TABLET_MIN_WIDTH; + + if (isSmallScreen) { + destroySwiper(); + } else { + if (!swiper) { + initSwiper(); + } + } + }; + + updateSwiperOnResize(); + + window.addEventListener('resize', () => { + updateSwiperOnResize(); + }); +} diff --git a/src/scripts/modules/helpToggle.js b/src/scripts/modules/helpToggle.js new file mode 100644 index 000000000..fb70e5f61 --- /dev/null +++ b/src/scripts/modules/helpToggle.js @@ -0,0 +1,38 @@ +export const setupHelpToggle = () => { + const help = document.querySelector('.help'); + const helpContent = document.querySelector('.help__content'); + const firstHelpList = help.querySelector('.help__list--first'); + const helpServiceBtn = help.querySelectorAll('.help__service-btn'); + const closeHelpBtn = document.querySelector('.help__close'); + + const openHelpBtns = document.querySelectorAll('.help-btn'); + + const closeHelp = () => help?.classList.remove('page__aside--active'); + const openHelp = () => help?.classList.add('page__aside--active'); + + openHelpBtns.forEach(btn => btn.addEventListener('click', openHelp)); + + closeHelpBtn.addEventListener('click', closeHelp); + + firstHelpList.addEventListener('click', (e) => { + if (e.target.closest('a')) { + closeHelp(); + } + }); + + helpServiceBtn.forEach(btn => btn.addEventListener('click', closeHelp)); + + document.addEventListener('click', (e) => { + const eventOwner = e.target; + + if (help.classList.contains('page__aside--active')) { + + if ( + !helpContent.contains(eventOwner) + && [...openHelpBtns].every(btn => !btn.contains(eventOwner)) + ) { + closeHelp(); + } + } + }) +} diff --git a/src/scripts/modules/langSelection.js b/src/scripts/modules/langSelection.js new file mode 100644 index 000000000..ccb501d8e --- /dev/null +++ b/src/scripts/modules/langSelection.js @@ -0,0 +1,36 @@ +export const setupLangSelection = () => { + const triggerDropdown = document.querySelector('.dropdown__trigger'); + const dropdownLangList = document.querySelector('.dropdown__list'); + const langMenu = document.querySelector('.menu__lang'); + const menuLangList = langMenu.querySelector('.menu__list'); + + const updateLangSelection = (selectedLang) => { + const prevActiveHeader = dropdownLangList?.querySelector('.dropdown__item--active'); + const prevActiveMenu = menuLangList?.querySelector('.menu__item--active'); + + prevActiveHeader?.classList.remove('dropdown__item--active'); + prevActiveMenu?.classList.remove('menu__item--active'); + + const newActiveHeader = dropdownLangList?.querySelector(`.dropdown__item[data-lang="${selectedLang}"]`); + const newActiveMenu = menuLangList?.querySelector(`.menu__item[data-lang="${selectedLang}"]`); + + if (newActiveHeader) { + triggerDropdown.textContent = selectedLang; + newActiveHeader.classList.add('dropdown__item--active'); + } + + newActiveMenu?.classList.add('menu__item--active'); + } + + const handleLangListClick = (e) => { + const closestLi = e.target.closest('li'); + + if (closestLi) { + const selectedLang = closestLi.dataset.lang; + updateLangSelection(selectedLang); + } + }; + + dropdownLangList?.addEventListener('click', handleLangListClick); + menuLangList?.addEventListener('click', handleLangListClick); +} diff --git a/src/scripts/modules/menuToggle.js b/src/scripts/modules/menuToggle.js new file mode 100644 index 000000000..27a25375c --- /dev/null +++ b/src/scripts/modules/menuToggle.js @@ -0,0 +1,67 @@ +export const setupMenuToggle = () => { + const pageMenu = document.querySelector('.page__menu'); + const pageMenuContent = document.querySelector('.menu__nav'); + const langMenu = document.querySelector('.menu__lang'); + const pageMenuLangBtn = pageMenu.querySelector('.menu__btn--lang'); + const openMenuBtn = document.querySelector('.header__menu-open-btn'); + const closeMenuBtn = document.querySelector('.menu__close'); + const openLangBarBtn = document.querySelector('.menu__btn--lang'); + const closeLangBarBtn = document.querySelector('.menu__back'); + + if (!pageMenu || !langMenu || !openMenuBtn || !closeMenuBtn || !openLangBarBtn || !closeLangBarBtn) { + return; + } + + const openMenu = () => pageMenu.classList.add('page__menu--active'); + const closeMenu = () => pageMenu.classList.remove('page__menu--active'); + + const openLangBar = () => langMenu.classList.add('menu__lang--active'); + const closeLangBar = () => langMenu.classList.remove('menu__lang--active'); + + openMenuBtn.addEventListener('click', openMenu); + closeMenuBtn.addEventListener('click', closeMenu); + + openLangBarBtn.addEventListener('click', openLangBar); + closeLangBarBtn.addEventListener('click', closeLangBar); + + langMenu.addEventListener('click', (e) => { + if (e.target.closest('li')) { + closeLangBar(); + } + + e.stopPropagation(); + }); + + pageMenu.addEventListener('click', (e) => { + const li = e.target.closest('li'); + + if (li && !li.contains(pageMenuLangBtn)) { + closeMenu(); + } + }); + + document.addEventListener('click', (e) => { + if ( + !langMenu.contains(e.target) + && langMenu.classList.contains('menu__lang--active') + && e.target !== openLangBarBtn + ) { + closeLangBar(); + return; + } + + if (!pageMenuContent.contains(e.target) + && pageMenu.classList.contains('page__menu--active') + && e.target !== openMenuBtn + ) { + closeMenu(); + } + }); + + window.addEventListener('resize', () => { + if (window.innerWidth >= 1280 && pageMenu.classList.contains('page__menu--active')) { + closeLangBar(); + closeMenu(); + } + }) +}; diff --git a/src/scripts/modules/pageScroll.js b/src/scripts/modules/pageScroll.js new file mode 100644 index 000000000..61d2baf69 --- /dev/null +++ b/src/scripts/modules/pageScroll.js @@ -0,0 +1,23 @@ +export const setupPageScroll = () => { + const moreBtn = document.querySelectorAll('.more-btn'); + const sectionMoreThanGaming = document.getElementById('gaming'); + + moreBtn.forEach(btn => btn.addEventListener('click', () => { + sectionMoreThanGaming.scrollIntoView(); + })); + + const upBtn = document.querySelector('.contact__up'); + const logos = document.querySelectorAll('.logo'); + + function scrollToPageTop() { + document.documentElement.scrollTo(0, 0); + } + + [...logos].forEach((logo) => logo.addEventListener('click', () => { + scrollToPageTop(); + })); + + upBtn.addEventListener('click', () => { + scrollToPageTop(); + }) +} diff --git a/src/scripts/modules/setupSubmitForm.js b/src/scripts/modules/setupSubmitForm.js new file mode 100644 index 000000000..e180c2e0b --- /dev/null +++ b/src/scripts/modules/setupSubmitForm.js @@ -0,0 +1,113 @@ +export const setupSubmitForm = () => { + const frm = document.forms.contact__form; + + const name = frm.name; + const nameLabel = document.querySelector('label[for="name"]'); + const nameLabelText = nameLabel.innerText; + + const email = frm.email; + const emailLabel = document.querySelector('label[for="email"]'); + const emailLabelText = emailLabel.innerText; + + const phone = frm.phone; + const phoneLabel = document.querySelector('label[for="phone"]'); + const phoneLabelText = phoneLabel.innerText; + + const submitBtn = document.querySelector('.form__submit-btn'); + + frm.addEventListener('submit', (e) => { + e.preventDefault(); + let err = false; + + if (!name.value) { + nameField.setError(nameField.msg); + err = true; + } + + if (!email.value) { + emailField.setError(emailField.msg); + err = true; + } + + if (!phone.value) { + phoneField.setError(phoneField.msg); + err = true; + } + + if (err) { + return; + } + + const elements = [...frm.elements]; + + elements.forEach(element => { + element.disabled = true; + }) + + const btnText = submitBtn.firstElementChild; + const btnLoader = submitBtn.lastElementChild; + + const text = btnText.innerText; + + btnText.innerText = ''; + btnLoader.classList.add('form__loader--active'); + + wait(2000) + .then(() => { + frm.reset(); + }) + .finally(() => { + elements.forEach(element => { + element.disabled = ''; + }) + btnText.innerText = text; + btnLoader.classList.remove('form__loader--active'); + }) + }); + + function wait(delay) { + return new Promise(resolve => setTimeout(resolve, delay)); + } + + class Field { + constructor(input, label, labelText, msg) { + this.input = input; + this.label = label; + this.labelText = labelText; + this.errMsg = ''; + this.msg = msg; + } + + setError(msg) { + this.label.innerText = msg; + this.label.style.color = '#860404'; + this.input.style.borderBottomColor = '#860404'; + }; + + clearError() { + this.label.innerText = this.labelText; + this.label.style.color = ''; + this.input.style.borderBottomColor = ''; + }; + } + + const nameField = new Field(name, nameLabel, nameLabelText, 'Please, fill your name*'); + const emailField = new Field(email, emailLabel, emailLabelText, 'Please, fill your email*'); + const phoneField = new Field(phone, phoneLabel, phoneLabelText, 'Please, fill your phone*'); + + const createHandlers = (field) => { + field.input.addEventListener('blur', (e) => { + if (!e.target.value.trim()) { + field.setError(field.msg); + } + }); + + field.input.addEventListener('input', () => { + field.clearError(); + }); + } + + createHandlers(nameField); + createHandlers(emailField); + createHandlers(phoneField); +} diff --git a/src/scripts/modules/techDetailToggle.js b/src/scripts/modules/techDetailToggle.js new file mode 100644 index 000000000..7f6430b12 --- /dev/null +++ b/src/scripts/modules/techDetailToggle.js @@ -0,0 +1,19 @@ +export const setupTechDetailToggle = () => { + const openBars = document.querySelectorAll('.open-bar'); + const openBtns = document.querySelectorAll('.open-bar__circle'); + + openBtns.forEach(openBtn => { + openBtn.addEventListener('click', (e) => { + e.target.closest('.open-bar').classList.toggle('open-bar--active'); + }); + }); + + + window.addEventListener('resize', () => { + if (window.innerWidth >= 1280) { + openBars.forEach(openEl => { + openEl.classList.remove('open-bar--active'); + }); + } + }); +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 619b8c52b..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..03c5ada20 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,41 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +@mixin btn-link { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 130%; + + @include on-mobile { + font-size: 14px; + } +} + +@mixin text-1 { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $secondary-text-color; +} + +@mixin text-2 { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: normal; + + @include on-mobile { + font-size: 12px; + } +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..b58985c75 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,39 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; + +.bg-gradient { + background: $gradient; +} + +.accent { + color: $accent-color; + font-weight: 400; +} + +.no-wrap { + text-wrap: nowrap; +} + +.more-btn { + position: relative; + cursor: pointer; + color: $accent-color; + + @include hover(color, $main-text-color); + + &::after { + position: absolute; + bottom: -7px; + left: 50%; + transform: translate(-50%, 100%); + + content: ''; + display: block; + border-left: 4.5px solid transparent; + border-right: 4.5px solid transparent; + border-top: 5px solid $accent-color; + } + + @include hover-after(border-top-color, $main-text-color); +} diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..116249cdc --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,192 @@ +.about { + &__container { + @include content-limitation; + + display: flex; + flex-direction: column; + gap: 175px; + + @include on-small-desktop { + gap: 185px; + } + + @include on-tablet { + gap: 100px; + } + + @include on-mobile { + gap: 80px; + } + } + + &__top { + @include page-grid; + + @include on-mobile { + display: flex; + flex-direction: column; + row-gap: 20px; + } + } + + &__visual { + position: relative; + grid-column: 4 / span 7; + + @include on-small-desktop { + grid-column: 3 / span 5; + } + + @include on-tablet { + grid-column: span 3; + } + + @include on-mobile { + margin-bottom: 20px; + } + } + + & &__fraction { + --swiper-pagination-fraction-color: #{$accent-color}; + --swiper-pagination-top: 0; + --swiper-pagination-bottom: auto; + --swiper-pagination-left: 0; + + transform: translateX(calc(-100% - #{$grid-col-gap})); + width: fit-content; + font-size: 14px; + line-height: 17px; + letter-spacing: -1px; + + @include on-tablet { + display: none; + } + } + + & &__bullets { + --swiper-pagination-bottom: 0; + --swiper-pagination-color: #ababab; + --swiper-pagination-bullet-inactive-color: #484848; + --swiper-pagination-bullet-horizontal-gap: 3px; + --swiper-pagination-bullet-size: 4px; + --swiper-pagination-bullet-height: 4px; + + transform: translateY(20px); + font-size: 4px; + line-height: 1; + display: none; + + @include on-tablet { + display: block; + } + } + + &__navigation { + margin-top: 12px; + + @include on-tablet { + display: none; + } + } + + &__content { + grid-column: 12 / span 5; + display: flex; + flex-direction: column; + gap: 32px; + + @include on-small-desktop { + grid-column: 9 / span 4; + gap: 20px; + } + + @include on-tablet { + grid-column: span 3; + } + + @include on-mobile { + grid-column: span 2; + } + } + + &__title { + margin-bottom: 30px; + + @include on-small-desktop { + margin-bottom: 32px; + } + + &:nth-child(1) { + margin-bottom: 28px; + + @include on-small-desktop { + margin-bottom: 10px; + } + + @include on-mobile { + margin-bottom: 0; + } + } + + &--in { + @include on-mobile { + display: none; + } + } + + &--out { + display: none; + + @include on-mobile { + display: block; + } + } + } + + &__desc { + @include text-1; + } + + &__bottom { + @include page-grid; + } + + &__greeting { + grid-column: 2 / span 6; + padding-block: 40px 70px; + + @include on-small-desktop { + padding-block: 40px; + grid-column: span 5; + } + + @include on-tablet { + padding-block: 20px; + grid-column: span 4; + } + + @include on-mobile { + padding-block: 0; + } + } + + &__hello { + margin-bottom: 15px; + } + + &__decor { + grid-column: 9 / span 8; + background-image: url('../images/about-us.png'); + background-size: auto 100%; + background-repeat: no-repeat; + + @include on-small-desktop { + grid-column: 7 / span 6; + } + + @include on-tablet { + background-image: url('../images/about-us-small.png'); + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/accordion.scss b/src/styles/blocks/accordion.scss new file mode 100644 index 000000000..206f673c4 --- /dev/null +++ b/src/styles/blocks/accordion.scss @@ -0,0 +1,73 @@ +.accordion { + width: 100%; + padding: 17px 26px 17px 30px; + border-radius: 4px; + border: 1px solid $accent-color; + box-sizing: border-box; + cursor: pointer; + + &__content { + display: grid; + grid-template-rows: 0fr; + + @include transition(grid-template-rows); + } + + &__title { + font-size: 16px; + font-weight: 400; + line-height: 24px; + + position: relative; + + @include transition(color); + + &::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%) rotate(-90deg); + + @include transition(transform); + + display: block; + border-left: 4.5px solid transparent; + border-right: 4.5px solid transparent; + border-top: 6px solid $accent-color; + + @include on-tablet { + display: none; + } + } + } + + &--open &__content { + grid-template-rows: 1fr; + } + + &--open &__title::after { + transform: translateY(-50%) rotate(0deg); + } + + &__content-wrapper { + overflow: hidden; + } + + &__text { + margin-top: 18px; + font-size: 16px; + font-weight: 400; + line-height: 24px; + margin-bottom: 20px; + color: $secondary-text-color; + } + + &__date { + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $date-color; + margin-bottom: 6px; + } +} diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss new file mode 100644 index 000000000..e5abfaf99 --- /dev/null +++ b/src/styles/blocks/article.scss @@ -0,0 +1,63 @@ +.article { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding: 5px; + border-radius: 10px; + transition: + box-shadow $hover-duration, + transform $hover-duration, + padding $hover-duration; + + &:hover { + box-shadow: $box-shadow; + } + + @include on-mobile { + align-items: flex-start; + } + + &__img { + height: 80px; + width: auto; + object-fit: cover; + object-position: center; + + margin-bottom: 30px; + + @include on-mobile { + display: none; + } + } + + &__title { + margin-bottom: 18px; + + @include on-mobile { + margin-bottom: 11px; + } + } + + &__desc { + @include text-1; + + text-align: center; + + @include on-mobile { + text-align: start; + } + + &--2-line { + @include on-mobile { + @include visible-2-lines; + } + } + + &--3-line { + @include on-tablet { + @include visible-3-lines; + } + } + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..3b0e6d130 --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,61 @@ +.benefits { + &__container { + @include content-limitation; + + display: flex; + flex-direction: column; + align-items: center; + gap: 80px; + + @include on-tablet { + align-items: flex-start; + gap: 30px; + } + } + + &__title { + &--accent { + font-weight: 400; + } + } + + &__articles { + @include page-grid; + } + + &__article { + @include on-desktop { + &:nth-child(1) { + grid-column: 1 / span 4; + } + + &:nth-child(2) { + grid-column: 7 / span 4; + } + + &:nth-child(3) { + grid-column: 13 / span 4; + } + } + + @include on-small-desktop { + grid-column: span 4; + } + + @include on-tablet { + grid-column: span 2; + } + } + + &__button { + display: none; + + @include on-small-desktop { + display: flex; + } + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss new file mode 100644 index 000000000..95e0a749d --- /dev/null +++ b/src/styles/blocks/body.scss @@ -0,0 +1,5 @@ +.body { + font-family: Inter, sans-serif; + font-weight: 400; + background-color: $dark-color; +} diff --git a/src/styles/blocks/box-button.scss b/src/styles/blocks/box-button.scss new file mode 100644 index 000000000..038da395d --- /dev/null +++ b/src/styles/blocks/box-button.scss @@ -0,0 +1,40 @@ +.box-button { + @include btn-link; + + background-color: $accent-color; + box-sizing: border-box; + width: 200px; + height: 48px; + border-radius: 4px; + + display: flex; + justify-content: center; + align-items: center; + + @include on-mobile { + width: 100%; + height: 40px; + } + + transition: + color $hover-duration, + background-color $hover-duration, + box-shadow $hover-duration; + + &:hover { + color: $accent-color; + box-shadow: $box-shadow; + background-color: $main-text-color; + } + + &:active { + background-color: $hover-bg-color; + } + + &:disabled { + background-color: $hover-bg-color; + color: $decor-color--grey; + box-shadow: none; + cursor: not-allowed; + } +} diff --git a/src/styles/blocks/buy.scss b/src/styles/blocks/buy.scss new file mode 100644 index 000000000..bc82e1b6a --- /dev/null +++ b/src/styles/blocks/buy.scss @@ -0,0 +1,34 @@ +.buy { + padding-block: 30px; + background: linear-gradient( + 180deg, + #00000036 0%, + #04040496 23.44%, + #050505 100% + ); + + @include on-mobile { + padding-top: 20px; + padding-bottom: 10px; + } + + &__wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + &__btn { + @include on-tablet { + width: 60vw; + } + + @include on-mobile { + @include content-limitation; + + width: 100%; + height: 40px; + } + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 000000000..2ee914f14 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,120 @@ +.contact { + background-color: $bg-color--secondary; + + &__container { + @include content-limitation; + @include page-grid; + + @include on-mobile { + display: flex; + flex-direction: column; + gap: 30px; + } + } + + &__content { + grid-column: span 4; + + @include on-tablet { + grid-column: span 3; + } + } + + &__tip { + font-size: 14px; + font-weight: 400; + line-height: 16.94px; + + margin-bottom: 13px; + + @include on-tablet { + margin-bottom: 11px; + } + } + + &__title { + margin-bottom: 26px; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-mobile { + margin-bottom: 2px; + } + } + + &__desc { + @include text-1; + + margin-bottom: 76px; + + @include on-mobile { + font-size: 12px; + line-height: 18px; + margin-bottom: 0; + } + + &--in { + @include on-mobile { + display: none; + } + } + + &--out { + display: none; + + @include on-mobile { + display: block; + order: 1; + } + } + } + + &__details { + @include text-1; + + font-size: 16px; + font-weight: 400; + line-height: 19.36px; + + @include on-mobile { + display: none; + } + } + + &__form { + grid-column: 9 / span 8; + display: flex; + flex-direction: column; + gap: 50px; + + @include on-small-desktop { + gap: 90px; + grid-column: 7 / span 6; + } + + @include on-tablet { + gap: 48px; + grid-column: span 3; + } + + @include on-mobile { + gap: 30px; + } + } + + &__up { + cursor: pointer; + height: 48px; + width: 48px; + background-color: transparent; + border-radius: 50%; + + @include hover(box-shadow, #{$box-shadow}); + + @include on-mobile { + display: none; + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..059d307ae --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,18 @@ +.contacts { + display: flex; + flex-direction: column; + gap: 12px; + + &__detail { + font-size: 16px; + font-weight: 400; + line-height: 130%; + color: $secondary-text-color; + + @include hover(color, $main-text-color); + + @include on-mobile { + font-size: 13px; + } + } +} diff --git a/src/styles/blocks/dropdown.scss b/src/styles/blocks/dropdown.scss new file mode 100644 index 000000000..731bcfc2b --- /dev/null +++ b/src/styles/blocks/dropdown.scss @@ -0,0 +1,76 @@ +.dropdown { + position: relative; + + @include btn-link; + + &__trigger { + position: relative; + cursor: pointer; + color: $accent-color; + + @include hover(color, $main-text-color); + + &::after { + position: absolute; + right: 0; + bottom: 0; + transform: translate(calc(100% + 3px), -100%); + + content: ''; + display: block; + border-left: 4.5px solid transparent; + border-right: 4.5px solid transparent; + border-top: 5px solid $accent-color; + } + + @include hover-after(border-top-color, $main-text-color); + + &--active { + color: $main-text-color; + + &::after { + border-top-color: $main-text-color; + } + } + } + + &__content { + position: absolute; + z-index: 3; + transform: translateY(-25px); + opacity: 0; + transition: + transform $hover-duration, + opacity $hover-duration; + + overflow: hidden; + width: max-content; + box-shadow: $box-shadow; + border-radius: 4px; + pointer-events: none; + background-color: $bg-color--main; + + &--active { + pointer-events: auto; + transform: translateY(5px); + opacity: 1; + } + } + + &__list { + display: flex; + flex-direction: column; + } + + &__item { + padding: 5px 20px; + cursor: pointer; + + @include hover(background-color, $decor-color--dark); + + &--active { + background-color: $decor-color--dark; + color: $accent-color; + } + } +} diff --git a/src/styles/blocks/faq.scss b/src/styles/blocks/faq.scss new file mode 100644 index 000000000..a77f363bd --- /dev/null +++ b/src/styles/blocks/faq.scss @@ -0,0 +1,122 @@ +.faq { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + overflow-y: auto; + z-index: 100; + display: grid; + place-items: center; + + @include on-tablet { + align-items: flex-start; + } + + &__container { + width: fit-content; + height: fit-content; + + @include page-grid; + @include content-limitation; + + @include on-tablet { + background-color: $bg-color--main; + display: flex; + margin: 0; + height: 100vh; + overflow-y: auto; + } + } + + &__content { + grid-column: 3 / span 12; + padding-block: 70px 50px; + background-color: $bg-color--main; + + position: relative; + + @include on-small-desktop { + grid-column: 2 / span 10; + padding-block: 60px 50px; + } + + @include on-tablet { + padding-top: 100px; + + @include content-limitation; + } + + @include on-mobile { + padding-top: 68px; + } + } + + &__wrapper { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: $grid-col-gap; + + @include on-small-desktop { + grid-template-columns: repeat(10, 1fr); + } + + @include on-tablet { + display: block; + } + } + + &__close { + position: absolute; + top: 26px; + right: 26px; + + @include on-small-desktop { + top: 18px; + right: 18px; + } + + @include on-tablet { + right: 0; + top: $content-margin--m; + } + + @include on-mobile { + top: $content-margin--s; + } + } + + &__title { + grid-column: 2 / span 10; + margin-bottom: 64px; + + @include on-small-desktop { + grid-column: 2 / span 8; + display: flex; + flex-direction: column; + margin-bottom: 50px; + } + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__articles { + grid-column: 2 / span 10; + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 50px; + + @include on-small-desktop { + grid-column: 2 / span 8; + } + } + + &__more { + grid-column: 1 / -1; + display: flex; + justify-content: center; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..1f7f71b43 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,68 @@ +.footer { + &__container { + @include content-limitation; + + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 30px; + + @include on-mobile { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px 20px; + padding-block: 50px; + + grid-template-areas: + 'logo logo' + 'nav contacts' + 'nav social-medias'; + } + } + + &__logo { + cursor: pointer; + + @include on-mobile { + grid-area: logo; + } + } + + &__nav { + @include on-mobile { + grid-area: nav; + } + } + + &__contacts { + display: none; + + @include on-mobile { + grid-area: contacts; + display: flex; + margin-bottom: 8px; + } + } + + &__contact { + font-size: 13px; + font-weight: 400; + color: $secondary-text-color; + } + + &__social-medias { + display: flex; + gap: 28px; + + @include on-small-desktop { + gap: 18px; + } + + @include on-mobile { + gap: 0; + justify-content: space-between; + + grid-area: social-medias; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 000000000..4f93e5b01 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,90 @@ +.form { + &__fields { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__input { + color: $main-text-color; + background-color: transparent; + border: none; + outline: none; + border-bottom: 1px solid $decor-color--grey; + font-size: 16px; + font-weight: 400; + line-height: 150%; + padding: 0; + padding-bottom: 6px; + + @include transition(border-bottom-color); + + &:-webkit-autofill { + transition: + background-color 5000s ease-in-out 0s, + color 5000s ease-in-out 0s; + } + + &:disabled { + cursor: not-allowed; + } + } + + &__label { + color: $secondary-text-color; + font-size: 14px; + line-height: 21px; + + @include transition(color); + } + + &__field { + display: flex; + flex-direction: column; + gap: 4px; + + &:focus-within .form__label { + color: $accent-color; + } + + &:focus-within .form__input { + border-bottom-color: $accent-color; + } + } + + &__bottom { + display: flex; + justify-content: space-between; + } + + &__submit-btn { + cursor: pointer; + } + + &__loader { + display: none; + + height: 20px; + width: 20px; + + border: 3px solid $decor-color--grey; + border-radius: 50%; + + border-left-color: $accent-color; + animation: load 1s linear infinite; + + &--active { + display: block; + } + } +} + +@keyframes load { + 0% { + transform: rotateZ(0deg); + } + + 100% { + transform: rotateZ(360deg); + } +} diff --git a/src/styles/blocks/gaming.scss b/src/styles/blocks/gaming.scss new file mode 100644 index 000000000..3e0be5a22 --- /dev/null +++ b/src/styles/blocks/gaming.scss @@ -0,0 +1,54 @@ +.gaming { + background-color: $bg-color--secondary; + + &__container { + @include content-limitation; + } + + &__title-wrapper { + text-align: center; + margin-bottom: 70px; + + @include on-small-desktop { + margin-bottom: 80px; + } + + @include on-tablet { + margin-bottom: 55px; + } + + @include on-mobile { + text-align: start; + margin-bottom: 45px; + } + } + + &__title { + margin-bottom: 16px; + + @include on-tablet { + margin-bottom: 12px; + } + } + &__tip { + @include text-2; + + color: $accent-color; + } + + &__articles { + @include page-grid; + } + + &__article { + grid-column: span 4; + + @include on-small-desktop { + grid-column: span 3; + } + + @include on-mobile { + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..3828b6fe4 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,267 @@ +.header { + &__container { + @include content-limitation; + + min-height: 100vh; + + display: flex; + flex-direction: column; + justify-content: space-between; + + @include on-tablet { + position: relative; + min-height: auto; + } + } + + &__top { + padding-top: 48px; + margin-bottom: 100px; + + display: flex; + align-items: center; + gap: 34px; + + @include on-tablet { + justify-content: space-between; + margin-bottom: 55px; + padding-top: 30px; + } + + @include on-mobile { + padding-top: 18px; + margin-bottom: 6px; + } + } + + &__menu { + flex-grow: 1; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + display: none; + } + } + + & &__menu-open-btn { + display: none; + + @include on-tablet { + display: block; + position: relative; + z-index: 10; + } + } + + &__hero { + @include page-grid; + + margin-bottom: 84px; + + @include on-tablet { + margin-bottom: 60px; + } + + @include on-mobile { + display: flex; + flex-direction: column-reverse; + margin-bottom: 50px; + gap: 0; + } + } + + &__content { + position: relative; + z-index: 2; + grid-column: span 6; + + @include on-small-desktop { + grid-column: span 5; + } + + @include on-tablet { + grid-column: span 3; + } + } + + &__title { + margin-bottom: 36px; + + @include on-small-desktop { + margin-bottom: 20px; + } + + @include on-tablet { + margin-bottom: 17px; + } + } + + &__title-accent { + font-weight: 500; + } + + &__text { + padding-left: 92px; + + @include on-tablet { + padding-left: 0; + } + } + + &__desc { + font-size: 20px; + line-height: 30px; + font-weight: 500; + color: $secondary-text-color; + + margin-bottom: 30px; + + @include on-small-desktop { + @include text-1; + + font-weight: 500; + + margin-bottom: 15px; + } + + @include on-tablet { + margin-bottom: 16px; + } + + @include on-mobile { + margin-bottom: 8px; + } + } + + &__price { + font-size: 20px; + font-weight: 500; + line-height: 24px; + + margin-bottom: 36px; + + @include on-small-desktop { + font-size: 18px; + line-height: 22px; + + margin-bottom: 20px; + } + + @include on-tablet { + margin-bottom: 24px; + } + + @include on-mobile { + text-align: center; + margin-bottom: 16px; + } + } + + &__play-btn { + margin-left: -12px; + + @include on-tablet { + margin-left: -3px; + } + } + + &__visual { + position: relative; + grid-column: span 10; + + @include on-small-desktop { + grid-column: span 7; + } + + @include on-tablet { + position: static; + grid-column: span 3; + } + } + + & &__swiper { + position: absolute; + right: 0; + + width: 125%; + height: 54vh; + min-height: 430px; + max-height: 700px; + + @include on-small-desktop { + width: 115%; + } + + @include on-tablet { + display: none; + } + } + + &__img { + display: none; + + @include on-tablet { + display: block; + position: absolute; + object-fit: contain; + object-position: bottom right; + width: 65vw; + height: 100%; + right: 0; + margin-right: -$content-margin--m; + top: 0; + } + + @include on-mobile { + position: relative; + width: calc(100% + (2 * #{$content-margin--s})); + min-width: 320px; + height: auto; + margin-left: calc(-1 * #{$content-margin--s}); + } + } + + &__bottom { + line-height: 150%; + + display: flex; + margin-bottom: 120px; + + @include on-small-desktop { + margin-bottom: 98px; + } + + @include on-tablet { + display: none; + } + } + + &__help { + @include btn-link; + + line-height: 150%; + display: flex; + gap: 40px; + } + + &__faq-btn { + cursor: pointer; + + @include hover(color, $accent-color); + } + + &__help-btn { + cursor: pointer; + + @include hover(color, $accent-color); + } + + &__more-btn { + @include btn-link; + + line-height: 150%; + margin-inline: auto; + } +} diff --git a/src/styles/blocks/help.scss b/src/styles/blocks/help.scss new file mode 100644 index 000000000..30799b128 --- /dev/null +++ b/src/styles/blocks/help.scss @@ -0,0 +1,186 @@ +.help { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + z-index: 100; + align-items: center; + display: flex; + + @include on-tablet { + align-items: flex-start; + } + + &__container { + width: 100%; + + @include page-grid; + @include content-limitation; + + @include on-tablet { + background-color: $bg-color--main; + display: flex; + margin: 0; + } + + @include on-mobile { + height: 100vh; + } + } + + &__content { + grid-column: 3 / span 12; + padding-block: 60px 82px; + background-color: $bg-color--main; + + position: relative; + + @include on-small-desktop { + grid-column: 2 / span 10; + padding-bottom: 74px; + } + + @include on-tablet { + padding-block: 100px 124px; + + @include content-limitation; + } + + @include on-mobile { + padding-block: 68px 73px; + } + } + + &__wrapper { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: $grid-col-gap; + + @include on-small-desktop { + grid-template-columns: repeat(10, 1fr); + } + + @include on-tablet { + display: block; + } + } + + &__close { + position: absolute; + top: 26px; + right: 26px; + + @include on-small-desktop { + top: 18px; + right: 18px; + } + + @include on-tablet { + right: 0; + top: $content-margin--m; + } + + @include on-mobile { + top: $content-margin--s; + } + } + + &__title { + grid-column: 2 / span 10; + margin-bottom: 64px; + + @include on-small-desktop { + grid-column: 2 / span 8; + } + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__main { + grid-column: 2 / span 10; + + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 30px; + margin-bottom: 30px; + + @include on-small-desktop { + grid-column: 2 / span 8; + margin-bottom: 20px; + } + + @include on-mobile { + margin-bottom: 30px; + } + } + + &__text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $secondary-text-color; + } + + &__service-btn { + color: $accent-color; + + @include hover(color, $main-text-color); + } + + &__bottom { + grid-column: 2 / span 5; + display: grid; + grid-template-columns: repeat(5, 1fr); + column-gap: $grid-col-gap; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + } + + @include on-mobile { + display: flex; + flex-direction: column; + gap: 30px; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 20px; + + &--first { + grid-column: span 3; + } + + &--second { + grid-column: span 2; + + @include on-mobile { + grid-column: span 2; + } + } + } + + &__item { + display: flex; + align-items: center; + } + + &__link { + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $accent-color; + + @include hover(color, $main-text-color); + + &--contact { + color: $secondary-text-color; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..0789a4b5a --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,39 @@ +.icon { + display: block; + width: 20px; + height: 20px; + cursor: pointer; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + + @include hover(transform, scale(1.2)); + + &--menu { + background-image: url('../images/icons/burger-menu-icon.svg'); + } + + &--close { + background-image: url('../images/icons/close-icon.svg'); + } + + &--back { + background-image: url('../images/icons/arrow-left-icon.svg'); + } + + &--facebook { + background-image: url('../images/icons/facebook-icon.svg'); + } + + &--twitter { + background-image: url('../images/icons/twitter-icon.svg'); + } + + &--youtube { + background-image: url('../images/icons/youtube-icon.svg'); + } + + &--reddit { + background-image: url('../images/icons/reddit-icon.svg'); + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 000000000..79d40d76e --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,31 @@ +.logo { + display: flex; + width: fit-content; + cursor: pointer; + + @include hover(transform, scale(1.1)); + + &__img { + width: 76px; + height: 16px; + + @include on-tablet { + width: 67px; + height: 14px; + } + + @include on-mobile { + width: 58px; + height: 12px; + } + + &--footer { + width: 72px; + height: 14px; + + @include on-tablet { + width: 69px; + } + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..be184d584 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,20 @@ +.main { + &__wrapper { + background: linear-gradient( + 90deg, + #{$bg-color--main} 0%, + #{$dark-color} 100% + ); + } + + &__buy { + display: none; + + @include on-tablet { + display: block; + position: sticky; + bottom: 0; + z-index: 1; + } + } +} diff --git a/src/styles/blocks/media-player.scss b/src/styles/blocks/media-player.scss new file mode 100644 index 000000000..33e8911ce --- /dev/null +++ b/src/styles/blocks/media-player.scss @@ -0,0 +1,34 @@ +.media-player { + z-index: 100; + position: fixed; + top: 0; + + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100vh; + + &__content { + position: relative; + } + + &__video { + height: 65vh; + aspect-ratio: 16 / 9; + width: auto; + + @include on-tablet { + min-width: 300px; + width: 90vw; + aspect-ratio: 16 / 9; + height: auto; + } + } + + &__close-btn { + position: absolute; + top: 20px; + right: 15px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..a7483818d --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,157 @@ +.menu { + left: 0; + right: 0; + + &__content { + position: relative; + } + + &__logo { + position: absolute; + background-color: transparent; + border: none; + padding: 0; + left: 0; + + padding-top: 48px; + + @include on-tablet { + padding-top: 30px; + left: $content-margin--m; + } + + @include on-mobile { + padding-top: 18px; + left: $content-margin--s; + } + } + + &__close { + position: absolute; + + @include on-tablet { + right: $content-margin--m; + top: $content-margin--m; + } + + @include on-mobile { + right: $content-margin--s; + top: $content-margin--s; + } + } + + &__back { + position: absolute; + + @include on-tablet { + left: $content-margin--m; + top: $content-margin--m; + } + + @include on-mobile { + left: $content-margin--s; + top: $content-margin--s; + } + } + + &__nav, + &__lang { + overflow-x: hidden; + + padding-top: 100px; + background-color: $bg-color--main; + box-sizing: border-box; + + @include on-mobile { + height: 100vh; + max-height: 588px; + padding-top: 75px; + } + } + + &__nav { + @include on-tablet { + padding-bottom: 118px; + } + + @include on-mobile { + padding-bottom: 0; + } + } + + &__lang { + position: absolute; + top: 0; + left: 0; + z-index: 2; + + width: 100%; + transform: translateX(-100%); + + @include transition(transform); + + &--active { + transform: translateX(0); + } + } + + &__container { + @include content-limitation; + + @include on-tablet { + @include page-grid; + } + + @include on-mobile { + display: flex; + } + } + + &__list { + @include on-tablet { + grid-column: 2 / span 3; + } + } + + &__item, + &__lang-item { + height: 50px; + position: relative; + + @include hover(color, $accent-color); + } + + &__link, + &__btn { + position: absolute; + left: -20vw; + + display: block; + width: 120vw; + height: 100%; + cursor: pointer; + + @include hover(background-color, $decor-color--dark); + } + + &__item-text { + position: relative; + z-index: 1; + display: flex; + height: 100%; + align-items: center; + pointer-events: none; + + font-size: 21px; + font-weight: 500; + line-height: 27.3px; + } + + &__item--active &__btn { + background-color: $decor-color--dark; + } + + &__item--active &__item-text { + color: $accent-color; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..49c12579b --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,49 @@ +.nav { + display: flex; + gap: 18px; + + &__list { + display: flex; + align-items: center; + height: auto; + + &--footer { + @include on-mobile { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + } + } + + &__item { + display: flex; + } + + &__link { + @include btn-link; + + box-sizing: border-box; + padding-inline: 18px; + height: 48px; + display: flex; + align-items: center; + + &--footer { + font-size: 14px; + padding-inline: 23px; + height: 40px; + color: $decor-color--light; + font-weight: 400; + + @include on-mobile { + font-size: 13px; + line-height: 20px; + padding: 0; + height: auto; + } + } + + @include hover(color, $accent-color); + } +} diff --git a/src/styles/blocks/open-bar.scss b/src/styles/blocks/open-bar.scss new file mode 100644 index 000000000..2b1437f92 --- /dev/null +++ b/src/styles/blocks/open-bar.scss @@ -0,0 +1,82 @@ +.open-bar { + width: fit-content; + display: flex; + + @include on-tablet { + flex-direction: column; + } + + &--active { + z-index: 1; + } + + &__circle { + position: relative; + height: 60px; + width: 60px; + cursor: pointer; + background-repeat: no-repeat; + background-size: cover; + background-image: url('../images/icons/open-circle-icon.svg'); + + @include hover( + background-image, + url('../images/icons/open-circle-hover-icon.svg') + ); + + @include on-mobile { + height: 34px; + width: 34px; + } + + &--active { + background-image: url('../images/icons/close-circle-icon.svg'); + + @include hover( + background-image, + url('../images/icons/close-circle-hover-icon.svg') + ); + } + } + + &__content { + display: grid; + grid-template-rows: 0fr; + width: max-content; + transition: grid-template-rows $hover-duration; + background-color: $bg-color--main; + border-radius: 4px; + + @include on-mobile { + max-width: 170px; + } + } + + &:is(&--active) &__content { + grid-template-rows: 1fr; + } + + &:is(&--active) &__circle { + background-image: url('../images/icons/close-circle-icon.svg'); + + @include hover( + background-image, + url('../images/icons/close-circle-hover-icon.svg') + ); + } + + &__content-wrapper { + overflow: hidden; + } + + &__text { + @include text-1; + + padding: 17px 10px 22px; + + @include on-mobile { + padding: 12px 10px; + font-size: 12px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..340e1f325 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,59 @@ +.page { + scroll-behavior: smooth; + position: relative; + min-width: 320px; + + &__aside { + opacity: 0; + pointer-events: none; + transform: translateX(-120%); + background-color: transparent; + + transition: + opacity $hover-duration, + background-color $hover-duration, + transform $hover-duration $hover-duration; + + &--active { + pointer-events: all; + opacity: 1; + background-color: $bg-shadow; + transform: translateX(0); + + transition: + transform $hover-duration, + background-color $hover-duration $hover-duration; + } + } + + &__menu { + position: absolute; + z-index: 100; + top: 0; + opacity: 0; + pointer-events: none; + + @include transition(opacity); + + &::before { + content: 'a'; + display: block; + height: 100vh; + width: 100%; + background-color: $bg-shadow; + position: absolute; + z-index: 0; + } + } + + &__menu--active { + @include on-tablet { + opacity: 1; + pointer-events: all; + } + } + + &:has(&__body aside[class*='--active']) { + overflow-y: hidden; + } +} diff --git a/src/styles/blocks/play-button.scss b/src/styles/blocks/play-button.scss new file mode 100644 index 000000000..eed2bd420 --- /dev/null +++ b/src/styles/blocks/play-button.scss @@ -0,0 +1,18 @@ +.play-button { + @include btn-link; + + display: block; + width: 250px; + height: 70px; + cursor: pointer; + padding-left: 60px; + + background-size: cover; + background-image: url('../images/icons/play-button.svg'); + + transition: background-image $hover-duration; + + &:hover { + background-image: url('../images/icons/play-button-active.svg'); + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..be106e6d9 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,19 @@ +.section { + padding-block: 160px; + + @include on-small-desktop { + padding-block: 100px; + } + + @include on-tablet { + padding-block: 70px; + } + + @include on-mobile { + padding-block: 50px; + } + + &__container { + @include content-limitation; + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 000000000..b68456081 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,70 @@ +.slider { + width: 100%; + height: 100%; + + &__wrapper { + width: 100%; + height: 100%; + } + + &__slide { + flex-shrink: 0; + position: relative; + width: 100%; + height: 100%; + + @include on-mobile { + height: 0; + padding-bottom: 68%; + } + } + + &__img { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + object-position: 20% top; + + &--full { + object-fit: contain; + object-position: 80% 0; + } + } + + &__bottom { + position: relative; + width: max-content; + } + + &__buttons { + display: flex; + gap: 103px; + padding-bottom: 10px; + } + + &__button { + @include btn-link; + + line-height: 150%; + cursor: pointer; + + @include transition(color); + + &:disabled { + cursor: not-allowed; + color: $secondary-text-color; + } + + &:not(&:disabled) { + @include hover(color, $accent-color); + } + } + + &__scrollbar { + --swiper-scrollbar-bg-color: #{$decor-color}; + --swiper-scrollbar-drag-bg-color: #{$accent-color}; + --swiper-scrollbar-size: 2px; + --swiper-scrollbar-bottom: 0; + } +} diff --git a/src/styles/blocks/tech.scss b/src/styles/blocks/tech.scss new file mode 100644 index 000000000..c2033c18c --- /dev/null +++ b/src/styles/blocks/tech.scss @@ -0,0 +1,257 @@ +.tech { + background-color: $bg-color--secondary; + + &__container { + @include content-limitation; + @include page-grid; + + row-gap: 80px; + + @include on-tablet { + display: flex; + flex-direction: column; + gap: 56px; + } + } + + &__title { + grid-column: 12 / span 5; + + @include on-small-desktop { + grid-column: 9 / span 4; + } + } + + &__details { + grid-column: 1 / -1; + + @include page-grid; + + row-gap: 10px; + + @include on-small-desktop { + max-width: 1060px; + margin-inline: auto; + } + + @include on-tablet { + display: flex; + align-items: center; + justify-content: center; + max-width: 100%; + + position: relative; + margin-inline: 0; + } + } + + &__subtitle { + margin-bottom: 21px; + } + + &__detail { + @include text-1; + + @include on-tablet { + display: none; + position: absolute; + background-color: $bg-color--main; + border-radius: 4px; + padding: 17px 10px 22px; + } + + &--sensor { + grid-column: 3 / span 3; + + @include on-small-desktop { + grid-column: span 3; + } + + @include on-tablet { + top: 6px; + left: 30vw; + z-index: 1; + } + } + + &--connection { + grid-column: 3 / span 3; + padding-bottom: 25px; + + @include on-small-desktop { + grid-column: 2 / span 3; + } + + @include on-tablet { + display: none; + + top: 50%; + left: 0; + } + } + + &--batteries { + grid-column: 12 / span 4; + padding-bottom: 21px; + + @include on-small-desktop { + grid-column: 9 / span 4; + } + + @include on-tablet { + display: none; + bottom: 0; + right: 0; + } + } + } + + &__img-container { + position: relative; + grid-column: 7 / span 4; + grid-row: 1 / span 2; + height: 98%; + + @include on-small-desktop { + grid-column: 5 / span 4; + } + } + + &__img { + position: absolute; + height: 100%; + left: 0; + top: 8px; + transform: translateX(-38.5%); + + @include on-small-desktop { + transform: translateX(-43%); + } + + @include on-tablet { + position: static; + transform: translateX(0); + width: 47vw; + } + + @include on-mobile { + min-width: 160px; + } + } + + &__bar { + display: none; + + @include on-tablet { + display: flex; + } + + position: absolute; + + &--first { + top: -16px; + left: 50%; + transform: translateX(-130%); + align-items: flex-end; + + @include on-mobile { + align-items: center; + top: 0; + left: 50%; + transform: translateX(-70%); + } + } + + &--second { + top: 42%; + right: 7%; + transform: translateX(33%); + align-items: center; + flex-direction: column; + + @include on-mobile { + flex-direction: row-reverse; + align-items: center; + top: 50%; + left: 50%; + transform: translate(-70%, -50%); + } + } + + &--third { + top: 70%; + left: -10%; + align-items: flex-start; + flex-direction: column !important; + + @include on-mobile { + flex-direction: column-reverse !important; + top: 90%; + left: 0%; + transform: translate(0, -100%); + } + } + } + + &__circle { + height: 60px; + width: 60px; + cursor: pointer; + background-repeat: no-repeat; + background-size: cover; + background-image: url('../images/icons/open-circle-icon.svg'); + + @include hover( + background-image, + url('../images/icons/open-circle-hover-icon.svg') + ); + + &--active { + background-image: url('../images/icons/close-circle-icon.svg'); + + @include hover( + background-image, + url('../images/icons/close-circle-hover-icon.svg') + ); + } + + @include on-tablet { + display: block; + } + + @include on-mobile { + height: 34px; + width: 34px; + } + + &--sensor { + top: -28px; + left: 65px; + + @include on-mobile { + top: -11px; + left: 60px; + } + } + + &--baterries { + top: 50%; + transform: translateY(-50%); + right: 50px; + + @include on-mobile { + right: 30px; + } + } + + &--connection { + bottom: 20px; + transform: translateX(-100%); + + @include on-mobile { + bottom: 7px; + transform: translateX(-50%); + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..e09ef6e2e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,71 @@ @import 'utils'; -@import 'fonts'; @import 'typography'; +@import 'blocks/page'; +@import 'blocks/body'; +@import 'blocks/header'; +@import 'blocks/slider'; +@import 'blocks/media-player'; +@import 'blocks/logo'; +@import 'blocks/icon'; +@import 'blocks/nav'; +@import 'blocks/dropdown'; +@import 'blocks/box-button'; +@import 'blocks/play-button'; +@import 'blocks/menu'; +@import 'blocks/faq'; +@import 'blocks/help'; +@import 'blocks/accordion'; +@import 'blocks/main'; +@import 'blocks/buy'; +@import 'blocks/section'; +@import 'blocks/gaming'; +@import 'blocks/article'; +@import 'blocks/about'; +@import 'blocks/open-bar'; +@import 'blocks/tech'; +@import 'blocks/benefits'; +@import 'blocks/contacts'; +@import 'blocks/contact'; +@import 'blocks/form'; +@import 'blocks/footer'; body { - background: $c-gray; + margin: 0; + padding: 0; + color: $main-text-color; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; +} + +p { + margin: 0; +} + +ul { + padding: 0; + margin: 0; + list-style: none; +} + +a { + text-decoration: none; + color: inherit; +} + +button { + background-color: transparent; + outline: none; + border: none; + padding: 0; + margin: 0; + color: inherit; + font: inherit; } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..3f5bdecb9 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,38 @@ %h1 { - font-family: Roboto, sans-serif; - font-weight: 400; + font-family: Inter, sans-serif; + font-size: 54px; + font-weight: 900; + line-height: 70.2px; + + @include on-small-desktop { + line-height: 130%; + font-size: 46px; + } + + @include on-tablet { + font-size: 26px; + } +} + +%h2 { + font-family: Inter, sans-serif; + font-size: 36px; + font-weight: 900; + line-height: normal; + + @include on-tablet { + font-size: 21px; + line-height: 130%; + } +} + +%h3 { + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 900; + line-height: normal; + + @include on-tablet { + font-size: 16px; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..2348a5f6e 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,97 @@ +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-small-desktop { + @media (max-width: $small-desktop-max-width) { + @content; + } +} + +@mixin on-tablet { + @media (max-width: $tablet-max-width) { + @content; + } +} + +@mixin on-mobile { + @media (max-width: $mobile-max-width) { + @content; + } +} + +@mixin page-grid { + display: grid; + grid-template-columns: repeat(16, 1fr); + gap: 40px $grid-col-gap; + + @include on-small-desktop { + grid-template-columns: repeat(12, 1fr); + } + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + } + + @include on-mobile { + grid-template-columns: repeat(2, 1fr); + row-gap: 20px; + } +} + +@mixin content-limitation { + margin-inline: auto; + + @media (min-width: $desktop-min-width) { + max-width: 1452px; + } + + @include on-small-desktop { + margin-inline: $content-margin--l; + } + + @include on-tablet { + margin-inline: $content-margin--m; + } + + @include on-mobile { + margin-inline: $content-margin--s; + } +} + +@mixin transition($_property) { + transition: #{$_property} $hover-duration; +} + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + @include transition($_property); + &:hover { #{$_property}: $_toValue; } } + +@mixin hover-after($_property, $_toValue) { + &::after { + @include transition($_property); + } + + &:hover::after { + #{$_property}: $_toValue; + } +} + +@mixin visible-2-lines { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 2; +} + +@mixin visible-3-lines { + @include visible-2-lines; + + -webkit-line-clamp: 3; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..21f7bed44 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,26 @@ -$c-gray: #eee; +$main-text-color: #fff; +$secondary-text-color: #929292; +$accent-color: #05c2df; +$hover-bg-color: #110e25; +$bg-color--main: #191536; +$bg-color--secondary: #05040b; +$dark-color: #000; +$date-color: #545454; +$decor-color: #212121; +$decor-color--light: #f2f2f2; +$decor-color--grey: #2f2f2f; +$decor-color--dark: #110e25; +$gradient: linear-gradient(100.83deg, $bg-color--main 0.67%, $dark-color 100%); +$box-shadow: 0 0 19px -2px $accent-color; +$bg-shadow: #000000b3; +$content-margin--l: 110px; +$content-margin--m: 34px; +$content-margin--s: 20px; +$grid-col-gap: 20px; +$content-max-width: 1452px; +$desktop-min-width: 1920px; +$small-desktop-max-width: 1919px; +$tablet-max-width: 1279px; +$mobile-max-width: 767px; +$mobile-min-width: 320px; +$hover-duration: 0.3s;