web services page new sections updated

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,36 +60,101 @@ 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">
+                  <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>
+
+              {/* Center Column - Illustration */}
+              <div className="col-lg-6 col-md-12 text-center">
+                <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="col-6 col-md-6 col-lg-3">
+
-                <div className="info-card info-none-new">
+                    <div className="floating-item item-2">
-                  <h4>End-to-End Support</h4>
+                      <div className="floating-circle">
-                  <p>Design to launch</p>
+                        <img src="/assets/images/about/teamwork.webp" alt="Support" />
                       </div>
-              </div>
+                      <div className="floating-content">
-              <div className="col-6 col-md-6 col-lg-3">
+                        <h6>SEO Optimized </h6>
-                <div className="info-card ">
-                  <h4>SEO Optimized</h4>
                         <p> Better visibility</p>
                       </div>
                     </div>
-              <div className="col-6 col-md-6 col-lg-3">
+
-                <div className="info-card info-none">
+                    <div className="floating-item item-3">
-                  <h4>Responsive Design</h4>
+                      <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>
+
+              {/* Right Column */}
+              <div className="col-lg-3 col-md-12">
+                <div className="info-column-right text-md-end text-center">
+                  <h4 className="title-font">Optimized, Responsive & Future-Ready
+                  </h4>
+
+                  <p className="desc-font mt-2">
+                    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>
+                  <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>
           </div>
         </div>
       </section>

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,20 +90,91 @@ 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
+                src="/assets/images/Website-development-service/support.webp"
+                alt="Key features of Metatroncube websites"
+                className="kf-featured-image"
+                loading="lazy"
+              />
+            </div>
+          </div>
+
+          {/* Right – Slider */}
+          <div className="kf-slider-column">
+            <div className="kf-header">
+              <span className="kf-subtitle">Key Features</span>
+              <h2 className="kf-title">
+                Why Our Websites <span className="kf-highlight">Stand Out</span>
               </h2>
             </div>
+
+            <div className="kf-slider-window">
+              <div
+                className="kf-slider-track"
+                style={{
+                  transform: `translateX(calc(-${currentIndex} * (100% + 1.5rem) / ${visibleCols}))`,
+                }}
+              >
+                {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>
+                    ))}
+                    {column.length < 2 && (
+                      <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>
-            <div className="col-lg-6 col-md-6">
-              <div className="consen-button text-right">
               <a
                 href="#"
+                className="kf-demo-btn"
                 onClick={(e) => {
                   e.preventDefault();
                   setShowPopup(true);
@@ -71,65 +184,11 @@ const KeyFeatures = () => {
               </a>
             </div>
           </div>
-          </div>
 
-          {/* Tabs */}
-          <div className="row justify-content-center mb-4">
-            <div className="col-lg-12">
-              <div className="portfolio_nav">
-                <div className="portfolio_menu">
-                  <ul className="menu-filtering d-flex justify-content-center flex-wrap gap-3 list-unstyled">
-                    {features.map((feature, index) => (
-                      <li
-                        key={index}
-                        className={`c-pointer ${
-                          activeIndex === index ? "current_menu_item" : ""
-                        }`}
-                        onClick={() => setActiveIndex(index)}
-                      >
-                        {feature.text}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </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,70 +30,64 @@ 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 */}
+                                        <div className="card-bottom-info">
+                                            <div className="info-text">
+                                                <p>{item.category}</p>
                                                 <h3>{item.title}</h3>
                                             </div>
-                                                <div className="case-button">
-                                                    <Link href={item.link}></Link>
-                                                </div>
-                                            </div>
                                         </div>
                                     </div>
                                 </SwiperSlide>
                             ))}
                         </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">
-                  <i className="fas fa-star" />
-                  <i className="fas fa-star" />
-                  <i className="fas fa-star" />
-                  <i className="fas fa-star" />
-                  <i className="fas fa-star" />
                   </div>
+                ) : isClient && (
                   <Swiper {...testimonial_list_slider} className="testimonial_list">
-                  {testimonials.map((item, id) => (
+                    {displayedReviews.map((r, index) => {
-                    <SwiperSlide key={id}>
+                      const fullText = getReviewText(r);
+                      const profileImg = getProfileImage(r);
+                      const name = r.user?.name || r.author_name || "Customer";
+
+                      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>{item.text}</p>
+                                <p>{fullText}</p>
                               </div>
-                        <div className="testimonial-title">
-                          <h2>{item.author}</h2>
-                          <span>{item.role}</span>
                             </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,89 +12,88 @@ 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">
-                            />
-                        </div>
-                    </div>
-
-                    {/* Features Grid */}
-                    <div className="row g-4 justify-content-center">
                                 {[
                                     {
+                                        num: "01",
                                         img: "/assets/images/Website-development-service/corporates.webp",
-                                text: " Corporates & Enterprises",
+                                        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",
-                            },
-                            {
-                                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) => (
+                                ].map((industry, index) => (
-                            <div key={index} className="col-lg-3 col-md-4 col-sm-6 d-flex col-6">
+                                    <div key={index} className={`industry-arc-item item-${index + 1}`}>
-                                <div className="testimonial-single-box text-center p-4 shadow rounded w-100 d-flex flex-column justify-content-between">
+                                        <div className="item-junction-dot"></div>
-                                    <div className="testimonial-content1">
+                                        <div className="item-connector-arm"></div>
-                                        <img
+                                        <div className="item-icon-wrap">
-                                            src={feature.img}
+                                            <img src={industry.img} alt={industry.text} />
-                                            alt={feature.text}
-                                            className="img-fluid"
-                                        />
-                                        <h4 className="testimonial-text new-text">{feature.text}</h4>
                                         </div>
+                                        <div className="item-content-arrow">
+                                            <div className="item-step-tag">{industry.num}</div>
+                                            <h4>{industry.text}</h4>
                                         </div>
                                     </div>
                                 ))}
                             </div>
-                     <div className="col-lg-12 pl-0 text-center">
+                        </div>
-                                <div className="abouts-button">
+                    </div>
-                                    <div className="new-button mb-3">
 
-                                        <a className="mt-4"
+                    <div className="infographic-footer text-center">
-                                            href="#"
+                        <div className="new-button">
-                                            onClick={(e) => {
+                            <a className="mt-0" 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,77 +14,67 @@ 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 class="about-shape-thumb3 bounce-animate4">
-                  <img src="/assets/images/elements/element-2 .webp" alt="Decorative Shape 2" />
-                </div> */}
                   </div>
-            </div>
+                  <h5>Custom Design</h5>
-
-            <div className="col-lg-6">
-              <div className="consen-section-title mb-4">
-                <div className="consen-section-title">
-                  <h2>Why Partner With Our <span>Web Development Team?</span></h2>
-                </div>
-              </div>
-
-              <div className="row g-3">
-                <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/innovative.webp" alt="Innovative technology strategy by Metatron Cube Solutions." className="me-3 pr-3" />
-                    <div>
-                      <h5 className="consone-des">Custom Design</h5>
                   <p>Tailored to your brand identity.</p>
                 </div>
-                  </div>
-                </div>
 
-                <div className="col-lg-6 col-md-6 col-sm-12">
+                {/* Card 2: Fast & Responsive (Column 2 - Shifted Down) */}
-                  <div className="d-flex align-items-start mb-3">
+                <div className="staggered-card card-col-2 card-row-1">
-                    <img src="/assets/images/about/teamwork.webp" alt="Teamwork at Metatron Cube Solutions." className="me-3 pr-3" />
+                  <div className="card-icon">
-                    <div>
+                    <img src="/assets/images/about/teamwork.webp" alt="Fast & Responsive" />
-                      <h5 className="consone-des">Fast & Responsive</h5>
+                  </div>
+                  <h5>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">
+                {/* Card 3: E-commerce Ready (Column 1 - Shifted Up) */}
-                  <div className="d-flex align-items-start mb-3">
+                <div className="staggered-card card-col-1 card-row-2">
-                    <img src="/assets/images/about/future.webp" alt="Future-ready innovation strategies by Metatron Cube Solutions." className="me-3 pr-3" />
+                  <div className="card-icon">
-                    <div>
+                    <img src="/assets/images/about/future.webp" alt="E-commerce Ready" />
-                      <h5 className="consone-des">E-commerce Ready</h5>
+                  </div>
+                  <h5>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">
+                {/* Card 4: Secure & Scalable (Column 2 - Shifted Down) */}
-                  <div className="d-flex align-items-start mb-3">
+                <div className="staggered-card card-col-2 card-row-2">
-                    <img src="/assets/images/about/future.webp" alt="Future-ready digital innovation by Metatron Cube Solutions." className="me-3 pr-3" />
+                  <div className="card-icon">
-                    <div>
+                    <img src="/assets/images/about/future.webp" alt="Secure & Scalable" />
-                      <h5 className="consone-des">Secure & Scalable</h5>
+                  </div>
+                  <h5>Secure & Scalable</h5>
                   <p>Built to last and grow with you.</p>
                 </div>
+
               </div>
             </div>
 
-                <div className="col-lg-12">
+            {/* Right Column: Text Content */}
+            <div className="col-lg-6 col-md-12">
+              <div className="consen-section-title pl-lg-5">
+                <h2>Why Partner With Our <span>Web Development Team?</span></h2>
+                <p className="section-desc pt-0 pb-0">
+                 At Metatron Cube Solutions, we deliver innovative, custom-designed websites that reflect your brand identity and perform seamlessly across all devices.
+                </p>
+
                 <div className="abouts-button">
                   <div className="new-button">
-                      <a className="mt-2"
+                    <a
                       href="#"
+                      className="mt-0"
                       onClick={(e) => {
                         e.preventDefault();
                         setShowPopup(true);
@@ -96,7 +86,6 @@ const Whychooseus = () => {
                 </div>
               </div>
             </div>
-            </div>
 
           </div>
         </div>