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 = () => ( +
+
+
+
+
Oleksandr Dyman
+ Github +
+
+
+
+
+
Veronika Demko
+ Github +
+
+
+
+
+
Vitalii Shut
+ Github +
+
+
+
+
+
Nazarii Siryi
+ Github +
+
+
+
+
+
Stas Andrushchak
+ Github +
+
+
+); 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