fix favorit count issue

src/App.tsx

@@ -14,6 +14,7 @@ import { CartProvider } from './utils/CartProvider.tsx';
 import { BaseLayout } from './Pages/BaseLayout/BaseLayout.tsx';
 import { FavouriteItems } from './components/FavoriteItems/FavoriteItems.tsx';
 import { FavoriteProvider } from './utils/FavoriteProvider.tsx';
+import { Contacts } from './Pages/Contacts/Contacts.tsx';
 
 export const App: React.FC = () => {
   return (
@@ -33,6 +34,7 @@ export const App: React.FC = () => {
                 <Route path="/accessories" element={<AccessoriesPage />} />
                 <Route path="/favorites" element={<FavouriteItems />} />
                 <Route path="/cart" element={<Cart />} />
+                <Route path="/contacts" element={<Contacts />} />
                 <Route path="*" element={<PageNotFound />} />
               </Routes>
             </main>

src/Pages/Contacts/Contacts.scss

@@ -0,0 +1,64 @@
+.contacts-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+}
+
+.contacts__person {
+  display: flex;
+  align-items: center;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.person__photo {
+  width: 175px;
+  height: 175px;
+  border-radius: 50%;
+  background-color: #ccc;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  margin-right: 15px;
+
+  &--1 {
+    background-image: url(/img/contacts/Les.png);
+  }
+  &--2 {
+    background-image: url(/img/contacts/Veronika.jfif);
+  }
+  &--3 {
+    background-image: url(/img/contacts/Vitalij.jfif);
+  }
+  &--4 {
+    background-image: url(/img/contacts/Nazar.png);
+  }
+  &--5 {
+    background-image: url(/img/contacts/Stas.png);
+  }
+}
+
+.person__info {
+  display: flex;
+  flex-direction: column;
+}
+
+.person__name {
+  font-size: 1.2em;
+  color: #333;
+  margin-bottom: 5px;
+}
+
+.person__info a {
+  color: #1a73e8;
+  text-decoration: none;
+}
+
+.person__info a:hover {
+  text-decoration: underline;
+}

src/Pages/Contacts/Contacts.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import './Contacts.scss';
+
+export const Contacts: React.FC = () => (
+  <div className="contacts-container">
+    <div className="contacts__person person">
+      <div className="person__photo  person__photo--1" />
+      <div className="person__info">
+        <div className="person__name">Oleksandr Dyman</div>
+        <a href="https://github.com/lesdyman">Github</a>
+      </div>
+    </div>
+    <div className="contacts__person person">
+      <div className="person__photo person__photo--2" />
+      <div className="person__info">
+        <div className="person__name">Veronika Demko</div>
+        <a href="https://github.com/demkoveronika">Github</a>
+      </div>
+    </div>
+    <div className="contacts__person person">
+      <div className="person__photo person__photo--3" />
+      <div className="person__info">
+        <div className="person__name">Vitalii Shut</div>
+        <a href="https://github.com/V-Shut">Github</a>
+      </div>
+    </div>
+    <div className="contacts__person person">
+      <div className="person__photo person__photo--4" />
+      <div className="person__info">
+        <div className="person__name">Nazarii Siryi</div>
+        <a href="https://github.com/akryto">Github</a>
+      </div>
+    </div>
+    <div className="contacts__person person">
+      <div className="person__photo person__photo--5" />
+      <div className="person__info">
+        <div className="person__name">Stas Andrushchak</div>
+        <a href="https://github.com/Stasandrushchak">Github</a>
+      </div>
+    </div>
+  </div>
+);

src/components/FavoriteItems/FavoriteItems.tsx

@@ -20,7 +20,7 @@ export const FavouriteItems = () => {
           <h1 className="component__title">Favourites</h1>
         </div>
         <div className="component__models-number">
-          <p>... models</p>
+          <p>{`${context.favorites.length} models`}</p>
         </div>
         <div className="component__wrap">
           {context.favorites.length ? (

src/components/Footer/Footer.tsx

@@ -38,7 +38,7 @@ export const Footer: React.FC = () => {
           >
             Github
           </NavLink>
-          <NavLink className="footer__link footer__item" to="/">
+          <NavLink className="footer__link footer__item" to="/contacts">
             Contacts
           </NavLink>
           <NavLink className="footer__link footer__item" to="/">