refactor(projects): updates dynamic routing

src/app/work/[id]/page.jsx

@@ -0,0 +1,42 @@
+// app/work/[id]/page.jsx
+import React from "react";
+import { notFound } from "next/navigation";
+import { projects } from "../../../data/projects";
+
+export default function ProjectDetails({ params }) {
+  const project = projects.find((project) => project.id === params.id);
+
+  if (!project) {
+    notFound();
+  }
+
+  return (
+    <section className="w-full p-8 bg-gray-200">
+      <div className="container mx-auto px-4 lg:px-0 py-12 lg:py-20">
+        <div className="text-center mb-10 lg:mb-20">
+          <h2 className="text-4xl lg:text-6xl font-extrabold text-custom-blue mb-4">
+            {project.name}
+          </h2>
+          <img src={project.logo} alt={project.name} className="mb-4 mx-auto" />
+          <p className="text-lg lg:text-xl text-custom-purple">
+            {project.summary}
+          </p>
+          <a
+            href={project.link}
+            className="mt-4 inline-block px-8 py-3 text-white bg-custom-green rounded-lg"
+          >
+            Visit Project
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+
+// app/work/[id]/page.jsx
+export async function generateStaticParams() {
+  return projects.map((project) => ({
+    id: project.id,
+  }));
+}

src/components/projects/Cards.jsx

@@ -1,43 +1,37 @@
-"use-client";
+"use client";
 import {
   Card,
   CardHeader,
   CardBody,
   CardFooter,
 } from "@material-tailwind/react";
 import Image from "next/image";
+import Link from "next/link";
 
-export function CardDefault({ id, name, logo, summary, link }) {
+export function CardDefault({ id, name, logo, summary }) {
   return (
-    <Card className="mt-6 w-96 cursor-pointer">
-      <CardHeader floated={false} className=" h-60 lg:h-60">
-        {/* <img src={logo} alt="profile-picture" className="h-full w-full " /> */}
-
-        <Image
-          src={logo}
-          alt="Your Photo"
-          className="rounded-none h-full w-full"
-          width={350}
-          height={300}
-        />
-      </CardHeader>
-
-      <CardBody>
-        <p className="font-bold text-custom-blue text-xl py-4">{name}</p>
-
-        <p className="text-custom-purple">{summary}</p>
-      </CardBody>
-      <CardFooter className="pt-0">
-        <a
-          href={link}
-          target="_blank"
-             rel="noopener noreferrer"
-          className="relative items-start justify-start inline-block px-6 py-3 mt-3 text-custom-blue border border-custom-blue hover:text-white font-bold overflow-hidden group"
-        >
-          <span className="absolute inset-0 bg-custom-blue transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></span>
-          <span className="relative">Learn More</span>
-        </a>
-      </CardFooter>
-    </Card>
+    <Link href={`/work/${id}`}>
+      <Card className="mt-6 w-96 cursor-pointer">
+        <CardHeader floated={false} className="h-60 lg:h-60">
+          <Image
+            src={logo}
+            alt={name}
+            className="rounded-none h-full w-full"
+            width={350}
+            height={300}
+          />
+        </CardHeader>
+        <CardBody>
+          <p className="font-bold text-custom-blue text-xl py-4">{name}</p>
+          <p className="text-custom-purple">{summary}</p>
+        </CardBody>
+        <CardFooter className="pt-0">
+          <div className="relative items-start justify-start inline-block px-6 py-3 mt-3 text-custom-blue border border-custom-blue hover:text-white font-bold overflow-hidden group">
+            <span className="absolute inset-0 bg-custom-blue transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-in-out"></span>
+            <span className="relative">Learn More</span>
+          </div>
+        </CardFooter>
+      </Card>
+    </Link>
   );
 }