feat: add Product-section, Team-section, Process-section and fix comm… by oostap1985 · Pull Request #2 · mlutcss/agency

oostap1985 · 2026-08-30T17:46:05Z

Привет.
Это еще не конечный результат. Посмотри, пожалуйста, на анимацию в Process секции, это примерно то, что вы хотели?

…ents

mr150 · 2026-09-01T12:40:51Z

Не очевидное название файла, надо более понятное

mr150 · 2026-09-01T12:41:55Z

@@ -0,0 +1,14 @@
+[
+	{
+		"img": "open_source",


Разная нотация названия переменных. Лучше тогда уж везде kebab-case

mr150 · 2026-09-01T12:43:46Z

+		"img": "photo1",
+		"profession": "инженер программист, изобретатель",
+		"description": "Имеет профессиональный опыт более десяти лет. Работал фронтенд и бэкенд-разработчиком, а также занимался инфраструктурой и внедрением инженерных практик. Создатель open source фреймворка mlut, аналога Tailwind для вёрстки кастомных сайтов и креативов.",
+		"connection": "yes"


Это ведь boolean, зачем строка

mr150 · 2026-09-01T12:44:32Z

+		"name": "Олег Остапчук",
+		"img": "photo4",
+		"profession": "Разработчик",
+		"description": "Имеет профессиональный опыт более десяти лет. Работал фронтенд и бэкенд-разработчиком, а также занимался инфраструктурой и внедрением инженерных практик. Создатель open source фреймворка mlut, аналога Tailwind для вёрстки кастомных сайтов и креативов.",


Про себя тоже релевантный текст напиши, потом отредактируем

mr150 · 2026-09-01T12:46:25Z

@@ -0,0 +1,11 @@
+<div class="D-f Fld-c Gap2u">
+	<div class="Bd1;s;$accent100 Bdrd2u Ov-h W242 md_W326 H144 md_H228">


Mnh, вместо H и размеры лучше в u - pixel perfect не нужен

mr150 · 2026-09-01T12:47:26Z

+
+<profile-card class="D-f Fld-c Ai-c Jc-sb Gap3u no-js W242 Mnh375 lg_W305 lg_Mnh390 xxl_W350">
+	<div class="Ps D-f Fld-c Gap1u">
+		<div class="Bdrd100p Ov-h Ojf Ojp-c -Sz100 lg_-Sz140">


object-fit разве не на сам img вешается?

mr150 · 2026-09-01T12:52:54Z

+		const btnText = this.button.textContent;
+		const newText = btnText === 'Свернуть' ? 'Подробнее' : 'Свернуть';
+		this.button.textContent = newText;
+		this.classList.toggle('no-js');


Почему no-js снимается при переключении, а не при инициализации компонента?

Я хотел реализовать удаление стилей при клике на кнопку. Если логически 'no-js' не подходит, написал кастомное состояние 'expanded'. Если не правильно, исправлю.

mr150 · 2026-09-01T15:42:59Z

+%>
+
+<%# Process-section %>
+<process-scroll class="D-f Fld-c Gap2.5u W100p P5u;4u md_Gap10u md_P0;0;0;15u xl_P0;0;0;20u xxl_P0;0;0;25u">


Почему здесь однотипный код не в цикле?

Сейчас композиция заканчивается обрубком. Лучше, чтобы хотя бы хвост был, как перед концом пункта

И на этом этапе не требовалось делать анимацию линий, только скролл. Такое надо на webgl, по идее, потому что на CSS может тормозить

Полностью переделал эту секцию.

mr150 · 2026-09-01T15:52:21Z

@@ -1,38 +1,30 @@
 <%
-	const css = {
+	const stylesCss = {


Все еще не исправлено. Если словарь заканчивается на css - значит это словарь алиасов. А тут совершенно разные по смыслу значения лежат

mr150 · 2026-09-01T16:41:24Z

На мобильном в hero секции нет смысла декоратвное изображение показывать

На квадратном мониторе, в секции "услуги" лучше 2 равные колоники, а то сейчас странно выглядит, что одна шире

mr150 · 2026-09-02T13:04:04Z

 	</ul>
 </section>

+<%# Product-section %>


На десктопе не соответствует макету

mr150 · 2026-09-19T14:28:13Z

+		"name": "first_step",
+		"title": "Анализ на начальном этапе",
+		"text": "Проводим аудит текущего положения дел по чеклисту продукта на ранней стадии",
+		"img": [


Если анимация линий пока не планируется, то зачем их отдельными img делать?

mr150 · 2026-09-19T14:30:52Z

+	<div class="Bd1;s;$accent100 Bdrd2u Ov-h W61u H36u md_W77u md_H57u xxl_W104u xxl_H70u">
+		<img src="/assets/img/product/<%= it.img %>.png" class="-Sz100p Ojf-f"/>
+	</div>
+	<a href="<%= it.url %>" target="_blank" class="D-f Ai-c Gap3u As-fs Fns4u xxl_Fns5u -All-sr C-$accent900 md_C-$brand_h C-$brand500_a -Ts">


Зачем тут -All-sr? Он для списков, как правило или для нативных элементов, где много браузерных стилей

mr150 · 2026-09-19T14:37:08Z

@@ -0,0 +1,20 @@
+<%
+	const question = {


Если это словарь с алиасами, то имя должно быть стандартное (с ...css). Да и если 1 алиас, то лучше просто переменную, без словаря

mr150 · 2026-09-19T19:16:18Z

+	<div class="D-f Fld-c Ai-c Jc-fs Gap4u Flg1 W100p Fns4u Lnh-n Fnst-n C-$accent900">
+		<span class="Fnw700 lg_Fns6u"><%= it.name %></span>
+		<span class="Txa-c xxl_Fns4.5u"><%= it.profession %></span>
+		<div class="Flg1 W100p :-expanded_H20u xxl_:-expanded_H18u :-expanded_Ovy-h :-expanded_-Gdl0d,$core100;5p,$accent900;100p :-expanded_Bgcl-t :-expanded_C-tp :-expanded_gradient-text">


Зачем кастомный стейт, если можно контекст использовать?

Убрал стейт. Сделал контекст (реализовал как "бургер" в header на мобильном), вместо кнопки теперь checkbox и два label. Кастомный компонент теперь не нужен, удалил.

mr150 · 2026-09-19T19:19:05Z

+		</div>
+	</div>
+	<div class="D-f Fld-c Ai-c Jc-fs Gap4u Flg1 W100p Fns4u Lnh-n Fnst-n C-$accent900">
+		<span class="Fnw700 lg_Fns6u"><%= it.name %></span>


Почему не заголовок?

mr150 · 2026-09-19T19:23:11Z

+				<% } %>
+			</ul>
+		</div>
+		<nav class=" lg_Od0">


nav лучше только 1 делать на странице. Он вроде был у нас в хедере

mr150 · 2026-09-19T19:26:55Z

+
+	toggleCard() {
+		const btnText = this.button.textContent;
+		const newText = btnText === 'Свернуть' ? 'Подробнее' : 'Свернуть';


Текстовые литералы в коде не оставляем. Лучше делать словарь с ними, в статическом свойстве, например

mr150 · 2026-09-19T19:27:19Z

+		this.prevBtn = this.querySelector('.prev');
+		this.nextBtn = this.querySelector('.next');
+
+		if (!this.track || !this.prevBtn || !this.nextBtn) {


Снова бесполезные проверки

mr150 · 2026-09-19T19:28:22Z

+
+	_updateButtonsVisibility() {
+		const maxScrollLeft = this.track.scrollWidth - this.track.clientWidth;
+		// this.prevBtn.classList.toggle('O0', this.track.scrollLeft <= 0);


Комменты не оставляем

mr150 · 2026-09-19T19:31:05Z

-				logo.style.visibility = 'hidden';
-			}, 200);
+		if (entry.target === heroSection) {
+			visibility.hero = entry.isIntersecting;


А почему не использовать сразу просто 1 флаг anyVisible?

mr150 · 2026-09-19T19:31:39Z

 	--ml-gradient60: rgba(239, 67, 139, 0.20);
+	--ml-gradient65: rgba(239, 67, 139, 0.50);
+
+	scroll-padding-top: var(--ml-headerH);


Для всех ссылок - выглядит опасно

mr150 · 2026-09-19T19:34:44Z

+	}
+
+	scrollByCard(direction) {
+		const slide = this.track.querySelector('.scroll-slide');


Это каждый раз надо делать?

mr150 · 2026-09-19T19:35:32Z

+		}
+
+		const gap = parseFloat(getComputedStyle(this.track).columnGap || 0);
+		const cardWidth = slide.getBoundingClientRect().width;


И это? Когда так берем размеры - страница пересчитывается

mr150 · 2026-09-19T19:38:47Z

+	};
+%>
+<%# start-section %>
+<section class="Ps W100p D-f Fld-c Ai-c P5u;0;10u md_P10u;0;15u xxl_P20u;0;20u">


В section обязательно должен быть h-заголовок. Если по видимому контенту ничего не подходит, то надо делать скрытый

mr150 · 2026-09-19T19:39:40Z

+	active-css="Bgc-$brand100"
+>
+	<div class="D-f Ai-c Jc-sb Gap2u W100p">
+		<span class="<%= question.step %>"><%= it.title %></span>


Заголовок?

mr150 · 2026-09-19T19:41:30Z

+		blurV: 'Ps-a W12p H100p T0 Bgc-$decor140 Ft -Blr35'
+	};
+%>
+<%# start-section %>


Некорректное название секции, пусть и это и коммент

mr150 · 2026-09-19T19:41:44Z

+
+
+<%
+	const startStyles = {


Некорректный нейминг словарей с алиасами

mr150 · 2026-09-19T19:53:44Z

+>
+	<div class="D-f Ai-c Jc-sb Gap2u W100p">
+		<span class="<%= question.step %>"><%= it.title %></span>
+		<button class="btn arrow-btn Fls0">


Надо сделать, чтобы для открытия/закрытия можно было нажимать на весь компонент, а не только на кнопку

mr150 · 2026-09-19T19:54:02Z


 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="Scb-s -HeaderH10.5u md_-HeaderH23u">


Suggested change

<html lang="en" class="Scb-s -HeaderH10.5u md_-HeaderH23u">

<html lang="ru" class="Scb-s -HeaderH10.5u md_-HeaderH23u">

mr150 · 2026-09-19T19:55:15Z

+		<div class="<%= startStyles.blurG %> B-1p md_B-4p"></div>
+		<div class="D-n md_D <%= startStyles.blurV %> L0"></div>
+		<div class="D-n md_D <%= startStyles.blurV %> R0"></div>
+		<img src="assets/img/rocket2.svg" class="md_D-n Mt2u W100p H-a"/>


Правильная адаптивность изображений через <picture> делается

mr150 · 2026-09-19T19:56:41Z

+</section>
+
+<%# Process-section %>
+<process-scroll class="D-f Fld-c Gap2.5u W100p P5u;4u md_Gap10u md_P0;0;0;15u xl_P0;0;0;20u xxl_P0;0;0;25u">


Возможно специфика моего тачпада, но как будто через раз захватывает скролл, особенно если скролить наверх

mr150 · 2026-09-19T19:57:48Z

+		"link": "https://t.me/htmlacademy/7915"
+	},
+	{
+		"img": "coding-on-mlut",


Это изображение в списке ломается, в плане соотношения сторон. object-fit: cover - есть?

feat: add Product-section, Team-section, Process-section and fix comm…

dcc4902

…ents

oostap1985 requested a review from mr150 August 30, 2026 17:46

mr150 reviewed Sep 1, 2026

View reviewed changes

Comment thread src/assets/script/process-scroll.js

mr150 reviewed Sep 1, 2026

View reviewed changes

mr150 requested changes Sep 1, 2026

View reviewed changes

mr150 reviewed Sep 1, 2026

View reviewed changes

mr150 reviewed Sep 2, 2026

View reviewed changes

oostap1985 added 2 commits September 7, 2026 18:41

fix(main-page): corrections after review

e40446f

feat(main-page): add FAQ, Start sections and footer

4f2afdf

oostap1985 requested a review from mr150 September 12, 2026 12:28

mr150 reviewed Sep 19, 2026

View reviewed changes

mr150 requested changes Sep 19, 2026

View reviewed changes

		@@ -0,0 +1,11 @@
		<div class="D-f Fld-c Gap2u">
		<div class="Bd1;s;$accent100 Bdrd2u Ov-h W242 md_W326 H144 md_H228">

	<html lang="en" class="Scb-s -HeaderH10.5u md_-HeaderH23u">
	<html lang="ru" class="Scb-s -HeaderH10.5u md_-HeaderH23u">

Conversation

oostap1985 commented Aug 30, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!