diff --git a/.continue/prompts/new-prompt-2.md b/.continue/prompts/new-prompt-2.md new file mode 100644 index 000000000..09181300d --- /dev/null +++ b/.continue/prompts/new-prompt-2.md @@ -0,0 +1,24 @@ +--- +name: AI BEM Check +description: Check BEM naming and explain logic +invokable: true +--- + +Check and fix BEM naming: +- ensure consistency +- simplify class names +- follow common BEM conventions +Return only corrected class names and explanations. + +Explain the 'Why' behind each change to help me improve my skills. + +{{{ selection }}}--- +name: New prompt +description: New prompt +invokable: true +--- + +Please write a thorough suite of unit tests for this code, making sure to cover all relevant edge cases + +Ответ пиши полностью на русском языке. +Объяснения и комментарии к коду тоже на русском. diff --git a/.continue/prompts/new-prompt-3.md b/.continue/prompts/new-prompt-3.md new file mode 100644 index 000000000..f75945b09 --- /dev/null +++ b/.continue/prompts/new-prompt-3.md @@ -0,0 +1,23 @@ +--- +name: AI Semantic HTML +description: Improve HTML semantics + Theory +invokable: true +--- + +Improve HTML semantics: +- replace divs with proper semantic tags where needed +- keep structure clean +- do not change layout logic + +Explain the 'Why' behind each change to help me improve my skills. + +{{{ selection }}}--- +name: New prompt +description: New prompt +invokable: true +--- + +Please write a thorough suite of unit tests for this code, making sure to cover all relevant edge cases + +Ответ пиши полностью на русском языке. +Объяснения и комментарии к коду тоже на русском. diff --git a/.continue/prompts/new-prompt-4.md b/.continue/prompts/new-prompt-4.md new file mode 100644 index 000000000..d1122e90c --- /dev/null +++ b/.continue/prompts/new-prompt-4.md @@ -0,0 +1,31 @@ +--- +name: AI FOOTER +description: Find bugs and explain the cause +invokable: true +--- + +Write mobile-first SCSS for this footer section. + +Requirements: +- BEM methodology +- Responsive footer +- On mobile: stacked layout +- On desktop: columns/grid layout +- Clean spacing and typography +- Use flexbox/grid +- Include hover states for links +- Minimal modern design +- Avoid overengineering +- Use SCSS nesting carefully +- Add breakpoints for 768px and 1024px +- Use rem units +- Keep code production-friendly + +HTML: +[paste html] + +Explain the 'Why' behind each change to help me improve + my skills. + +Ответ пиши полностью на русском языке. +Объяснения и комментарии к коду тоже на русском. diff --git a/.continue/prompts/new-prompt-5.md b/.continue/prompts/new-prompt-5.md new file mode 100644 index 000000000..c34d80cd4 --- /dev/null +++ b/.continue/prompts/new-prompt-5.md @@ -0,0 +1,35 @@ +--- +name: AI FORM +description: Review HTML (BEM, Semantics, Structure) +invokable: true +--- + +Ответ пиши полностью на русском языке. +Объяснения и комментарии к коду тоже на русском. + +Write SCSS styles for this section using mobile-first approach. + +Requirements: +- Use BEM classes only +- Keep styles clean and minimal +- No resets +- No animations +- Use flexbox where appropriate +- Use gap instead of margins where possible +- Responsive layout +- Modern clean design +- Focus on spacing, typography and usability +- Inputs and textarea should have consistent styling +- Button should have hover state +- Container width is already handled globally +- SCSS nesting allowed but avoid deep nesting +- Use rem units +- Add tablet breakpoint at 768px +- Add desktop breakpoint at 1024px + +HTML: +[paste section] + +Explain the 'Why' behind each change to help me improve my skills. + +{{{ selection }}} diff --git a/.continue/prompts/new-prompt.md b/.continue/prompts/new-prompt.md new file mode 100644 index 000000000..dc7b1de48 --- /dev/null +++ b/.continue/prompts/new-prompt.md @@ -0,0 +1,19 @@ +--- +name: AI Review HTML bem +description: Review HTML (BEM, Semantics, Structure) +invokable: true +--- + +Ответ пиши полностью на русском языке. +Объяснения и комментарии к коду тоже на русском. + +Review this HTML and: +1. Check BEM naming consistency +2. Check semantic HTML +3. Find structural issues +4. Point out mistakes or bad practices +5. Suggest minimal fixes (do NOT rewrite everything) + +Explain the 'Why' behind each change to help me improve my skills. + +{{{ selection }}} 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..4518533b1 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://svladimir1010.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..3a3c44ab4 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,720 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + + + + + + + + + + + + + Futuristic Wireless Speaker + + -

Hello Mate Academy

- + + +
+
+
+ + + + + +
+ + +
+ + Specs + +
+ + EN + + / + + UA + +
+
+ +
+
+ +
+ +
+
+
+
+ + + + + + Futuristic Luna Speaker + +
+
+

Futuristic Wireless Speaker

+

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

+
+
+
+
+ + + + + +
+
+
    + +
  • + +

    Futuristic Design

    +

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

    +
    • + +
  • + +

    Tweeter Speaker System

    +

    + To deliver a more layered sound performance better than a sole + full sponsible for high-frequency sound independently. +

    +
    • + +
  • + +

    Multiroom System

    +

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

    +
    • + +
  • + +

    Intuitive Lighting System

    +

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

    +
    • +
+
+
+ + +
+
+ + + + Luna Speaker model + +
+
+ + +
+
+ + + + + Luna speaker design sketches + + + +
+

DESIGNED FOR THE FUTURE

+

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

+ + SEE MORE ABOUT US + +
+
+
+ + +
+
+ + + + Luna Eye speaker on a tree stump + +
+

LUNA EYE

+

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

+ + SEE MORE ABOUT US + +
+
+
+ + +
+
+
+

+ It really took me by surprise honestly to have such full beautiful + sound that coming out of this small compact device. And with the + brush aluminum surface, it feels so familiar. Like my iPhone. +

+
+ Garrett Martin + Garrett Martin +

Creative Director

+
+
+
+
+ + +
+
+

FEATURES

+
+ +
+
+ +
+ +
+ +
+

SOUND & MUSIC

+
    +
  • + Feel-in-chest Bass Power +
    • +
  • + Lossless Digital Audio Transmission +
    • +
  • + Easy & Stable Stereo Pairing +
    • +
  • + Crisp and Clear High Frequency Sound +
    • +
  • + Streams from Cloud Music and Local Library +
    • +
  • + Auto Music Playback from Last Song Stopped +
    • +
+
+ + +
+

CONNECTIVITY

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

APP FEATURES

+
    +
  • + Customize Music Schedule +
    • +
  • + Wake Up with Favorite Songs +
    • +
  • + Home Detection Auto Wake Up +
    • +
  • Color Wheel
    • +
+
+
+
+
+ +
+
+ + +
+ + 01 + / 03 + +
+ + + + + Disassembled speaker view + +
+
+
+
+ + +
+
+

DO YOU HAVE ANY QUESTIONS?

+
+ + + +
+
+
+
+ + + + + diff --git a/package-lock.json b/package-lock.json index ace1ce6c0..7d53e9732 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", @@ -13039,20 +13040,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index 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/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf b/src/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf new file mode 100644 index 000000000..43ed4f5ee Binary files /dev/null and b/src/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf differ diff --git a/src/fonts/Inter/Inter-VariableFont_opsz,wght.ttf b/src/fonts/Inter/Inter-VariableFont_opsz,wght.ttf new file mode 100644 index 000000000..e31b51e3e Binary files /dev/null and b/src/fonts/Inter/Inter-VariableFont_opsz,wght.ttf differ diff --git a/src/fonts/Inter/OFL.txt b/src/fonts/Inter/OFL.txt new file mode 100644 index 000000000..63db4fa70 --- /dev/null +++ b/src/fonts/Inter/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/src/fonts/Inter/README.txt b/src/fonts/Inter/README.txt new file mode 100644 index 000000000..f7a47e8ee --- /dev/null +++ b/src/fonts/Inter/README.txt @@ -0,0 +1,118 @@ +Inter Variable Font +=================== + +This download contains Inter as both variable fonts and static fonts. + +Inter is a variable font with these axes: + opsz + wght + +This means all the styles are contained in these files: + Inter-VariableFont_opsz,wght.ttf + Inter-Italic-VariableFont_opsz,wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for Inter: + static/Inter_18pt-Thin.ttf + static/Inter_18pt-ExtraLight.ttf + static/Inter_18pt-Light.ttf + static/Inter_18pt-Regular.ttf + static/Inter_18pt-Medium.ttf + static/Inter_18pt-SemiBold.ttf + static/Inter_18pt-Bold.ttf + static/Inter_18pt-ExtraBold.ttf + static/Inter_18pt-Black.ttf + static/Inter_24pt-Thin.ttf + static/Inter_24pt-ExtraLight.ttf + static/Inter_24pt-Light.ttf + static/Inter_24pt-Regular.ttf + static/Inter_24pt-Medium.ttf + static/Inter_24pt-SemiBold.ttf + static/Inter_24pt-Bold.ttf + static/Inter_24pt-ExtraBold.ttf + static/Inter_24pt-Black.ttf + static/Inter_28pt-Thin.ttf + static/Inter_28pt-ExtraLight.ttf + static/Inter_28pt-Light.ttf + static/Inter_28pt-Regular.ttf + static/Inter_28pt-Medium.ttf + static/Inter_28pt-SemiBold.ttf + static/Inter_28pt-Bold.ttf + static/Inter_28pt-ExtraBold.ttf + static/Inter_28pt-Black.ttf + static/Inter_18pt-ThinItalic.ttf + static/Inter_18pt-ExtraLightItalic.ttf + static/Inter_18pt-LightItalic.ttf + static/Inter_18pt-Italic.ttf + static/Inter_18pt-MediumItalic.ttf + static/Inter_18pt-SemiBoldItalic.ttf + static/Inter_18pt-BoldItalic.ttf + static/Inter_18pt-ExtraBoldItalic.ttf + static/Inter_18pt-BlackItalic.ttf + static/Inter_24pt-ThinItalic.ttf + static/Inter_24pt-ExtraLightItalic.ttf + static/Inter_24pt-LightItalic.ttf + static/Inter_24pt-Italic.ttf + static/Inter_24pt-MediumItalic.ttf + static/Inter_24pt-SemiBoldItalic.ttf + static/Inter_24pt-BoldItalic.ttf + static/Inter_24pt-ExtraBoldItalic.ttf + static/Inter_24pt-BlackItalic.ttf + static/Inter_28pt-ThinItalic.ttf + static/Inter_28pt-ExtraLightItalic.ttf + static/Inter_28pt-LightItalic.ttf + static/Inter_28pt-Italic.ttf + static/Inter_28pt-MediumItalic.ttf + static/Inter_28pt-SemiBoldItalic.ttf + static/Inter_28pt-BoldItalic.ttf + static/Inter_28pt-ExtraBoldItalic.ttf + static/Inter_28pt-BlackItalic.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them in your products & projects – print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/src/fonts/Inter/static/Inter_18pt-Black.ttf b/src/fonts/Inter/static/Inter_18pt-Black.ttf new file mode 100644 index 000000000..89673de1c Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-Black.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-BlackItalic.ttf b/src/fonts/Inter/static/Inter_18pt-BlackItalic.ttf new file mode 100644 index 000000000..b33602f1e Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-BlackItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-Bold.ttf b/src/fonts/Inter/static/Inter_18pt-Bold.ttf new file mode 100644 index 000000000..57704d104 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-Bold.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-BoldItalic.ttf b/src/fonts/Inter/static/Inter_18pt-BoldItalic.ttf new file mode 100644 index 000000000..d53a199e2 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-BoldItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-ExtraBold.ttf b/src/fonts/Inter/static/Inter_18pt-ExtraBold.ttf new file mode 100644 index 000000000..e71c601c0 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-ExtraBold.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf b/src/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf new file mode 100644 index 000000000..df450629b Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-ExtraLight.ttf b/src/fonts/Inter/static/Inter_18pt-ExtraLight.ttf new file mode 100644 index 000000000..f9c6cfc5b Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-ExtraLight.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf b/src/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf new file mode 100644 index 000000000..275f305e2 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-Italic.ttf b/src/fonts/Inter/static/Inter_18pt-Italic.ttf new file mode 100644 index 000000000..14d3595bc Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-Italic.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-Light.ttf b/src/fonts/Inter/static/Inter_18pt-Light.ttf new file mode 100644 index 000000000..acae36128 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-Light.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-LightItalic.ttf b/src/fonts/Inter/static/Inter_18pt-LightItalic.ttf new file mode 100644 index 000000000..f69e18b03 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-LightItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-Medium.ttf b/src/fonts/Inter/static/Inter_18pt-Medium.ttf new file mode 100644 index 000000000..71d90172f Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-Medium.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-MediumItalic.ttf b/src/fonts/Inter/static/Inter_18pt-MediumItalic.ttf new file mode 100644 index 000000000..5c8c8b145 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-MediumItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-Regular.ttf b/src/fonts/Inter/static/Inter_18pt-Regular.ttf new file mode 100644 index 000000000..ce097c825 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-Regular.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-SemiBold.ttf b/src/fonts/Inter/static/Inter_18pt-SemiBold.ttf new file mode 100644 index 000000000..053185e5d Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-SemiBold.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf b/src/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf new file mode 100644 index 000000000..d9c9896d3 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-Thin.ttf b/src/fonts/Inter/static/Inter_18pt-Thin.ttf new file mode 100644 index 000000000..e68ec4704 Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-Thin.ttf differ diff --git a/src/fonts/Inter/static/Inter_18pt-ThinItalic.ttf b/src/fonts/Inter/static/Inter_18pt-ThinItalic.ttf new file mode 100644 index 000000000..134e8372f Binary files /dev/null and b/src/fonts/Inter/static/Inter_18pt-ThinItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-Black.ttf b/src/fonts/Inter/static/Inter_24pt-Black.ttf new file mode 100644 index 000000000..dbb1b3bc7 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-Black.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-BlackItalic.ttf b/src/fonts/Inter/static/Inter_24pt-BlackItalic.ttf new file mode 100644 index 000000000..b89d61c1f Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-BlackItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-Bold.ttf b/src/fonts/Inter/static/Inter_24pt-Bold.ttf new file mode 100644 index 000000000..e974d96fc Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-Bold.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-BoldItalic.ttf b/src/fonts/Inter/static/Inter_24pt-BoldItalic.ttf new file mode 100644 index 000000000..1c3d251c0 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-BoldItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-ExtraBold.ttf b/src/fonts/Inter/static/Inter_24pt-ExtraBold.ttf new file mode 100644 index 000000000..b775c0843 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-ExtraBold.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf b/src/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf new file mode 100644 index 000000000..3461a928f Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-ExtraLight.ttf b/src/fonts/Inter/static/Inter_24pt-ExtraLight.ttf new file mode 100644 index 000000000..2ec6ca3fe Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-ExtraLight.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf b/src/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf new file mode 100644 index 000000000..c634a5d21 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-Italic.ttf b/src/fonts/Inter/static/Inter_24pt-Italic.ttf new file mode 100644 index 000000000..1048b07a1 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-Italic.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-Light.ttf b/src/fonts/Inter/static/Inter_24pt-Light.ttf new file mode 100644 index 000000000..1a2a6f252 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-Light.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-LightItalic.ttf b/src/fonts/Inter/static/Inter_24pt-LightItalic.ttf new file mode 100644 index 000000000..ded5a7539 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-LightItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-Medium.ttf b/src/fonts/Inter/static/Inter_24pt-Medium.ttf new file mode 100644 index 000000000..5c88739bd Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-Medium.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-MediumItalic.ttf b/src/fonts/Inter/static/Inter_24pt-MediumItalic.ttf new file mode 100644 index 000000000..be091b1dc Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-MediumItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-Regular.ttf b/src/fonts/Inter/static/Inter_24pt-Regular.ttf new file mode 100644 index 000000000..6b088a711 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-Regular.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-SemiBold.ttf b/src/fonts/Inter/static/Inter_24pt-SemiBold.ttf new file mode 100644 index 000000000..ceb8576ab Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-SemiBold.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf b/src/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf new file mode 100644 index 000000000..6921df226 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-Thin.ttf b/src/fonts/Inter/static/Inter_24pt-Thin.ttf new file mode 100644 index 000000000..3505b357e Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-Thin.ttf differ diff --git a/src/fonts/Inter/static/Inter_24pt-ThinItalic.ttf b/src/fonts/Inter/static/Inter_24pt-ThinItalic.ttf new file mode 100644 index 000000000..a3e6febe5 Binary files /dev/null and b/src/fonts/Inter/static/Inter_24pt-ThinItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-Black.ttf b/src/fonts/Inter/static/Inter_28pt-Black.ttf new file mode 100644 index 000000000..66a252f8f Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-Black.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-BlackItalic.ttf b/src/fonts/Inter/static/Inter_28pt-BlackItalic.ttf new file mode 100644 index 000000000..3c8fdf968 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-BlackItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-Bold.ttf b/src/fonts/Inter/static/Inter_28pt-Bold.ttf new file mode 100644 index 000000000..14db99406 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-Bold.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-BoldItalic.ttf b/src/fonts/Inter/static/Inter_28pt-BoldItalic.ttf new file mode 100644 index 000000000..704b12b20 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-BoldItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-ExtraBold.ttf b/src/fonts/Inter/static/Inter_28pt-ExtraBold.ttf new file mode 100644 index 000000000..6d87caec3 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-ExtraBold.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf b/src/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf new file mode 100644 index 000000000..1a5673590 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-ExtraLight.ttf b/src/fonts/Inter/static/Inter_28pt-ExtraLight.ttf new file mode 100644 index 000000000..d42b3f54d Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-ExtraLight.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf b/src/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf new file mode 100644 index 000000000..90e2f20cb Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-Italic.ttf b/src/fonts/Inter/static/Inter_28pt-Italic.ttf new file mode 100644 index 000000000..c2a143ac2 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-Italic.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-Light.ttf b/src/fonts/Inter/static/Inter_28pt-Light.ttf new file mode 100644 index 000000000..5eeff3a59 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-Light.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-LightItalic.ttf b/src/fonts/Inter/static/Inter_28pt-LightItalic.ttf new file mode 100644 index 000000000..6b90b7668 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-LightItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-Medium.ttf b/src/fonts/Inter/static/Inter_28pt-Medium.ttf new file mode 100644 index 000000000..00120fe72 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-Medium.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-MediumItalic.ttf b/src/fonts/Inter/static/Inter_28pt-MediumItalic.ttf new file mode 100644 index 000000000..7481e7ba8 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-MediumItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-Regular.ttf b/src/fonts/Inter/static/Inter_28pt-Regular.ttf new file mode 100644 index 000000000..855b6f476 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-Regular.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-SemiBold.ttf b/src/fonts/Inter/static/Inter_28pt-SemiBold.ttf new file mode 100644 index 000000000..8b84efcf8 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-SemiBold.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf b/src/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf new file mode 100644 index 000000000..2e22c5ac2 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-Thin.ttf b/src/fonts/Inter/static/Inter_28pt-Thin.ttf new file mode 100644 index 000000000..94e61089e Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-Thin.ttf differ diff --git a/src/fonts/Inter/static/Inter_28pt-ThinItalic.ttf b/src/fonts/Inter/static/Inter_28pt-ThinItalic.ttf new file mode 100644 index 000000000..d3d44cdb1 Binary files /dev/null and b/src/fonts/Inter/static/Inter_28pt-ThinItalic.ttf differ diff --git a/src/images/Vector.svg b/src/images/Vector.svg new file mode 100644 index 000000000..17a0e5baa --- /dev/null +++ b/src/images/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/arrow-left.txt b/src/images/arrow-left.txt new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/arrow-left.txt @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/arrow-right.txt b/src/images/arrow-right.txt new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/arrow-right.txt @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/arrow-up.svg b/src/images/arrow-up.svg new file mode 100644 index 000000000..bc809f94c --- /dev/null +++ b/src/images/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/favicon2.svg b/src/images/favicon2.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/favicon2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/fb.svg b/src/images/fb.svg new file mode 100644 index 000000000..d617dc785 --- /dev/null +++ b/src/images/fb.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/for-future-desk.png b/src/images/for-future-desk.png new file mode 100644 index 000000000..92bfe1bb7 Binary files /dev/null and b/src/images/for-future-desk.png differ diff --git a/src/images/for-future-mob.png b/src/images/for-future-mob.png new file mode 100644 index 000000000..9c5592357 Binary files /dev/null and b/src/images/for-future-mob.png differ diff --git a/src/images/for-future-tab.png b/src/images/for-future-tab.png new file mode 100644 index 000000000..9cf8bd179 Binary files /dev/null and b/src/images/for-future-tab.png differ diff --git a/src/images/futuristic-luna-desk.png b/src/images/futuristic-luna-desk.png new file mode 100644 index 000000000..3a611b4d8 Binary files /dev/null and b/src/images/futuristic-luna-desk.png differ diff --git a/src/images/futuristic-luna-mob.png b/src/images/futuristic-luna-mob.png new file mode 100644 index 000000000..ebe907467 Binary files /dev/null and b/src/images/futuristic-luna-mob.png differ diff --git a/src/images/futuristic-luna-tab.png b/src/images/futuristic-luna-tab.png new file mode 100644 index 000000000..0370313af Binary files /dev/null and b/src/images/futuristic-luna-tab.png differ diff --git a/src/images/hero-desk.png b/src/images/hero-desk.png new file mode 100644 index 000000000..954bf409b Binary files /dev/null and b/src/images/hero-desk.png differ diff --git a/src/images/hero-mob.png b/src/images/hero-mob.png new file mode 100644 index 000000000..5a86594f1 Binary files /dev/null and b/src/images/hero-mob.png differ diff --git a/src/images/hero-tab.png b/src/images/hero-tab.png new file mode 100644 index 000000000..bf08ec7bb Binary files /dev/null and b/src/images/hero-tab.png differ diff --git a/src/images/inst.svg b/src/images/inst.svg new file mode 100644 index 000000000..a44d7ed05 --- /dev/null +++ b/src/images/inst.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..d830ed06f --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/logo2.svg b/src/images/logo2.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/logo2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/luna-desk.png b/src/images/luna-desk.png new file mode 100644 index 000000000..4060eca2d Binary files /dev/null and b/src/images/luna-desk.png differ diff --git a/src/images/luna-mob.png b/src/images/luna-mob.png new file mode 100644 index 000000000..018a8dbf6 Binary files /dev/null and b/src/images/luna-mob.png differ diff --git a/src/images/luna-tab.png b/src/images/luna-tab.png new file mode 100644 index 000000000..b2ee5a6c1 Binary files /dev/null and b/src/images/luna-tab.png differ diff --git a/src/images/quotes.svg b/src/images/quotes.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/quotes.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/speaker-disassembled-desk-removebg-preview.png b/src/images/speaker-disassembled-desk-removebg-preview.png new file mode 100644 index 000000000..762f7ba48 Binary files /dev/null and b/src/images/speaker-disassembled-desk-removebg-preview.png differ diff --git a/src/images/speaker-disassembled-desk.png b/src/images/speaker-disassembled-desk.png new file mode 100644 index 000000000..b07c7040b Binary files /dev/null and b/src/images/speaker-disassembled-desk.png differ diff --git a/src/images/speaker-disassembled-removebg-preview.png b/src/images/speaker-disassembled-removebg-preview.png new file mode 100644 index 000000000..1e0a39e24 Binary files /dev/null and b/src/images/speaker-disassembled-removebg-preview.png differ diff --git a/src/images/speaker-disassembled.png b/src/images/speaker-disassembled.png new file mode 100644 index 000000000..d07807900 Binary files /dev/null and b/src/images/speaker-disassembled.png differ diff --git a/src/images/sun.svg b/src/images/sun.svg new file mode 100644 index 000000000..49ba7eac6 --- /dev/null +++ b/src/images/sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/system.svg b/src/images/system.svg new file mode 100644 index 000000000..68188e3c9 --- /dev/null +++ b/src/images/system.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tw.svg b/src/images/tw.svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/tw.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tweeter.svg b/src/images/tweeter.svg new file mode 100644 index 000000000..294373872 --- /dev/null +++ b/src/images/tweeter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/user.png b/src/images/user.png new file mode 100644 index 000000000..c66b5aae8 Binary files /dev/null and b/src/images/user.png differ diff --git "a/src/images/\321\201yberpunk.svg" "b/src/images/\321\201yberpunk.svg" new file mode 100644 index 000000000..ff5307f10 --- /dev/null +++ "b/src/images/\321\201yberpunk.svg" @@ -0,0 +1,3 @@ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..ce3d981ec 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,87 @@ 'use strict'; +import '../styles/main.scss'; +// ─── Мобильное меню ─────────────────────────────────────────────── + +const burgerBtn = document.querySelector('.header__burger-btn'); +const mobileMenu = document.querySelector('.mobile-menu'); +const closeBtn = document.querySelector('.mobile-menu__close'); +const menuLinks = document.querySelectorAll('.mobile-menu__link'); + +const toggleMenu = () => { + mobileMenu.classList.toggle('mobile-menu--active'); + burgerBtn.classList.toggle('is-active'); + document.documentElement.classList.toggle('no-scroll'); +}; + +burgerBtn.addEventListener('click', toggleMenu); + +if (closeBtn) { + closeBtn.addEventListener('click', toggleMenu); +} + +menuLinks.forEach((link) => { + link.addEventListener('click', toggleMenu); +}); + +// ─── Слайдер Features ───────────────────────────────────────────── + +/* global Swiper */ + +const DESKTOP_BREAKPOINT = 1200; + +let swiper = null; + +function initSwiper() { + const isMobile = window.innerWidth < DESKTOP_BREAKPOINT; + + if (isMobile && !swiper) { + swiper = new Swiper('.features__grid', { + slidesPerView: 1, + navigation: { + prevEl: document.querySelector('.features__btn--prev'), + nextEl: document.querySelector('.features__btn--next'), + disabledClass: 'features__btn--disabled', + }, + watchOverflow: false, + on: { + init() { + // Swiper выставляет disabled на кнопки — снимаем принудительно + document.querySelector('.features__btn--prev').disabled = false; + document.querySelector('.features__btn--next').disabled = false; + this.navigation.update(); + this.update(); + }, + }, + }); + + // Обновляем счётчик "01 / 03" при смене слайда + swiper.on('slideChange', () => { + const current = String(swiper.activeIndex + 1).padStart(2, '0'); + + document.querySelector('.features__counter span').textContent = current; + }); + } else if (!isMobile && swiper) { + // На десктопе слайдер не нужен — layout управляется CSS Grid + swiper.destroy(true, true); + swiper = null; + } +} + +// Инициализация при загрузке страницы +initSwiper(); + +// Пересоздаём слайдер при ресайзе с дебаунсом 200ms +let resizeTimer; + +window.addEventListener('resize', () => { + clearTimeout(resizeTimer); + + resizeTimer = setTimeout(() => { + if (swiper) { + swiper.destroy(true, true); + + swiper = null; + } + initSwiper(); + }, 200); +}); diff --git a/src/styles/_about.scss b/src/styles/_about.scss new file mode 100644 index 000000000..dce951c78 --- /dev/null +++ b/src/styles/_about.scss @@ -0,0 +1,120 @@ +@use 'utils'; + +.about { + scroll-margin-top: 80px; + margin-bottom: 110px; + + &__container { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + &__content { + display: contents; + } + + &__title { + order: -1; + margin: 0 0 30px; + } + + &__picture { + width: 100%; + margin-bottom: 30px; + } + + &__img { + display: block; + width: 100%; + height: auto; + } + + &__text { + @include utils.text-style(14px, normal, 21px); + + max-width: 100%; + margin: 0 0 30px; + color: utils.$c-grey-500; + } + + &__link { + @extend %link-reset; + + @include utils.text-style(12px, 700, 14px, uppercase); + + position: relative; + display: inline-block; + padding-bottom: 5px; + color: utils.$c-primary; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 42%; + height: 1px; + + background-color: utils.$c-primary; + + transition: width 0.3s ease-in-out; + } + + &:hover::after { + width: 100%; + } + } + + @include utils.respond-to('tab') { + margin-bottom: 140px; + + &__container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + align-items: center; + + padding: 0 34px 0 0; + } + + &__content { + display: flex; + flex-direction: column; + align-items: flex-start; + height: stretch; + } + + &__title { + order: 0; + max-width: 95%; + margin-bottom: 30px; + } + + &__picture { + margin-bottom: 0; + } + + &__text { + @include utils.text-style(16px, normal, 24px); + + max-width: 97%; + margin-bottom: 60px; + } + } + + @include utils.respond-to('desk') { + margin-bottom: 170px; + + &__container { + gap: 30px; + } + + &__text { + max-width: 600px; + margin-bottom: 60px; + } + } +} diff --git a/src/styles/_anchor-nav.scss b/src/styles/_anchor-nav.scss new file mode 100644 index 000000000..607516a76 --- /dev/null +++ b/src/styles/_anchor-nav.scss @@ -0,0 +1,34 @@ +// @use 'vars'; +@use 'utils'; + +.anchor-nav { + display: none; + + @include utils.respond-to('desk') { + display: block; + margin-bottom: 65px; + + &__list { + @include utils.list-reset; + + display: flex; + justify-content: space-between; + width: 578px; + margin: 0 auto; + } + + &__link { + @include utils.nav-link-base; + + padding: 28px 0; + letter-spacing: 0; + + &:hover { + font-weight: 700; + + @include utils.scale-hover(1.05); + @include utils.hover(color, utils.$link-hover); + } + } + } +} diff --git a/src/styles/_base.scss b/src/styles/_base.scss new file mode 100644 index 000000000..946469cce --- /dev/null +++ b/src/styles/_base.scss @@ -0,0 +1,29 @@ +@use 'utils'; + +html { + // Забезпечує плавне прокручування до якорів (навігація по сторінці) + scroll-behavior: smooth; +} + +html, +body { + overflow-x: hidden; + min-width: 320px; +} + +.no-scroll { + touch-action: none; + overflow: hidden; + + -webkit-overflow-scrolling: none; +} + +body { + overflow: hidden; + + font-family: utils.$font-main; + line-height: 1.5; + color: utils.$fc-main; + + background-color: utils.$bg-main; +} diff --git a/src/styles/_benefits.scss b/src/styles/_benefits.scss new file mode 100644 index 000000000..73672f48c --- /dev/null +++ b/src/styles/_benefits.scss @@ -0,0 +1,90 @@ +@use 'utils'; + +.benefits { + scroll-margin-top: 80px; + margin-bottom: 110px; + + &__list { + display: grid; + grid-template-columns: 1fr; + gap: 110px; + + margin: 0; + padding: 0; + + text-align: center; + list-style: none; + } + + &__item { + display: flex; + flex-direction: column; + align-items: center; + + width: 100%; + + text-align: center; + } + + &__image { + display: block; + + width: 100%; + max-width: 50px; + height: auto; + margin: 0 auto 40px; + } + + &__title { + margin: 0 0 20px; + color: utils.$c-grey-900; + + @include utils.text-style(22px, 700, 28px, uppercase); + } + + &__text { + max-width: 350px; + margin: 0; + color: utils.$c-grey-500; + + @include utils.text-style(14px, normal, 21px); + } + + @media (min-width: 744px) { + margin-bottom: 140px; + + &__list { + grid-template-columns: repeat(2, 1fr); + gap: 65px 20px; + align-items: start; + } + + &__item { + flex-direction: column; + align-items: center; + } + + &__image { + margin-bottom: 50px; + } + } + + @media (min-width: 1200px) { + margin-bottom: 170px; + + &__list { + grid-template-columns: repeat(4, 1fr); + gap: 0 30px; + align-items: start; + } + + &__item { + flex-direction: column; + gap: 0; + } + + &__image { + margin-bottom: 34px; + } + } +} diff --git a/src/styles/_container.scss b/src/styles/_container.scss new file mode 100644 index 000000000..47d251f35 --- /dev/null +++ b/src/styles/_container.scss @@ -0,0 +1,16 @@ +@use 'utils'; + +.container { + width: 100%; + max-width: utils.$container-width + (utils.$container-padding * 2); + margin: 0 auto; + padding: 0 utils.$container-padding; + + @include utils.respond-to('tab') { + padding: 0 34px; + } + + @include utils.respond-to('desk') { + padding: 0 60px; + } +} diff --git a/src/styles/_features.scss b/src/styles/_features.scss new file mode 100644 index 000000000..9b96e3fe4 --- /dev/null +++ b/src/styles/_features.scss @@ -0,0 +1,281 @@ +@use 'utils'; + +.features { + scroll-margin-top: 80px; + min-width: 320px; + margin-bottom: 90px; + + &__title { + margin: 0 0 30px; + } + + &__background { + display: flex; + flex-direction: column; + align-items: self-start; + + padding-top: 30px; + + background-color: utils.$c-primary-bg-alt; + } + + &__content { + display: flex; + flex-direction: column; + + max-width: utils.$container-width; + padding: 0; + + background-color: utils.$c-primary-bg-alt; + } + + &__item { + flex-shrink: 0; + box-sizing: border-box; + width: 100% !important; + padding: 0 50px 30px; + + @include utils.respond-to('desk') { + display: block; + width: auto; + } + } + + &__grid { + // padding: 0 50px 30px; + overflow: hidden; + } + + &__subtitle { + margin-top: 0; + margin-bottom: 20px; + + // @extend %h3; + color: utils.$fc-features-subtitle; + } + + &__list { + @extend %list-reset; + + display: inline-block; + max-width: 280px; + text-align: left; + } + + &__list-item { + @include utils.text-style(14px, 400, 21px); + + position: relative; + margin-bottom: 10px; + padding-left: 12px; + + &::before { + content: ''; + + position: absolute; + top: 45%; + left: 0; + + width: 4px; + height: 4px; + border-radius: 50%; + + background-color: utils.$c-black; + } + } + + &__box { + margin: auto; + } + + &__slider { + position: relative; + z-index: 10; /* Поднимаем над фоном */ + + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + + margin: auto; + } + + &__arrows { + display: flex; + align-items: center; + justify-content: center; + line-height: 0; + } + + &__btn { + pointer-events: all; + pointer-events: auto; /* Разрешаем клики */ + cursor: pointer; + + padding: 0; + border: none; + + color: utils.$c-grey-900; + + background: none; + + &--prev { + color: utils.$c-grey-400; + } + + &--next { + margin-left: -5px; + } + + &:hover { + color: utils.$btn-send-hover; + } + + svg { + display: block; + } + } + + &__counter { + @include utils.text-style(16px, 400, 24px); + + display: flex; + gap: 4px; + align-items: baseline; + color: utils.$c-black; + + span { + position: relative; + top: -2px; + } + + small { + color: utils.$c-grey-400; + + @include utils.text-style(11px, 400, 1); + } + } + + &__picture { + width: 100%; + min-width: 335px; + } + + &__img { + display: block; + width: 100%; + height: 100%; + } + + @include utils.respond-to('tab') { + margin-bottom: 140px; + + &__background { + display: block; + padding-top: 60px; + } + + &__content { + padding: 0 30px; + background-color: transparent; + } + + &__grid { + padding: 0 0 0 90px; + } + + &__list { + max-width: 45%; + } + + &__box { + display: flex; + flex-direction: row; + align-items: start; + justify-content: space-between; + + padding-left: 90px; + } + + &__slider { + position: relative; + margin: 0; + padding-top: 50px; + } + + &__picture { + z-index: 1; + + grid-column: 2; + justify-self: end; + + width: 435px; + height: 226px; + } + + &__img { + width: 100%; + object-fit: contain; + } + } + + @include utils.respond-to('desk') { + margin-bottom: 170px; + + &__items { + transform: none !important; // сбрасываем инлайн transform + display: contents; + width: auto !important; // сбрасываем width: 100% + } + + .features__slider { + display: none; + } + + &__item { + display: block; + } + + &__background { + display: grid; + grid-template-areas: + 'connectivity app' + 'sound picture'; + grid-template-columns: 1fr 1fr; + gap: 56px 120px; + + padding-left: 100px; + } + + &__list { + max-width: 100%; + } + + &__list-item { + @include utils.text-style(16px, 400, 24px); + } + + &__grid, + &__box { + display: contents; + } + + &__item:nth-child(1) { + grid-area: sound; + } + + &__item:nth-child(2) { + grid-area: connectivity; + } + + &__item:nth-child(3) { + grid-area: app; + } + + &__picture { + transform: translateX(-20px); + grid-area: picture; + align-self: end; + } + } +} 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/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 000000000..1d6071a22 --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,71 @@ +@use 'utils'; + +.footer { + &__logo, + &__back-to-top { + display: none; + } + + &__logo, + &__back-to-top, + &__socials-link { + @extend %link-reset; + } + + &__content { + position: relative; + + display: flex; + flex-direction: column; + gap: 30px; + align-items: center; + } + + &__socials { + @extend %list-reset; + + display: flex; + gap: 50px; + justify-content: center; + opacity: 0.9; + } + + &__copy { + @include utils.text-style(14px, 400, 21px); + + display: flex; + justify-content: center; + color: utils.$c-grey-400; + text-align: center; + } + + @include utils.respond-to('tab') { + &__content { + gap: 60px; + } + + &__logo { + display: block; + width: 184px; + object-fit: contain; + } + + &__socials { + gap: 50px; + } + + &__back-to-top { + position: absolute; + top: 0; + right: 0; + + display: block; + + padding: 10px 50px; + + color: utils.$c-primary; + + background-color: inherit; + } + } +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 000000000..8deb86d23 --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,96 @@ +@use 'utils'; + +.header { + background-color: utils.$c-grey-100; + + &__content { + display: flex; + align-items: center; + justify-content: space-between; + + height: 76px; // из макета + border-bottom: 1px solid utils.$c-grey-300; + } + + &__logo { + display: flex; + flex-shrink: 0; + align-items: center; + } + + &__button { + height: 48px; + + @include utils.respond-to('desk') { + @include utils.text-style(12px, 700, 14px, uppercase); + } + } + + &__actions { + display: flex; + gap: 30px; + align-items: center; + + @include utils.respond-to('desk') { + gap: 47px; + } + + &__lang { + display: flex; + gap: 3px; + align-items: center; + + font-size: 14px; + color: utils.$c-grey-500; + } + + // Приховуємо елементи на мобільних пристроях (до 768px) + & > .header__specs-btn, + & > .header__lang, + & > .header__button { + display: none; + + @include utils.respond-to('tab') { + display: flex; + align-items: center; + } + } + } + + &__burger-btn { + position: relative; + + flex-direction: column; + justify-content: space-between; + + width: 24px; + + // Всі базові стилі (скидання кнопки) приходять з типографіки або екстендів + height: 16px; + + background: none; + + @include utils.respond-to('desk') { + display: none; + } + + // Опис ліній бургера (геометрія) + &-line, + &::before, + &::after { + content: ''; + + display: block; + + width: 100%; + height: 2px; + border-radius: 2px; + + background-color: utils.$c-grey-900; + + transition: + transform 0.3s, + opacity 0.3s; + } + } +} diff --git a/src/styles/_hero.scss b/src/styles/_hero.scss new file mode 100644 index 000000000..3d6049e81 --- /dev/null +++ b/src/styles/_hero.scss @@ -0,0 +1,95 @@ +@use 'utils'; + +.hero { + padding-bottom: 110px; + + &__inner { + display: flex; + flex-direction: column; + gap: 40px; + align-items: center; + } + + &__box-image { + display: flex; + justify-content: center; + width: 100%; + } + + &__image { + display: block; + max-width: 100%; + height: auto; + } + + &__content { + color: utils.$c-grey-900; + text-align: start; + } + + &__title { + @extend %h1; + + max-width: 60%; + margin: 0 0 20px; + } + + &__text { + @include utils.text-style(16px, normal, 24px); + + max-width: 260px; + margin: 0; + } + + @include utils.respond-to('tab') { + padding-top: 131px; + padding-bottom: 140px; + + &__inner { + flex-direction: row-reverse; + gap: 0; + align-items: flex-start; + justify-content: space-between; + } + + &__box-image { + flex: 1; + } + + &__image { + margin-top: 15px; + } + + &__content { + flex: 0 1 34%; + text-align: left; + } + + &__title { + max-width: 380px; + margin: 0 0 30px; + } + + &__text { + max-width: 260px; + } + } + + @include utils.respond-to('desk') { + padding-top: 173px; + padding-bottom: 170px; + + &__image { + margin-top: -60px; + } + + &__content { + flex: 0 1 30%; + } + + &__title { + margin-top: 0; + margin-bottom: 30px; + } + } +} diff --git a/src/styles/_mobile-menu.scss b/src/styles/_mobile-menu.scss new file mode 100644 index 000000000..2f8b0ce7d --- /dev/null +++ b/src/styles/_mobile-menu.scss @@ -0,0 +1,146 @@ +@use 'utils'; + +.mobile-menu { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + transform: translateX(100%); + + width: 100%; + height: 100vh; + + visibility: hidden; + opacity: 0; + background-color: utils.$bg-main; + + transition: + transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.4s ease, + visibility 0.4s; + transition-delay: 0.4s, 0.4s, 0.4s; + + .container { + display: flex; + flex-direction: column; + height: 100%; + padding-bottom: 20px; + } + + &__header { + position: sticky; + top: 0; + + display: flex; + align-items: center; + justify-content: space-between; + + height: 76px; + border-bottom: 1px solid utils.$c-grey-300; + } + + &__list { + @extend %list-reset; + + display: flex; + flex-direction: column; + gap: 25px; + + padding-top: 31px; + padding-bottom: 50.5px; + } + + &__actions { + display: flex; + gap: 20px; + align-items: center; + + font-size: 14px; + line-height: 18px; + } + + &__button { + width: 100%; + height: 48px; + margin-top: auto; + margin-bottom: 10px; + } + + &__close { + cursor: pointer; + + position: relative; + + width: 24px; + height: 16px; + + transition: transform 0.2s ease; + + &::before { + top: 0; + transform: translateY(7px) rotate(45deg); + } + &::after { + bottom: 0; + transform: translateY(-7px) rotate(-45deg); + } + + &-line, + &::before, + &::after { + @extend %burger-lines; + + transition-delay: 0.2s; + } + &-line { + top: 7px; + opacity: 0; + } + + .mobile-menu--active & { + animation: bounce-in 0.5s ease 0.3s backwards; + } + + &:active { + transform: scale(0.9) !important; + } + } + + &--active { + transform: translateX(0); + visibility: visible; + opacity: 1; + transition-delay: 0s; + } + + @include utils.respond-to('tab') { + &__list { + gap: 40px; + padding-top: 40px; + } + + &__actions { + display: none !important; + } + + &__button { + display: none !important; + } + } + + @include utils.respond-to('desk') { + display: none !important; + } +} + +@keyframes bounce-in { + 0% { + transform: scale(0.8); + } + 70% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} diff --git a/src/styles/_presentation.scss b/src/styles/_presentation.scss new file mode 100644 index 000000000..1638813e8 --- /dev/null +++ b/src/styles/_presentation.scss @@ -0,0 +1,24 @@ +@use 'utils'; + +.presentation { + margin-bottom: 110px; + + &__picture { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + max-width: 100%; + height: auto; + margin: 0 auto; + } + + @include utils.respond-to('tab') { + margin-bottom: 140px; + } + + @include utils.respond-to('desk') { + margin-bottom: 170px; + } +} diff --git a/src/styles/_questions.scss b/src/styles/_questions.scss new file mode 100644 index 000000000..69acf7f2a --- /dev/null +++ b/src/styles/_questions.scss @@ -0,0 +1,60 @@ +@use 'utils'; + +.questions { + scroll-margin-top: 80px; + margin-bottom: 110px; + + &__title { + max-width: 480px; + margin: 0 0 30px; + } + + &__form { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__input { + height: 48px; + } + + &__textarea { + height: 128px; + } + + &__button { + margin-top: 10px; + } + + @include utils.respond-to('tab') { + margin-bottom: 140px; + + &__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + } + + &__input { + height: 48px; + } + + &__textarea { + height: 201px; + } + } + + @include utils.respond-to('desk') { + margin-bottom: 170px; + + &__title { + max-width: 600px; + margin: 0 0 30px; + } + + &__textarea { + height: 128px; + } + } +} diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 000000000..2d66d197c --- /dev/null +++ b/src/styles/_reset.scss @@ -0,0 +1,20 @@ +// src/styles/_reset.scss +html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0; +} + +img { + display: block; + max-width: 100%; + max-height: 100%; +} diff --git a/src/styles/_technology.scss b/src/styles/_technology.scss new file mode 100644 index 000000000..47f01d968 --- /dev/null +++ b/src/styles/_technology.scss @@ -0,0 +1,132 @@ +@use 'utils'; + +.technology { + margin-bottom: 110px; + + &__container { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + &__content { + display: contents; + } + + &__title { + @include utils.text-style(30px, 700, 40px, uppercase); + + order: -1; + margin: 0 0 30px; + } + + &__picture { + order: 0; + width: 100%; + margin-bottom: 30px; + } + + &__img { + display: block; + width: 100%; + height: auto; + } + + &__text { + @include utils.text-style(14px, normal, 21px); + + max-width: 100%; + margin: 0 0 30px; + color: utils.$c-grey-500; + } + + &__link { + @extend %link-reset; + + @include utils.text-style(12px, 700, 14px, uppercase); + + position: relative; + display: inline-block; + padding-bottom: 5px; + color: utils.$c-primary; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 42%; + height: 1px; + + background-color: utils.$c-primary; + + transition: width 0.3s ease-in-out; + } + + &:hover::after { + width: 100%; + } + } + + @include utils.respond-to('tab') { + margin-bottom: 140px; + + &__container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + align-items: center; + + padding: 0 0 0 34px; + } + + &__content { + display: flex; + grid-column: 1; + grid-row: 1; + flex-direction: column; + align-items: flex-start; + + height: stretch; + } + + &__title { + @include utils.text-style(36px, 700, 46px, uppercase); + + order: 0; + margin-bottom: 30px; + } + + &__picture { + grid-column: 2; + grid-row: 1; + margin-bottom: 0; + } + + &__text { + @include utils.text-style(16px, normal, 24px); + + max-width: 90%; + margin-bottom: 60px; + } + } + + @include utils.respond-to('desk') { + margin-bottom: 160px; + + &__container { + gap: 30px; + } + + &__title { + @include utils.text-style(56px, 700, 70px, uppercase); + } + + &__text { + max-width: 600px; + margin-bottom: 60px; + } + } +} diff --git a/src/styles/_testimonials.scss b/src/styles/_testimonials.scss new file mode 100644 index 000000000..d2e8c7e31 --- /dev/null +++ b/src/styles/_testimonials.scss @@ -0,0 +1,94 @@ +@use 'utils'; + +.testimonials { + margin-bottom: 110px; + + &__quote { + position: relative; + + display: flex; + flex-direction: column; + align-items: center; + + margin: 0; + padding-top: 50px; + + text-align: center; + + &::before { + content: ''; + + position: absolute; + z-index: -1; + + // Центрируем ровно посередине текстового блока + top: 20%; + left: 50%; + transform: translate(-50%, -50%); + + // Мобилка (208 x 171) + width: 208px; + height: 171px; + + background: url('../images/quotes.svg') no-repeat center; + background-size: contain; + + @include utils.respond-to('tab') { + width: 233px; + height: 189px; + } + + @include utils.respond-to('desk') { + top: 29%; + width: 233px; + height: 192px; + } + } + } + + &__text { + @extend %quote; + } + + &__author { + display: flex; + flex-direction: column; + align-items: center; + } + + &__avatar { + width: 65px; + height: 65px; + margin-bottom: 10px; + border-radius: 50%; + + object-fit: cover; + } + + &__name { + @include utils.text-style(16px, 700, 22px); + + margin: 0 0 5px; + } + + &__position { + @include utils.text-style(14px, 400, 21px); + + margin: 0; + color: utils.$c-grey-500; + } + + @include utils.respond-to('tab') { + margin-bottom: 141px; + + &__avatar { + width: 100px; + height: 100px; + margin-bottom: 20px; + } + } + + @include utils.respond-to('desk') { + margin-bottom: 162px; + } +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..b6e2341b1 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,98 @@ +@use './utils/vars' as vars; +@use './utils/extends' as *; +@use './utils/mixins' as mix; + h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +p { + @include mix.text-style(16px, 400, 24px); + + margin-bottom: 1rem; + color: vars.$fc-secondary; +} + +.header__specs-btn, +.header__lang-link { + @extend %nav-link-base; + + @include mix.scale-hover(1.08, 0.2s); + @include mix.hover(color, vars.$c-grey-900); + + position: relative; + &::before { + content: ''; + position: absolute; + z-index: 1; + inset: -15px -10px; + } +} + +.header__burger-btn, +.mobile-menu__close { + @extend %btn-base; + + @include mix.scale-hover(1.1, 0.2s); + + will-change: transform; +} + +.mobile-menu__link, +.mobile-menu__specs-btn, +.mobile-menu__lang-link { + @extend %nav-link-base; + + @include mix.scale-hover(1.08, 0.2s); + @include mix.hover(color, vars.$c-black); + + position: relative; + &::before { + content: ''; + position: absolute; + z-index: 1; + inset: -15px -10px; + } +} + +.header__logo, +.mobile-menu__logo { + @extend %link-reset; + + @include mix.scale-hover(1.03, 0.2s); + + position: relative; + &::before { + content: ''; + position: absolute; + z-index: 1; + inset: -15px -10px; + } +} + +.header__button, +.mobile-menu__button { + @extend %btn-primary; + + will-change: transform; +} + +.questions__button { + @extend %btn-accent; + + width: 102px; + height: 40px; +} + +.questions__input, +.questions__textarea { + @extend %input-base; +} 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/main.scss b/src/styles/main.scss index fb9195d12..637dfe720 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,17 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use 'reset'; +@use 'utils'; +@use 'base'; +@use 'typography'; +@use 'container'; +@use 'header'; +@use 'mobile-menu'; +@use 'hero'; +@use 'benefits'; +@use 'presentation'; +@use 'about'; +@use 'technology'; +@use 'testimonials'; +@use 'features'; +@use 'questions'; +@use 'footer'; +@use 'anchor-nav'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..3596c980c 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,242 @@ +@use 'vars'; +@use 'mixins' as mix; + %h1 { - font-family: Roboto, sans-serif; - font-weight: 400; + font-family: vars.$font-main; + font-size: 40px; + font-weight: 700; + line-height: 52px; + color: vars.$fc-main; + text-transform: uppercase; + + @media (min-width: 744px) { + font-size: 48px; + line-height: 62px; + } + + @media (min-width: 1200px) { + font-size: 62px; + line-height: 78px; + } +} + +%h2 { + font-family: vars.$font-main; + font-size: 30px; + font-weight: 700; + line-height: 40px; + color: vars.$fc-main; + text-transform: uppercase; + + @media (min-width: 744px) { + font-size: 36px; + line-height: 46px; + } + + @media (min-width: 1200px) { + font-size: 56px; + line-height: 70px; + } +} + +%h3 { + font-family: vars.$font-main; + font-size: 18px; + font-weight: 700; + line-height: 22px; + color: vars.$fc-main; + text-transform: uppercase; + + @media (min-width: 1200px) { + font-size: 34px; + line-height: 42px; + } +} + +%quote { + max-width: 400px; + margin: 0 0 30px; + + font-family: vars.$font-main; + font-size: 14px; + font-weight: 700; + line-height: 20px; + color: vars.$fc-main; + + @media (min-width: 744px) { + max-width: 700px; + margin-bottom: 40px; + font-size: 24px; + line-height: 36px; + } + + @media (min-width: 1200px) { + max-width: 800px; + margin-bottom: 30px; + } +} + +%list-reset { + margin: 0; + padding: 0; + list-style: none; +} + +%link-reset { + cursor: pointer; + display: inline-block; + color: inherit; + text-decoration: none; +} + +%nav-link-base { + @extend %link-reset; + + @include mix.text-style(14px, 400, 20px, uppercase); + + font-family: vars.$font-main; + letter-spacing: 0.1em; +} + +%button-reset { + cursor: pointer; + + padding: 0; + border: none; + + font: inherit; + + appearance: none; + background: none; + outline: none; + + -webkit-tap-highlight-color: transparent; +} + +%btn-base { + @extend %button-reset; + + display: inline-flex; + align-items: center; + justify-content: center; + + border-radius: 2px; + + transition: all 0.3s ease; +} + +%btn-primary { + @extend %btn-base; + + @include mix.text-style(12px, 500, 12px, uppercase); + + width: 100px; + height: 100%; + color: vars.$c-white; + background-color: vars.$btn-buy-bg; + + @include mix.btn-interactive( + vars.$btn-buy-bg, + vars.$btn-buy-hover, + vars.$btn-buy-dis + ); +} + +%btn-accent { + @extend %btn-base; + + @include mix.text-style(12px, 700, 14px, uppercase); + + padding: 10px 30px; + color: vars.$c-white; + background-color: vars.$btn-send-bg; + + @include mix.btn-interactive( + vars.$btn-send-bg, + vars.$btn-send-hover, + vars.$btn-send-dis + ); +} + +%burger-lines { + content: ''; + + position: absolute; + + display: block; + + width: 100%; + height: 2px; + + background-color: vars.$fc-main; + + transition: + transform 0.3s, + opacity 0.3s; + transition-delay: 0s; +} + +%input-base { + @extend %button-reset; + + display: block; + + width: 100%; + padding: 12px 20px; + border: 1px solid vars.$c-input-border; + + font-family: vars.$font-main; + color: vars.$fc-main; + + background-color: transparent; + + transition: + border-color 0.3s ease, + box-shadow 0.3s ease, + background-color 0.3s ease; + + @include mix.text-style(14px, 500, 24px); + + &::placeholder { + color: vars.$c-grey-400; + transition: opacity 0.3s ease; + } + + &:focus { + border-color: vars.$c-input-selected; + background-color: transparent; + box-shadow: inset 0 0 0 0.5px vars.$c-input-selected; + transition: background-color 5000s ease-in-out 0s; + + &::placeholder { + opacity: 0.5; + } + } + + &:-webkit-autofill { + transition: background-color 5000s ease-in-out 0s; + + -webkit-text-fill-color: vars.$fc-main; + } + + &:user-invalid { + border-color: vars.$c-error; + color: vars.$c-error; + + &::placeholder { + color: rgba(vars.$c-error, 0.6); + } + + &:focus { + border-color: vars.$c-error; + box-shadow: inset 0 0 0 0.5px vars.$c-error; + } + } + + &:disabled { + cursor: not-allowed; + border-color: vars.$c-grey-300; + opacity: 0.7; + background-color: vars.$c-grey-100; + } } diff --git a/src/styles/utils/_index.scss b/src/styles/utils/_index.scss new file mode 100644 index 000000000..c2951a992 --- /dev/null +++ b/src/styles/utils/_index.scss @@ -0,0 +1,3 @@ +@forward 'vars'; +@forward 'mixins'; +@forward 'extends'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..ba7837a64 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,99 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@use 'vars' as vars; +@use 'sass:color'; + +// Міксин для медіа-запитів +// Використання: @include respond-to('tab') { ... } +@mixin respond-to($breakpoint) { + @if $breakpoint == 'tab' { + @media (min-width: vars.$bp-tablet) { + @content; + } } + + @if $breakpoint == 'desk' { + @media (min-width: vars.$bp-desktop) { + @content; + } + } +} + +@mixin hover($property, $value, $duration: 0.3s) { + transition: all $duration ease-in-out; + + &:active { + #{$property}: #{$value}; + } + + @media (hover: hover) { + &:hover { + #{$property}: #{$value}; + } + } +} + +@mixin scale-hover($ratio: 1.05, $duration: 0.3s) { + backface-visibility: hidden; + transition: all $duration ease-in-out; + + &:active { + transform: scale($ratio * 0.9); + } + + @media (hover: hover) { + &:hover { + transform: scale($ratio); + } + } +} + +@mixin text-style($size, $weight: 400, $lh: normal, $transform: none) { + font-size: $size; + font-weight: $weight; + line-height: $lh; + text-transform: $transform; +} + +@mixin btn-interactive($bg-default, $bg-active, $bg-dis) { + background-color: $bg-default; + transition: + transform 0.25s ease, + background-color 0.2s ease; + + &:active { + transform: scale(0.96); + background-color: $bg-active; + transition: transform 0.05s linear; + } + + &:disabled { + cursor: not-allowed; + background-color: $bg-dis; + } + + @media (hover: hover) { + &:hover { + transform: scale(1.02); + background-color: color.adjust($bg-default, $lightness: -10%); + } + } +} + +@mixin link-reset { + cursor: pointer; + display: inline-block; + color: inherit; + text-decoration: none; +} + +@mixin list-reset { + margin: 0; + padding: 0; + list-style: none; +} + +@mixin nav-link-base { + @include link-reset; + @include text-style(14px, 400, 20px, uppercase); + + letter-spacing: 0; } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..c9293d70c 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,61 @@ -$c-gray: #eee; +@use 'sass:color'; + +// 1. Fonts +$font-main: 'Inter', sans-serif; +$container-width: 1194px; +$container-padding: 30px; + +// 2. Color Palette (Abstract layer) +$c-white: #fff; +$c-black: #131313; +$c-teal-dark: #0c797a; +$c-teal: #39bebf; +$c-primary: #0db2b3; +$c-primary-light: #cfeff0; +$c-primary-bg: #eefafa; +$c-primary-bg-alt: #d6ecec; +$c-grey-900: #333; +$c-grey-700: #4f4f4f; +$c-grey-500: #7c7c7c; +$c-grey-450: #828282; +$c-grey-400: #bdbdbd; + +// Features +$c-grey-300: #d0d0d0; +$c-grey-100: #f7f7f7; +$c-accent-ice: #d6ecec; + +// 3. Functional Variables (Semantic layer) +// Backgrounds +$bg-main: $c-grey-100; +$bg-accent: $c-accent-ice; // секции Features +$bg-card: $c-white; + +// Text +$fc-main: $c-grey-900; +$fc-secondary: $c-grey-700; +$fc-light: $c-grey-500; +$fc-accent: $c-primary; +$fc-features-subtitle: $c-teal-dark; + +// Status & Forms +$c-error: #eb5757; +$c-success: #27ae60; +$c-input-border: $c-grey-450; +$c-input-selected: $c-teal-dark; + +// Buttons - Primary (Dark) +$btn-buy-bg: $c-grey-900; +$link-hover: $c-black; +$btn-buy-hover: color.adjust($btn-buy-bg, $lightness: -10%); +$btn-buy-dis: $c-grey-300; + +// Buttons - Secondary (Teal) +$btn-send-bg: $c-teal; +$btn-send-hover: #0c797a; +$btn-send-dis: $c-primary-light; +$btn-arrow-active: $c-teal-dark; + +// 4. Breakpoints +$bp-tablet: 744px; // min-width для планшетної версії +$bp-desktop: 1200px; // min-width для десктопної версії