implement tanstack and fetch all data

src/pages/Projects.tsx

@@ -7,6 +7,10 @@ import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import PageTransition from '@/components/PageTransition';
 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 },
@@ -36,6 +40,8 @@ const itemVariants = {
 };
 
 export default function Projects() {
+
+
   const [activeCategory, setActiveCategory] = useState('all');
 
   const filteredProjects = activeCategory === 'all'
@@ -46,7 +52,7 @@ export default function Projects() {
     <PageTransition>
       <div className="min-h-screen bg-background overflow-x-hidden">
         <Navbar />
-        
+
         {/* Hero Section */}
         <section className="pt-32 pb-16 relative overflow-hidden">
           <div className="absolute inset-0">
@@ -98,11 +104,10 @@ export default function Projects() {
                     key={category.id}
                     variant={activeCategory === category.id ? 'default' : 'outline'}
                     onClick={() => setActiveCategory(category.id)}
-                    className={`rounded-full px-6 transition-all duration-300 ${
-                      activeCategory === category.id
-                        ? 'neon-glow bg-primary text-primary-foreground'
-                        : 'glass border-primary/30 hover:border-primary'
-                    }`}
+                    className={`rounded-full px-6 transition-all duration-300 ${activeCategory === category.id
+                      ? 'neon-glow bg-primary text-primary-foreground'
+                      : 'glass border-primary/30 hover:border-primary'
+                      }`}
                   >
                     {Icon && <Icon className="w-4 h-4 mr-2" />}
                     {category.name}
@@ -140,7 +145,7 @@ export default function Projects() {
                         className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                       />
                       <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent opacity-60" />
-                      
+
                       {/* Category Badge */}
                       <div className="absolute top-4 left-4">
                         <span className="px-3 py-1 rounded-full bg-primary/20 text-primary text-sm font-medium backdrop-blur-sm border border-primary/30">