diff --git a/components/CarouselTestimonials.tsx b/components/CarouselTestimonials.tsx index 67b2338..65c9c49 100644 --- a/components/CarouselTestimonials.tsx +++ b/components/CarouselTestimonials.tsx @@ -4,6 +4,7 @@ import { ImageWithFallback } from "./figma/ImageWithFallback"; import clutchLogo from '../src/images/clutch-logo.png'; import { useState, useEffect, useRef } from "react"; import React from "react"; +import googleLogo from '../src/images/google-logo.jpg'; const testimonials = [ { @@ -199,11 +200,10 @@ const StarRating = ({ rating }: { rating: number }) => { {Array.from({ length: 5 }).map((_, i) => ( ))} @@ -211,17 +211,17 @@ const StarRating = ({ rating }: { rating: number }) => { }; // Individual testimonial card -const TestimonialCard = ({ - testimonial, - onHover, - onLeave -}: { +const TestimonialCard = ({ + testimonial, + onHover, + onLeave +}: { testimonial: typeof testimonials[0]; onHover?: () => void; onLeave?: () => void; }) => { return ( -
- + {/* Quote */}

"{testimonial.quote}"

- + {/* Author Info - Without Avatar */}
@@ -272,9 +272,9 @@ const MarqueeRow = ({ testimonials: rowTestimonials }: { testimonials: typeof te const startAnimation = async (fromPosition: number = 0) => { const remainingDistance = TOTAL_DISTANCE - fromPosition; const remainingDuration = (Math.abs(remainingDistance) / Math.abs(TOTAL_DISTANCE)) * ANIMATION_DURATION; - + startTimeRef.current = Date.now(); - + try { await controls.start({ x: [fromPosition, TOTAL_DISTANCE], @@ -294,7 +294,7 @@ const MarqueeRow = ({ testimonials: rowTestimonials }: { testimonials: typeof te const pauseAnimation = () => { controls.stop(); pauseTimeRef.current = Date.now(); - + // Calculate current position based on elapsed time const elapsedTime = (pauseTimeRef.current - startTimeRef.current) / 1000; const progress = (elapsedTime % ANIMATION_DURATION) / ANIMATION_DURATION; @@ -331,7 +331,7 @@ const MarqueeRow = ({ testimonials: rowTestimonials }: { testimonials: typeof te }; return ( -
{/* First set */} {rowTestimonials.map((testimonial, index) => ( - ( - { className="w-16 h-16 object-contain rounded-lg" />
- + {/* Rating Info */}
@@ -427,7 +427,7 @@ export const CarouselTestimonials = () => { Don't just take our word for it. Here's what founders and product leaders say about working with us.
- + {/* Single Row Marquee Testimonials */}
{
- - {/* Centered Clutch Rating */} -
+ +
+ + {/* Google Reviews Rating */} + + {/* Google Logo */} +
+ +
+ + {/* Rating Info */} +
+
+ 4.8 +
+ {[...Array(5)].map((_, i) => ( + + ))} +
+
+
+ (38 reviews) +
+
+ Highly Rated on Google Reviews +
+
+
diff --git a/src/images/google-logo.jpg b/src/images/google-logo.jpg new file mode 100644 index 0000000..9d63d14 Binary files /dev/null and b/src/images/google-logo.jpg differ