solution

src/components/Pagination.tsx

@@ -21,6 +21,9 @@ export const Pagination:React.FC<Props> = ({ paginationLength }) => {
   const firstVisiblePage = useRef(0);
   const [shift, setShift] = useState(0);
 
+  const showLastItem = lastVisiblePage.current !== paginationLength
+  && paginationLength > paginationLimit;
+
   useEffect(() => {
     if (paginationLimit) {
       if (+page > paginationLimit && +page > lastVisiblePage.current) {
@@ -56,13 +59,10 @@ export const Pagination:React.FC<Props> = ({ paginationLength }) => {
   };
 
   const createPagination = () => {
-    if (!paginationLength) {
-      return (<li className="pagination__item is-active">1</li>);
-    }
-
     const result = [];
 
-    for (let i = 0; i < paginationLength; i += 1) {
+    for (let i = 0; i < (showLastItem
+      ? paginationLength - 1 : paginationLength); i += 1) {
       result.push(
         <li
           key={i + 1}
@@ -74,7 +74,6 @@ export const Pagination:React.FC<Props> = ({ paginationLength }) => {
           style={{ left: -shift }}
         >
           {i + 1}
-
         </li>,
       );
     }
@@ -85,20 +84,47 @@ export const Pagination:React.FC<Props> = ({ paginationLength }) => {
   const paginationList = createPagination();
 
   return (
-    <section className="pagination">
+    <section
+      className="pagination"
+      style={{ left: showLastItem ? -step / 2 : 0 }}
+    >
       <ArrowButton
         type="left"
         stop={+page === 1}
         onChangePosition={() => handleChangePage(+page - 1)}
       />
-      <ul className="pagination__list">
+      <ul
+        className="pagination__list"
+      >
         {paginationList}
       </ul>
-      <ArrowButton
-        type="right"
-        stop={+page === paginationLength}
-        onChangePosition={() => handleChangePage(+page + 1)}
-      />
+      <div
+        className="right-button"
+        style={{ left: showLastItem ? step : 0 }}
+      >
+        {showLastItem && paginationLimit !== 0
+      && (
+        <button
+          type="button"
+          className="pagination__item"
+          style={{
+            position: 'absolute',
+            left: -step,
+          }}
+          onClick={() => handleChangePage(paginationLength)}
+        >
+          {+page !== paginationLength - 1 && '...'}
+          {paginationLength}
+        </button>
+      )}
+        <ArrowButton
+          type="right"
+          stop={+page === paginationLength}
+          onChangePosition={() => handleChangePage(+page + 1)}
+        />
+      </div>
+
     </section>
+
   );
 };

src/components/pages/CartPage.tsx

@@ -1,11 +1,14 @@
-import { useMemo, useContext } from 'react';
+import {
+  useMemo, useContext, useState, useEffect,
+} from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { Cart } from '../../utils/types/Cart';
 import { Context } from '../../utils/Context';
 import { BlockTitle } from '../BlockTitle';
 
 export const CartPage: React.FC = () => {
   const { cartList, editCartItem } = useContext(Context);
+  const [shift, setShift] = useState(-700);
 
   const handleRemoveItem = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -20,6 +23,12 @@ export const CartPage: React.FC = () => {
       .reduce((acum, item) => acum + item.price * item.quantity, 0);
   }, [cartList]);
 
+  useEffect(() => {
+    const timerId = setTimeout(() => setShift(-700), 5000);
+
+    return () => clearTimeout(timerId);
+  }, [shift]);
+
   return (
     <main className="cart">
       <BlockTitle title="Cart" subtitle={cartList.length} />
@@ -28,7 +37,17 @@ export const CartPage: React.FC = () => {
           <h1>{`$${totalAmount}`}</h1>
           <p>{`Total for ${cartList.length} items`}</p>
         </div>
-        {cartList.length > 0 && (<button type="submit">Checkout</button>)}
+        {cartList.length > 0 && (
+          <button
+            type="button"
+            onClick={() => setShift(18)}
+          >
+            Checkout
+          </button>
+        )}
+      </div>
+      <div className="cart__total--message" style={{ right: shift }}>
+        <span>The option will be available soon</span>
       </div>
       <ul className="cart__list">
         <TransitionGroup className="cart__list">
@@ -40,7 +59,7 @@ export const CartPage: React.FC = () => {
             >
               <li className="cart__item" key={item.id}>
                 <button
-                  type="submit"
+                  type="button"
                   onClick={(e) => handleRemoveItem(e, item)}
                   className="cart__item--remove"
                 >

src/components/pages/ProductsPage.tsx

@@ -87,7 +87,7 @@ export const ProductsPage:React.FC<Props> = ({ products }) => {
           subtitle={0}
           title={developedPages[0] === Path
             ? 'No matches found'
-            : 'Page under development...'}
+            : 'Product category will be added soon...'}
         />
       )}
 

src/scss/categories/categories.scss

@@ -1,9 +1,15 @@
 @import "../utils/mixins";
+@import "../utils/variables";
 
 @import "./categories-item.scss";
 
 .categories {
   margin-bottom: 80px;
+
+  &__title {
+    @include text (32px, 700, $primary-dark-color);
+  }
+
   &__items {
     display: flex;
     gap: 16px;

src/scss/icon.scss

@@ -14,11 +14,7 @@
   }
 
   & img {
-    width: 25px;
-
-    @include onPhone {
-      width: 18px;
-    }
+    width: 15px;
   }
 
   &-info__info {
@@ -28,9 +24,9 @@
     bottom: 53%;
     font-size: 70%;
     color: #e2e6e9;
-    width: 15px;
-    height: 15px;
-    background: #eb0909;
+    width: 13px;
+    height: 13px;
+    background: #eb5757;
     border: 1px solid #fff;
     border-radius: 50%;
   }

src/scss/page-navigation.scss

@@ -16,7 +16,7 @@
     }
 
     & span {
-      color: $primary-gray-color;
+      @include text (12px, 600, $primary-gray-color);
     }
   }
 

src/scss/pages/cart-page/cart-total.scss

@@ -50,5 +50,22 @@
       background: $primary-dark-color;
       color: #fff;
     }
+
+    &--message {
+      position: absolute;
+      @extend .flex-center;
+      transition: right 0.8s ease;
+      width: 500px;
+      height: 100px;
+      border: 1px solid $border-color-gray;
+
+      @include onPhone {
+        width: 300px;
+      }
+
+      & span {
+        @include text (14px, 600, $primary-gray-color);
+      }
+    }
   }
 }

src/scss/pagination/pagination-list.scss

@@ -4,14 +4,6 @@
   &__list {
     display: flex;
     gap: 8px;
-    @include onTab {
-      max-width: 85%;
-      overflow: hidden;
-    }
-
-    @include onPhone {
-      width: 85%;
-      overflow: hidden;
-    }
+    overflow: hidden;
   }
 }

src/scss/pagination/pagination.scss

@@ -6,13 +6,20 @@
 @import "./pagination-item.scss";
 
 .pagination {
+  position: relative;
   @extend .flex-center;
+  gap: 16px;
+  margin: 0 auto 80px;
+
   @include onTab {
     gap: 20px;
   }
+
   @include onPhone {
     gap: 8px;
   }
-  gap: 16px;
-  margin: 0 auto 80px;
+}
+
+.right-button {
+  position: relative;
 }

src/scss/product-slider..scss

@@ -1,4 +1,5 @@
 @import "./utils/mixins";
+@import "./utils/variables";
 
 .product-slider {
   overflow: hidden;
@@ -11,6 +12,7 @@
   }
 
   &__title {
+    @include text (32px, 700, $primary-dark-color);
     margin: 0;
   }
 

src/scss/search.scss

@@ -1,5 +1,6 @@
 @import "./utils/_variables";
 @import "./utils/extends";
+@import "./utils/mixins";
 
 .search {
   @extend .flex-between-center;
@@ -17,9 +18,14 @@
   input {
     outline: none;
     border: none;
+    width: 327px;
 
     &::placeholder {
-      color: $border-color-gray;
+      @include text (14px, 600, $primary-gray-color);
+    }
+
+    @include onTab {
+      width: 130px;
     }
 
     @include onPhone {

src/scss/select-block/item.scss

@@ -1,8 +1,9 @@
 @import "../utils/variables";
+@import "../utils/mixins";
 
 .filter {
   &__item {
-    color: $primary-gray-color;
+    @include text(14px, 600, $primary-gray-color );
     padding: 10px 16px;
     cursor: pointer;
     transition: box-shadow 0.2s ease;

src/utils/useDeviceSize/deviceParams.ts

@@ -36,7 +36,7 @@ export const paginationLimit = {
   tab: Math.ceil(
     (main.tab.size - ((buttonWidth + main.tab.gap) * 2)) / (buttonWidth + 8),
   ),
-  desktop: 0,
+  desktop: 30,
 };
 
 export const itemsOnPage = {