From 5358ed74b12ad915c604f5490695dad0d511934a Mon Sep 17 00:00:00 2001
From: Olena <pampam32121@gmail.com>
Date: Tue, 12 Sep 2023 13:29:31 +0300
Subject: [PATCH 1/2] add route for contacts, add breadcrumbs for ContactsPage
 and CartPage

---
 src/Root.tsx               |  4 +++-
 src/components/Footer.tsx  |  6 +++---
 src/pages/CartPage.tsx     | 16 +++++-----------
 src/pages/ContactsPage.tsx | 16 ++++++++++++++++
 4 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/ContactsPage.tsx

diff --git a/src/Root.tsx b/src/Root.tsx
index 20dffee..a03000f 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -5,6 +5,7 @@ import {
   Route,
   Routes,
 } from 'react-router-dom';
+import { Toaster } from 'react-hot-toast';
 import App from './App';
 import CatalogPage from './pages/CatalogPage';
 import NotFoundPage from './pages/NotFoundPage';
@@ -13,7 +14,7 @@ import ScrollToTop from './components/ScrollToTop';
 import FavouritesPage from './pages/FavouritesPage';
 import CartPage from './pages/CartPage';
 import HomePage from './pages/HomePage';
-import { Toaster } from 'react-hot-toast';
+import ContactsPage from './pages/ContactsPage';
 
 export const Root = () => (
   <BrowserRouter>
@@ -37,6 +38,7 @@ export const Root = () => (
         </Route>
         <Route path="favourites" element={<FavouritesPage />} />
         <Route path="cart" element={<CartPage />} />
+        <Route path="contacts" element={<ContactsPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c148faa..9924488 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -34,12 +34,12 @@ export const Footer = () => {
               </li>
 
               <li>
-                <a
+                <NavLink
                   className="duration-150 select-none uppercase text-secondary font-extrabold text-xs hover:text-primary active:text-primary focus:text-primary font-Mont"
-                  href="#"
+                  to="/contacts"
                 >
                   Contacts
-                </a>
+                </NavLink>
               </li>
 
               <li>
diff --git a/src/pages/CartPage.tsx b/src/pages/CartPage.tsx
index 6319ed8..3adf46e 100644
--- a/src/pages/CartPage.tsx
+++ b/src/pages/CartPage.tsx
@@ -1,18 +1,17 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
-import { FiChevronLeft } from 'react-icons/fi';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
 import { Button } from '../components/Button';
 import CartItem from '../components/CartItem';
 import { CheckoutModal } from '../components/CheckoutModal';
 import { clearCart, useAppDispatch, useAppSelector } from '../redux';
 import { getTotalProductsCost } from '../utils/getTotalCost';
 import { getTotalItemsCount } from '../utils/getTotalItemsCount';
+import BreadCrumb from '../components/BreadCrumb';
 
 const CartPage = () => {
   const { items: cartItems } = useAppSelector((state) => state.cart);
   const [showModal, setShowModal] = useState<boolean>(false);
-  const navigate = useNavigate();
   const dispatch = useAppDispatch();
 
   const totalCost = getTotalProductsCost(cartItems);
@@ -40,13 +39,8 @@ const CartPage = () => {
           { 'blur pointer-events-none': showModal },
         )}
       >
-        <span
-          onClick={() => navigate(-1)}
-          className="select-none cursor-pointer flex items-center gap-1"
-        >
-          <FiChevronLeft />
-          Back
-        </span>
+        <BreadCrumb />
+
         <div className="mb-8">
           <h1 className="mb-2 text-[32px] font-extrabold leading-[41px] tracking-[0.32px] tablet:mt-10 tablet:text-5xl">
             Cart
diff --git a/src/pages/ContactsPage.tsx b/src/pages/ContactsPage.tsx
new file mode 100644
index 0000000..21694de
--- /dev/null
+++ b/src/pages/ContactsPage.tsx
@@ -0,0 +1,16 @@
+import BreadCrumb from '../components/BreadCrumb';
+
+const ContactsPage = () => {
+  return (
+    <main
+      className="container mx-auto flex flex-col px-4 py-6
+        tablet:px-6 desktop:w-[1200px] desktop:px-8"
+    >
+      <BreadCrumb />
+
+      <h1>Our Team:</h1>
+    </main>
+  );
+};
+
+export default ContactsPage;

From c4ae6f4a392936aece9599908b4b00dfb8259161 Mon Sep 17 00:00:00 2001
From: Olena <pampam32121@gmail.com>
Date: Tue, 12 Sep 2023 15:49:53 +0300
Subject: [PATCH 2/2] add Contacts page layout, fix breadcrumps positioning in
 CartPage

---
 src/pages/CartPage.tsx     |  2 +-
 src/pages/ContactsPage.tsx | 67 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/pages/CartPage.tsx b/src/pages/CartPage.tsx
index 3adf46e..31a2a93 100644
--- a/src/pages/CartPage.tsx
+++ b/src/pages/CartPage.tsx
@@ -35,7 +35,7 @@ const CartPage = () => {
       )}
       <main
         className={classNames(
-          'container mx-auto flex flex-col px-4 py-6 tablet:px-6 desktop:w-[1200px] desktop:px-8',
+          'container mx-auto flex flex-col p-4 pb-6 tablet:px-6 desktop:w-[1200px]',
           { 'blur pointer-events-none': showModal },
         )}
       >
diff --git a/src/pages/ContactsPage.tsx b/src/pages/ContactsPage.tsx
index 21694de..b32702a 100644
--- a/src/pages/ContactsPage.tsx
+++ b/src/pages/ContactsPage.tsx
@@ -3,12 +3,73 @@ import BreadCrumb from '../components/BreadCrumb';
 const ContactsPage = () => {
   return (
     <main
-      className="container mx-auto flex flex-col px-4 py-6
-        tablet:px-6 desktop:w-[1200px] desktop:px-8"
+      className="container mx-auto flex flex-col items-center
+        tablet:items-start p-4 pb-6 tablet:px-6 desktop:w-[1200px]"
     >
       <BreadCrumb />
 
-      <h1>Our Team:</h1>
+      <div className="mb-8">
+        <h1 className="mb-2 text-[32px] font-extrabold leading-[41px] tracking-[0.32px] tablet:mt-10 tablet:text-5xl">
+          Our Team
+        </h1>
+      </div>
+
+      <section className="grid grid-cols-1 gap-4 tablet:grid-cols-2 desktop:grid-cols-4">
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+      </section>
     </main>
   );
 };