fix testimony rating issues
This commit is contained in:
@@ -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" },
|
||||
];
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}`}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user