category card added

src/view/cmp/categoryCard/CategoryCard.jsx

+import './categoryCard.scss';
+
+const CategoryCard = D.declare('view.cmp.CategoryCard', () => {
+    return <div class="category-card">
+        <div className="category-card__body">
+            <div className="category-card__image">
+                <img src="/uploads/images/pict1.jpg" alt=""/>
+            </div>
+            <h3 className="category-card__title">Топ-35</h3>
+        </div>
+        <div className="category-card__footer">
+            <p>Карточек: <b>35</b></p>
+            <p>Просмотрено: <em>3</em>&nbsp;|&nbsp;<i>32</i></p>
+        </div>
+    </div>
+})
+
+export default CategoryCard;
+export {CategoryCard};

src/view/cmp/categoryCard/categoryCard.scss

+.category-card {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	box-sizing: border-box;
+	width: 190px;
+	min-height: 230px;
+	max-width: 100%;
+	background-color: $bg-main;
+	border: 1px solid transparent;
+	border-radius: 8px;
+	box-shadow: 5px 0 30px 0 #CECECE;
+	transition: all 0.3s ease;
+	cursor: pointer;
+
+	@media (max-width: $mobile) {
+		width: 160px;
+		min-height: 210px;
+	}
+
+	&:hover,
+	&:focus {
+		border-color: $accent-main;
+	}
+
+	&:active {
+		box-shadow: 0 0 20px 0 rgba(#CECECE, 0.5);
+	}
+}
+
+.category-card__body {
+	margin-bottom: auto;
+	padding: 10px 10px 0;
+	text-align: center;
+}
+
+.category-card__image {
+	position: relative;
+	margin-bottom: -3px;
+	width: 100%;
+	height: 110px;
+	background-color: #DFDFDF;
+	background-image: url("/uploads/images/no_picture.jpg");
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	border-radius: 6px;
+	overflow: hidden;
+
+	@media (max-width: $mobile) {
+		margin-bottom: 0;
+		height: 90px;
+	}
+}
+
+.category-card__image img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+}
+
+.category-card__title {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin: 8px auto;
+	max-width: 120px;
+	min-height: 34px;
+	text-align: center;
+	font-weight: 700;
+	font-size: 16px;
+	line-height: 17px;
+	color: $text-main;
+	word-break: break-word;
+}
+
+.category-card__footer {
+	@include caption;
+	padding: 7px 10px 16px;
+	color: #828282;
+	border-top: 1px solid #e0e0e0;
+
+	@media (max-width: $mobile) {
+		margin-top: -3px;
+		padding: 15px 10px 8px;
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 17px;
+		letter-spacing: 0.01em;
+	}
+}
+
+.category-card__footer p {
+	margin: 0 0 3px;
+}
+
+.category-card__footer p:last-child {
+	margin-bottom: 0;
+}
+
+.category-card__footer b {
+	font-weight: 500;
+	color: $text-main;
+
+	@media (max-width: $mobile) {
+		font-weight: 400;
+	}
+}
+
+.category-card__footer em {
+	font-style: normal;
+	color: $accent-main;
+}
+
+.category-card__footer i {
+	font-style: normal;
+	color: $red;
+}
+

src/view/cmp/infoCard/infoCard.scss

@@ -19,6 +19,10 @@
 	@include title;
 	margin: 0 0 5px;
 	text-align: center;
+
+	@media (max-width: $mobile) {
+		text-align: left;
+	}
 }
 
 .info-card__category {
@@ -32,6 +36,7 @@
 
 	@media (max-width: $mobile) {
 		margin-bottom: 17px;
+		text-align: left;
 		font-size: 16px;
 		line-height: 20px;
 		letter-spacing: 0.15px;

src/view/cmp/productCard/productCard.scss

@@ -52,7 +52,7 @@
 }
 
 .product-card__list {
-	max-width: calc(100% - 350px);
+	max-width: calc(100% - 380px);
 
 	@media (max-width: $mobile) {
 		box-sizing: border-box;

src/view/page/index.jsx

@@ -13,6 +13,8 @@ export {InfoPage} from "./product/InfoPage";
 
 export {QuizPage} from "./quiz/QuizPage";
 
-export {ChooseType} from "./test/demo/ChooseType"
-export {WelcomeDemoFinal} from "./test/demo/WelcomeDemoFinal"
-export {WelcomeDemoFinalLastNotification} from "./test/demo/WelcomeDemoFinalLastNotification"
\ No newline at end of file
+export {ChooseType} from "./test/demo/ChooseType";
+export {WelcomeDemoFinal} from "./test/demo/WelcomeDemoFinal";
+export {WelcomeDemoFinalLastNotification} from "./test/demo/WelcomeDemoFinalLastNotification";
+
+export {KnowledgeBasePage} from './knowledge/KnowledgeBasePage';

src/view/page/knowledge/KnowledgeBasePage.jsx

+import ArrActive from "/svg/arrow_active.svg";
+import CategoryCard from '../../cmp/categoryCard/CategoryCard.jsx';
+
+const KnowledgeBasePage = D.declare('view.page.KnowledgeBasePage', () => {
+    return <div class="info-page">
+        <div className="info-page__wrapper">
+            <h1 className="info-page__headline">База знаний</h1>
+            <h2 className="info-page__title">Категории</h2>
+            <div className="info-page__inner">
+                <ul className="info-page__categories">
+                    {(() => {
+                        var out = [];
+                        var el;
+                        for (var i = 0; i < 30; i++) {
+
+                            el = <li className="info-page__category"><CategoryCard/></li>;
+
+                            out.push(el);
+                        }
+                        return out;
+                    })()}
+                    {/*<li className="info-page__category">*/}
+                    {/*<CategoryCard/>*/}
+                    {/*</li>*/}
+                </ul>
+            </div>
+        </div>
+    </div>
+})
+
+export default KnowledgeBasePage;
+export {KnowledgeBasePage};

src/view/page/product/infoPage.scss

@@ -66,3 +66,88 @@
 		padding: 0;
 	}
 }
+
+.info-page__headline {
+	@include title;
+	margin: 0 0 24px;
+	text-align: center;
+
+	@media (max-width: $mobile) {
+		margin: -29px 0 6px;
+		padding-left: 10px;
+		text-align: left;
+		font-weight: 700;
+		font-size: 20px;
+		line-height: 25px;
+	}
+}
+
+.info-page__title {
+	@include headline;
+	margin: 0 0 20px;
+	text-align: center;
+
+	@media (max-width: $mobile) {
+		margin-bottom: 7px;
+		padding-left: 10px;
+		text-align: left;
+		font-weight: 500;
+		font-size: 16px;
+		line-height: 20px;
+		letter-spacing: 0.15px;
+	}
+}
+
+.info-page__inner {
+	display: flex;
+	flex-direction: column;
+	margin: 0 auto;
+	width: 1000px;
+	max-width: 100%;
+}
+
+.info-page__categories {
+	@include list-reset;
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0 -25px;
+	width: calc(100% + 240px);
+
+	@media (max-width: 1509px) {
+		align-self: center;
+		margin: 0;
+		width: 1200px;
+	}
+
+	@media (max-width: 1260px) {
+		width: 960px;
+	}
+
+	@media (max-width: 1030px) {
+		width: 720px;
+	}
+
+	@media (max-width: 790px) {
+		width: 480px;
+	}
+
+	@media (max-width: $mobile) {
+		align-self: auto;
+		margin-left: -10px;
+		width: calc(100% + 20px);
+	}
+}
+
+.info-page__category {
+	display: flex;
+	flex-direction: column;
+	margin: 25px;
+
+	@media (max-width: $mobile) {
+		margin: 10px;
+	}
+
+	@media (max-width: 359px) {
+		width: calc(50% - 20px);
+	}
+}