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

src/_data/product.json

@@ -0,0 +1,14 @@
+[
+	{
+		"img": "open_source",
+		"link": "https://t.me/HighLoadChannel/4936"
+	},
+	{
+		"img": "html_academy",
+		"link": "https://t.me/htmlacademy/7915"
+	},
+	{
+		"img": "coding-on-mlut",
+		"link": "https://www.youtube.com/watch?v=ilv-cEOX4TE&t=55s"
+	}
+]

src/_data/service.json

@@ -2,37 +2,43 @@
 	{
 		"title": "Создание сайтов и веб-приложений",
 		"img": "website",
-		"sizeImg": "W250 H170",
+		"width": 250,
+		"height": 170,
 		"text": "Проектируем и верстаем быстрые сайты, лендинги и веб-платформы под ключ."
 	},
 	{
 		"title": "Инвестиции и гранты",
 		"img": "grant",
-		"sizeImg": "W154 H150",
+		"width": 154,
+		"height": 150,
 		"text": "Помогаем стартапам получить инвестиции или грантовую поддержку."
 	},
 	{
 		"title": "Web-демо продукта",
 		"img": "web-demo",
-		"sizeImg": "W250 H170",
+		"width": 250,
+		"height": 170,
 		"text": "Создаём интерактивные модели будущих сервисов для демонстрации клиентам и инвесторам."
 	},
 	{
 		"title": "Юридическая поддержка",
 		"img": "support",
-		"sizeImg": "W145 H170",
+		"width": 145,
+		"height": 170,
 		"text": "Берем на себя договоры и правильное оформление интеллектуальной собственности."
 	},
 	{
 		"title": "Питч",
 		"img": "speech",
-		"sizeImg": "W204 H100",
+		"width": 204,
+		"height": 100,
 		"text": "Готовим питч и репетируем выступления, чтобы зацепить внимание инвесторов."
 	},
 	{
 		"title": "Консалтинг",
 		"img": "consulting",
-		"sizeImg": "W430 H168",
+		"width": 430,
+		"height": 168,
 		"text": "Разбираем слабые места продукта, настраиваем маркетинг и помогаем масштабироваться."
 	}
 ]

src/_data/team.json

@@ -0,0 +1,30 @@
+[
+	{
+		"name": "Валентин Ульянов",
+		"img": "photo1",
+		"profession": "инженер программист, изобретатель",
+		"description": "Имеет профессиональный опыт более десяти лет. Работал фронтенд и бэкенд-разработчиком, а также занимался инфраструктурой и внедрением инженерных практик. Создатель open source фреймворка mlut, аналога Tailwind для вёрстки кастомных сайтов и креативов.",
+		"connection": "yes"
+	},
+	{
+		"name": "Егор Егоров",
+		"img": "Egor_Egorov",
+		"profession": "продуктовый дизайнер",
+		"description": "В индустрии дизайна более 10 лет. Создает удобные интерфейсы и дизайн-системы, проводит исследования, совмещает визуальную эстетику с техническим подходом. Профессиональные навыки: Web Interfaces, Landing Pages, Product UX, Design Systems, Figma, AI tools.",
+		"connection": "yes"
+	},
+	{
+		"name": "Евгения Рахметова",
+		"img": "Evgeniya_Rakhmetova",
+		"profession": "дизайнер интерфейсов",
+		"description": "Проектирует логичные пользовательские сценарии и переводит идеи в готовые к разработке интерфейсы. Фокусируется на структуре, чистоте макетов и точности передаваемых верстальщикам компонентов. Профессиональные навыки: User Flow, Wireframing, UI Kits, Web & Mobile Interfaces, Figma, Design Hand-off.",
+		"connection": "no"
+	},
+	{
+		"name": "Олег Остапчук",
+		"img": "photo4",
+		"profession": "Разработчик",
+		"description": "Имеет профессиональный опыт более десяти лет. Работал фронтенд и бэкенд-разработчиком, а также занимался инфраструктурой и внедрением инженерных практик. Создатель open source фреймворка mlut, аналога Tailwind для вёрстки кастомных сайтов и креативов.",
+		"connection": "no"
+	}
+]

src/_includes/components/card-product.ejs

@@ -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">
+		<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 -All-sr C-$accent900 md_C-$brand_h C-$brand500_a -Ts">
+		Читать полностью
+		<svg class="W24 H24">
+			<use href="/assets/img/icons.svg#arrow-up-right"></use>
+		</svg>
+	</a>
+</div>

src/_includes/components/card-profile.ejs

@@ -0,0 +1,38 @@
+<%
+	let socialLinkVisible;
+	if (it.connection === "yes") {
+		socialLinkVisible = 'Vs-v O1';
+	} else {
+		socialLinkVisible = 'Vs-h O0';
+	}
+%>
+
+<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">
+			<img src="/assets/img/team/<%= it.img %>.png" class="W100p"/>
+		</div>
+		<div class="W100p D-f Jc-c Ai-c Gap4u lg_Gap2u lg_Ps-a lg_T67p lg_L50p lg_Tf lg_-Tr-50p;0 <%= socialLinkVisible %>">
+			<div class="P0.5u">
+				<%- include('./external-link.ejs',{
+					icon: 'telegram',
+					link: `#0`,
+				}) %>
+			</div>
+			<div class="P0.5u">
+				<%- include('./external-link.ejs',{
+					icon: 'mail',
+					link: `#0`,
+				}) %>
+			</div>
+		</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>
+		<span class="Txa-c xxl_Fns4.5u"><%= it.profession %></span>
+		<div class="Flg1 W100p :-nojs_H20u :-nojs_Ovy-h :-nojs_-Gdl0d,$core100;5p,$accent900;100p :-nojs_Bgcl-t :-nojs_C-tp :-nojs_gradient-text">
+			<p class="M0 Txa-c xxl_Fns4.5u"><%= it.description %></p>
+		</div>
+	</div>
+	<button class="btn Mt5u C-$accent900 md_C-$brand_h C-$brand500_a -Ts">Подробнее</button>
+</profile-card>

src/_includes/components/card-service.ejs

@@ -6,11 +6,11 @@
 
 <div class="Ps H100p D-f Fld-c Gap3u P4u;3u md_P5u;4u md_Gap0 C-$accent900 Bgc-$core110 Bd1;s;$accent100 Bdrd2u <%= css.gradient %> Ov-h">
 	<div class="Ps Zi1 D-f Ai-fs Gap6u W100p">
-		<img src="/assets/img/service/<%= it.img %>.svg" class="W68 H62 Fls0 md_D-n" alt="<%= it.title %>"/>
+		<img src="/assets/img/service/<%= it.img %>.svg" class="Fls0 md_D-n" width="68" height="62" alt=""/>
 		<h3 class="M0 Fns4.5u md_Fns6u Fnw600 md_P2.5u"><%= it.title %></h3>
 	</div>
 	<p class="Ps Zi1 M0 Fns4u md_P2.5u"><%= it.text %></p>
 	<div class="Ps Zi1 D-n md_D-f md_Mt6u W100p H100p Jc-c Ai-e">
-		<img src="/assets/img/service/<%= it.img %>-d.svg" class="<%= it.size %>" alt="<%= it.title %>"/>
+		<img src="/assets/img/service/<%= it.img %>-d.svg" width="<%= it.width %>" height="<%= it.height %>" alt=""/>
 	</div>
 </div>

src/_includes/components/external-link.ejs

@@ -1,38 +1,30 @@
 <%
-	const css = {
+	const stylesCss = {
 		width: '',
 		height: '',
 		fill: ''
 	}
 
 	if (it.name === "X") {
-		css.width = "24";
-		css.height = "24";
+		stylesCss.width = "24";
+		stylesCss.height = "24";
 	} else if (it.name === 'Github') {
-		css.width = "26";
-		css.height = "26";
+		stylesCss.width = "26";
+		stylesCss.height = "26";
 	} else {
-		css.width = "28";
-		css.height = "28";
+		stylesCss.width = "28";
+		stylesCss.height = "28";
 	}
 
 	if (it.icon === 'telegram' || it.icon === 'mail') {
-		css.fill = ''
+		stylesCss.fill = ''
 	} else {
-		css.fill = 'Fi-$accent900 Fio1 ^logo:h:_Fi-$brand -Ts'
+		stylesCss.fill = 'Fi-$accent900 Fio1 ^logo:h:_Fi-$brand -Ts'
 	}
 %>
 
-<a
-	href="<%= it.link %>"
-	target="_blank"
-	class="-Ctx-logo Ps W100p D-f Jc-c Ai-c"
->
-	<svg
-		class="<%= css.fill %>"
-		width="<%= css.width %>"
-		height="<%= css.height %>"
-	>
+<a href="<%= it.link %>" target="_blank" class="-Ctx-logo Ps W100p D-f Jc-c Ai-c">
+	<svg class="<%= stylesCss.fill %>" width="<%= stylesCss.width %>" height="<%= stylesCss.height %>">
 		<use href="/assets/img/icons.svg#<%= it.icon %>"></use>
 	</svg>
 </a>