feat: change Catalog title to new TitleArrowLink component

src/components/card-catalog-link/card-catalog-link.module.scss

@@ -19,33 +19,10 @@
 	}
 }
 
-.card-catalog-link__title-container_type_bento-grid {
-	margin-bottom: 28px;
-}
-
 .card-catalog-link__title-container_type_single-row {
 	margin-bottom: 16px;
 }
 
-.card-catalog-link__title {
-	margin: 0;
-	color: #1a1a1a;
-
-	@media screen and (width <= 768px) {
-		font-size: 24px;
-	}
-}
-
-.card-catalog-link__arrow {
-	width: 20px;
-	height: 32px;
-	margin-top: auto;
-	background-position: center;
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-image: url('@images/chevron-right.svg');
-}
-
 .card-catalog-link__list-single {
 	margin: 0;
 	padding: 0;

src/components/card-catalog-link/index.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import clsx from 'clsx';
 import ProductCard from '../product-card';
+import TitleArrowLink from '@components/title-arrow-link';
 import styles from './card-catalog-link.module.scss';
-import { Link } from 'react-router-dom';
 import { Product } from '@services/generated-api/data-contracts';
 
 type CardCatalogLinkProps = {
@@ -20,10 +20,7 @@ function CardCatalogLink({ title, array, type, category }: CardCatalogLinkProps)
 					styles[`card-catalog-link__title-container_type_${type}`]
 				}`}
 			>
-				<Link to={`/catalog/${category}`} className={styles.link}>
-					<h2 className={styles['card-catalog-link__title']}>{title}</h2>
-				</Link>
-				<span className={styles['card-catalog-link__arrow']} />
+				<TitleArrowLink title={title} link={`/catalog/${category}`} type="catalogPage" />
 			</div>
 			<ul
 				className={clsx(

src/components/title-arrow-link/index.tsx

@@ -1,18 +1,32 @@
 import React from 'react';
+import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 import ArrowIcon from '@images/chevron-right-no-stroke.svg?react';
 import styles from './title-arrow-link.module.scss';
 
 type TitleArrowLinkProps = {
 	title: string;
 	link: string;
+	type?: string;
 };
 
-const TitleArrowLink: React.FC<TitleArrowLinkProps> = ({ title, link }) => {
+const TitleArrowLink: React.FC<TitleArrowLinkProps> = ({ title, link, type }) => {
 	return (
 		<Link to={link} className={styles.link}>
-			<p className={styles.link__title}>{title}</p>
-			<ArrowIcon className={styles.link__arrow} />
+			<p
+				className={clsx(
+					styles.link__title,
+					type === 'catalogPage' && styles.link__title_type_smallFont
+				)}
+			>
+				{title}
+			</p>
+			<ArrowIcon
+				className={clsx(
+					styles.link__arrow,
+					type === 'catalogPage' && styles.link__arrow_type_small
+				)}
+			/>
 		</Link>
 	);
 };

src/components/title-arrow-link/title-arrow-link.module.scss

@@ -15,6 +15,12 @@
 	}
 }
 
+.link__title_type_smallFont {
+	@media screen and (width <= 768px) {
+		font-size: 18px;
+	}
+}
+
 .link__arrow {
 	width: 20px;
 	height: 32px;
@@ -30,6 +36,13 @@
 	}
 }
 
+.link__arrow_type_small {
+	@media screen and (width <= 768px) {
+		width: 14px;
+		height: 20px;
+	}
+}
+
 .link {
 	text-decoration: none;
 	display: flex;