Catalog

[Lia-k]

• DEMO LINK

• TEST REPORT LINK

• All components follow BEM and use SCSS

• Repeated sizes and special colors are put to variables

• Grid is used for the columns

• Cards are shown in 1, 2, 3, or 4 columns based on screen resolution

• All changes on :hover are smooth

• Code follows all the Code Style Rules ❗️

[mateacademy-ai-mentor]

Review Summary

I am approving your solution because all core functional requirements and checklist items are implemented correctly and there are no remaining critical blockers. The catalog layout, semantic structure (<header>, <nav>, <main>, <article>), responsive grid with 1/2/3/4 columns, fixed 200px card width, and required gaps/paddings are all in place and match the spec. Hover behaviors for cards, titles, nav links, and the Buy button are smooth with 300ms transitions, and the required data-qa attributes and is-active nav state are correctly set. Your SCSS structure with partials and utils/variables.scss now has the correct import order, so variables are defined before use, satisfying [CHECKLIST ITEM #2].

The only remaining point is a minor, non-blocking BEM nuance: your logo is implemented as a standalone block inside the header; some teams might prefer header__logo as an element for stricter BEM consistency, but this is not a required change for this task. If your mentors favor very strict BEM, you could optionally rename the class to header__logo and adjust _logo.scss accordingly. Overall, you’ve done a solid job aligning with both the functional description and the checklist, so this solution is accepted.

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Footnotes

1. Rate AI review example ↩

[mateacademy-ai-mentor]

logo is currently a standalone block (class="logo" with styles in _logo.scss), but the requirement "All components follow BEM and use SCSS" usually implies using elements for parts of a block like header. Consider renaming this to something like header__logo (and adjusting the SCSS) so the header structure is fully BEM-consistent.

[mateacademy-ai-mentor]

$border, $main-color, and other variables are used here, but variables.scss is imported after the block partials in index.scss. This will cause SCSS compilation errors (undefined variables) and violates checklist item #2: "Repeated sizes and special colors are put to variables" because the variables file must be loaded before use. Import utils/variables before importing any blocks.

[mateacademy-ai-mentor]

Same issue as in _card.scss: this file relies on variables declared in variables.scss, but that file is imported later in index.scss. Reorder your imports so that @import 'utils/variables'; comes before @import 'blocks/cards'; and other blocks, otherwise the build will fail with undefined variables, violating the requirement that the code works and follows the provided code style rules.