adaptive shop page, update card, some fix some component

src/app/styles/nextui.scss

@@ -2,4 +2,9 @@
 	textarea {
 		background: none;
 	}
+}
+
+[role="tooltip"] {
+	pointer-events: none;
+	user-select: none;
 }

src/app/styles/variables.scss

@@ -7,6 +7,10 @@
 	--navbar-height-mobile: 60px;
 	--navbar-height-search-mobile: 70px;
 
+	// Colors
+	--color-ozon-rgb: 0, 91, 255;
+	--color-yandex-rgb: 254, 212, 43;
+
 	// z Indexes
 	--z-index-space: -30;
 	--z-index-title-heading: -25;

src/shared/assets/icon/Review.jsx

@@ -0,0 +1,22 @@
+export const ReviewIcon = ({
+	color = 'var(--color-main-inverted)',
+	stroke = 'none',
+	...props
+}) => (
+	<svg
+		width='24'
+		height='24'
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<path
+			d='M12 21C13.78 21 15.5201 20.4722 17.0001 19.4832C18.4802 18.4943 19.6337 17.0887 20.3149 15.4442C20.9961 13.7996 21.1743 11.99 20.8271 10.2442C20.4798 8.49836 19.6226 6.89472 18.364 5.63604C17.1053 4.37737 15.5016 3.5202 13.7558 3.17294C12.01 2.82567 10.2004 3.0039 8.55585 3.68509C6.91131 4.36628 5.50571 5.51983 4.51677 6.99987C3.52784 8.47991 3 10.22 3 12C3 13.488 3.36 14.891 4 16.127L3 21L7.873 20C9.109 20.64 10.513 21 12 21Z'
+			fill={color}
+			stroke={stroke}
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/shared/assets/icon/Star.jsx

@@ -0,0 +1,16 @@
+export const StarIcon = ({ color = '#FFD542', stroke = 'none', ...props }) => (
+	<svg
+		width='24'
+		height='24'
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		{...props}
+	>
+		<path
+			d='M15.4429 7.91769L15.5538 8.10803L15.7691 8.15467L21.1968 9.33061C21.1969 9.33062 21.1969 9.33063 21.1969 9.33064C21.325 9.35849 21.4435 9.41941 21.5407 9.50733C21.6379 9.59528 21.7104 9.70717 21.7509 9.83186C21.7914 9.95655 21.7985 10.0897 21.7715 10.218C21.7445 10.3462 21.6844 10.4651 21.5971 10.5629C21.5971 10.5629 21.5971 10.563 21.597 10.563L17.8971 14.7039L17.7503 14.8682L17.7725 15.0874L18.3325 20.6124L18.3325 20.6125C18.3458 20.7431 18.3246 20.8748 18.271 20.9946C18.2174 21.1143 18.1334 21.2179 18.0272 21.2951C17.9211 21.3722 17.7966 21.4201 17.6661 21.434C17.5356 21.448 17.4038 21.4275 17.2837 21.3745L17.2837 21.3745L12.2016 19.1345L12 19.0456L11.7983 19.1345L6.71632 21.3745L6.71623 21.3745C6.59618 21.4275 6.46434 21.448 6.33388 21.434C6.20342 21.4201 6.0789 21.3722 5.97275 21.2951C5.8666 21.2179 5.78254 21.1143 5.72897 20.9946C5.67539 20.8748 5.65417 20.7431 5.66743 20.6125L5.66744 20.6124L6.22744 15.0874L6.24966 14.8682L6.10279 14.7038L2.40279 10.5638L2.40266 10.5637C2.3152 10.4659 2.25491 10.3469 2.22783 10.2185C2.20074 10.0901 2.2078 9.95691 2.24831 9.83212C2.28881 9.70734 2.36133 9.59536 2.45864 9.50737C2.55595 9.41938 2.67464 9.35845 2.80286 9.33067L8.23086 8.15467L8.44614 8.10803L8.55702 7.91769L11.352 3.11976C11.352 3.11973 11.352 3.11971 11.352 3.11969C11.4181 3.00641 11.5126 2.91243 11.6263 2.8471C11.74 2.78176 11.8688 2.74738 12 2.74738C12.1311 2.74738 12.26 2.78176 12.3737 2.8471C12.4874 2.91244 12.582 3.00645 12.648 3.11976L15.4429 7.91769Z'
+			fill={color}
+			stroke={stroke}
+		/>
+	</svg>
+);

src/shared/const/navigationPanel.ts

@@ -18,20 +18,20 @@ export const NavigationPanelData: NavigationPanelLinks = {
 		image: '/images/icons/home.svg',
 		alt: 'Иконка главной страницы',
 		title: 'Главная',
-		description: 'Очень крутой текст',
-	},
-	game: {
-		to: '/', // game
-		image: '/images/icons/play.svg',
-		alt: 'Иконка главной страницы',
-		title: 'Играть',
-		description: 'Зарабатывай виртуальную валюту на скидки',
+		description: 'Коротко про нас',
 	},
 	shop: {
-		to: '/', // shop
+		to: '/shop/',
 		image: '/images/icons/cart.svg',
 		alt: 'Иконка главной страницы',
 		title: 'Магазин',
-		description: 'Перейти на страницу магазина',
+		description: 'Найди свой подарок!',
+	},
+	favorites: {
+		to: '/favorites/',
+		image: '/images/icons/heart.svg',
+		alt: 'Иконка главной страницы',
+		title: 'Избранное',
+		description: 'Ваши сохранённые товары',
 	},
 };

src/shared/types.ts

@@ -6,3 +6,23 @@ export enum Theme {
 	LIGHT = 'light',
 	DARK = 'dark',
 }
+
+// export enum Market {
+// 	OZON = 'Ozon',
+// 	YANDEX = 'Yandex Market',
+// }
+
+export type MarketType = 'ozon' | 'yandex';
+
+export const Market = {
+	ozon: {
+		name: 'Ozon',
+		color: 'var(--color-ozon-rgb)',
+		image: 'ozon.svg',
+	},
+	yandex: {
+		name: 'Yandex Market',
+		color: 'var(--color-yandex-rgb)',
+		image: 'yandex-market.svg',
+	},
+};

src/shared/ui/Button/Button.module.scss

@@ -112,6 +112,7 @@
 		display: flex;
 		gap: 7px;
 		align-items: center;
+		justify-content: center;
 		background: var(--bg-noise), rgb(var(--color-main-rgb), .25);
 		border: 1px solid var(--color-border);
 		border-radius: inherit;
@@ -445,11 +446,12 @@
 
 		&:hover,
 		&.selected {
-			color: rgba(var(--hover-color-rgb), 1);
-			background: rgb(var(--hover-color-rgb), .1);
-			border: 1px solid rgba(var(--hover-color-rgb), .25);
+			// color: rgba(var(--hover-color-rgb), 1);
+			// background: rgb(var(--hover-color-rgb), .1);
+			// border: 1px solid rgba(var(--hover-color-rgb), .25);
 
 			.layerInner {
+				background: var(--bg-noise), rgb(var(--hover-color-rgb), .1);
 				border: 1px solid rgba(var(--hover-color-rgb), 1);
 			}
 		}

src/shared/ui/Card/Card/Card.module.scss

@@ -7,12 +7,15 @@
 	gap: 10px;
 	width: 100%;
 	max-width: 290px;
+	color: rgba(var(--color-text), 1);
 	cursor: pointer;
 
+	@apply gap-1;
+
 	&:hover {
-		img {
-			// transform: scale(1.05);
-		}
+		// img {
+		// transform: scale(1.05);
+		// }
 
 		.top>button {
 			margin-top: 0;
@@ -31,6 +34,14 @@
 
 	@apply rounded-lg;
 
+	@media (max-width: theme('screens.lg')) {
+		height: 240px;
+	}
+
+	@media (max-width: theme('screens.sm')) {
+		height: 200px;
+	}
+
 	button {
 		width: 100%;
 		height: 50px;
@@ -61,7 +72,7 @@
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 
-	@apply text-base;
+	@apply text-sm;
 }
 
 .bottom {
@@ -74,14 +85,109 @@
 	display: flex;
 	gap: 8px;
 	align-items: center;
-	font-weight: 800;
 
+	@apply font-extrabold;
 	@apply text-lg;
 }
 
 .oldPrice {
+	font-weight: 300;
 	text-decoration: line-through;
 	opacity: .5;
 
 	@apply text-sm;
+}
+
+.infoWrapper {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.info {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}
+
+.stats {
+	display: flex;
+	align-items: center;
+
+	@apply gap-1;
+	@apply text-xs;
+	@apply font-medium;
+
+	svg {
+		width: 18px;
+	}
+}
+
+.indicator {
+	position: relative;
+	width: 18px;
+	height: 18px;
+	background: rgba(var(--indicator-color-rgb), .2);
+
+	@apply rounded-full;
+
+	&::after {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		display: block;
+		width: 6px;
+		height: 6px;
+		content: "";
+		background: rgba(var(--indicator-color-rgb), 1);
+		transform: translate(-50%, -50%);
+
+		@apply rounded-full;
+	}
+}
+
+.tooltip {
+	background: var(--bg-noise), var(--color-background);
+	border: 1px solid var(--color-border);
+}
+
+.bulletWrapper {
+	position: relative;
+	bottom: 0 !important;
+	display: flex;
+	width: fit-content !important;
+	padding: 0 4px;
+	overflow: hidden;
+	background: var(--bg-noise), var(--color-main);
+	border: 1px solid var(--color-border);
+
+	@apply rounded-full;
+}
+
+.bullet {
+	position: relative;
+	width: 14px;
+	height: 14px;
+	cursor: pointer;
+
+	&::after {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		display: inline-block;
+		width: 5px;
+		height: 5px;
+		content: '';
+		background: var(--color-main-inverted);
+		opacity: .1;
+		transform: translate(-50%, -50%);
+
+		@apply rounded-full;
+	}
+}
+
+.bulletActive {
+	&::after {
+		opacity: 1;
+	}
 }