From ba43eae56976e2105e132460090526e5d790061a Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 29 Sep 2020 10:01:57 -0300
Subject: [PATCH] navbar

---
 components/Navbar/Navbar.tsx        |  2 +-
 pages/index.tsx                     |  8 ++++++--
 ui/Featurebar/Featurebar.module.css | 10 ++++++++--
 ui/Featurebar/Featurebar.tsx        |  2 +-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index f043ea237..49d49e875 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -16,7 +16,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
         <Logo />
         <div className="flex flex-row h-full content-center flex-1">
           <Searchbar />
-          <nav className="flex flex-row items-center px-3">
+          <nav className="hidden flex-row items-center px-3 lg:flex">
             <a className="pr-4">All</a>
             <a className="pr-4">Clothes</a>
             <a>Accesories</a>
diff --git a/pages/index.tsx b/pages/index.tsx
index 2ce395ed2..e2c7b769c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -9,8 +9,12 @@ export default function Home() {
         description="Due to COVID-19, some orders may experience processing and delivery delays."
       />
       <Navbar />
-      <Container className="px-4 py-5  h-screen">
-        <Button>Click Me!</Button>
+      <Container className="px-4 py-5 h-screen">
+        <div className="grid grid-cols-1 gap-6 h-full lg:grid-cols-3 lg:grid-rows-2">
+          <div className="lg:row-span-2 lg:col-span-2 bg-indigo-700 h-full"></div>
+          <div className="lg:row-span-1 lg:col-span-1 bg-black h-full"></div>
+          <div className="lg:row-span-1 lg:col-span-1 bg-red-500"></div>
+        </div>
       </Container>
       <Footer></Footer>
     </>
diff --git a/ui/Featurebar/Featurebar.module.css b/ui/Featurebar/Featurebar.module.css
index 2207da147..806d4a40c 100644
--- a/ui/Featurebar/Featurebar.module.css
+++ b/ui/Featurebar/Featurebar.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply py-4 bg-black text-white flex justify-center;
+  @apply py-4 px-6 bg-black text-white flex flex-row justify-center items-center;
 }
 
 .title {
@@ -7,7 +7,13 @@
 }
 
 .separator {
-  @apply mx-2 font-medium text-xs leading-6;
+  @apply mx-3 bg-white;
+  width: 1px;
+  height: 20px;
+}
+
+.separator:before {
+  content: "";
 }
 
 .description {
diff --git a/ui/Featurebar/Featurebar.tsx b/ui/Featurebar/Featurebar.tsx
index 87a69d0f1..56e3d9e22 100644
--- a/ui/Featurebar/Featurebar.tsx
+++ b/ui/Featurebar/Featurebar.tsx
@@ -17,7 +17,7 @@ const Featurebar: FunctionComponent<Props> = ({
   return (
     <div className={rootClassName}>
       <span className={s.title}>{title}</span>
-      <span className={s.separator}>|</span>
+      <span className={s.separator} />
       <span className={s.description}>{description}</span>
     </div>
   );