Basic dynamic porfolio/[slug] route

src/app/components/home/Card.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 // import { AiFillHeart } from "react-icons/ai";
 // import { BsChatSquareFill } from "react-icons/bs";
@@ -6,35 +7,37 @@ import React from "react";
 
 const styles = {
   wrapper:
-    "bg-white hover:bg-gray-800 shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center;",
+    "bg-white hover:bg-gray-800 shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center",
   header: "relative mt-2 mx-2",
   imageWrapper: "h-56 rounded-2xl overflow-hidden",
   wrapperAnime: "transition-all duration-500 ease-in-out",
-  image: "object-cover w-8/12 h-8/12",
+  image: "object-cover w-8/12 h-8/12 mx-auto",
   textWrapper: "pt-10 pb-6 w-full px-4 flex justify-between items-center",
   text: "font-medium leading-none text-base tracking-wider text-gray-400",
 };
 
 interface CardProps {
+  id: string;
   title: string;
-  order: number;
   image: string;
   budget: string;
 }
 
-const Card = ({ title, order, image, budget }: CardProps) => {
+const Card = ({ id, title, image, budget }: CardProps) => {
   return (
-    <div className={[styles.wrapper, styles.wrapperAnime].join(" ")}>
-      <div className={styles.header}>
-        <div className={styles.imageWrapper}>
-          <img src={image} className={styles.image} alt="" />
+    <Link href={`/portfolio/${id}`}>
+      <div className={[styles.wrapper, styles.wrapperAnime].join(" ")}>
+        <div className={styles.header}>
+          <div className={styles.imageWrapper}>
+            <img src={image} className={styles.image} alt="" />
+          </div>
+        </div>
+        <div className={styles.textWrapper}>
+          <h1 className={styles.text}>{`${title}`}</h1>
+          <div className={styles.text}>{budget}</div>
         </div>
       </div>
-      <div className={styles.textWrapper}>
-        <h1 className={styles.text}>{`${title}`}</h1>
-        <div className={styles.text}>{budget}</div>
-      </div>
-    </div>
+    </Link>
   );
 };
 

src/app/components/home/CardTiles.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { Fragment } from "react";
-import { Transition } from "@headlessui/react";
 import Card from "./Card";
 
 type PortfoliosType = Array<{
+  id: string;
   title: string;
   budget: string;
 }>;
@@ -21,9 +20,9 @@ export default function CardTiles({
           const image_idx = index % 3;
           return (
             <Card
-              key={index}
+              key={portfolio.id}
+              id={portfolio.id}
               title={portfolio.title}
-              order={index + 1}
               image={`house-icon-${image_idx}.svg`}
               budget={portfolio.budget}
             />

src/app/home/page.tsx

@@ -13,24 +13,55 @@ const Home = async () => {
 
   const Portfolios = [
     {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0851",
       title: "Portfolio 1",
       budget: "£500k",
     },
     {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0852",
       title: "Portfolio 2",
       budget: "150k",
     },
     {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0853",
       title: "Portfolio 3",
       budget: "£1m",
     },
-    { title: "Portfolio 4", budget: "£2m" },
-    { title: "Portfolio 5", budget: "£25k" },
-    { title: "Portfolio 6", budget: "£10k" },
-    { title: "Portfolio 7", budget: "£33k" },
-    { title: "Portfolio 8", budget: "£670k" },
-    { title: "Portfolio 9", budget: "£240k" },
-    { title: "Portfolio 10", budget: "93k" },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0854",
+      title: "Portfolio 4",
+      budget: "£2m",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0855",
+      title: "Portfolio 5",
+      budget: "£25k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0856",
+      title: "Portfolio 6",
+      budget: "£10k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0857",
+      title: "Portfolio 7",
+      budget: "£33k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0858",
+      title: "Portfolio 8",
+      budget: "£670k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0859",
+      title: "Portfolio 9",
+      budget: "£240k",
+    },
+    {
+      id: "d290f1ee-6c54-4b01-90e6-d701748f0860",
+      title: "Portfolio 10",
+      budget: "93k",
+    },
   ];
 
   return (