Merge branch 'master' of https://github.com/okbel/e-comm-example

pages/_app.tsx

@@ -1,9 +1,6 @@
 import '@assets/main.css'
 import 'keen-slider/keen-slider.min.css'
 
-// To be removed
-import 'animate.css'
-
 import { FC } from 'react'
 import type { AppProps } from 'next/app'
 

pages/blog.tsx

@@ -34,7 +34,7 @@ export default function Blog({}: InferGetStaticPropsType<
                 <img
                   className="h-12 w-12 rounded-full"
                   src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204"
-                  alt=""
+                  alt="Avatar"
                 />
               </div>
               <div className="ml-4">
@@ -51,7 +51,7 @@ export default function Blog({}: InferGetStaticPropsType<
       </div>
       <Container>
         <div className="-mt-96 mx-auto">
-          <img src="/jacket.png" />
+          <img src="/jacket.png" alt="Jacket" />
         </div>
         {/** Replace by HTML Content */}
         <div className="text-lg leading-7 font-medium py-6 text-justify max-w-6xl mx-auto">

pages/cart.tsx

@@ -36,6 +36,7 @@ export default function Cart({}: InferGetStaticPropsType<
 
   const error = null
   const success = null
+
   return (
     <div className="grid lg:grid-cols-12">
       <div className="lg:col-span-8">
@@ -72,9 +73,8 @@ export default function Cart({}: InferGetStaticPropsType<
           </div>
         ) : (
           <div className="px-4 sm:px-6 flex-1">
-            <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
-              My Cart
-            </h2>
+            <Text variant="pageHeading">My Cart</Text>
+            <Text variant="sectionHeading">Review your Order</Text>
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-t border-accents-2">
               {items.map((item) => (
                 <CartItem
@@ -84,21 +84,21 @@ export default function Cart({}: InferGetStaticPropsType<
                 />
               ))}
             </ul>
-            <hr className="mb-6" />
+            <hr className="my-6" />
             <Text>
               Before you leave, take a look at these items. We picked them just
               for you
             </Text>
-            <div className="flex py-6 space-x-2">
+            <div className="flex py-6 space-x-6">
               {[1, 2, 3, 4, 5, 6].map((x) => (
-                <div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50" />
+                <div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75" />
               ))}
             </div>
           </div>
         )}
       </div>
       <div className="lg:col-span-4">
-        <div className="flex-shrink-0 px-4 py-12 sm:px-6">
+        <div className="flex-shrink-0 px-4 py-24 sm:px-6">
           <div className="border-t border-accents-2">
             <ul className="py-3">
               <li className="flex justify-between py-1">
@@ -122,7 +122,7 @@ export default function Cart({}: InferGetStaticPropsType<
           <div className="flex flex-row justify-end">
             <div className="w-full lg:w-72">
               <Button href="/checkout" Component="a" width="100%">
-                Proceed to Checkout
+                Confirm Purchase
               </Button>
             </div>
           </div>

pages/search.tsx

@@ -111,12 +111,12 @@ export default function Search({
           </ul>
         </div>
         <div className="col-span-8">
-          <div className="mb-12 animate__animated animate__fadeIn">
+          <div className="mb-12 transition ease-in duration-75">
             {data ? (
               <>
                 <span
-                  className={cn('animate__animated', {
-                    animate__fadeIn: data.found,
+                  className={cn('animated', {
+                    fadeIn: data.found,
                     hidden: !data.found,
                   })}
                 >
@@ -124,8 +124,8 @@ export default function Search({
                   <strong>{q}</strong>"
                 </span>
                 <span
-                  className={cn('animate__animated', {
-                    animate__fadeIn: !data.found,
+                  className={cn('animated', {
+                    fadeIn: !data.found,
                     hidden: data.found,
                   })}
                 >
@@ -145,7 +145,7 @@ export default function Search({
                 <ProductCard
                   variant="simple"
                   key={node.path}
-                  className="animate__animated animate__fadeIn"
+                  className="animated fadeIn"
                   product={node}
                   imgWidth={480}
                   imgHeight={480}
@@ -157,7 +157,7 @@ export default function Search({
               {rangeMap(12, (i) => (
                 <Skeleton
                   key={i}
-                  className="w-full animate__animated animate__fadeIn"
+                  className="w-full animated fadeIn"
                   height={325}
                 />
               ))}