fetch real api

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