Adding Modal Component and Login View

pages/index.tsx

@@ -28,7 +28,7 @@ export default function Home({
   return (
     <div className="mt-3">
       <Grid>
-        {featuredProducts.map((p: any) => (
+        {featuredProducts.slice(0, 3).map((p: any) => (
           <ProductCard key={p.id} {...p} />
         ))}
       </Grid>
@@ -48,12 +48,12 @@ export default function Home({
         ‘Natural’."
       />
       <Grid layout="B">
-        {products.slice(3, 6).map((p: any) => (
+        {featuredProducts.slice(3, 6).map((p: any) => (
           <ProductCard key={p.id} {...p} />
         ))}
       </Grid>
       <Marquee>
-        {products.slice(0, 3).map((p: any) => (
+        {products.slice(3, 6).map((p: any) => (
           <ProductCard key={p.id} {...p} variant="slim" />
         ))}
       </Marquee>

pages/login.tsx

@@ -0,0 +1,40 @@
+import { Layout } from '@components/core'
+import { Logo, Modal, Button } from '@components/ui'
+
+export default function Login() {
+  return (
+    <div className="pb-20">
+      <Modal close={() => {}}>
+        <div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
+          <div className="flex justify-center pb-12">
+            <Logo width="64px" height="64px" />
+          </div>
+          <div className="flex flex-col space-y-3">
+            <div className="border border-accents-3 text-accents-6">
+              <input
+                placeholder="Email"
+                className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
+              />
+            </div>
+            <div className="border border-accents-3 text-accents-6">
+              <input
+                placeholder="Password"
+                className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
+              />
+            </div>
+            <Button variant="slim">Log In</Button>
+            <span className="pt-3 text-center text-sm">
+              <span className="text-accents-7">Don't have an account?</span>
+              {` `}
+              <a className="text-accent-9 font-bold hover:underline cursor-pointer">
+                Sign Up
+              </a>
+            </span>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+Login.Layout = Layout