implement tanstack and fetch all data

src/pages/Blog.tsx

@@ -8,6 +8,7 @@ import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import PageTransition from '@/components/PageTransition';
 import { blogPosts } from '@/data/blogData';
+import { useBlogs } from './../hooks/queires/useBlogs';
 
 const categories = ['All', 'AI & Machine Learning', 'Cloud Solutions', 'Web Development', 'Mobile Development'];
 
@@ -29,13 +30,18 @@ const itemVariants = {
 };
 
 export default function Blog() {
+
+  
+  
+
+
   const [activeCategory, setActiveCategory] = useState('All');
   const [searchQuery, setSearchQuery] = useState('');
 
   const filteredPosts = blogPosts.filter(post => {
     const matchesCategory = activeCategory === 'All' || post.category === activeCategory;
     const matchesSearch = post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                          post.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
+      post.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
     return matchesCategory && matchesSearch;
   });
 
@@ -110,11 +116,10 @@ export default function Blog() {
                   key={category}
                   variant={activeCategory === category ? 'default' : 'outline'}
                   onClick={() => setActiveCategory(category)}
-                  className={`rounded-full px-6 transition-all duration-300 ${
-                    activeCategory === category
-                      ? '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
+                    ? 'neon-glow bg-primary text-primary-foreground'
+                    : 'glass border-primary/30 hover:border-primary'
+                    }`}
                 >
                   {category}
                 </Button>

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">