Fixing UI Errors

components/Categories.tsx

@@ -36,9 +36,11 @@ export const Categories = () => {
           <h2 className="text-xl md:text-3xl text-black font-bold">
             Shop by Category
           </h2>
-          <span className="text-indigo-600 text-sm font-semibold flex justify-center items-center pr-2">
-            Browse all categories <ArrowRightIcon className="ml-2 h-5 w-5" />
-          </span>
+          <Link passHref href="/category">
+            <span className="cursor-pointer text-indigo-600 text-sm font-semibold flex justify-center items-center pr-2">
+              Browse all categories <ArrowRightIcon className="ml-2 h-5 w-5" />
+            </span>
+          </Link>
         </div>
         <section className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 grid-rows-2 w-full">
           {List.map(({landing, name, big}, i) => {

components/ClothingFavorites.tsx

@@ -23,9 +23,11 @@ export const ClothingFavorites = () => {
           <h2 className="text-xl md:text-3xl text-black font-bold">
             Get to know our favorite items
           </h2>
-          <span className="text-indigo-600 text-sm font-semibold flex justify-center items-center pr-2">
-            Browse all categories <ArrowRightIcon className="ml-2 h-5 w-5" />
-          </span>
+          <Link passHref href="/category">
+            <span className="cursor-pointer text-indigo-600 text-sm font-semibold flex justify-center items-center pr-2">
+              Browse all categories <ArrowRightIcon className="ml-2 h-5 w-5" />
+            </span>
+          </Link>
         </div>
         <section className="grid grid-cols-1 sm:grid-cols-3 gap-x-4 grid-rows-1 w-full">
           {list &&

components/Hero.tsx

@@ -49,7 +49,7 @@ export const Hero = () => {
                 </div>
               </div>
 
-              <Link href="#" passHref>
+              <Link href="/category/New Arrivals" passHref>
                 <button
                   type="button"
                   className="inline-block text-center bg-indigo-600 border border-transparent rounded-md py-3 px-8 font-medium text-white hover:bg-indigo-700"

components/Tiles.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import Image from 'next/image';
 import {TilesProps} from '@interfaces/index';
+import Link from 'next/link';
 
 export const Tiles = ({
   src = '/tiles.png',
   title = 'Level up your workspace',
   desc = "Make your desk beautiful and organized. Post a photo to social media and watch it get more likes than life-changing announcements. Endless tasks and limited hours in a bad workspace isn't a problem anymore.",
   button = {
     text: 'Shop Collection',
-    link: '/',
+    link: '/category/Workspace',
   },
   bgColor = 'bg-zinc-900',
   bgOpacity = 'opacity-80',
@@ -26,12 +27,14 @@ export const Tiles = ({
           <p className="text-base sm:px-40 sm:text-lg text-white/80 px-20 lg:px-80 text-center mb-8">
             {desc}
           </p>
-          <button
-            type="button"
-            className="inline-block text-center bg-white border border-transparent rounded-md py-3 px-8 font-medium text-black"
-          >
-            {button.text}
-          </button>
+          <Link href={button.link} passHref>
+            <button
+              type="button"
+              className="cursor-pointer inline-block text-center bg-white border border-transparent rounded-md py-3 px-8 font-medium text-black"
+            >
+              {button.text}
+            </button>
+          </Link>
         </div>
       </div>
       <div className={`absolute w-full h-full z-10 ${bgColor} ${bgOpacity}`} />

components/WorkspaceCollections.tsx

@@ -7,16 +7,19 @@ const List = [
     name: 'Work from home accesories',
     category: 'Desk and office',
     src: '/home.png',
+    link: '/category/Workspace',
   },
   {
     name: 'Journals and self-improving',
     category: 'Self-Improvement',
     src: '/journals.png',
+    link: '/category/Workspace',
   },
   {
     name: 'Daily commute essentials',
     category: 'Travel',
     src: '/travel.png',
+    link: '/category/Accesories',
   },
 ];
 
@@ -30,8 +33,8 @@ export const WorkspaceCollections = () => {
           </h2>
         </div>
         <section className="grid grid-cols-1 sm:grid-cols-3 gap-x-4 grid-rows-1 w-full">
-          {List.map(({src, category, name}, i) => (
-            <Link href="/">
+          {List.map(({src, category, name, link}, i) => (
+            <Link href={link} passHref>
               <a
                 className={`${i == 2 &&
                   'hidden sm:flex'} flex mt-6 flex-col justify-center items-center w-full h-full relative z-10`}

components/WorkspaceFavorites.tsx

@@ -30,9 +30,11 @@ export const WorkspaceFavorites = () => {
           <h2 className="text-xl md:text-3xl text-black font-bold">
             Bring the most productivity
           </h2>
-          <span className="text-indigo-600 text-sm font-semibold flex justify-center items-center pr-2">
-            Browse all products <ArrowRightIcon className="ml-2 h-5 w-5" />
-          </span>
+          <Link passHref href="/category">
+            <span className="cursor-pointer text-indigo-600 text-sm font-semibold flex justify-center items-center pr-2">
+              Browse all categories <ArrowRightIcon className="ml-2 h-5 w-5" />
+            </span>
+          </Link>
         </div>
         <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-4 grid-rows-1 w-full">
           {List.map(({colors, name, price, src}, i) => (

pages/category/index.tsx

@@ -0,0 +1,3 @@
+export default function AllCategoriesPage({header}) {
+  return <>{header}</>;
+}

pages/index.tsx

@@ -17,7 +17,7 @@ const IndexPage = ({header}) => (
         desc="We're commited to responsible, sustainable, ethical and ecological manufacturing. Our small scale approach allows us to focus on quality rather than quantity and improve your product. We're doing our best every day to delay the inevitable death of the universe."
         button={{
           text: 'Shop Collection',
-          link: '/',
+          link: '/category/New Arrivals',
         }}
         bgColor="bg-emerald-900"
         bgOpacity="opacity-50"