Adding footer

components/core/Footer/Footer.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply p-0;
+  @apply p-0 bg-black text-white;
 }
 
 .container {

components/core/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Footer.module.css'
-import { Container } from '@components/ui'
+import { Container, Logo } from '@components/ui'
 
 interface Props {
   className?: string
@@ -12,7 +12,52 @@ const Footer: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <footer className={rootClassName}>
-      <Container className={s.container}></Container>
+      <Container className={s.container}>
+        <div className="my-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2 py-6">
+          <div className="md:grid md:grid-cols-2 md:gap-8">
+            <div className="">
+              <div className="flex flex-row space-x-4 items-center">
+                <span className="rounded-full border border-gray-300">
+                  <Logo />
+                </span>
+                <span>ACME</span>
+              </div>
+            </div>
+            <div className="mt-12 md:mt-0">
+              <ul className="space-y-4">
+                <li>
+                  <a
+                    href="#"
+                    className="text-base leading-6 text-gray-300 hover:text-white"
+                  >
+                    About
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="text-base leading-6 text-gray-300 hover:text-white"
+                  >
+                    Terms of Use
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="text-base leading-6 text-gray-300 hover:text-white"
+                  >
+                    Privacy Policy
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="flex justify-end mt-12 md:mt-0">
+            &copy; 2020 ACME, Inc. All rights reserved.
+          </div>
+        </div>
+        <hr className="text-base leading-6 text-gray-400 xl:text-center border-t border-gray-700" />
+      </Container>
     </footer>
   )
 }

components/core/Layout/Layout.module.css

@@ -1,3 +1,7 @@
 .root {
   @apply h-full;
 }
+
+.main {
+  min-height: 100vh;
+}

components/core/Layout/Layout.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react'
 import s from './Layout.module.css'
 import { CommerceProvider } from '@lib/bigcommerce'
 import { CartProvider } from '@lib/bigcommerce/cart'
-import { Navbar, Featurebar } from '@components/core'
+import { Navbar, Featurebar, Footer } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
 import { UIProvider, useUI } from '@components/ui/context'
@@ -25,8 +25,9 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
       />
       <Container>
         <Navbar />
-        <main className="h-screen">{children}</main>
+        <main className={s.main}>{children}</main>
       </Container>
+      <Footer />
       {displaySidebar && (
         <Sidebar>
           <CartSidebarView />