From 3a3a4734778267b246edd543b1368e2ca3deb53f Mon Sep 17 00:00:00 2001
From: Brunoocal <email@brunooh.dev>
Date: Mon, 6 Jun 2022 15:16:33 -0300
Subject: [PATCH] Links at homepage now are clickeable

---
 components/Categories.tsx           |  8 +++++---
 components/ClothingFavorites.tsx    |  8 +++++---
 components/Hero.tsx                 |  2 +-
 components/Tiles.tsx                | 17 ++++++++++-------
 components/WorkspaceCollections.tsx |  7 +++++--
 components/WorkspaceFavorites.tsx   |  8 +++++---
 pages/category/index.tsx            |  3 +++
 pages/index.tsx                     |  2 +-
 8 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 pages/category/index.tsx

diff --git a/components/Categories.tsx b/components/Categories.tsx
index d16ded1..6fbf0ba 100644
--- a/components/Categories.tsx
+++ b/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) => {
diff --git a/components/ClothingFavorites.tsx b/components/ClothingFavorites.tsx
index 8081e6d..9c1582b 100644
--- a/components/ClothingFavorites.tsx
+++ b/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 &&
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 374e223..199f0a3 100644
--- a/components/Hero.tsx
+++ b/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"
diff --git a/components/Tiles.tsx b/components/Tiles.tsx
index 5a93529..357e7a7 100644
--- a/components/Tiles.tsx
+++ b/components/Tiles.tsx
@@ -1,6 +1,7 @@
 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',
@@ -8,7 +9,7 @@ export const Tiles = ({
   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}`} />
diff --git a/components/WorkspaceCollections.tsx b/components/WorkspaceCollections.tsx
index 1fe4bf5..f196b91 100644
--- a/components/WorkspaceCollections.tsx
+++ b/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`}
diff --git a/components/WorkspaceFavorites.tsx b/components/WorkspaceFavorites.tsx
index 3b73d53..d5a4389 100644
--- a/components/WorkspaceFavorites.tsx
+++ b/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) => (
diff --git a/pages/category/index.tsx b/pages/category/index.tsx
new file mode 100644
index 0000000..0bd6012
--- /dev/null
+++ b/pages/category/index.tsx
@@ -0,0 +1,3 @@
+export default function AllCategoriesPage({header}) {
+  return <>{header}</>;
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index 9dd2d77..4137b5c 100644
--- a/pages/index.tsx
+++ b/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"