Merge branch 'team' of https://git.metatroncube.in/MetatroncubeSoftwareSolutions/MetatroncubeSolutions_Website into team

pages/website-development-service.js

@@ -32,8 +32,10 @@ const Index5 = () => {
       <div id="about"><Whychooseus /></div>
       <div id="team"><AboutOurTeam /></div>
       <div id="service"><WeServe /></div>
-      <OurDevelopment />
+     
       <div id="blog"><WhoCanBenifit /></div>
+
+       <OurDevelopment />
       <KeyFeatures />
       <HookClosing />
       <TestimonialSection />

public/assets/css/responsive.css

@@ -6,7 +6,7 @@
     }
 
     a.logo_img img {
-        width: 170px !important;
+        width: 200px !important;
     }
 
     .header-button a {

public/assets/css/style.css

@@ -2821,7 +2821,7 @@ p.choose-text1 {
   margin-bottom: 9px;
 }
 
-zz .why-choose-us-area .dreamit-icon-list ul li i {
+.why-choose-us-area .dreamit-icon-list ul li i {
   width: inherit;
   height: inherit;
   line-height: inherit;
@@ -9645,3 +9645,30 @@ ul.social-box li a:hover {
 .blog-section.details .blog-content-text a {
   color: #3779b9;
 }
+/* ===== Testimonial Section - Right Side Image Shape ===== */
+.benefit-image-layout {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.benefit-image-layout img {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  object-fit: cover;
+  max-height: 520px;
+}
+
+.benefit-image-layout::before {
+  content: '';
+  position: absolute;
+  top: 15px;
+  right: -15px;
+  bottom: -15px;
+  left: 15px;
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  background: #0d1b3e;
+  z-index: -1;
+}

src/ConsenHead.js

@@ -42,6 +42,11 @@ new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.cre
         sizes="56x56"
         href="/assets/images/fav-icon/icon.webp"
       />
+      {/* Google Fonts */}
+      <link
+        href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap"
+        rel="stylesheet"
+      />
       {/* bootstrap CSS */}
       <link
         rel="stylesheet"

src/components/Home/Banner1.js

@@ -12,7 +12,7 @@ const Banner1 = () => {
     <>
       <Swiper {...heroSlider} className="banner-list">
         <SwiperSlide>
-          <div className="banner-area-1 d-flex align-items-center custom-banner mb-3">
+          <div className="banner-area-1 d-flex align-items-center custom-banner">
             <div className="container">
               <div className="row align-items-center">
                 <div className="col-lg-7 col-md-12">
@@ -60,33 +60,98 @@ const Banner1 = () => {
       </Swiper>
 
       <section
-        className="bottom-info-strip-section"
+        className="bottom-info-strip-section website-service-strip"
       >
         <div className="container">
-          <div className="bottom-info-strip mt-5">
+          <div className="bottom-info-strip">
-            <div className="row justify-content-center g-3 text-center">
+            <div className="row align-items-center g-4">
-              <div className="col-6 col-md-6 col-lg-3">
+              {/* Left Column */}
-                <div className="info-card">
+              <div className="col-lg-3 col-md-12">
-                  <h4>Custom Solutions</h4>
+                <div className="info-column-left">
-                  <p>Built for your goals</p>
+                  <h5 className="script-font">We Guarantee</h5>
+                  <h4 className="title-font">Complete Digital Solutions</h4>
+                  <p className="desc-font">
+                    We create custom digital solutions tailored to your business goals, ensuring strategic design and seamless development from concept to launch. Every project is built for performance, scalability, and long-term growth.
+                  </p>
+
                 </div>
               </div>
-              <div className="col-6 col-md-6 col-lg-3">
+
-                <div className="info-card info-none-new">
+              {/* Center Column - Illustration */}
-                  <h4>End-to-End Support</h4>
+              <div className="col-lg-6 col-md-12 text-center">
-                  <p>Design to launch</p>
+                <div className="central-illustration-wrap position-relative">
+                  {/* Floating Circular Items in an Arc */}
+                  <div className="floating-items-container">
+                    <div className="floating-item item-1">
+                      <div className="floating-circle">
+                        <img src="/assets/images/about/teamwork.webp" alt="Map" />
+                      </div>
+                      <div className="floating-content">
+                        <h6>Custom Solutions</h6>
+                        <p>Built for your goals</p>
+                      </div>
+                    </div>
+
+                    <div className="floating-item item-2">
+                      <div className="floating-circle">
+                        <img src="/assets/images/about/teamwork.webp" alt="Support" />
+                      </div>
+                      <div className="floating-content">
+                        <h6>SEO Optimized </h6>
+                        <p> Better visibility</p>
+                      </div>
+                    </div>
+
+                    <div className="floating-item item-3">
+                      <div className="floating-circle">
+                        <img src="/assets/images/about/teamwork.webp" alt="SEO" />
+                      </div>
+                      <div className="floating-content">
+                        <h6>End-to-End Support</h6>
+                        <p>Design to launch</p>
+                      </div>
+                    </div>
+
+                    <div className="floating-item item-4">
+                      <div className="floating-circle">
+                        <img src="/assets/images/about/teamwork.webp" alt="Responsive" />
+                      </div>
+                      <div className="floating-content">
+                        <h6>Responsive Design</h6>
+                        <p>All devices perfect</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <img
+                    src="/assets/images/home/delivery-illustration.webp"
+                    alt="Delivery Illustration"
+                    className="main-delivery-img img-fluid mt-2"
+                    onError={(e) => {
+                      e.target.src = 'https://img.freepik.com/free-vector/delivery-service-with-mask-concept_23-2148497067.jpg';
+                    }}
+                  />
                 </div>
               </div>
-              <div className="col-6 col-md-6 col-lg-3">
+
-                <div className="info-card ">
+              {/* Right Column */}
-                  <h4>SEO Optimized</h4>
+              <div className="col-lg-3 col-md-12">
-                  <p>Better visibility</p>
+                <div className="info-column-right text-md-end text-center">
-                </div>
+                  <h4 className="title-font">Optimized, Responsive & Future-Ready
-              </div>
+                  </h4>
-              <div className="col-6 col-md-6 col-lg-3">
+
-                <div className="info-card info-none">
+                  <p className="desc-font mt-2">
-                  <h4>Responsive Design</h4>
+                    Our websites are SEO-optimized for better online visibility and designed to work perfectly across all devices. With a strong technical foundation, we deliver fast, responsive, and user-friendly digital experiences.
-                  <p>All devices perfect </p>
+                  </p>
+                  <div className="call-info-box d-flex align-items-center mt-3">
+                    <div className="call-icon-bg">
+                      <img src="/assets/images/home/scooter-icon.webp" alt="Scooter Icon" className="scooter-mini-icon" onError={(e) => { e.target.src = 'https://cdn-icons-png.flaticon.com/512/3132/3132688.png'; }} />
+                    </div>
+                    <div className="call-details ms-3">
+                      <span>Call Us Free :</span>
+                      <h3 className="phone-number"> +1-647-679-7651</h3>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>

src/components/Website-development-service/about-our-team.js

@@ -50,7 +50,7 @@ const AboutOurTeam = () => {
                                 <div className="abouts-button">
                                     <div className="new-button">
                                         <Link legacyBehavior href="/about">
-                                            <a  className="mt-3"
+                                            <a className="mt-3"
                                                 href="#"
                                                 onClick={(e) => {
                                                     e.preventDefault();

src/components/Website-development-service/key-feacture.js

@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import ConsenHead from "@/src/ConsenHead";
 import ContactPopup from "./ContactPopup";
 
 const KeyFeatures = () => {
   const [showPopup, setShowPopup] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [visibleCols, setVisibleCols] = useState(2);
 
   const features = [
     {
@@ -41,6 +42,47 @@ const KeyFeatures = () => {
     },
   ];
 
+  // Group features into columns of 2 cards each
+  const columns = [];
+  for (let i = 0; i < features.length; i += 2) {
+    columns.push(features.slice(i, i + 2));
+  }
+
+  const totalCols = columns.length; // 4 columns
+
+  // Responsive column count
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 576) setVisibleCols(1);
+      else if (window.innerWidth <= 1200) setVisibleCols(2);
+      else setVisibleCols(2);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const maxIndex = Math.max(0, totalCols - visibleCols);
+
+  const handleNext = useCallback(() => {
+    setCurrentIndex((prev) => (prev < maxIndex ? prev + 1 : 0));
+  }, [maxIndex]);
+
+  const handlePrev = useCallback(() => {
+    setCurrentIndex((prev) => (prev > 0 ? prev - 1 : maxIndex));
+  }, [maxIndex]);
+
+  // Auto-slide every 5s
+  useEffect(() => {
+    const timer = setInterval(handleNext, 5000);
+    return () => clearInterval(timer);
+  }, [handleNext]);
+
+  // Clamp index on resize
+  useEffect(() => {
+    if (currentIndex > maxIndex) setCurrentIndex(maxIndex);
+  }, [maxIndex, currentIndex]);
+
   return (
     <>
       <ConsenHead
@@ -48,88 +90,105 @@ const KeyFeatures = () => {
         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."
       />
 
-      <div className="testimonial-area color-bg">
+      {/* ===== Key Features Slider Section ===== */}
-        <div className="container">
+      <section className="kf-section kf-section-light">
-          <div className="row case-study-bg align-items-center mb-40">
+        <div className="kf-container">
-            <div className="col-lg-6 col-md-6">
+          {/* Left – Featured Image */}
-              <div className="consen-section-title">
+          <div className="kf-image-column">
-                <h2>
+            <div className="kf-image-wrapper">
-                  Why Our Websites <span>Stand Out</span>
+              <img
-                </h2>
+                src="/assets/images/Website-development-service/support.webp"
-              </div>
+                alt="Key features of Metatroncube websites"
-            </div>
+                className="kf-featured-image"
-            <div className="col-lg-6 col-md-6">
+                loading="lazy"
-              <div className="consen-button text-right">
+              />
-                <a
-                  href="#"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setShowPopup(true);
-                  }}
-                >
-                  Book a Free Demo Call
-                </a>
-              </div>
             </div>
           </div>
 
-          {/* Tabs */}
+          {/* Right – Slider */}
-          <div className="row justify-content-center mb-4">
+          <div className="kf-slider-column">
-            <div className="col-lg-12">
+            <div className="kf-header">
-              <div className="portfolio_nav">
+              <span className="kf-subtitle">Key Features</span>
-                <div className="portfolio_menu">
+              <h2 className="kf-title">
-                  <ul className="menu-filtering d-flex justify-content-center flex-wrap gap-3 list-unstyled">
+                Why Our Websites <span className="kf-highlight">Stand Out</span>
-                    {features.map((feature, index) => (
+              </h2>
-                      <li
+            </div>
-                        key={index}
+
-                        className={`c-pointer ${
+            <div className="kf-slider-window">
-                          activeIndex === index ? "current_menu_item" : ""
+              <div
-                        }`}
+                className="kf-slider-track"
-                        onClick={() => setActiveIndex(index)}
+                style={{
-                      >
+                  transform: `translateX(calc(-${currentIndex} * (100% + 1.5rem) / ${visibleCols}))`,
-                        {feature.text}
+                }}
-                      </li>
+              >
+                {columns.map((column, colIdx) => (
+                  <div
+                    key={colIdx}
+                    className="kf-column-wrapper"
+                    style={{
+                      flexBasis: `calc((100% - (${visibleCols} - 1) * 1.5rem) / ${visibleCols})`,
+                      width: `calc((100% - (${visibleCols} - 1) * 1.5rem) / ${visibleCols})`,
+                    }}
+                  >
+                    {column.map((feature, idx) => (
+                      <div key={idx} className="kf-card">
+                        <div className="kf-icon-box">
+                          <img
+                            src={feature.img}
+                            alt={feature.text}
+                            className="kf-card-img"
+                            loading="lazy"
+                          />
+                        </div>
+                        <h3 className="kf-card-name">{feature.text}</h3>
+                      </div>
                     ))}
-                  </ul>
+                    {column.length < 2 && (
-                </div>
+                      <div className="kf-card-placeholder" />
+                    )}
+                  </div>
+                ))}
               </div>
             </div>
+
+            {/* Dots */}
+            <div className="kf-dots">
+              {Array.from({ length: maxIndex + 1 }).map((_, idx) => (
+                <div
+                  key={idx}
+                  className={`kf-dot${currentIndex === idx ? " kf-dot-active" : ""}`}
+                  onClick={() => setCurrentIndex(idx)}
+                />
+              ))}
+            </div>
+
+            {/* Prev / Next controls + Book Demo */}
+            <div className="kf-controls-row">
+              <div className="kf-controls">
+                <button className="kf-control-btn" onClick={handlePrev} aria-label="Previous">
+                  &#8592;
+                </button>
+                <button className="kf-control-btn" onClick={handleNext} aria-label="Next">
+                  &#8594;
+                </button>
+              </div>
+              <a
+                href="#"
+                className="kf-demo-btn"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setShowPopup(true);
+                }}
+              >
+                Book a Free Demo Call
+              </a>
+            </div>
           </div>
 
-          {/* Active Card */}
-          <div className="row justify-content-center">
-            <div className="col-lg-3 col-md-4 col-sm-6 d-flex">
-              <div className="testimonial-single-box text-center p-4 shadow rounded w-100 d-flex flex-column justify-content-between">
-                <div className="testimonial-content1">
-                  <img
-                    src={features[activeIndex].img}
-                    alt={features[activeIndex].text}
-                    className="img-fluid"
-                  />
-                  <h4 className="testimonial-text new-text">
-                    {features[activeIndex].text}
-                  </h4>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
-      </div>
+      </section>
 
       <ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
-
-      <style jsx>{`
-        .tab-pill {
-          cursor: pointer;
-          transition: all 0.3s ease;
-          font-weight: 500;
-          border: 1px solid #ddd;
-        }
-        .tab-pill:hover {
-          background-color: #007bff;
-          color: #fff;
-        }
-      `}</style>
     </>
   );
 };

src/components/Website-development-service/our-development.js

@@ -1,8 +1,11 @@
 "use client";
 
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay } from "swiper";
+import { Autoplay, EffectCoverflow } from "swiper";
 import "swiper/css";
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
 import { useState } from "react";
 import ContactPopup from "./ContactPopup";
 import Link from "next/link";
@@ -16,6 +19,7 @@ const caseStudies = [
     { id: 5, img: "/assets/images/Website-development-service/support.webp", category: " Support & Growth", title: " Continuous updates & maintenance", link: "/portfolio-details" },
 ];
 
+
 export default function OurDevelopment() {
     const [showPopup, setShowPopup] = useState(false);
 
@@ -26,63 +30,49 @@ export default function OurDevelopment() {
                 description="Explore case studies showcasing how Metatroncube Software Solutions delivers innovative, user-centric digital products that drive growth."
             />
 
-            <div className="case-study-area color-bg">
+            <div className="case-study-area gallery-museum-theme">
-                <div className="container">
+                <div className="container-fluid p-0">
-                    <div className="row case-study-bg align-items-center mb-40">
+                    <div className="row mb-40 text-center">
-                        <div className="col-lg-6 col-md-6">
+                        <div className="col-lg-12">
-                            <div className="consen-section-title">
+                            <div className="consen-section-title white">
                                 <h2>A Step-by-Step Process <span> for Website Success</span></h2>
                             </div>
                         </div>
-                        <div className="col-lg-6 col-md-6">
-                            <div className="consen-button text-right">
-                                <a
-                                    href="#"
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        setShowPopup(true);
-                                    }}
-                                >
-                                    Start My Website Journey
-                                </a>
-                            </div>
-                        </div>
                     </div>
 
-                    <div className="row">
+                    <div className="gallery-carousel-wrapper">
                         <Swiper
-                            modules={[Autoplay]}
+                            modules={[Autoplay, EffectCoverflow]}
-                            spaceBetween={30}
+                            effect="coverflow"
-                            slidesPerView={3}
+                            grabCursor={true}
+                            centeredSlides={true}
+                            slidesPerView={"auto"}
                             loop={true}
-                            loopedSlides={caseStudies.length}  // loop all slides
+                            coverflowEffect={{
-                            speed={4000}                       // sliding speed
+                                rotate: 0, /* Reduced for clarity */
+                                stretch: 0,
+                                depth: 200,
+                                modifier: 1,
+                                slideShadows: false, /* Remove internal shadows for crystal clear center slide */
+                            }}
                             autoplay={{
-                                delay: 0,                      // no delay, continuous movement
+                                delay: 4000,
                                 disableOnInteraction: false,
-                                pauseOnMouseEnter: false,
                             }}
-                            allowTouchMove={true}
+                            className="gallery-swiper"
-                            breakpoints={{
-                                0: { slidesPerView: 1 },
-                                768: { slidesPerView: 3 },
-                                1200: { slidesPerView: 3 },
-                            }}
-                            className="case-study owl-carousel"
                         >
-                            {caseStudies.concat(caseStudies).map((item, idx) => (
+                            {caseStudies.map((item, idx) => (
-                                <SwiperSlide key={idx}>
+                                <SwiperSlide key={idx} className="gallery-slide">
-                                    <div className="case-study-single-box" style={{ textAlign: "left" }}>
+                                    <div className="gallery-card">
-                                        <div className="case-study-thumb">
+                                        <div className="card-main-image">
                                             <img src={item.img} alt={item.title} />
-                                            <div className="case-study-content">
+                                        </div>
-                                                <div className="case-study-title content-new">
+
-                                                    <h6>{item.category}</h6>
+                                        {/* Bottom Blur Overlay */}
-                                                    <h3>{item.title}</h3>
+                                        <div className="card-bottom-info">
-                                                </div>
+                                            <div className="info-text">
-                                                <div className="case-button">
+                                                <p>{item.category}</p>
-                                                    <Link href={item.link}></Link>
+                                                <h3>{item.title}</h3>
-                                                </div>
                                             </div>
                                         </div>
                                     </div>
@@ -90,6 +80,14 @@ export default function OurDevelopment() {
                             ))}
                         </Swiper>
                     </div>
+
+                    <div className="text-center mt-5">
+                        <div className="new-button">
+                            <a href="#" className="mt-0" onClick={(e) => { e.preventDefault(); setShowPopup(true); }}>
+                               Start My Website Journey
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </div>
 

src/components/Website-development-service/testimonial.js

@@ -1,102 +1,172 @@
-// import {testimonial_list_slider} from "@/src/sliderProps";
+"use client";
 import { Autoplay } from "swiper";
-import { Swiper, SwiperSlide } from "swiper/react"
+import { Swiper, SwiperSlide } from "swiper/react";
-
+import { useEffect, useState } from "react";
+import "swiper/css";
+import GoogleReviewsBranding from "../GoogleReviewsBranding";
+import Link from "next/link";
 
 const testimonial_list_slider = {
   spaceBetween: 30,
   slidesPerView: 1,
   navigation: false,
-  pagination: { clickable: false },
+  pagination: false,
   loop: true,
   autoplay: {
     delay: 3000,
     disableOnInteraction: false,
   },
+  modules: [Autoplay],
 };
 
-const testimonials = [
-  {
-    id: 1,
-    text: " Our new website completely transformed the way customers find and connect with us. The design is modern, fast, and user-friendly. Within just two months of launch, our inquiries more than doubled, giving us more qualified leads and helping our business grow faster than we expected. ",
-    author: "Startup Owner",
-    role: "Happy Customer",
-  },
-  {
-    id: 2,
-    text: "Launching our online store with their team was the best decision we made. The site is beautifully designed, easy to manage, and customers love the seamless shopping experience. After going live, our sales jumped significantly, and we gained more repeat buyers than ever before.",
-    author: "E-commerce Brand Sales",
-    role: "Happy Customer",
-  },
-  {
-    id: 3,
-    text: "The team was professional, responsive, and consistently went above and beyond to deliver what we needed. Every detail was handled with care, and they completed the project ahead of schedule. The final outcome was polished, effective, and helped us showcase our brand with confidence.",
-    author: "Corporate Client",
-    role: "Happy Customer",
-  }
-];
-
 const TestimonialSection = () => {
+  const [reviews, setReviews] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+    async function loadReviews() {
+      try {
+        const res = await fetch("/api/reviews");
+        const data = await res.json();
+        const cleaned = (data.reviews || []).filter(r =>
+          (r.text || r.description || r.snippet || r.review_text || r.body || r.content) &&
+          r.rating >= 4
+        );
+        setReviews(cleaned);
+      } catch (error) {
+        console.error("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 getProfileImage(r) {
+    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 (url.startsWith("http")) return 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 (
     <div className="team_area color-bg" id="team">
       <div className="container">
-        <div className="row">
+        <div className="row align-items-center">
           <div className="col-lg-6">
             <div className="consen-section-title pb-40">
-              {/* <h5>OUR TESTIMONIALS</h5> */}
               <h2> Hear from Businesses </h2>
               <h2>
                 {" "}
                 <span> We’ve Helped Grow</span>
               </h2>
+              <GoogleReviewsBranding />
             </div>
             <div className="row">
-
               <div className="col-lg-12">
-                <div className="testimonial-icon-thumb">
+                {loading ? (
-                  <img src="/assets/images/elements/quotation.webp" alt />
+                  <div className="text-center">
-                </div>
+                    <p>Loading reviews...</p>
-                <div className="testimonial-ratting">
+                  </div>
-                  <i className="fas fa-star" />
+                ) : isClient && (
-                  <i className="fas fa-star" />
+                  <Swiper {...testimonial_list_slider} className="testimonial_list">
-                  <i className="fas fa-star" />
+                    {displayedReviews.map((r, index) => {
-                  <i className="fas fa-star" />
+                      const fullText = getReviewText(r);
-                  <i className="fas fa-star" />
+                      const profileImg = getProfileImage(r);
-                </div>
+                      const name = r.user?.name || r.author_name || "Customer";
-                <Swiper {...testimonial_list_slider} className="testimonial_list">
-                  {testimonials.map((item, id) => (
-                    <SwiperSlide key={id}>
-                      <div className="testimonial-content">
-                        <div className="testimonial-text">
-                          <p>{item.text}</p>
-                        </div>
-                        <div className="testimonial-title">
-                          <h2>{item.author}</h2>
-                          <span>{item.role}</span>
-                        </div>
-                      </div>
-                    </SwiperSlide>
-                  ))}
-                </Swiper>
 
+                      return (
+                        <SwiperSlide key={index}>
+                          <div className="google-review-card-service">
+                            <div className="google-review-header d-flex align-items-center mb-3">
+                              <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 ml-3">
+                                <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 pb-30">
+                  <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">Review us on Google</a>
+                  </Link>
+                </div>
               </div>
-
             </div>
           </div>
           <div className="col-lg-6 col-md-12 text-center">
             <div className="process-text">
               <img
                 src="/assets/images/Website-development-service/section-8.webp"
-                alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
+                alt="Businesses Grow"
                 className="img-fluid"
               />
             </div>
           </div>
-
         </div>
       </div>
     </div>
   );
-
 };
 export default TestimonialSection;

src/components/Website-development-service/we-serve.js

@@ -12,87 +12,86 @@ const WeServe = () => {
         <>
             <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." />
 
-            <div className="testimonial-area">
+            <div className="industry-infographic-area">
+                {/* Background Image Overlay */}
+                <div className="infographic-bg-overlay"></div>
+
                 <div className="container">
-                    <div className="row align-items-center mb-3 text-center     justify-content-center">
+                    <div className="infographic-main-wrapper">
-                        <div className="col-lg-7 col-md-6">
+                        {/* Left Side: Central Heading Circle */}
-                            <div className="consen-section-title">
+
-                                <h2>
+                        <div className="infographic-left-side">
-                                   Websites for Every  <span> Business Type</span>
+                            <div className="central-circle-container">
-                                </h2>
+                                <div className="central-circle-outer-ring">
+                                    <div className="central-circle">
+                                        <div className="central-content">
+                                            <i className="bi bi-globe"></i>
+                                            <h3>Websites for Every <br /> Business Type</h3>
+                                        </div>
+                                        <div className="pulse-ring"></div>
+                                    </div>
+                                </div>
+                                <div className="outer-glow-shade"></div>
                             </div>
                         </div>
 
-                        <div className="testi-shape-thumb1 rotateme">
+                        {/* Right Side: Industry Items Arc */}
-                            <img
+                        <div className="infographic-right-side">
-                                src="/assets/images/Website-development-service/section-3.webp"
+                            <div className="semi-circle-path"></div>
-                                alt="A diverse team engaged in a strategic discussion."
+                            <div className="industries-arc">
-                            />
+                                {[
+                                    {
+                                        num: "01",
+                                        img: "/assets/images/Website-development-service/corporates.webp",
+                                        text: "Enterprises & Corporates",
+                                    },
+                                    {
+                                        num: "02",
+                                        img: "/assets/images/Website-development-service/retail.webp",
+                                        text: "Retail & E-commerce",
+                                    },
+                                    {
+                                        num: "03",
+                                        img: "/assets/images/Website-development-service/healthcare.webp",
+                                        text: "Healthcare & Clinics",
+                                    },
+                                    {
+                                        num: "04",
+                                        img: "/assets/images/Website-development-service/education.webp",
+                                        text: "Education & Training",
+                                    },
+                                    {
+                                        num: "05",
+                                        img: "/assets/images/Website-development-service/travel.webp",
+                                        text: "Hospitality & Travel",
+                                    }
+                                ].map((industry, index) => (
+                                    <div key={index} className={`industry-arc-item item-${index + 1}`}>
+                                        <div className="item-junction-dot"></div>
+                                        <div className="item-connector-arm"></div>
+                                        <div className="item-icon-wrap">
+                                            <img src={industry.img} alt={industry.text} />
+                                        </div>
+                                        <div className="item-content-arrow">
+                                            <div className="item-step-tag">{industry.num}</div>
+                                            <h4>{industry.text}</h4>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
                         </div>
                     </div>
 
-                    {/* Features Grid */}
+                    <div className="infographic-footer text-center">
-                    <div className="row g-4 justify-content-center">
+                        <div className="new-button">
-                        {[
+                            <a className="mt-0" href="#" onClick={(e) => {
-                            {
+                                e.preventDefault();
-                                img: "/assets/images/Website-development-service/corporates.webp",
+                                setShowPopup(true);
-                                text: " Corporates & Enterprises",
+                            }}>
-                            },
+                                See Case Studies in Your Industry
-                            {
+                            </a>
-                                img: "/assets/images/Website-development-service/retail.webp",
+                        </div>
-                                text: "Retail & E-commerce",
-                            },
-                            {
-                                img: "/assets/images/Website-development-service/healthcare.webp",
-                                text: "Healthcare & Clinics",
-                            },
-                            {
-                                img: "/assets/images/Website-development-service/education.webp",
-                                text: " Education & Training ",
-                            },
-                            {
-                                img: "/assets/images/Website-development-service/travel.webp",
-                                text: "Hospitality & Travel",
-                            },
-                            {
-                                img: "/assets/images/Website-development-service/startups.webp",
-                                text: "Startups & Entrepreneurs",
-                            },
-                            {
-                                img: "/assets/images/Website-development-service/media.webp",
-                                text: "Media & Entertainment",
-                            }
-                        ].map((feature, index) => (
-                            <div key={index} className="col-lg-3 col-md-4 col-sm-6 d-flex col-6">
-                                <div className="testimonial-single-box text-center p-4 shadow rounded w-100 d-flex flex-column justify-content-between">
-                                    <div className="testimonial-content1">
-                                        <img
-                                            src={feature.img}
-                                            alt={feature.text}
-                                            className="img-fluid"
-                                        />
-                                        <h4 className="testimonial-text new-text">{feature.text}</h4>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
                     </div>
-                     <div className="col-lg-12 pl-0 text-center">
-                                <div className="abouts-button">
-                                    <div className="new-button mb-3">
-
-                                        <a className="mt-4"
-                                            href="#"
-                                            onClick={(e) => {
-                                                e.preventDefault();
-                                                setShowPopup(true);
-                                            }}
-                                        >
-                                            See Case Studies in Your Industry 
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
                 </div>
             </div>
             <ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />

src/components/Website-development-service/why-choose-us.js

@@ -14,85 +14,74 @@ const Whychooseus = () => {
         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."
       />
 
-      <div className="about-area new-style bg-white">
+      <div className="about-area new-style-v2 bg-white">
+        <div className="bg-text">DEVELOP</div>
         <div className="container">
           <div className="row align-items-center">
 
-                <div class="col-lg-6 col-md-12 text-center">
+            {/* Left Column: Staggered Cards */}
-              <div class="dreamit-about-thumb-new mr-lg-4">
+            <div className="col-lg-6 col-md-12">
-                <img src="/assets/images/Website-development-service/section-1.webp" alt="About Metatroncube Canada" />
+              <div className="staggered-cards-container">
 
-                {/* <div class="about-shape-thumb1 bounce-animate2">
+                {/* Card 1: Custom Design (Column 1 - Shifted Up) */}
-                  <img src="/assets/images/about/about-shpe.png" alt="Decorative Shape 1" />
+                <div className="staggered-card card-col-1 card-row-1">
-                </div> */}
+                  <div className="card-icon">
+                    <img src="/assets/images/about/innovative.webp" alt="Custom Design" />
+                  </div>
+                  <h5>Custom Design</h5>
+                  <p>Tailored to your brand identity.</p>
+                </div>
+
+                {/* Card 2: Fast & Responsive (Column 2 - Shifted Down) */}
+                <div className="staggered-card card-col-2 card-row-1">
+                  <div className="card-icon">
+                    <img src="/assets/images/about/teamwork.webp" alt="Fast & Responsive" />
+                  </div>
+                  <h5>Fast & Responsive</h5>
+                  <p>Websites that work on every device.</p>
+                </div>
+
+                {/* Card 3: E-commerce Ready (Column 1 - Shifted Up) */}
+                <div className="staggered-card card-col-1 card-row-2">
+                  <div className="card-icon">
+                    <img src="/assets/images/about/future.webp" alt="E-commerce Ready" />
+                  </div>
+                  <h5>E-commerce Ready</h5>
+                  <p>Online stores that boost sales.</p>
+                </div>
+
+                {/* Card 4: Secure & Scalable (Column 2 - Shifted Down) */}
+                <div className="staggered-card card-col-2 card-row-2">
+                  <div className="card-icon">
+                    <img src="/assets/images/about/future.webp" alt="Secure & Scalable" />
+                  </div>
+                  <h5>Secure & Scalable</h5>
+                  <p>Built to last and grow with you.</p>
+                </div>
 
-                {/* <div class="about-shape-thumb3 bounce-animate4">
-                  <img src="/assets/images/elements/element-2 .webp" alt="Decorative Shape 2" />
-                </div> */}
               </div>
             </div>
 
-            <div className="col-lg-6">
+            {/* Right Column: Text Content */}
-              <div className="consen-section-title mb-4">
+            <div className="col-lg-6 col-md-12">
-                <div className="consen-section-title">
+              <div className="consen-section-title pl-lg-5">
-                  <h2>Why Partner With Our <span>Web Development Team?</span></h2>
+                <h2>Why Partner With Our <span>Web Development Team?</span></h2>
-                </div>
+                <p className="section-desc pt-0 pb-0">
-              </div>
+                 At Metatron Cube Solutions, we deliver innovative, custom-designed websites that reflect your brand identity and perform seamlessly across all devices.
+                </p>
 
-              <div className="row g-3">
+                <div className="abouts-button">
-                <div className="col-lg-6 col-md-6 col-sm-12">
+                  <div className="new-button">
-                  <div className="d-flex align-items-start mb-3">
+                    <a
-                    <img src="/assets/images/about/innovative.webp" alt="Innovative technology strategy by Metatron Cube Solutions." className="me-3 pr-3" />
+                      href="#"
-                    <div>
+                      className="mt-0"
-                      <h5 className="consone-des">Custom Design</h5>
+                      onClick={(e) => {
-                      <p>Tailored to your brand identity.</p>
+                        e.preventDefault();
-                    </div>
+                        setShowPopup(true);
-                  </div>
+                      }}
-                </div>
+                    >
-
+                      Let’s Start Building Your Website
-                <div className="col-lg-6 col-md-6 col-sm-12">
+                    </a>
-                  <div className="d-flex align-items-start mb-3">
-                    <img src="/assets/images/about/teamwork.webp" alt="Teamwork at Metatron Cube Solutions." className="me-3 pr-3" />
-                    <div>
-                      <h5 className="consone-des">Fast & Responsive</h5>
-                      <p>Websites that work on every device.</p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="col-lg-6 col-md-6 col-sm-12">
-                  <div className="d-flex align-items-start mb-3">
-                    <img src="/assets/images/about/future.webp" alt="Future-ready innovation strategies by Metatron Cube Solutions." className="me-3 pr-3" />
-                    <div>
-                      <h5 className="consone-des">E-commerce Ready</h5>
-                      <p>Online stores that boost sales.</p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="col-lg-6 col-md-6 col-sm-12">
-                  <div className="d-flex align-items-start mb-3">
-                    <img src="/assets/images/about/future.webp" alt="Future-ready digital innovation by Metatron Cube Solutions." className="me-3 pr-3" />
-                    <div>
-                      <h5 className="consone-des">Secure & Scalable</h5>
-                      <p>Built to last and grow with you.</p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="col-lg-12">
-                  <div className="abouts-button">
-                    <div className="new-button">
-                      <a className="mt-2"
-                        href="#"
-                        onClick={(e) => {
-                          e.preventDefault(); 
-                          setShowPopup(true); 
-                        }}
-                      >
-                        Let’s Start Building Your Website
-                      </a>
-                    </div>
                   </div>
                 </div>
               </div>