536 lines
32 KiB
JavaScript
536 lines
32 KiB
JavaScript
import { useState, useEffect } from "react";
|
||
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 { 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) {
|
||
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 (
|
||
<>
|
||
<ConsenHead title="About MetatronCube - Web, App & Digital Marketing Experts" description="Discover MetatronCube India - a leading company in web development, mobile apps, SEO, digital marketing, UI/UX, and graphic design." />
|
||
<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/aboutpage.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">
|
||
Metatron Cube India was founded with a clear mission - to transform ideas into impactful digital solutions. With a passion for technology and innovation, we have been helping businesses achieve growth through <b>website development, mobile app development, SEO, digital marketing, UI/UX, and graphic design services</b>. Over the years, we’ve built a reputation for delivering scalable, creative, and results-driven digital experiences.
|
||
</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="icon" className="me-3 pr-3" />
|
||
<div>
|
||
<h5>Next-Gen Solutions</h5>
|
||
<p>We design cutting-edge websites, apps, and digital strategies that not only meet industry standards but also set new benchmarks for quality and performance.</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="icon" className="me-3 pr-3" />
|
||
<div>
|
||
<h5>Team-Driven Success</h5>
|
||
<p>Our skilled developers, designers, and strategists work as one - combining creativity with technical expertise to deliver projects that exceed expectations.</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="icon" className="me-3 pr-3" />
|
||
<div>
|
||
<h5>Future-Focused Vision</h5>
|
||
<p>By anticipating market trends and adopting the latest technologies, we ensure your business is always one step ahead in the fast-evolving digital landscape.</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>Discover Our Approach</h5>
|
||
<h2>An Agency That</h2>
|
||
<h2><span>Turning Your Vision </span>Into Reality</h2>
|
||
</div>
|
||
<div className="dreamit-smart-title pt-2">
|
||
<p className="slill-text-dark">
|
||
Every project we take on goes beyond execution - it’s a true collaboration. We’re motivated by your goals, your drive, and your journey, and our role is to strengthen and accelerate it.
|
||
</p>
|
||
<p>
|
||
Whether you’re launching a new idea, expanding an established brand, or reinventing your digital identity, we bring passion, deep expertise, and innovative thinking to every stage. At <b>MetatronCube India</b>, we don’t just deliver solutions - we build lasting partnerships, standing by you as committed allies focused on long-term success.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="dreamit-icon-box">
|
||
<div className="dreamit-icon-list">
|
||
<ul>
|
||
<li>
|
||
<i className="bi bi-arrow-right-circle" />
|
||
<span> <b>Rapid development delivery</b> - Agile, dependable, and scalable web & app solutions.</span>
|
||
</li>
|
||
<li>
|
||
<i className="bi bi-arrow-right-circle" />
|
||
<span> <b>High-quality services at fair value</b> - Excellence without unnecessary costs.
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<i className="bi bi-arrow-right-circle" />
|
||
<span> <b>Proven and reliable team </b>- Experienced professionals dedicated to your growth.
|
||
</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>Partner With Us</h5>
|
||
<h2>We Deliver More Than <span>Just Platforms.</span> </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 cutting-edge digital solutions that enhance growth, efficiency, and connectivity. By combining creativity with advanced technology, we aim to deliver web and mobile applications that surpass expectations and keep brands future-ready.
|
||
</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>
|
||
We are driven by trust, innovation, and excellence. Collaboration and teamwork lie at the heart of everything we do. Adaptability, continuous learning, and a customer-first mindset shape our approach, while sustainability and responsibility guide how we create solutions that make a lasting impact.
|
||
</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">Completed Projects</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">Ongoing 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">Skilled Experts</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">Satisfied Clients</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="process-shape">
|
||
<div className="service-shape">
|
||
<img src="/assets/images/elements/right-top-element .webp" alt="" />
|
||
</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> Hear From Our <span>Happy Customers</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!1s0x89d4d7ff0d82df5b: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="Decorative Shape" />
|
||
</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">Ready to Start?</h5>
|
||
<h2 className="call-do-action-area-h2">Turn your ideas into reality with us.</h2>
|
||
</div>
|
||
<div className="new-button">
|
||
<Link legacyBehavior href="/contact">
|
||
<a className="btn btn-primary px-4 mt-3">Start Now</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;
|