service last section updated

src/app/globals.css

@@ -2793,7 +2793,7 @@ body {
   z-index: 2;
   width: 200px;
   height: 200px;
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: transparent;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -2801,8 +2801,88 @@ body {
 }
 
 .work-process-thumb .thumb2_1 img {
-  max-width: 80%;
+  max-width: 100%;
-  filter: brightness(0) invert(1);
+  filter: none;
+}
+
+.active-description-center {
+  /* background: #fff; */
+  padding: 40px;
+  border-radius: 50%;
+  width: 450px;
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: absolute;
+  z-index: 10;
+}
+
+@media (max-width: 1300px) {
+  .active-description-center {
+    top: -58px;
+  }
+}
+
+@media (max-width: 1399px) {
+  .active-description-center {
+    width: 380px;
+    height: 380px;
+    padding: 30px;
+  }
+  .close-desc-btn {
+    top: 30px !important;
+    right: 30px !important;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.active-description-center h4 {
+  font-size: 20px;
+  color: #1a1f2b;
+  margin-bottom: 15px;
+  font-weight: 700;
+}
+
+.active-description-center p {
+  font-size: 15px;
+  color: #555;
+  line-height: 1.6;
+}
+
+.close-desc-btn {
+  position: absolute;
+  top: 50px;
+  right: 50px;
+  background: #3779b9;
+  color: #fff;
+  border: none;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 24px;
+  transition: all 0.3s ease;
+  line-height: 1;
+}
+
+.close-desc-btn:hover {
+  background: #1a1f2b;
 }
 
 .work-process-thumb::before {
@@ -2819,15 +2899,16 @@ body {
 .process-card {
   position: absolute;
   background: #3779b9;
-  padding: 15px 25px;
+  padding: 20px 30px 20px 60px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   gap: 15px;
-  width: 240px;
+  width: 260px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   z-index: 3;
   transition: all 400ms ease;
+  min-height: 70px;
 }
 
 /* .process-card:hover {
@@ -2836,9 +2917,9 @@ body {
 
 .process-card .number {
   position: absolute;
-  left: -15px;
+  left: 15px;
-  top: 50%;
+  top: 20px;
-  transform: translateY(-50%);
+  transform: none;
   width: 32px;
   height: 32px;
   background: #1a1f2b;
@@ -2866,6 +2947,20 @@ body {
   letter-spacing: -0.01em;
 }
 
+.description-mobile {
+  display: none;
+}
+
+.process-card.active {
+  background: #1a1f2b !important;
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+  scale: 1.05;
+}
+
+.process-card.active .number {
+  background: #3779b9;
+}
+
 /* Card Positions Around Circle */
 .card-1 {
   top: 0;
@@ -2874,7 +2969,7 @@ body {
 }
 
 .card-2 {
-  top: 30%;
+  top: 25%;
   left: 0;
 }
 
@@ -2896,7 +2991,7 @@ body {
 }
 
 .card-6 {
-  bottom: 60%;
+  bottom: 65%;
   right: 0;
 }
 
@@ -2935,6 +3030,7 @@ body {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
+    align-items: stretch;
     /* padding: 20px; */
   }
 
@@ -2952,6 +3048,43 @@ body {
     transform: none !important;
     width: 100%;
   }
+
+  .active-description-center {
+    display: none !important;
+  }
+
+  .description-mobile {
+    display: block;
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.9);
+    margin-top: 10px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .process-card {
+    position: relative;
+    top: auto !important;
+    left: auto !important;
+    right: auto !important;
+    bottom: auto !important;
+    transform: none !important;
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 25px 30px 25px 55px;
+    gap: 8px;
+    height: 100%;
+  }
+
+  .process-card .number {
+    left: 15px;
+    top: 25px;
+    transform: none;
+    width: 26px;
+    height: 26px;
+    font-size: 12px;
+  }
 }
 
 @media (max-width: 767px) {

src/components/careers/WorkProcessSection.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 const WorkProcessSection2 = () => {
     const sectionRef = useRef<HTMLDivElement>(null);
+    const [activeCardId, setActiveCardId] = useState<number | null>(null);
 
     useEffect(() => {
         const observer = new IntersectionObserver(
@@ -35,14 +36,40 @@ const WorkProcessSection2 = () => {
     }, []);
 
     const processCards = [
-        { id: 1, text: "Consultation & Strategy Development", icon: "tolak-icons-two-lamp" },
+        {
-        { id: 2, text: "Design & Development", icon: "tolak-icons-two-settings-2" },
+            id: 1, title: "Consultation & Strategy Development",
-        { id: 3, text: "Implementation & Optimization", icon: "tolak-icons-two-optimization" },
+            content: "Your vision leads the way. Initially, we deeply understand your needs through consultation. Next, we create a strategy tailored to your goals.",
-        { id: 4, text: "Testing & Launch", icon: "tolak-icons-two-business-analysis" },
+            animationDelay: ".5s",
-        { id: 5, text: "Ongoing Support & Analysis", icon: "tolak-icons-two-support" },
+        },
-        { id: 6, text: "Client Engagement & Feedback", icon: "tolak-icons-two-smart-solution" },
+        {
+            id: 2, title: "Design & Development",
+            content: "Then comes the creative part. Our team combines art and technology. We focus on aesthetically pleasing, functional solutions.",
+            animationDelay: ".5s",
+        },
+        {
+            id: 3, title: "Implementation & Optimization",
+            content: "After that, we turn plans into reality. Each step is optimized for impact and efficiency. Plus, we keep you updated throughout.",
+            animationDelay: ".5s",
+        },
+        {
+            id: 4, title: "Testing & Launch",
+            content: "Next, we aim for perfection. We conduct thorough testing for smooth operation. Once perfected, we launch your project.",
+            animationDelay: ".5s",
+        },
+        {
+            id: 5, title: "Ongoing Support & Analysis",
+            content: "But it doesn’t end there. We offer continuous support and analyze your digital solutions. This way, they evolve with your business.",
+            animationDelay: ".5s",
+        },
+        {
+            id: 6, title: "Client Engagement & Feedback",
+            content: "We value your feedback after launch. Regular check-ins help us improve solutions and stay aligned with your evolving business needs.",
+            animationDelay: ".5s",
+        },
     ];
 
+    const activeCard = processCards.find(card => card.id === activeCardId);
+
     return (
         <div ref={sectionRef} className="work-process-container-wrapper style2">
             <div className="shape">
@@ -60,46 +87,59 @@ const WorkProcessSection2 = () => {
                     <div className="shape1 d-none d-xxl-block">
                         <img src="/assets/images/services/journey/element-2.webp" alt="digital transformation journey" />
                     </div>
-                    {/* <div className="shape2 d-none d-xxl-block">
+
-                        <img src="/assets/imgs/shapes/shape-10.png" />
+                    <div className="row justify-content-center">
-                    </div> */}
+                        <div className="col-lg-8 text-center">
+                            <div className="sec-title-wrapper wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
+                                <div className="sec-title">
+                                    <div className="sec-title__shape"></div>
+                                    <h6 className="sec-title__tagline">digital transformation journey</h6>
+                                    <h3 className="sec-title__title">Embark on a digital transformation journey with Metatroncube</h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
 
                     <div className="row gy-5 gx-70 align-items-center">
                         <div className="col-xl-5">
-                            <div className="work-process-content">
+                            <figure className="main-image m-img wow fadeInUp" data-wow-delay="0.5s">
-                                <div className="sec-title-wrapper wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
+                                <img src="/assets/images/careers/career.webp" alt="Our story" loading="lazy" />
-                                    <div className="sec-title">
+                            </figure>
-                                        <div className="sec-title__shape"></div>
-                                        <h6 className="sec-title__tagline">digital transformation journey</h6>
-                                        <h3 className="sec-title__title">Embark on a digital transformation journey with Metatroncube</h3>
-                                    </div>
-                                </div>
-                            </div>
                         </div>
 
                         <div className="col-xl-7">
                             <div className="work-process-thumb wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
                                 <div className="thumb2_1">
-                                    <img
+                                    {activeCard ? (
-                                        src="/assets/images/services/journey/centre-img.webp"
+                                        <div className="active-description-center">
-                                        style={{ filter: "none", maxWidth: "100%" }}
+                                            {/* <h4>{activeCard.title}</h4> */}
-                                        alt="thumb"
+                                            <p>{activeCard.content}</p>
-                                    />
+                                            {/* <button onClick={(e) => { e.stopPropagation(); setActiveCardId(null); }} className="close-desc-btn">×</button> */}
+                                        </div>
+                                    ) : (
+                                        <img
+                                            src="/assets/images/services/journey/centre-img.webp"
+                                            style={{ filter: "none", maxWidth: "100%" }}
+                                            alt="thumb"
+                                        />
+                                    )}
                                 </div>
 
                                 {processCards.map((card) => (
-                                    <div key={card.id} className={`process-card card-${card.id}`}>
+                                    <div
+                                        key={card.id}
+                                        className={`process-card card-${card.id} ${activeCardId === card.id ? 'active' : ''}`}
+                                        onClick={() => setActiveCardId(activeCardId === card.id ? null : card.id)}
+                                        style={{ cursor: 'pointer' }}
+                                    >
                                         <div className="number">{card.id}</div>
-                                        {/* <div className="icon">
+                                        <div className="content-wrap">
-                                            <span className={card.icon}></span>
+                                            <div className="text">
-                                        </div> */}
+                                                {card.title}
-                                        <div className="text">
+                                            </div>
-                                            {card.text.split('\n').map((line, i) => (
+                                            <div className="description-mobile">
-                                                <React.Fragment key={i}>
+                                                {card.content}
-                                                    {line}
+                                            </div>
-                                                    {i === 0 && <br />}
-                                                </React.Fragment>
-                                            ))}
                                         </div>
                                     </div>
                                 ))}