fix testimony rating issues

This commit is contained in:
sanjidaRimi023
2026-04-30 19:32:25 +06:00
parent a11da78a42
commit 6683ca045e
3 changed files with 28 additions and 22 deletions
+3 -3
View File
@@ -1,6 +1,6 @@
import logo from "@/assets/logo.webp";
import { motion } from "framer-motion";
import { Github, Instagram, Linkedin, Mail, Twitter } from "lucide-react";
import { Facebook, Github, Gitlab, Instagram, Linkedin, Mail, Twitter } from "lucide-react";
const quickLinks = [
{ name: "Home", href: "#home" },
@@ -23,8 +23,8 @@ const socials = [
href: "https://www.linkedin.com/company/techzaa",
label: "LinkedIn",
},
{ icon: Twitter, href: "#", label: "Twitter" },
{ icon: Github, href: "#", label: "GitHub" },
{ icon: Facebook, href: "https://www.facebook.com/techzaaalpha", label: "Facebook" },
{ icon: Gitlab, href: "https://gitlab.techzaa.tech", label: "Gitlab" },
{ icon: Instagram, href: "#", label: "Instagram" },
];
+1 -1
View File
@@ -150,7 +150,7 @@ export default function Navbar() {
onClick={() => setIsModalOpen(true)}
className="bg-primary text-primary-foreground font-semibold px-6 py-2 rounded-full animate-pulse-glow hover:scale-105 transition-transform"
>
Let Me Talk
Talk with Us
</Button>
</motion.div>
</div>
+23 -17
View File
@@ -1,20 +1,24 @@
import { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Star, ChevronLeft, ChevronRight, Quote } from 'lucide-react';
import { Button } from '@/components/ui/button';
import useEmblaCarousel from 'embla-carousel-react';
import Autoplay from 'embla-carousel-autoplay';
import { useReviews } from '@/hooks/queires/useReviews';
import { Button } from "@/components/ui/button";
import { useReviews } from "@/hooks/queires/useReviews";
import Autoplay from "embla-carousel-autoplay";
import useEmblaCarousel from "embla-carousel-react";
import { motion } from "framer-motion";
import { ChevronLeft, ChevronRight, Quote, Star } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
export default function TestimonialsSection() {
const { data: reveiwsData } = useReviews();
const testimonials = reveiwsData?.data.data;
const getStars = (rating: unknown) => {
const n = Number(rating);
if (!Number.isFinite(n) || n <= 0) return 0;
return Math.floor(n);
};
const [emblaRef, emblaApi] = useEmblaCarousel(
{ loop: true, align: 'center' },
[Autoplay({ delay: 5000, stopOnInteraction: false })]
{ loop: true, align: "center" },
[Autoplay({ delay: 5000, stopOnInteraction: false })],
);
const [selectedIndex, setSelectedIndex] = useState(0);
@@ -29,9 +33,9 @@ export default function TestimonialsSection() {
useEffect(() => {
if (!emblaApi) return;
onSelect();
emblaApi.on('select', onSelect);
emblaApi.on("select", onSelect);
return () => {
emblaApi.off('select', onSelect);
emblaApi.off("select", onSelect);
};
}, [emblaApi, onSelect]);
@@ -56,10 +60,12 @@ export default function TestimonialsSection() {
Client Stories
</span>
<h2 className="text-4xl md:text-5xl font-bold mb-6">
What Our <span className="text-primary neon-text-glow">Clients Say</span>
What Our{" "}
<span className="text-primary neon-text-glow">Clients Say</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
Don't just take our word for it - hear from the amazing companies we've had the pleasure of working with.
Don't just take our word for it - hear from the amazing companies
we've had the pleasure of working with.
</p>
</motion.div>
@@ -107,7 +113,7 @@ export default function TestimonialsSection() {
{/* Stars */}
<div className="flex gap-1 mb-6">
{[...Array(testimonial.rating)]?.map((_, i) => (
{[...Array(getStars(testimonial.rating))]?.map((_, i) => (
<Star
key={i}
className="w-5 h-5 fill-primary text-primary"
@@ -150,8 +156,8 @@ export default function TestimonialsSection() {
onClick={() => emblaApi?.scrollTo(index)}
className={`w-2 h-2 rounded-full transition-all duration-300 ${
selectedIndex === index
? 'w-8 bg-primary neon-glow'
: 'bg-muted-foreground/30 hover:bg-muted-foreground/50'
? "w-8 bg-primary neon-glow"
: "bg-muted-foreground/30 hover:bg-muted-foreground/50"
}`}
aria-label={`Go to slide ${index + 1}`}
/>