fix/ Fixes issue of project card routing and makes the cards more interactive

src/app/page.jsx

@@ -24,6 +24,7 @@ import projects from '@/helper/projects'
 export default function Home() {
   const [randomProjects, setRandomProjects] = useState([])
   const [featuredProjects, setFeaturedProjects] = useState([])
+  const[hoveredProjectIndex, setHoveredProjectIndex] = useState(null)
 
   useEffect(() => {
     // Select specific projects as featured
@@ -210,15 +211,31 @@ export default function Home() {
           <div className="mt-10">
             <Container.Inner>
               <div className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 justify-items-center">
-                {randomProjects.map((project) => (
-                  <div key={project.name} className="w-full max-w-[18rem] sm:max-w-none">
+                {randomProjects.map((project, index) =>{
+
+                  const isHovered = hoveredProjectIndex === index;
+                  const isDimmed = hoveredProjectIndex != null && !isHovered;
+                  const offSetDirection = index<hoveredProjectIndex?-1:1;
+
+                  return(
+                  <div key={project.name} className="w-full max-w-[18rem] sm:max-w-none"
+                  onMouseEnter={()=>setHoveredProjectIndex(index)}
+                  onMouseLeave={()=>setHoveredProjectIndex(null)}
+                  onFocus={()=>setHoveredProjectIndex(index)}
+                  onBlur={()=>setHoveredProjectIndex(null)}
+                  >
                     <CardEffect
                       heading={project.name}
                       logo={project.logo}
                       content={project.description}
+                      href = {project.link.href}
+                      isHovered = {isHovered}
+                      isDimmed = {isDimmed}
+                      offSetDirection = {offSetDirection}
                     />
                   </div>
-                ))}
+                )
+                })}
               </div>
             </Container.Inner>
           </div>

src/components/home/CardEffect.jsx

@@ -2,23 +2,45 @@
 
 import Image from 'next/image'
 import { motion } from 'framer-motion'
+import Link from 'next/link'
 
-export function CardEffect({ heading, content, logo }) {
+const MotionLink = motion(Link)
+
+export function CardEffect({ heading, content, logo, href = '#', isHovered = false, isDimmed = false, offSetDirection = 0 }) {
+
+    const isExternalLink = href.startsWith("http")
+    const shouldShift = isDimmed && offSetDirection !== 0
+    const shiftAmount = offSetDirection * 18
 
     const wrappedHeading = (heading ?? '')
         .replace(/([a-z])([A-Z])/g, '$1\u200B$2')
         .replace(/([A-Z])([A-Z][a-z])/g, '$1\u200B$2')
 
     return (
-        <motion.a
+        <MotionLink
+            href={href}
+            target = {isExternalLink ? '_blank': undefined}
+            rel={isExternalLink ? 'noopener noreferrer':undefined}
+            aria-label = {`View ${heading}`}
             initial={{ opacity: 0, rotateY: -90 }}
             whileInView={{ opacity: 1, rotateY: 0 }}
+            animate={{
+            scale: isHovered ? 1.08 : isDimmed ? 0.94 : 1,
+            x: shouldShift ? shiftAmount : 0,
+            y: isDimmed ? 8 : 0,
+            zIndex: isHovered ? 10 : 1,
+            }}
             viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
+            transition={{
+            opacity: { duration: 0.8 },
+            rotateY: { duration: 0.8 },
+            scale: { duration: 0.25, ease: 'easeOut' },
+            x: { duration: 0.25, ease: 'easeOut' },
+            y: { duration: 0.25, ease: 'easeOut' },
+            }}
             className="group relative block h-[22rem] w-full cursor-pointer [perspective:1000px]"
         >
-            <div className="relative h-full w-full transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
-
+            <div className="relative h-full w-full transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] group-focus:[transform:rotateY(180deg)]">
                 {/* Front Face */}
                 <div className="absolute inset-0 h-full w-full shadow-xl flex flex-col items-center justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800 [backface-visibility:hidden]">
                     <div className="px-8 pb-4 w-full flex flex-col items-center justify-center">
@@ -49,6 +71,6 @@ export function CardEffect({ heading, content, logo }) {
                 </div>
 
             </div>
-        </motion.a>
+        </MotionLink>
     )
 }