service section updated

src/app/globals.css

@@ -8307,7 +8307,7 @@ body {
   }
 
   .sec-title__title {
-    font-size: 32px;
+    font-size: 30px;
   }
 
   .projects-one__filter__list li {
@@ -8828,7 +8828,7 @@ body {
 
 @media (max-width: 767px) {
   .sec-title__title {
-    font-size: 26px;
+    font-size: 23px;
   }
 
   .sec-title__text-shape {
@@ -12957,7 +12957,7 @@ body {
   font-size: 35px;
   color: var(--pelocis-black, #222222);
   font-weight: bold;
-  line-height: 46px;
+  line-height: 1.3;
   margin-top: 6px;
 }
 
@@ -13321,6 +13321,12 @@ body {
     font-size: 12px !important;
 
   }
+
+  .work-process-box-3 {
+
+    margin-top: 0px;
+
+  }
 }
 
 @media (max-width: 500px) {
@@ -13344,7 +13350,7 @@ body {
 
   .sec-title__title {
 
-    font-size: 24px !important;
+    font-size: 20px !important;
 
   }
 
@@ -14232,6 +14238,8 @@ body {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s ease;
+  position: relative;
+  top: -85px;
 }
 
 /* Strictly ONLY show content when active */
@@ -14420,7 +14428,7 @@ body {
 .hero-1 .slider-header span {
   font-size: 17px;
   font-weight: 700;
-  color: #4a3424;
+  color: #fff;
   margin-right: 15px;
   letter-spacing: -0.5px;
 }
@@ -14520,7 +14528,7 @@ body {
 }
 
 .hero-1 .slider-category-title a {
-  color: #1a1f2b;
+  color: #fff;
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -14530,7 +14538,7 @@ body {
 }
 
 .hero-1 .slider-category-title a:hover {
-  color: #1a1f2b;
+  color: #fff;
 }
 
 .hero-1 .slider-category-title span {
@@ -14732,6 +14740,14 @@ body {
   .main-shirt {
     max-width: 58%;
   }
+
+  .hero-1 .slider-category-title {
+    padding-top: 15px;
+    text-align: center;
+    font-size: 15px;
+    font-weight: 900;
+    color: #1a1f2b;
+  }
 }
 
 /* 1540px */
@@ -14767,6 +14783,13 @@ body {
     max-width: 700px;
     padding-right: 0px;
   }
+
+  .work-process-section-3 .left-shape {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 520px !important;
+  }
 }
 
 /* 1360px */
@@ -14775,6 +14798,21 @@ body {
     padding: 200px 0 120px;
   }
 
+  .hero-1 .slider-category-title {
+    padding-top: 15px;
+    text-align: center;
+    font-size: 13px;
+    font-weight: 900;
+    color: #1a1f2b;
+  }
+
+  .work-process-section-3 .left-shape {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 380px !important;
+  }
+
   .hero-content {
     flex: 0 0 48%;
     max-width: 48%;
@@ -14800,6 +14838,13 @@ body {
     padding: 180px 0 120px;
   }
 
+  .work-process-section-3 .left-shape {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 357px !important;
+  }
+
   .hero-content h1 {
     font-size: 42px;
     margin-bottom: 20px;
@@ -14807,7 +14852,7 @@ body {
 
   .theme-btn {
     padding: 18px 40px;
-    font-size: 14px;
+    font-size: 11px;
   }
 
   .our-services-slider {
@@ -14832,12 +14877,30 @@ body {
   }
 
   .hero-content h1 {
-    font-size: 40px;
+    font-size: 36px;
+  }
+
+  .banner-sub-title {
+    color: #fff;
+    font-size: 13px !important;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 32px;
+    letter-spacing: 2px !important;
+    text-transform: uppercase;
+    margin-left: -46px !important;
+    margin-bottom: 10px !important;
   }
 
   .our-services-slider {
     max-width: 600px;
   }
+
+  .hero-content p {
+
+    font-size: 15px !important;
+
+  }
 }
 
 /* 992px (Tablet) */
@@ -14846,6 +14909,31 @@ body {
     padding: 250px 0 80px;
   }
 
+  .hero-1 .slider-header span {
+    font-size: 17px;
+    font-weight: 700;
+    color: #1a1f2b !important;
+    margin-right: 15px;
+    letter-spacing: -0.5px;
+  }
+
+  .hero-content {
+
+    position: relative;
+    top: 0px !important;
+
+  }
+
+  .hero-1 .slider-category-title a {
+    color: #1a1f2b !important;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    transition: color 0.3s;
+  }
+
   .banner-pagination {
 
     display: none !important;
@@ -14917,6 +15005,10 @@ body {
   .hero-1 .main-shirt {
     max-width: 60%;
   }
+
+  .section-padding {
+    padding: 60px 0 60px !important;
+  }
 }
 
 /* 500px */
@@ -14927,7 +15019,7 @@ body {
   }
 
   .hero-1 .slider-category-title a {
-    font-size: 10px !important;
+    font-size: 12px !important;
   }
 
   .hero-1 .hero-content h1 {
@@ -14957,7 +15049,7 @@ body {
   }
 
   .hero-1 .hero-content p {
-    font-size: 15px;
+    font-size: 13px;
   }
 
   .hero-1 .theme-btn {
@@ -15002,3 +15094,320 @@ body {
     max-width: 1650px;
   }
 }
+
+/* -----------------------------------------------------------
+   Careers Work Process Section
+   ----------------------------------------------------------- */
+.work-process-section-3 {
+  position: relative;
+  z-index: 1;
+}
+
+.section-padding {
+  padding: 80px 0 80px !important;
+}
+
+.work-process-section-3 .left-shape {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /* width: 520px; */
+}
+
+.work-process-section-3 .left-shape img {
+  height: 100%;
+  width: 100%;
+}
+
+.section-title {
+  position: relative;
+  z-index: 99;
+  margin-bottom: 30px;
+  margin-top: -7px;
+}
+
+.work-process-box-3 {
+  margin-top: 30px;
+  text-align: center;
+  position: relative;
+}
+
+.work-process-box-3::before {
+  position: absolute;
+  top: 100px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("/assets/images/services/workprocess/bg-shape.png");
+  transition: all 0.4s ease-in-out;
+}
+
+.work-process-box-3:hover::before {
+  background-image: var(--hover-bg, url("/assets/images/services/workprocess/bg-shape.png"));
+}
+
+.work-process-box-3 .content {
+  padding: 40px 60px;
+  position: relative;
+  z-index: 9;
+}
+
+.work-process-box-3 .content::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 80%;
+  content: "";
+  background: #fff;
+  border-radius: 5px 5px 5px 125px;
+  max-width: 370px;
+  box-shadow: 0px 0px 40px 0px rgba(42, 35, 115, 0.06);
+  margin: 0 auto;
+  z-index: -1;
+  transition: all 0.4s ease-in-out;
+}
+
+.work-process-box-3:hover .content::before {
+  height: 100%;
+  background: #1a1f2b;
+  border-radius: 5px 5px 5px 125px;
+}
+
+@media (max-width: 1199px) {
+  .work-process-box-3 .content::before {
+    max-width: initial;
+    height: 100%;
+  }
+}
+
+.work-process-box-3 .content .step {
+  border-radius: 22.5px;
+  width: 60px;
+  height: 137px;
+  line-height: 137px;
+  background: linear-gradient(180deg, #3779b9 0%, #07172b 100%);
+  color: #fff;
+  display: inline-block;
+  position: absolute;
+  bottom: 86px;
+  right: 26px;
+  transition: all 0.4s ease-in-out;
+}
+
+.work-process-box-3:hover .content .step {
+  background: linear-gradient(180deg, #fff 0%, #c0d9f0 100%);
+  color: #07172b;
+  bottom: 96px;
+}
+
+.work-process-box-3 .content .step span {
+  transform: rotate(-90deg);
+  display: inline-block;
+}
+
+.work-process-box-3 .content h3 {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+  margin-bottom: 15px;
+  transition: color 0.4s ease-in-out;
+}
+
+.work-process-box-3 .content p {
+  transition: color 0.4s ease-in-out;
+}
+
+.work-process-box-3:hover .content h3 {
+  color: #fff;
+}
+
+.work-process-box-3:hover .content p {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.work-process-box-3 .icon {
+  width: 138px;
+  height: 138px;
+  line-height: 158px;
+  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%);
+  background-size: 200% auto;
+  border-radius: 50%;
+  margin: 40px auto 0;
+  position: relative;
+  font-size: 70px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.5s ease-in-out;
+  z-index: 1;
+}
+
+.work-process-box-3:hover .icon {
+  background-position: right center;
+  transform: rotateY(360deg);
+  box-shadow: 0 0 30px rgba(55, 121, 185, 0.5);
+}
+
+.work-process-box-3 .icon::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, transparent 30%, rgba(var(--insuba-base-rgb), 0.77)) 70% !important;
+  transform: translate(-50%, -50%);
+  content: "";
+  z-index: -1;
+  transition: background 0.4s ease-in-out;
+}
+
+.work-process-box-3:hover .icon::before {
+  background: rgba(55, 121, 185, 0.12);
+}
+
+/* Responsive Containers per requirements */
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1320px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+
+
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+/* Specific viewports requested */
+
+@media (max-width: 1024px) {
+
+  .work-process-section-3 .left-shape img {
+    display: none !important;
+  }
+
+}
+
+@media (max-width: 992px) {
+  .work-process-box-3 .content {
+    padding: 30px 20px;
+  }
+}
+
+@media (max-width: 500px) {
+  .work-process-box-3 .content .step {
+    right: 10px;
+    height: 100px;
+    line-height: 100px;
+    width: 40px;
+    bottom: 50px;
+  }
+}
+
+@media (max-width: 475px) {}
+
+@media (max-width: 425px) {
+  .work-process-box-3 .icon {
+    width: 100px;
+    height: 100px;
+    font-size: 50px;
+  }
+
+  .work-process-box-3 .icon::before {
+    width: 120px;
+    height: 120px;
+  }
+}
+
+@media (max-width: 320px) {}
+
+/* Tagline & Title for Careers WP3 */
+.wp3-tagline {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #888;
+  letter-spacing: 1px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.wp3-title {
+  font-size: clamp(28px, 4vw, 42px);
+  font-weight: 700;
+  color: #07172b;
+  line-height: 1.25;
+  text-align: center;
+  margin: 0 auto 10px;
+  max-width: 600px;
+}
+
+/* Dashed connector row (matches reference dots + line) */
+.wp3-connector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 830px;
+  margin: 18px auto 10px;
+  position: relative;
+  padding: 0 60px;
+}
+
+.wp3-connector-line {
+  position: absolute;
+  top: 50%;
+  left: 60px;
+  right: 60px;
+  height: 2px;
+  border-top: 2px dashed #3779b9;
+  transform: translateY(-50%);
+  z-index: 0;
+}
+
+.wp3-connector-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #3779b9;
+  border: 2px solid #3779b9;
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+}
+
+/* Hide connector on small screens */
+@media (max-width: 768px) {
+  .wp3-connector {
+    display: none;
+  }
+}

src/app/services-digital-solutions/page.tsx

@@ -11,6 +11,7 @@ import PageHeader from "@/components/common/PageHeader";
 import AboutTwo from "@/components/home/AboutTwo";
 import ResultsSection from "@/components/about/Results";
 import MetatronInitializer from "@/components/MetatronInitializer";
+import CareersWorkProcess from "@/components/careers/CareersWorkProcess";
 
 export const metadata: Metadata = {
     title: "Metatroncube | Digital Solutions: Web, Mobile & SEO Experts",
@@ -31,7 +32,8 @@ export default function Home3() {
                     bannerLeftImage="/assets/images/innerbanner/left/left-services.webp"
                     bannerRightImage="/assets/images/innerbanner/right/right-services.webp"
                 />
-                <FeaturesSection />
+                {/* <FeaturesSection /> */}
+                <CareersWorkProcess/>
                 <ChooseSection />
                 <ServiceSection2 />
                 <WorkProcessSection />

src/components/careers/CareersWorkProcess.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+const CareersWorkProcess = () => {
+    const sectionRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        const elements = entry.target.querySelectorAll(".wow");
+                        elements.forEach((el) => {
+                            const htmlEl = el as HTMLElement;
+                            const delay = htmlEl.dataset.wowDelay || "0ms";
+                            setTimeout(() => {
+                                htmlEl.classList.add("animated");
+                                htmlEl.classList.add("fadeInUp");
+                                htmlEl.style.visibility = "visible";
+                            }, parseFloat(delay.replace("s", "")) * 1000);
+                        });
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.1 }
+        );
+
+        if (sectionRef.current) {
+            observer.observe(sectionRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, []);
+
+    /* ── Icons and hover backgrounds use static images ── */
+    const processSteps = [
+        {
+            id: 1,
+            stepText: "Step 01",
+            title: "Comprehensive digital development",
+            desc: "Expert web, app development and e-commerce solutions.",
+            delay: ".3s",
+            icon: "/assets/images/services/workprocess/icon/comprehensive.webp",
+            hoverBg: "/assets/images/services/workprocess/comprehensive.webp",
+        },
+        {
+            id: 2,
+            stepText: "Step 02",
+            title: "Strategic online growth solutions",
+            desc: "Strategic SEO and digital marketing for growth.",
+            delay: ".5s",
+            icon: "/assets/images/services/workprocess/icon/strategic.webp",
+            hoverBg: "/assets/images/services/workprocess/strategic.webp",
+        },
+        {
+            id: 3,
+            stepText: "Step 03",
+            title: "Creative design and branding excellence",
+            desc: "Creative graphic design and branding strategy services.",
+            delay: ".7s",
+            icon: "/assets/images/services/workprocess/icon/branding.webp",
+            hoverBg: "/assets/images/services/workprocess/branding.webp",
+        },
+    ];
+
+    return (
+        <section
+            ref={sectionRef}
+            className="work-process-section-3 section-padding"
+            suppressHydrationWarning
+        >
+            <div className="left-shape">
+                <img
+                    src="/assets/images/services/workprocess/left-img.webp"
+                    alt="shape"
+                />
+            </div>
+
+            <div className="container">
+                {/* Heading */}
+                <div className="sec-title-wrapper text-center wow fadeInUp" data-wow-delay=".3s">
+                    <div className="sec-title">
+                        <div className="sec-title__shape"></div>
+                        <h6 className="sec-title__tagline">Strategic Digital Services</h6>
+                        <h3 className="sec-title__title">Innovation &amp; Growth</h3>
+                    </div>
+                </div>
+
+                <div className="row">
+                    {processSteps.map((step) => (
+                        <div
+                            key={step.id}
+                            className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
+                            data-wow-delay={step.delay}
+                            style={{ visibility: "hidden" }}
+                        >
+                            <div
+                                className="work-process-box-3"
+                                style={{ "--hover-bg": `url(${step.hoverBg})` } as React.CSSProperties}
+                            >
+                                <div className="content">
+                                    <h3>{step.title}</h3>
+                                    <p>{step.desc}</p>
+                                    <div className="icon">
+                                        <img src={step.icon} alt={step.title} style={{ width: "60px", height: "60px", objectFit: "contain" }} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default CareersWorkProcess;

src/components/home/home-1/AboutSection.tsx

@@ -49,7 +49,7 @@ const AboutSection = () => {
                             </div>
                             <p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">Partner with Metatroncube Software Solutions and unlock a world of digital possibilities in web & app development, SEO, digital marketing, and graphic design services. Our commitment extends beyond mere product delivery; we focus on enhancing your market presence and driving business success with comprehensive digital strategies. Experience the unique Metatroncube advantage in every aspect of digital transformation.</p>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
-                                <div className="Exceptional Digital Quality">
+                                <div className="icon">
                                     <img src="/assets/images/home/2/icon-1.webp" alt="Exceptional Digital Quality" />
                                 </div>
                                 <div className="content">
@@ -58,7 +58,7 @@ const AboutSection = () => {
                                 </div>
                             </div>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
-                                <div className="Expertise in innovation">
+                                <div className="icon">
                                     <img src="/assets/images/home/2/icon-2.webp" alt="Expertise in innovation" />
                                 </div>
                                 <div className="content">
@@ -67,7 +67,7 @@ const AboutSection = () => {
                                 </div>
                             </div>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
-                                <div className="Comprehensive web solutions">
+                                <div className="icon">
                                     <img src="/assets/images/home/2/icon-3.webp" alt="Comprehensive web solutions" />
                                 </div>
                                 <div className="content">

src/components/home/home-1/BannerSection.tsx

@@ -130,7 +130,7 @@ const BannerSection = () => {
                                         {/* Bottom Right "Our Service" Slider */}
                                         <div className="our-services-slider" suppressHydrationWarning>
                                             <div className="slider-header" suppressHydrationWarning>
-                                                <span className="text-white">Our Service</span>
+                                                <span>Our Service</span>
                                                 <div className="slider-progress-bar" suppressHydrationWarning>
                                                     <div className="slider-progress-line" style={{ left: `calc(${(currentSlide % serviceCategories.length)} * var(--slider-slide-width))` }} suppressHydrationWarning></div>
                                                 </div>

src/components/home/home-2/About2Section.tsx

@@ -39,7 +39,7 @@ const About2Section = () => (
                         <p className="mb-35">Metatroncube Software Solutions was born from a passion for technology and a vision to revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have been pioneering custom software solutions since 2019.</p>
                         <div className="about-features-list">
                             <div className="about-feature-item-3 wow fadeInRight" data-wow-delay=".6s">
-                                <div className="Innovative Solutions">
+                                <div className="icon">
                                     <i className="fa-solid fa-microchip"></i>
                                 </div>
                                 <div className="content">
@@ -49,7 +49,7 @@ const About2Section = () => (
                                 </div>
                             </div>
                             <div className="about-feature-item-3 wow fadeInRight" data-wow-delay=".7s">
-                                <div className="Expert Teamwork">
+                                <div className="icon">
                                     <i className="fa-solid fa-users-gear"></i>
                                 </div>
                                 <div className="content">
@@ -59,7 +59,7 @@ const About2Section = () => (
                                 </div>
                             </div>
                             <div className="about-feature-item-3 wow fadeInRight" data-wow-delay=".8s">
-                                <div className="Future-Ready Approach">
+                                <div className="icon">
                                     <i className="fa-solid fa-chess-knight"></i>
                                 </div>
                                 <div className="content">