fetch real api

src/App.tsx

@@ -24,7 +24,7 @@ function AnimatedRoutes() {
         <Route path="/projects" element={<Projects />} />
         <Route path="/projects/:slug" element={<ProjectDetails />} />
         <Route path="/blog" element={<Blog />} />
-        <Route path="/blog/:slug" element={<BlogArticle />} />
+        <Route path="/blog/:id" element={<BlogArticle />} />
         {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
         <Route path="*" element={<NotFound />} />
       </Routes>

src/components/BlogSection.tsx

@@ -2,7 +2,7 @@ import { motion } from 'framer-motion';
 import { Calendar, Clock, ArrowRight, User } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
-import { blogPosts } from '@/data/blogData';
+import { useBlogs } from '@/hooks/queires/useBlogs';
 
 const containerVariants = {
   hidden: { opacity: 0 },
@@ -24,6 +24,11 @@ const itemVariants = {
 };
 
 export default function BlogSection() {
+
+  const {data} = useBlogs()
+  const blogPosts = data?.data.result;
+
+
   return (
     <section id="blog" className="py-24 relative overflow-hidden">
       {/* Background elements */}
@@ -57,9 +62,9 @@ export default function BlogSection() {
           viewport={{ once: true, margin: "-100px" }}
           className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
         >
-          {blogPosts.map((post) => (
+          {blogPosts?.map((post) => (
             <motion.article
-              key={post.id}
+              key={post._id}
               variants={itemVariants}
               className="group glass rounded-2xl overflow-hidden hover:neon-glow transition-all duration-500"
             >
@@ -103,7 +108,7 @@ export default function BlogSection() {
 
                 {/* Read More */}
                 <Link
-                  to={`/blog/${post.slug}`}
+                  to={`/blog/${post._id}`}
                   className="inline-flex items-center gap-2 text-primary font-medium text-sm group/link hover:gap-3 transition-all"
                 >
                   Read Article

src/components/ProjectsSection.tsx

@@ -22,8 +22,7 @@ export default function ProjectsSection() {
   });
 
   
-  const projects = projectsData?.data.data.result
+  const projects = projectsData?.data.data.result;
-  console.log(projects);
 
 
 

src/data/blogData.ts

@@ -56,6 +56,9 @@ export const authors: Record<string, Author> = {
   },
 };
 
+
+ 
+
 export const blogPosts: BlogPost[] = [
   {
     id: 1,

src/pages/Blog.tsx

@@ -7,7 +7,6 @@ import { Input } from '@/components/ui/input';
 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'];
@@ -31,14 +30,15 @@ const itemVariants = {
 
 export default function Blog() {
 
-  
+  const {data} = useBlogs();
+  const blogPosts = data?.data.result;
   
 
 
   const [activeCategory, setActiveCategory] = useState('All');
   const [searchQuery, setSearchQuery] = useState('');
 
-  const filteredPosts = blogPosts.filter(post => {
+  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());
@@ -137,13 +137,13 @@ export default function Blog() {
               animate="visible"
               className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
             >
-              {filteredPosts.map((post) => (
+              {filteredPosts?.map((post) => (
                 <motion.article
-                  key={post.id}
+                  key={post._id}
                   variants={itemVariants}
                   className="group glass rounded-2xl overflow-hidden hover:neon-glow transition-all duration-500"
                 >
-                  <Link to={`/blog/${post.slug}`}>
+                  <Link to={`/blog/${post._id}`}>
                     <div className="relative h-48 overflow-hidden">
                       <img
                         src={post.image}
@@ -184,7 +184,7 @@ export default function Blog() {
               ))}
             </motion.div>
 
-            {filteredPosts.length === 0 && (
+            {filteredPosts?.length === 0 && (
               <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}

src/pages/BlogArticle.tsx

@@ -9,11 +9,15 @@ import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 import PageTransition from '@/components/PageTransition';
 import { getPostBySlug, getRelatedPosts } from '@/data/blogData';
+import { useBlogById } from '@/hooks/queires/useBlogs';
 
 export default function BlogArticle() {
-  const { slug } = useParams<{ slug: string }>();
+  const { id } = useParams<{ id: string }>();
+  const {data} = useBlogById(id);
+
+  const post = data?.data.data
   const navigate = useNavigate();
-  const post = getPostBySlug(slug || '');
+  // const post = getPostBySlug(id || '');
 
   if (!post) {
     return (

src/pages/Projects.tsx

@@ -1,16 +1,13 @@
 import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence, calcLength } from 'framer-motion';
-import { ArrowLeft, Globe, Smartphone, Brain, Cloud, ExternalLink, Github } from 'lucide-react';
+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 }}