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..4e2b68bc0 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://Natalia-Onufrienko.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..99f9fd4f5 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,1286 @@ - + - Title + Kickstarter + + + + + + + + - -

Hello Mate Academy

- + + +
+ +
+
+ + SPECS + ХАРАКТЕРИСТИКИ + +
+ lang-en + lang-ua +
+ + BUY + КУПИТИ + +
+ + menu + +
+
+
+
+ + + + luna + +

+ + 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. + + + Виконання Luna збалансоване та плавне у всіх частотних діапазонах, + що робить музику одночасно природно приємною та помітно більш + багатошаровою. + +

+
+ +
+
+
+
+
+
+ design +

+ 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. + + + Щоб надати Luna справді бездоганного вигляду, ми + спеціально обрали авіаційний алюміній як її матеріал та + застосували як технологію тривимірного + розтягування-згинання, так і техніку високоточного + холодного кування. + +

+
+
+
+
+ tweeter-system +

+ 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. + + + Щоб забезпечити більш деталізоване звучання, яке + перевершує можливості одного повнодіапазонного динаміка, + наша команда оснастила Luna ще одним твітером, який + незалежно відповідає за високочастотний звук. + +

+
+
+
+
+ multiroom +

+ 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. + + + Luna початково сумісна з вашою домашньою мережею Wi-Fi. + Налаштуйте кілька динаміків у різних кімнатах, щоб + поширити музичне враження на весь будинок. + +

+
+
+
+
+ design +

+ 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. + + + Інтуїтивний користувацький інтерфейс дозволяє вам + регулювати відтінок (колір) та насиченість для освітлення, + яке пасуватиме до будь-якого настрою та ситуації. + +

+
+
+
+
+
+
+
+ design +

+ 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. + + + Щоб надати Luna справді бездоганного вигляду, ми спеціально + обрали авіаційний алюміній як її матеріал та застосували як + технологію тривимірного розтягування-згинання, так і техніку + високоточного холодного кування. + +

+
+
+
+
+ tweeter-system +

+ 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. + + + Щоб забезпечити більш деталізоване звучання, яке перевершує + можливості одного повнодіапазонного динаміка, наша команда + оснастила Luna ще одним твітером, який незалежно відповідає + за високочастотний звук. + +

+
+
+
+
+ multiroom +

+ 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. + + + Luna початково сумісна з вашою домашньою мережею Wi-Fi. + Налаштуйте кілька динаміків у різних кімнатах, щоб поширити + музичне враження на весь будинок. + +

+
+
+
+
+ design +

+ 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. + + + Інтуїтивний користувацький інтерфейс дозволяє вам регулювати + відтінок (колір) та насиченість для освітлення, яке + пасуватиме до будь-якого настрою та ситуації. + +

+
+
+
+
+
+ luna +
+
+

+ DESIGNED FOR THE FUTURE + СТВОРЕНО ДЛЯ МАЙБУТНЬОГО +

+ + + + about-us + +
+

+ 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. + + + У 2014 році група захоплених промислових дизайнерів, досвідчених + інженерів та експертів з акустики заснувала компанію crazybaby. + Це спільнота азартних людей, яким вистачає зухвалості вірити, що + вони здатні кинути виклик індустрії, створюючи проривні + аудіопродукти. + +

+ + See more about us + Більше про нас + +
+
+
+

+ Luna Eye + Місячне око +

+ + + + 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. + + + Luna Eye — суть цієї інноваційної системи освітлення та + аудіосистеми. Вона складається з незалежного високочастотного + динаміка, світловодного компонента, купола та кільцевого + орнаменту. + +

+ + See more about us + Більше про нас + +
+
+
+
+
+
+

+ + “It really took me by surprise honestly to have such full + beautiful sound that coming out of this small compact device. + And with the brush aluminum surface, it feels so familiar. + Like my iPhone.” + + + "Мене дуже здивував такий повний звук, який виходить із цього + невеликого компактного пристрою. А з матовою алюмінієвою + поверхнею він здається таким знайомим. Як мій iPhone". + +

+
+
+ avatar-icon +
+
+ Garrett Martin + + Гаррет Мартін + +
+
+ Creative Director + Креативний директор +
+
+
+
+
+
+

+ FEATURES + ОСОБЛИВОСТІ +

+
+
+
+
+
+

+ Sound & Music + Звук і музика +

+
    +
  • + + Feel-in-chest Base Power + + + Відчуйте потужність в грудях + +
    • +
  • + + Lossless Digital Audio Transmission + + + Передача цифрового звуку без втрат + +
    • +
  • + + Easy & Stable Stereo Pairing + + + Легке та стабільне стереоз’єднання + +
    • +
  • + + Crisp and Clear High Frequency Sound + + + Чіткий і чистий високочастотний звук + +
    • +
  • + + Streams from Cloud Music and Local Library + + + Стрімінг з Cloud Music і локальної бібліотеки + +
    • +
  • + + Auto Music Playback from Last Song Stopped + + + Автовідтворення музики з останньої пісні + +
    • +
+
+
+
+
+

+ App Features + Особливості програми +

+
    +
  • + + Customize Music Schedule + + + Налаштуй графік відтворення + +
    • +
  • + + Wake Up with Favorite Songs + + + Прокидайтеся з улюбленими піснями + +
    • +
  • + + Home Detection Auto Wake Up + + + Автоматичне вмикання вдома + +
    • +
  • + Color Wheel + Кольорове колесо +
    • +
+
+
+
+
+

+ Connectivity + Підключення +

+
    +
  • + + Hands Free Wireless Audio + + + Бездротова аудіосистема + +
    • +
  • + Bluetooth 4.0 LE + Bluetooth 4.0 LE +
    • +
  • + + Wi-Fi 2.4 GHz (802.11 b/g/n) + + + Wi-Fi 2.4 GHz (802.11 b/g/n) + +
    • +
  • + + Smart Multiroom System Set Up + + + Розумне налаштування Multiroom системи + +
    • +
  • + + Party Mode with 6.0 Units and above + + + Режим вечірки з 6.0 одиницями і більше + +
    • +
  • + + MESHNET Multi Speaker Network + + + Мережа MESHNET з декількома гучномовцями + +
    • +
+
+
+
+
+
+ + + + +
+
+ + + + +
+
+ 01 + / + 03 +
+
+
+
+
+

+ Sound & Music + Звук і музика +

+
    +
  • + Feel-in-chest Base Power + + Відчуйте потужність в грудях + +
    • +
  • + + Lossless Digital Audio Transmission + + + Передача цифрового звуку без втрат + +
    • +
  • + + Easy & Stable Stereo Pairing + + + Легке та стабільне стереоз’єднання + +
    • +
  • + + Crisp and Clear High Frequency Sound + + + Чіткий і чистий високочастотний звук + +
    • +
  • + + Streams from Cloud Music and Local Library + + + Стрімінг з Cloud Music і локальної бібліотеки + +
    • +
  • + + Auto Music Playback from Last Song Stopped + + + Автовідтворення музики з останньої пісні + +
    • +
+
+
+

+ App Features + Особливості програми +

+
    +
  • + Customize Music Schedule + + Налаштуй графік відтворення + +
    • +
  • + + Wake Up with Favorite Songs + + + Прокидайтеся з улюбленими піснями + +
    • +
  • + + Home Detection Auto Wake Up + + + Автоматичне вмикання вдома + +
    • +
  • + Color Wheel + Кольорове колесо +
    • +
+
+
+

+ Connectivity + Підключення +

+
    +
  • + Hands Free Wireless Audio + Бездротова аудіосистема +
    • +
  • + Bluetooth 4.0 LE + Bluetooth 4.0 LE +
    • +
  • + + Wi-Fi 2.4 GHz (802.11 b/g/n) + + + Wi-Fi 2.4 GHz (802.11 b/g/n) + +
    • +
  • + + Smart Multiroom System Set Up + + + Розумне налаштування Multiroom системи + +
    • +
  • + + Party Mode with 6.0 Units and above + + + Режим вечірки з 6.0 одиницями і більше + +
    • +
  • + + MESHNET Multi Speaker Network + + + Мережа MESHNET з декількома гучномовцями + +
    • +
+
+
+
+
+
+
+
+
+

+ Do you have any questions? + У ВАС Є ЗАПИТАННЯ? +

+
+ +

+ Thank you! Your message has been sent. + Дякуємо! Ваше повідомлення успішно надіслано. +

+ + + +
+ +
+
+
+
+
+
+
+
+
+
+ + + + +
+ + © 2026 All rights reserved. Terms of Use & Privacy Policy + + + © 2026 Усі права захищено. Умови використання та політика + конфіденційності + +
+
+
+
+
+ + go-to-top + +
+ + 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..cd8f44768 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/Frame_11-removebg-preview.png b/src/images/Frame_11-removebg-preview.png new file mode 100644 index 000000000..de40f7a41 Binary files /dev/null and b/src/images/Frame_11-removebg-preview.png differ diff --git a/src/images/add/Ellipse.png b/src/images/add/Ellipse.png new file mode 100644 index 000000000..f8d6052db Binary files /dev/null and b/src/images/add/Ellipse.png differ diff --git a/src/images/add/Group 3.3.svg b/src/images/add/Group 3.3.svg new file mode 100644 index 000000000..03b7250a7 --- /dev/null +++ b/src/images/add/Group 3.3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/add/Group 3.4.svg b/src/images/add/Group 3.4.svg new file mode 100644 index 000000000..92e843cdc --- /dev/null +++ b/src/images/add/Group 3.4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/add/Icon-Burger-menu (1).svg b/src/images/add/Icon-Burger-menu (1).svg new file mode 100644 index 000000000..4df42c36f --- /dev/null +++ b/src/images/add/Icon-Burger-menu (1).svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/add/avatar.svg b/src/images/add/avatar.svg new file mode 100644 index 000000000..551d3e805 --- /dev/null +++ b/src/images/add/avatar.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/add/favicon 3.svg b/src/images/add/favicon 3.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/add/favicon 3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/add/favicon2.svg b/src/images/add/favicon2.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/add/favicon2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/desctop/1-d-transpar.png b/src/images/desctop/1-d-transpar.png new file mode 100644 index 000000000..edac48c24 Binary files /dev/null and b/src/images/desctop/1-d-transpar.png differ diff --git a/src/images/desctop/slider-img-d.png b/src/images/desctop/slider-img-d.png new file mode 100644 index 000000000..30070ff4c Binary files /dev/null and b/src/images/desctop/slider-img-d.png differ diff --git a/src/images/features-bg.png b/src/images/features-bg.png new file mode 100644 index 000000000..d8e2d43da Binary files /dev/null and b/src/images/features-bg.png differ diff --git a/src/images/header-1d.png b/src/images/header-1d.png new file mode 100644 index 000000000..0a53102b2 Binary files /dev/null and b/src/images/header-1d.png differ diff --git a/src/images/header-1m.png b/src/images/header-1m.png new file mode 100644 index 000000000..a9a0fd5da Binary files /dev/null and b/src/images/header-1m.png differ diff --git a/src/images/header-1t.png b/src/images/header-1t.png new file mode 100644 index 000000000..3c552f7cb Binary files /dev/null and b/src/images/header-1t.png differ diff --git a/src/images/header-img-d-transparent.png b/src/images/header-img-d-transparent.png new file mode 100644 index 000000000..6b77e9bde Binary files /dev/null and b/src/images/header-img-d-transparent.png differ diff --git a/src/images/header-img-t-transparent.png b/src/images/header-img-t-transparent.png new file mode 100644 index 000000000..05407aeec Binary files /dev/null and b/src/images/header-img-t-transparent.png differ diff --git a/src/images/icon/EN.svg b/src/images/icon/EN.svg new file mode 100644 index 000000000..66d7ce317 --- /dev/null +++ b/src/images/icon/EN.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icon/Icon-Close (2).svg b/src/images/icon/Icon-Close (2).svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icon/Icon-Close (2).svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/UA.svg b/src/images/icon/UA.svg new file mode 100644 index 000000000..60b0c1038 --- /dev/null +++ b/src/images/icon/UA.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icon/day.svg b/src/images/icon/day.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icon/day.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icon/facebook.svg b/src/images/icon/facebook.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icon/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/favicon2.svg b/src/images/icon/favicon2.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/icon/favicon2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icon/go-to-top.svg b/src/images/icon/go-to-top.svg new file mode 100644 index 000000000..9977a457b --- /dev/null +++ b/src/images/icon/go-to-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/insta.svg b/src/images/icon/insta.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icon/insta.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/logo.svg b/src/images/icon/logo.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/icon/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icon/quot.svg b/src/images/icon/quot.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/icon/quot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/spick.svg b/src/images/icon/spick.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/icon/spick.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/sun.svg b/src/images/icon/sun.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icon/sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icon/ts.svg b/src/images/icon/ts.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/icon/ts.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/twitter.svg b/src/images/icon/twitter.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icon/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/wifi.svg b/src/images/icon/wifi.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/icon/wifi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/image-3-d.png b/src/images/image-3-d.png new file mode 100644 index 000000000..b5603d94d Binary files /dev/null and b/src/images/image-3-d.png differ diff --git a/src/images/image-3-m.png b/src/images/image-3-m.png new file mode 100644 index 000000000..5c4ee7379 Binary files /dev/null and b/src/images/image-3-m.png differ diff --git a/src/images/image-3-t.png b/src/images/image-3-t.png new file mode 100644 index 000000000..c461b2e57 Binary files /dev/null and b/src/images/image-3-t.png differ diff --git a/src/images/img-2d.png b/src/images/img-2d.png new file mode 100644 index 000000000..68717aa1e Binary files /dev/null and b/src/images/img-2d.png differ diff --git a/src/images/img-2m.png b/src/images/img-2m.png new file mode 100644 index 000000000..49796c44d Binary files /dev/null and b/src/images/img-2m.png differ diff --git a/src/images/img-2t.png b/src/images/img-2t.png new file mode 100644 index 000000000..f29e41c65 Binary files /dev/null and b/src/images/img-2t.png differ diff --git a/src/images/mobile/image 2.png b/src/images/mobile/image 2.png new file mode 100644 index 000000000..bad58ed62 Binary files /dev/null and b/src/images/mobile/image 2.png differ diff --git a/src/images/tablet/Frame 13.png b/src/images/tablet/Frame 13.png new file mode 100644 index 000000000..afd129668 Binary files /dev/null and b/src/images/tablet/Frame 13.png differ diff --git a/src/images/tablet/image 2.png b/src/images/tablet/image 2.png new file mode 100644 index 000000000..39200e0e0 Binary files /dev/null and b/src/images/tablet/image 2.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..50ab34fc3 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,194 @@ 'use strict'; + +/* global Swiper */ +/* eslint-env browser */ + +// логіка перемикання мови + +let currentLang = localStorage.getItem('lang') || 'en'; + +function setLanguage(lang) { + const langs = document.querySelectorAll('.page__lang'); + const iconEN = document.querySelectorAll('.icon-en'); + const iconUA = document.querySelectorAll('.icon-ua'); + const email = document.querySelector('.questions__email'); + const message = document.querySelector('.questions__message'); + + // Захист: міняємо плейсхолдери лише якщо елементи форми знайдені на сторінці + if (email && message) { + if (lang === 'ua') { + email.placeholder = 'Ваш email'; + message.placeholder = 'Ваше повідомлення...'; + } else { + email.placeholder = 'Your email'; + message.placeholder = 'Your message...'; + } + } + + langs.forEach((el) => { + el.classList.remove('active'); + + if (el.classList.contains(lang)) { + el.classList.add('active'); + } + }); + + for (const icon of iconEN) { + icon.style.display = lang === 'en' ? 'block' : 'none'; + } + + for (const icon of iconUA) { + icon.style.display = lang === 'ua' ? 'block' : 'none'; + } + + localStorage.setItem('lang', lang); + currentLang = lang; +} + +function toggleLanguage() { + const nextLang = currentLang === 'en' ? 'ua' : 'en'; + + setLanguage(nextLang); +} + +function validateEmail(emailValue) { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + return re.test(String(emailValue).toLowerCase()); +} + +// Головна ініціалізація сайту після повного завантаження DOM +document.addEventListener('DOMContentLoaded', () => { + const iconsWrapper = document.querySelectorAll('.lang-icons'); + const form = document.querySelector('#form'); + const emailInput = document.querySelector('.questions__email'); + const successMessage = document.querySelector('.questions__success-message'); + + // Навішуємо кліки на іконки перемикання мови + iconsWrapper.forEach((el) => { + el.addEventListener('click', toggleLanguage); + }); + + // Запускаємо вибір мови при першому завантаженні сторінки + setLanguage(currentLang); + + // Валідація та скидання форми + if (form && emailInput && successMessage) { + form.addEventListener('submit', (e) => { + e.preventDefault(); + + emailInput.classList.remove('questions__email--error'); + successMessage.classList.remove('questions__success-message--visible'); + + if (!validateEmail(emailInput.value.trim())) { + emailInput.classList.add('questions__email--error'); + + return; + } + + successMessage.classList.add('questions__success-message--visible'); + form.reset(); + }); + + emailInput.addEventListener('input', () => { + emailInput.classList.remove('questions__email--error'); + successMessage.classList.remove('questions__success-message--visible'); + }); + } +}); + +// оновлення лічильника слайдера + +function updateMyCounter(s) { + const el = document.querySelector('.swiper-curent'); + + if (el) { + const current = s.realIndex + 1; + + el.textContent = current.toString().padStart(2, '0'); + } +} + +// Налаштування свайпера + +// eslint-disable-next-line no-unused-vars +const swiper = new Swiper('.swiper', { + loop: true, + on: { + init: function a() { + updateMyCounter(this); + }, + + slideChange: function b() { + updateMyCounter(this); + }, + + slideChangeTransitionStart(s) { + const img = s.slides[s.activeIndex].querySelector('.hero__image'); + + if (!img) { + return; + } + + img.style.animation = 'none'; + + // eslint-disable-next-line no-unused-vars + const reflow = img.offsetHeight; + + img.style.animation = null; + }, + }, + + observer: true, + observeParents: true, + observeSlideChildren: true, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + breakpoints: { + 320: { + slidesPerView: 1, + }, + }, + + autoplay: { + delay: 3000, + }, +}); + +// Активація анімації в меню + +const menuBtn = document.querySelector('.header__menu-icon'); +const closeBtn = document.querySelector('.menu__close'); +const logo = document.querySelector('.menu__logo'); +const menuItems = document.querySelectorAll('.menu__item'); +const menuButtons = document.querySelector('.menu__buttons'); +const buyBtn = document.querySelector('.menu__buy-button'); + +if (menuBtn && closeBtn && logo && menuButtons && buyBtn) { + menuBtn.addEventListener('click', () => { + menuItems.forEach((item, index) => { + item.classList.add('menu__item--active'); + item.style.animationDelay = `${(index + 1) * 0.1}s`; + }); + + logo.classList.add('menu__logo--active'); + menuButtons.classList.add('menu__buttons--active'); + closeBtn.classList.add('menu__close--active'); + buyBtn.classList.add('menu__buy-button--active'); + }); + + closeBtn.addEventListener('click', () => { + menuItems.forEach((item) => { + item.classList.remove('menu__item--active'); + }); + + logo.classList.remove('menu__logo--active'); + menuButtons.classList.remove('menu__buttons--active'); + closeBtn.classList.remove('menu__close--active'); + buyBtn.classList.remove('menu__buy-button--active'); + }); +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..cbccc7580 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,35 @@ +.about-us { + @include main-class; + + &__title { + @include title; + + &--mobile { + @include title-mobile; + } + + &--tablet { + @include title-tablet; + } + } + + &__image-box { + @include image-box; + } + + &__image { + @include image; + } + + &__block { + @include block; + } + + &__text { + @include text; + } + + &__link { + @include link; + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..75edd4eac --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,262 @@ +.benefits { + scroll-margin-top: 76px; + + @include on-tablet { + scroll-margin-top: 140px; + } + + &__wrapper-1 { + @include on-tablet { + margin-top: 5px; + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 4; + } + } + + &__wrapper-2 { + @include on-tablet { + margin-top: 5px; + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 4 / 7; + } + } + + &__wrapper-3 { + @include on-tablet { + margin-top: 5px; + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 7 / 10; + } + } + + &__wrapper-4 { + @include on-tablet { + margin-top: 5px; + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 10 / -1; + } + } + + &__icon { + width: 70px; + height: 50px; + margin-bottom: 40px; + transition: all 0.3s; + } + + &__title { + @extend %h4; + + margin-bottom: 20px; + text-align: center; + transition: all 0.3s; + } + + &__description { + @extend %secondary-text; + + max-width: 300px; + color: $gray-2; + text-align: center; + transition: all 0.3s; + } + + &__card { + cursor: pointer; + + position: relative; + display: flex; + height: 320px; + margin: 30px; + flex-direction: column; + align-items: center; + border-radius: 10px; + background-color: var(--main-background); // Білий фон картки залишається + transition: all 0.3s; + + // 🎯 ВИПРАВЛЕННЯ: Повністю ховаємо рамку, яку малювали ці псевдоелементи + &::after, + &::before { + display: none !important; // Рамка зникає, але структура коду нижче не ламається + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + padding: 5px; + z-index: -1; + translate: -50% -50%; + border-radius: 13px; + background-image: conic-gradient( + from var(--angle), + transparent 70%, + #0db2b3 + ); + transition: all 0.3s; + } + + &::before { + opacity: 0.8; + filter: blur(7px); + } + + @include on-tablet { + height: 300px; + margin: 0; + } + + @include on-desktop { + height: 320px; + } + + &:hover::after, + &:hover::before { + background-image: conic-gradient( + from var(--angle), + transparent 70%, + $gray-3 + ); + } + + // 🚀 ВСІ ІНШІ СТИЛІ ТА ХОВЕРИ ЗАЛИШИЛИСЯ НЕДОТОРКАНИМИ: + &:hover .benefits__icon { + margin-top: 15px; + transform: scale(1.5); + margin-bottom: 30px; + filter: drop-shadow(3px 3px 3px $green-1); + } + + &:hover .benefits__title { + margin-bottom: 10px; + transform: scale(0.95); + color: $green-1; + } + + &:hover .benefits__description { + color: var(--black); + } + + &--1 { + &::after, + &::before { + animation: linear infinite; + } + } + + &--2 { + &::after, + &::before { + background-image: conic-gradient( + from var(--angle), + #0db2b3, + transparent 30% + ); + } + + &:hover::after, + &:hover::before { + background-image: conic-gradient( + from var(--angle), + $gray-3, + transparent 30% + ); + } + + @include on-desktop { + &::after, + &::before { + background-image: conic-gradient( + from var(--angle), + #0db2b3, + transparent 50% + ); + animation: linear infinite; + } + + &:hover::after, + &:hover::before { + background-image: conic-gradient( + from var(--angle), + $gray-3, + transparent 50% + ); + } + } + } + + &--3 { + &::after, + &::before { + background-image: conic-gradient( + from var(--angle), + #0db2b3, + transparent 30% + ); + } + + &:hover::after, + &:hover::before { + background-image: conic-gradient( + from var(--angle), + $gray-3, + transparent 30% + ); + } + + @include on-desktop { + &::after, + &::before { + background-image: conic-gradient( + from var(--angle), + transparent 50%, + #0db2b3 + ); + } + + &:hover::after, + &:hover::before { + background-image: conic-gradient( + from var(--angle), + transparent 50%, + $gray-3 + ); + } + } + } + + &--4 { + @include on-desktop { + &::after, + &::before { + background-image: conic-gradient( + from var(--angle), + #0db2b3, + transparent 30% + ); + } + + &:hover::after, + &:hover::before { + background-image: conic-gradient( + from var(--angle), + $gray-3, + transparent 50% + ); + } + } + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..426cb56a9 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,27 @@ +.container { + padding-inline: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 123px; + } + + &--flex { + height: 100vh; + display: flex; + flex-direction: column; + } + + &--grid { + display: none; + + @include on-tablet { + @include page-grid; + + row-gap: 65px; + } + } +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..e46c3e4d7 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,159 @@ +.features { + scroll-margin-top: 90px; + overflow: hidden; + + @include on-tablet { + scroll-margin-top: 140px; + } + + &__title { + @extend %h2; + + margin: 0 30px 32px; + + @include on-tablet { + font-size: 30px; + line-height: 40px; + margin: 0 0 30px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__content { + position: relative; + padding-top: 30px; + background-color: var(--slider-background); + + @include on-tablet { + padding: 60px 0 0 90px; + } + + @include on-desktop { + padding: 55px 0 0; + + @include page-grid; + } + } + + &__card-box { + display: none; + + @include on-desktop { + @include page-grid; + + row-gap: 50px; + } + } + + &__card { + cursor: pointer; + margin-inline: 30px; + + @include on-tablet { + margin-inline: 0; + } + + @include on-desktop { + &-3 { + grid-column: 2 / 5; + grid-row: 1 / 2; + } + + &-2 { + grid-column: 7 / -1; + } + + &-1 { + grid-column: 2 / 5; + grid-row: 2 / 3; + margin-bottom: 50px; + } + } + } + + &__card-title { + @extend %h3; + + margin-bottom: 20px; + color: var(--gren4); + + @include on-tablet { + font-size: 18px; + line-height: 22px; + } + + @include on-desktop { + margin-bottom: 30px; + font-size: 34px; + line-height: 42px; + } + } + + &__card-list { + display: flex; + flex-direction: column; + gap: 5px; + margin-bottom: 50px; + min-height: 233px; + width: 260px; + list-style: none; + padding: 0; + + @include on-desktop { + width: 378px; + margin-bottom: 0; + min-height: initial; + } + } + + &__item { + @extend %secondary-text; + + display: flex; + align-items: center; + + @include on-desktop { + font-size: 16px; + font-weight: normal; + line-height: 24px; + } + + &::before { + content: ''; + display: inline-block; + width: 4px; + height: 4px; + background-color: black; + border-radius: 50%; + margin-right: 10px; + flex-shrink: 0; + } + } + + &__image { + aspect-ratio: 16 / 8.7; + background-size: contain; + background-repeat: no-repeat; + background-image: url(../images/Frame_11-removebg-preview.png); + + @include on-tablet { + position: absolute; + right: 0; + bottom: 0; + width: 415px; + height: 225px; + } + + @include on-desktop { + position: initial; + width: auto; + height: auto; + grid-column: 7 / -1; + align-self: end; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..5fc7723d4 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,63 @@ +.footer { + overflow: hidden; + + &__content { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + } + + &__logo { + display: none; + transition: all 0.3s; + + @include on-tablet { + display: initial; + margin-bottom: 60px; + } + + &:hover { + transform: scale(1.1); + + @include filter-green; + } + } + + &__social { + display: flex; + gap: 40px; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 60px; + gap: 49px; + } + + @include on-desktop { + gap: 40px; + } + } + + &__soc-icon { + transition: all 0.3s; + + &:hover { + transform: scale(1.3); + + @include filter-green; + } + } + + &__copyright { + @extend %secondary-text; + + margin-bottom: 20px; + text-align: center; + color: $gray-3; + + @include on-tablet { + margin-bottom: 30px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..18a2aa6d4 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,165 @@ +.header { + padding: 22px 30px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--main-background); + filter: drop-shadow(0 1px 3px #0db3b369); + overflow: hidden; + + @include on-tablet { + padding: 30px 34px; + animation: scale-in-ver-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + } + + @include on-desktop { + padding: 30px 123px; + filter: none; + } + + &__logo { + transition: all 0.3s ease; + + &:hover { + transform: scale(1.1); + + @include filter-green; + } + } + + &__logo-image { + animation: scale-up-hor-left 1s cubic-bezier(0.39, 0.57, 0.56, 1) both; + } + + &__night { + width: 20px; + height: 20px; + + filter: brightness(35%) contrast(105%) + drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); + transition: all 0.3s; + + &:hover { + cursor: pointer; + transform: scale(1.2) rotate(180deg); + + @include filter-green; + } + } + + &__right-side { + display: flex; + align-items: center; + gap: 30px; + + @include on-tablet { + animation: scale-up-hor-right 1s cubic-bezier(0.39, 0.57, 0.56, 1) both; + } + + @include on-desktop { + gap: 0; + } + } + + &__block { + display: none; + + @include on-tablet { + display: flex; + align-items: center; + justify-content: center; + gap: 30px; + } + + @include on-desktop { + gap: 47px; + } + } + + &__link { + position: relative; + text-decoration: none; + color: $gray-1; + font-weight: 300; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + transition: all 0.3s; + + &:hover { + transform: scale(1.1); + color: $green-1; + text-shadow: 1px 1px 24px #000; + } + + &::after { + @include underline-after; + } + } + + &__link:hover::after { + transform-origin: 0; + transform: scaleX(1); + } + + &__lang-icons { + transition: all 0.3s ease; + cursor: pointer; + + &::after { + @include underline-after; + } + + &:hover { + transform: scale(1.1); + + @include filter-green; + } + } + + &__lang-icons:hover::after { + transform-origin: 0; + transform: scaleX(1); + } + + &__lang-icon.ua { + display: none; + } + + &__buy-button { + @include base-button; + + width: 100px; + transition: all 0.3s; + + &:hover { + box-shadow: 1px 1px 5px #000; + background-color: $green-1; + color: var(--black); + border-radius: 10px; + } + } + + &__menu { + display: flex; + transition: all 0.3s ease; + + @include on-desktop { + display: none; + } + + &:hover { + transform: scale(1.3) rotateX(180deg) rotateY(45deg); + + @include filter-green; + } + } + + &__menu-icon { + animation: swirl-in-fwd 1s ease-out both; + + @include on-tablet { + animation: none; + } + } +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..1cfcacde4 --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,117 @@ +.hero { + // GRID + @include on-tablet { + @include page-grid; + + row-gap: 30px; + } + + @include on-desktop { + row-gap: 0; + } + + // КАРТИНКА-КОНТЕЙНЕР + &__image-box { + width: 100%; + + @include on-tablet { + grid-column: 4 / 9; // 5 колонок + grid-row: 1 / 3; + z-index: 1; + } + + @include on-desktop { + grid-column: 5 / 13; // ~8 колонок + } + } + + // КАРТИНКА + &__image { + display: block; + width: 100%; + height: auto; + object-fit: cover; + object-position: left; + margin-bottom: 40px; + aspect-ratio: 320 / 245; + + cursor: pointer; + + @include on-tablet { + margin-bottom: 0; + aspect-ratio: auto; + } + } + + // ЗАГОЛОВОК + &__title { + position: relative; + z-index: 2; + margin: 0 30px 20px; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1 / 2; + margin: 0; + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + grid-column: 1 / 5; + } + } + + &__title .en { + @extend %h1; + + color: var(--black2); + } + + &__title .ua { + @extend %h1; + + color: var(--black2); + + font-size: 31px; + line-height: 43px; + + @include on-tablet { + grid-column: 1 / 5; + font-size: 41px; + line-height: 55px; + } + + @include on-desktop { + font-size: 60px; + line-height: 76px; + } + } + + &__title span span { + width: 100%; + display: block; + line-height: 1.1; + } + + // ОПИС + &__description { + @extend %main-text; + + color: var(--black-duplicate); + margin: 0 30px; + position: relative; + z-index: 2; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 2 / 3; + margin: 0; + } + + @include on-desktop { + grid-column: 1 / 4; + margin-top: 30px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..6e7c82cda --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,172 @@ +.menu { + background-color: var(--main-background); + transform: translateX(-100%); + transition: all 0.5s; + + @include on-desktop { + display: none; + } + + &:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); + } + + &__top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24px 0; + margin-bottom: 25px; + + @include on-tablet { + margin-bottom: 40px; + } + } + + &__logo-image { + transition: all 0.3s ease; + height: 26px; + + &:hover { + transform: scale(1.1); + + @include filter-green; + } + } + + &__close-icon { + transition: all 0.3s ease; + + &:hover { + transform: scale(1.5) rotate(180deg); + + @include filter-green; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 25px; + margin-bottom: 50px; + list-style: none; + + @include on-tablet { + gap: 40px; + } + } + + &__item .menu__link--first { + @extend %h6; + + color: var(--black); + + @include on-tablet { + font-weight: bold; + text-transform: uppercase; + font-size: 22px; + line-height: 28px; + } + } + + &__link { + @extend %thirdary-text; + + display: inline-block; + position: relative; + text-decoration: none; + color: var(--black2); + transition: all 0.3s; + + @include on-tablet { + font-weight: 400; + font-size: 22px; + line-height: 28px; + } + + &::after { + @include underline-after; + } + + &:hover { + transform: scale(1.1); + color: $green-1; + text-shadow: 1px 1px 24px #000; + } + } + + &__link:hover::after { + transform-origin: 0; + transform: scaleX(1); + } + + &__icons { + transition: all 0.3s ease; + cursor: pointer; + + &::after { + @include underline-after; + } + + &:hover { + transform: scale(1.1); + + @include filter-green; + } + } + + &__icons:hover::after { + transform-origin: 0; + transform: scaleX(1); + } + + &__buttons { + margin-bottom: 162px; + display: flex; + align-items: center; + gap: 20px; + + @include on-tablet { + display: none; + } + } + + &__buy-button { + @include base-button; + + width: 100%; + max-width: 300px; + min-height: 48px; + margin-bottom: 30px; + align-self: center; + transition: all 0.3s; + + @include on-tablet { + display: none; + } + + &:hover { + box-shadow: 1px 1px 5px #000; + background-color: $green-1; + color: var(--black); + border-radius: 10px; + } + } + + &__item--active, + &__logo--active, + &__buttons--active { + animation: scale-up-hor-left 1.3s cubic-bezier(0.39, 0.57, 0.56, 1) both; + } + + &__close--active { + animation: swirl-in-fwd 1.3s ease-out both; + } + + &__buy-button--active { + animation: scale-in-hor-center 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) + both; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..e1a1c6c76 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,47 @@ +.nav { + display: none; + padding-block: 28px; + background-color: var(--main-background); + + @include on-desktop { + display: block; + } + + &__list { + display: flex; + justify-content: center; + gap: 84px; + list-style: none; + } + + &__item .nav__link--first { + @extend %h6; + + color: var(--black); + } + + &__link { + @extend %thirdary-text; + + display: inline-block; + position: relative; + text-decoration: none; + color: var(--black2); + transition: all 0.3s; + + &::after { + @include underline-after; + } + + &:hover { + transform: scale(1.1); + color: $green-1; + text-shadow: 1px 1px 24px #000; + } + } + + &__link:hover::after { + transform-origin: 0; + transform: scaleX(1); + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..fdb914faf --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,175 @@ +.page, +.page__body, +.page__header, +.section, +.page__logo { + transition: + background-color 0.5s ease, + color 0.5s ease, + border-color 0.5s ease, + filter 0.5s ease; +} + +.page { + font-family: inter, sans-serif; + scroll-behavior: smooth; + background: var(--main-background); + color: var(--black2); + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + @include on-desktop { + display: flex; + flex-direction: column; + align-items: center; + } + } + + &__menu { + position: fixed; + width: 100vw; + height: 100vh; + z-index: 5; + } + + &__header { + position: sticky; + top: 0; + z-index: 4; + + @include on-tablet { + margin-bottom: 100px; + } + + @include on-desktop { + width: 100%; + max-width: 1440px; + margin-bottom: 90px; + position: static; + } + } + + &__hero { + margin-bottom: 70px; + + @include on-tablet { + margin: 0 34px 140px; + } + + @include on-desktop { + margin: 0 0 170px; + } + } + + &__nav { + position: sticky; + top: 0; + margin-bottom: 65px; + z-index: 10; + } + + &__wrapper { + overflow: hidden; + } + + &__benefits { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + } + + &__presentation { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + } + + &__about-us { + @include page-about-us; + } + + &__technology { + @include page-about-us; + } + + &__testimonilas { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + } + + &__features { + margin-bottom: 90px; + + @include on-tablet { + margin: 0 34px 140px; + } + + @include on-desktop { + margin: 0 123px 170px; + } + } + + &__questions { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + } + + &__go-to-top { + position: fixed; + right: 30px; + bottom: 185px; + transition: all 0.3s; + z-index: 1; + + @include on-tablet { + right: 49px; + } + + &:hover { + transform: scale(1.3); + + @include filter-green; + + animation: 0.6s linear infinite alternate-reverse scale; + } + } +} + +// 1. Повністю ховаємо абсолютно всі мовні блоки за замовчуванням +.page__lang { + display: none !important; +} + +// 2. Показуємо ТІЛЬКИ той блок, який отримав клас active від JS +.page__lang.active { + display: inline-block !important; // для параграфів можна змінити на block +} diff --git a/src/styles/blocks/presentation.scss b/src/styles/blocks/presentation.scss new file mode 100644 index 000000000..36af6ddb9 --- /dev/null +++ b/src/styles/blocks/presentation.scss @@ -0,0 +1,21 @@ +.presentation { + display: flex; + justify-content: center; + padding-inline: 12px; + overflow: hidden; + + @include on-tablet { + padding-inline: 34px; + } + + &__image { + background-size: cover; + min-width: 320px; + transition: all 0.3s; + + &:hover { + cursor: pointer; + transform: scale(1.04); + } + } +} diff --git a/src/styles/blocks/questions.scss b/src/styles/blocks/questions.scss new file mode 100644 index 000000000..4a45eac9d --- /dev/null +++ b/src/styles/blocks/questions.scss @@ -0,0 +1,198 @@ +.questions { + scroll-margin-top: 90px; + + @include on-tablet { + scroll-margin-top: 140px; + } + + &__content { + @include on-tablet { + @include page-grid; + } + } + + &__title { + @extend %h2; + + margin-bottom: 27px; + font-size: 31px; + + @include on-tablet { + grid-column: 1 / 5; + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + grid-column: 1 / 7; + font-size: 56px; + line-height: 70px; + } + } + + &__form { + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__success-message { + display: none; // За замовчуванням повідомлення повністю сховане + margin-bottom: 20px; + font-family: inter, sans-serif; + font-size: 16px; + font-weight: 500; + color: $green-1; // Ваш зелений брендовий колір + text-align: left; + + // 👇 КЛАС, ЯКИЙ ДОДАЄТЬСЯ ЧЕРЕЗ JS ПРИ УСПІШНІЙ ВІДПРАВЦІ + &--visible { + display: block !important; + + // Викликаємо вашу анімацію розгортання з центру по горизонталі + animation: scale-in-hor-center 0.4s ease-in-out forwards; + } + } + + &__email { + height: 48px; + margin-bottom: 20px; + border: 1px solid $form-border; + color: var(--black2); + background-color: var(--main-background); + padding-left: 20px; + outline: none; + + @extend %main-text; + + @include on-tablet { + padding-left: 30px; + } + + @include on-desktop { + padding-left: 36px; + } + + &::placeholder { + color: $gray-3; + } + + // 🎯 КРОК 1: Базові стани (фокус) та плейсхолдери піднято нагору + &:focus { + border-color: var(--gren4); + font-weight: 500; + font-size: 14px; + + &::placeholder { + color: var(--gren4); + } + } + + // Стан помилки (також базовий псевдоклас) + &--error { + border-color: rgba(235, 87, 87, 0.3) !important; + + &::placeholder { + color: rgba(235, 87, 87, 0.6) !important; + } + + &:focus { + border-color: rgba(235, 87, 87, 0.6) !important; + } + } + + // 🎯 КРОК 2: Важкі WebKit-хаки для автозаповнення опущено в самий кінець + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 1000px var(--main-background) inset !important; + box-shadow: 0 0 0 1000px var(--main-background) inset !important; + -webkit-text-fill-color: var(--black2) !important; + transition: background-color 9999s ease-in-out 0s; + } + } + + &--error { + border-color: rgba(235, 87, 87, 0.3) !important; + + &::placeholder { + color: rgba(235, 87, 87, 0.6) !important; + } + + &:focus { + border-color: rgba(235, 87, 87, 0.6) !important; + } + } + + &__message { + height: 128px; + margin-bottom: 30px; + border: 1px solid $form-border; + color: var(--black2); + background-color: var(--main-background); + padding: 12px 0 0 20px; + font-family: inter, sans-serif; + outline: none; + resize: none; + + @extend %main-text; + + @include on-tablet { + height: 201px; + padding-left: 30px; + } + + @include on-desktop { + padding: 16px 0 0 36px; + } + + &::placeholder { + font-family: inter, sans-serif; + color: $gray-3; + } + + &:focus { + border-color: var(--gren4); + font-weight: 500; + font-size: 14px; + + &::placeholder { + color: var(--gren4); + } + } + } + + &__button { + width: 102px; + height: 40px; + + @extend %button; + + background-color: $green-1; + color: #fff; + border: transparent; + font-family: inter, sans-serif; + transition: all 0.3s; + + @include on-desktop { + width: 124px; + height: 48px; + } + + &:hover { + box-shadow: 1px 1px 5px #000; + background-color: $green-1; + color: var(--black); + border-radius: 10px; + cursor: pointer; + } + } +} diff --git a/src/styles/blocks/swiper.scss b/src/styles/blocks/swiper.scss new file mode 100644 index 000000000..1dfaae3e4 --- /dev/null +++ b/src/styles/blocks/swiper.scss @@ -0,0 +1,114 @@ +.swiper { + width: clamp(320px, 100%, 816px) !important; + display: block !important; + + @include on-tablet { + width: 100% !important; + } + + &-off { + @include on-tablet { + display: none !important; + } + } + + &-features-off { + display: flex !important; + flex-direction: column !important; + + @include on-desktop { + display: none !important; + } + } + + &-wrapper { + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + } + + &-wrapper-flex-of { + align-items: initial !important; + } + + &-aditishionals { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + + position: relative !important; + width: 93px; + height: 47px; + margin: 0 auto; + + @include on-tablet { + margin: 0 0 123px; + } + } + + &-button-prev { + position: absolute !important; + top: 0 !important; + left: 0 !important; + + &:hover path { + @extend %swiper-hover-btn; + } + } + + &-button-next { + position: absolute !important; + top: 0 !important; + left: 44px !important; + + &:hover path { + @extend %swiper-hover-btn; + } + } + + &-counter { + display: flex; + gap: 4px; + } + + &-curent { + font-size: 16px; + font-weight: normal; + line-height: 24px; + } + + &-slesh { + color: var(--gren4); + font-size: 11px; + line-height: 100%; + align-self: end; + } + + &-total { + font-weight: 400; + font-size: 11px; + line-height: 100%; + letter-spacing: 0%; + color: var(--gren4); + align-self: end; + } + + &-grid { + @include on-tablet { + grid-column: 4 / 9 !important; + grid-row: 1 / 3 !important; + + align-self: center !important; + } + + @include on-desktop { + grid-column: 5 / -1 !important; + grid-row: 1 / 3 !important; + } + } + + &-path { + transition: all 0.3s; + } +} diff --git a/src/styles/blocks/technology.scss b/src/styles/blocks/technology.scss new file mode 100644 index 000000000..9f43a55e6 --- /dev/null +++ b/src/styles/blocks/technology.scss @@ -0,0 +1,59 @@ +.technology { + @include main-class; + + @include on-tablet { + flex-direction: row-reverse; + } + + &__title { + @include title; + + margin-bottom: 20px; + font-size: 36px; + line-height: 46px; + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + + &--mobile { + @include title-mobile; + } + + &--tablet { + @include title-tablet; + } + } + + &__image-box { + @include image-box; + } + + &__image { + @include image; + } + + &__block { + @include block; + + @include on-tablet { + margin: 0 0 0 34px; + } + + @include on-desktop { + margin: 0; + } + } + + &__text { + @include text; + + font-size: 16px; + line-height: 24px; + } + + &__link { + @include link; + } +} diff --git a/src/styles/blocks/testimonilas.scss b/src/styles/blocks/testimonilas.scss new file mode 100644 index 000000000..050687310 --- /dev/null +++ b/src/styles/blocks/testimonilas.scss @@ -0,0 +1,79 @@ +.testimonilas { + &__content { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + + justify-content: flex-end; + min-height: 320px; + } + + &__image { + position: absolute; + top: 0; + left: 0; + right: 0; + margin-inline: auto; + z-index: -1; + background-image: url(../images/icon/quot.svg); + width: 208px; + height: 171px; + background-size: cover; + background-color: transparent; + } + + &__text { + @extend %quote; + + margin: 50px 0 30px; + max-width: 500px; + text-align: center; + + @include on-tablet { + max-width: 695px; + margin: 60px 0 40px; + } + + @include on-desktop { + max-width: 786px; + } + } + + &__person { + display: flex; + flex-direction: column; + align-items: center; + } + + &__person-image { + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 20px; + } + } + + &__person-icon { + width: 62px; + height: 62px; + transition: all 0.3s; + + &:hover { + cursor: pointer; + transform: scale(1.3); + } + } + + &__person-name { + @extend %h5; + + margin-bottom: 5px; + } + + &__person-position { + @extend %secondary-text; + + color: $gray-2; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..3413b92cd 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,21 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './utils/normalize'; +@import './utils/vars'; +@import './utils/dark-theme'; +@import './utils/mixins'; +@import './utils/extends'; +@import './utils/animations'; +@import './blocks/page'; +@import './blocks/container'; +@import './blocks/menu'; +@import './blocks/header'; +@import './blocks/hero'; +@import './blocks/nav'; +@import './blocks/benefits'; +@import './blocks/swiper'; +@import './blocks/presentation'; +@import './blocks/about-us'; +@import './blocks/technology'; +@import './blocks/testimonilas'; +@import './blocks/features'; +@import './blocks/questions'; +@import './blocks/footer'; diff --git a/src/styles/utils/_animations.scss b/src/styles/utils/_animations.scss new file mode 100644 index 000000000..393e16f7f --- /dev/null +++ b/src/styles/utils/_animations.scss @@ -0,0 +1,118 @@ +@keyframes spin { + from { + --angle: 0deg; + } + + to { + --angle: 360deg; + } +} + +@keyframes scale { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.4); + } + + 100% { + transform: scale(1); + } +} + +@keyframes scale-up-hor-left { + 0% { + transform: scaleX(0.4); + transform-origin: 0% 0%; + } + 100% { + transform: scaleX(1); + transform-origin: 0% 0%; + } +} + +@keyframes swirl-in-fwd { + 0% { + transform: rotate(-540deg) scale(0); + opacity: 0; + } + 100% { + transform: rotate(0) scale(1); + opacity: 1; + } +} + +@keyframes swing-in-top-bck { + 0% { + transform: rotateX(70deg); + transform-origin: top; + opacity: 0; + } + 100% { + transform: rotateX(0deg); + transform-origin: top; + opacity: 1; + } +} + +@keyframes focus-in-contract-bck { + 0% { + letter-spacing: 1em; + transform: translateZ(300px); + filter: blur(12px); + opacity: 0; + } + 100% { + transform: translateZ(12px); + filter: blur(0); + opacity: 1; + } +} + +@keyframes scale-in-hor-center { + 0% { + transform: scaleX(0); + opacity: 1; + } + 100% { + transform: scaleX(1); + opacity: 1; + } +} + +@keyframes scale-in-ver-top { + 0% { + transform: scaleY(0); + transform-origin: 100% 0%; + opacity: 1; + } + 100% { + transform: scaleY(1); + transform-origin: 100% 0%; + opacity: 1; + } +} + +@keyframes scale-up-hor-right { + 0% { + transform: scaleX(0.4); + transform-origin: 100% 100%; + } + 100% { + transform: scaleX(1); + transform-origin: 100% 100%; + } +} + +@keyframes scale-in-hor-center { + 0% { + transform: scaleX(0); + opacity: 1; + } + 100% { + transform: scaleX(1); + opacity: 1; + } +} diff --git a/src/styles/utils/_dark-theme.scss b/src/styles/utils/_dark-theme.scss new file mode 100644 index 000000000..8c6a7aa89 --- /dev/null +++ b/src/styles/utils/_dark-theme.scss @@ -0,0 +1,16 @@ +:root { + --main-background: #f7f7f7; + --gren4: #0c797a; + --slider-background: #d6ecec; + --black: #131313; + --black2: #333; + --black-duplicate: #333; + + transition: + --main-background 0.5s ease, + --gren4 0.5s ease, + --slider-background 0.5s ease, + --black 0.5s ease, + --black2 0.5s ease, + --black-duplicate 0.5s ease; +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..89776a341 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,111 @@ %h1 { - font-family: Roboto, sans-serif; - font-weight: 400; + font-size: 40px; + font-weight: bold; + line-height: 52px; + text-transform: uppercase; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + } +} + +%h2 { + @extend %h1; + + font-size: 30px; + line-height: 40px; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } +} + +%h3 { + @extend %h1; + + font-size: 18px; + line-height: 22px; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } + + @include on-desktop { + font-size: 34px; + line-height: 42px; + } +} + +%h4 { + font-weight: bold; + text-transform: uppercase; + font-size: 22px; + line-height: 28px; +} + +%h5 { + font-size: 16px; + font-weight: bold; + line-height: 22px; +} + +%h6 { + font-weight: bold; + text-transform: uppercase; + font-size: 14px; + line-height: 20px; +} + +%quote { + font-size: 14px; + font-weight: bold; + line-height: 20px; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } +} + +%main-text { + font-size: 16px; + font-weight: normal; + line-height: 24px; +} + +%secondary-text { + font-size: 14px; + font-weight: normal; + line-height: 21px; +} + +%thirdary-text { + @extend %secondary-text; + + text-transform: uppercase; +} + +%button { + font-size: 12px; + font-weight: bold; + line-height: 14px; + text-transform: uppercase; +} + +%swiper-hover-btn { + fill: var(--gren4); + transform: scale(0.85); } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..a52881735 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,219 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin page-grid { + --columns: 4; + --columns-width: 50px; + + display: grid; + grid-template-columns: repeat(var(--columns), var(--columns-width)); + column-gap: 20px; + + @include on-tablet { + --columns: 8; + --columns-width: 1fr; + } + + @include on-desktop { + --columns: 12; + --columns-width: 72px; + + column-gap: 30px; + } +} + +@mixin underline-after { + content: ''; + + transform-origin: 100%; + + width: 100%; + height: 3px; + margin-top: 2px; + position: absolute; + transition: transform 0.3s; + top: 100%; + left: 0; + transform: scaleX(0); + background-color: $green-1; +} + +@mixin filter-green { + filter: brightness(0) saturate(100%) invert(76%) sepia(16%) saturate(5387%) + hue-rotate(137deg) brightness(65%) contrast(105%) + drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); +} + +@mixin base-button { + display: flex; + justify-content: center; + align-items: center; + height: 48px; + text-decoration: none; + background-color: var(--black2); + color: #fff; + font-weight: 500; + font-size: 12px; + line-height: 100%; + letter-spacing: 0%; +} + +@mixin main-class { + scroll-margin-top: 90px; + display: flex; + flex-direction: column; + padding-inline: 30px; + + @include on-tablet { + scroll-margin-top: 140px; + flex-direction: row; + gap: 20px; + padding: 0; + } +} + +@mixin title { + @extend %h2; + + margin-bottom: 30px; +} + +@mixin title-mobile { + @include on-tablet { + display: none; + } +} + +@mixin title-tablet { + display: none; + + @include on-tablet { + display: block; + max-width: 300px; + } + + @include on-desktop { + max-width: 582px; + } +} + +@mixin image-box { + width: 100%; + height: 100%; + + @include on-desktop { + width: initial; + height: initial; + } +} + +@mixin image { + align-self: center; + width: 100%; + margin-bottom: 20px; + aspect-ratio: 3.86 / 3.12; + object-fit: cover; + transition: all 0.3s; + + &:hover { + cursor: pointer; + transform: scale(1.04); + } + + @include on-tablet { + min-width: 374px; + max-height: 415px; + margin-bottom: 0; + aspect-ratio: inherit; + } + + @include on-desktop { + min-width: 582px; + min-height: 388px; + } +} + +@mixin block { + @include on-tablet { + max-width: 580px; + margin-right: 34px; + display: flex; + flex-direction: column; + } + + @include on-desktop { + margin-right: 0; + } +} + +@mixin text { + @extend %secondary-text; + + margin-bottom: 30px; + color: $gray-2; + + @include on-tablet { + margin-bottom: 60px; + font-size: 16px; + line-height: 24px; + } +} + +@mixin link { + @extend %button; + + position: relative; + color: $green-1; + text-decoration: none; + + &::after { + content: ''; + position: absolute; + display: block; + width: 53px; + height: 1px; + left: 0; + top: 100%; + margin-top: 5px; + transform: translateX(100%); + transform: translateY(100%); + background-color: $green-1; + transition: all 0.3s; + + @include on-desktop { + width: 65px; + } + } + + &:hover::after { + width: 126px; + } +} + +@mixin page-about-us { + min-width: 320px; + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + max-width: 1194px; + margin-inline: 123px; + } +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 000000000..8d0196670 --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,19 @@ +* { + box-sizing: border-box; +} + +body, +p, +ul, +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} + +ul { + padding: 0; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..08d7af88d 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,17 @@ -$c-gray: #eee; +@property --angle { + inherits: false; + initial-value: 0deg; + syntax: ''; +} + +$green-1: #0db2b3; +$green-2: #cfeff0; +$green-3: #eefafa; +$gray-1: #4f4f4f; +$gray-2: #7c7c7c; +$gray-3: #bdbdbd; +$gray-4: #d0d0d0; +$almost-white: #f7f7f7; +$form-border: #828282; +$tablet-min-width: 768px; +$desktop-min-width: 1440px; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 000000000..a44c8dca7 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,4 @@ +import { defineConfig } from 'vite'; +export default defineConfig({ + base: '/Kickstarter/', +});