fetch real api

src/pages/Projects.tsx

@@ -1,16 +1,13 @@
 import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { ArrowLeft, Globe, Smartphone, Brain, Cloud, ExternalLink, Github } from 'lucide-react';
+import { motion, AnimatePresence, calcLength } from 'framer-motion';
+import { ArrowLeft, Globe, Smartphone, Brain, Cloud, ExternalLink, Workflow, Github } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import PageTransition from '@/components/PageTransition';
+import { useProjects } from '@/hooks/queires/useProjects';
 import { projects } from '@/data/projectData';
-import { useBlogById, useBlogs } from './../hooks/queires/useBlogs';
-import { useProjectById, useProjects } from '@/hooks/queires/useProjects';
-import { useTeam } from '@/hooks/queires/useTeam';
-import { useReviews } from '@/hooks/queires/useReviews';
 
 const categories = [
   { id: 'all', name: 'All Projects', icon: null },
@@ -18,6 +15,7 @@ const categories = [
   { id: 'mobile', name: 'Mobile', icon: Smartphone },
   { id: 'ai', name: 'AI', icon: Brain },
   { id: 'cloud', name: 'Cloud', icon: Cloud },
+  { id: 'devops', name: 'DEVOPS', icon: Workflow },
 ];
 
 const containerVariants = {
@@ -41,12 +39,14 @@ const itemVariants = {
 
 export default function Projects() {
 
+  const {data: projectsData} = useProjects();
+  const projects = projectsData?.data.data.result;
 
   const [activeCategory, setActiveCategory] = useState('all');
 
   const filteredProjects = activeCategory === 'all'
     ? projects
-    : projects.filter(project => project.category === activeCategory);
+    : projects?.filter(project => project.category === activeCategory);
 
   return (
     <PageTransition>
@@ -97,7 +97,7 @@ export default function Projects() {
               transition={{ duration: 0.6, delay: 0.2 }}
               className="flex flex-wrap justify-center gap-3 mb-16"
             >
-              {categories.map((category) => {
+              {categories?.map((category) => {
                 const Icon = category.icon;
                 return (
                   <Button
@@ -130,9 +130,9 @@ export default function Projects() {
                 exit="hidden"
                 className="grid md:grid-cols-2 gap-8"
               >
-                {filteredProjects.map((project) => (
+                {filteredProjects?.map((project) => (
                   <motion.article
-                    key={project.id}
+                    key={project._id}
                     variants={itemVariants}
                     layout
                     className="group glass rounded-3xl overflow-hidden hover:neon-glow transition-all duration-500"
@@ -193,7 +193,7 @@ export default function Projects() {
 
                       {/* Technologies */}
                       <div className="flex flex-wrap gap-2">
-                        {project.technologies.map((tech) => (
+                        {project?.technologies.map((tech) => (
                           <span
                             key={tech}
                             className="px-3 py-1 rounded-full bg-muted text-muted-foreground text-xs font-medium"
@@ -209,7 +209,7 @@ export default function Projects() {
             </AnimatePresence>
 
             {/* Empty State */}
-            {filteredProjects.length === 0 && (
+            {filteredProjects?.length === 0 && (
               <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}