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',
+const gradientColors = [
-    category: 'Web Application',
+  "from-neon-blue/80",
-    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop',
+  "from-neon-purple/80",
-    color: 'from-neon-blue/80',
+  "from-neon-green/80",
-  },
+  "from-neon-pink/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',
-  },
 ];
 
 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' });
 
@@ -72,52 +56,58 @@ export default function ProjectsSection() {
             Our <span className="text-primary neon-text-glow">Projects</span>
           </h2>
           <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
-            Explore our latest work and see how we've helped businesses 
+            Explore our latest work and see how we've helped businesses
             transform their digital presence.
           </p>
         </motion.div>
 
         {/* 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) => {
-            <motion.div
+            const color = gradientColors[index % gradientColors.length];
-              key={project.title}
+
-              initial={{ opacity: 0, y: 30 }}
+            return (
-              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              <motion.div
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+                key={project._id}
-              whileHover={{ y: -8 }}
+                initial={{ opacity: 0, y: 30 }}
-              className="group relative rounded-2xl overflow-hidden cursor-pointer"
+                animate={isInView ? { opacity: 1, y: 0 } : {}}
-            >
+                transition={{ duration: 0.5, delay: index * 0.1 }}
-              {/* Image */}
+                whileHover={{ y: -8 }}
-              <div className="aspect-[4/3] overflow-hidden">
+                className="group relative rounded-2xl overflow-hidden cursor-pointer"
-                <img
+              >
-                  src={project.image}
+                {/* Image */}
-                  alt={project.title}
+                <div className="aspect-[4/3] overflow-hidden">
-                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                  <img
+                    src={project.image}
+                    alt={project.title}
+                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                  />
+                </div>
+
+                {/* Overlay */}
+                <div
+                  className={`absolute inset-0 bg-gradient-to-t ${color} to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
                 />
-              </div>
 
-              {/* Overlay */}
+                {/* Content */}
-              <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 flex flex-col justify-end p-6">
-
+                  <div className="transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
-              {/* Content */}
+                    <span className="inline-block px-3 py-1 rounded-full bg-background/20 backdrop-blur-sm text-white text-xs font-medium mb-2">
-              <div className="absolute inset-0 flex flex-col justify-end p-6">
+                      {project.category}
-                <div className="transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
+                    </span>
-                  <span className="inline-block px-3 py-1 rounded-full bg-background/20 backdrop-blur-sm text-white text-xs font-medium mb-2">
+                    <h3 className="text-xl font-bold text-white mb-2">{project.title}</h3>
-                    {project.category}
+                    <div className="flex items-center gap-2 text-white/80 text-sm">
-                  </span>
+                      <span>View Project</span>
-                  <h3 className="text-xl font-bold text-white mb-2">{project.title}</h3>
+                      <ExternalLink className="w-4 h-4" />
-                  <div className="flex items-center gap-2 text-white/80 text-sm">
+                    </div>
-                    <span>View Project</span>
-                    <ExternalLink className="w-4 h-4" />
                   </div>
                 </div>
-              </div>
 
-              {/* Border glow effect */}
+                {/* 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" />
+                <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>
+              </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();