diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /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 93d9738cc4..bdca99efdf 100644 --- a/README.md +++ b/README.md @@ -1,71 +1,35 @@ -# Dia landing page -Implement landing page according to [Figma design](https://www.figma.com/file/7qwsWggv9BAxMi2VPhBuPr/Air-(formerly-Dia)?node-id=9138%3A35) - Use BEM and SCSS +# Air Agency Landing Page -Adapt the page to the following screens: -- Large screens 2560px -- The design 1600px -- Desktop 1280px -- Small desktop 1024px -- Tablet 640px -- Mobile (> 320px) +## Brief Project Description -1. Implement the header with `nav`. -1. Implement `Strategic agency` block. -1. Implement slider (You may start with a single picture). - - implement slider block as absolutely positioned element with `right: 0` and `bottom: 0` position inside the black container - - on large screens limit the width of black container to 1600px, so that left outer space have a standart grey background color -3. Implement `Who we are` block. -4. Implement `Our expertise` block with the card reused 3 times. -5. Implement `Process` block with 4 process cards. - - use `trasnlateY(-50%)` to move cards up -6. Implement `Testimonials` block. - - each card should have a fixed width and on the small screens the whole block should switch to column layout -8. Implement `Vision, Passion, Results` block. - - use https://github.com/mate-academy/layout_dia/blob/master/src/images/Shapes.png as background picture -9. Implement `Send us a message` block. -10. Implement `Contact us` block. -11. Implement the footer. +Air is a responsive landing page for a full-service creative agency. +The website presents the agency's expertise in branding, communication and strategy, showcases available services, features client testimonials, and includes a contact section with a message form and office details. -## Checklist for preparing a portfolio project for HR review +## Technologies Used -1. Don’t forget to add the title “Air” for the whole web page -2. A landing page is implemented strictly according to the design in Figma -4. Links in the header and footer menus should lead to the corresponding blocks of the landing page -5. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) -6. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number -7. Make sure everything looks neat on mobile and without horizontal scrolling -8. Add favicon -9. Add a smooth scroll for the whole page -10. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded -11. The form shouldn’t submit empty -12. The "Learn more" button should lead to the closest block (Our expertise) -13. The "Hire Us" button in the header menu should lead to the contact form -14. In the PROCESS section add a hover effect to cards (for example, let them increase in size a little) -15. Inside the cards in PROCESS sections, make a link out of the "Learn More" text, so that it hovers simultaneously with the arrow button on the left -16. In the Vision, Passion, Results section, the “Apply” button also should lead to the contact form -17. In the Testimonials and Our expertise section add hover effects for each review -18. After clicking the menu buttons, the landing page will scroll exactly to the beginning of the desired block (exactly where its section begins) -19. The arrows at the bottom of the first block should not respond slowly to pressing (this is possible if the pictures are too large) -20. When a user clicks on Address Google Maps is opened in a new tab -21. The user must have the opportunity to conveniently write 2-3 lines of text in the message field -22. OPTIONAL: After everything is done, you can implement the slider on the hero page (you can find images for it on Unsplash) +- HTML5 (semantic markup) +- CSS3 +- SCSS / Sass +- BEM methodology +- Google Fonts (Open Sans, Poppins) +- Vite +- Stylelint +- Prettier +## Features -## Github flow -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'solution'` to save your changes. -11. `git push origin develop` - to send you code for PR. -12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. -13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_dia/). -14. Copy `DEMO LINK` to the PR description. +- Responsive mobile-first layout (320px → 640px → 1024px → 1280px → 1600px → 2560px) +- CSS-only image slider using `:target` pseudo-class (no JavaScript) +- CSS-only burger menu with anchor-based navigation +- Smooth scrolling between sections +- Semantic HTML5 structure +- Modular SCSS architecture (blocks, utils) +- Touch-friendly hover interactions via `@media (hover: hover)` -> To update you PR repeat steps 7-11. +## Preview + +- [DEMO LINK](https://Alex3777-prog.github.io/layout_dia/). + +## Design Reference + +- [FIGMA LINK](https://www.figma.com/file/7qwsWggv9BAxMi2VPhBuPr/Air-(formerly-Dia)?node-id=9138%3A35) diff --git a/index.html b/index.html index 1eca937738..5e8e03a507 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,480 @@ - + - Dia + + Air + + + + + + + + + - -

Dia

- + +
+
+
+
+
+ + + +
+ + + + HIRE US +
+
+

Strategic Agency

+

We believe in the power of bold ideas that can solve business challenges.

+
+ Learn more +
+
+
+
+
+
+ + Previous slide + + + Next slide + +
+
+

INTRO

+

By the same illusion which lifts the horizon.

+
+
+
+
+
+
+ + Previous slide + + + Next slide + +
+
+

INTRO

+

By the same illusion which lifts the horizon.

+
+
+
+
+
+
+ + Previous slide + + + Next slide + +
+
+

INTRO

+

By the same illusion which lifts the horizon.

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

Who we are

+

We embrace a strategic approach to creative ideas. We are interested in people and human relationships. This is the main thing you need to know about us. We believe in the power of bold ideas that can solve business challenges.

+
+
+
+
+

Our expertise

+
+
+ branding-photo +

Branding

+

We create additional value for companies, products, services as well as verbal and visual ways to deliver it to the audience.

+
+
+ communication-photo +

Communication

+

We strive to create communications that can increase media performance. We use everything — words, meanings, stories, art, movies.

+
+
+ strategy-photo +

Strategy

+

We create business growth strategies, from the moment of its birth to the achievement of the necessary business indicators.

+
+
+
+
+ +
+
+
+

Services

+

+ Air is a full service creative agency +

+

Deep analytics, strong strategy and bright creative ideas.

+

We are sure that first-rate job is possible only if all three components are united.

+
+ +
+ 001 +
    +
  • Brand Development
    • +
  • Copywriting
    • +
  • Logo & Website Design
    • +
  • Packaging
    • +
+ + icon + Learn more + +
+ +
+ 002 +
    +
  • Сontent Production
    • +
  • Graphic Design
    • +
  • Video Production
    • +
  • Post Production
    • +
+ + icon + Learn more + +
+ +
+ 003 +
    +
  • Marketing Strategy
    • +
  • Email Marketing
    • +
  • Paid Advertising
    • +
  • Blog Content & SEO
    • +
+ + icon + Learn more + +
+ +
+ 004 +
    +
  • Digital Communications
    • +
  • Influencer Marketing
    • +
  • Product Placements
    • +
  • Strategic Partnerships
    • +
+ + icon + Learn more + +
+
+
+ +
+
+
+

testimonials

+

What people say

+
+
+
+
+
+ Tal Gilad +
+
+
+ AIR’s ideas are refreshing and out of the box. Authentic team that focuses on the important path of the brand. +
+

Tal Gilad

+

Teach for America

+
+
+
+
+ Azadeh Hawkins +
+
+
+ AIR is an exceptional agency that leads with creative talent, first-class account servicing. +
+

Azadeh Hawkins

+

Hawkins Consulting

+
+
+
+
+ Michel Grover +
+
+
+ AIR raises the agency bar to stratospheric heights on both creative output and client service. +
+

Michel Grover

+

Hulu

+
+
+
+
+ +
+
+

Vision, Passion, Results

+

We are sure that first-rate job is possible only if all three components are united.

+ Apply +
+
+ +
+
+
+

Send us a message

+
+ + + + +
+
+
+

Contact us

+
+
+

Call us

+ + 654 321 987 + +
+
+

Visit us

+ + 2905 West Drive, Buffalo Grove + +
+
+

Our socials

+
+ +
+
+
+
+
+
+
+
+ + + + diff --git a/package-lock.json b/package-lock.json index 1b7e1f550b..0d916d7b41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index aebda906fc..ffc8ac6e62 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7310..0000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/Shapes.png b/src/images/Shapes.png deleted file mode 100644 index 26ed3e89b0..0000000000 Binary files a/src/images/Shapes.png and /dev/null differ diff --git a/src/images/air-favicon.svg b/src/images/air-favicon.svg new file mode 100644 index 0000000000..997b76a0f4 --- /dev/null +++ b/src/images/air-favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/apply/apply-bg.svg b/src/images/apply/apply-bg.svg new file mode 100644 index 0000000000..bc7bf072af --- /dev/null +++ b/src/images/apply/apply-bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/expertise/branding.png b/src/images/expertise/branding.png new file mode 100644 index 0000000000..98641ce507 Binary files /dev/null and b/src/images/expertise/branding.png differ diff --git a/src/images/expertise/communication.png b/src/images/expertise/communication.png new file mode 100644 index 0000000000..ee08d57a85 Binary files /dev/null and b/src/images/expertise/communication.png differ diff --git a/src/images/expertise/strategy.png b/src/images/expertise/strategy.png new file mode 100644 index 0000000000..aecb8a0853 Binary files /dev/null and b/src/images/expertise/strategy.png differ diff --git a/src/images/features/features-bg.jpg b/src/images/features/features-bg.jpg deleted file mode 100644 index 36b7a748d3..0000000000 Binary files a/src/images/features/features-bg.jpg and /dev/null differ diff --git a/src/images/features/features-item-icon-1.svg b/src/images/features/features-item-icon-1.svg deleted file mode 100644 index 2eb2ee14c3..0000000000 --- a/src/images/features/features-item-icon-1.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/images/features/features-item-icon-2.svg b/src/images/features/features-item-icon-2.svg deleted file mode 100644 index 194e788e11..0000000000 --- a/src/images/features/features-item-icon-2.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/images/features/features-item-icon-3.svg b/src/images/features/features-item-icon-3.svg deleted file mode 100644 index b278d8d16f..0000000000 --- a/src/images/features/features-item-icon-3.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/images/icon/icon-arrow.svg b/src/images/icon/icon-arrow.svg new file mode 100644 index 0000000000..2b3fdb5128 --- /dev/null +++ b/src/images/icon/icon-arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icon/icon-burger-menu.svg b/src/images/icon/icon-burger-menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/icon/icon-burger-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-close.svg b/src/images/icon/icon-close.svg new file mode 100644 index 0000000000..29f7735357 --- /dev/null +++ b/src/images/icon/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icons.svg b/src/images/icons/icons.svg new file mode 100644 index 0000000000..59ef0f108f --- /dev/null +++ b/src/images/icons/icons.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/logo/air-logo.svg b/src/images/logo/air-logo.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/images/logo/air-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/logo/dia-logo.svg b/src/images/logo/dia-logo.svg deleted file mode 100644 index a81933296e..0000000000 --- a/src/images/logo/dia-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg index 66daed19a5..ed235fafc6 100644 --- a/src/images/slider/arrow-left.svg +++ b/src/images/slider/arrow-left.svg @@ -1,3 +1,11 @@ - - + + + + + + + + + + diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg index e9ddf85873..315ac0baf4 100644 --- a/src/images/slider/arrow-right.svg +++ b/src/images/slider/arrow-right.svg @@ -1,3 +1,11 @@ - - + + + + + + + + + + diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg deleted file mode 100644 index 98c4188508..0000000000 Binary files a/src/images/slider/slide-img-1.jpg and /dev/null differ diff --git a/src/images/slider/slider-photo-1.png b/src/images/slider/slider-photo-1.png new file mode 100644 index 0000000000..d286b1d0e2 Binary files /dev/null and b/src/images/slider/slider-photo-1.png differ diff --git a/src/images/slider/slider-photo-2.png b/src/images/slider/slider-photo-2.png new file mode 100644 index 0000000000..bd07879cc2 Binary files /dev/null and b/src/images/slider/slider-photo-2.png differ diff --git a/src/images/slider/slider-photo-3.png b/src/images/slider/slider-photo-3.png new file mode 100644 index 0000000000..56c7f88001 Binary files /dev/null and b/src/images/slider/slider-photo-3.png differ diff --git a/src/images/sub-title/sub-title-icon-dark.svg b/src/images/sub-title/sub-title-icon-dark.svg deleted file mode 100644 index 9fcdfa10cd..0000000000 --- a/src/images/sub-title/sub-title-icon-dark.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/sub-title/sub-title-icon-light.svg b/src/images/sub-title/sub-title-icon-light.svg deleted file mode 100644 index 5ec041c15e..0000000000 --- a/src/images/sub-title/sub-title-icon-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/testimonials/quote.svg b/src/images/testimonials/quote.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/testimonials/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg deleted file mode 100644 index d487a51ddf..0000000000 Binary files a/src/images/testimonials/testimonial-ava-1.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-1.png b/src/images/testimonials/testimonial-ava-1.png new file mode 100644 index 0000000000..3dfb15efa0 Binary files /dev/null and b/src/images/testimonials/testimonial-ava-1.png differ diff --git a/src/images/testimonials/testimonial-ava-2.jpg b/src/images/testimonials/testimonial-ava-2.jpg deleted file mode 100644 index 04288940f3..0000000000 Binary files a/src/images/testimonials/testimonial-ava-2.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-2.png b/src/images/testimonials/testimonial-ava-2.png new file mode 100644 index 0000000000..c7c0053de4 Binary files /dev/null and b/src/images/testimonials/testimonial-ava-2.png differ diff --git a/src/images/testimonials/testimonial-ava-3.jpg b/src/images/testimonials/testimonial-ava-3.jpg deleted file mode 100644 index 24c0f2b94b..0000000000 Binary files a/src/images/testimonials/testimonial-ava-3.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-3.png b/src/images/testimonials/testimonial-ava-3.png new file mode 100644 index 0000000000..6daa2be0d3 Binary files /dev/null and b/src/images/testimonials/testimonial-ava-3.png differ diff --git a/src/images/what-we-do/what-we-do-1.jpg b/src/images/what-we-do/what-we-do-1.jpg deleted file mode 100644 index 9481d8eeb2..0000000000 Binary files a/src/images/what-we-do/what-we-do-1.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-2.jpg b/src/images/what-we-do/what-we-do-2.jpg deleted file mode 100644 index 724e65566f..0000000000 Binary files a/src/images/what-we-do/what-we-do-2.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-3.jpg b/src/images/what-we-do/what-we-do-3.jpg deleted file mode 100644 index 7a69cc03f1..0000000000 Binary files a/src/images/what-we-do/what-we-do-3.jpg and /dev/null differ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- 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 1837eb46e2..0000000000 --- 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 3280c3fe10..0000000000 --- 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/apply.scss b/src/styles/blocks/apply.scss new file mode 100644 index 0000000000..49cc0931dc --- /dev/null +++ b/src/styles/blocks/apply.scss @@ -0,0 +1,56 @@ +.apply { + background-color: $c-white; + + @include on-tablet { + background-image: url(/src/images/apply/apply-bg.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 1060px 100%; + } + + @include on-small-desktop { + background-size: auto; + } + + &__container { + @include content-padding-inline; + + display: flex; + flex-direction: column; + align-items: center; + padding-block: 72px; + + @include on-tablet { + max-width: 558px; + padding-block: 200px; + } + + @include on-small-desktop { + max-width: 754px; + } + } + + &__title { + margin-bottom: 24px; + font-size: 44px; + line-height: 120%; + + @include on-tablet { + font-size: 52px; + } + } + + &__text { + margin-block: 0 56px; + + font-size: 22px; + font-weight: 600; + color: $c-text-body; + text-align: center; + + @include on-tablet { + margin-bottom: 64px; + font-size: 24px; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..851b59a6a6 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,26 @@ +.button { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 56px; + border: none; + border-radius: 8px; + + font-family: $font-heading; + font-size: 15px; + font-weight: 600; + color: $c-white; + text-decoration: none; + + background-color: $c-accent; + + @include hover(background-color, $c-primary); + + @include on-tablet { + max-width: 264px; + } +} diff --git a/src/styles/blocks/contact-section.scss b/src/styles/blocks/contact-section.scss new file mode 100644 index 0000000000..8c20651eb8 --- /dev/null +++ b/src/styles/blocks/contact-section.scss @@ -0,0 +1,21 @@ +.contact-section { + border-radius: 15px 15px 0 0; + background-color: $c-bg-dark; + + &__container { + @include page-grid; + @include content-padding-inline; + + row-gap: 80px; + padding-block: 72px 80px; + + @include on-tablet { + row-gap: 120px; + padding-block: 180px 139px; + } + + @include on-small-desktop { + padding-bottom: 104px; + } + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..4ff3c8846c --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,76 @@ +.contact-us { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 7 / -2; + } + + &__title { + margin-bottom: 48px; + color: $c-white; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__info-body { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + gap: 48px; + } + } + + &__block-name { + margin-block: 0 8px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + line-height: 100%; + color: $c-text-label; + text-transform: uppercase; + letter-spacing: 3px; + + &--socials { + margin-bottom: 16px; + } + } + + &__block-info { + font-size: 24px; + font-weight: 600; + color: $c-white; + text-decoration: none; + + @include hover(color, $c-accent); + } + + &__socials-list { + display: flex; + gap: 32px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__socials-link { + color: $c-white; + + @include hover(color, $c-accent); + } + + &__icon { + width: 32px; + height: 32px; + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000000..244ccc3552 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,3 @@ +.container { + @include content-padding-inline; +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..031f6ea9f3 --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,27 @@ +.expertise { + &__photo { + width: 166px; + height: 166px; + border-radius: 16px; + } + + &__title { + margin-block: 32px 16px; + + font-family: $font-heading; + font-size: 20px; + font-weight: 600; + line-height: 140%; + color: $c-text-dark; + + @include on-small-desktop { + margin-top: 40px; + } + } + + &__description { + margin: 0; + font-size: 14px; + color: $c-text-body; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..efc6c1c6cb --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,45 @@ +.footer { + background-color: $c-bg-dark; + + &__container { + display: flex; + flex-direction: column; + gap: 48px; + + @include content-padding-inline; + + padding-bottom: 80px; + + @include on-tablet { + gap: 24px; + } + + @include on-small-desktop { + flex-direction: row; + align-items: center; + justify-content: space-between; + } + } + + &__nav-list { + display: flex; + flex-direction: column; + gap: 24px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + line-height: 1.5; + text-transform: uppercase; + letter-spacing: 3px; + + @include on-tablet { + flex-direction: row; + gap: 40px; + } + + @include on-small-desktop { + gap: 64px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..d13d3a9c19 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,70 @@ +.header { + position: relative; + + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; + + color: $c-white; + + background-color: $c-bg-dark; + + &__content { + display: flex; + flex-direction: column; + height: auto; + min-height: 893px; + + @include on-small-desktop { + min-height: 800px; + } + } + + &__middle { + margin-block: 48px; + + @include on-tablet { + margin-block: 56px; + } + + @include on-small-desktop { + margin: auto 0; + } + } + + &__title { + margin: 0; + + font-family: $font-heading; + font-size: 52px; + font-weight: 600; + line-height: 120%; + letter-spacing: -2px; + + @include on-tablet { + font-size: 64px; + line-height: 68px; + } + + @include on-small-desktop { + max-width: 490px; + } + } + + &__description { + max-width: 362px; + margin-block: 32px 72px; + font-size: 18px; + + @include on-tablet { + margin-block: 24px 56px; + } + + @include on-small-desktop { + margin-block: 32px 83px; + } + } + + &__button { + height: 50px; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..80993ff6b0 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,24 @@ +.icon { + display: block; + + width: 24px; + height: 24px; + + background-position: center; + background-size: cover; + + @include hover(transform, scale(1.2)); + + &--menu { + background-image: url(/src/images/icon/icon-burger-menu.svg); + } + + &--close { + background-image: url(/src/images/icon/icon-close.svg); + } + + &--arrow { + width: 40px; + height: 40px; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..658b004fca --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,12 @@ +.main { + &__content { + display: grid; + row-gap: 120px; + padding-block-start: 120px; + + @include on-tablet { + row-gap: 148px; + padding-block-start: 148px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..4060bc0d31 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,13 @@ +.menu { + box-sizing: border-box; + height: 100vh; + + font-weight: 600; + text-transform: uppercase; + + background-color: $c-bg-menu; + + &__top { + margin-bottom: 32px; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..e48bf9d650 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,23 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 32px; + + margin: 0; + padding: 0; + + font-size: 22px; + line-height: 22px; + list-style: none; + } + + &__link { + font-family: $font-heading; + color: $c-white; + text-decoration: none; + letter-spacing: 2px; + + @include hover(color, $c-accent); + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..f13f335c0c --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,65 @@ +.our-expertise { + border-radius: 30px; + background-color: $c-white; + + &__container { + @include page-grid; + @include content-padding-inline; + + row-gap: 56px; + padding-block: 72px; + + @include on-tablet { + row-gap: 64px; + padding-block: 128px; + } + + @include on-small-desktop { + padding-block: 128px 134px; + } + } + + &__title { + grid-column: 1 / -1; + font-size: 44px; + + @include on-tablet { + font-size: 52px; + } + } + + &__list { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 56px; + + @include on-tablet { + grid-column: 2 / -2; + gap: 72px; + } + + @include on-small-desktop { + grid-column: 1 / -1; + flex-direction: row; + gap: 137px; + } + + @include on-design { + gap: 177px; + } + } + + &__card { + display: flex; + flex-direction: column; + align-items: center; + + padding: 16px; + border-radius: 15px; + + text-align: center; + + @include card-hover; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..673fa9e086 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,35 @@ +.page { + scroll-behavior: smooth; + font-family: 'Open Sans', sans-serif; + font-weight: 400; + line-height: 1.5; + + &__body { + min-width: 320px; + margin: 0; + background-color: $c-bg-page; + + &:has(.menu:target) { + overflow: hidden; + } + } + + &__menu { + pointer-events: none; + + position: fixed; + z-index: 10; + top: 0; + bottom: 0; + left: 0; + right: 0; + transform: translateX(-100%); + + transition: transform 0.3s ease; + + &:target { + pointer-events: all; + transform: translateX(0); + } + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 0000000000..5c55a3c274 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,14 @@ +.section-title { + margin: 0; + + font-family: $font-heading; + font-size: 32px; + font-weight: 600; + color: $c-text-dark; + text-align: center; + + &--align--left { + line-height: 130%; + text-align: left; + } +} diff --git a/src/styles/blocks/send-message.scss b/src/styles/blocks/send-message.scss new file mode 100644 index 0000000000..f34ef0fc9e --- /dev/null +++ b/src/styles/blocks/send-message.scss @@ -0,0 +1,68 @@ +.send-message { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + + &__title { + margin-bottom: 48px; + line-height: 130%; + color: $c-white; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__form-body { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + gap: 48px; + } + } + + &__input { + resize: none; + + padding-bottom: 17px; + border: none; + border-bottom: 1px solid #fff; + + font-family: $font-heading; + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: $c-white; + + -webkit-appearance: none; + appearance: none; + background-color: transparent; + outline: none; + + transition: border-bottom-color 0.3s ease; + + &:hover, + &:focus { + border-bottom-color: #144ed4; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 1000px $c-bg-dark inset; + caret-color: $c-white; + transition: background-color 5000s ease-in-out 0s; + + -webkit-text-fill-color: $c-white; + } + } +} diff --git a/src/styles/blocks/service-card.scss b/src/styles/blocks/service-card.scss new file mode 100644 index 0000000000..807caf42a0 --- /dev/null +++ b/src/styles/blocks/service-card.scss @@ -0,0 +1,79 @@ +.service-card { + grid-column: 1 / -1; + padding: 32px; + border-radius: 16px; + background-color: $c-white; + + @include card-hover; + + &__number { + display: inline-flex; + align-items: center; + justify-content: center; + + box-sizing: border-box; + width: 46px; + height: 24px; + margin-bottom: 24px; + padding: 2px 12px; + border-radius: 23px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 600; + line-height: 100%; + color: $c-accent; + + background-color: $c-bg-page; + } + + &__list { + margin: 0 0 32px; + padding: 0; + + font-size: 13px; + font-weight: 600; + color: $c-text-body; + list-style: none; + } + + &__link { + display: flex; + gap: 16px; + align-items: center; + + font-family: $font-heading; + font-size: 15px; + font-weight: 600; + color: #334563; + text-decoration: none; + } + + &__icon { + @include hover(transform, scale(1.2)); + } + + &--1 { + @include on-tablet { + grid-area: c1; + } + } + + &--2 { + @include on-tablet { + grid-area: c2; + } + } + + &--3 { + @include on-tablet { + grid-area: c3; + } + } + + &--4 { + @include on-tablet { + grid-area: c4; + } + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..637a61c710 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,63 @@ +.services { + &__container { + @include page-grid; + @include content-padding-inline; + + row-gap: 24px; + + @include on-tablet { + grid-template-areas: + 'h h h . . .' + 'h h h c2 c2 c2' + 'c1 c1 c1 c2 c2 c2' + 'c1 c1 c1 c4 c4 c4' + 'c3 c3 c3 c4 c4 c4' + 'c3 c3 c3 . . .'; + gap: 30px; + } + + @include on-small-desktop { + grid-template-areas: + '. . . . . . . . . c2 c2 c2' + 'h h h h . . c1 c1 c1 c2 c2 c2' + 'h h h h . . c1 c1 c1 c3 c3 c3' + 'h h h h . . c4 c4 c4 c3 c3 c3' + '. . . . . . c4 c4 c4 . . .'; + gap: 20px; + } + + @include on-design { + gap: 30px; + } + } + + &__header { + grid-column: 1 / -1; + + @include on-tablet { + grid-area: h; + } + } + + &__label { + margin-block: 0 16px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + line-height: 100%; + color: $c-text-label; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__title--align--left { + margin-bottom: 24px; + text-align: left; + } + + &__description { + font-size: 14px; + color: $c-text-body; + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..2856c60053 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,157 @@ +.slider { + position: absolute; + right: 0; + bottom: 0; + + overflow: hidden; + + width: 100%; + height: 390px; + border-radius: $slider-radius; + + background-color: #000; + + @include on-small-desktop { + top: 120px; + bottom: auto; + + width: 502px; + height: 680px; + border-radius: $slider-radius 0 $slider-radius 0; + } + + @include on-design { + width: 687px; + } + + @include on-large-screens { + width: 1167px; + } + + &__slide { + position: absolute; + inset: 0; + + visibility: hidden; + opacity: 0; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + transition: + opacity $transition-base, + visibility $transition-base; + + &:nth-child(1) { + background-image: url(/src/images/slider/slider-photo-1.png); + } + &:nth-child(2) { + background-image: url(/src/images/slider/slider-photo-2.png); + } + &:nth-child(3) { + background-image: url(/src/images/slider/slider-photo-3.png); + } + + &:first-child { + visibility: visible; + opacity: 1; + } + + &:target { + z-index: 1; + visibility: visible; + opacity: 1; + } + } + + &:has(:target) &__slide:first-child:not(:target) { + visibility: hidden; + opacity: 0; + } + + &__bottom { + position: absolute; + z-index: 3; + right: $slider-padding; + bottom: $slider-padding; + left: $slider-padding; + + display: flex; + flex-direction: column; + gap: $text-gap; + + @include on-small-desktop { + bottom: 48px; + flex-direction: row; + align-items: center; + justify-content: center; + } + + @include on-design { + justify-content: flex-start; + padding-left: 48px; + } + } + + &__controls { + display: flex; + gap: 16px; + } + + &__arrow { + display: flex; + align-items: center; + justify-content: center; + + width: $arrow-size; + height: $arrow-size; + border-radius: 50%; + + text-decoration: none; + + transition: background-color 0.3s ease; + + @media (hover: hover) { + &:hover { + background-color: #f0f0f0; + } + } + + &:focus-visible { + outline: 2px solid $c-white; + outline-offset: 2px; + } + + img { + pointer-events: none; + width: 100%; + height: 100%; + } + } + + &__text { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__label { + margin: 0; + + font-size: 13px; + font-weight: 700; + line-height: 1; + color: $c-white; + text-transform: uppercase; + letter-spacing: 0.2em; + } + + &__description { + max-width: 280px; + margin: 0; + + font-size: 14px; + line-height: 1.5; + color: $c-white; + } +} diff --git a/src/styles/blocks/testimonial-card.scss b/src/styles/blocks/testimonial-card.scss new file mode 100644 index 0000000000..f966876e32 --- /dev/null +++ b/src/styles/blocks/testimonial-card.scss @@ -0,0 +1,158 @@ +.testimonial-card { + display: flex; + flex-direction: column; + align-items: center; + + padding: 32px 42px; + border-radius: 16px; + + font-size: 13px; + text-align: center; + + background-color: $c-white; + + @include card-hover; + + @include on-tablet { + padding-inline: 98px; + } + + @include on-small-desktop { + flex: 1; + min-width: 0; + padding-inline: 48px; + } + + &__avatar { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: 196px; + height: 196px; + + @include on-tablet { + width: 250px; + height: 250px; + } + + @include on-small-desktop { + width: 196px; + height: 196px; + } + + @include on-design { + width: 250px; + height: 250px; + } + + &::before, + &::after { + content: ''; + + position: absolute; + z-index: 1; + transform: rotate(-60deg); + + width: 109px; + height: 44px; + border-radius: 12px; + + background-color: $c-accent; + + @include on-tablet { + width: 139px; + height: 56px; + } + + @include on-small-desktop { + width: 109px; + height: 44px; + } + + @include on-design { + width: 139px; + height: 56px; + } + } + + &::before { + top: 40px; + left: 5px; + } + + &::after { + right: 5px; + bottom: 50px; + } + } + + &__img { + position: relative; + z-index: 2; + width: 109px; + height: 109px; + + @include on-tablet { + width: 140px; + height: 140px; + } + + @include on-small-desktop { + width: 109px; + height: 109px; + } + + @include on-design { + width: 140px; + height: 140px; + } + } + + &__quote { + margin: 24px 0 16px; + font-weight: 600; + color: $c-text-body; + + &::before { + content: ''; + + display: block; + + width: 24px; + height: 24px; + margin: 0 auto 8px; + + background-image: url(/src/images/testimonials/quote.svg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + margin-bottom: 16px; + } + + @include on-small-desktop { + margin-bottom: 8px; + } + } + } + + &__name { + margin: 0 0 4px; + font-weight: 600; + color: $c-text-dark; + } + + &__company { + margin: 0; + + font-family: $font-heading; + font-weight: 700; + line-height: 100%; + color: $c-text-label; + letter-spacing: 3px; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..1cf8540e0a --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,60 @@ +.testimonials { + &__container { + @include page-grid; + @include content-padding-inline; + + row-gap: 48px; + + @include on-tablet { + row-gap: 56px; + } + + @include on-small-desktop { + row-gap: 85px; + } + } + + &__header { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-small-desktop { + grid-column: 1 / 4; + } + } + + &__label { + margin-block: 0 16px; + + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + line-height: 100%; + color: $c-text-label; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__list { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 24px; + + @include on-tablet { + gap: 30px; + } + + @include on-small-desktop { + flex-direction: row; + gap: 20px; + } + + @include on-design { + gap: 30px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..77620956ae --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,83 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-block-start: 20px; + + @include on-small-desktop { + padding-block-start: 48px; + } + + &__start { + display: flex; + gap: 32px; + align-items: center; + } + + &__logo { + display: flex; + + @include hover(transform, scale(1.2)); + } + + &__burger { + @include on-small-desktop { + display: none; + } + } + + &__nav { + display: none; + + @include on-small-desktop { + display: block; + + .nav__list { + flex-direction: row; + gap: 48px; + } + + .nav__link { + font-size: 13px; + letter-spacing: 3px; + } + } + } + + &__button { + position: relative; + + font-family: $font-heading; + font-size: 13px; + font-weight: 700; + color: inherit; + text-decoration: none; + letter-spacing: 3px; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + transform: scaleX(1); + + display: block; + + width: 100%; + height: 2px; + border-radius: 4px; + + background-color: $c-accent; + + transition: transform 0.3s; + } + + @media (hover: hover) { + &:hover::after { + transform: scaleX(0); + } + } + + @include hover(color, $c-accent); + } +} diff --git a/src/styles/blocks/who-we-are.scss b/src/styles/blocks/who-we-are.scss new file mode 100644 index 0000000000..bb7438e1da --- /dev/null +++ b/src/styles/blocks/who-we-are.scss @@ -0,0 +1,34 @@ +.who-we-are { + &__container { + text-align: center; + + @include content-padding-inline; + } + + &__title { + margin-bottom: 24px; + + @include on-tablet { + margin-bottom: 16px; + } + } + + &__description { + margin: 0 auto; + font-size: 22px; + font-weight: 600; + color: $c-text-body; + + @include on-tablet { + font-size: 24px; + } + + @include on-small-desktop { + max-width: 716px; + } + + @include on-design { + max-width: 754px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..a6357e2678 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,26 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@import './utils/variables'; +@import './utils/mixins'; -body { - background: $c-gray; -} +@import 'blocks/container'; +@import 'blocks/button'; +@import 'blocks/header'; +@import 'blocks/page'; +@import 'blocks/icon'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/top-bar'; +@import 'blocks/slider'; +@import 'blocks/main'; +@import 'blocks/section-title'; +@import 'blocks/who-we-are'; +@import 'blocks/expertise'; +@import 'blocks/our-expertise'; +@import 'blocks/services'; +@import 'blocks/service-card'; +@import 'blocks/testimonials'; +@import 'blocks/testimonial-card'; +@import 'blocks/apply'; +@import 'blocks/contact-section'; +@import 'blocks/send-message'; +@import 'blocks/contact-us'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..0000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780dc..0000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffbb..0000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..f9aabf9e56 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,92 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $smalldesktop-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-min-width) { + @content; + } +} + +@mixin on-large-screens { + @media (min-width: $largeScreens-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + max-width: 1150px; + margin-inline: auto; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 150px; + } + + @include on-design { + padding-inline: 227px; + } +} + +@mixin hover($property, $toValue) { + transition: #{$property} 0.3s; + + @media (hover: hover) { + &:hover { + #{$property}: $toValue; + } + } +} + +@mixin card-hover { + transition: + transform 0.3s, + box-shadow 0.3s; + + @media (hover: hover) { + &:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + } + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 24px; + } + + @include on-small-desktop { + --columns: 12; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..3d5d100253 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,22 @@ +$tablet-min-width: 640px; +$smalldesktop-min-width: 1024px; +$desktop-min-width: 1280px; +$design-min-width: 1600px; +$largeScreens-min-width: 2560px; +$font-heading: 'Poppins', sans-serif; +$slider-radius: 30px; +$arrow-size: 32px; +$arrow-gap: 8px; +$slider-padding: 24px; +$text-gap: 16px; +$transition-base: 0.3s ease; +$c-bg-page: #f2f6fa; +$c-bg-menu: #86c3f8; +$c-bg-dark: #2c2c2c; +$c-text-dark: #253757; +$c-text-body: #6c788b; +$c-text-label: #c0cdd7; +$c-white: #fff; +$c-accent: #2060f6; +$c-primary: #144ed4; +