navbar

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>

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">
+      <Container className="px-4 py-5 h-screen">
-        <Button>Click Me!</Button>
+        <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>
     </>

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 {

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>
   );