558 lines
32 KiB
JavaScript
558 lines
32 KiB
JavaScript
import Abou from "@/src/components/services-details-banner/abou.js";
|
||
import Counter from "@/src/components/Counter";
|
||
import Faqs from "@/src/components/Faqs";
|
||
import LogoSlider from "@/src/components/LogoSlider";
|
||
import Layout from "@/src/layout/Layout";
|
||
import { testimonial_list_slider } from "@/src/sliderProps";
|
||
import Link from "next/link";
|
||
import { Nav, Tab } from "react-bootstrap";
|
||
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import { useEffect, useState } from "react";
|
||
import { brandListProps2 } from "@/src/sliderProps";
|
||
import SubCard from "@/src/components/AboveFooter";
|
||
import ConsenHead from "@/src/ConsenHead";
|
||
import GoogleReviewsBranding from "@/src/components/GoogleReviewsBranding";
|
||
|
||
const About = () => {
|
||
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("About: Fetching reviews...");
|
||
const res = await fetch("/api/reviews");
|
||
const data = await res.json();
|
||
// console.log("About: 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("About: Cleaned reviews (rating >= 4):", cleaned.length);
|
||
setReviews(cleaned);
|
||
} catch (error) {
|
||
// console.error("About: 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={`fas fa-star ${i < rating ? "text-warning" : "text-secondary"}`} style={{ marginRight: "2px" }}></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) {
|
||
// Check multiple possible field names for profile images
|
||
const url = r.profile_photo_url ||
|
||
r.author_profile_photo_url ||
|
||
r.user?.thumbnail ||
|
||
r.user?.profile_photo_url ||
|
||
r.thumbnail ||
|
||
r.profile_picture ||
|
||
r.avatar;
|
||
|
||
if (!url) return null;
|
||
|
||
// If it's already a full URL, return it
|
||
if (url.startsWith("http")) {
|
||
return url;
|
||
}
|
||
|
||
// Otherwise, construct the Googleusercontent URL
|
||
return `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 (
|
||
<>
|
||
<ConsenHead title="About - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo" description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth." />
|
||
<Layout header={3} footer={3}>
|
||
<Abou pageName={"ABOUT US"} />
|
||
{/* ========================================================= */}
|
||
{/* Start abouts area */}
|
||
{/* ========================================================= */}
|
||
<div className="about-area new-style bg-white">
|
||
<div className="container">
|
||
<div className="row align-items-center">
|
||
|
||
<div className="col-lg-6 mb-4 mb-lg-0">
|
||
<div className="about-thumb">
|
||
<img src="/assets/images/about/about.webp" alt="Our story" className="img-fluid" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-6">
|
||
<div className="consen-section-title mb-4">
|
||
<div className="consen-section-title">
|
||
<h5>About Us</h5>
|
||
<h2>Our<span> Story</span></h2>
|
||
</div>
|
||
<p className="about-text2 pt-3">
|
||
Metatroncube Software Solutions was born from a passion for technology and a vision to
|
||
revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have
|
||
been pioneering custom software solutions since 2019.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="row g-3">
|
||
<div className="col-12">
|
||
<div className="d-flex align-items-start mb-3">
|
||
<img src="/assets/images/about/innovative.webp " alt="Innovative technology and strategy by Metatron Cube Solutions." className="me-3 pr-3" />
|
||
<div>
|
||
<h5>Innovative Solutions</h5>
|
||
<p>Tailoring cutting-edge web and mobile applications that set industry standards.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-12">
|
||
<div className="d-flex align-items-start mb-3">
|
||
<img src="/assets/images/about/teamwork.webp" alt="digital solutions team" className="me-3 pr-3" />
|
||
<div>
|
||
<h5>Expert Teamwork</h5>
|
||
<p>A synergy of skilled developers and creative designers committed to your success.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-12">
|
||
<div className="d-flex align-items-start mb-3">
|
||
<img src="/assets/images/about/future.webp " alt="Future-ready strategy by Metatron Cube Solutions." className="me-3 pr-3" />
|
||
<div>
|
||
<h5>Future-Ready Approach</h5>
|
||
<p>Anticipating market trends to keep your business ahead of the curve.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/*==================================================*/}
|
||
{/* End abouts Area */}
|
||
{/*==================================================*/}
|
||
{/*==================================================*/}
|
||
{/* Start Brand Area */}
|
||
{/*==================================================*/}
|
||
<div className="about brand-section new-style">
|
||
<div className="container">
|
||
<div className="row">
|
||
<Swiper {...brandListProps2} className="brand-list2 owl-carousel">
|
||
<SwiperSlide>
|
||
<div className="brand-single-box">
|
||
<div className="brand-thumb">
|
||
<img src="/assets/images/add/icon-1.webp" alt="BigCommerce Partner logo, symbolizing a strong e-commerce alliance." />
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide>
|
||
<div className="brand-single-box">
|
||
<div className="brand-thumb">
|
||
<img src="/assets/images/add/icon-2.webp" alt="Shopify logo with a green shopping bag icon." />
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide>
|
||
<div className="brand-single-box">
|
||
<div className="brand-thumb">
|
||
<img src="/assets/images/add/icon-3.webp" alt="Constant Contact logo with a stylized '@' symbol." />
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide>
|
||
<div className="brand-single-box">
|
||
<div className="brand-thumb">
|
||
<img src="/assets/images/add/icon-4.webp" alt="HIKE SEO logo depicting a rising graph within the letter 'K'." />
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide>
|
||
<div className="brand-single-box">
|
||
<div className="brand-thumb">
|
||
<img src="/assets/images/add/icon-1.webp" alt="BigCommerce Partner logo, symbolizing a strong e-commerce alliance." />
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide>
|
||
<div className="brand-single-box">
|
||
<div className="brand-thumb">
|
||
<img src="/assets/images/add/icon-2.webp" alt="Shopify logo with a green shopping bag icon." />
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide>
|
||
<div className="brand-single-box">
|
||
<div className="brand-thumb">
|
||
<img src="/assets/images/add/icon-3.webp" alt="Constant Contact logo with a stylized '@' symbol." />
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
<SwiperSlide>
|
||
<div className="brand-single-box">
|
||
<div className="brand-thumb">
|
||
<img src="/assets/images/add/icon-4.webp" alt="HIKE SEO logo depicting a rising graph within the letter 'K'." />
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
</Swiper>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/*==================================================*/}
|
||
{/* End brand Area */}
|
||
{/*==================================================*/}
|
||
{/*==================================================*/}
|
||
{/* Start consen Skill Area Css */}
|
||
{/*==================================================*/}
|
||
<div className="skill-area style-two">
|
||
<div className="container">
|
||
<div className="row align-items-center">
|
||
<div className="col-md-6">
|
||
<div className="extra-animation-div">
|
||
<div className="consen-section-title">
|
||
<h5>Watch Us Live</h5>
|
||
<h2>An Agency That</h2>
|
||
<h2><span>Gets Excited </span>About Your Mission</h2>
|
||
</div>
|
||
<div className="dreamit-smart-title pt-2">
|
||
<p className="slill-text-dark">
|
||
Every project we take on is personal. We get excited about your goals, your grit, and the journey you’re on.
|
||
</p>
|
||
<p>
|
||
Whether you’re launching something new or leveling up an existing brand, we bring fresh energy, deep expertise, and full-stack creativity to your table. We don’t just work for you, we work with you, as committed collaborators invested in your long-term growth.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="dreamit-icon-box">
|
||
<div className="dreamit-icon-list">
|
||
<ul>
|
||
<li>
|
||
<i className="bi bi-arrow-right-circle" />
|
||
<span> Urgent development solutions</span>
|
||
</li>
|
||
<li>
|
||
<i className="bi bi-arrow-right-circle" />
|
||
<span> Top quality services with reasonable price</span>
|
||
</li>
|
||
<li>
|
||
<i className="bi bi-arrow-right-circle" />
|
||
<span> Professional & experienced team</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-6">
|
||
<div className="slill-single-thumb mt-4 mt-lg-0 pl-50 ml-1">
|
||
<img src="/assets/images/about/watch-us-live-section.webp" alt="Agency that gets excited about" />
|
||
<div className="skill-thumb-content">
|
||
<div className="skill-title">
|
||
<h3 className="counter"><Counter end={10} /></h3>
|
||
<span>+</span>
|
||
<h5>YEARS EXPERIENCE</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* <div className="process-shape">
|
||
<div className="process-shape-thumb bounce-animate2">
|
||
<img src="assets/images/about/3.webp" alt="" />
|
||
</div>
|
||
</div> */}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{/*==================================================*/}
|
||
{/* End consen Skill Area Css */}
|
||
{/*==================================================*/}
|
||
{/*==================================================*/}
|
||
{/* Start consen case study Area */}
|
||
{/*==================================================*/}
|
||
<div className="why-choose-us">
|
||
<div className="container">
|
||
<div className="row align-items-center">
|
||
<div className="col-lg-6">
|
||
<div className="consen-section-title">
|
||
<h5>Experience US</h5>
|
||
<h2>We Offer & Do</h2>
|
||
<h2><span>More than</span> Ever Platforms.</h2>
|
||
<p className="choose-text1">
|
||
Appropriately enhance principle-centered innovation rather
|
||
than high standards in platforms. Credibly orchestrate functional.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6 col-md-12">
|
||
<div className="row">
|
||
<div className="col-12 pl-10 pr-10 mb-4">
|
||
<div className="process-single-box text-white">
|
||
<div className="process-title">
|
||
<h3>
|
||
Our <span> Mission </span>
|
||
</h3>
|
||
<p>
|
||
Our mission is to empower businesses
|
||
with state-of-the-art digital products that drive growth, efficiency, and connectivity.
|
||
We strive to be at the forefront of innovation, delivering web and mobile solutions
|
||
that exceed expectations.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 pl-10 pr-10">
|
||
<div className="process-single-box upper">
|
||
<div className="process-title text-white">
|
||
<h3>
|
||
Our <span> Values </span>
|
||
</h3>
|
||
<p>
|
||
Integrity and Trust,
|
||
Innovation and Excellence,
|
||
Collaboration and Empowerment,
|
||
Adaptability and Learning,
|
||
Customer-Centric Approach,
|
||
Sustainability and Responsibility.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/*==================================================*/}
|
||
{/* End consen case study Area */}
|
||
{/*==================================================*/}
|
||
{/*==================================================*/}
|
||
{/* Start process Area */}
|
||
{/*==================================================*/}
|
||
<div className="process-area two">
|
||
<div className="container">
|
||
<div className="row justify-content-center text-center">
|
||
<div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
|
||
<div className="counter-single-box">
|
||
<div className="counter-title">
|
||
<h4 className="text-dark"><Counter end={100} /></h4>
|
||
<span>+</span>
|
||
<p className="text-dark">Projects Completed</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
|
||
<div className="counter-single-box">
|
||
<div className="counter-title">
|
||
<h4 className="text-dark"><Counter end={50} /></h4>
|
||
<span>+</span>
|
||
<p className="text-dark">Active Clients</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
|
||
<div className="counter-single-box">
|
||
<div className="counter-title">
|
||
<h4 className="text-dark"><Counter end={20} /></h4>
|
||
<span>+</span>
|
||
<p className="text-dark">Expert People</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
|
||
<div className="counter-single-box">
|
||
<div className="counter-title">
|
||
<h4 className="text-dark"><Counter end={50} /></h4>
|
||
<span>+</span>
|
||
<p className="text-dark">Happy Clients</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="process-shape">
|
||
<div className="service-shape">
|
||
<img src="/assets/images/elements/right-top-element .webp" alt="Metatron Cube Solutions." />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/*=================================================*/}
|
||
{/* End Process Area */}
|
||
{/*==================================================*/}
|
||
{/*==================================================*/}
|
||
{/* Start consen Testimonial Area */}
|
||
{/*==================================================*/}
|
||
<div className="testimonial-area new-style">
|
||
<div className="container">
|
||
<div className="row justify-content-center text-center">
|
||
<div className="col-lg-8">
|
||
<div className="consen-section-title">
|
||
<h5 className="text-primary">Our Testimonials</h5>
|
||
<h2>What Our Customers are </h2>
|
||
<h2>Talking<span> About us.</span> </h2>
|
||
<GoogleReviewsBranding centered={true} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{loading ? (
|
||
<div className="text-center mt-4">
|
||
<p>Loading reviews...</p>
|
||
</div>
|
||
) : isClient && (
|
||
<Swiper {...testimonial_list_slider} className="testimonial_list owl-carousel mt-4">
|
||
{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} className="pr-1">
|
||
<div className="testimonial-single-box">
|
||
<div className="testimonial-content1">
|
||
<div className="single-quote-icon">
|
||
<div className="quote-title d-flex align-items-center" style={{ marginBottom: "15px" }}>
|
||
<div className="google-avatar" style={{
|
||
width: "55px",
|
||
height: "55px",
|
||
minWidth: "55px",
|
||
borderRadius: "50%",
|
||
overflow: "hidden",
|
||
background: "#f8f9fa",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
border: "1px solid #eee",
|
||
marginRight: "15px"
|
||
}}>
|
||
{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="user-details">
|
||
<h4 className="testimonial-text mb-0 fw-bold">
|
||
{name}
|
||
</h4>
|
||
<div className="testimonial-ratting-new d-flex mt-1" style={{ color: '#ffc107', fontSize: '14px' }}>
|
||
{renderStars(r.rating)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="em-testimonial-text">
|
||
<p>
|
||
{fullText}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
);
|
||
})}
|
||
</Swiper>
|
||
)}
|
||
|
||
<div className="new-button d-flex justify-content-center pt-4">
|
||
<Link
|
||
legacyBehavior
|
||
href="https://www.google.com/maps/place/Metatron+Cube+Software+Solutions/@34.0518468,-56.3267266,3z/data=!4m8!3m7!1s0x89d4d4dc0e01490b:0xf0ca6a97298a109c!8m2!3d34.0518468!4d-56.3267266!9m1!1b1!16s%2Fg%2F11k197xnvf?entry=ttu&g_ep=EgoyMDI1MTAxMy4wIKXMDSoASAFQAw%3D%3D"
|
||
>
|
||
<a target="_blank" className="mt-0">Review us on Google</a>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="testi-shape">
|
||
<div className="testi-shape-thumb">
|
||
<img src="/assets/images/elements/right-top-element-1.webp" alt="Metatron Cube Solutions." />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/*==================================================*/}
|
||
{/* End consen Testimonial Area */}
|
||
{/*==================================================*/}
|
||
{/*==================================================*/}
|
||
{/*==================================================*/}
|
||
{/* Start consen Call Do Action Area Css */}
|
||
{/*==================================================*/}
|
||
<div className="call-do-action-area">
|
||
<div className="container">
|
||
<div className="row justify-content-center text-center">
|
||
<div className="col-lg-10 col-md-12">
|
||
<div className="consen-section-title upper mb-4">
|
||
<h5 className="text-primary">Let’s Get Started New Project</h5>
|
||
<h2 className="call-do-action-area-h2">Your success story begins with us.</h2>
|
||
</div>
|
||
<div className="new-button">
|
||
<Link legacyBehavior href="/contact">
|
||
<a className="btn btn-primary px-4 mt-3">Contact Us</a>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/*==================================================*/}
|
||
{/* End consen Call Do Action Area Css */}
|
||
{/*==================================================*/}
|
||
{/*==================================================*/}
|
||
{/* Start consen Subscribe Area */}
|
||
{/*==================================================*/}
|
||
<div className="sub">
|
||
<div className="container">
|
||
<SubCard />
|
||
</div>
|
||
</div>
|
||
|
||
{/*==================================================*/}
|
||
{/* End consen Subscribe Area */}
|
||
{/*==================================================*/}
|
||
</Layout >
|
||
</>
|
||
);
|
||
};
|
||
export default About;
|