feat(projects): replace static data with real API integration

src/components/ProjectsSection.tsx

@@ -3,47 +3,31 @@ import { motion, useInView } from 'framer-motion';
 import { ArrowRight, ExternalLink } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
+import { useProjects } from '@/hooks/queires/useProjects';
 
-const projects = [
-  {
-    title: 'FinTech Dashboard',
-    category: 'Web Application',
-    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop',
-    color: 'from-neon-blue/80',
-  },
-  {
-    title: 'Health Tracker App',
-    category: 'Mobile App',
-    image: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=600&h=400&fit=crop',
-    color: 'from-neon-purple/80',
-  },
-  {
-    title: 'AI Content Platform',
-    category: 'AI Solution',
-    image: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=600&h=400&fit=crop',
-    color: 'from-neon-green/80',
-  },
-  {
-    title: 'E-Commerce Suite',
-    category: 'Web Application',
-    image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=600&h=400&fit=crop',
-    color: 'from-neon-blue/80',
-  },
-  {
-    title: 'Smart IoT Platform',
-    category: 'Cloud Solution',
-    image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop',
-    color: 'from-neon-purple/80',
-  },
-  {
-    title: 'Learning Management',
-    category: 'Web Application',
-    image: 'https://images.unsplash.com/photo-1501504905252-473c47e087f8?w=600&h=400&fit=crop',
-    color: 'from-neon-green/80',
-  },
+
+
+const gradientColors = [
+  "from-neon-blue/80",
+  "from-neon-purple/80",
+  "from-neon-green/80",
+  "from-neon-pink/80"
 ];
 
 export default function ProjectsSection() {
+
+  const { data: projectsData } = useProjects({
+    fields: "category, title, image",
+    limit: 6
+  });
+
+  
+  const projects = projectsData?.data.data.result
+  console.log(projects);
+
+
+
+
   const ref = useRef<HTMLElement>(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
@@ -79,9 +63,12 @@ export default function ProjectsSection() {
 
         {/* Projects Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-          {projects.map((project, index) => (
+          {projects?.map((project, index) => {
+            const color = gradientColors[index % gradientColors.length];
+
+            return (
               <motion.div
-              key={project.title}
+                key={project._id}
                 initial={{ opacity: 0, y: 30 }}
                 animate={isInView ? { opacity: 1, y: 0 } : {}}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
@@ -98,7 +85,9 @@ export default function ProjectsSection() {
                 </div>
 
                 {/* Overlay */}
-              <div className={`absolute inset-0 bg-gradient-to-t ${project.color} to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300`} />
+                <div
+                  className={`absolute inset-0 bg-gradient-to-t ${color} to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
+                />
 
                 {/* Content */}
                 <div className="absolute inset-0 flex flex-col justify-end p-6">
@@ -117,7 +106,8 @@ export default function ProjectsSection() {
                 {/* Border glow effect */}
                 <div className="absolute inset-0 rounded-2xl border-2 border-transparent group-hover:border-primary/50 group-hover:neon-glow transition-all duration-300 pointer-events-none" />
               </motion.div>
-          ))}
+            );
+          })}
         </div>
 
         {/* See All Button */}

src/components/TestimonialsSection.tsx

@@ -6,49 +6,6 @@ import useEmblaCarousel from 'embla-carousel-react';
 import Autoplay from 'embla-carousel-autoplay';
 import { useReviews } from '@/hooks/queires/useReviews';
 
-const testimonials = [
-  {
-    id: 1,
-    name: 'Jennifer Martinez',
-    role: 'CEO, InnovateTech',
-    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=face',
-    rating: 5,
-    quote: 'TechZaa transformed our entire digital infrastructure. Their AI solutions increased our operational efficiency by 40%. Absolutely incredible team to work with!',
-  },
-  {
-    id: 2,
-    name: 'Michael Chen',
-    role: 'CTO, FutureScale',
-    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face',
-    rating: 5,
-    quote: 'The mobile app they developed for us exceeded all expectations. User engagement increased by 200% within the first month. Highly recommend their services.',
-  },
-  {
-    id: 3,
-    name: 'Sarah Thompson',
-    role: 'Director of Operations, CloudFirst',
-    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face',
-    rating: 5,
-    quote: 'Their cloud migration expertise saved us countless hours and reduced our infrastructure costs by 35%. Professional, efficient, and always available.',
-  },
-  {
-    id: 4,
-    name: 'David Rodriguez',
-    role: 'Founder, StartupLabs',
-    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
-    rating: 5,
-    quote: 'From concept to launch, TechZaa was with us every step. Their attention to detail and innovative approach made our product stand out in a crowded market.',
-  },
-  {
-    id: 5,
-    name: 'Emily Watson',
-    role: 'VP Engineering, DataFlow',
-    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop&crop=face',
-    rating: 5,
-    quote: 'The best tech partner we\'ve ever worked with. Their team understood our vision and delivered a solution that perfectly aligned with our business goals.',
-  },
-];
-
 export default function TestimonialsSection() {
 
   const {data: reveiwsData} = useReviews();