standard slider & card

src/global-styles/mixins.scss

@@ -70,3 +70,17 @@
 		outline: none;
 	}
 }
+
+@mixin flagSeen {
+	display: flex;
+	align-items: center;
+	font-weight: 400;
+	font-size: 12px;
+	line-height: 30px;
+	color: #B2C5B7;
+
+	svg {
+		display: block;
+		margin-left: 9px;
+	}
+}

src/global-styles/variables.scss

@@ -19,6 +19,9 @@ $red: #FF0000;
 $brick: #C94C0A;
 $sienna: #D8960D;
 
+$standardCard: #BDD6DE;
+$standardCardSeen: #f8f8f8;
+
 $font: 'SF Pro Text', Arial, sans-serif;
 $font-mobile: 'Helvetica Neue', Arial, sans-serif;
 

src/view/cmp/card/card.scss

@@ -135,17 +135,7 @@ button.card__button {
 }
 
 .card__note {
-	display: flex;
-	align-items: center;
-	font-weight: 400;
-	font-size: 12px;
-	line-height: 30px;
-	color: #B2C5B7;
-}
-
-.card__note svg {
-	display: block;
-	margin-left: 9px;
+	@include flagSeen;
 }
 
 .card {

src/view/cmp/infoCard/InfoCard.jsx

 import './infoCard.scss';
 import Button from "../button/Button";
 import ProductCard from '../productCard/ProductCard.jsx';
-import StandardCard from '../standardCard/StandardCard.jsx';
+import PaginationSlider from '../paginationSlider/PaginationSlider.jsx';
+
 import Back from '/svg/arr-back.svg';
 import Arr from '/svg/arr.svg';
 
@@ -19,7 +20,7 @@ const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => {
         </div>
         <div className="info-card__body">
             {/*<ProductCard/>*/}
-            <StandardCard/>
+            <PaginationSlider/>
         </div>
         <div className="info-card__footer">
             <Button class={"button info-card__link"}><Back width="17" height="11"/><span>Предыдущая карточка</span></Button>

src/view/cmp/paginationSlider/PaginationSlider.jsx

+import './paginationSlider.scss';
+import StandardCard from "../standardCard/StandardCard.jsx";
+import ArrPrev from '/svg/arrow_active.svg';
+import ArrNext from '/svg/arrow_active-back.svg';
+import Eye from '/svg/eye.svg';
+
+const PaginationSlider = D.declare('view.cmp.PaginationSlider', () => {
+    return <div class="pagination-slider">
+        <div className="pagination-slider__flag">
+            <span>Просмотрена</span>
+            <Eye width="20" height="13"/>
+        </div>
+        <ul className="pagination-slider__bullets">
+            <li>
+                <button className="pagination-slider__bullet pagination-slider__bullet--seen" type="button"></button>
+            </li>
+            <li>
+                <button className="pagination-slider__bullet pagination-slider__bullet--seen" type="button"></button>
+            </li>
+            <li>
+                <button className="pagination-slider__bullet pagination-slider__bullet--seen pagination-slider__bullet--current" type="button"></button>
+            </li>
+            <li>
+                <button className="pagination-slider__bullet" type="button"></button>
+            </li>
+            <li>
+                <button className="pagination-slider__bullet" type="button"></button>
+            </li>
+        </ul>
+        <button className={D.cls(
+            'button',
+            'button--round',
+            'pagination-slider__control',
+            'pagination-slider__control--prev'
+        )} type="button"
+            aria-label="Показать предыдущую карточку">
+            <ArrPrev width="14" height="12"/>
+        </button>
+        <button className={D.cls(
+            'button',
+            'button--round',
+            'pagination-slider__control',
+            'pagination-slider__control--next'
+        )} type="button"
+                aria-label="Показать следующую карточку">
+            <ArrNext width="14" height="12"/>
+        </button>
+        <div className="pagination-slider__scroller">
+            <div className="pagination-slider__wrapper">
+                <div className="pagination-slider__item">
+                    <StandardCard/>
+                </div>
+            </div>
+        </div>
+    </div>
+})
+
+export default PaginationSlider;
+export {PaginationSlider};

src/view/cmp/paginationSlider/paginationSlider.scss

+.pagination-slider {
+	position: relative;
+	padding: 5px 46px 20px;
+}
+
+.pagination-slider__scroller {
+	margin: 0 auto;
+	padding: 0 86px;
+	width: 290px;
+}
+
+.pagination-slider__item {
+	display: flex;
+	flex-direction: column;
+}
+
+.pagination-slider__flag {
+	@include flagSeen;
+	position: absolute;
+	top: 16px;
+	left: 32px;
+}
+
+.pagination-slider__bullets {
+	@include list-reset;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 8px;
+	max-width: 100%;
+}
+
+.pagination-slider__bullets li {
+	flex: none;
+	margin: 15px 7.5px 7px;
+}
+
+.pagination-slider__bullet {
+	@include btn-reset;
+	@include hover;
+	position: relative;
+	display: block;
+	box-sizing: border-box;
+	width: 15px;
+	height: 15px;
+	border: 2px solid $accent-main;
+	border-radius: 50%;
+}
+
+.pagination-slider__bullet::after {
+	content: "";
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	transform: translateY(4px) translateX(-50%);
+	width: 15px;
+	height: 2px;
+	background-color: $text-main;
+	border-radius: 2px;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+}
+
+.pagination-slider__bullet--seen {
+	background-color: $accent-main;
+}
+
+.pagination-slider__bullet--current::after {
+	opacity: 1;
+}
+
+.pagination-slider__control {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%) translateY(14px);
+}
+
+.pagination-slider__control--prev {
+	left: 50%;
+	margin-left: -231px;
+}
+
+.pagination-slider__control--next {
+	right: 50%;
+	margin-right: -231px;
+}

src/view/cmp/standardCard/StandardCard.jsx

+import 'standardCard.scss';
 import Format from '../../cmp/format/Format.jsx';
 
 const StandardCard = D.declare('view.cmp.StandardCard', () => {

src/view/cmp/standardCard/standardCard.scss

+.standard-card {
+	flex-grow: 1;
+	box-sizing: border-box;
+	padding: 10px 10px 30px;
+	width: 290px;
+	min-height: 400px;
+	color: $text-main;
+	background-color: $standardCard;
+	border-radius: 8px;
+}
+
+.standard-card--seen {
+	background-color: $standardCardSeen;
+}
+
+.standard-card__image {
+	margin-bottom: 10px;
+	width: 100%;
+	height: 161px;
+	background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 47.4%);
+	border-radius: 6px;
+	overflow: hidden;
+}
+
+.standard-card__image img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+}
+
+.standard-card__text {
+	@include bodyText;
+	padding: 5px;
+}