feat: updated projectcard component to use the new data shape properly

components/content/ProjectCard.tsx

@@ -1,23 +1,35 @@
-import { IconArrowNarrowRight } from '@tabler/icons-react';
+import Link from 'next/link';
+import { IconArrowNarrowRight, IconExternalLink } from '@tabler/icons-react';
+import { colors } from '@/constants';
 
 interface ProjectCardProps {
+    slug: string;
     title: string;
     year: string;
     stack: string[];
     description: string;
-    outcome: string;
+    liveUrl: string;
 }
 
-export default function ProjectCard({ title, year, stack, description, outcome }: ProjectCardProps) {
+export default function ProjectCard({ slug, title, year, stack, description, liveUrl }: ProjectCardProps) {
   return (
     <section className="space-y-2 border-t border-neutral-700 pt-4 flex flex-col mt-5">
-        <button className='flex justify-between hover:text-neutral-500 transition-colors items-center w-full text-left cursor-pointer group'>
+        <Link href={`/projects/${slug}`} className='flex justify-between hover:text-neutral-500 transition-colors items-center w-full text-left cursor-pointer group'>
             <h1 className="text-[24px] font-semibold">{title}</h1>
             <IconArrowNarrowRight className='group-hover:scale-150 transition-transform'/>
-        </button>
+        </Link>
         <p className="text-md text-neutral-400 text-muted">{year} — {stack.join(' · ')}</p>
         <p className="text-xl">{description}</p>
-        <p className="text-md text-neutral-400 text-muted">{outcome}</p>
+        <a
+          href={liveUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="mt-2 inline-flex w-fit items-center gap-2 rounded-lg border border-neutral-700 px-4 py-2 text-[15px] font-medium transition-colors hover:border-neutral-500"
+          style={{ color: colors.accent }}
+        >
+          Live Demo
+          <IconExternalLink size={18} />
+        </a>
     </section>
   );
 }