feat(projects): replace static data with real API integration
This commit is contained in:
rahat0078
@@ -3,47 +3,31 @@ import { motion, useInView } from 'framer-motion';
|
|||||||
import { ArrowRight, ExternalLink } from 'lucide-react';
|
import { ArrowRight, ExternalLink } from 'lucide-react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { Button } from '@/components/ui/button';
|
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() {
|
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 ref = useRef<HTMLElement>(null);
|
||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
|
|
||||||
@@ -79,45 +63,51 @@ export default function ProjectsSection() {
|
|||||||
|
|
||||||
{/* Projects Grid */}
|
{/* Projects Grid */}
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
<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>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* See All Button */}
|
{/* See All Button */}
|
||||||
|
|||||||
@@ -6,49 +6,6 @@ import useEmblaCarousel from 'embla-carousel-react';
|
|||||||
import Autoplay from 'embla-carousel-autoplay';
|
import Autoplay from 'embla-carousel-autoplay';
|
||||||
import { useReviews } from '@/hooks/queires/useReviews';
|
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() {
|
export default function TestimonialsSection() {
|
||||||
|
|
||||||
const {data: reveiwsData} = useReviews();
|
const {data: reveiwsData} = useReviews();
|
||||||
|
|||||||
Reference in New Issue
Block a user