feat:added project details page with prod. api

src/components/ProjectsSection.tsx

@@ -1,9 +1,10 @@
 import { Button } from "@/components/ui/button";
 import { useProjects } from "@/hooks/queires/useProjects";
 import { motion, useInView } from "framer-motion";
-import { ArrowRight, ExternalLink } from "lucide-react";
-import { useRef, useState } from "react";
+import { ArrowRight } from "lucide-react";
+import { useRef } from "react";
 import { Link } from "react-router-dom";
+import { ProjectCard } from "./ProjectCard";
 
 const gradientColors = [
   "from-neon-blue/90",
@@ -98,99 +99,3 @@ export default function ProjectsSection() {
     </section>
   );
 }
-
-function ProjectCard({ project, color, index, isInView }) {
-  const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = ((e.clientX - rect.left) / rect.width) * 100;
-    const y = ((e.clientY - rect.top) / rect.height) * 100;
-    setMousePosition({ x, y });
-  };
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 60, rotateX: 15 }}
-      animate={isInView ? { opacity: 1, y: 0, rotateX: 0 } : {}}
-      transition={{ duration: 0.6, delay: index * 0.08 }}
-      whileHover={{ scale: 1.02 }}
-      className="group relative rounded-3xl overflow-hidden cursor-pointer h-full"
-      onMouseMove={handleMouseMove}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => {
-        setIsHovered(false);
-        setMousePosition({ x: 50, y: 50 });
-      }}
-    >
-      {/* Main Card Container with 3D Tilt */}
-      <div
-        className="relative h-full rounded-3xl overflow-hidden shadow-2xl transition-transform duration-300"
-        style={{
-          transform: isHovered
-            ? `perspective(1000px) rotateX(${(50 - mousePosition.y) * 0.12}deg) rotateY(${(mousePosition.x - 50) * 0.15}deg)`
-            : "perspective(1000px) rotateX(0deg) rotateY(0deg)",
-          transition: isHovered
-            ? "transform 0.1s ease-out"
-            : "transform 0.4s ease-out",
-        }}
-      >
-        {/* Image Container */}
-        <div className="aspect-[16/13] overflow-hidden relative">
-          <img
-            src={project.image}
-            alt={project.title}
-            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
-          />
-
-          {/* Dynamic Shine Overlay */}
-          <div
-            className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"
-            style={{
-              background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(255,255,255,0.8) 0%, transparent 60%)`,
-            }}
-          />
-        </div>
-
-        {/* Gradient Overlay */}
-        <div
-          className={`absolute inset-0 bg-gradient-to-t ${color} via-black/40 to-transparent opacity-60 group-hover:opacity-90 transition-all duration-500`}
-        />
-
-        {/* Content */}
-        <div className="absolute inset-0 flex flex-col justify-end p-8">
-          <div className="space-y-4 transform transition-all duration-500 group-hover:translate-y-0">
-            {/* Category */}
-            <motion.span
-              initial={{ opacity: 0, y: 20 }}
-              animate={
-                isHovered ? { opacity: 1, y: 0 } : { opacity: 0.7, y: 10 }
-              }
-              className="inline-block px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md text-white text-xs font-medium border border-white/20"
-            >
-              {project.category}
-            </motion.span>
-
-            {/* Title */}
-            <h3 className="text-2xl md:text-3xl font-bold text-white leading-tight tracking-tight">
-              {project.title}
-            </h3>
-
-            {/* View Project Link */}
-            <Link
-              to={project.liveUrl}
-              className="flex items-center gap-3 text-white/80 group-hover:text-white transition-colors"
-            >
-              <span className="font-medium text-sm tracking-wider">live</span>
-              <ExternalLink className="w-5 h-5 transition-transform group-hover:rotate-45" />
-            </Link>
-          </div>
-        </div>
-
-        {/* Neon Border Glow */}
-        <div className="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-primary/60 transition-all duration-500 pointer-events-none neon-glow" />
-      </div>
-    </motion.div>
-  );
-}