data fetch in testimonial section
This commit is contained in:
+1
-1
File diff suppressed because one or more lines are too long
@@ -23,7 +23,7 @@ export default function TeamSection() {
|
|||||||
|
|
||||||
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" });
|
||||||
const shouldScroll = team.length >= 5;
|
const shouldScroll = team?.length >= 5;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="team" ref={ref} className="py-24 relative overflow-hidden">
|
<section id="team" ref={ref} className="py-24 relative overflow-hidden">
|
||||||
@@ -76,8 +76,8 @@ export default function TeamSection() {
|
|||||||
1280: { slidesPerView: 4 },
|
1280: { slidesPerView: 4 },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{team.map((member, index) => (
|
{team?.map((member, index) => (
|
||||||
<SwiperSlide key={member.name}>
|
<SwiperSlide key={member._id}>
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { Star, ChevronLeft, ChevronRight, Quote } from 'lucide-react';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import useEmblaCarousel from 'embla-carousel-react';
|
import useEmblaCarousel from 'embla-carousel-react';
|
||||||
import Autoplay from 'embla-carousel-autoplay';
|
import Autoplay from 'embla-carousel-autoplay';
|
||||||
|
import { useReviews } from '@/hooks/queires/useReviews';
|
||||||
|
|
||||||
const testimonials = [
|
const testimonials = [
|
||||||
{
|
{
|
||||||
@@ -49,6 +50,11 @@ const testimonials = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default function TestimonialsSection() {
|
export default function TestimonialsSection() {
|
||||||
|
|
||||||
|
const {data: reveiwsData} = useReviews();
|
||||||
|
|
||||||
|
const testimonials = reveiwsData?.data.data;
|
||||||
|
|
||||||
const [emblaRef, emblaApi] = useEmblaCarousel(
|
const [emblaRef, emblaApi] = useEmblaCarousel(
|
||||||
{ loop: true, align: 'center' },
|
{ loop: true, align: 'center' },
|
||||||
[Autoplay({ delay: 5000, stopOnInteraction: false })]
|
[Autoplay({ delay: 5000, stopOnInteraction: false })]
|
||||||
@@ -123,9 +129,9 @@ export default function TestimonialsSection() {
|
|||||||
{/* Carousel Container */}
|
{/* Carousel Container */}
|
||||||
<div className="overflow-hidden" ref={emblaRef}>
|
<div className="overflow-hidden" ref={emblaRef}>
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
{testimonials.map((testimonial, index) => (
|
{testimonials?.map((testimonial, index) => (
|
||||||
<div
|
<div
|
||||||
key={testimonial.id}
|
key={testimonial._id}
|
||||||
className="flex-[0_0_100%] min-w-0 px-4 md:flex-[0_0_80%] lg:flex-[0_0_60%]"
|
className="flex-[0_0_100%] min-w-0 px-4 md:flex-[0_0_80%] lg:flex-[0_0_60%]"
|
||||||
>
|
>
|
||||||
<motion.div
|
<motion.div
|
||||||
@@ -144,7 +150,7 @@ export default function TestimonialsSection() {
|
|||||||
|
|
||||||
{/* Stars */}
|
{/* Stars */}
|
||||||
<div className="flex gap-1 mb-6">
|
<div className="flex gap-1 mb-6">
|
||||||
{[...Array(testimonial.rating)].map((_, i) => (
|
{[...Array(testimonial.rating)]?.map((_, i) => (
|
||||||
<Star
|
<Star
|
||||||
key={i}
|
key={i}
|
||||||
className="w-5 h-5 fill-primary text-primary"
|
className="w-5 h-5 fill-primary text-primary"
|
||||||
@@ -154,22 +160,22 @@ export default function TestimonialsSection() {
|
|||||||
|
|
||||||
{/* Quote */}
|
{/* Quote */}
|
||||||
<p className="text-lg md:text-xl text-foreground/90 mb-8 leading-relaxed">
|
<p className="text-lg md:text-xl text-foreground/90 mb-8 leading-relaxed">
|
||||||
"{testimonial.quote}"
|
"{testimonial.review}"
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Author */}
|
{/* Author */}
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<img
|
<img
|
||||||
src={testimonial.avatar}
|
src={testimonial.thumbnail}
|
||||||
alt={testimonial.name}
|
alt={testimonial.client_name}
|
||||||
className="w-14 h-14 rounded-full object-cover border-2 border-primary/50"
|
className="w-14 h-14 rounded-full object-cover border-2 border-primary/50"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<h4 className="font-bold text-foreground">
|
<h4 className="font-bold text-foreground">
|
||||||
{testimonial.name}
|
{testimonial.client_name}
|
||||||
</h4>
|
</h4>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
{testimonial.role}
|
{testimonial.designation}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -181,7 +187,7 @@ export default function TestimonialsSection() {
|
|||||||
|
|
||||||
{/* Dots Indicator */}
|
{/* Dots Indicator */}
|
||||||
<div className="flex justify-center gap-2 mt-8">
|
<div className="flex justify-center gap-2 mt-8">
|
||||||
{testimonials.map((_, index) => (
|
{testimonials?.map((_, index) => (
|
||||||
<button
|
<button
|
||||||
key={index}
|
key={index}
|
||||||
onClick={() => emblaApi?.scrollTo(index)}
|
onClick={() => emblaApi?.scrollTo(index)}
|
||||||
|
|||||||
Reference in New Issue
Block a user