251 lines
11 KiB
JavaScript
251 lines
11 KiB
JavaScript
"use client";
|
||
import { useState, useEffect } from "react";
|
||
import { Autoplay } from "swiper";
|
||
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import Link from "next/link";
|
||
import "swiper/css";
|
||
import GoogleReviewsBranding from "../GoogleReviewsBranding";
|
||
|
||
const testimonial_list_slider = {
|
||
spaceBetween: 30,
|
||
slidesPerView: 1,
|
||
navigation: false,
|
||
pagination: false, // ✅ pagination removed
|
||
loop: true,
|
||
autoplay: {
|
||
delay: 3000,
|
||
disableOnInteraction: false,
|
||
},
|
||
modules: [Autoplay],
|
||
};
|
||
|
||
const testimonials = [
|
||
{
|
||
id: 1,
|
||
text: "I had an amazing experience working with Metatrion Cube Solutions! They built a stunning website for my business that not only looks professional but is also fast, responsive, and easy to navigate. The team truly listened to my needs, offered great design ideas, and delivered everything on time. I’ve already received compliments from clients about how sleek and user-friendly the site is. Highly recommend them if you're looking for top-notch web development!",
|
||
author: "Dine360 Ads",
|
||
role: "Happy Customer",
|
||
},
|
||
{
|
||
id: 2,
|
||
text: "Appreciate your services. Your team is/was integral to our growth and success. Highly recommended for startups and small businesses. Thank you, Metatron Cube Solutions for the Digital and online support.",
|
||
author: "Rajesh",
|
||
domain: "Shiva Sakthi Restaurant Mississauga, Shivas Dosa Restaurant, Kitchener",
|
||
role: "Happy Customer",
|
||
},
|
||
{
|
||
id: 3,
|
||
text: "Working with Metatron Cube Software Solutions is always a wonderful experience. I say always because I am a repeat client, and would encourage anybody to hire them for your project. I can’t praise their team enough, they are able to make the daunting process of creating digital solutions easy to understand, and always within budget. They have made me a very happy, and loyal client.",
|
||
author: "Chansa",
|
||
role: "Happy Customer",
|
||
},
|
||
{
|
||
id: 4,
|
||
text: "Racewerks owes a huge shoutout to Metatroncube Software Solutions for their impeccable work! They expertly set up our e-commerce site, ensuring a seamless user experience. Beyond the initial setup, their digital marketing strategies have propelled our online presence, drawing more eyes and engagement to our brand. The level of service we've received is simply excellent, and their support is second to none. A truly professional team that's passionate about what they do. Highly recommended!",
|
||
author: "Race Werks",
|
||
role: "Happy Customer",
|
||
},
|
||
{
|
||
id: 5,
|
||
text: "Partnering with Metatroncube Software Solutions was a game-changer for our Rent South Beach Miami website. Their expertise in digital marketing, especially SEO and social media, significantly increased our online visibility and customer engagement. As a leading digital marketing agency in Canada, they delivered results beyond our expectations. Highly recommend them for anyone looking to boost their online presence!",
|
||
author: "RentSouth Beach Miami",
|
||
role: "Happy Customer",
|
||
},
|
||
{
|
||
id: 6,
|
||
text: "Very prompt and professional people helping our business in all kinds of marketing and designed our website. I strongly recommend",
|
||
author: "Gopinath Venkatesan",
|
||
role: "Happy Customer",
|
||
},
|
||
{
|
||
id: 7,
|
||
text: "Working with MetatronCube Software Solutions has been a wonderful experience. They have always far exceeded our expectations.",
|
||
author: "Cibus Industries Food processing equipments",
|
||
role: "Happy Customer",
|
||
},
|
||
{
|
||
id: 8,
|
||
text: "Had my website up and running in a week, ahead of schedule and I am so happy with it! Thank you so much! Highly recommend",
|
||
author: "Dylan Lepine",
|
||
role: "Happy Customer",
|
||
},
|
||
{
|
||
id: 9,
|
||
text: "Delivers product on mentioned time with high quality, quick response on requirements and queries. Resolves issues ASAP with high response. Excellent work",
|
||
author: "sureshkumar natarajan",
|
||
role: "Happy Customer",
|
||
},
|
||
{
|
||
id: 10,
|
||
text: "Had a professional site designed at a low price. Very satisfied. Friendly and resource full staff.",
|
||
author: "VINOD G",
|
||
role: "Happy Customer",
|
||
},
|
||
];
|
||
|
||
const TestimonialSection = () => {
|
||
const [reviews, setReviews] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [expandedReview, setExpandedReview] = useState(null);
|
||
const [isClient, setIsClient] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setIsClient(true);
|
||
async function loadReviews() {
|
||
try {
|
||
// console.log("Home: Fetching reviews...");
|
||
const res = await fetch("/api/reviews");
|
||
const data = await res.json();
|
||
// console.log("Home: Received data:", data);
|
||
const cleaned = (data.reviews || []).filter(r =>
|
||
(r.text || r.description || r.snippet || r.review_text || r.body || r.content) &&
|
||
r.rating >= 4
|
||
);
|
||
// console.log("Home: Cleaned reviews (rating >= 4):", cleaned.length);
|
||
setReviews(cleaned);
|
||
} catch (error) {
|
||
// console.error("Home: Failed to fetch reviews", error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
loadReviews();
|
||
}, []);
|
||
|
||
const displayedReviews = reviews.length > 0 && reviews.length < 3
|
||
? [...reviews, ...reviews, ...reviews]
|
||
: reviews;
|
||
|
||
function renderStars(rating) {
|
||
return [...Array(5)].map((_, i) => (
|
||
<span key={i} className={`fa fa-star ${i < rating ? "text-warning" : ""}`}></span>
|
||
));
|
||
}
|
||
|
||
function getReviewText(r) {
|
||
return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
|
||
}
|
||
|
||
function truncateText(text) {
|
||
return text.length > 150 ? text.substring(0, 150) + "..." : text;
|
||
}
|
||
|
||
function getProfileImage(r) {
|
||
const url = r.profile_photo_url || r.author_profile_photo_url || r.user?.thumbnail;
|
||
if (!url) return null;
|
||
return url.startsWith("http") ? url : `https://lh3.googleusercontent.com/${url}`;
|
||
}
|
||
|
||
function getInitials(name) {
|
||
if (!name) return "U";
|
||
return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
|
||
}
|
||
|
||
return (
|
||
<div className="team_area color-bg" id="team">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-lg-6">
|
||
<div className="consen-section-title pb-40">
|
||
<h5>OUR TESTIMONIALS</h5>
|
||
<h2> What They're </h2>
|
||
<h2>
|
||
{" "}
|
||
Talking <span>About us.</span>
|
||
</h2>
|
||
<GoogleReviewsBranding />
|
||
</div>
|
||
<div className="row">
|
||
<div className="col-lg-12">
|
||
<div className="testimonial-icon-thumb">
|
||
{/* <img src="/assets/images/elements/quotation.webp" alt="" /> */}
|
||
</div>
|
||
|
||
{loading ? (
|
||
<div className="text-center">
|
||
<p>Loading reviews...</p>
|
||
</div>
|
||
) : isClient && (
|
||
<Swiper {...testimonial_list_slider} className="testimonial_list">
|
||
{displayedReviews.map((r, index) => {
|
||
const fullText = getReviewText(r);
|
||
const isExpanded = expandedReview === index;
|
||
const profileImg = getProfileImage(r);
|
||
const name = r.user?.name || r.author_name || "Customer";
|
||
|
||
return (
|
||
<SwiperSlide key={index}>
|
||
<div className="google-review-card-home" style={{ background: 'transparent', padding: '10px 0' }}>
|
||
<div className="google-review-header d-flex align-items-center" style={{ marginBottom: '15px' }}>
|
||
<div className="google-avatar" style={{
|
||
width: '55px',
|
||
height: '55px',
|
||
minWidth: '55px',
|
||
borderRadius: '50%',
|
||
overflow: 'hidden',
|
||
background: '#eee',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
border: '1px solid #ddd'
|
||
}}>
|
||
{profileImg ? (
|
||
<img
|
||
src={profileImg}
|
||
alt={name}
|
||
onError={(e) => (e.target.style.display = 'none')}
|
||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||
/>
|
||
) : (
|
||
<span style={{ fontSize: '18px', fontWeight: 'bold', color: '#555' }}>{getInitials(name)}</span>
|
||
)}
|
||
</div>
|
||
<div className="google-user-info" style={{ marginLeft: '15px' }}>
|
||
<h4 className="google-name" style={{ fontSize: '18px', fontWeight: '700', margin: 0, color: '#333', lineHeight: '1.2' }}>
|
||
{name}
|
||
</h4>
|
||
<div className="google-stars" style={{ fontSize: '14px', marginTop: '4px', color: '#ffc107' }}>
|
||
{renderStars(r.rating)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="testimonial-content">
|
||
<div className="testimonial-text">
|
||
<p >
|
||
{fullText}
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
);
|
||
})}
|
||
</Swiper>
|
||
)}
|
||
|
||
<div className="new-button d-flex justify-content-center pt-30 pb-30">
|
||
<Link
|
||
legacyBehavior
|
||
href="https://www.google.com/maps/place/Metatron+Cube+Software+Solutions/@34.0518468,-56.3267266,3z/data=!4m8!3m7!1s0x89d4d7ff0d82df5b:0xf0ca6a97298a109c!8m2!3d34.0518468!4d-56.3267266!9m1!1b1!16s%2Fg%2F11k197xnvf?entry=ttu&g_ep=EgoyMDI1MTAxMy4wIKXMDSoASAFQAw%3D%3D"
|
||
>
|
||
<a target="_blank">Review us on Google</a>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6">
|
||
<div className="testimonial-thumb">
|
||
<img
|
||
src="/assets/images/home/testimonial/testimonial.webp"
|
||
alt="What they're talking about us"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
export default TestimonialSection; |