add Contacts page layout, fix breadcrumps positioning in CartPage

fe-may23-dreamTeam · Sep 12, 2023 · c4ae6f4 · c4ae6f4
1 parent 5358ed7
commit c4ae6f4
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 4 deletions.
diff --git 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
@@ -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>
   );
 };