diff --git a/public/img/contacts/Les.png b/public/img/contacts/Les.png
new file mode 100644
index 0000000..d6c2267
Binary files /dev/null and b/public/img/contacts/Les.png differ
diff --git a/public/img/contacts/Nazar.png b/public/img/contacts/Nazar.png
new file mode 100644
index 0000000..6cc5baf
Binary files /dev/null and b/public/img/contacts/Nazar.png differ
diff --git a/public/img/contacts/Stas.png b/public/img/contacts/Stas.png
new file mode 100644
index 0000000..0a06bf3
Binary files /dev/null and b/public/img/contacts/Stas.png differ
diff --git a/public/img/contacts/Veronika.jfif b/public/img/contacts/Veronika.jfif
new file mode 100644
index 0000000..f465bae
Binary files /dev/null and b/public/img/contacts/Veronika.jfif differ
diff --git a/public/img/contacts/Vitalij.jfif b/public/img/contacts/Vitalij.jfif
new file mode 100644
index 0000000..6904c50
Binary files /dev/null and b/public/img/contacts/Vitalij.jfif differ
diff --git a/src/App.tsx b/src/App.tsx
index 1864388..8d46135 100644
--- a/src/App.tsx
+++ b/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 = () => {
} />
} />
} />
+ } />
} />
diff --git a/src/Pages/Contacts/Contacts.scss b/src/Pages/Contacts/Contacts.scss
new file mode 100644
index 0000000..58c1fed
--- /dev/null
+++ b/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;
+}
diff --git a/src/Pages/Contacts/Contacts.tsx b/src/Pages/Contacts/Contacts.tsx
new file mode 100644
index 0000000..5f311d9
--- /dev/null
+++ b/src/Pages/Contacts/Contacts.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import './Contacts.scss';
+
+export const Contacts: React.FC = () => (
+
+);
diff --git a/src/components/FavoriteItems/FavoriteItems.tsx b/src/components/FavoriteItems/FavoriteItems.tsx
index af329fd..389ec28 100644
--- a/src/components/FavoriteItems/FavoriteItems.tsx
+++ b/src/components/FavoriteItems/FavoriteItems.tsx
@@ -20,7 +20,7 @@ export const FavouriteItems = () => {
Favourites
-
... models
+
{`${context.favorites.length} models`}
{context.favorites.length ? (
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 9fabb07..09a07c1 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -38,7 +38,7 @@ export const Footer: React.FC = () => {
>
Github
-
+
Contacts